Want updates & exclusive offers?

Hey there!

Carousel

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

Started

Accessing your product

You can download your new layout 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-layout-kit.zip. Do NOT upload this file. First extract the zip file, and inside you will find a folder called name-layout-kit. This contains a .JSON file for all the layouts and a license.

Carousel Divi Layout Kit

The name-layout-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 layout kit.

Carousel Divi Layout Kit

Before you begin

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

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

Please note: Layouts using feed modules such as the blog module or Woo products module require you to have the post types that modules uses set up (such as posts and products). Layouts do not import actual posts and products etc.

Your layout 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.

Installation

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

 

2. Select Import, locate the layout-kit-name.json file on your computer and then click Import Divi Builder Layouts.

Carousel Divi Layout Kit

 

3. All code required for the layouts to function is included in code modules within each individual layout. Just create a new page or theme builder layout and import your chosen layout from your saved library items.

Carousel

Usage

Using layouts on pages

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

Carousel Divi Layout Kit

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.

Carousel Divi Layout Kit

Your chosen layout will load and is ready for use.

Using layouts in the Theme Builder

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

Carousel Divi Layout Kit

 

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.

Carousel Divi Layout Kit

 

Your chosen layout will load and is ready for use.

Carousel

Customisation

Individual carousel layouts setup

Each carousel layout is set up slightly differently depending on the modules it uses.

Note: When deciding how many slides to show at one time, you must have at least that many – plus one – items included in your layout. For example, is you wish to show 5 testimonials, you must have 6 testimonials included in the layout or the infinite scroll feature will not function properly. Same applies to the post and product carousels. To show 5 slides, you must have at least 6 posts or products published.

 

Partial Post Carousel

The partial post carousel uses a single row with a column for text and column for the Divi blog module. Style the text and the blog module title anyway you wish using the module settings. You can swap out the text module for any module you wish, but you need a blog module in the second column.

 

Section Carousel

The section carousel can be used with any number of sections containing any content you like. Simply create your desired section, add the class bb-section-carousel-item in the advanced tab and the section will automatically be included in the carousel.

You can style the content of the sections any way you wish using Divi default features and responsiveness for the content is respected.

 

App Carousel

The app carousel uses a single row and two columns with image and blurb modules to create a vertical navigation to showcase app features.

You can change the blurb modules to anything you like and style accordingly.

 

Video Module Carousel

The video module carousel uses the Divi video module with each module contained in its own row. Style the video modules using the module settings as you usually would.

It is advised you keep the fade animation on the section if you are using the video carousel above the fold so the browser has time to read the code that sizes and places the videos before the fade in finishes. This will prevent a flash of unstyled content.

 

Project Carousel

The project carousel uses the Divi portfolio module to feed your projects into the carousel. Style the Divi portfolio module any way you wish using the module settings as you normally would.

 

Featured Module Carousel

The featured module carousel is designed to be used with any static module or combination of modules you wish. Just add modules into the section and style them using the module settings as you usually would.

 

Testimonial Carousel

The testimonial carousel uses two rows. The first row contains your images, and the second row contains your testimonial words in text modules.

To add more testimonials, simply duplicate and edit both the last image module, and the last text module.

The Image and its corresponding text module must be displayed in the same order within each of the two rows.

 

3D Carousel

The 3D carousel uses individual rows within a section. To add more slides, simply duplicate the last row and adjust the content as you wish.

Note: The 3D carousel can be used with any static module (i.e. not feed modules like the blog, gallery, Woo products modules). Simply replace the module within each row with a static module such as a person module, blurb, image etc.

 

Post Carousel

The post carousel uses a single row with a single blog module. All adjustments to how your posts are styled can be made in the module settings as usual.

 

Product Carousel

The product carousel uses a single row with a single Woo products module. All adjustments to how your products are styled can be made in the module settings as usual.

 

Standard Carousel

The standard carousel uses individual rows within a section. To add more slides, simply duplicate the last row and adjust the content as you wish.

Note: The standard carousel can be used with any static module (i.e. not feed modules like the blog, gallery, Woo products modules). Simply replace the module within each row with a static module such as a testimonial module, blurb, image etc.

 

Gallery Carousel

The gallery carousel uses two rows. The first row contains your large images, and the second row contains your thumbnail images.

To add more gallery items, simply duplicate and edit both the large image module, and the thumbnails image module.

The Image and its corresponding thumbnail must be displayed in the same order within each of the two rows.

Change arrow, dots, and slide colours

Carousel makes it simple to adjust arrow, dots, and background colours of slides.

At the top of the CSS code module included with each layout, you will find a set of commented CSS Variables.

Carousel Divi Layout Kit

Here you can change the colours by editing the HEX value in each of the colour variables.

Be sure to save your page or template and view on the front end to see changes.

Change the number of slides to display

Carousel makes it simple to adjust the number of slides to display on various device sizes

At the top of the CSS code module included with each layout, you will find a set of commented CSS Variables.

Carousel Divi Layout Kit

Here you can change the number of slides to show by editing the value in each of the ‘–bb-post-carousel-show’ variables.

Be sure to save your page or template and view on the front end to see changes.

Change carousel functionality

Each carousel comes with a range of functionality settings you can adjust to your liking.

At the top of the jQuery code module included with each layout, you will find a set of commented options.

Carousel Divi Layout Kit

Here you can change the value of each feature to speed up/slow down transitions, activate/deactivate autoplay, show/hide dots and arrows etc.

For a more detailed explanation and demo of what each settings does, view the Flickity documentation here.

Carousel

Updates

Changelog

Version 1.1 ( updated 23/05/22 )

– Added Carousels:
+ Section Carousel
+ App Carousel
+ Project Carousel
+ Partial Post Carousel
+ Featured Module Carousel
+ Video Module Carousel
– Updated license.txt

Version 1.0 ( Created )

You have Successfully Subscribed!