Want updates & exclusive offers?

Hey there!

Harlow

Theme Kit
Below you will find comprehensive installation and set up instructions for the Harlow theme kit. If after following this guide, you run into any technical issues, please feel free to contact support.
Harlow Divi Funnel Kit
Getting

Started

Accessing your product

You can download your new theme kit from the link included in your order confirmation email, from your Brand & Build account, or your Divi Marketplace account.

Your file will be called name-funnel-kit.zip. Do NOT upload this file. First extract the zip file, and inside you will find a folder called name-funnel-kit. This contains a .JSON file for all the layouts, a backup CSS file, and a license.

The name-funnel-kit-supplementary-files.zip contains individual layouts in a subfolder, a changelog, a link to this documentation, and any additional assets or information needed for the funnel kit.

Before you begin

You must have the Divi Theme by Elegant Themes installed to use this funnel kit.

An Elegant Themes Membership is required to download the Divi Theme. The Divi Theme is NOT included with this funnel kit.

Please note: the images in the demo have been replaced with placeholder images in the actual kit files, and sizing information is supplied to make them easily replaceable.

Your funnel kit is non-destructive. All layouts are imported into the Divi library so you can assign them to pages and theme builder templates as you wish.

The Harlow funnel kit uses SVG images for graphic elements. Ensure your site allows uploads of SVG images before importing the Harlow layouts (WordPress restricts SVG uploads by default) otherwise the images will link to the Harlow Funnel demo page. You can use a free plugin to allow SVG uploads. We recommend this one.

Installation

The Harlow funnel kit uses SVG images for graphic elements. Ensure your site allows uploads of SVG images before importing the Harlow layouts (WordPress restricts SVG uploads by default) otherwise the images will link to the Harlow Funnel demo page. You can use a free plugin to allow SVG uploads. We recommend this one.

1. In your WordPress admin dashboard navigate to Divi > Divi Library and click on Import & Export.

 

2. Select Import, Locate the funnel-kit-name.json file on your computer, ensure Import Presets is checked, and then click Import Divi Builder Layouts.

 

3. The included CSS file is a backup only. CSS is minimal and included in a code module within each layout.

Harlow

Usage

Using layouts on pages

Harlow comes with layouts designed for use in the theme builder and on pages.

To use a layout on a page:

Create a new page, enable the Divi Builder.

Either choose Browse Layouts

 

Or use the Divi Portability option to load a layout.

 

Select Your Saved layouts, filter categories if you wish, and then click the layout you wish to use.

Your chosen layout will load and is ready for use.

Using layouts in the Theme Builder

Harlow comes with layouts designed for use in the theme builder and on pages.

 

To use a layout in the Theme Builder:

Navigate to Divi > Theme Builder and Add New Template.

 

Select the page(s) you want the template assigned to and click Create Template.

Next click on Add Custom Body and then Add From Library.

 

Select Your Saved layouts, filter categories if you wish, and then click the layout you wish to use.

 

Your chosen layout will load and is ready for use.

General

Customisation

Replacing images
Harlow 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
Harlow 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
Harlow 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 Divi > Theme Options > Custom CSS, (if this is where you have added the CSS from the theme kit) or your child theme stylesheet if you added the CSS there.

 

You will see CSS variables for your product at the top of the CSS. 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.

Custom jQuery

On occasion, we use custom jQuery in our theme kits for added functionality and/or styling.

With theme kits, the jQuery is added in a code module to each layout, so it only loads on the page it is used.

If your theme kit contains jQuery, inside the theme-kit-name-supplmentary-files.zip, you will find a jQuery folder. Inside this folder is a backup of all the code we have used.

theme-kit-name-archive.js is the code used on archive layouts for use with the Theme Builder.

theme-kit-name-posts.js is the code used on single post layouts for use with the Theme Builder.

theme-kit-name-global.js is all the code we have used in the entire theme kit consolidated into a single file.

NOTE: There may be more .JS files depending on the theme kit you are using.

On occassion, the Divi import process can corrupt some code. You can use the code within these files to replace any corrupted code in the layouts.

If you do not wish to have the jQuery on each page in a code module, you can delete the fullwidth Code section from the top of each layout in the theme kit, and copy the contents of the global.js file to Divi > Theme Options > Integration > Add to Head between script tags.

 

NOTE: Some of Divi's performance enhancement settings may affect jQuery functionality when added to the head of your website. If you experience issues, please adjust jQuery performance settings accordingly.

Harlow

Customisation

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.

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-funnel-kit-supplementary-files.zip file you received when you purchased Harlow, and open the included Canva Templates PDF file.

Harlow Divi Funnel Kit

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)

You have Successfully Subscribed!