Carousels provide you with a compact technique to provide repeating content material with out turning a web page into a protracted stack of playing cards. They may be able to paintings particularly neatly for testimonials, staff individuals, portfolio tasks, pictures, merchandise, trademarks, and different content material guests would possibly wish to browse.
Divi Carousel Module by means of DiviGear brings a devoted carousel-building workflow into the Divi Visible Builder, with a couple of layouts, versatile navigation, responsive controls, animation results, detailed merchandise styling, lightbox give a boost to, rankings, social hyperlinks, and the facility to put further Divi components inside of person Carousel Pieces.
It’s suitable with each Divi 4 and Divi 5, so the similar module can be utilized throughout present web pages and new Divi 5 builds. On this product spotlight, we’ll discover its primary options after which construct a elegant staff member carousel from begin to end.
Evaluation Of Divi Carousel Module
Divi Carousel Module is a third-party Divi extension from DiviGear designed in particular for growing extremely customizable carousels within the Visible Builder.
As an alternative of proscribing the carousel to at least one form of content material, the module provides you with a versatile Carousel Container with person Carousel Pieces inside of it. The ones pieces can comprise pictures, headings, supporting textual content, buttons, social hyperlinks, rankings, lightbox content material, and extra Divi components.
That makes the module helpful for all kinds of layouts, together with:
- Workforce member carousels
- Testimonials
- Portfolio tasks
- Symbol galleries
- Emblem carousels
- Provider or function playing cards
- Video carousels
- Promotional content material
The module additionally comprises a number of techniques to switch how the ones pieces transfer and seem, from conventional horizontal sliders to Coverflow-style shows and targeted layouts.
Its settings keep inside of Divi’s acquainted Content material, Design, and Complicated tabs, so the carousel will also be configured and styled visually along the remainder of the web page.
The result’s a purpose-built carousel workflow with granular keep an eye on over the Carousel Container, person Carousel Pieces, responsive habits, navigation, movement, and styling.
Key Options And Settings
Ahead of constructing our instance, let’s have a look at the primary spaces of the module.
Versatile Content material Control
A carousel starts with the primary Carousel Container and the person Carousel Pieces inside of it. Each and every merchandise can hang commonplace carousel content material akin to a picture, name, subtitle, frame reproduction, button, social hyperlinks, and rankings.
The Parts tab expands that additional by means of letting you upload further Divi components inside of a Carousel Merchandise.
Carousel Pieces may also be reordered, duplicated, or got rid of because the content material adjustments.
That kid-item construction comes in handy as a result of you’ll identify the carousel’s total habits on the container point whilst nonetheless customizing person slides when a particular merchandise wishes a distinct remedy.
More than one Carousel Varieties And Layouts
The module provides a number of techniques to switch the presentation of the carousel. You’ll be able to create conventional horizontal scrolling layouts, emphasize a targeted merchandise, use Coverflow-style results, and regulate what number of Carousel Pieces stay visual without delay.
The ones settings will also be configured one at a time for desktop, pill, and make contact with.
Spacing and alignment controls permit you to refine the connection between the visual pieces so the similar carousel can transfer from a large desktop presentation to a extra targeted cellular structure.
Navigation will also be configured round the way in which you wish to have guests to browse. To be had choices come with arrow navigation, dot navigation, autoplay, pause on hover, keyboard controls, mouse wheel controls, looping, dragging, and timing settings.
You do not want each interplay enabled without delay. A testimonial carousel would possibly get pleasure from easy arrows and dots, whilst a extra visible picture carousel would possibly use autoplay and dragging. Make a selection the controls that make the content material best possible to browse, then take a look at the completed interplay throughout keyboard, mouse, contact, and responsive layouts.
Detailed Styling Controls
The Carousel Container and person Carousel Pieces each come with in depth design settings. You’ll be able to keep an eye on pictures, titles, subtitles, frame textual content, navigation, backgrounds, borders, shadows, overlays, spacing, and different visible main points.
Particular person Carousel Pieces even have their very own settings, which helps you to identify a constant base design on the container point after which make focused changes the place wanted.
That may be helpful when one testimonial, provider, staff member, or promotional card wishes to face out with out redesigning all the carousel.
Complicated Carousel Choices
The module additionally comprises settings for extra particular carousel habits. Those come with lazy loading, RTL give a boost to, z-index controls, customized spacing, transforms, customized CSS, autoplay, looping, and desktop dragging habits.
The workflow we construct underneath does no longer require customized CSS, however the possibility stays to be had when a mission wishes a extra specialised remedy.
How To Use The Divi Carousel Module
One of the best ways to grasp the module is to construct one thing sensible with it. For this case, we’ll create a staff member carousel with responsive merchandise counts, navigation controls, equal-height playing cards, Coverflow movement, customized styling, and person staff member content material.
We’ll first configure the Carousel Container, then genre it, construct one entire Carousel Merchandise, and replica that completed merchandise to populate the remainder of the carousel.
Step 1: Upload The Divi Carousel Module
Open an present web page or create a brand new one within the Visible Builder. Upload a single-column Row the place the carousel must seem, then click on Upload Module and make a selection Divi Carousel.
The module begins with 5 placeholder Carousel Pieces. Recall to mind the outer module because the Carousel Container and every slide inside of it as a Carousel Merchandise.
The placeholders provide you with a direct preview of the carousel construction when you configure the primary settings.
Step 2: Configure The Carousel Container
Get started with the primary Carousel Container ahead of modifying the person staff individuals. Those settings resolve what number of pieces guests see, how the carousel strikes, and which navigation controls are to be had.
Open Slider Settings within the Content material tab. Set the collection of visual pieces the use of Display Merchandise Desktop, Display Merchandise Pill, and Display Merchandise Cell.
This is among the first settings value dealing with as it establishes the fundamental rhythm of the carousel throughout breakpoints. A multi-card desktop structure can develop into a extra targeted one-item or two-item enjoy on smaller monitors with out rebuilding the carousel.
Subsequent, configure the motion and navigation. For this staff carousel, permit Autoplay and Pause On Hover. That we could the carousel advance mechanically whilst giving guests time to forestall and browse a person profile. Allow Arrow Navigation and Dot Navigation as neatly.
Make a selection the Dots Alignment that works with the structure and permit Huge Lively Dot if you wish to have the present role to face out extra obviously. After all, regulate Merchandise Spacing to keep an eye on the space between staff member playing cards.
For a card-based design, permit Equivalent Peak Merchandise so profiles with other quantities of textual content can nonetheless align persistently. You’ll be able to additionally permit Lazy Loading and Get started Loading Ahead of Transition Get started to regulate how carousel media is loaded as guests transfer during the pieces.
Keyboard Keep an eye on supplies otherwise to navigate the carousel, whilst Mouse Wheel Keep an eye on will also be enabled when that interplay suits the web page enjoy.
Check not obligatory interplay controls at the completed web page fairly than enabling the entirety mechanically. The carousel must stay predictable along the remainder of the web page’s scrolling and keyboard habits.
Upload A Coverflow Impact
For a extra dimensional presentation, open Complicated Slider Settings. Make a selection Coverflow from the Slider Impact box.
This puts extra emphasis at the energetic Carousel Merchandise and creates more potent visible separation between the present profile and the encircling pieces. With the carousel habits established, transfer to the Design tab.
Step 3: Taste The Major Carousel Container
The Carousel Container’s Design tab establishes the shared visible language for the pieces inside of it. Get started right here on every occasion a couple of Carousel Pieces must use the similar picture, typography, navigation, spacing, or container styling.
Overlay Settings
In case your carousel makes use of a picture or video lightbox, the Overlay controls permit you to design the interplay that looks over the media. You’ll be able to permit a picture overlay, display it on hover, make a selection the overlay background, and upload an animated overlay icon.
To be had animated icon remedies come with None, Ripple, and Pulse Border. Relying at the impact, further controls develop into to be had for houses akin to ripple colour, border width, border colour, and icon background.
Taste The Pictures
The Symbol, Symbol Border, and Symbol Field Shadow possibility teams keep an eye on the shared presentation of Carousel Merchandise pictures. Within Symbol, regulate houses akin to alignment, full-width habits, and most width.
Use Symbol Border to set the border radius, width, genre, and colour.
If the design wishes extra separation from the background, use Symbol Field Shadow so as to add intensity.
Taste The Name, Subtitle, And Frame Textual content
Open the Name, Subtitle, and Frame Textual content teams to determine typography for the Carousel Pieces.
Along acquainted font, weight, dimension, colour, line-height, and letter-spacing controls, the Divi 5 model exposes further textual content styling choices in those teams. Relying at the decided on font and textual content sort, those come with Variable Font controls and choices akin to Line Wrap Taste, Textual content Route, Hyphenation, Textual content Columns, Fill Kind, and Stroke Width.
This we could the carousel typography observe the similar visible device as the remainder of a Divi 5 design fairly than feeling like a separate element.
Subsequent, open the Subsequent & Earlier Button settings. Navigation arrows will also be located in numerous places, together with:
- Center & Within the container
- Center & Outdoor the container
- Most sensible
- Backside
Further controls permit you to display middle-position arrows handiest on hover, regulate their alignment, make a selection customized Earlier and Subsequent icons, trade the icon dimension, and keep an eye on the spacing round every button.
Then open the colour settings to outline the Arrow Colour, Arrow Background Colour, Dots Colour, and Dots Lively Colour.
Use sufficient distinction that navigation stays simple to search out towards the encircling carousel content material.
Differentiate Lively And Inactive Pieces
The Lively and Inactive Slide settings permit you to follow other backgrounds to the present Carousel Merchandise and the pieces round it.
For card-style designs, a delicate colour or gradient distinction can give a boost to which merchandise is these days in focal point without having a dramatic animation.
Upload Container Fade Results
The Container Taste staff comprises fade controls that may melt the perimeters of the visual carousel. Make a selection number one and secondary colours and regulate the fade spacing to keep an eye on the place the impact transitions.
This will also be particularly efficient with Coverflow or targeted layouts as it attracts consideration towards the center of the carousel.
Keep an eye on The Z-Index
The Z-Index settings keep an eye on how the picture and content material packing containers stack relative to different carousel results. For instance, expanding the Symbol Container and Content material Container z-index values can stay the profile picture and textual content above fades, overlays, or different styling implemented round them.
Most effective building up those values when the design in reality wishes a distinct stacking order.
High-quality-Music The Spacing
The Customized Spacing controls permit you to regulate each the full Carousel Container and the weather inside of its Carousel Pieces.
Within the Container settings, you’ll keep an eye on spacing for spaces akin to the primary carousel, internal wrapper, Carousel Pieces, picture container, content material container, social media container, and rankings.
The Content material controls move extra granular, with spacing for pictures, titles, subtitles, textual content, buttons, and social media components.
Social hyperlinks and rankings are configured on person Carousel Pieces via their Meta settings, so the ones spacing controls develop into related as soon as the corresponding components had been enabled.
Taste The Carousel Merchandise Borders
Use Merchandise Border to outline the full body round every Carousel Merchandise. Controls come with border radius, width, colour, and magnificence.
As a result of this is applicable to the whole Carousel Merchandise fairly than handiest its picture, it really works particularly neatly for card-based staff, testimonial, provider, and portfolio carousels.
Step 4: Upload Content material To The First Carousel Merchandise
With the shared carousel styling in position, construct one completed staff member card ahead of populating the rest pieces. Open the primary Carousel Merchandise. In Major Content material, input the staff member’s Name, Subtitle, and supporting textual content.
If the reproduction wishes to stay compact, use Content material Prohibit to limit how a lot textual content seems within the Carousel Merchandise.
Subsequent, open Name & Symbol Hyperlink if both component must lead someplace when clicked. You’ll be able to additionally upload a button for a devoted name to motion.
Then open Symbol Settings, add the staff member picture, and configure the lightbox habits if wanted. The picture can open in an Symbol Lightbox or Video Lightbox when the design requires expanded media.
Upload Social Hyperlinks Or Scores
The Meta staff provides not obligatory supporting knowledge. Allow Use Social Media when the staff member card must come with social hyperlinks, or Use Ranking for carousel varieties that get pleasure from a score.
When social media is enabled, further fields seem for Fb, Twitter (X), LinkedIn, Instagram, and e mail hyperlinks, at the side of link-target controls.
For our staff member instance, those fields supply an easy manner so as to add related profile hyperlinks with out growing separate icon modules for each merchandise.
Upload Further Divi Parts
A Carousel Merchandise does no longer have to forestall at its integrated content material fields. Open the Parts tab and click on + Upload Part to insert further Divi components, a Row, or stored content material from the Divi Library.
This comes in handy when the carousel wishes a extra customized card construction than the default image-and-text structure.
Further teams akin to Hyperlink, Background, Loop, and Part Label supply controls for the full Carousel Merchandise, together with linking the container, including background remedies, the use of Divi’s Loop capability the place suitable, and protecting pieces more uncomplicated to spot within the Builder.
Step 5: High-quality-Music The Carousel Merchandise Design
Maximum shared styling belongs on the primary Carousel Container point. The person Carousel Merchandise Design tab comes in handy when you wish to have further keep an eye on over the contents of a particular card.
Make a selection The Symbol Place
Open Symbol Kinds to switch the place the picture seems relative to the Carousel Merchandise content material. To be had positions come with Most sensible, Backside, Left, Proper, and Within Content material.
This makes it imaginable to create a number of card constructions from the similar underlying Carousel Merchandise.
Follow Symbol Filters
The Symbol Filter out staff comprises acquainted picture controls akin to hue, saturation, brightness, and opacity. Mix modes akin to Multiply, Display, and Colour Burn also are to be had when you wish to have the picture to have interaction extra strongly with the Carousel Merchandise background.
Override Textual content And Button Kinds When Wanted
The Name Taste, Subtitle Taste, Content material Taste, and Button teams supply item-level variations of the shared styling controls.
For a constant staff carousel, stay maximum typography on the primary Carousel Container point. Use the person controls when a selected Carousel Merchandise deliberately wishes to face aside, akin to a featured testimonial, promoted provider, or highlighted profile.
Taste Social Media Icons
When social hyperlinks are enabled, the Social Media Taste staff controls their presentation. You’ll be able to regulate alignment, vertical role, icon colour, background, border radius, border width, border colour, border genre, and field shadow.
Taste Scores
If Use Ranking is enabled within the Meta staff, the Ranking Taste settings seem within the Design tab. Those come with alignment, vertical role, icon dimension, score colour, and the colour used for unfilled score icons.
End With Further Design Controls
The remainder teams come with acquainted Divi controls for Spacing, Merchandise Border, Field Shadow, Filters, and Turn into.
Use those for ultimate refinements fairly than growing useless variations between each merchandise.
Step 6: Construct The Final Carousel Pieces
As soon as the primary staff member card is entire, use it because the template for the rest Carousel Pieces. First, take away any unused placeholder pieces with the Delete Merchandise keep an eye on.
Then replica the completed Carousel Merchandise.
Exchange the picture, name, subtitle, reproduction, hyperlinks, and different item-specific knowledge in every replica. For the reason that base merchandise used to be already styled ahead of duplication, each new staff member starts with the similar construction and design.
Proceed duplicating and changing content material till the carousel is entire.
At this level, preview the carousel at every breakpoint and take a look at arrows, dots, autoplay, hover habits, keyboard controls, dragging, hyperlinks, and any lightboxes you enabled.
Who Is Divi Carousel Module For?
Divi Carousel Module is a great have compatibility for Divi customers who regularly construct content material that advantages from a scrollable, card-based presentation.
- Companies and freelancers can use it to create reusable carousel patterns for staff individuals, testimonials, services and products, portfolios, and client-specific content material.
- Portfolio and inventive web pages can use image-focused layouts, Coverflow results, and lightboxes to offer tasks extra visually.
- Trade web pages can prepare groups, services and products, testimonials, trademarks, and different repeated content material with out taking on as a lot vertical house.
- Content material-heavy websites can use further Divi components inside of Carousel Pieces when the usual image-and-text construction isn’t sufficient.
And as the module is suitable with each Divi 4 and Divi 5, it may be used throughout a blended portfolio of present Jstomer websites and more recent builds.
Construct Extra Versatile Carousels With DiviGear
Divi Carousel Module provides Divi customers a purpose-built carousel workflow with a wide vary of content material, structure, navigation, responsive, movement, and design controls.
The principle Carousel Container handles the shared enjoy, whilst person Carousel Pieces provide you with granular keep an eye on when a particular slide wishes one thing other. Upload lightboxes, social hyperlinks, rankings, further Divi components, customized navigation, responsive merchandise counts, Coverflow results, or detailed card styling relying on what the mission requires.
The whole thing we constructed on this educational remains within the Visible Builder, making the module really feel built-in with the remainder of the Divi workflow.
Divi Carousel Module is these days to be had within the Divi Market for $29. The license comprises limitless web site utilization, three hundred and sixty five days of give a boost to and updates, and a 30-day money-back ensure. It’s suitable with each Divi 4 and Divi 5.
If carousels are a habitual a part of the internet sites you construct, DiviGear’s module provides you with a devoted toolkit for growing them whilst staying inside of Divi.
The put up Divi Product Highlight: Divi Carousel Module gave the impression first on Elegant Themes Blog.
0 Comments