How to Create a Device Frame Slider in WordPress
Text and images are the building blocks of online content, and you can never have enough different ways to style and display them. Whether it’s choosing different fonts and colors for text or using display elements such as sliders for images, you could always do something to attract some extra attention to the parts of a page that matter the most for you.
If regular image sliders have bored you, or you’re looking to specifically showcase images in the frames of different devices (like mobile phones or laptops), the Device Frame Slider widget is just the thing for you. Released as part of our Qi Addons for Elementor plugin, the biggest free collection of Elementor addons you’ll find online, it’ll let you add WordPress device frame sliders to your website in no time.
To help you get started with this incredible addon, we released a video tutorial that takes you through the process of adding a device frame slider to a WordPress site page.
If you’d prefer to read a tutorial instead of watching , you’re just where you need to be. In this article, we’ll show you how to:
To add a WordPress device frame slider using the Qi Addons for Elementor plugin, you’ll need to install both it and the Elementor page builder. If you’re not familiar with Elementor, don’t worry – the page builder is very well documented, and you can use our beginner’s tutorial to get you started quickly. When you’re ready, navigate to Plugins > Add New, search for the plugins, and install and activate them.
We’ll use an example from our plugin’s page to showcase what you can do with the plugin. You can use it as a starting point for your exploration of the plugin. Also, keep in mind that we’re using our Qi Theme for this guide – things might look differently on your end, depending on the theme you’re using and its settings. With that in mind, let’s start preparing the page by making the background.
It’s made out of an image and some text. To add the image, we created a new section and then used the Edit Section option to bring up its options. Under Style we found Background and added the image, set its position to “center center,” repeat to “no-repeat,” and size to “cover.”
For the next step, we added the text using the Section Title widget, also available from Qi Addons for Elementor. We dragged the widget to the section, wrote our text, and used the Title Style options under Style to change the title tag to H3, the color to #ffffff, and the size to 250 pixels.
To make everything look exactly like in the example, we also had to dabble in Advanced Options. Under Positioning, we picked Absolute position as it allows the slider to overlap with the text and stay on top of it. We also used the offset options with values -1 pixel for horizontal offset and 18% for vertical offset.
With the background all set, it’s time to add the device frame slider widget. Simply finding it in the widget menu and dragging it to the section with the background will suffice, although it will result in a blown-up background image. To fix that, we accessed the widget’s options, and under Style > Style, we set the device width to 254 pixels.
When you’re happy with how your widget looks against the background, you can move to the next step – adding and editing the contents.
The first set of options in the Content section are the General options. This is where you can add images, choose the type of device frame you want to display, and whether you want to enable device frame shadow. We added three images, chose the mobile device frame, and enabled the shadow.
The Slider Settings are the next batch of content options. In these options, you can choose one of two slider effects, as well as enable slider loop, autoplay, navigation, pagination, and custom links. This is also where you set the duration for the slide and the animation.
For starters, we changed the slide duration to 1,700 milliseconds, to make them last shorter than the default 5,000 milliseconds. We also disabled the slider navigation, as well as the pagination.
After finishing with the content options, the next step would be to style the device frame slider.
The first two sets of styling options are the Slider Navigation Style and Slider Pagination Style options. They will be available to you if you decide to enable slider navigation and pagination. Within them, you’ll be able to set everything from the position and type of navigation and pagination to their color and size.
Since we chose not to display navigation and pagination, we can move on to the Style section. We already visited it when we were creating the background – it’s where we set the device width to make it more manageable. The other two options that are in here are the image border-radius – for rounding the image border – and the image offset for increasing or decreasing the image size relative to the frame.
We decided to set the image border-radius to 40 pixels, to prevent the corners of images from sticking out of the frame. We also made a minor adjustment to the images by adding a single pixel to the right and bottom Image Offsets options.
And with that, our device frame slider was done. Of course, yours can look completely differently – you can even enter a custom frame if you want to. If you want to create something that looks like one of the examples on the widget’s page, however, this is how you could do it.
Let’s Wrap It Up!
When you want to make the images on your website extra attractive and attention-grabbing, using a device frame slider to display them is a great option. Thanks to the Device Frame Slider widget from our Qi Addons for Elementor plugin, you can easily create a slider and customize it with options covering everything from transitions to links and pagination. The best part of it is that you can have the widget up and running in minutes – it comes almost ready to use right out of the box!
