{"id":2805,"date":"2017-06-10T18:27:07","date_gmt":"2017-06-10T17:27:07","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=2805"},"modified":"2021-08-02T13:25:02","modified_gmt":"2021-08-02T13:25:02","slug":"color-section","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/color-section\/","title":{"rendered":"Color Section"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-2bid0g5-105254207def476f0ee4e89dd22c2a60\">\n.flex_column.av-2bid0g5-105254207def476f0ee4e89dd22c2a60{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-2bid0g5-105254207def476f0ee4e89dd22c2a60 av_one_full  avia-builder-el-0  avia-builder-el-no-sibling  first flex_column_div av-zero-column-padding  '     ><p>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-d63ca3002e834bf64e846cb95cea7c30\">\n#top .av-special-heading.av-av_heading-d63ca3002e834bf64e846cb95cea7c30{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-d63ca3002e834bf64e846cb95cea7c30 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-d63ca3002e834bf64e846cb95cea7c30 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-d63ca3002e834bf64e846cb95cea7c30 av-special-heading-h1 blockquote modern-quote  avia-builder-el-1  el_before_av_hr  avia-builder-el-first '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >Color Sections<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div><br \/>\n<div  class='hr av-27zg951-40200cdb8a6d426cfe7e0fd5f8f5eb1b hr-default  avia-builder-el-2  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-266ci51-fe39314ab402278ef2bd9ebc7647d90b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overview<\/h2>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-25oqps5-dab865b6490433e33ee946996636b60e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The Color Section is a full-width element and always takes 100% width of the page container. It can be set to take up different heights. We can add content elements like sliders, text blocks, images, videos etc inside the color section. Multiple color section elements can be added to your page or post and each section can have a unique <strong>background like a solid\u00a0color, image, parallax effect or a video<\/strong>\u00a0and a unique ID to each\u00a0section for development\u00a0purpose.<\/p>\n<p>Check out some <a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/elements\/color-section\/\" target=\"_blank\" rel=\"noopener noreferrer\">examples\u00a0of Color Section<\/a>.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-25oqps5-dab865b6490433e33ee946996636b60e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Note<\/strong>: If the sidebar is enabled on a page with a\u00a0color section element, it is intended to\u00a0push the sidebar to the bottom and take up 100% of the width. Other fullwidth elements like a fullwidth slider, tabs or grid rows cannot be placed inside a\u00a0color section.<\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-1kyd2ol-be15c657961610c495a3e70dc0d12ab2 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><br \/>\n<section  class='av_textblock_section av-266ci51-fe39314ab402278ef2bd9ebc7647d90b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h3>Color section setup<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Now that you know how a Color section works. Let&#8217;s go ahead and add one on to the page or a post and see what we can create with it. It is easy and straightforward to set up and customize the color section to suit your design. Follow along the steps provided below:<\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-2e56w2w-efa2a00044b450e70399709d411e9407 av-minimal-toggle  avia-builder-el-9  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-2eurw5-6a8fd0efdf943efe63b083724ac42678'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-color-section-setup' data-fake-id='#color-section-setup' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='color-section-setup' data-slide-speed=\"200\" data-title=\"Add a Color Section element to your site\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Add a Color Section element to your site\" data-aria_expanded=\"Click to collapse: Add a Color Section element to your site\">Add a Color Section element to your site<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='color-section-setup' aria-labelledby='toggle-color-section-setup' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><ul>\n<li>Open an existing or a new page from your WordPress dashboard.<\/li>\n<li>Click on the \u201c<strong>Advanced Layout Editor<\/strong>\u201d button to view the page builder elements.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10739 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Advanced-Layout-Builder-e1547487700605.png\" alt=\"\" width=\"205\" height=\"66\" \/><\/li>\n<\/ul>\n<ul>\n<li>Click or Drag and drop the \u201c<strong>Color Section<\/strong>\u201d element under the\u00a0<strong>Layout Elements<\/strong>\u00a0tab to add it on to your page or post.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10740\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/color-section.png\" alt=\"\" width=\"600\" height=\"253\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/color-section.png 600w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/color-section-300x127.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/li>\n<\/ul>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-1kyd2ol-be15c657961610c495a3e70dc0d12ab2 hr-default  avia-builder-el-10  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1j71es5-883ba0fe7fa8f833f18ca499497a4288 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Code Snippets<\/h2>\n<\/div><\/section><br \/>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-12  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><br \/>\n<div  class='hr av-1gvfal1-8756584cb42375f041b4550a51b3e6d4 hr-default  avia-builder-el-13  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1ewikfp-53ba14011af8961444ef121763355c6b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode <\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1ctyo2d-108f724297f648f59bf8ad0d62c87f8e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Color Section shortcode and parameters. The parameter values can be updated and the shortcode can be used on a new page to reproduce the elements.<\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-2e56w2w-c908182be93897c42e8ef12bf7fae5d5 av-minimal-toggle  avia-builder-el-16  el_after_av_textblock  el_before_av_hr  shortcode toggle_close_all' >\n<section class='av_toggle_section av-q0gxoo-ad2d2896c1335125fac6ca12cf741fb3'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"Shortcode\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Shortcode\" data-aria_expanded=\"Click to collapse: Shortcode\">Shortcode<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" >\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-1gvfal1-8756584cb42375f041b4550a51b3e6d4 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-yds8tx-42f4cc4c0bcd7afcad488a94a9c18d92 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Width<\/h2>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-yds8tx-42f4cc4c0bcd7afcad488a94a9c18d92 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><p>We already know that a Color section will always take 100% width of the page container. There are few hacks using which we can manipulate the\u00a0default behaviour of the color section.<\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-1kyd2ol-5ae37d0416fad2007588606d4f1eead5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3 id=\"color-section-with-100-content-width\">Color section with 100% content width<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>A color section is intended to be a full-width element and occupy the entire width of the page layout. However, the <strong>content area<\/strong> inside the color section will only stretch as wide as the <strong>Container width <\/strong>set in the theme options <strong>Enfold\u00a0> Layout > Dimension\u00a0>\u00a0Maximum Container width\u00a0<\/strong><\/p>\n<p>The screenshot below\u00a0demonstrates the default width of the text area inside a\u00a0color\u00a0section.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7156 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-default-content-width-e1532767798861.png\" alt=\"\" width=\"1896\" height=\"459\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-default-content-width-e1532767798861.png 1896w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-default-content-width-e1532767798861-300x73.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-default-content-width-e1532767798861-768x186.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-default-content-width-e1532767798861-1030x249.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-default-content-width-e1532767798861-1500x363.png 1500w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-default-content-width-e1532767798861-705x171.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-default-content-width-e1532767798861-600x145.png 600w\" sizes=\"auto, (max-width: 1896px) 100vw, 1896px\" \/><\/p>\n<p>To increase or decrease the content width inside a color section. Assign a unique\u00a0<strong>Section ID<\/strong> to the color section element. example: \u201c<strong>section-container-width<\/strong>\u201d and change the width value in the below code and add it to your site to achieve similar results as seen in the below screenshot.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7157 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-full-width-content-e1532767746797.png\" alt=\"\" width=\"1902\" height=\"427\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-full-width-content-e1532767746797.png 1902w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-full-width-content-e1532767746797-300x67.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-full-width-content-e1532767746797-768x172.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-full-width-content-e1532767746797-1030x231.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-full-width-content-e1532767746797-1500x337.png 1500w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-full-width-content-e1532767746797-705x158.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-with-full-width-content-e1532767746797-600x135.png 600w\" sizes=\"auto, (max-width: 1902px) 100vw, 1902px\" \/><\/p>\n<p>Note: Changing the container width in the theme options will affect the entire site. If you are looking for a way to make changes to a specific selection please use the below CSS code:<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-b41dmw-3d491fe525bc31ab52c8a6406bba286c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-2e56w2w-efa2a00044b450e70399709d411e9407 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-nsmpgo-37d7c87966baf4eab536bc480dea4598'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-2' data-fake-id='#toggle-id-2' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-2' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-2' aria-labelledby='toggle-toggle-id-2' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code> \n\n\/* Color section container width *\/\n#section-container-width .container {\n  width: 100% !important;\n  min-width: 100%;\n  padding: 0;\n  margin: 0;\n}\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-1kyd2ol-5ae37d0416fad2007588606d4f1eead5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1ewikfp-48e3134bf6e111b4cd0276205a209bef '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Specific Color Section width<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1ctyo2d-a06c5894338fede24752505de698eb54 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>By now you must know that the color section is a fullwidth element and always takes up the entire width of the page container. Depending on your design you may want to make the color section take up less than 100% width of the page layout. To reduce the width of the color section. First, add a unique ID called &#8220;<strong>section-width<\/strong>&#8221; to the color section and use the below CSS.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-b41dmw-3d491fe525bc31ab52c8a6406bba286c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-2e56w2w-efa2a00044b450e70399709d411e9407 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-u7p1c8-1851ae2ce67610089730dae0078e7162'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-3' data-fake-id='#toggle-id-3' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-3' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-3' aria-labelledby='toggle-toggle-id-3' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code> \n\n\/* Specific color section width *\/\n\n#section-width {\n    max-width: 80%;\n    left: 50%;\n    position: relative;\n    transform: translateX(-50%);\n}\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-1kyd2ol-5ae37d0416fad2007588606d4f1eead5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-266ci51-fe39314ab402278ef2bd9ebc7647d90b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Height<\/h2>\n<\/div><\/section><br \/>\n<div  class='hr av-1kyd2ol-5ae37d0416fad2007588606d4f1eead5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Section Minimum Height<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The <strong>Section Minimum Height<\/strong>\u00a0option allows you to control the height of the color section. Choosing\u00a0\u201c<strong>No minimum height<\/strong>\u201d will stretch the color section to fit its content height. The color section height can be set to a different percentage of the browser window height or a custom height in the pixel can be set.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10758\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Section-height.png\" alt=\"\" width=\"863\" height=\"196\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Section-height.png 863w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Section-height-300x68.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Section-height-768x174.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Section-height-705x160.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Section-height-600x136.png 600w\" sizes=\"auto, (max-width: 863px) 100vw, 863px\" \/><\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-1kyd2ol-5ae37d0416fad2007588606d4f1eead5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Specific Color Section height<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Section height can be changed to a custom height value in <b>%<\/b>\u00a0or <strong>px<\/strong>. To assign a custom height in <strong>%<\/strong> or <strong>px<\/strong> select the desired option from the dropdown list and assign the height value.<\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-266ci51-fe39314ab402278ef2bd9ebc7647d90b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Padding<\/h2>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Color section padding<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Section Padding<\/strong>: You can set the section padding from the options panel.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10768\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-padding.png\" alt=\"\" width=\"901\" height=\"86\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-padding.png 901w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-padding-300x29.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-padding-768x73.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-padding-705x67.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-padding-600x57.png 600w\" sizes=\"auto, (max-width: 901px) 100vw, 901px\" \/><\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Custom padding<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Custom Padding<\/strong>: To set a custom padding value, First, open the color section options panel and select &#8220;<strong>No Padding<\/strong>&#8220;. Then assign a unique\u00a0<strong>Section ID<\/strong> to the color section element in the options panel where it says &#8220;<strong>For Developers: Section ID&#8221;.\u00a0<\/strong><\/p>\n<p>Example: Add a unique ID called \u201c<strong>section-container-padding<\/strong>\u201d to the color section and use the below code:<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-b41dmw-3d491fe525bc31ab52c8a6406bba286c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-2e56w2w-efa2a00044b450e70399709d411e9407 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-t4vkp4-c19bf32f13c446d6c7f2ade149d8ad25'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-4' data-fake-id='#toggle-id-4' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-4' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-4' aria-labelledby='toggle-toggle-id-4' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code> \n\/*------------------------*\/\n\/*  Section Padding        *\/\n\/*------------------------*\/\n\n#section-container-padding .container {\n    \/* Define custom padding value *\/\n    padding:150px 100px !important;\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-266ci51-fe39314ab402278ef2bd9ebc7647d90b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Border<\/h2>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Diagonal Border<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><section class=\"av_textblock_section \">\n<div class=\"avia_textblock \">\n<p>The diagonal border is applied to the bottom of each color section and it does not overlap the section next to it.\u00a0 To make it look like it is overlapping the next section we use the same background color\u00a0for both the diagonal border and the section next to it.<\/p>\n<p>Diagonal Border can be set from the Color Section > Options > Section Bottom Border Styling. There should be at least two or more color section elements on the page for the diagonal border to work. Please note the diagonal border cannot be applied to a\u00a0color section which is last in order and aligns with the footer.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7158\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/diagonal-border.png\" sizes=\"auto, (max-width: 1310px) 100vw, 1310px\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/diagonal-border.png 1310w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/diagonal-border-300x63.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/diagonal-border-768x161.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/diagonal-border-1030x216.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/diagonal-border-705x148.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/diagonal-border-450x94.png 450w\" alt=\"\" width=\"1310\" height=\"275\" \/><\/p>\n<p>The effect below can be reproduced by adding a\u00a0diagonal border with the same color as the background color of the next section. The first color section has\u00a0a light blue diagonal border to match the light blue background color of the second\u00a0color section.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7160\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-diagonal-border.png\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-diagonal-border.png 900w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-diagonal-border-300x194.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-diagonal-border-768x497.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-diagonal-border-705x457.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-diagonal-border-450x292.png 450w\" alt=\"\" width=\"900\" height=\"583\" \/><\/p>\n<\/div>\n<\/section>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-266ci51-fe39314ab402278ef2bd9ebc7647d90b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h3>How to add a diagonal border to a color section above the footer?<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-266ci51-fe39314ab402278ef2bd9ebc7647d90b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><p>By default, the diagonal border cannot be applied to the section which is last in order or above the footer. In some cases depending on your design requirement if you need a section with a diagonal border above the footer area as seen below we\u00a0do have a simple workaround for you.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12339\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/diagonal-border-footer.png\" alt=\"\" width=\"886\" height=\"554\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/diagonal-border-footer.png 886w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/diagonal-border-footer-300x188.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/diagonal-border-footer-768x480.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/diagonal-border-footer-705x441.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/diagonal-border-footer-600x375.png 600w\" sizes=\"auto, (max-width: 886px) 100vw, 886px\" \/><\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-266ci51-fe39314ab402278ef2bd9ebc7647d90b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><p>The workaround is to add an empty section at the bottom with a transparent background and move it up by adding a negative margin to give an illusion that the section above the footer has a diagonal border.<\/p>\n<ul>\n<li>Add an empty color section at the bottom.<\/li>\n<li>Give it a custom height of 100px and select &#8220;No padding&#8221; from the padding option.<\/li>\n<li>Select the custom top and bottom margin option and add &#8220;-150px&#8221; to the top margin.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12341\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-margin.png\" alt=\"\" width=\"930\" height=\"197\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-margin.png 930w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-margin-300x64.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-margin-768x163.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-margin-705x149.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-margin-600x127.png 600w\" sizes=\"auto, (max-width: 930px) 100vw, 930px\" \/><\/li>\n<li>\u00a0From the background, options add a transparent background color.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12340\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/transparent-bg.png\" alt=\"\" width=\"475\" height=\"439\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/transparent-bg.png 475w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/transparent-bg-300x277.png 300w\" sizes=\"auto, (max-width: 475px) 100vw, 475px\" \/><\/li>\n<\/ul>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-266ci51-fe39314ab402278ef2bd9ebc7647d90b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h3>How to change the angle of the diagonal border?<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-266ci51-fe39314ab402278ef2bd9ebc7647d90b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><p>The diagonal border angle can be changed by adding a custom CSS code to your site. Please feel free to change the value of\u00a0rotate(x) in the below code to suit your design.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-b41dmw-3d491fe525bc31ab52c8a6406bba286c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-2e56w2w-efa2a00044b450e70399709d411e9407 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-a1ff9-e1d312e1e563a1257facd8578185de30'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-5' data-fake-id='#toggle-id-5' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-5' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-5' aria-labelledby='toggle-toggle-id-5' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code> \n\/*------------------------\n Diagonal border angle\n--------------------------*\/\n\n.avia_transform .av-extra-border-element.border-extra-diagonal .av-extra-border-inner {\n    -webkit-transform: rotate(5deg);\n    transform: rotate(5deg);\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-266ci51-5de10cdf446aea11e53ae7d1bd8cefc0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h3 id=\"adding-custom-svg-dividers\">Adding custom SVG dividers<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-266ci51-5de10cdf446aea11e53ae7d1bd8cefc0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><pre><code>\/**\n * Add your custom svg shapes:\n *\t- Use default directory:\n *\t\t- create subdirectory in your WP uploads folder:   ...\/uploads\/avia_custom_shapes\n *\t\t- add your files there\n *\t- Use a different folder, that can be accessed from php\n *\t\t- create folder\n *\t\t- add your files there\n *\t\t- use filter 'avf_custom_svg_shapes_files_directory' to register path\n *\t\t- alternative you can use 'path' when you register the svg file\n *      - Upload svg file (and a possible negative file) with WP Media Uploader\n *              - use 'attachment' to add ID of svg file\n *              - use 'attachment_negative' to add ID of negative svg file\n *              - using 'attachment' filename and path are ignored\n *\t- Register your svg files with filter 'avf_custom_svg_shapes' - make sure to use unique keys that do not conflict with native keys\n * \n * @param array $custom_shapes\n * @return array\n *\/\nfunction custom_avf_custom_svg_shapes( array $custom_shapes )\n{\n\t$custom_shapes = array(\n\t\t\t\t\n\t\t'kurve-konvex'\t=&gt; array(\n\t\t\t\t\t\t'key'\t\t\t=&gt; 'kurve-konvex',\n\t\t\t\t\t\t'title'\t\t\t=&gt; __( 'Convex curves', 'avia_framework' ),\n\/\/\t\t\t\t\t\t'has_flip'\t\t=&gt; true,\n\t\t\t\t\t\t'has_width'\t\t=&gt; true,\n\t\t\t\t\t\t'filename'\t\t=&gt; 'kurve-konvex'\n\t\t\t\t\t\t\t\t\t),\n\t\t'waves-in-motion'\t=&gt; array(\n\t\t\t\t\t\t'key'\t\t\t=&gt; 'waves-in-motion',\n\t\t\t\t\t\t'title'\t\t\t=&gt; __( 'Waves in motion', 'avia_framework' ),\n\/\/\t\t\t\t\t\t'has_flip'\t\t=&gt; true,\n\t\t\t\t\t\t'has_width'\t\t=&gt; true,\n\t\t\t\t\t\t'filename'\t\t=&gt; 'waves-in-motion'\n\t\t\t\t\t\t\t\t\t)\n\t\t\n\t\t\t\t\t\t);\n\t\n\treturn $custom_shapes;\n}\n\nadd_filter( 'avf_custom_svg_shapes', 'custom_avf_custom_svg_shapes', 10, 1 );\n<\/code><\/pre>\n<p><strong>Please note<\/strong>, available in Enfold 4.8.4 and newer versions.<\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-266ci51-fe39314ab402278ef2bd9ebc7647d90b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Background<\/h2>\n<\/div><\/section><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Background Color<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Each section can have a different<strong> Background color. <\/strong><\/p>\n<p>To add a background color to any Color section, click on the color section element and open the Color Section options panel > Section Background > Custom Background Color.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10797\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-color.png\" alt=\"\" width=\"946\" height=\"394\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-color.png 946w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-color-300x125.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-color-768x320.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-color-705x294.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-color-600x250.png 600w\" sizes=\"auto, (max-width: 946px) 100vw, 946px\" \/><\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Background Image<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>One of the most asked questions about the background image on our support forum is <strong>A part of my color section background image is not visible, what&#8217;s the correct image size to upload?<\/strong><\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Unlike the early day&#8217;s of the computer age, today we have display devices of\u00a0all possible screen size starting from a smartwatch to big screen LCD television on which a user can browse the internet.\u00a0 In order to accommodate the different screen size\u00a0the browser will stretch or scale the background image accordingly. When an image is stretched to fill the container some parts of the images especially the sides are hidden.<\/p>\n<p>It is inevitable that a part of the background image will be hidden so the best practice to follow while adding a background image is to keep the focus area of the image at the center and treat the edge of the image as a buffer area.<\/p>\n<p>Once you have the image ready you can set the <strong>Background Image Position <\/strong>to be &#8220;Top Center&#8221; or &#8220;Center Center&#8221;. This way no matter what on any screen your focus area will be visible and the buffer area on the edges may or may not be visible.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Background Image\u00a0<\/strong>can be set for each color section from\u00a0Color Section options > Section Background > Custom Background Image.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/bg-image.png\" sizes=\"auto, (max-width: 583px) 100vw, 583px\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/bg-image.png 583w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/bg-image-300x64.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/bg-image-450x96.png 450w\" alt=\"\" width=\"583\" height=\"125\" \/><\/p>\n<p>The background image can be further adjusted by selecting the\u00a0<strong>Background Position\u00a0<\/strong>and\u00a0<strong>Background Repeat\u00a0<\/strong>options<strong>.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11988\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-bg-image.png\" alt=\"\" width=\"1198\" height=\"225\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-bg-image.png 1198w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-bg-image-300x56.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-bg-image-768x144.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-bg-image-1030x193.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-bg-image-705x132.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-bg-image-600x113.png 600w\" sizes=\"auto, (max-width: 1198px) 100vw, 1198px\" \/><\/p>\n<p>To add a gif or any custom background image to a color section element, First, give the section a unique ID called &#8220;<strong>#section-bg-image<\/strong>&#8221; and add the below code to your site and update the image path.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-b41dmw-3d491fe525bc31ab52c8a6406bba286c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-2e56w2w-efa2a00044b450e70399709d411e9407 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-j6p760-7b3348b52e6e8398e7de77238640b5b3'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-6' data-fake-id='#toggle-id-6' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-6' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-6' aria-labelledby='toggle-toggle-id-6' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code> \n\/*------------------------\n  Section background image   \n--------------------------*\/\n\n#top #section-bg-image {\n    background: url(http:\/\/domain.com\/image.gif) repeat;    \n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Hide background image in mobile<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>If your website design requires you to hide the section background image on a mobile device. Start by assigning a unique developer ID to the color section and add\u00a0the below CSS code to your site.<\/p>\n<p>Example of\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-hide-color-section-background-image-in-mobile\/\" target=\"_blank\" rel=\"noopener\">color section with no background image on mobile<\/a>.<\/p>\n<p>In the below example we assign a unique ID \u201c<strong>section-mobile-bg<\/strong>\u201d to the color section and the below CSS.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-b41dmw-3d491fe525bc31ab52c8a6406bba286c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-2e56w2w-efa2a00044b450e70399709d411e9407 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-tb2he0-93e94a7a3e92bf0697d177e21b666085'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-7' data-fake-id='#toggle-id-7' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-7' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-7' aria-labelledby='toggle-toggle-id-7' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code> \n\/* Section background on mobile *\/\n\n@media only screen and (max-width: 767px) {\n    #top #section-mobile-bg {        \n        background: none !important; \n    }\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Different background image in mobile<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To change the color section background image or the image position on mobile device assign a unique developer ID &#8220;<strong>section-mobile-bg<\/strong>&#8221; to the color section and add\u00a0the\u00a0CSS code to your site. Please feel free to adjust the background position value to move the background image \ud83d\ude42<\/p>\n<p>Example of\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-color-section-with-different-background-on-mobile\/\" target=\"_blank\" rel=\"noopener\" data-wplink-url-error=\"true\">color section with a different background in mobile<\/a>.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-b41dmw-3d491fe525bc31ab52c8a6406bba286c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-2e56w2w-efa2a00044b450e70399709d411e9407 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-1b5lhfs-0d90af465bab54e54a7ce91c42824a19'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-8' data-fake-id='#toggle-id-8' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-8' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-8' aria-labelledby='toggle-toggle-id-8' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code> \/* Section mobile bg image*\/\n@media only screen and (max-width: 767px) {\n#top #section-mobile-bg {\n   background-image: url(https:\/\/your-site.com\/image.jpg)!important;\n   background-position: 0% 50%!important;\n}\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Background image position<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The background image position can be set in the color section options panel.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10803\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-bg-position.png\" alt=\"\" width=\"851\" height=\"80\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-bg-position.png 851w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-bg-position-300x28.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-bg-position-768x72.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-bg-position-845x80.png 845w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-bg-position-705x66.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/section-bg-position-600x56.png 600w\" sizes=\"auto, (max-width: 851px) 100vw, 851px\" \/><\/p>\n<p>To adjust the background image position on desktop and mobile, add the below code to your site and change the X and Y axis value in pixel or percentage to position the background image to suit your design.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-b41dmw-3d491fe525bc31ab52c8a6406bba286c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-2e56w2w-efa2a00044b450e70399709d411e9407 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-q01xk8-7d68f5f547a246bf71263078b988190d'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-9' data-fake-id='#toggle-id-9' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-9' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-9' aria-labelledby='toggle-toggle-id-9' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\/* Section mobile bg image*\/\n\n\/* Desktop *\/\n#top #section-mobile-bg {  \n   background-position: 50% 100%!important;\n}\n\n\/* Mobile *\/\n@media only screen and (max-width: 767px) {\n#top #section-mobile-bg {  \n   background-position: 0% 0%!important;\n}}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Background Video<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Background Video\u00a0<\/strong>for each color section can be applied from Color Section > Section Background > Background Video. You can upload your own self-hosted video or from streaming sites like YouTube or Vimeo.\u00a0By default videos don\u2019t autoplay on some mobile devices to prevent bandwidth problems for users. It is recommended to substitute the video with a still image on mobile devices.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7153\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/bg-video-e1523727583196.png\" sizes=\"auto, (max-width: 926px) 100vw, 926px\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/bg-video-e1523727583196.png 926w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/bg-video-e1523727583196-300x51.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/bg-video-e1523727583196-768x130.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/bg-video-e1523727583196-705x120.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/bg-video-e1523727583196-450x76.png 450w\" alt=\"\" width=\"926\" height=\"157\" \/><\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Parallax Effect<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To set up a parallax background effect, First, insert a background image to enable the\u00a0<strong>Background Attachment\u00a0<\/strong>options and select\u00a0<strong>Parallax.\u00a0<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10805\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/parallax.png\" alt=\"\" width=\"852\" height=\"426\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/parallax.png 852w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/parallax-300x150.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/parallax-768x384.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/parallax-705x353.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/parallax-600x300.png 600w\" sizes=\"auto, (max-width: 852px) 100vw, 852px\" \/><\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-266ci51-fe39314ab402278ef2bd9ebc7647d90b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overlay<\/h2>\n<\/div><\/section><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Section Overlay<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>A color section overlay can be added from the color section options panel > Section Background Overlay. An overlay can be a solid color or an image with an opacity option. If you like to add gradients or any other custom overlay style, first,\u00a0give your section a unique ID &#8220;<strong>custom-overlay<\/strong>&#8221; and use the below CSS.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-b41dmw-3d491fe525bc31ab52c8a6406bba286c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-2e56w2w-efa2a00044b450e70399709d411e9407 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-q5vzag-0d6614b565fade674b9eb0c19dfa9707'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-10' data-fake-id='#toggle-id-10' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-10' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-10' aria-labelledby='toggle-toggle-id-10' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\n\/*------------------------\n  Section overlay   \n--------------------------*\/\n\n#top #custom-overlay .av-section-color-overlay  {\n    background: linear-gradient(135deg,rgba(213,134,243,.8),rgba(0,255,221,.9))!important;\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<section  class='av_textblock_section av-b41dmw-9c1c1abe4a20a60cc01f0c9964aaf3c9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-color-section-overlay\/#toggle-id-1-closed\" target=\"_blank\" rel=\"noopener\">Example of a custom overlay<\/a><strong>.<\/strong><\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overlay image position<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>By default, the overlay background image repeats itself to cover the entire section. However, the default behaviour of the background image can be controlled using custom CSS.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-b41dmw-3d491fe525bc31ab52c8a6406bba286c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-2e56w2w-efa2a00044b450e70399709d411e9407 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-2jwj3p-5c99312cb5e86228c9e912db78fe4769'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-11' data-fake-id='#toggle-id-11' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-11' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-11' aria-labelledby='toggle-toggle-id-11' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\n\/*------------------------\n  Overlay Image  \n--------------------------*\/\n\n#top .av-section-color-overlay {\n\topacity: 1 !important;\n\tbackground-position: 50% 50%;\n\tbackground-repeat: no-repeat !important;\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-266ci51-fe39314ab402278ef2bd9ebc7647d90b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Scroll down arrow<\/h2>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1oj0f2t-e2ab381d3e6d1f80a1b6a78e8b1ea756 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The scroll down arrow color can be changed from the color section options panel. However, if you need to add custom style, please use the below CSS code.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-b41dmw-3d491fe525bc31ab52c8a6406bba286c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-2e56w2w-efa2a00044b450e70399709d411e9407 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-337tyt-94ae8886ccbd9b4c8efa6ea78a85df5e'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-12' data-fake-id='#toggle-id-12' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-12' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-12' aria-labelledby='toggle-toggle-id-12' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\n\/*------------------------\n  Scroll down arrow  \n--------------------------*\/\n#top .scroll-down-link {\nbackground: red;\ncolor: blue;\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-266ci51-fe39314ab402278ef2bd9ebc7647d90b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Content Alignment<\/h2>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-b41dmw-9c1c1abe4a20a60cc01f0c9964aaf3c9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The content inside a color section is by default aligned vertically center. In some cases, if you like the content to appear at the top or\u00a0bottom of the color section please use the code below in the Quick CSS or child theme styles.<\/p>\n<p>Example of\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-color-section-align-content\/\" target=\"_blank\" rel=\"noopener\" data-wplink-url-error=\"true\">color section content aligned to the top<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7154\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-content.png\" sizes=\"auto, (max-width: 1617px) 100vw, 1617px\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-content.png 1617w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-content-300x113.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-content-768x289.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-content-1030x387.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-content-1500x564.png 1500w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-content-705x265.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/06\/color-section-content-450x169.png 450w\" alt=\"\" width=\"1617\" height=\"608\" \/><\/p>\n<p>To align the content at the top position of the color section, give your color section a custom ID \u201csection-content-top\u201d:<\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-2e56w2w-efa2a00044b450e70399709d411e9407 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-1bkpw7c-657e7d21c9eaac3349dd97bc75f010ae'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-13' data-fake-id='#toggle-id-13' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-13' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-13' aria-labelledby='toggle-toggle-id-13' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\n\/*------------------------\n  Content alignment\n--------------------------*\/\n\n#section-content-top .container .content {\n  vertical-align: top;\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<section  class='av_textblock_section av-4ccpc5-a0c5eab2199cd2024d52d2fe5640b607 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To align the content at the bottom of the color section, give your color section a custom ID \u201csection-content-bottom\u201d:<\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-2e56w2w-efa2a00044b450e70399709d411e9407 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-sti71k-c4266f5531154444c12cb5100ea7eefd'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-14' data-fake-id='#toggle-id-14' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-14' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-14' aria-labelledby='toggle-toggle-id-14' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\n\/*------------------------\n  Content alignment\n--------------------------*\/\n\n#section-content-bottom .container .content {\n  vertical-align: bottom;\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-1kyd2ol-3438a8dd62b371f7f34546165d692214 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-266ci51-fe39314ab402278ef2bd9ebc7647d90b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Resources<\/h2>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-4ccpc5-eb6a8b66d9aa714ae326de48ab9f32c5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Examples of some websites which have taken the usage of the color section to the next level:<\/p>\n<p><a href=\"http:\/\/kognit.com.br\" target=\"_blank\" rel=\"noopener noreferrer\">Kognit<\/a><br \/>\n<a href=\"http:\/\/goliathgauntlet.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Goliath Gauntlet<\/a><\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-3717yd-a6dfc0842bb57dce9eabf7ba2f1d1f7b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<br \/>\n<a href=\"https:\/\/www.youtube.com\/watch?v=Qpmb5yLTwo0\" rel=\"noopener noreferrer\" target=\"_blank\">Color section tutorial<\/a><\/p>\n<\/div><\/section><\/p><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,5],"tags":[],"class_list":["post-2805","post","type-post","status-publish","format-standard","hentry","category-documentation","category-layout-elements","documentation","layout-elements"],"modified_by":"guenter","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/2805","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=2805"}],"version-history":[{"count":29,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/2805\/revisions"}],"predecessor-version":[{"id":13168,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/2805\/revisions\/13168"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=2805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=2805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=2805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}