Installing Clara Child Theme

Before installing this child theme

  • Install the latest version of Divi on a fresh WordPress installation
  • Check if you met all of the hosting requirements settings under Divi > Support Center

Installing this child theme will overwrite the existing website.

You can install Clara with the one-click demo import tool (this will install all the pages and settings in one go). Or you can choose to install it manually (in very rare cases the one-click demo import doesn’t work in that case, you can use the manual method).

One-click demo import

Step 1: download and import Clara child theme

  • Download the folder clara-divi-child-theme.zip to your computer.
  • Go to Appearance > Themes and click on Add New. Locate the clara-divi-child-theme.zip file on your computer and then click Install Now. When the installation is complete click on ‘Activate’, you will then see the Clara Child Theme as the active theme in your theme panel.

Step 2: import demo content

Navigate to Clara Demo Import and click on Easy demo Import

Then click on the button Import Demo Content.

After the import you can click on Remove Demo Content and Import Functions.

That’s it all the demo content is imported now.

Manual Installation

Use the Manual Installation method in case the one-click demo import does not work for you.

Step 1: download Clara child theme

  • Download the folder supplementary-product-files.zip to your computer.
  • Unpack this folder.

Step 2: install the Clara divi child theme

In your WordPress dashboard navigate to Appearance > Themes and click on Add New.

Locate the clara-divi-child-theme-manual.zip file in the supplementary-product-files folder on your computer and then click Install Now.

When the install is complete click on ‘Activate’, you will then see the Clara Child Theme as the active theme in your theme panel.

Step 3: upload the JSON files

  • Go to Divi > Theme Options. Click on the import/export options (up/down arrow).
    Click on Import and upload Clara Theme Options.json.
  • Go to Divi > Theme Builder. Click on the import/export options.
    Click on Import and upload Clara Theme Builder Templates.json.
  • Go to Divi > Theme Customizer. Click on the import/export options (up/down arrow).
    Click on Import and upload Clara Customizer Settings.json.
  • Go to Divi > Divi Library. Click on the import/export options.
    Click on Import and upload Clara Builder Layouts.json.
Step 4: import widgets for sidebar

  • Go Plugins and install the plugin Widget Importer & Exporter by ChurchThemes.com

After installation go to Tools > Widget Importer & Exporter

Choose file (bestand kiezen for my Dutch language).

Search for the file clara-widgets.wie in your supplementary product files folder.

And click on Import Widgets.

If you get an error message then do the following:

Open your clara-widgets.wie file and copy all the contents.

Then click on the link copy and paste and paste your just copied content.

Step 5: add the pages

  • Go to Pages > Add New. Give your page a name for example Home.
  • Click on Use Divi Builder
  • Click on choose a premade layout
  • Go to the tab Your Saved Layouts
  • Here you will find all the pages from the demo. Load the Home page and publish it.
  • To add the other pages as in the demo you do the same steps.

Step 6: add a menu

  • Go to Appearance > Menus and create a menu and add your page(s) to it.
  • Go to Settings > Reading. Check A static page
  • Set Homepage: to your home page
  • Leave the post page unset

How to…

Change the header and menu

Go to Divi > Theme Builder and open the Global Header.

  1. Click on the 3 dots to expand the bottom bar
  2. Click on the + symbol
  3. Click on Your Saved Layouts
  4. Check Header And Menu

Now you can choose your header version. Check the demo site on how they look.

Change the hero section

Open a page in the visual builder where you want to change the hero or sub header.

Click on the blue + symbol to add a new section.

Change to the Add From Library tab.

Choose your hero header version.

Remove the title underline

Open the text module and go to the advanced tab. Under CSS Class remove clara-title class.

Colors

Global colors

This design uses 4 global colors:

If you change the global color it will change for the entire site.

I will use an example below with different colors but the principle is the same.

For example, I will change the orange color to green.

Open any module, row, or section that has this color.

In the image below I do this with the button module. I go to the icon tab that has the orange global color.

  1. Click on Global
  2. Make sure the dark blue color is selected
  3. Change the color
  4. Click on the cogwheel

Click on Finish Editing Global Colors. 

You should get a warning if you are sure to change this. Clickon Yes.

Dropdown menu line color

Go to Appearance > Theme File Editor.

1) at line 18 you can change the bottom border color.

2) at line 24 you can change the arrow color.

Collapsing mobile menu icon

Go to Appearance > Theme File Editor.

1) at line 30 you can change the icon color.

2) at line 31 you can change the icon background color.

Header underline color

Go to Appearance > Theme File Editor.

1) at line 37 you can change the line background color.

Blod sidebar colors

Go to Appearance > Theme File Editor.

1) at line 42 you can change the search bar border color.
2) at line 46 you can change the latest post bottom border color.
3) at line 50 you can change the latest post text color.
4) at line 54 you can change the latest post background color.
5) at line 58 you can change the category background color.
6) at line 62 you can change the category item background color.
6) at line 63 you can change the category border bottom color.
6) at line 67 you can change the category text color.

Need Help?

Email: info@markhendriksen.com

Free Layout Packs

Join my free membership and get access to 17 free Divi layout packs.

Join Free Membership