You can never have too many different ways to show the important stuff on your website. Whether it’s a luxury brand website, a gaming website or a dropshipping website, this is one of the main reasons to start a website above all else. You always want people to see something and you always want to make sure you present it in the most appropriate and eye-catching way. A split window carousel usually gets you both.
To the Qi Plugins for Elementor plugin, an extensive collection of widgets for the Elementor site builder, we’ve added a Split Showcase Spinning Window widget that 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 images to your text. No matter where you look at it, it is stylish, dynamic and attractive.
If you decide that a split showcase carousel is what your website needs and that Qi Plugins for Elementor is the best plugin to add it to your website, stick around as we guide you through using the widget. You can watch the training video we created:
And if you prefer to read a guide, stick around. Here we will consider:
Getting the Plugin and Installing Everything
Before you begin, Elementor and Qi Plugins for Elementor must be installed and enabled on your website. Since Divided Showcase Carousel is a premium widget, you will need to get the premium version of Qi Plugins for Elementor. After installing and activating both plugins on your website, the next step will be to open a page or post in Elementor that you want to edit.
Before adding the widget there are a few things and settings that need to be adjusted to achieve a result similar to the one we created for its guide. Note that you may not get an exact match depending on the theme and general settings you’re using, but that’s fine. This guide should inspire and educate you and you are free to create something more suitable for your website.
This is how we created our page. First we made sure that our partition contains only one column. Next, we set the section’s Layout to full width and the column spacing to no spaces. You can find both options below. Layout > Layout when editing the partition. Under Advanced > Advancedwe set the top and bottom padding to 175px.
For the column settings, we only set the left padding to 10px. Advanced > Advanced. After that, we were set to add the Split Showcase Carousel – it was as simple as finding it in the widgets list and dragging it into the column.
Adding Content to the Split Showcase Carousel
The first thing you’ll notice when you add the widget is that it has several good content options sections. It makes a lot of sense, though, as there are images, text, buttons, and a slider that need to be set – so let’s get started right away.
General Settings
The first set of settings, General settings, lets you change the number of items in the loop, choose the title, subtitle, image, and link for each slide in the loop, and choose whether you want to have a button. Click it and decide what type of text animation you want to use.
The first thing we did was set up the stuff. We’ve stuck to the default three, adding titles, captions, and images to them, and also adding a # sign to the link to make it clickable. We also enabled the button and left the text animation by default.
With this, we created all the slides we needed, so it was time to move on to the next batch of content settings.
Slider Settings
Slider settings allow you to choose how the slider behaves and looks. You can enable slider loop, autoplay, and choose slide and slide animation times. You can also adjust scrolling navigation and pagination, select aspect ratios, and set various column options.
We chose to disable the slider navigation but enabled pagination and set the number of columns to two. Finally, we reduced the spacing between elements to 25px. The rest of the options remained at their default settings.
Next, we moved on to the Button settings.
Button Settings
Button settings let you choose between gradient and SVG image for a background. You can also decide which text you want to use with the button, turn the underline on or off, select the SVG image and set its type.
We set the text of the button to Display More and enabled the underline. We choose a circle shape as our SVG and set its type to full size.
Don’t be intimidated by the size of this circle; We’ll run everything in style, which is the next step in creating a split display carousel.
Shaping the Split Showcase Carousel
The Style tab contains many different sections and you should check them all out to see what they have to offer. But since we left our widget with that ugly SVG that blocks part of the text and completely hides the button text, that was the set of options we headed for the first one.
Button SVG Style
To edit your button’s SVG style, you’ll have the option to set the hover animation and fill and stroke colors for normal and hover views. Options for adjusting the DashOffset stroke and changing the stroke width, DashArray, and DashOffset Time are also available.
In Normal view, we changed both the SVG fill and stroke colors to #fbebc6 and not the other options.
The results are pretty good – the text is visible and our button SVG looks like a stylish design choice. Now we can start styling the widget from the top, this is not the Slider Navigation Style in our case because we didn’t choose to use the navigation.
Slider Pagination Style
In the Pagination Style options, you can change the position, alignment, offset, size, and spacing for pagination. You can also enable numbered pagination and choose a border and color type for both normal and active states.
We changed the pagination offset to 73px. We changed the size to 9px and the space between bullets to 17px.
Since there was nothing else we needed here, we continued on our way.
Text and Subtitle Style
A text style is a set of options applied to the title text of elements. There is the standard text option – the full gamut of label, color, typography options, as well as text fill.
We chose H1 for the text label and 20% of the text padding on the right.
Subtitle Style has pretty much the same options except the last option which has margin instead of padding. This time we chose to change the size of the letters to 17px in the typography options and set the bottom margin to 12px.
Button, Button Underline, and Space Style
The Button Style section is richer with options – opens with typography, alignment only, text color – normal and on hover to continue with button text rotation and padding.
We changed the letter size to 17px in the typography options. We chose the normal color #1e1e1e and set the padding to 0. The remaining options remained as they were.
For the Button Underline Style, we set the offset to 6 between the color, width, offset and thickness, and alignment settings.
Finally, for the spacing style, we chose to give the button margin 34px on the top and 50px on the bottom. This was the result.
Of course, you’re always welcome to make changes as you see fit – use this widget as your playground to create the best possible loop for everything on your website.
Let’s wrap it up!
You should always be looking for the best possible ways to showcase your products, services or offers on your website. Qi Addons for Elementor is a great addon that will give you lots of creative options for any screen. The split showcase carousel we show you here is a great combination of motion, imagery, and text, and it will definitely get people looking at it.
