atelier child theme for divi
Welcome to The Design Space.

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. 

installing your theme using the plugin
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 (name of your theme-installer.zip) , an instructions file that links to this area and any additional plugins and design files included with your product.

2. UPLOAD THE THEME INSTALLER PLUGIN TO THE PLUGINS AREA

If you have previously purchased themes from the The Design Space Co this next step will be very different to how you have installed your themes in the past. Your new theme is no longer uploaded as a theme but now as a plugin.

 

  • In the dashboard area of your website, hover over the Plugins item in the left hand menu then select Add New.
  • Once the Add Plugins page has loaded click on the Upload Plugin button towards the top of the page.
  • Now locate the name of your theme-installer.zip file and click the Install Now button.
  • There may be a slight delay as the plugin is uploaded but once the process has finished you will be presented with the below screen. Click on the Activate Plugin button.
  • On activating the plugin a new menu item called name of your theme Installer will be added towards the bottom of the left hand dashboard menu. Click on it to continue to the next theme setup step.
  • The below screen should now appear which allows you to choose what data and templates you would like to include in your installation. Click on the toggles to turn options on and off as you work down the screen. If you are not sure just leave all the toggle options as they are and keep scrolling until you reach the bottom of the page.
  • When you are happy with all your toggle settings and get to the bottom of the page, click on the Begin Site Import! button to move to the next stage of the installation.
  • The black progress bar will move towards 100% as the theme and all it's accompanying files are uploaded. Once this process is finished you will see the below scree. Well done, you've successfully installed your new theme.
Special features of atelier
FONTS USED IN ATELIER

Visit our demo site here.

The free Google fonts used are Abel, Cardo, Lato and Playfair Display. You can download all Google fonts here.

Lemon Tuesday is free for commercial use from DaFont.

STYLING THE LAST LINK IN THE MENU

LAST MENU LINK WITH DIFFERENT FONT

In the demo, you’ll see that the Lemon Tuesday font has been applied to the final link in the menu. To do this, go to Menu > Appearance and use the Screen Options button in the top to reveal the CSS class box and add the custom class .last-link to the menu item you wish to apply your font to.

MENU SETTINGS

For help with setting up menu items go here and for help with link URLs go here.

  • The store and blog pages include custom menus. Create a custom menu in the Appearance > Menus area, and assign it in the settings of the Full Width Menu module at the top of the store and blog pages.
    • To make the STORE CATEGORY menu go to Screen Options and select Product Categories, which will then appear as an option for creating menu items.
  • Create a menu with your product categories and assign it in the Store Menu module on the Store page.
SMASH BALLOON INSTAGRAM FEED PLUGIN

With Instagram growing evermore popular it's never been more important to have your Instagram feed connected to your website. Here at The Design Space Co we recommend a plugin called Smash Balloon. It's easy to use easy to set up and free. Watch the video below from Melissa on how to set it up for your own website.

RESPONSIVE LIGHTBOX & GALLERY PLUGIN

The beautiful masonry mosaic gallery is designed using a plugin called Responsive Lightbox & Gallery. This powerful plugin allows you to create great looking galleries quickly and easily. Please check out the video below to see the plugin in action.

WOOCOMMERCE

WooCommerce is a wonderfully powerful and easy to use plugin which makes adding a shop to your website very straightforward. Please view our blog article here on how to use Divi and WooCommerce together,  a comprehensive overview of this powerful plugin.

WooCommerce also have a brilliant article introducing ecommerce for Wordpress which you can read by clicking here

Further resources are available at the moin WooCommerce site here.

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.