Divi Plugin Highlight: Divi Carousel Module

by | Jan 22, 2023 | Etcetera | 0 comments

Divi Carousel Module is a third-party module for Divi that creates attention-grabbing carousels. They’re nice for pictures, merchandise, testimonials, crew contributors, and extra. The module comprises a whole lot of design components that make it stand out. Thankfully, it’s now not tricky to make use of. On this submit, we’ll take a look at Divi Carousel Module, see what it may possibly do, and notice how simple it’s to make use of to lend a hand making a decision if that is the correct product in your wishes. The Divi Architect Layout Pack would be the backdrop of our instructional.

New Divi Carousel Module

Divi Carousel Module provides a brand new module to the Divi Builder. Upload the module to any Divi format the similar means as any Divi Module.

New Divi Carousel Module

Divi Carousel Module Slides

Every slide within the Divi Carousel Module presentations slides as submodules which might be added inside of the principle module. The slides can also be styled independently, or they are able to use the principle module’s styling. So as to add a brand new slide, click on Upload New Merchandise.

Divi Carousel Module Slides

Upload as many as you wish to have. You’ll set the quantity the carousel will show at the display for every instrument kind within the module’s settings, so the quantity you upload gained’t impact the design. The submodules come with the entire same old Divi settings and a couple of distinctive settings. Right here’s a take a look at the original settings for the submodule.

Primary Content material

While you upload a slide, it opens to turn the settings. The primary content material space comprises the name, subtitle, and frame content material. Use all or any of this content material you wish to have. You’ll taste those components in my view within the Design tab.

Divi Carousel Module Slides

Name & Symbol Hyperlink

Upload the URL and make a selection if it opens in a brand new window. This hyperlink applies to each the name and symbol, so it nonetheless works although you handiest use one of the crucial two components.

Divi Carousel Module Slides

Button Settings

This provides a button to the slide. Upload the textual content, the URL, and make a selection the way it opens. You’ll taste the button within the Design tab.

Divi Carousel Module Slides

Symbol Settings

Right here, you’ll make a selection to make use of a picture or an icon. A picture is the default atmosphere. It comprises the picture picker, alt textual content, and if it opens in a lightbox. The picture is positioned above the name by way of default, however you’ll simply exchange this if you wish to have.

See also  How to Use the Filter Products by Attribute WooCommerce Block

Divi Carousel Module Slides

Deciding on Use Icon supplies an icon selector. The icon replaces the picture. It may also be styled within the Design settings.

Divi Carousel Module Slides

Meta

This comprises two choices you’ll choose between. You’ll handiest make a selection one of the crucial two choices. The primary choice is Use Social Media. Enabling this opens the fields to go into your URLs for 4 social media networks and your e mail cope with.

Carousel Meta: Use Social Media Icons

The second one choice is Use Ranking. This opens a dropdown field the place you’ll make a selection a score from one to 5. It presentations the score as stars.

Carousel Meta: Use Ratings

Submodule Design Settings

The submodule’s Design settings come with the picture kinds, symbol clear out, and kinds for the name, subtitle, content material, button, social media, and score. If you happen to’ve decided on an icon instead of the picture, you’ll see icon settings to modify its colour, upload a circle, exchange its dimension, and alter its alignment. Within the instance under, I moved the picture to the middle of the slide by way of deciding on Within Content material within the Symbol Place dropdown field.

Images Styling with Image Position Settings

Primary Module Settings

The primary module settings come with the slider main points in addition to the usual Divi settings. Let’s glance nearer on the slider’s settings.

Main Module Settings

Slider Settings

The slider settings come with width regulate, the choice of slides to turn on every of the instrument sorts, multislide, length, loop, autoplay, arrow and dot navigation, spacing, lazy loading, hash navigation, and quite a bit extra. It’s attention-grabbing to peer the choice of pieces for various gadgets. One level concerning the quantity, you input into those fields is that they don’t need to be entire numbers. You’ll display a part slide if you wish to have. Simply input the quantity as a decimal and experiment till the slides show the best way you wish to have.

Slider Settings

This case displays that I’ve added some arrow navigation. I additionally modified the best way the person carousel pieces seem on desktop, pill, and cellular. Along with the above, I’ve additionally added a loop characteristic to the module.

