Installing Focus Child Theme
Before we begin, make sure you have Divi installed on WordPress before installing this child theme. We recommend doing this on a fresh WordPress installation.
The Divi theme is not included in this package. To download Divi, you must have an Elegant Themes Membership.
Some images have been replaced due to licensing.
The page links from buttons and logo are removed, so you need to relink those to the right pages.
Download and unzip the ‘Focus_Child_Theme_UNPACKME.zip’ file to your computer.
In your WordPress dashboard navigate to Appearance > Themes and click on Add New.
Locate the focus-child-theme.zip file in the Focus_Child_Theme_UNPACKME folder on your computer and then click Install Now.
When the install is complete click on ‘Activate’, you will then see the Focus Child Theme as the active theme in your theme panel.
Go to Divi > Theme Options. Click on the import/export options (up/down arrow).
Click on Import and upload Focus Theme Options.json.
Go to Divi > Theme Customisation. Click on the import/export options (up/down arrow).
Click on Import and upload Focus Customizer Settings.json.
Go to Divi > Divi Library. Click on the import/export options.
Click on Import and upload Focus Builder Layouts.json.
Go to Pages > Add New. Give your page a name for example Home.
In the Divi Builder Click on Load Layout then click on Your Saved Layouts.
Here you will find all the pages from the demo. Load the Home page Focus and publish it.
To add the other pages as in the demo you do the same steps as above. Create a new page for example About us. Then you go Load Layout then click on Your Saved Layouts and pick the page layout you want to use.
To add the background video follow these steps:
Open the home page and open the fullwidth section (the section not the fullwidth header module)
In the Background: field go to the video tab.
Upload the video. You can find this in the Video folder in the Focus_Child_Theme_UNPACKME folder.
Call To Action button in menu
To create the Call to action button in the menu you have to add a CSS class to this menu item.
Go to appearance > menu go to screen options (top right) and enable CSS classes. Expand the contact menu item and add the class cta_menu
Don’t forget to add a menu and set the Home page as static.
Some images we used in the demo website are paid versions, so we have those replaced with free ones.
Creating a blog post
To create a blog post with the same layout as Focus you do the following:
Go to Posts > Add New
Go to Load From Library > Add From Library and choose Single post.
In the right upper right corner, you find the Divi Post Settings. Make the following adjustments:
Page Layout: Full Width
Post Title: Hide
Create your own page
If you want to create a custom page, but you want to use the same sections like the footer, CTA sections etc then follow these steps.
Go to Pages > Add New.
Click on the Divi Page Builder button.
Click on Add From Library and load the sections you want to use.
404 and category page
To edit the content of the 404 and category page, you go to Divi > Divi Library.
Then you open the 404 or category page. You can make your edits here.
Search result page
Focus has a custom designed Search result page.
In order to show a decent excerpt in the results, you have to add them to the pages.
Open a page and scroll down to the excerpt box. Place the text in this box that you want to show up on the search result page.