Product Carousel Design Options

All your styling options are here for the product carousel module.

Overlay: Overlay allows you to create a color effect on your product image on hover. You can choose your own color for overlay.

Title: Here in the title you can reposition it on top(over your image) or you can hide it. Here you can style your title text just how you want it by choosing the text color, orientation, font, font size and weight, letter spacing, and line-height.

Price: Unlike titles, you can do the same with the price. If you would like to keep your title and price on top. The price will be shown under Title.

Description: Description also has the same options like fonts, styles, orientations, size, weight, letter spacing, and line-height.

Sale Badge: You can style your sale badge from here. With all the styling options you will find a sale badge background color option as well.

Add to Cart Button: You can choose your add to cart button position over the image or at the bottom. If it’s over the image it will show up on hover only. If it’s on the bottom it can be aligned left, right, or center. You can use a full-width button as well.

You can align your button at the bottom even if you have different lengths of content by just turning on the “Add to Cart Align Bottom” Option.

Add to cart button also has a background color option as well as a background color for hover.

You can style your button text the way you want it by choosing the text color, orientation, font, font size and weight, letter spacing, and line-height.

You can also use rounded corners and full border style options for your buttons.

Review: If any of your products have customer reviews you can set color and background from here.

Arrow settings: Here are the design options for your arrows. You can use a custom icon and resize it. You can give color and set the background as well. Arrows can be a circle around, reposition to inside and you can turn on it only for hover.

Dot Settings: Here is the styling option for your dot navigation. You can choose the shape of your dot either square or circle and choose the color.

Image Settings: Your product image can be customized from here. You can use a hover scale to your carousel. You have the control of the corner radius and style your image border.

Hover: We added some color hover effects in this section. You can use it and choose your preferred color. You can use this with YES/NO selection. If you would like to have that particular option you can Keep the toggle as YES or You can turn that off by keeping it to NO.

Sizing: Sizing options help to create a responsive design. Here you have the option to control the width and height of your carousel module. This option is available in the regular Divi module and does the same thing for all modules.

Spacing: Spacing is one of the core features of any Divigear’s product. Default Divi modules come with two spacing areas one is for margin and another is padding. We break this down into the individual elements in our module. You can use margin padding to full content, Top of content, button, etc. You also have the regular margin padding as well.

Border: With the border option, you can implement rounded corners and full border style to your carousel.

Box Shadow: Pick a box-shadow style to enable box shadow for your element. Once enabled, you can customize your box-shadow with positioning, strength, color, etc.

Transform: With the help of transform, you can move elements around, scale them up and down, rotate on three different axis, skew, and adjust the transform-origin with ease.

Submit a Comment

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