{"id":2001,"date":"2021-06-21T06:25:24","date_gmt":"2021-06-21T06:25:24","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2001"},"modified":"2023-04-24T13:26:27","modified_gmt":"2023-04-24T13:26:27","slug":"how-to-use-elementors-divider-widget","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-elementors-divider-widget\/","title":{"rendered":"How to Use Elementor\u2019s Divider Widget"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2001\" class=\"elementor elementor-2001\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-26f307bb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"26f307bb\" 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-49aa1506\" data-id=\"49aa1506\" 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-2abf478e elementor-widget elementor-widget-video\" data-id=\"2abf478e\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=uJTHCI1YPEo&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-e239676 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e239676\" 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-59ac40d3\" data-id=\"59ac40d3\" 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-204e3ff5 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"204e3ff5\" 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-5411\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-5411\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-5412\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-5412\" 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-5411\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-5411\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-5411\" tabindex=\"0\" hidden=\"false\"><p>Dividers are one of the most basic and useful design elements in web design. So we went ahead and made them even better! with newly added elements and shapes.<\/p><p>In this tutorial you&#8217;ll learn how to:<br \/>\u2714\ufe0e Choose an SVG divider and control its style<br \/>\u2714\ufe0e Add an icon or text before, in the middle, or after your divider<br \/>\u2714\ufe0e And 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-5412\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-5412\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-5412\" tabindex=\"0\" hidden=\"hidden\"><p>hey there Cassie from Elementor here in<br \/>this video you&#8217;ll learn how to use the<br \/>extended options of the divider widget<br \/>exploring design options<br \/>you&#8217;re gonna love so let&#8217;s dive in we<br \/>already created a premade design for a<br \/>sushi restaurant including a title texts<br \/>and video in the background let&#8217;s<br \/>upgrade the design in this section so<br \/>just drag in the divider widget go to<br \/>style and under color choose white to<br \/>make it visible there we go now we can<br \/>see it let&#8217;s go back to content in style<br \/>choose the line style you like I&#8217;ll go<br \/>over the various types of lines and<br \/>choose the one that best suits my site<br \/>hard to choose huh so many options I&#8217;ll<br \/>go for the curved one the one that looks<br \/>like waves it&#8217;s just right for my sushi<br \/>restaurant in width I can set the width<br \/>of the divider by percent or pixels I&#8217;ll<br \/>stick to percentage and set the line to<br \/>we have the option to add text or an<br \/>icon click the icon and open the icon<br \/>library and search for one that is<br \/>fitting how about a fish this one&#8217;s cute<br \/>I&#8217;ll choose it and hit insert excellent<br \/>let&#8217;s move on to the style tab here we<br \/>can control the design of the divider<br \/>and the icon in the divider settings<br \/>wait you can set the thickness of the<br \/>divider here I&#8217;ll set it to 1<br \/>set the size of the line style set this<br \/>one to 15 and here set the amount let&#8217;s<br \/>say 25 in gap you can set the space<br \/>between the dividers and the elements<br \/>above and below five looks good here on<br \/>two icon settings here you have all<br \/>sorts of options like choosing either<br \/>the default a stacked or framed icon set<br \/>the size over here and padding<br \/>the primary color<br \/>and the secondary color<br \/>I&#8217;ll just reset the icon back to default<br \/>you can place the icon on the left or<br \/>right I&#8217;ll keep it in the center over<br \/>here we can control the spacing and even<br \/>rotate<br \/>so we added a divider with a fish icon<br \/>here in the second section we&#8217;ll add a<br \/>divider with text to keep the design<br \/>uniform I&#8217;ll copy the divider from here<br \/>in our hero section and paste it so<br \/>right click the heading handle<br \/>paste and drag it over the heading in<br \/>style let&#8217;s paint it black to make it<br \/>visible so do it for the divider and for<br \/>the icon as well back in content align<br \/>it to the left click the text icon here<br \/>will change our element to text and in<br \/>the field type in your text cool in<br \/>style text you can also edit the<br \/>typography however you like<br \/>and in position place the text to the<br \/>left<br \/>stunning try integrating the advanced<br \/>design settings of dividers into your<br \/>site today for more fun videos subscribe<br \/>to our YouTube channel catch you later<\/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 Dividers are one of the most basic and useful design elements in web design. So we went ahead and made them even better! with newly added elements and shapes. In this tutorial you\u2019ll learn how to: \u2714\ufe0e Choose an SVG divider and control its style \u2714\ufe0e Add an icon or text before, [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":9720,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-2001","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 Elementor\u2019s Divider 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-elementors-divider-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 Elementor\u2019s Divider Widget - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Dividers are one of the most basic and useful design elements in web design. So we went ahead and made them even better! with newly added elements and shapes. In this tutorial you\u2019ll learn how to: \u2714\ufe0e Choose an SVG divider and control its style \u2714\ufe0e Add an icon or text before, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-elementors-divider-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-21T06:25:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-24T13:26:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Divider-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=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Elementor\u2019s Divider 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-elementors-divider-widget\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Elementor\u2019s Divider Widget - Academy","og_description":"Overview Transcript Overview Dividers are one of the most basic and useful design elements in web design. So we went ahead and made them even better! with newly added elements and shapes. In this tutorial you\u2019ll learn how to: \u2714\ufe0e Choose an SVG divider and control its style \u2714\ufe0e Add an icon or text before, [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-elementors-divider-widget\/","og_site_name":"Academy","article_published_time":"2021-06-21T06:25:24+00:00","article_modified_time":"2023-04-24T13:26:27+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Divider-Widget.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-divider-widget\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-divider-widget\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use Elementor\u2019s Divider Widget","datePublished":"2021-06-21T06:25:24+00:00","dateModified":"2023-04-24T13:26:27+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-divider-widget\/"},"wordCount":591,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-divider-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Divider-Widget.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-divider-widget\/","url":"https:\/\/elementor.com\/academy\/how-to-use-elementors-divider-widget\/","name":"How to Use Elementor\u2019s Divider Widget - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-divider-widget\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-divider-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Divider-Widget.jpg","datePublished":"2021-06-21T06:25:24+00:00","dateModified":"2023-04-24T13:26:27+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-divider-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-elementors-divider-widget\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-divider-widget\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Divider-Widget.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Divider-Widget.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-divider-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 Elementor\u2019s Divider 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\/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\/2001","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=2001"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2001\/revisions"}],"predecessor-version":[{"id":9535,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2001\/revisions\/9535"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/9720"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}