{"id":36504,"date":"2022-04-09T15:00:42","date_gmt":"2022-04-09T13:00:42","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=36504"},"modified":"2022-04-18T09:11:51","modified_gmt":"2022-04-18T07:11:51","slug":"how-to-create-device-frame-slider-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-device-frame-slider-in-wordpress\/","title":{"rendered":"How to Create a Device Frame Slider in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]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\u2019s 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If regular image sliders have bored you, or you\u2019re looking to specifically showcase images in the frames of different devices (like mobile phones or laptops), the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/device-frame-slider\/\" target=\"_blank\" rel=\"noopener\">Device Frame Slider<\/a> widget is just the thing for you. Released as part of our <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor plugin<\/a>, the biggest free collection of Elementor addons you\u2019ll find online, it\u2019ll let you add WordPress device frame sliders to your website in no time.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To help you get started with this incredible addon, <strong>we released a video tutorial that takes you through the process of adding a device frame slider to a WordPress site page.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" style=\"border: 1px solid #ebebeb;\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/myBXf973F9w\" width=\"1280\" height=\"728\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019d prefer to read a tutorial instead of watching , you\u2019re just where you need to be. <strong>In this article, we\u2019ll show you how to:<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-a-device-frame-slider-in-wordpress\">Adding a Device Frame Slider in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editing-the-contents-of-the-slider\">Editing the Contents of the Slider<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-the-device-frame-slider\">Styling the Device Frame Slider<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-a-device-frame-slider-in-wordpress\"><\/a>Adding a Device Frame Slider in WordPress<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"508\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider.jpg\" class=\"attachment-full size-full\" alt=\"Device Frame Slider\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-768x403.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-620x325.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To add a WordPress device frame slider using the <a href=\"https:\/\/wordpress.org\/plugins\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> plugin, you\u2019ll need to install both it and the Elementor page builder. If you\u2019re not familiar with Elementor, don\u2019t worry \u2013 <strong>the page builder is very well documented, and you can use our<\/strong> <a href=\"https:\/\/qodeinteractive.com\/magazine\/elementor-tutorial-for-beginners\/\">beginner\u2019s tutorial<\/a> <strong>to get you started quickly<\/strong>. When you\u2019re ready, navigate to <em><strong>Plugins &gt; Add New<\/strong><\/em>, search for the plugins, and install and activate them.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ll use an example from our plugin\u2019s 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\u2019re using our <a href=\"https:\/\/qodeinteractive.com\/qi-theme\/\" target=\"_blank\" rel=\"noopener\">Qi Theme<\/a> for this guide \u2013 <strong>things might look differently on your end, depending on the theme you\u2019re using and its settings<\/strong>. With that in mind, let\u2019s start preparing the page by making the background.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"571\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Background.jpg\" class=\"attachment-full size-full\" alt=\"Device Frame Slider Background\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Background.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Background-300x177.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Background-768x453.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Background-620x365.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]It\u2019s made out of an image and some text.<strong> To add the image, we created a new section and then used the Edit Section option to bring up its options.<\/strong> Under Style we found Background and added the image, set its position to \u201ccenter center,\u201d repeat to \u201cno-repeat,\u201d and size to \u201ccover.\u201d[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"613\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Setting-Background.jpg\" class=\"attachment-full size-full\" alt=\"Device Frame Slider Setting Background\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Setting-Background.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Setting-Background-300x190.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Setting-Background-768x486.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Setting-Background-620x392.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For the next step, <strong>we added the text using the Section Title widget, also available from Qi Addons for Elementor<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To make everything look exactly like in the example, <strong>we also had to dabble in Advanced Options<\/strong>.<strong> Under Positioning<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"583\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Section-Title.jpg\" class=\"attachment-full size-full\" alt=\"Device Frame Slider Section Title\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Section-Title.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Section-Title-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Section-Title-768x462.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Section-Title-620x373.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With the background all set, it\u2019s 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. <strong>To fix that, we accessed the widget\u2019s options, and under Style &gt; Style, we set the device width to 254 pixels.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"612\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Device-Width.jpg\" class=\"attachment-full size-full\" alt=\"Device Frame Slider Device Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Device-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Device-Width-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Device-Width-768x485.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Device-Width-620x392.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you\u2019re happy with how your widget looks against the background, you can move to the next step \u2013 adding and editing the contents.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editing-the-contents-of-the-slider\"><\/a>Editing the Contents of the Slider<\/h2>\n<p>[\/vc_column_text][vc_column_text]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.<strong> We added three images, chose the mobile device frame, and enabled the shadow.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"593\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-General-Options.jpg\" class=\"attachment-full size-full\" alt=\"Device Frame Slider General Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-General-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-General-Options-300x184.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-General-Options-768x470.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-General-Options-620x379.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For starters, <strong>we changed the slide duration to 1,700 milliseconds, to make them last shorter than the default 5,000 milliseconds<\/strong>. We also disabled the slider navigation, as well as the pagination.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"598\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Slider-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Device Frame Slider Slider Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Slider-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Slider-Settings-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Slider-Settings-768x474.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Slider-Settings-620x383.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After finishing with the content options, the next step would be to style the device frame slider.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"styling-the-device-frame-slider\"><\/a>Styling the Device Frame Slider<\/h2>\n<p>[\/vc_column_text][vc_column_text]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\u2019ll be able to set everything from the position and type of navigation and pagination to their color and size.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"666\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Navigation-Style.jpg\" class=\"attachment-full size-full\" alt=\"Device Frame Slider Navigation Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Navigation-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Navigation-Style-300x206.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Navigation-Style-768x528.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Navigation-Style-620x426.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Since we chose not to display navigation and pagination, we can move on to the Style section. <strong>We already visited it when we were creating the background<\/strong> \u2013 it\u2019s where we set the device width to make it more manageable. The other two options that are in here are the image border-radius \u2013 for rounding the image border \u2013 and the image offset for increasing or decreasing the image size relative to the frame.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We decided to set the image border-radius to 40 pixels, to prevent the corners of images from sticking out of the frame.<\/strong> We also made a minor adjustment to the images by adding a single pixel to the right and bottom Image Offsets options.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Style.jpg\" class=\"attachment-full size-full\" alt=\"Device Frame Slider Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Style-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Style-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Device-Frame-Slider-Style-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And with that, our device frame slider was done. <strong>Of course, yours can look completely differently \u2013 you can even enter a custom frame if you want to.<\/strong> If you want to create something that looks like one of the examples on the widget\u2019s page, however, this is how you could do it.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]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 \u2013 it comes almost ready to use right out of the box!<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>On the lookout for device frame sliders for your WordPress website? They are great for showcasing images, and we&#8217;ll show how you can easly create one!<\/p>\n","protected":false},"author":9295,"featured_media":36543,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[108,153,37],"class_list":["post-36504","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-qi-addons","tag-slider","tag-ui"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/36504","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=36504"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/36504\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/36543"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=36504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=36504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=36504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}