Installing Sofia 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 Sofia 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).

Updating child theme

When an update occurs for this child theme make sure to check this documentation first. I will explain the steps to take for updating.

Your own custom CSS code

If you want to use your own CSS code then I recommend placing this code in Divi > Theme Options > CSS, below the CSS code from this child theme.

This will make sure that your own CSS code will not be overwritten by a child theme update.

One-click demo import

Step 1: Install Divi theme

  • Install the Divi theme on a new WordPress installation.

Note: You have to install a new WordPress installation, if you use an existing installation the installation of this child theme will likely fail.

Step 2: download and import Sofia divi child theme

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

Step 3: import demo content

Navigate to Sofia 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.

If you encounter any issues then you can check out this troubleshooting article.

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 the supplementary files

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

Step 2: Install the Sofia child theme

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

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

When the installation is complete click on ‘Activate’, you will see the Sofia 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 Sofia Theme Options.json.
  • Go to Divi > Theme Builder. Click on the import/export options.
    Click on Import and upload Sofia Theme Builder Templates.json.
  • Go to Divi > Theme Customizer. Click on the import/export options (up/down arrow).
    Click on Import and upload Sofia Customizer Settings.json.
  • Go to Divi > Divi Library. Click on the import/export options.
    Click on Import and upload Sofia Builder Layouts.json.

Note: Each of the JSON files need to be uploaded in a different location.

Step 4: Import Widgets

To import the widgets you can use a free plugin.

Go to Plugins > Add a new plugin

Search for Widget Importer & Exporter and install this plugin.

After activating this plugin go to Tools > Widget Importer & Exporter.

Click on Choose file (Bestand kiezen) and locate the Sofia widgets.wie file inside your supplementary folder.

Then click on Import Widgets.

Step 5: add a menu and additional settings

  • 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

Step 6: 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.

How to

How to change the header version

Go to Divi > Theme Builder and open the global header.

1 – Click on the blue + symbol
2 – Click on Add From Library

Check Header & Menu

Here you can choose your header layout.

How to change the hero header version

The hero headers versions are saved as sections in the Divi Library. You can import them by opening a page and click on the blue + symbol. From here navigate to Add From Library.

On the left side check Hero Headers and you can choose your hero header version.

Change the post layout

Go to Divi > Theme Builder

For demo purposes, I have assigned Post with Sidebar to All Posts and 1 post to the full-width template.

To change the assignments click on the 3 dots and then on Manage Template Assignments. From here you can choose where to assign the template too.

Link thank you page to contact form

If you like to use the thank you page as a redirect for you contact form submission then you have to assign the tank you page to it.

Open the contact module and scroll down to the redirect tab.

Enable Redirect and place your Thank you page URL in here.

How to enable the coming soon page

To set the coming soon page as your home page go to Settings > Reading

And set the Coming soon page under Your home page displays.

How to enable the header and footer for the lead magnet or sales page

Go to Divi > Theme Builder.

Under the template for the coming soon, lead magnet and sales page the eye icons next to the Global header and footer are disabled. 

By clicking on them the will be enabled. 

Colors

Dropdown menu arrow color

Go to Divi > Theme Options > CSS.

At line 4 you can change the arrow color.

The dropdown top border color can be changed from the menu module.

Dropdown menu line color

Go to Divi > Theme Options > CSS.

At line 25 you can change the line color.

Collapsing mobile menu icon

Go to Divi > Theme Options > CSS.

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

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

Portfolio header background color

Go to Divi > Theme Options > CSS.

At line 32 you can change the porrtfolio header background color.

Inner border blurb

Go to Divi > Theme Options > CSS.

At lines 38, 39, 43, and 44 you can change the border color.

Inner border section

Go to Divi > Theme Options > CSS.

At lines 50, 51, 55, and 56 you can change the border color.

Inner border row

Go to Divi > Theme Options > CSS.

At lines 62, 63, 67, and 68 you can change the border color.

Background color projects (home page)

Go to Divi > Theme Options > CSS.

At lines 75, 79, and 83 you can change the background color.

Blog title and meta bg

Go to Divi > Theme Options > CSS.

At lines 89 and 93 you can change the background color of the title and meta.

Blog sidebar categories

Go to Divi > Theme Options > CSS.

1) at lines 99 and 103 you can change the background color.

Blog pagination

Go to Divi > Theme Options > CSS.

1) at line 121 you can change the text color

2) at line 122 you can change the background color

3) at line 123 you can change the border color

4) at line 128 you can change the hover text color

5) at line 129 you can change the hover background color

 

Trouble shooting

If you encounter any issues then you can check out this troubleshooting article.

Need Help?

Email: info@markhendriksen.com

Most common issues

Try these solutions if you encounter any installation issues.

Problems and solutions

Free Layout Packs

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

Join Free Membership