{"id":6174,"date":"2021-09-12T11:15:56","date_gmt":"2021-09-12T11:15:56","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=6174"},"modified":"2023-02-22T10:15:30","modified_gmt":"2023-02-22T10:15:30","slug":"how-to-use-the-spacer-widget","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-the-spacer-widget\/","title":{"rendered":"How To Use the Spacer Widget"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6174\" class=\"elementor elementor-6174\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-411342e1 thesinglevideo elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"411342e1\" 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-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1c1f129e\" data-id=\"1c1f129e\" 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-3da07200 elementor-widget elementor-widget-video\" data-id=\"3da07200\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/kPVuSVDW4xw&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-3f300115 thesinglevideoOver elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3f300115\" 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-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-75a8bfb9\" data-id=\"75a8bfb9\" 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-4f02900a elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"4f02900a\" 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-1321\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1321\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1322\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1322\" 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-1321\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1321\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1321\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we will learn how to use the Spacer widget to create unique designs, and explore different ways to customize it.<\/p><p>The tutorial will cover:<br \/>\u2714\ufe0e Adding a spacer widget into your design<br \/>\u2714\ufe0e Adding a parallax scrolling effect<br \/>\u2714\ufe0e Customizing the spacer widget using the Advanced Tab<br \/>\u2714\ufe0e Creating shapes with the spacer widget<br \/>\u2714\ufe0e And much more!<\/p><p>See Also:<br \/><a href=\"https:\/\/elementor.com\/academy\/how-to-use-elementor-landing-page-builder\/\" target=\"_blank\" rel=\"noopener\">Landing Page Builder<\/a><br \/><a href=\"https:\/\/elementor.com\/academy\/how-to-create-custom-shapes-without-using-code\/\" target=\"_blank\" rel=\"noopener\">Create Custom Shapes<\/a><\/p><p>\u00a0<\/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-1322\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1322\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1322\" tabindex=\"0\" hidden=\"hidden\"><p>Hi all, it\u2019s Ziv from Elementor.<br \/>Today I\u2019ll show you how to use the spacer widget. Which on the surface is a simple widget, with one clear use case: creating space between elements.\u00a0<\/p><p>But if you dig a little deeper, you\u2019ll see that it can be used to create unique designs .. just like this parallax scrolling effect, or bring your pages to life with shapes! Like these colorful animated bars, or circular backgrounds that grow when scrolling down the page.\u00a0<span>Spacer widgets also help make your designs more responsive.<\/span><\/p><p>So let\u2019s dive in and see how this \u201d simple widget \u201c helps you achieve all of this good stuff!<\/p><p>I\u2019ll use this Medical Practice landing page first..as an example.. Which you can find in the\u00a0<a href=\"https:\/\/elementor.com\/academy\/how-to-use-elementor-landing-page-builder\/\" target=\"_blank\" rel=\"noopener\">Elementor Landing Pages Library<\/a>. Follow the link I left in the description.. to learn more about it.<\/p><p>Okay.. let\u2019s start off with the obvious.. Using the spacer widget to create space between elements. From the widget panel, drag and drop the spacer between the elements you want to create some space.\u00a0<br \/>The blue line indicates where it will be positioned when you let go.<\/p><p>Then, use the slider to set the amount you want. You can also type a specific value..<\/p><p>And choose which unit to use pixels, viewport height or EM.\u00a0<\/p><p>As you can see, the spacer widget creates blank vertical space by default. It does it\u2019s job, but if you want to customize it further, go to the Advanced tab, and get ready for some creative fun!<\/p><p>Let\u2019s start off in the background dropdown, where you can choose to either set a classic or gradient background.\u00a0Use it way you can create cool gradient elements without the need<\/p><p>For classic, you can give it a color, or choose to set a background image. Then play around with the settings to get the style you\u2019re looking for.<\/p><p>I\u2019ll go ahead and set the size to cover.. so the image takes up all of the space. To give a parallax effect, simply set the attachment to fixed. As you can see, scrolling up and down exposes different parts of the image. Cool!<\/p><p>You can even set your background to change on hover, enabling you to build creative interactions with just a few clicks.<\/p><p>Let\u2019s move on to Border. You can select a border type, set the border width, and give it some rounded corners by playing with the border-radius.<\/p><p>In the Mask dropdown, you can create cool visuals with some of the default shapes,\u00a0<span>or.. upload your own ones and make your designs even more unique.\u00a0<\/span><\/p><p><span>Let\u2019s check out this next template to see how the spacer widget can be turned into creative elements that liven up your page!<\/span><\/p><p>As you can see, this spacer already has a yellow background color.\u00a0Let\u2019s go to the Positioning dropdown, and see how we can use its settings creatively!<\/p><p>For starters, you can give the spacer widget a specific width by setting it to Custom. Then adjust it accordingly.\u00a0<\/p><p>You can also control its position on the page by either setting it to absolute or fixed. Then simply drag it, or use the horizontal and vertical offset sliders.. To place the spacer widget exactly where you want.\u00a0<\/p><p>And as a cherry on top, you can apply some motion effects on elements like these, to make your pages even more engaging.\u00a0<br \/>If you are new to\u00a0<a href=\"https:\/\/elementor.com\/academy\/how-to-create-custom-shapes-without-using-code\/\" target=\"_blank\" rel=\"noopener\">custom positioning and motion effects<\/a>,\u00a0follow the links in the description to learn more about it.\u00a0<\/p><p>Well That\u2019s it! Now you know how to use the spacer widget to create space between elements, and also to use it more creatively and build unique designs with just a few clicks. We are looking forward to seeing what you come up with!<\/p><p><span>So feel free to share your creations in the comments below, and as always, don\u2019t forget to subscribe to our YouTube channel for more tips and tutorials.<\/span><\/p><p>Ciao for now!<\/p><p>\u00a0<\/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 will learn how to use the Spacer widget to create unique designs, and explore different ways to customize it. The tutorial will cover: \u2714\ufe0e Adding a spacer widget into your design \u2714\ufe0e Adding a parallax scrolling effect \u2714\ufe0e Customizing the spacer widget using the Advanced Tab \u2714\ufe0e Creating [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":6173,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41,48],"class_list":["post-6174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials","tag-widgets"],"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 Spacer Widget - 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-spacer-widget\/\" \/>\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 Spacer Widget - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we will learn how to use the Spacer widget to create unique designs, and explore different ways to customize it. The tutorial will cover: \u2714\ufe0e Adding a spacer widget into your design \u2714\ufe0e Adding a parallax scrolling effect \u2714\ufe0e Customizing the spacer widget using the Advanced Tab \u2714\ufe0e Creating [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-the-spacer-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-12T11:15:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T10:15:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/08\/Spacer-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=\"Aviva Darab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aviva Darab\" \/>\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 Spacer Widget - 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-spacer-widget\/","og_locale":"en_US","og_type":"article","og_title":"How To Use the Spacer Widget - Academy","og_description":"Overview Transcript Overview In this tutorial, we will learn how to use the Spacer widget to create unique designs, and explore different ways to customize it. The tutorial will cover: \u2714\ufe0e Adding a spacer widget into your design \u2714\ufe0e Adding a parallax scrolling effect \u2714\ufe0e Customizing the spacer widget using the Advanced Tab \u2714\ufe0e Creating [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-the-spacer-widget\/","og_site_name":"Academy","article_published_time":"2021-09-12T11:15:56+00:00","article_modified_time":"2023-02-22T10:15:30+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/08\/Spacer-Widget.jpg","type":"image\/jpeg"}],"author":"Aviva Darab","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Aviva Darab","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-spacer-widget\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-spacer-widget\/"},"author":{"name":"Aviva Darab","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/6ce87fcf655168e5ac55e43148a99449"},"headline":"How To Use the Spacer Widget","datePublished":"2021-09-12T11:15:56+00:00","dateModified":"2023-02-22T10:15:30+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-spacer-widget\/"},"wordCount":765,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-spacer-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/08\/Spacer-Widget.jpg","keywords":["Guides and Tutorials","Widgets"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-spacer-widget\/","url":"https:\/\/elementor.com\/academy\/how-to-use-the-spacer-widget\/","name":"How To Use the Spacer Widget - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-spacer-widget\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-spacer-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/08\/Spacer-Widget.jpg","datePublished":"2021-09-12T11:15:56+00:00","dateModified":"2023-02-22T10:15:30+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-spacer-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-the-spacer-widget\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-spacer-widget\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/08\/Spacer-Widget.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/08\/Spacer-Widget.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-spacer-widget\/#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 Spacer Widget"}]},{"@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\/6ce87fcf655168e5ac55e43148a99449","name":"Aviva Darab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5456d642d6417c9b72a48f8fbec624cc1336f934ce83732b6fa2358ab0c31bfe?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5456d642d6417c9b72a48f8fbec624cc1336f934ce83732b6fa2358ab0c31bfe?s=96&d=mm&r=g","caption":"Aviva Darab"},"description":"Aviva is a Designer and Educator at Elementor. She\u2019s experienced in web and graphic design and enjoys sharing her knowledge with others. She stays fueled with coffee, dark chocolate, and Pinterest.","url":"https:\/\/elementor.com\/academy\/author\/user-5e36e0380be94\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/6174","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\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=6174"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/6174\/revisions"}],"predecessor-version":[{"id":9343,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/6174\/revisions\/9343"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/6173"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=6174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=6174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=6174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}