The Divi Logo Carousel module is like a special tool inside the Divicarousels plugin. It’s here to make your website look awesome and work really well. Especially if you’re a web designer, it helps you show off logos in a super smooth and easy way.
This module is famous for its easy way of doing things, making showing logos look smooth and saving you time. It has lots of tools that are made to fit what designers need, like child items, logo settings, design choices, fancy customizing features, and more. And don’t forget, the child item feature lets you add special things to each logo, while the overall settings change how the whole module looks.
Child Item – Divi Logo Carousel
Before delving into the Logo Carousel’s advanced features, let’s explore the Child Item, which allows you to customize each logo individually. The Child Item comprises three key sections:
Content Options
Design Options
Advanced Options
Child Item Content Tab
In the Content tab of the Divi Logo Carousel Child Item, you’ll discover important elements that allow designers to customize individual logos within the module. Here’s a breakdown of these elements
Content Item
Logo: You have the option to upload your logo image right here. This is where you can add your brand logos, which will then appear on your website.
Logo Alt: This is where you provide a brief description of your logo. Think of it as a short caption for your logo image. It’s really useful for people who may not be able to see the image, like those using screen readers. This description helps them understand what your logo represents.
Link
You can make each logo have its own special web link. When someone clicks on a logo, it can take them to a particular spot on your website or even open a completely new tab with a different webpage. This is really useful if you want each logo to send people to different places when they click on it. It makes your logos clickable and interactive.
Inside the Link Option, there are two important things:
Module Link URL: The module link URL is like the web address you choose for your logo or item. It’s where you decide where visitors go when they click on your logo. It’s like setting the path to where you want them to go on the internet.
Module Link Target: Here, you have two choices. One option is to make it so that when someone clicks on the logo, the new page opens in the same window. The other option is to make it open in a completely new tab or window. It’s up to you how you want it to work.
Background
In the Logo Carousel’s background settings, you’ve got some amazing tools to make your design stand out and grab attention! Here’s what you can do:
Background Color: With this, you can pick any color you love for the background. It’s like choosing the paint for your room.
Add Images or Videos: Here, you can choose the image for the logo background as you like. Also, you can choose videos for the background of the logo
Patterns: You can make your background look stylish by adding patterns. It’s like giving it a cool design.
Background Masks: You can make your logo background more interesting by adding it background mask.
These options let you tweak how your logo display appears, so it perfectly matches your personal style. And don’t forget, these background settings apply to your entire logo item, which is a standard feature in Divi. So, go ahead and make your logo carousel truly yours!
Child Item Design Tab
In the Design Tab for each logo in the Logo Carousel, you can make each part of a logo look really nice. There are some special design options that are quite helpful. You can do things like making changes when someone hovers over the logo, adjusting captions, and buttons, spacing around the logo, and borders, and using filters to change how the logo looks. These might sound a bit complicated, but don’t worry; it’s simpler than you might think. Just follow the instructions below.
Logo Item Settings
Logo Item Settings give you the ability to change how your logo looks to fit your liking:
IItem Border Rounded Corners: You can make your logo’s edges soft and round, instead of sharp and pointy, giving it a smoother appearance.
Item Border Styles: Decide if you want the border around your logo full border on every side, top side border, left side border, bottom side border, or right side border.
Item Border Width: Decide if you want the border around your logo to be thick or thin, adjusting how bold the outline appears.
Item Border Color: Decide if you want the border around your logo colored to any color you like.
Item Border Style: Decide if you want the border around your logo to be solid, continuous line, or dashed, with breaks in between.
Box Shadow: You can add a shadow effect to make the logo look like it’s floating or popping out a bit.
Module Text
Module Text allows you to control how the text within your Logo Carousel looks. You can adjust various aspects of the text to suit your preferences.
Module Font: You can choose a font style as your preference. Like Abel, Actor and many more as you like.
Module Font Weight: You can decide how thick or thin the characters in your text appear. It’s like choosing between regular and bold.
Module Font Style: You can choose the font style as your preference. If you want your font to be italic, right, underlined, or many more you can do that.
Module Text Alignment: You can choose the text alignment as your preference. If you want your text to be on the left, right, or centered, you can do that too.
Module Text Color: This is where you pick the color for your text. You can choose any color you like.
Module Text Size: Text Size is where you can choose your text size. Here you can adjust size according to your taste.
Module Letter Spacing: You can choose the letter space as your preference. With this menu, you can add custom space between letters.
Module Line Height: Line Height is where custome height of text lines. With this, you can choose your custom line height for your text.
Module Text Shadow: On this menu, you can add shadow to your text, there are many more options of shadow you can choose what you like.
Spacing
Spacing options let you control the distance and positioning of your logo carousel within its container.
Margin (Top, Bottom, Left, Right): Adjust the space between the carousel and its surroundings. You can increase or decrease the space on each side individually.
Padding: Adjust the space between the content inside. You can increase or decrease the space on each side individually.
Border
Borders help define the outline of your logo carousel.
Rounded Corners: You can choose the appearance of the border if you want your logo border rounder you can adjust this from this menu.
Border Style: you can choose the appearance of the border. You can have a solid continuous line or a dashed line with gaps.
Border Width: Control the thickness of the border around your carousel.
Border Color: With this option, you can add custom to your logo border which suits your logo most.
Box Shadow
Box Shadow can give your logo carousel a subtle 3D effect.
Box Shadow: Add a shadow to make your carousel look like it’s floating or slightly elevated.
Filter
Filters allow you to adjust the visual properties of your logo carousel.
Hue: Change the color tone of your carousel.
Saturation: As color is added but you want to adjust the color intensity with this option you can do that also.
Brightness: Brightness gives you the control to make your logo appearance darker or brighter as you like.
Contrast: Contrast is used to make darker and lighter areas more even. We have that menu also with this you can make your logo more even.
Invert: Using invert you can make your logo dark areas light and light areas light.
Sepia: Apply a warm brownish tone to your carousel.
Opacity: Control how transparent or solid your carousel appears.
Blur: With this blur customization you can add softness to your logo carousel, and make it more smooth using this menu.
Blend Mode: You can choose your own preference mode that blends your logo to the background more smoothly. We have many different options of blend mode you can choose what you like.
Transform
Transform options allow you to change the position and orientation of your logo carousel.
Transform options allow you to change the position and orientation of your logo carousel.
Transform Scale: With this option, you can resize your logo carousel as you prefer.
Transform Translate: Using this translation you can move your logo carousel horizontally or vertically.
Transform Rotate: On this menu, you can rotate your logo as you like. We have multiple options where you can adjust your logo as you like.
Transform Skew: Skew your carousel to create a slanted effect.
Transform Origin: Set the point around which your carousel is scaled, rotated, or skewed.
Child Item Design Tab
The Child Item Advanced Tab is like a toolbox that gives you extra options to control how your logos in the Logo Carousel behave and look. It’s like having some special features to make your logos even better.
Here’s a breakdown of what you can do with the Child Item Advanced Tab:
Custom CSS:
Custom CSS allows you to apply your own styling code to the child item, giving you full control over its visual presentation.
Condition:
Conditions help you control when and where the child item appears on your website.
Transitions:
Transitions are like smooth moves for your logos. They make your logos appear and disappear in a cool way.
Transitions Duration: On transitions, duration means we can change logo speed. You can decide how fast you like to show your logo or how slow its depends on you.
Transitions Delay: You can decide if there should be a little pause before your logos start moving.
Transitions Speed Curve: This is about how your logos should move – like should they start slow and then go fast, or the other way around.
Position:
Position is like deciding where your logos should sit on your webpage.
Position: You can pick where exactly on the screen your logos should be.
Z Index: Control the layering order of the child item in relation to other elements on your webpage.
Scroll effects:
Scroll effects make your logos do interesting things as people scroll up and down your webpage.
Sticky Position: Think of this like making your logos stick in one place as people scroll. It’s like making them stay on the screen.
Sticky Top Offset: You can choose how far from the top of the screen your logos should stick.
Sticky Bottom Offset: This decides when your logos should stop sticking as people scroll down.
Top Sticky Limit: You can set a limit for how far up your logos can stick.
Bottom Sticky Limit: This is like deciding how far down your logos can stick.
Offset From Surrounding Sticky Element: It’s about controlling the space between your logos and other sticky things on your webpage.
Transition Default and Sticky Style: This lets you choose how your logos should change when they become sticky.
Scroll Transform Style: You can add special effects to your logos as people scroll.
Enable Vertical Motion: Using this option you can make your logo movable.
Motion Effect Trigger: You can decide when these special up-and-down movements should happen while people scroll.
Most WordPress websites depend on posts to keep them interesting. Displaying these posts attractively is important, and you can achieve this by using a slider or a carousel. Thankfully, the Post Slider and Carousel plugin provides both of these options.
You don’t have to limit these features to just your homepage; you can put them anywhere. Plus, you can change them a lot to match your website’s style. This plugin can make your website better, and today, I’ll show you what it can do on Divi website
Important Features –
Have complete control over how the carousel looks and works.
Sort your posts by title or date.
Adjust the size and position of featured images.
Decide how many items should appear on each page.
Set the number of columns for both regular and mobile screens.
Choose to show or hide post details like the author, date, comments, summary, or read more links.
Customize the colors and fonts for every part of your blog.
Fine-tune the spacing for your post item.”
Difference Between a Post Slider and a Carousel?
Even though sliders and carousels are similar and used in similar ways, they have some important differences.
A slider displays different pictures at a time. When you move the slider or after a certain time, the picture changes.
A carousel shows multiple pictures at the same time, and they move as the carousel goes around. You can start the picture rotation yourself or set it to rotate automatically after a certain time.
But they aren’t exactly the same.
The main difference is how many pictures they can show at a time. A carousel can show many items, while a slider only shows at a time.
To do adding a post carousel to your Divi website, you’ll need to create a new post:
You can create new posts with Divi Builder or its classic editor. Must set the thumbnail images. These thumbnail images will show in the post-carousel slider.
Giving Your Post a Relevant Title Now that you’re in the post editor, it’s essential to provide a descriptive and relevant title for your content. Here’s how:
Once you’ve given your page or post a title, you can proceed to add the post carousel using the Divi Builder.
Adding a Post Carousel to Your Page or Post
Adding a New Section to Your Page through Divi Builder, you have to create a section where you can place your post carousel.
Inserting a New Module Once you’ve added a section, you need to insert a module to display your post carousel.
Selecting the Post Carousel Module After finding the “Post Carousel” module, you have to select it to add it to your section.
Configuring the Module Settings Now that you’ve added the Post Carousel module, you need to customize its settings to display your desired content. Here are the key configuration steps:
Selecting Categories or Tags
Find the option for selecting “Categories” or “Tags” in the module settings.
Click on this option to choose specific categories or tags that you want to include in the carousel. You can also leave it blank to display content from all categories or tags.
Customizing the Carousel Display Settings (Autoplay, Navigation, etc.)
Explore the module settings panel for various display options.
Customize settings such as autoplay (if you want the carousel to automatically advance), navigation arrows, slide animation, and more, to match your preferences and design.
By following these steps, you’ll configure the Post Carousel module to display the content you want in the way you desire within your Divi page or post.
Styling Your Post Carousel
Accessing the Module’s Design Settings To make your post carousel visually appealing and harmonize with your website’s design, you’ll need to access the module’s design settings.
Customizing the Layout, Colors, and Typography to Match Your Website’s Design Once you’re in the design settings, you can tailor the appearance of your post carousel. Here are detailed steps for customization:
Layout Customization:
Look for layout-related options such as “Number of Columns,” “Image Aspect Ratio,” and “Spacing” between carousel items.
Adjust the number of columns to control how many items are displayed in each row.
Modify the image aspect ratio to ensure images are displayed in the desired proportions.
Fine-tune spacing to control the distance between carousel items.
Color Customization:
Find options related to colors. These may include settings for text color, background color, button colors, and more.
Customize these colors to match your website’s color scheme. Click on color pickers to select the exact shades you want.
Typography Customization:
Explore typography settings to adjust text font, size, and style.
Modify fonts for titles, excerpts, and any other textual elements within the carousel.
Ensure that the chosen typography aligns with your website’s overall typography choices.
Additional Styling Options:
Depending on the Post Carousel module and the Divi theme you’re using, you may find additional styling options like border settings, shadow effects, and more.
Use these options to add extra visual flair to your post carousel if desired.
Tips for Enhancing Your Post Carousel
A. Using High-Quality Featured Images
Opt for high-resolution and visually appealing images for your carousel posts.
Clear, sharp images enhance the overall look and professionalism of your carousel.
B. Writing Engaging Post Excerpts
Craft concise and compelling post excerpts that pique the reader’s interest.
Engaging excerpts can encourage users to click and explore your content further.
C. Promoting Your Most Important Content
Strategically feature your most important or popular posts in the carousel.
Highlighting key content can drive more attention and engagement.
Conclusion
In summary, creating a post carousel in Divi can elevate your website’s visual appeal. By following the steps and applying the provided tips, you can effectively showcase your content.
Many people shop online and use online services these days. But before you buy stuff, use the services, and know the feedback of existing users on the internet, you usually check out the seller first. You want to make sure you’re not wasting your money. You look for reviews from people who already bought the same thing, used the service, and recommendations. That’s why testimonials on websites are a big deal. They help build trust with folks who are thinking about buying but aren’t quite sure. So, it’s best if real customers write these testimonials. If not, people might not believe them, and that could hurt your business.
What is a Divi Testimonial Carousel
You might not recognize the fancy word, but I’m sure you’ve come across this thing before. A testimonial slider is basically a little box on a website that shows what customers are saying about a product. You know, those comments like, “I really like this product! It made my life easier!” That’s the kind of stuff that grabs your attention and makes you stay on the site.
Create testimonial sliders with the Divi Carousel Testimonial Module
Want to make cool testimonial sliders for your WordPress website? Well, you can do it easily with the Divi Carousel Testimonial Module. Here are 5 good reasons why you should use this module:
It’s simple to learn how to use the plugin.
You don’t need to know any coding stuff to make awesome testimonial sliders.
You can design your slider any way you like.
It works well on mobile devices, so everyone can see it.
You can easily edit your slides by just dragging and dropping them.
Divi Testimonial helps you make fantastic WordPress testimonial sliders that actually work. There are two types to choose from: 3D Cover Flow and Slider. Give it a try and make your website shine!
Display your testimonials using a dynamic slide generator
The dynamic slide generator is one of the most amazing features of the Testimonial Module. You can add any new item with details, like rating, name, and designation, and has lots of features. It can be 3D coverflow or can be a slider. How’s that going to help to make changes in your testimonial slider fast and easily? I’m glad you asked.
Divi testimonial slider examples
Now that you know why having a testimonial slider on your website is a good idea, let’s check out some awesome examples. These examples were made using Divi Testimonial Carousel, and if you like them, you can easily add them to your own website.
Static Divi Testimonial
Simple Testimonial
Simple Testimonial
Enhance your Divi Testimonial with elegant navigation features. Make your testimonials even more appealing and user-friendly on your website.
Divi Testimonial Showcase
Divi Testimonial includes a showcase feature along with designations. This allows you to highlight and display testimonials from your clients or customers along with their respective job titles or roles, adding credibility and context to their feedback.
Testimonial with Rating
Divi Testimonial with Rating is a feature-rich tool that allows you to showcase customer testimonials along with ratings on your website. It adds credibility and helps potential customers make informed decisions based on real feedback from others.
You can build this Testimonial Carousel in Free by using our Plugin
What’s a testimonial carousel, and how does it work?
A testimonial carousel on a website is like a slideshow that shows different customer reviews. It’s usually put on the homepage or a product/service page to show potential customers what others are saying. These reviews are usually in a little box that scrolls to display different comments.
How can I put a testimonial carousel on my website?
Depending on the website platform you use, there are different ways to add a testimonial carousel.
You can find easy-to-use widgets or plugins for testimonial carousels from website builders. Or, if you want something unique, you can use HTML, CSS, and JavaScript to create your own.
Why should I use a testimonial carousel on my website?
A testimonial carousel helps show that other people like your product or service, which builds trust and can increase sales. It also boosts your brand’s reputation by featuring real customer reviews and positive comments.
What are some tips for making a good testimonial carousel?
Here are some things to keep in mind: Use real and relevant testimonials that your target audience can relate to. Pick a design that matches your brand’s style. Don’t overload it with too many testimonials. Adding pictures or logos can make the testimonials more believable.
How many testimonials should I include in a carousel?
It depends on your website and what you’re selling. Usually, it’s a good idea to show 3 to 6 testimonials. You don’t want to overwhelm visitors with too much information.
What kind of testimonials should I put in a carousel?
Include testimonials that relate to your products or services and highlight their best features. It’s good to have a mix of testimonials, from people who loved your product to those who initially had doubts but were impressed.
Is it a good idea to include photos or visuals with testimonials?
Yes, adding images or other visuals can make testimonials more credible. It personalizes them and adds authenticity.
How do I make sure the testimonials in my carousel are real and trustworthy?
To make sure the testimonials are genuine, contact your customers and ask if you can use their reviews. Include their name, photo, and other identifying details with their testimonial.
Can you give some examples of effective testimonial carousels on other websites?
Good testimonial carousels usually have high-quality and relevant testimonials, a simple design, and visuals like images or logos. You can check out examples on websites like ASOS and Trello.
How can I know if my testimonial carousel is working well in terms of engagement and sales?
You can use website analytics tools to track metrics like click-through rates and how long people stay on the page. To get feedback, you can also run A/B tests or surveys with your audience.
In conclusion, testimonials are powerful for your website. They speak for your product or service and can turn potential customers into happy buyers. Create an easy-to-access testimonial carousel with tools like Real Testimonials and put it on your website, blog, or app. Use this tool to grow your customer base and boost your business.
The Testimonial Carousel Module in Divi comes with a range of features, including options for individual testimonials, author details, Carousel and Coverflow styles, arranging items, customizing text and author box backgrounds, and additional elements like brand logos, author box settings, quote icons and images, and spacing adjustments.
Within the Content Item, you can find these key elements:
Name: The person’s name.
Designation: Their job title or role.
Rating: The score or rating is given.
Content: The testimonial or review text.
Image: The person’s image.
Alt: A description of the image for accessibility purposes.
Link
If you want to guide your audience to a different page, the Link feature allows you to create custom links for each child item. The DiviCarousels Image Carousel module is user-friendly, making customization a breeze.
Background
Within the Child Items Content tab, you can use various background options. These options include changing colors, using gradients, adding images, or even videos. You can adjust these settings to your liking. Keep in mind that this background applies to the entire item, as it’s a default feature in Divi.
Child Item Design Tab
Heading
In the Heading section of the testimonial carousel, you can effortlessly modify the text styles. Whether it’s changing the font, size, color, or other style elements, this feature lets you tailor the look of your heading text to suit your design preferences with ease.
Spacing
Divi has a standard spacing setting that functions uniformly across the entire module. This setting offers two usual choices for margins and padding, and these options apply consistently to all Divi modules.
Border
In the DiviCarousels Testimonial Carousel, the Border feature allows you to round the corners of the container and adjust the border’s width, style, and color. While it may seem a bit tricky initially, it becomes clearer when you give it a try.
Box Shadow
The Box Shadow feature affects each item in the Divi Testimonial Carousel individually and provides six distinct shadow effects that you can customize to your liking.
Child Item Advanced Tab
You can handle all your needs using the Content and Design tabs, so be sure to explore these options thoroughly. However, the Advanced tab in the Divicarousls Testimonial Carousel gives designers complete control over the entire module. Here, you can customize every element of the image carousel using CSS ID & Classes and other Custom CSS codes. Additionally, you’ll discover settings for visibility, transitions, position, and scroll effects to ensure everything runs seamlessly.
Carousel Type: This lets you choose the style of your carousel. You can pick between “Coverflow” and “Slider” to determine how your images will transition.
Slider per View: This controls how many images are visible at the same time within the carousel. It’s like deciding how many photos you can see in one glance.
Carousel Speed: This setting allows you to change how quickly the images move from one to the next in your carousel. It’s like adjusting the speed of a slideshow.
Item Space Between You can set the space or gap between each image in the carousel. It’s like deciding how far apart the pictures should be.
Autoplay: When enabled, this feature makes the carousel automatically scroll through the images without needing manual interaction. It’s like setting your carousel on autopilot.
Autoplay Delay: This defines the amount of time between each slide when using the autoplay feature. It’s like setting the pause duration between one picture and the next.
Slider Loop: You can choose whether the carousel should start over from the beginning once it reaches the last image. It’s like deciding if the carousel should keep cycling.
Center Slider: This option helps you center the active image in the carousel, making it stand out. It’s like ensuring the current picture is in the spotlight.
Auto Height: This setting adjusts the height of the carousel automatically based on the content. It’s like making sure the carousel is the right size for the images it contains.
Pause on Hover: When this is enabled, the autoplay feature will pause when you hover your mouse over the carousel. It’s like putting a temporary stop to the automatic scrolling when you interact with it.
Order Items
This is like a tool or system that helps you arrange or organize your testimonial elements in a specific sequence.It’s like arranging pictures on a bulletin board in the order you want them to be seen.
Navigation
Arrows:
The arrow feature lets designers create stylish arrows by customizing each part.
Arrow Icon:
In the Arrow Settings, you can choose your favorite icons for the previous and next arrows, as well as adjust their size.
Arrow Icon Color & Background:
You can change the color of the arrow icons and the background behind them.
Arrow Position, Alignment & Opacity:
The Image Carousel’s Arrow feature allows you to tweak the position, alignment, and opacity of the arrows.
Pagination
Dots:
The Dots feature allows you to personalize the appearance of the dot icon, including its alignment and color. You can also make the active dot icon stand out by changing its color.
Background
In the Content tab of the Divi testimonial Carousel, you can enhance your layout by adjusting background settings. This includes changing background colors, using gradients, adding images, or even integrating videos. You have the flexibility to customize these choices to match your preferences.
Divi Testimonial Carousel Design Tab
Slider Item
This is like a frame around the content, kind of like a picture frame. It helps to define the boundaries and appearance of the testimonial section.
Image
This is where you can insert a picture of the person who gave the testimonial. It adds a personal touch to the testimonial
Name
This is the full name of the person who wrote the testimonial. It’s important to know who is sharing their feedback.
Designation
This is the person’s job title or position. It tells us what the person does for a living or their role in a company.
Content
This is the actual testimonial message or review. It’s what the person has written about their experience or thoughts. This is the heart of the testimonial.
Rating
This is a score, usually from 1 to 5, that represents how satisfied the person is. It’s like giving a grade to their experience, with 5 being the best and 1 being the worst. It helps others quickly understand how positive or negative the testimonial is.
Custom Spacing
Custom spacing is a crucial feature of the Divicarousel testimonial carousel module. Within this setting, you can find two spacing options:
Wrapper spacing: This controls the margin and padding for the entire container, making it easy to set margins and padding for each item within the container. Note that changes here affect every slider in the module.
Content spacing: Content spacing allows designers to add margin and padding to the button and caption individually, affecting all sliders in the module.
Spacing
Divi has a default spacing setting that works consistently across the entire module, offering options for margins and padding that apply to all Divi modules.
Border
The Border feature in the Divicarousels Testimonial Carousel module allows you to round the corners of the item container and customize border width, style, and color. It’s easier to grasp when you give it a try.
Box Shadow
Box Shadow impacts each item in the Divi testimonial Carousel module individually, offering six customizable shadow effects.
Filter
The filter feature adds various color effects to child items, with options to adjust hue, saturation, brightness, contrast, opacity, blur, and more.
Transform
Similarly to the filter feature, transform effects can be applied to child items, offering control over scale, translation, rotation, skew, and origin.
Animation
The animation effect setting, present in all Divi default modules, including the testimonial Carousel, provides seven different effects and additional options for eye-catching animations.
Divi Testimonial Carousel Advance Tab
While the Content and Design tabs cover most needs, the Advanced tab in Divicarousel’s Testimonial Carousel offers extensive control. Here, designers can fine-tune elements using CSS ID and classes and add custom CSS code. It also includes settings for visibility, transitions, position, and scroll effects
Class ID & Class
CSS ID and CSS Class are used for unique identification and applying custom styles to elements.
Custom CSS
In the Divicarousels Testimonial Carousel module, you can add custom CSS code in various places, with each CSS input box providing a reference for the targeted class.
The Divi Image Carousel module represents within the divicarousels plugin, the creative journey for designers. It stands out as an asset and a source of pride for the divicarousels plugin. This module is renowned for its innovative approach, significantly simplifying the design process and reducing time investment.
The Divi Image Carousel offers a multitude of features that cater to designers’ needs, including child items, carousel settings, carousel types, advanced carousel settings, customizable content area backgrounds, exceptional typography options, arrow and dot navigation, buttons, custom spacing, and much more. Notably, the child item feature possesses distinctive and attention-grabbing attributes, which can be applied to specific items, while the global settings impact the entire module.
Before we talk about all the fancy stuff in the Image Carousel, let’s check out the Child Item. It’s like adding a special touch to one image at a time. The Child Item has three parts:
Content Options
Design Options
Advanced Options
Child Item Content Tab
In the Content tab of the DiviCarousel Image Carousel Child Item, you’ll find some important features. Designers use these features to set things like the picture, caption, button, and link for a specific item in the module. Don’t worry; we’ll talk about all these features in detail today.
Content Item
Heading: The main title.
Subheading: A smaller title or description.
Image: The picture you want to show.
Alt Text: A description of the image for accessibility.
Text Position: Where you want the text to appear on the image.
Link
If you want to send your audience from one item to another page, you can use the Link feature. It lets you create a custom link for each child item. The DiviCarousels Image Carousel module is well-organized, making it easy to customize while you work.
Background
In the Child Items Content tab, you can enhance the look of your layout with various background options. These include changing the background color, using gradients, adding images, or even videos. You can fine-tune these settings to match your preferences. It’s important to note that this background applies to the entire item, which is a default feature in Divi.
Child Item Design Tab
The Design Tab for each child item lets you make each part of an item look really nice. It has some special design options that are quite helpful. You can do things like making changes when someone hovers over the item, adjusting captions, buttons, spacing, borders, and using filters. These might sound tricky, but don’t worry; it’s simpler than you might think. Just follow the instructions below.
Slide Item
In the Slide Item, you have the flexibility to add border radius, customize the border style, and even apply a unique box style. These options give you the freedom to create visually appealing designs for your slides.
Heading
In the Heading section, you can easily change the text styles for your headings. Whether you want to adjust the font, size, color, or other styling elements, this feature allows you to customize the appearance of your heading text to match your design preferences.
Subheading
In the SubHeading section, you can easily change the text styles for your headings. Whether you want to adjust the font, size, color, or other styling elements, this feature allows you to customize the appearance of your heading text to match your design preferences.
Image Settings
Within Image Settings, you have the flexibility to modify various image attributes, including the application of a box shadow. This feature empowers you to fine-tune the visual aspects of your images, ensuring they align with your design vision and requirements.
Spacing
Divi has a default spacing setting for the entire module. There are two common margin and padding settings that work the same way for all Divi modules.
Border
The Border feature in the DiviCarousels Image Carousel lets you round the corners of the container and change the border’s width, style, and color. It might seem a bit confusing at first, but it’s easier to understand when you try it out.
Box Shadow
The Box Shadow feature impacts all the individual items in the Divi Image Carousel module and offers six unique shadow effects that you can customize.
Filter Transform
The transform feature for each child item gives you five different ways to change how it looks. You can scale, move, rotate, skew, and set the origin point for better control over the item’s appearance.
Child Item Advanced Tab
You can accomplish everything you need in the Content and Design tabs, so make the most of these options. However, the Advanced tab in the Divicarousls Image Carousel allows designers to have full control over the entire module. Here, designers can fine-tune each element of the image carousel using CSS ID & Classes and other Custom CSS code. Additionally, you’ll find settings for visibility, transitions, position, and scroll effects to ensure everything works smoothly.
In the Carousel section, you can configure various settings for your Divi image carousel:
– Carousel Type: Choose between Coverflow and Slider.
– Slider per View: Determine how many items are visible at once.
– Carousel Speed: Adjust the speed of the carousel’s transitions.
– Item Space Between Set the spacing between items.
– Autoplay: Enable automatic scrolling.
– Autoplay Delay: Define the delay between slides.
– Slider Loop: Choose whether the carousel should loop.
– Center Slider: Center the active slider.
– Auto Height: Adjust the carousel’s height automatically.
– Pause on Hover: Pause autoplay when hovering over the carousel.
Navigation
Arrows:
The arrow feature lets designers create attractive and stylish arrows by customizing each part.
Arrow Icon:
In the Arrow Settings, you can pick your favorite icons for the previous and next arrows. You can also choose the icon size.
Arrow Icon Color & Background:
You can change the color of the arrow icons using the arrow icon color option, and you can modify the background color behind the arrows with the background feature.
Arrow Position, Alignment & Opacity:
The Image Carousel’s Arrow feature has settings to adjust the position, alignment, and opacity level of the arrows.
Pagination
The Dots feature allows you to customize the appearance of the dots icon. You can change its alignment and color. You also have the option to give a distinct look to the active dot icon by using the active dot color feature.
Background
In the Content tab of the Divi Image Carousel, you can enhance your layout in several ways. You can change the background color, use gradients, add images, or even incorporate videos. Plus, there are settings that allow you to customize these choices according to your preferences.
Divi Image Carousel Design Tab
Slide Item
In the Slide Item, you have the flexibility to add border radius, customize the border style, and even apply a unique box style. These options give you the freedom to create visually appealing designs for your slides.
Heading
In the Heading section, you can easily change the text styles for your headings. Whether you want to adjust the font, size, color, or other styling elements, this feature allows you to customize the appearance of your heading text to match your design preferences.
Subheading
In the SubHeading section, you can easily change the text styles for your headings. Whether you want to adjust the font, size, color, or other styling elements, this feature allows you to customize the appearance of your heading text to match your design preferences.
Custom Spacing
Custom spacing is a crucial feature of the Divicarousel image carousel module. When you explore this setting, you’ll find two different spacing options:
Wrapper spacing: This lets you control the margin and padding for the entire container, and it’s also easy to set margins and padding for each item within the container. Keep in mind that any changes made here will apply to every slider in the whole module.
Content spacing: Content spacing allows designers to add margin and padding to the button and caption individually. It’s important to note that these adjustments will affect the caption and button for all sliders in the module at once.
Spacing
Divi includes a default spacing setting that works the same way for the entire module. You’ll find two common options for margins and padding in this function, and they apply to all Divi modules.
Border
The Border feature in the Divicarousels Image Carousel module lets you round the corners of the image container. You can also customize the border’s width, style, and color. Don’t be intimidated; it’s easier to understand when you try it.
Box Shadow
Box Shadow affects all the individual items within the Divi Image Carousel module and offers six different shadow effects that you can customize.
Filter
The filter feature is impressive and adds a variety of color effects to the child item. You can adjust settings like hue, saturation, brightness, contrast, opacity, blur, and more to enhance your design.
Transform
The filter feature is impressive and adds a variety of color effects to the child item. You can adjust settings like hue, saturation, brightness, contrast, opacity, blur, and more to enhance your design.
Animation
The animation effect setting is a part of all Divi default modules, including the Divi Image Carousel. It offers seven different effects and additional options to make your animated section look visually appealing.
Divi Image Carousel Advance Tab
You can do everything you need in the Content and Design tabs, so use them for your convenience. But if you want even more control, the Advanced tab in Divicarousel’s Image Carousel lets designers fine-tune every element using CSS ID & Classes and other Custom CSS code. Plus, it offers settings for visibility, transitions, position, and scroll effects to make everything work smoothly.
Class ID & Class
CSS ID: The CSS ID is used to uniquely identify the element when you want to link, script, or style it separately.
CSS Class: You can assign one or more CSS classes to the element, separated by spaces. These classes allow you to apply custom CSS styles either from your child’s theme or Divi’s custom CSS inputs.
Custom CSS
In the Divicarousels Image Carousel module, there are various places where you can add your custom CSS code. Each CSS input box has a “?” symbol, which indicates the targeted class for your reference.
