Installing Atlas 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 Atlas 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 Atlas child theme

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

Step 2: import demo content

Navigate to Atlas 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 Atlas child theme

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

Step 2: install Atlas divi child theme

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

Locate the atlas-divi-child-theme.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 Atlas 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 Atlas Theme Options.json.
  • Go to Divi > Theme Builder. Click on the import/export options.
    Click on Import and upload Atlas Theme Builder Templates.json.
  • Go to Divi > Theme Customizer. Click on the import/export options (up/down arrow).
    Click on Import and upload Atlas Customizer Settings.json.
  • Go to Divi > Divi Library. Click on the import/export options.
    Click on Import and upload Atlas Builder Layouts.json.

Step 4: 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 5: 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 & menu

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

  1. Click on load from library
  2. Click on Your Saved Layouts tab

Then scroll to the bottom and you will find the header and menu layouts.

Remove or change the slide-in effect behind the image

On some images, you see first a black and then a green background sliding before the image appears.

To remove or change those colors switch to wireframe (left-bottom icon) from the visual builder.

You can open the slide green and black module and change the color from the background, or you can remove those modules in case you do not want this effect.

Change content of the full-screen overlay menu

Go to Divi > Theme Builder and open the Global Header

Switch to wireframe view (left-bottom).

Some modules are visible on only desktops and some only on tablets and mobiles. You can see that in the module descriptions.

Colors

Global colors

This design uses 3 global colors:

  • Dark #0a070a
  • Light Green #00eab7
  • Green (hover) #00cc99

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.

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.

Full-screen overlay menu hamburger icon

Go to Appearance > Theme File Editor.

On line 36 you can change the background color.

On line 40 you can change the icon hover color.

Full-screen overlay sub-items icon

Go to Appearance > Theme File Editor.

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

2) at line 45 you can change the icon color.

Project section home page (scroll-effect)

Go to Appearance > Theme File Editor.

On line 51 you can change the text color when scrolling down

On line 55 you can change the background color when scrolling down.

Blog meta background

Go to Appearance > Theme File Editor.

On line 60 you can change the meta background color.

1) at line 72 you can change the check mark 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