Harlow
Child Theme
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.
The Harlow child theme uses SVG images for graphic elements. Ensure your site allows uploads of SVG images before installing the Harlow child theme (WordPress restricts SVG uploads by default) otherwise the images will link to the Harlow demo page. You can use a free plugin to allow SVG uploads. We recommend this one.
Installation
The Harlow child theme uses SVG images for graphic elements. Ensure your site allows uploads of SVG images before installing the Harlow child theme (WordPress restricts SVG uploads by default) otherwise the images will link to the Harlow demo page. You can use a free plugin to allow SVG uploads. We recommend this one.
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
Divi presets
Extensive documentation on using Divi presets is found here.
The theme builder
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.
Harlow
Customisation
Edit single post dropcap
Harlow comes with presets that include a styled dropcap for the first letter of single posts.
If you would like to edit or remove these dropcaps, find the First letter dropcap CSS within the stylesheet and either change, comment out, or delete it.
Edit graphic element colours
Harlow comes with a set of pretty graphic elements included.
By default, these elements are set to the Harlow colour palette, but you can easily change them to match your brand.
First, use this handy colour generator tool . Simply insert the HEX code for your target colour in the box provided, and the tool will output a set of filter values like this:
invert(94%) sepia(20%) saturate(240%) hue-rotate(333deg) brightness(95%) contrast(87%);
Once you have these values, open any of the graphic element modules on any page, and edit the ‘bb-harlow-image-filter’ preset applied to that module.
In the design tab, click the ‘Filters’ toggle, and change the values to those outputted by the generator. Once done, save the preset and all the graphic elements will change to your chosen colour.
More on presets here.
Setting up the Instagram feed
Harlow uses the Smash Balloon social media feeds plugin. The wizard will guide you through setting up an Instagram feed, but if you have trouble, extensive documentation can be found here.
Once your feed is connected, apply the following settings within the plugin.
In the customise tab, disable the header, load more button, and the follow button.
Next click Feed Layout, and inside, apply the following settings:
Layout = grid
Padding = 5px
Number of posts = 6
Columns desktop = 6
Columns tablet = 3
Columns mobile = 2
Save your settings and view the front end. The shortcode within the Global Footer template will pick up your feed and display your posts.
Canva templates
Harlow comes with free editable Canva templates for lesson and course covers, program image, and Instagram posts. To access your templates, extract the harlow-supplementary-files.zip file you received when you purchased Harlow, and open the included Canva Templates PDF file.
You do not need a Canva Pro account to use these templates.
eBook cover template
In the demo we have used a free Photoshop mockup to create the ebook cover.
You can download the template we used and many more for free from Covervault.
We used this one.
They are free for personal and commercial use, all you need to do is leave a comment and thank the creator.
Harlow
Updates
Changelog
Version 1.0 (Created)
