How to Use Carousel Widget

element pack

How to Use Carousel Widget

What is the actual act of Carousel? Carousels allow multiple pieces of content ( such as text, image, video, etc.) on large or small viewports to occupy a single, coveted space.

The guideline below about Carousel Widget will get you to walk in the right way to use the widget developed by Element Pack

Moreover, I’ll guide you in different phases of how you can insert & use the widgets to design layout for the content (text, image, and video, etc.)  you want to work with and style as well.

Content Tab

The Content Tab having some handy sections for making an attractive web page will genuinely get you to have a structure of the web content (text, image, video, etc.).
 

Layout

This section will permit you to set different skins like Ramble, Alice, vertical with default skin. In addition, you’ll be able to determine column numbers, limit and item gap between every single item.

Go to the Layout section > Skin and choose any one > Columns > Limit > Item Gap.

Image

Using this section, if you have an image carousel, you can set an image thumbnail from the control Thumbnail Show and size from the Image Size ( such as thumbnail, full, etc. ) control as well as Image Ratio.

Not to enable Thumbnail Show, you’ll find a carousel without an image as you see in the second screenshot. It’s up to you.

Title, Meta & Excerpt

In the Title section, you’ll able to show title from h1 to h6 and also you can set div, span, and p tag.

Now, if I talk about the Meta Section, this section will permit you to show the author name, category, date, time, and comments as you see. You should remember meta is very important for SEO.

From the Excerpt section, what you can do is to set word length only.

Readmore Button

This section here normally works to send visitors to other pages for information details. As well as you can add an icon or image with the button and button text, size.

For example, go to the Read More Button section and set an icon as you see from the icon library along with icon position and spacing.

Query

This section works for setting the source location of data that you need to display by the reference like Author, Categories, Tags, and Formats. The references can be different in accordance with the source location. Read more 

For example, 

A.  Go to Source ➤ next select data location( as posts, pages, etc.) 

B. Then, write the author’s name in the Author field. Similarly, in the Categories and Tags field.

C. On the other hand, select categories from the Categories field.
D. Order By and Order controls are here to arrange the data you want to display through Random, Title, Date, or Menu order wise and also with ascending or descending order.

Navigation

This section is a field used to control the movement of things from one place to another place. To work with the section, just go to the controls under Navigation. 

For example, Go to Navigation ( as such Arrows and Dots) ➤ Arrows Position (as such center). If you need to hide navigation symbols in mobile mode, it’s a matter of one click on the switcher.

Carousel Settings

This section will allow you to set the carousel behavior. From here, you should work mainly with Autoplay, Autoplay Speed, Pause on Hover, Center Slide, Loop and Animation Speed.



Style Tab

It is time to work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you want to design.

Items

In this section in Normal mode to design content, you can set the background color, box-shadow, border type with width and color, as well as border-radius and padding.

Simply, go to Style > Items.

Moreover, here in Hover mode, you’ll be able to background and border color, box-shadow, and match padding.

Just, come to Style > Items > Hover

Image

This section will allow you to put background color with an image used in the carousel and also padding, margin, and border-radius also. More importantly, you have a chance to set the opacity of the image background color in normal mode and hover mode. Read more about padding, margin, etc.

Title, Excerpt

In these sections, you’ll be able to set normal and hover text color, spacing, alignment, and typography. Read more about Typography.

Meta

This section will let you add Color, Hover Color, Divider Color, Spacing, Typography , and Alignment. Take a look at the image above.

Button

This section here works to design the read more button that sends visitors to other pages for information details. To design the button just go to Button to Normal and use all the controls you see there.

Similarly, go for the Hover and you can also add Animation.
For adding a hover effect with animation to the button, go to Hover > Animation (like Grow, Shrink, Push, etc.).

Navigation

Using this section, with the demonstration showing in the screenshot, you can mainly design the arrows and dots. Simply go to Navigation to Arrows Size > Dots Size > Arrows Offset > Dots Offset.

Video Assist

To sum up, hopefully, you have seen what things our widget includes.  And the things will help you get started all you want. You’ll admit all are easy to handle. See the video inserted above and to get more design knowledge, hook yourself with the demo page here.







About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.


Missed The Black Friday offer this year? Get up for flat 50% discount right now.