Carousel
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.
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.
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.
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.
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
Carousel 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.
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.
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.
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.
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 )
