What Is a Divided Showcase Carousel and How to Add One in WordPress

You can never have too many different ways to show important things on your website. It’s one of the main reasons to start a website in the first place, whether it’s a luxury brand website, a gaming website, or a dropshipping website. You always want people to see something, and you always want to ensure you’re presenting it in the most appropriate and eye-catching way. A divided showcase carousel will usually get you both.

In the Qi Addons for Elementor plugin, a comprehensive collection of widgets for the Elementor site builder, we’ve included a Divided Showcase Carousel widget you can use to easily create attractive combinations of text and images for maximum attention-grabbing power. It’s invaluable for adding context to images or adding illustrations to your text. Whatever way you look at it, it’s stylish, dynamic, and attractive.

If you decide that a divided showcase carousel is just the thing your website needs and that the Qi Addons for Elementor is the best plugin for adding it to your website, stick around as we walk you through using the widget. You can watch the video tutorial we’ve created:

And if you prefer reading a guide, stick around. Here’s what we’ll cover:

Getting the Plugin and Setting Everything Up

Before you get started, you’ll need to have Elementor and Qi Addons for Elementor installed and activated on your website. Because Divided Showcase Carousel is a premium widget, you’ll have to get the premium version of Qi Addons for Elementor. After you’ve installed both plugins on your website and activated it, the next step would be to open a page or a post you want to edit in Elementor.

Before you add the widget, there are a few things and setting that need to be tweaked to get the result like the one we’ve created for his guide. Keep in mind that, depending on the theme you’re using and general settings, you still might not get an exact match, but that’s okay. This guide should serve to inspire and educate you, and you’re free to create something that’s better suited for your website.

Here’s how we’ve set up our page. We’ve made sure our section contains only one column, first. Then we’ve set the Layout of the section to full width, and its columns gap to no gap. You can find both options under Layout > Layout when editing the section. Under Advanced > Advanced, we’ve set the top and bottom paddings to 175px.

For the column settings, we’ve only tweaked the left padding to 10px, under Advanced > Advanced. After that, we were set to add the Divided Showcase Carousel – it was as simple as finding it in the list of widgets and dragging it over to the column.

Adding Content to the Divided Showcase Carousel

The first thing you’ll notice when you add the widget is that it has a good few content option sections. It makes perfect sense, though, as there are images, text, buttons, and a slider that need setting up – so let’s get right to it.

General Settings

The first batch of settings, the General settings, allow you to change the number of items in the carousel, pick the title, subtitle, image, and link for every slide in the carousel, and choose whether you want to have a button or not in the carousel, and decide what type of text animation you want to use.

The first thing we did was to set up the items. We stuck with the default three, adding titles, subtitles, and images to them, as well as a # in the link to make them clickable. We also enabled the button and left the text animation at default.

With that, we created all the slides we needed, so it was time to proceed with the next batch of content settings.

Slider Settings

The Slider settings allow you to choose how the slider behaves and looks. You can enable the slider loop, autoplay, and choose the slide and slide animation durations. You can also set slider navigation and pagination, choose image proportions, and set a variety of column options.

We chose to disable slider navigation but enable paginations and set the number of columns to two. Finally, we shrunk the space between items to 25px. The rest of the options remained on their default settings.

Next, we were on to Button settings.

Button Settings

The Button settings allow you to choose between a gradient and an SVG image for a background. You can also decide which text you want to use with the button, turn the underline on and off, choose the SVG image, and set its type.

We set the text of the button to View More and enabled the underline. We choose a circle shape as our SVG, and we set its type to full size.

Don’t be alarmed by the size of that circle – we’ll make it all work in the next phase of creating a divided showcase carousel – the styling.

Styling the Divided Showcase Carousel

The Styling tab contains many different sections, and you should check out all of them to see what they offer. But because we left our widget with that ugly SVG blocking a part of the text and completely obscuring the button text, that’s the set of options we headed for the first.

Button SVG Style

To sort out the SVG style of your button, you’ll have the option to adjust the hover animation, and the fill and stroke colors for regular and on hover views. The options to adjust the stroke DashOffset are there too, as are the options to change the stroke width, DashArray, as well as the DashOffset Timing.

We changed both SVG fill and stroke colors to #fbebc6 on normal view and haven’t changed any other options.

The results are pretty good – the text is visible, and our button SVG looks like a nifty design choice. We can now start styling the widget from the top section, which isn’t Slider Navigation Style in our case because we opted against using navigation.

Slider Pagination Style

In the Pagination Style options, you can change the position, alignment, offset, size, and spacing for the pagination. You can also enable numbered pagination, and choose border and color type for both normal and active situations.

We changed the pagination offset to 73 pixels. We changed the size to 9 pixels, and the space between bullets to 17 pixels.

Since there was nothing else that we needed here, we moved on.

Text and Subtitle Style

The text style is the set of options that apply to the title text of the items. The standard text option is there – tag, color, the full gamut of typography options, as well as text padding.

We chose H1 for the text tag, and 20% of the right-side text padding.

The Subtitle Style contains almost the same options, except for the final option which is margin instead of padding. This time, we’ve chosen to change the size of letters to 17 pixels in the typography options, and we set the margin bottom to 12 pixels.

Button, Button Underline, and Spacing Style

Button Style section is richer with options – it opens with typography, only to continue with alignment, text color – normal and on hover, button text rotate, and padding.

We’ve changed the letter size in the Typography options to 17 pixels. We chose the normal color to be #1e1e1e and set the padding to 0. The remaining options stayed as they were.

For the Button Underline Style, between the color, width, offset and thickness, and alignment settings, we’ve set the offset to 6.

Finally, for spacing style, we opted to give the button margin 34 pixels on the top, and 50 pixels on the bottom. This was the result.

Of course, you’re always more than welcome to make the changes as you see fit – use this widget as your playground to create the best possible carousel for whatever you have on your website.

Let’s Wrap It Up!

You should always be looking for the best possible ways to display your products, service, or offers on your website. Qi Addons for Elementor is a great plugin that will give you a lot of creative options for all sorts of displays. The divided showcase carousel we’ve shown you here is a great combination of movement, image, and text, and it’s bound to get people to look at it.