Carousels come up with a compact method to provide repeating content material with out turning a web page into a protracted stack of playing cards. They are able to paintings particularly neatly for testimonials, workforce contributors, portfolio initiatives, photographs, merchandise, emblems, and different content material guests would possibly wish to browse.
Divi Carousel Module through 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 fortify, scores, social hyperlinks, and the facility to position further Divi components inside of person Carousel Pieces.
It’s appropriate 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 major options after which construct a cultured workforce member carousel from begin to end.
Review Of Divi Carousel Module
Divi Carousel Module is a third-party Divi extension from DiviGear designed particularly for developing extremely customizable carousels throughout the Visible Builder.
As an alternative of proscribing the carousel to 1 form of content material, the module will provide you with a versatile Carousel Container with person Carousel Pieces inside of it. The ones pieces can comprise photographs, headings, supporting textual content, buttons, social hyperlinks, scores, lightbox content material, and further Divi components.
That makes the module helpful for all kinds of layouts, together with:
- Group member carousels
- Testimonials
- Portfolio initiatives
- Symbol galleries
- Brand carousels
- Carrier or characteristic playing cards
- Video carousels
- Promotional content material
The module additionally comprises a number of tactics to switch how the ones pieces transfer and seem, from conventional horizontal sliders to Coverflow-style shows and focused layouts.
Its settings keep inside of Divi’s acquainted Content material, Design, and Complicated tabs, so the carousel can also be configured and styled visually along the remainder of the web page.
The result’s a purpose-built carousel workflow with granular keep watch over over the Carousel Container, person Carousel Pieces, responsive conduct, navigation, movement, and styling.
Key Options And Settings
Prior to 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. Every merchandise can cling not unusual carousel content material reminiscent of a picture, identify, subtitle, frame replica, button, social hyperlinks, and scores.
The Components tab expands that additional through 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 be able to identify the carousel’s total conduct on the container point whilst nonetheless customizing person slides when a particular merchandise wishes a unique remedy.
A couple of Carousel Varieties And Layouts
The module gives a number of tactics to switch the presentation of the carousel. You’ll be able to create conventional horizontal scrolling layouts, emphasize a focused merchandise, use Coverflow-style results, and regulate what number of Carousel Pieces stay visual immediately.
The ones settings can also be configured one by one for desktop, pill, and speak to.
Spacing and alignment controls can help you 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 can also be configured round the best way you need 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 and every interplay enabled immediately. A testimonial carousel would possibly have the benefit of easy arrows and dots, whilst a extra visible picture carousel would possibly use autoplay and dragging. Make a choice the controls that make the content material very best to browse, then check the completed interplay throughout keyboard, mouse, contact, and responsive layouts.
Detailed Styling Controls
The Carousel Container and person Carousel Pieces each come with intensive design settings. You’ll be able to keep watch over photographs, titles, subtitles, frame textual content, navigation, backgrounds, borders, shadows, overlays, spacing, and different visible main points.
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, carrier, workforce 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 conduct. Those come with lazy loading, RTL fortify, z-index controls, customized spacing, transforms, customized CSS, autoplay, looping, and desktop dragging conduct.
The workflow we construct under 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
The best way to grasp the module is to construct one thing sensible with it. For this case, we’ll create a workforce member carousel with responsive merchandise counts, navigation controls, equal-height playing cards, Coverflow movement, customized styling, and person workforce member content material.
We’ll first configure the Carousel Container, then genre it, construct one whole Carousel Merchandise, and copy 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 will have to seem, then click on Upload Module and select Divi Carousel.
The module begins with 5 placeholder Carousel Pieces. Call to mind the outer module because the Carousel Container and each and every slide inside of it as a Carousel Merchandise.
The placeholders come up with a right away preview of the carousel construction whilst you configure the primary settings.
Step 2: Configure The Carousel Container
Get started with the primary Carousel Container prior to enhancing the person workforce contributors. 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 choice of visual pieces the usage of Display Merchandise Desktop, Display Merchandise Pill, and Display Merchandise Cellular.
This is among the first settings value dealing with as it establishes the elemental rhythm of the carousel throughout breakpoints. A multi-card desktop structure can change into a extra targeted one-item or two-item enjoy on smaller displays with out rebuilding the carousel.
Subsequent, configure the motion and navigation. For this workforce carousel, permit Autoplay and Pause On Hover. That shall we the carousel advance robotically whilst giving guests time to forestall and skim a person profile. Permit Arrow Navigation and Dot Navigation as neatly.
Make a choice the Dots Alignment that works with the structure and permit Massive Lively Dot if you need the present function to face out extra obviously. In spite of everything, regulate Merchandise Spacing to keep watch over the space between workforce 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 Prior to Transition Get started to regulate how carousel media is loaded as guests transfer during the pieces.
Keyboard Regulate supplies otherwise to navigate the carousel, whilst Mouse Wheel Regulate can also be enabled when that interplay suits the web page enjoy.
Check non-compulsory interplay controls at the completed web page moderately than enabling the whole thing robotically. The carousel will have to stay predictable along the remainder of the web page’s scrolling and keyboard conduct.
Upload A Coverflow Impact
For a extra dimensional presentation, open Complicated Slider Settings. Make a choice 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 conduct 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 each time a couple of Carousel Pieces will have to 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 can help you design the interplay that looks over the media. You’ll be able to permit a picture overlay, display it on hover, select 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 change into to be had for homes reminiscent of ripple colour, border width, border colour, and icon background.
Taste The Pictures
The Symbol, Symbol Border, and Symbol Field Shadow possibility teams keep watch over the shared presentation of Carousel Merchandise photographs. Within Symbol, regulate homes reminiscent of alignment, full-width conduct, 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 Identify, Subtitle, And Frame Textual content
Open the Identify, Subtitle, and Frame Textual content teams to determine typography for the Carousel Pieces.
Along acquainted font, weight, measurement, 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 reminiscent of Line Wrap Taste, Textual content Route, Hyphenation, Textual content Columns, Fill Sort, and Stroke Width.
This shall we the carousel typography apply the similar visible gadget as the remainder of a Divi 5 design moderately than feeling like a separate element.
Subsequent, open the Subsequent & Earlier Button settings. Navigation arrows can also be situated in numerous places, together with:
- Center & Within the container
- Center & Out of doors the container
- Most sensible
- Backside
Further controls can help you display middle-position arrows handiest on hover, regulate their alignment, select customized Earlier and Subsequent icons, trade the icon measurement, and keep watch over the spacing round each and 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 seek out in opposition to the encircling carousel content material.
Differentiate Lively And Inactive Pieces
The Lively and Inactive Slide settings can help you observe other backgrounds to the present Carousel Merchandise and the pieces round it.
For card-style designs, a refined colour or gradient distinction can support which merchandise is recently in center of attention with no need a dramatic animation.
Upload Container Fade Results
The Container Taste team comprises fade controls that may melt the sides of the visual carousel. Make a choice number one and secondary colours and regulate the fade spacing to keep watch over the place the impact transitions.
This can also be particularly efficient with Coverflow or focused layouts as it attracts consideration towards the center of the carousel.
Regulate The Z-Index
The Z-Index settings keep watch over how the picture and content material bins 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 carried out round them.
Handiest build up those values when the design in fact wishes a unique stacking order.
Effective-Song The Spacing
The Customized Spacing controls can help you regulate each the full Carousel Container and the weather inside of its Carousel Pieces.
Throughout the Container settings, you’ll be able to keep watch over spacing for spaces reminiscent of the primary carousel, internal wrapper, Carousel Pieces, picture container, content material container, social media container, and scores.
The Content material controls pass extra granular, with spacing for photographs, titles, subtitles, textual content, buttons, and social media components.
Social hyperlinks and scores are configured on person Carousel Pieces via their Meta settings, so the ones spacing controls change 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 each and every Carousel Merchandise. Controls come with border radius, width, colour, and magnificence.
As a result of this is applicable to your entire Carousel Merchandise moderately than handiest its picture, it really works particularly neatly for card-based workforce, testimonial, carrier, and portfolio carousels.
Step 4: Upload Content material To The First Carousel Merchandise
With the shared carousel styling in position, construct one completed workforce member card prior to populating the rest pieces. Open the primary Carousel Merchandise. In Major Content material, input the workforce member’s Identify, Subtitle, and supporting textual content.
If the replica wishes to stay compact, use Content material Prohibit to limit how a lot textual content seems within the Carousel Merchandise.
Subsequent, open Identify & Symbol Hyperlink if both component will have to 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 workforce member picture, and configure the lightbox conduct if wanted. The picture can open in an Symbol Lightbox or Video Lightbox when the design requires expanded media.
Upload Social Hyperlinks Or Rankings
The Meta team provides non-compulsory supporting data. Permit Use Social Media when the workforce member card will have to come with social hyperlinks, or Use Ranking for carousel varieties that have the benefit of a ranking.
When social media is enabled, further fields seem for Fb, Twitter (X), LinkedIn, Instagram, and e mail hyperlinks, in conjunction with link-target controls.
For our workforce member instance, those fields supply a simple approach so as to add related profile hyperlinks with out developing separate icon modules for each and every merchandise.
Upload Further Divi Components
A Carousel Merchandise does no longer have to forestall at its integrated content material fields. Open the Components tab and click on + Upload Component 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 reminiscent of Hyperlink, Background, Loop, and Component Label supply controls for the full Carousel Merchandise, together with linking the container, including background remedies, the usage of Divi’s Loop capability the place suitable, and retaining pieces more straightforward to spot throughout the Builder.
Step 5: Effective-Song The Carousel Merchandise Design
Maximum shared styling belongs on the major Carousel Container point. The person Carousel Merchandise Design tab comes in handy when you want further keep watch over over the contents of a particular card.
Make a choice 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 conceivable to create a number of card constructions from the similar underlying Carousel Merchandise.
Practice Symbol Filters
The Symbol Clear out team comprises acquainted picture controls reminiscent of hue, saturation, brightness, and opacity. Mix modes reminiscent of Multiply, Display, and Colour Burn also are to be had when you need the picture to have interaction extra strongly with the Carousel Merchandise background.
Override Textual content And Button Kinds When Wanted
The Identify Taste, Subtitle Taste, Content material Taste, and Button teams supply item-level variations of the shared styling controls.
For a constant workforce carousel, stay maximum typography on the major Carousel Container point. Use the person controls when a specific Carousel Merchandise deliberately wishes to face aside, reminiscent of a featured testimonial, promoted carrier, or highlighted profile.
Taste Social Media Icons
When social hyperlinks are enabled, the Social Media Taste team controls their presentation. You’ll be able to regulate alignment, vertical function, icon colour, background, border radius, border width, border colour, border genre, and field shadow.
Taste Rankings
If Use Ranking is enabled within the Meta team, the Ranking Taste settings seem within the Design tab. Those come with alignment, vertical function, icon measurement, ranking colour, and the colour used for unfilled ranking icons.
End With Further Design Controls
The rest teams come with acquainted Divi controls for Spacing, Merchandise Border, Field Shadow, Filters, and Grow to be.
Use those for ultimate refinements moderately than developing pointless variations between each and every merchandise.
Step 6: Construct The Closing Carousel Pieces
As soon as the primary workforce member card is whole, use it because the template for the rest Carousel Pieces. First, take away any unused placeholder pieces with the Delete Merchandise keep watch over.
Then reproduction the completed Carousel Merchandise.
Change the picture, identify, subtitle, replica, hyperlinks, and different item-specific data in each and every reproduction. For the reason that base merchandise used to be already styled prior to duplication, each and every new workforce member starts with the similar construction and design.
Proceed duplicating and changing content material till the carousel is whole.
At this level, preview the carousel at each and every breakpoint and check arrows, dots, autoplay, hover conduct, keyboard controls, dragging, hyperlinks, and any lightboxes you enabled.
Who Is Divi Carousel Module For?
Divi Carousel Module is a great are compatible for Divi customers who incessantly construct content material that advantages from a scrollable, card-based presentation.
- Companies and freelancers can use it to create reusable carousel patterns for workforce contributors, testimonials, services and products, portfolios, and client-specific content material.
- Portfolio and artistic web pages can use image-focused layouts, Coverflow results, and lightboxes to offer initiatives extra visually.
- Trade web pages can prepare groups, services and products, testimonials, emblems, 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 appropriate with each Divi 4 and Divi 5, it may be used throughout a combined 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 large vary of content material, structure, navigation, responsive, movement, and design controls.
The principle Carousel Container handles the shared enjoy, whilst person Carousel Pieces come up with granular keep watch over when a particular slide wishes one thing other. Upload lightboxes, social hyperlinks, scores, further Divi components, customized navigation, responsive merchandise counts, Coverflow results, or detailed card styling relying on what the mission requires.
The entirety we constructed on this instructional remains throughout the Visible Builder, making the module really feel built-in with the remainder of the Divi workflow.
Divi Carousel Module is recently to be had within the Divi Market for $29. The license comprises limitless web page utilization, three hundred and sixty five days of fortify and updates, and a 30-day money-back ensure. It’s appropriate with each Divi 4 and Divi 5.
If carousels are a ordinary a part of the internet sites you construct, DiviGear’s module will provide you with a devoted toolkit for developing them whilst staying inside of Divi.
The submit Divi Product Spotlight: Divi Carousel Module seemed first on Sublime Subject matters Weblog.
WordPress Web Design