See also  What is a Firewall? Understanding What They Are and Which Type is Right For You

An example of slider settings

Complicated Slider Settings

The complicated settings permit you to make a selection the slider impact. Make a choice from Default and Coverflow. The default atmosphere presentations the slides as commonplace with every card dealing with the person.

Advanced Slider Settings Default

Coverflow presentations the playing cards tilted in 3D. Opting for Coverflow provides Rotate, which adjusts the volume every card is turned around in 3D, and Shadow, which provides to the 3D impact via shadowing. The playing cards display an animation as they scroll into position throughout the carousel.

Advanced Slider Settings Coverflow Style

Primary Module Design Settings

The primary module’s Design settings come with the picture overlay, alignment, width, border, and field shadow. It additionally comprises settings for the name textual content, subtitle textual content, frame textual content, subsequent and former buttons, navigation colour, z-index for the picture, customized spacing for each component, and the usual Divi settings. I’ve adjusted most of the settings within the instance under.

Updated Carousel Design

The Subsequent and Earlier arrows come with a number of place choices. You’ll alter the colour of the icons and backgrounds and make a selection customized icons for the former and subsequent hyperlinks independently. You’ll additionally alter the dot navigation’s colours.

Styling for next, previous buttons and dot navigation

The Divi Carousel Module has an outstanding quantity of customized spacing choices. Upload margin and padding to each component for each the container and the content material independently. I’ve added padding to a number of of the weather within the instance under.

Deep spacing settings available

The use of Divi Carousel Module

Divi Carousel Module is superb for showing a whole lot of issues together with merchandise, crew contributors, customized weblog posts and pages, services and products, pictures, testimonials, a portfolio, corporate emblems, and quite a bit extra. The writer’s website online comprises a whole lot of downloadable templates to get you began. They’re to be had as JSON recordsdata. Add them for your Divi Library and use them on any template, web page, or submit. Let’s take a look at a couple of of them. I’ll describe their primary settings as we pass.

Divi Carousel Module Content material Carousel 02_05

Content material Carousel 02_05 comprises massive pictures and kinds the playing cards independently to create an alternating design with the picture at the most sensible or the ground. It displays 3 slides at a time on desktops, 2 on pills, and 1 on telephones. It slides them mechanically each 2d and loops.

See also  15 Hiring Traits to Watch in 2023 [Marketing Leader Data]

Using Divi Carousel Module

Divi Carousel Module Testimonial Carousel 01_07

Testimonial Carousel 01_07 presentations two slides on desktops and one slide on pills and telephones. It comprises focused arrows and dot navigation. The slides position the pictures to the left and come with a gradient at the back of the textual content. The quote icons are pictures added to the background.

Using Divi Carousel Module

Divi Carousel Module Workforce Carousel 01_05

Workforce Carousel 01_05 presentations 3 slides on desktops, two on pills, and one on telephones. The slides have a singular design with social icons positioned on the backside. The backgrounds of the principle content material space exchange between black and white. The arrows and dots are inexperienced. Pictures use rounded corners and come with a 4px border to lead them to rotated.

Using Divi Carousel Module

Divi Carousel Module Symbol Carousel 01_02

Symbol Carousel 01_02 presentations 3.5 pieces on desktops and facilities the slides to create the design that partly displays pictures at the aspects of the display. Drugs show 3 and telephones show 1. It comprises arrow navigation, and the slides are set to loop, so the person by no means has to modify instructions to peer the entire slides. The rounded corners give the pictures a sublime design.

Using Divi Carousel Module

Acquire Divi Carousel Module

Divi Carousel Module is available in the Divi Marketplace for $29. It comprises limitless utilization, a 30-day money-back ensure, and twelve months of toughen and updates.

Purchase Divi Carousel Module

Finishing Ideas

That’s our take a look at Divi Carousel Module. The module has numerous options. Every component can also be styled and changed independently, supplying you with a whole lot of design chances. I discovered the entire settings to be intuitive, so it felt at house within the Divi Builder. If you happen to’re all in favour of a carousel module with a whole lot of options, Divi Carousel Module is price a glance.

We need to listen from you. Have you ever attempted Divi Carousel Module? Tell us what you take into consideration it within the feedback.

The submit Divi Plugin Highlight: Divi Carousel Module gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *