{"id":1401,"date":"2021-06-17T09:23:49","date_gmt":"2021-06-17T09:23:49","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1401"},"modified":"2023-04-30T08:24:41","modified_gmt":"2023-04-30T08:24:41","slug":"how-to-use-the-slides-widget-in-elementor-pro","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/","title":{"rendered":"How to Use the Slides Widget in Elementor [PRO]"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1401\" class=\"elementor elementor-1401\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-78562f45 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"78562f45\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-75ad9dd3\" data-id=\"75ad9dd3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b833274 elementor-widget elementor-widget-video\" data-id=\"b833274\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=Rg4qgkMK8gM&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-472a6303 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"472a6303\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-255b193b\" data-id=\"255b193b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1bcb5d86 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"1bcb5d86\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-4661\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-4661\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-4662\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-4662\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-4661\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-4661\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-4661\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we\u2019ll explore the Slides widget. This widget allows you to present multiple messages on your site, such as different services or seasonal promotions, using an engaging presentation effect.<\/p><p>This tutorial will cover:<\/p><p>\u2714\ufe0e How to create and style slides<\/p><p>\u2714\ufe0e The different possible styles for using this widget<\/p><p>\u2714\ufe0e Alternative design options for this widget<\/p><p>\u2714\ufe0e And much more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-4662\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-4662\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-4662\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there. It\u2019s Aviva from Elementor.\u00a0<\/p><p>In this tutorial, we\u2019ll explore the Slides widget. This widget allows you to present multiple messages on your site, such as different services or seasonal promotions, using an engaging presentation effect.<\/p><p>In this example, we\u2019ll use the Slides widget to display different products on sale in this Ecommerce landing page.<\/p><p>If you\u2019d like to follow along, you can download this template from the Elementor Landing Pages library.\u00a0<\/p><p>First, let\u2019s delete this widget and start from scratch . As you saw earlier, the slides cover the entire screen. To recreate this style, add a new section with one column in it, and set it to full width.\u00a0<\/p><p>Next, click the widgets icon, and search for the Slides widget..<\/p><p>Drag the widget and place it in the editor.<\/p><p>By default, the Slides widget contains three slides with place-holder text which you\u2019ll find here.\u00a0<\/p><p>Managing slides is simple. You can add new slides, duplicate existing ones, or deletes slides you don\u2019t need.<\/p><p>You can add and edit as many slides as you want, but for a clear and concise message, we recommend keeping it short and sweet.\u00a0<\/p><p>Click a slide to edit its content. There are three tabbed sections: background, content, and style. Let\u2019s start with background.\u00a0<\/p><p>Set the slide background color to a custom or global color, or choose an image, as I\u2019m doing here. When using an image, choose its size from the dropdown; the image can fully cover the slide, be contained within the slide, or set to auto, which displays the image in its original size<\/p><p>Add more impact to your slides, by activating the Ken Burns effect, and choose its zoom direction from the dropdown. You can also add a background overlay and choose between different blending options.\u00a0<\/p><p>Next, click on Content to edit the slide\u2019s title, description, and button details.\u00a0<\/p><p>By default, all slides inherit the style settings you set in the widget\u2019s main style tab, but you can set a custom unique style for a specific slide, by clicking the style sub-tab, and activating the toggle.<\/p><p>I\u2019ll add another slide by duplicating this o ne. The text is a bit hard to read, so I\u2019ll add an overlay on the image to add contrast.\u00a0 Next, I\u2019ll change the content. Great!.<\/p><p>Next, drag the slider to set the slide height, or type in an exact value.\u00a0<\/p><p>This icon indicates that the value, or setting next to it, can be adjusted for different devices, such as tablets, and mobile phones.<\/p><p>Next, expand the Slider Options section to control the slides navigation and transition behavior.\u00a0<\/p><p>Choose the navigation settings that best suit your slides. By default, there are navigation arrows on the sides, and dots at the bottom, but you can remove either or both of them to fit your needs.<\/p><p>By default the slides play automatically. I\u2019ll switch it to NO to keep them from playing throughout this tutorial. And at the end, I\u2019ll switch it back on to demonstrate how it works.<\/p><p>If you do not want the slides to play automatically, switch the toggle to NO.\u00a0 I\u2019ll leave it on YES. There are also toggles to control the transitioning between slides. You can pause the slideshow on user mouse hover as well as\u00a0 interaction.<\/p><p>Set the autoplay speed in milliseconds and set the slides to repeat.\u00a0<\/p><p><br \/>Below, you\u2019ll find more helpful transition options, such as the type of transition, which controls the animation between transitions, speed, and content animation, as shown here.\u00a0<\/p><p><br \/>Okay, now let\u2019s head over to the Style tab, and adjust the design style of the individual elements. As mentioned before, this will affect every slide, unless a custom style has been activated.\u00a0 We\u2019ll start with the Slides options.<\/p><p>First, adjust the content width, and set the Slides padding, to add space between the content and the edge of the slide. Next, set the content horizontal and vertical positions, and change the text alignment to your liking. You can also add a text-shadow, to make your Slide text pop against the background. In this case, the images already contrast well, so it\u2019s not necessary.\u00a0<\/p><p><br \/>Expand the title section, and set the spacing for the title. You can change the color, here. Then set the typography. I\u2019m using a preset global font. For more information about global styles, check out our dedicated tutorial, linked in the description below.<\/p><p>If your slides use descriptions, you can style them here. Since these slides don\u2019t have any descriptions, we continue straight to the button. Set the size, typography, and any other desired styling options.\u00a0<\/p><p>For even more interactivity, you can add a hover style!<\/p><p>Almost done &#8211; Expand the navigation options and adjust the settings, accordingly.\u00a0<\/p><p>We finished styling the Slides, but as you can see, there\u2019s a small gap between the Slides widget and the edge of the screen. Let\u2019s take care of that.<\/p><p>Click the column, go to Advanced, and set the padding to zero.\u00a0<\/p><p>Now I\u2019ll go back and reactivate the autoplay.<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial, we\u2019ll explore the Slides widget. This widget allows you to present multiple messages on your site, such as different services or seasonal promotions, using an engaging presentation effect. This tutorial will cover: \u2714\ufe0e How to create and style slides \u2714\ufe0e The different possible styles for using this widget \u2714\ufe0e [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":9726,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-1401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use the Slides Widget in Elementor [PRO] - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use the Slides Widget in Elementor [PRO] - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we\u2019ll explore the Slides widget. This widget allows you to present multiple messages on your site, such as different services or seasonal promotions, using an engaging presentation effect. This tutorial will cover: \u2714\ufe0e How to create and style slides \u2714\ufe0e The different possible styles for using this widget \u2714\ufe0e [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-17T09:23:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-30T08:24:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Slides-Widget.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use the Slides Widget in Elementor [PRO] - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/","og_locale":"en_US","og_type":"article","og_title":"How to Use the Slides Widget in Elementor [PRO] - Academy","og_description":"Overview Transcript Overview In this tutorial, we\u2019ll explore the Slides widget. This widget allows you to present multiple messages on your site, such as different services or seasonal promotions, using an engaging presentation effect. This tutorial will cover: \u2714\ufe0e How to create and style slides \u2714\ufe0e The different possible styles for using this widget \u2714\ufe0e [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/","og_site_name":"Academy","article_published_time":"2021-06-17T09:23:49+00:00","article_modified_time":"2023-04-30T08:24:41+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Slides-Widget.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use the Slides Widget in Elementor [PRO]","datePublished":"2021-06-17T09:23:49+00:00","dateModified":"2023-04-30T08:24:41+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/"},"wordCount":958,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Slides-Widget.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/","url":"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/","name":"How to Use the Slides Widget in Elementor [PRO] - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Slides-Widget.jpg","datePublished":"2021-06-17T09:23:49+00:00","dateModified":"2023-04-30T08:24:41+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Slides-Widget.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Slides-Widget.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-slides-widget-in-elementor-pro\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Use the Slides Widget in Elementor [PRO]"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1401"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1401\/revisions"}],"predecessor-version":[{"id":9606,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1401\/revisions\/9606"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/9726"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}