
On this page you will find everything you need to install your child theme.
If you haven’t already, join the big friendly Facebook community of like-minded people in The Design Space Lounge where we all share inspiration and expertise, and get help when we’re stuck on something.
If you have any technical problems with installation itself, please do submit a ticket.
01.
INSTALLING & USING Divi
If you haven't used Divi at all before, we recommend starting right here.
Divi Documentation and Support Forums
Elegant Themes has comprehensive Divi Theme Documentation, with sections on Basics, Modules, Library, Theme and Module Customizers and Additional Features.
If you don't find what you need there, check out their Divi Support Forum in the members area, where you can open a ticket if you haven't find the answer you're looking for.
Keep an eye on the Elegant Themes blog with its Divi Resources tag.
Divi Nation is the podcast to tune in to for curious interesting and downright brilliant Divi talk.
There is also the very fabulous Divi Theme Users Facebook group which you can join to see and take part in knowledge sharing and discussion.
InstallING Divi
Here's the official Divi installation video by Elegant Themes.
Divi basics
- If you haven't used Divi before we highly recommend you watch this video by Elegant Themes, which introduces the Divi Builder and will help you understand the basic principles of the Divi page builder.
- Working with Divi Builder is impressively intuitive, so you may well find you can just get stuck in and learn as you go, but if you would like a little more guidance then the Divi Basics section of the Elegant Themes Divi Documentation area has excellent walkthroughs that will give you a thorough overview.
02.
INSTALLING YOUR CHILD THEME USING THE INSTALLER PLUGIN
Our one-step install creates a perfect replica of the demo site, complete with pages, posts, images, menus and more.
Note: Because the demo data includes all of those things, please check the boxes to indicate which parts of the demo site you wish to install.
child theme installation
1. Get the download and unzip it
- Your download can be found in your Account Area under Downloads. Click DOWNLOAD and the zip file will download to your computer.
- The file is called UNZIPME - NAME OF YOUR THEME KIT.zip. Use your computer's search function with your template name if you don't know where it went, but it's probably in your Downloads area.
- Now unzip the file - as you can see from the name we have given to the download file, this is a step that is often missed in the excitement.
To unzip on a Mac it's Right click > Open or double click. On a PC Right click > Extract. Some computers are set to auto unzip on download, in which case jump straight to look at your files.
Inside the unzipped folder, you will find the installable theme zip file, an instructions file that links to this area and any additional plugins and design files included with your product.
2. UPLOAD the child theme into the themes area
Go to Appearance > Themes.
Upload your installable child theme file to the Themes area and activate the theme. You will need to make sure that you have Divi installed first.
Once the theme is active, you will see an installer prompt in the left hand menu. It will show the name of your theme. eg. Olivia Demo Installer.
Follow the prompts to install the demo content and data.
FONTS, PLUGINS & INSTAGRAM
Visit our demo site here.
- The free Google fonts used are Lato, Raleway, and Bentham. You can download all Google fonts here.
- The plugin WooCommerce is recommended with this theme but is optional if you do not need a store function.
- If you would like to use the Home Page Two layout or Splash Page Layout, you will also need Sticky Menu, prompted on install.
- Our demo makes use of the Divi-included Bloom plugin for a newsletter signup. Visit the Plugins section for details on how to get set up with Bloom.
MENU SETTINGS
- The main navigation menu on our demo uses scrolling links for menu items ABOUT, CLIENTS and CONTACT with the anchors #about #clients and #contact.
For help with setting up menu items go here and for help with link URLs go here.
PROJECTS SETTINGS
This template makes use of Projects for the client information sections.
- Once you’ve created the projects you will need to configure the settings of the filterable portfolio module on the portfolio page and the portfolio module on home page one. It’s rather like when you configure a blog module – you have to set each module to fetch categories of products you want display there.
SPLASH & HOME PAGE SETTINGS
- For the home page two and splash pages to have the top menu and footer bar hidden as on our demo, select Blank Page from the Template drop down list in the Page Attributes area.
STICKY MENU PLUGIN SETTINGS
- To get the sticky menu staying stuck, go to Settings > Sticky Menu and enter #stickymenu in the Sticky Element area (try saying that quickly on a Friday night).
- While you’re here, go to the Advanced Settings tab and set the Z-index to 99999 to make sure the menu stays on the top layer.
A visit to the settings of the Sticky Menu module on the page will show that stickymenu anchor under Custom CSS > CSS ID, in case you were wondering how that worked.
PERSONALISE YOUR CHILD THEME
We know it can be daunting to take the first steps towards making a template your own, especially if you're not overly familiar with using Divi or WordPress. We've included the areas we find most people want help with when starting out with personalising their site.
WORDPRESS Settings AREA
On the dashboard, go to Settings and take a look around the settings areas. There are a couple of things you will want to get configured right away.
Go to Settings > Reading.
- In the Front page displays area select A static page. Set the Front page to be HOME or whatever other crazy name you've given the page you want people to land on first.
- If you are planning to use the theme's included blog layout (rather than let WordPress autogenerate the blog page) leave the Posts page as -Select- and click the blue Save Changes button before you move on.
Go to Settings > Permalinks.
- Select Post name as your permalink setting - we find this one works best for most sites. Save Changes before you leave.
Divi Theme Options
Go to Divi > Theme Options and have a look around.
- Most of what you need for now will be in the General Settings tab.
- This is where you set your Logo image, enter your social media Profile URLs and select your Colour Pickers Default Palette.
- You can also add your social media links here
Divi Theme Customizer
Go to Divi > Theme Customizer
- The sidebar on the left gives you access to global settings for all sorts of aspects of your site. On the right is your site, so you can see the effect of any changes you make in real time.
- Work through the tabs, methodically changing colours, fonts and any other controls to reflect your brand.
- To update your Favicon image, go to Site Identity > Site Icon area. Just make sure the file is 512px x 512px and is a png or jpg!
- One you will want to get to is Footer > Bottom Bar > EDIT FOOTER CREDITS (unless of course you want us to take the credit in perpetuity for your website in all its glory).
- The controls in the bottom left corner are super handy for taking a look at how your site will appear on different device screens.
- Click on the blue Save & Publish button at the top left when you're happy with any changes you make in here
WorkING with links
- Most of our templates contain navigation links that use URLs.
- When you install your template they are set up to link to our demo site. You will need to edit the URLs to link to your own content.
- You'll know if you missed a URL link edit when you click a link in your site and find yourself feeling puzzled and looking at our demo site again!
- In the Special Features section you will find some pointers on where to look for URLs that will require editing for your template.
- Links may be to pages, posts or external links. You'll find the URL in the settings for the module that has the link.
- Scrolling links (the ones that take you to a particular place on a page) have #whatever at the end of the URL. You should leave that #ending untouched because it works with a CSS ID anchor we have included.
- You can also make your own scrolling links by inserting the anchor word of your choice in the CSS ID setting for a section, row or module.
WorkING with images
Our recommended image sizes (longest side) are:
- Full width images: 1920px
- Gallery images :1200px
- Blog post images and images for central content: 1080px
Go to Media > Media Library. You will see the images that came with the download - they are there as place holders only and won't be needed once you've got your own fabulous images uploaded. It's really easy to upload your own image files by clicking Add New and using drag and drop or Select Files according to preference.
- Go ahead and upload some of your own images so that you can use them to start making your theme your own.
- To change an image displayed by a module go to its settings and edit Image URL, Background Image URL or the Gallery associated with the module.
- To change an image displayed by a widget (in sidebar and footer areas) go to Appearance > Widgets and edit settings for the widget.
- For a little more help with images head to our Further Learning area, or for a lot more help, sign up for our SiteSchool course.
WorkING with fonts
There are a whole lot of ways to work with fonts in Divi, but let's keep it as simple as possible.
- There is a large selection of native fonts that come along with Divi, which represent about 2/3 of the free Google Fonts selection. These are the fonts that appear on drop-down selection lists for fonts within Divi Builder.
- Custom fonts, not native to Divi, may be free or paid-for downloads. Google Fonts, Font Squirrel and Creative Market are all good sources. It is good practice to use only fonts which you have a license to use for the web.
- In the Special Features section we include a list of the fonts used in the demo for your template. Wherever possible we use Google fonts, which are free to download and use. Any non-native fonts you want to use will need to be installed as custom fonts.
UPLOADING CUSTOM FONTS
- Divi supports uploading of custom fonts and you can do this through any text module, via the font selector. Once uploaded the font will become available in all font selectors.
- Note. Many WordPress installs natively block the upload of custom fonts (and other file types that aren't images). You can edit your WordPress functions.php file to temporarily allow font uploads. Once your font is uploaded, you should delete the script which might weaken your website security.
This tutorial from Elegant Themes shows you how to do it.
WorkING with CSS
Our child themes usually contain a small amount of custom code (CSS) to give your theme some finishing touches.
We have written the least possible code required and annotated it clearly so that you can update it easily if you need to. Importantly, changes you make to our CSS won't be affected when you update the Divi parent theme or your Design Space template.
Go to Appearance > Editor. In the Select theme to edit dropdown at top right select your theme.
- CSS code looks a little intimidating, but it's really truly OK and not scary once you start to get familiar with the terminology.
- We recommend that any additional CSS is entered below ours, for clarity.
- If you would like to test a change in your browser without making it live, we recommend using Chrome Developer Tools or the FireFox browser extension Firebug.
- For further help with CSS sign up for our SiteSchool course.
Social Media Integration
MONARCH SOCIAL SHARE & FOLLOW PLUGIN
- MONARCH is a plugin for social follow and share buttons that is included with your Elegant Themes membership. You can add share and follow buttons to pages, posts, sidebars and footer areas.
- You will need to go into Tools > Monarch Settings to configure this plugin.
INSTAGRAM FEED
Showing your Instagram Feed is really easy. We recommend this free plugin.
Instagram Feed by Smash Balloon.
Tip: Make sure you have logged into Instagram in your browser, then follow the three simple steps and place the suggested shortcode [instagram_feed] in any text or code module, where you'd like your feed to appear.
You can also check out this blog post about How to Add An Instagram Feed to Your Website.
Divi Child Theme FAQs
Select your template to view font information, details of special features and a video tour of your template with Melissa.
Theme install style sheet message when I try to install my .zip
If you're seeing this Style Sheet Misssing message check when you tried to upload to the themes area, you need to upload the installer file to the Plugins area and delete the plugin after installation.
I get 'No Results Found' where I should have blog posts
First, make sure you have some blog posts and some categories assigned to them. Next, locate the blog module and in its General Settings select the post categories you would like displayed by the module. Save & Exit, Update.
MY BLOG PAGE LAYOUT ISN'T SHOWING
Go to Settings > Reading and make sure that your Posts page is set to blank. If you have allocated Posts to your blog page, that will override your Divi page layout.
HOW BIG SHOULD My IMAGES BE?
Our recommended image sizes (longest side) are:
- Full width images: 1920px
- Gallery images :1200px
- Blog post images and images for central content: 1080px
Go to Media > Media Library. You will see the images that came with the download - they are there as place holders only and won't be needed once you've got your own fabulous images uploaded. It's really easy to upload your own image files by clicking Add New and using drag and drop or Select Files according to preference.
- Go ahead and upload some of your own images so that you can use them to start making your theme your own.
- To change an image displayed by a module go to its settings and edit Image URL, Background Image URL or the Gallery associated with the module.
- To change an image displayed by a widget (in sidebar and footer areas) go to Appearance > Widgets and edit settings for the widget.
- For more help with images sign up for our SiteSchool course.
I STILL HAVE A QUESTION
If you've had a really good look on this page and you're still stuck, log a support ticket with us and we will help you.
Our Favourite Plugins for Divi
A round up of our recommended plugins.
INSTAGRAM FEED
Showing your Instagram Feed is really easy. We recommend this free plugin.
Instagram Feed by Smash Balloon.
Tip: Make sure you have logged into Instagram in your browser, then follow the three simple steps and place the suggested shortcode [instagram_feed] in any text or code module, where you'd like your feed to appear.
You can also check out this blog post about How to Add An Instagram Feed to Your Website.
WooCommerce / E Commerce Plugin
If you want to sell something through your site you're going to need an eCommerce plugin. WooCommerce is free to install, is easy to configure with PayPal or Stripe, and has an easy install process.
For templates where we use WooCommerce in our demo we prompt you to upload and activate it during the install steps, but it can be used with any of our Divi templates.
Divi has built-in WooCommerce integration and even has a shop module which you can insert into any page to display your products or product categories.
Also, check out this blog post Using WooCommerce With Divi.
For further learning on using WooCommerce sign up for our SiteSchool course.
We aim to offer high quality support to our customers every step of the way. If you have noticed an error on this page - maybe something that has gone out of date due to upgrades, or a typo - please let us know so that we can continue to be the best we can.