{"id":321,"date":"2017-02-19T04:22:56","date_gmt":"2017-02-19T04:22:56","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=321"},"modified":"2019-01-31T07:16:46","modified_gmt":"2019-01-31T07:16:46","slug":"separator-whitespace","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/separator-whitespace\/","title":{"rendered":"Separator \/ Whitespace"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-4fb919fbbe90a8db90a58a9d483a1403\">\n#top .av-special-heading.av-av_heading-4fb919fbbe90a8db90a58a9d483a1403{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-4fb919fbbe90a8db90a58a9d483a1403 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-4fb919fbbe90a8db90a58a9d483a1403 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-4fb919fbbe90a8db90a58a9d483a1403 av-special-heading-h1 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >Separator \/ Whitespace<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-4w44uh-73d20f4c9feab9cc145b6f8373bb3ea2 hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4rcaw1-8be9bc38c9ff5a62e1cd7ed634439349 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overview<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-4k4ajt-79d3c43e18ab21e8cafcd7e4a54de271 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>This element allows you to\u00a0separate content with invisible whitespace, predefined vertical separators or custom ones that you can design for yourself.<\/p>\n<p>Examples of the <a href=\"http:\/\/www.kriesi.at\/themes\/enfold-2017\/elements\/separatorwhitespace\/\" target=\"_blank\" rel=\"noopener\">separator\/whitespace element<\/a>.<\/p>\n<\/div><\/section>\n<div  class='hr av-fssbt-4029c309934140777e0e8c40f034ac89 hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4rcaw1-cee5eaa37ae4ab8d45244e827ddac009 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Usage<\/h2>\n<\/div><\/section>\n<div  class='hr av-fssbt-4029c309934140777e0e8c40f034ac89 hr-default  avia-builder-el-6  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3o2z9d-d56b693a6960e7ce4254135637f2878e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Vertical space between the elements.<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3o2z9d-d56b693a6960e7ce4254135637f2878e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Did you know that the Separator \/ Whitespace element can be used to modify the vertical space between two elements such as sections, paragraphs or headings? Let&#8217;s see how we can do that:<\/p>\n<ul>\n<li>Drag and drop the Separator \/ Whitespace element between the two elements.<\/li>\n<li>Select Whitespace from the dropdown options.<\/li>\n<li>Enter a numerical value in the height field to modify the space.<\/li>\n<\/ul>\n<p>To tighten the space between the elements try a negative number in the height field.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12367\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Whitespace.png\" alt=\"\" width=\"686\" height=\"292\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Whitespace.png 686w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Whitespace-300x128.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Whitespace-600x255.png 600w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-fssbt-4029c309934140777e0e8c40f034ac89 hr-default  avia-builder-el-9  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-48pka9-3a1a6788c1688bf1e6927243a488f96a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Code Snippets<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-11  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-3wjhg9-894d03d3b47359427b69c91d85fe0865 hr-default  avia-builder-el-12  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3o2z9d-4f40b0172965e2c7caf7c7529d188cb2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section>\n\n<div  class='hr av-3a6dnl-32c6cade5efddfdfd1e2fd2b39b2f6b5 hr-default  avia-builder-el-15  avia-builder-el-no-sibling '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-30jwnt-026066efe90ea2903e73d68a61ce7a28 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='hr av-2y45pl-5c896fd00eabf0fac13c1e3133598a4e hr-default  avia-builder-el-16  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-9uavl-f7aea935aca4e982c1d0460176ae9666 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Style Option<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2lwr1d-aa9aba0a66590d238655aafcb8a015cd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Style your own horizontal dividers using element options, which lets you customize.<\/p>\n<ul>\n<li>Position<\/li>\n<li>Border thickness<\/li>\n<li>Width<\/li>\n<li>Border Color<\/li>\n<li>Top and Bottom Margin<\/li>\n<li>Icon<\/li>\n<li>Icon Color<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7297\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/custom-color.png\" alt=\"\" width=\"973\" height=\"785\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/custom-color.png 973w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/custom-color-300x242.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/custom-color-768x620.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/custom-color-495x400.png 495w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/custom-color-705x569.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/custom-color-450x363.png 450w\" sizes=\"auto, (max-width: 973px) 100vw, 973px\" \/><\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-8v4o9-f3516d1b9d0d5a65ea088cbeda69007b hr-default  avia-builder-el-18  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-26qznt-9ac08360528dd09ed74151b5bebd4f90 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Custom Separator Styles<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-qdbl-229fb444a78d88fcb7b0318c67703acf '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Style your own border elements using custom CSS style make it dotted, dashed or use svg image as the source of your border element.<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-1zagzt-fc5dad44867ab30d9fdaceae00e93a85\">\n#top .hr.av-1zagzt-fc5dad44867ab30d9fdaceae00e93a85{\nmargin-top:30px;\nmargin-bottom:30px;\n}\n.hr.av-1zagzt-fc5dad44867ab30d9fdaceae00e93a85 .hr-inner{\nwidth:40%;\nborder-color:#140d08;\nmax-width:45%;\n}\n.hr.av-1zagzt-fc5dad44867ab30d9fdaceae00e93a85 .av-seperator-icon{\ncolor:#ef5d5d;\n}\n.hr.av-1zagzt-fc5dad44867ab30d9fdaceae00e93a85 .av-seperator-icon.avia-svg-icon svg:first-child{\nfill:#ef5d5d;\nstroke:#ef5d5d;\n}\n<\/style>\n<div  class='hr av-1zagzt-fc5dad44867ab30d9fdaceae00e93a85 hr-custom  avia-builder-el-21  el_after_av_textblock  el_before_av_textblock  separator-1 hr-center hr-icon-yes'><span class='hr-inner inner-border-av-border-thin'><span class=\"hr-inner-style\"><\/span><\/span><span class='av-seperator-icon avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue806' data-av_iconfont='entypo-fontello' ><\/span><span class='hr-inner inner-border-av-border-thin'><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1pt6q9-8e56af2514ea724724a34407ed662784 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\r\n\/\/ CSS - Separator Styles\r\n\/\/--------------------------------------*\/\r\n\r\n\/* Dotten line *\/\r\n.hr-inner {\r\n    border: 2px dotted;\r\n}\r\n\r\n\/* Icon size *\/\r\n.av-seperator-icon:before {\r\n\tfont-size: 50px;\r\n}\r\n.hr  {\r\n\tline-height: 50px;\r\n}\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-1lq4qx-7ee1bbee6efe55bfdba8470f5736299e hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1d7w21-9ce0287993c440d3f07546109f5f0fde '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Replace Icon with text in separator<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-169w21-05cf5fe3570c2f825f88cbf644669e9c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Relplace\u00a0icon with custom text using CSS.<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-13cnh5-7853f57722f84acc08998fab3d8c7a32\">\n#top .hr.av-13cnh5-7853f57722f84acc08998fab3d8c7a32{\nmargin-top:30px;\nmargin-bottom:30px;\n}\n.hr.av-13cnh5-7853f57722f84acc08998fab3d8c7a32 .hr-inner{\nwidth:40%;\nborder-color:#140d08;\nmax-width:45%;\n}\n.hr.av-13cnh5-7853f57722f84acc08998fab3d8c7a32 .av-seperator-icon{\ncolor:#ef5d5d;\n}\n.hr.av-13cnh5-7853f57722f84acc08998fab3d8c7a32 .av-seperator-icon.avia-svg-icon svg:first-child{\nfill:#ef5d5d;\nstroke:#ef5d5d;\n}\n<\/style>\n<div  class='hr av-13cnh5-7853f57722f84acc08998fab3d8c7a32 hr-custom  avia-builder-el-24  el_after_av_textblock  el_before_av_textblock  separator-2 hr-center hr-icon-yes'><span class='hr-inner inner-border-av-border-thin'><span class=\"hr-inner-style\"><\/span><\/span><span class='av-seperator-icon avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue806' data-av_iconfont='entypo-fontello' ><\/span><span class='hr-inner inner-border-av-border-thin'><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-xebfd-849e0add3392c0d812866fc08e69dfc6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\r\n\/\/ CSS - Separator Styles\r\n\/\/--------------------------------------*\/\r\n\r\n.av-seperator-icon:before {\r\n\tcontent:\"The end\";\r\n}\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-qfug9-9f9cc3a727c23a3e20fe89f986d62d00 hr-default  avia-builder-el-26  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-jjyu9-70a7aa9c07c4f027cf8801f45a054777 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-1nizt-67ab1eff61a322b152d7f6938db67de7 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-73015-2da704728f04f570c5dc4ea7b1b8c6cc '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=ZOZJkZV5dIA\">Whitespace Element Tutorial <\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[16],"class_list":["post-321","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","tag-content-elements","documentation","content-elements"],"modified_by":"vinay","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=321"}],"version-history":[{"count":3,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/321\/revisions"}],"predecessor-version":[{"id":12366,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/321\/revisions\/12366"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}