soho child theme for divi

Welcome to our Divi support area.

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

In this section we will help you get started with the Divi parent theme, from installation through finding your way around and getting further information and help. The Divi documentation from Elegant Themes is impressive and very easy to follow.

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

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. 

eg. You might choose not to install pages, but the layouts will still be imported into your Divi Library area so that you can apply them to your existing pages. 

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. 

Special features of SOHO
FONTS, PLUGINS & INSTAGRAM

Visit our demo site here.

The free Google fonts used are Montserrat and PT Sans. You can download all Google fonts here.

The Soho logo font (not included with the theme) is Kings Gambit free to download from Dafont.

The Instagram feed is located in a text module labelled INSTAGRAM FEED (from https://lightwidget.com/) at the bottom of the home page and in the Text: INSTALOVE widget of the sidebar widget area.

We’re distributing the premium plugin Portfolio Posts Pro with this theme to enable you to get the lovely full width carousel of blog posts on the home page. It was specially designed for Divi and is easy to use. The module is on the home page labelled Blog Grid.

It works the same as any other blog module, so go to General Settings > Include Categories and select any post categories you wish to be displayed. The images are pulled through from the Featured Image of each blog post.

OFFSET HEADINGS

We love the way that titles overlay images in this theme, like this one…

To achieve the offset, we have set a negative Custom Margin value in the Advanced Design Settings of the text modules where you see that effect. If this style doesn’t work for you, you can change the setting.

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 FontsFont 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.

USE ANY FONT PLUGIN

  • We recommend you install custom fonts with the Use Any Font plugin. With Use Any Font you can assign fonts to be used for typography settings across your whole site. It's a great way to keep your site consistent, and we think it's especially useful for those new to Divi.
  • Use Any Font can upload and manage all your fonts including those that are native to Divi, and many users find this approach the most straightforward.
  • Here's Melissa with a walkthrough of Use Any Font. Take a look before you dive in and you will soon find you have your fonts at your fingertips.

Other places you may need to go look for font settings are the Theme Customizer, individual module settings, and the custom CSS (with the selector font-family: ) but note that this is not an exhaustive list. For a little more help with fonts head to our Further Learning area, or for a lot more help, sign up for our SiteSchool course.

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
Here are some starting points for integrating our recommended social media tools, which are generally free plugins or free widgets.

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 failed message when I try to install my .zip

If you're seeing this Theme Install Failed message check which .zip file you tried to upload. In this example I've tried to upload the DOWNLOAD KIT zip.

What I should have done is unpacked the download, where I would find Flora_Theme.zip, which is the one to choose when uploading your theme for 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.
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.

FIND OUT MORE 

Also, check out this blog post Using WooCommerce With Divi.

For further learning on using WooCommerce sign up for our SiteSchool course.

Other Plugins we highly recommend

The first two plugins are included with your Elegant Themes membership. To get hold of them, head over to Elegant Themes and use your login to access the downloads.

  • MONARCH -  An excellent social sharing plugin. It makes your social media sharing and following integration smooth and painless.

VIEW MONARCH DOCUMENTATION

  • BLOOM - A terrific email opt-in plugin. It helps you build your email list from your website visitors. Bloom appears as a dashboard item once installed to access settings.

VIEW BLOOM DOCUMENTATION

JQUERY PIN IT PLUGIN

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.