Getting started
Accessing your product
You can download your new child theme from the link included in your order confirmation email, from your Brand & Build account, or your Divi Marketplace account.
You will have two files: child-theme-name.zip and child-theme-name-supplementary-files.zip.
child-theme-name.zip is your actual child theme. Do NOT extract this zip file, but DO extract child-theme-name-supplementary-files.zip as it contains a changelog, and any additional assets or information required for the child theme.
Before you begin
You must have the Divi Theme by Elegant Themes installed to use this Child Theme but it does not need to be active.
An Elegant Themes Membership is required to download the Divi Theme. The Divi Theme is NOT included with this child theme.
Please note: the images in the demo have been replaced with placeholder images in the actual theme files, and sizing information is supplied to make them easily replaceable.
To avoid any issues during installation it is highly recommended that you use this child theme on a fresh WordPress installation.
It is also a good idea for SEO purposes to navigate to Settings > Permalinks and set the Common Settings to Post name.
Theme installation
In your WordPress admin dashboard navigate to Appearance > Themes > Add New and click on Upload Theme. Locate the child-theme-name.zip file on your computer and then click Install Now.
When the install is complete click on Activate, you will then see the Child Theme as the active theme in your theme panel.
There is now a new item at the top of your WordPress Menu. Click the Import Options link.
On the next screen, you can uncheck any of the options. We recommend leaving everything ticked to, but there are explanations for what may be changed. Hit the Import Demo Content button once and wait.
You will be able to watch the import progress.
Once complete, click the link to check out your new homepage and it should look just like our demo, but with placeholder images. Once you have checked your site, you can come back to the import options and click Remove Demo Content & Import Functions. This will not remove any pages or posts etc, just the code required to install the child theme. It is safe to remove this once your theme is installed.
All done, have fun with your theme!
General customisation
Replacing images
Your child theme will install with placeholder images. Each image will display sizing information. These are these are the sizes we have used in our demo and the ones we recommend.
Divi presets
Your child theme uses the Divi preset system to make adding new content simple. Every module included comes with one or more presets, so if you need to create new pages you can add a module, select the relevant preset, and it will be styled to match instantly.
Extensive documentation on using Divi presets is found here.
The theme builder
Your child theme uses the Divi library and Theme Builder to style your website. Templates are included for every page you see in the demo.
Extensive documentation on the Divi Theme Builder can be found here.
Custom CSS
Wherever possible, colours are defined within the modules themselves. On occassion, we include custom CSS that affects the colours of elements if the option isn’t available via the module settings.
We have made it very simple for you to change the colours using CSS variables. You do not need to know how to code.
In your WordPress menu, navigate to Appearance > Theme Editor.
Ensure the child theme is selected in the dropdown on the right side, and then click on stylesheet.
You will see CSS variables for your product at the top of the stylesheet. Change the hex values of the colours to match your brand, save, and refresh your site for the changes to take effect.
If you see any red warnings as in the image above, you can ignore these. They are false-positive errors and there is nothing wrong.
Customising this theme
Setting up the podcast feed
Sloane uses the PowerPress Blubrry podcast plugin. Extensive setup documentation can be found here.
Once your feed is set up, there are a few settings you should adjust to ensure the child theme applies the correct styling.
Note: Be sure to add your podcast posts to the Podcast Episodes category and your standard posts to the Articles category. This will ensure the correct template is used for each post type.
The sticky slide in subscribe button and the subscribe links at the bottom of the single podcast and post theme builder templates won’t show/function until you have added your podcast platforms to the Blubrry settings under the Destinations tab.
Navigate to Blubrry PowerPress Settings > Website > Subscribe Page and set Exclude recommended styling in the Custom Styling dropdown.
Once you have set up your podcast, save your settings and view the front end. The shortcodes within the templates should pick up your feed and display your podcast episodes.
Canva templates
This theme comes with free editable Canva templates. To access your templates, extract the name-supplementary-files.zip file you received when you purchased this theme, and open the included Canva Templates PDF file.
You do not need a Canva Pro account to use these templates.
Updates & Bug Fixes
Version 1.3 Update – 13/03/2023
This update included fixes to some global colours not changing.
Version 1.2 Update – 10/03/2023
This update included fixes to the structure of the coloured corner image presets which were breaking in some browsers.
If you are using Version 1.1 or earlier you will need to import the updated presets and assign them to your images.
In your account, redownload the sloane-supplementary-files.zip and extract the contents. Inside you will fine a new .json file called Sloane Triangle Corners Presets Update – For V1.1 and before. Import this file into your Divi Library and be sure to check the Import Presets option.
You can leave this layout in the library if you wish, or delete it. You do not need it once the presets are imported.
Next, open the module settings of an image on your site using one of the original coloured corner presets. You will see you have 8 new presets named the same as the original ones, but with imported tacked on the end of the preset name.
Switch the assigned preset to the new corresponding imported version for each image.
Version 1.1 Update – 08/03/2023
This update included CSS fixes for PowerPress and regenerating the import package for changes made to how global presets are stored in the database.
If you are using Version 1.0 of Sloane, you can add the following CSS to the bottom of the stylesheet to update styling for PowerPress.
/*Version 1.1 CSS Updates*/
#bb-sloane-podcast-subscribe .pp-sub-widget {
padding: 20px 20px 10px 20px;
}
#bb-sloane-podcast-subscribe .pp-sub-widget .pp-sub-widget-head {
margin-bottom: 0;
}
#bb-sloane-podcast-subscribe .pp-sub-widget-modern a.pp-sub-btn-sq {
margin: 0 0 10px;
border: 1px solid var(--bb-sloane-grey);
border-radius: 0;
position: relative;
}
#bb-sloane-podcast-subscribe .pp-sub-btn-sq::after,
#bb-sloane-podcast-subscribe .pp-sub-btn::after {
margin-top: 0;
right: 10px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.bb-sloane-podcast-subscribe .pp-sub-widget p.pp-sub-m-p,
.bb-sloane-podcast-subscribe .pp-sub-widget .pp-sub-m-i,
.bb-sloane-podcast-subscribe .pp-sub-widget a.pp-sub-btn-sq {
margin: 0 0 10px;
border: 1px solid var(--bb-sloane-grey);
border-radius: 0;
position: relative;
}
.bb-sloane-podcast-subscribe .pp-sub-widget .pp-sub-widget-head {
margin-bottom: 0;
display: flex;
flex: 1;
}
.bb-sloane-podcast-subscribe .pp-sub-widget {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.bb-sloane-podcast-subscribe .pp-sub-widget img.pp-sub-l {
width: 100% !important;
max-width: 100%;
}
.bb-sloane-podcast-subscribe .pp-sub-widget a.pp-sub-btn-sq {
padding: 10px;
margin: 0 0 10px;
}
.bb-sloane-podcast-subscribe .pp-sub-widget .pp-sub-ic {
margin-right: 0;
}
@media all and (max-width: 980px) {
.bb-sloane-podcast-subscribe .pp-sub-widget {
flex-direction: column;
}
}Changelog
Version 1.1 – 08/03/2023
– Updated import package to fix issue with importing presets
– Updated CSS for PowerPress subscribe button and page
Version 1.0 (Created)
Pro Pass 