{"id":11938,"date":"2018-11-05T22:23:19","date_gmt":"2018-11-05T22:23:19","guid":{"rendered":"https:\/\/kriesi.at\/documentation\/enfold\/?p=11938"},"modified":"2018-11-07T02:25:58","modified_gmt":"2018-11-07T02:25:58","slug":"fullwidth-button","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/fullwidth-button\/","title":{"rendered":"Fullwidth Button"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-27f2485c0da6eb4c829c236375bddcb9\">\n#top .av-special-heading.av-av_heading-27f2485c0da6eb4c829c236375bddcb9{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-27f2485c0da6eb4c829c236375bddcb9 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-27f2485c0da6eb4c829c236375bddcb9 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-27f2485c0da6eb4c829c236375bddcb9 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\"  >Fullwidth Button<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-7gqfezu-03aa2491fcbf5ae86f407c1df9e9f4a7 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-qqgdei-8802cb28846ce72dae5148a9ca07dcc2 '   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-77yg13u-132f9b4f52296f7709c6a36361a27c82 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>As the name say&#8217;s the Fullwidth Button element takes up the entire width of the parent container. It functions same as the button element with an extra option to add the custom text description. The fullwidth button element can be customized from the button options available when you\u00a0double-click the button element in the advanced layout builder. Below is an example of the fullwidth button element.<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-27cbii-ccf5df44c2a68f69ec84ead09dd1f731\">\n.flex_column.av-27cbii-ccf5df44c2a68f69ec84ead09dd1f731{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-27cbii-ccf5df44c2a68f69ec84ead09dd1f731 av_one_full  avia-builder-el-4  el_after_av_textblock  el_before_av_hr  first flex_column_div av-zero-column-padding  column-top-margin'     ><div  class='avia-button-wrap avia-button-center  avia-builder-el-5  avia-builder-el-no-sibling '>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-n4yt1m-eeb3e3d99f599f2e7e37c20592127be0\">\n#top #wrap_all .avia-button.av-n4yt1m-eeb3e3d99f599f2e7e37c20592127be0{\ncolor:#ffffff;\ntransition:all 0.4s ease-in-out;\n}\n#top #wrap_all .avia-button.av-n4yt1m-eeb3e3d99f599f2e7e37c20592127be0:hover{\nbackground-color:black;\ncolor:#ffffff;\ntransition:all 0.4s ease-in-out;\n}\n#top #wrap_all .avia-button.av-n4yt1m-eeb3e3d99f599f2e7e37c20592127be0 .avia-svg-icon svg:first-child{\nfill:#ffffff;\nstroke:#ffffff;\n}\n#top #wrap_all .avia-button.av-n4yt1m-eeb3e3d99f599f2e7e37c20592127be0:hover .avia-svg-icon svg:first-child{\nfill:#ffffff;\nstroke:#ffffff;\n}\n<\/style>\n<a href='javascript:;' class='avia-color-green avia-button avia-button-fullwidth av-n4yt1m-eeb3e3d99f599f2e7e37c20592127be0 avia-icon_select-no avia-color-green'   aria-label=\"Hi I\u2019m a full width button :) \"><span class='avia_iconbox_title' >Hi I\u2019m a full width button \ud83d\ude42 <\/span><\/a><\/div><\/div>\n<div  class='hr av-6duneca-693cb82bff10e1d1e8c34f51f4c561f9 hr-default  avia-builder-el-6  el_after_av_one_full  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5ya4uve-6a3952ce60d98332c8d22dfbb3490924 '   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-8  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-5unu54q-aa7b8ce29e03d0cce25c28051a3cfa31 hr-default  avia-builder-el-9  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-5t1l3ay-7f1b41d6b390011131bd499e32d47263 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-5r90ugq-6b3490c841c7f4fe96d44a2a546891a2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>A button can be added anywhere on the site where you can type text using the button shortcode. Example: The below shortcode can be used to add buttons to your slider caption.<\/p>\n<\/div><\/section>\n\n<div  class='hr av-5mqy862-d2f9a2d2db7de656c51ad5ee8954c18e hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-jasqoq-139946c47359376d9831b9abb049dcf2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-58xjmtm-20f9c8fb9b445c36b3eac29671a4c547 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Enable custom CSS class name support from\u00a0<strong>Enfold theme options &gt; Layout Builder <\/strong>and add a custom class name called &#8220;<strong>my-custom-fullwidth-button<\/strong>&#8221; to the fullwidth button element.<\/p>\n<\/div><\/section>\n<div  class='hr av-5adsf5m-27ba23c212c670b6abcee1feffc434ad hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58xjmtm-20f9c8fb9b445c36b3eac29671a4c547 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Button fonts<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-58xjmtm-20f9c8fb9b445c36b3eac29671a4c547 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Button title<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-b236af71f41efb3f4c72eb569244c796 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-2x2u2q2-1565b50ba73fd31ba765f9108c5f543a'  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=\"Font style ( size, color, family )\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font style ( size, color, family )\" data-aria_expanded=\"Click to collapse: Font style ( size, color, family )\">Font style ( size, color, family )<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\" ><p><strong>Font size<\/strong>: Font size for the button element can be changed using the below CSS.<\/p>\n<p><strong>Font color<\/strong>: To change the button font color, double-click\u00a0the button element and open the button options and switch to the <strong>Color tab &gt; Custom color<\/strong><\/p>\n<p><strong>Font family<\/strong>: The buttons inherit the default body font family set in the theme options general styling.<\/p>\n<p>Using CSS we can change all of the default styles.<\/p>\n<pre><code>\r\n\r\n\/* Title *\/\r\n\r\n.my-custom-fullwidth-button a.avia-button .avia_iconbox_title {\r\n     font-size:30px;\r\n     color: gold;\r\n     font-family: 'Cookie', Helvetica, sans-serif;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2jypc0a-436626a281407fa2298de96f10de59ee'  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=\"Responsive button labels\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Responsive button labels\" data-aria_expanded=\"Click to collapse: Responsive button labels\">Responsive button labels<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\" ><p>If you wish to change the font size of the button elements on the mobile device please use the below CSS<\/p>\n<pre><code>\r\n\r\n\/* Font size on desktop *\/\r\n\r\n#top .my-custom-fullwidth-button a.avia-button .avia_iconbox_title {\r\n     font-size:40px;\r\n}\r\n\r\n\/* Font size on mobile *\/\r\n@media only screen and (max-width: 767px) {\r\n\t#top .my-custom-fullwidth-button a.avia-button .avia_iconbox_title {\r\n    \tfont-size:14px;\r\n    }\t\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-w0w10i-566d643b8abde369b56e74841a43bb59'  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=\"On hover\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: On hover\" data-aria_expanded=\"Click to collapse: On hover\">On hover<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\" ><p>The below CSS can be used to change the font style on hover.<\/p>\n<pre><code>\r\n\r\n\/* Button font style on hover *\/\r\n\r\n.my-custom-fullwidth-button:hover a.avia-button .avia_iconbox_title {\r\n     color: gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-5adsf5m-2492e5e91a0fd18e9d7c2729ef6d53e2\">\n#top .hr.hr-invisible.av-5adsf5m-2492e5e91a0fd18e9d7c2729ef6d53e2{\nheight:50px;\n}\n<\/style>\n<div  class='hr av-5adsf5m-2492e5e91a0fd18e9d7c2729ef6d53e2 hr-invisible'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58xjmtm-20f9c8fb9b445c36b3eac29671a4c547 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Button description<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-b236af71f41efb3f4c72eb569244c796 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-1kz6tre-2d1f2683b32f5252191523b4ffac2f25'  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=\"Font style ( size, color, family )\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font style ( size, color, family )\" data-aria_expanded=\"Click to collapse: Font style ( size, color, family )\">Font style ( size, color, family )<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\" ><p>Font size,\u00a0color\u00a0and family for the description font can be changed using CSS we can change all of the default styles.<\/p>\n<pre><code>\r\n\r\n\/* Description *\/\r\n\r\n.my-custom-fullwidth-button a.avia-button .av-button-description p {\r\n     font-size:13px;\r\n     color: gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-197a71m-4832f3d19e3d12143f26278f09aa4264'  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=\"Responsive button labels\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Responsive button labels\" data-aria_expanded=\"Click to collapse: Responsive button labels\">Responsive button labels<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\" ><p>If you wish to change the font size on the mobile device please use the below CSS<\/p>\n<pre><code>\r\n\r\n\/* Font size on desktop *\/\r\n\r\n.my-custom-fullwidth-button a.avia-button .av-button-description p {\r\n     font-size:30px;\r\n}\r\n\r\n\r\n\/* Font size on mobile *\/\r\n@media only screen and (max-width: 767px) {\r\n\t#top .my-custom-fullwidth-button a.avia-button .av-button-description p {\r\n     font-size:14px;\r\n\t}\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-r10ydm-292bfd5d6948847cca859bb1e74859a9'  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=\"On hover\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: On hover\" data-aria_expanded=\"Click to collapse: On hover\">On hover<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\" ><p>The below CSS can be used to change the font style on hover.<\/p>\n<pre><code>\r\n\r\n\/* Font style on hover *\/\r\n\r\n.my-custom-fullwidth-button a.avia-button:hover .av-button-description p {\r\n     font-size:30px;\r\n}\r\n\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-5adsf5m-27ba23c212c670b6abcee1feffc434ad hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58xjmtm-20f9c8fb9b445c36b3eac29671a4c547 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Button Border<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-b236af71f41efb3f4c72eb569244c796 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-ox21l6-17b667dd095fd64f1d52d318679c599d'  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=\"Border (color \/ width \/ style)\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Border (color \/ width \/ style)\" data-aria_expanded=\"Click to collapse: Border (color \/ width \/ style)\">Border (color \/ width \/ style)<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\" ><p>Add a custom border style to the full-width button element<\/p>\n<pre><code>\r\n\/* Fullwidth button border *\/\r\n#top .my-custom-fullwidth-button .avia-button-fullwidth {\r\n   border: 12px solid red;\r\n}\r\n\r\n.my-custom-fullwidth-button .avia-button-fullwidth .avia_button_background,\r\n.my-custom-fullwidth-button .avia-button-fullwidth:hover .avia_button_background {\r\n\tborder: none !important;\r\n\tborder-radius: 0;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-ulxaui-df4a364410b722bc0e884619ef176de4'  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=\"On hover\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: On hover\" data-aria_expanded=\"Click to collapse: On hover\">On hover<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\" ><p>Change the border style on hover<\/p>\n<pre><code>\r\n\r\n\/* Bordder on hover *\/\r\n\r\n#top .my-custom-fullwidth-button .avia-button-fullwidth:hover {\r\n   border: 12px solid gold;\r\n}\r\n\r\n.my-custom-fullwidth-button .avia-button-fullwidth .avia_button_background,\r\n.my-custom-fullwidth-button .avia-button-fullwidth:hover .avia_button_background {\r\n\tborder: none !important;\r\n\tborder-radius: 0;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-5adsf5m-27ba23c212c670b6abcee1feffc434ad hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58xjmtm-20f9c8fb9b445c36b3eac29671a4c547 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Button Icon<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-b236af71f41efb3f4c72eb569244c796 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-1yuai6i-7b25b816362493ccd08c73fa88054d63'  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=\"Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Color\" data-aria_expanded=\"Click to collapse: Color\">Color<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\" ><p>Button icon color is inherited from the button font color. The button font color can be set in the button options &gt; color tab &gt; custom color. To change the icon color separately please use the below CSS<\/p>\n<pre><code>\r\n\r\n\/* Button Icon color *\/\r\n\r\n.my-custom-fullwidth-button a.avia-button .avia_button_icon {\r\n\tcolor:gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1gemm5m-4c0e7e2d116bf5a2e1867aacb7e7982d'  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=\"Size\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Size\" data-aria_expanded=\"Click to collapse: Size\">Size<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\" ><p>Button icon size is inherited from the button font size. To change the icon size please sue the below CSS<\/p>\n<pre><code>\r\n\r\n\/* Button icon size *\/\r\n\r\n\r\n.my-custom-fullwidth-button a.avia-button .avia_button_icon {\r\n\tfont-size: 40px!important; \/* Button icon size *\/\r\n\tline-height: 40px; \/* Vertical align icon*\/\r\n\tcolor:gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-z7m8i2-6694a65bfd6d131fb1e23e3984090543'  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=\"Alignment\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Alignment\" data-aria_expanded=\"Click to collapse: Alignment\">Alignment<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\" ><p>The icon can be displayed before or after the button text. Double click the button element to open the button options and select the Button Icon to be displayed to the left or right.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-ug7jfu-09b8e59e16a21519a171ab298a77ae5a'  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=\"On hover\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: On hover\" data-aria_expanded=\"Click to collapse: On hover\">On hover<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\" ><p>To change the button icon style on hover please use the below CSS<\/p>\n<pre><code>\r\n\r\n\r\n\/* Button Icon on hover *\/\r\n\r\n.my-custom-fullwidth-button a.avia-button:hover .avia_button_icon {\r\n\tcolor:gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-5adsf5m-27ba23c212c670b6abcee1feffc434ad hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58xjmtm-20f9c8fb9b445c36b3eac29671a4c547 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Button Background<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-b236af71f41efb3f4c72eb569244c796 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-2ij570q-bea0732ae144bfd701a144f73f16c664'  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=\"Solid Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Solid Color\" data-aria_expanded=\"Click to collapse: Solid Color\">Solid Color<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\" ><p>To change the background color, double-click on the button element and open button element options then\u00a0select Colors tab. Here you can choose one of the pre-defined color\u00a0or add a custom\u00a0color from the &#8220;Custom Color&#8221;.<\/p>\n<p>To change the background color using CSS please use the below CSS<\/p>\n<pre><code>\r\n\r\n\/* Button background *\/\r\n\r\n\r\n.my-custom-fullwidth-button .avia-button-fullwidth {\r\n\tbackground: lightblue !important;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-21wm4kq-beac4038d77c5fd0b24822d5016c0811'  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=\"Gradient\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Gradient\" data-aria_expanded=\"Click to collapse: Gradient\">Gradient<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\" ><p>Add gradient button background<\/p>\n<pre><code>\r\n\r\n\/* Gradient button background *\/\r\n\r\n\r\n.my-custom-fullwidth-button .avia-button-fullwidth {\r\n\tbackground: #67B26F;  \/* fallback for old browsers *\/\r\n\tbackground: -webkit-linear-gradient(to right, #4ca2cd, #67B26F);  \/* Chrome 10-25, Safari 5.1-6 *\/\r\n\tbackground: linear-gradient(to right, #4ca2cd, #67B26F); \/* W3C, IE 10+\/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *\/\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-56arm2-752382ae97772b2df51a23d0f79fdd32'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-15' data-fake-id='#toggle-id-15' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-15' data-slide-speed=\"200\" data-title=\"Image\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Image\" data-aria_expanded=\"Click to collapse: Image\">Image<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-15' aria-labelledby='toggle-toggle-id-15' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To set a background image to the button use the below CSS code and edit the image path.<\/p>\n<pre><code>\r\n\r\n\/* Button background *\/\r\n\r\n\r\n.my-custom-fullwidth-button .avia-button-fullwidth {\r\n\tbackground: url('image.jpg');\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1cbiekq-560ba6425019ea009fb5569e7f1b3b3a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-16' data-fake-id='#toggle-id-16' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-16' data-slide-speed=\"200\" data-title=\"Transparency \" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Transparency \" data-aria_expanded=\"Click to collapse: Transparency \">Transparency <span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-16' aria-labelledby='toggle-toggle-id-16' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>You can choose to display the transparent background button with a light or dark border from the button element options &gt; color tab.<\/p>\n<p>To change the opacity of the button background please use the below CSS<\/p>\n<pre><code>\r\n\r\n\/* Button opacity *\/\r\n\r\n.my-custom-fullwidth-button .avia-button-fullwidth {\r\n   background: rgba(13,23,56, .45)\t!important;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-nst53e-729b3ae0c0d1bd4ce86f4fa8992996aa'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-17' data-fake-id='#toggle-id-17' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-17' data-slide-speed=\"200\" data-title=\"On Hover\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: On Hover\" data-aria_expanded=\"Click to collapse: On Hover\">On Hover<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-17' aria-labelledby='toggle-toggle-id-17' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>We can change the background color on mouse hover by using the below code.<\/p>\n<pre><code>\r\n\r\n\/* Background on hover *\/\r\n.my-custom-fullwidth-button .avia-button-fullwidth:hover .avia_button_background {\r\n\tbackground: gold !important;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-5adsf5m-27ba23c212c670b6abcee1feffc434ad hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58xjmtm-20f9c8fb9b445c36b3eac29671a4c547 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Button Shape<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-b236af71f41efb3f4c72eb569244c796 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-4gc9my-1b64afe35e92475eaf4df63c3cd53c6a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-18' data-fake-id='#toggle-id-18' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-18' data-slide-speed=\"200\" data-title=\"Pill\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Pill\" data-aria_expanded=\"Click to collapse: Pill\">Pill<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-18' aria-labelledby='toggle-toggle-id-18' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the shape of the default button to a pill shape, increase the border-radius\u00a0from <strong>Enfold Options &gt; Advanced Styling &gt; Misc &gt; Buttons &gt;Border radius<\/strong><\/p>\n<p>To do it the CSS way and target specific buttons, please add the below code to your site:<\/p>\n<pre><code>\r\n\r\n\/* Pill shape buttons *\/\r\n.my-custom-fullwidth-button .avia-button-fullwidth {\r\n   border-radius: 50px;\r\n}\r\n\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-nq4ove-ac01f989f81a4ca0d8bb9108b8c3cbf3'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-19' data-fake-id='#toggle-id-19' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-19' data-slide-speed=\"200\" data-title=\"Remove round edges or border radius\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Remove round edges or border radius\" data-aria_expanded=\"Click to collapse: Remove round edges or border radius\">Remove round edges or border radius<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-19' aria-labelledby='toggle-toggle-id-19' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To remove the rounded edges of the buttons please add the below CSS to your site.<\/p>\n<pre><code>\r\n\r\n\/* Remove round edges  *\/\r\n\r\n\r\n.my-custom-fullwidth-button .avia-button-fullwidth {\r\n   border-radius: 0px;\r\n}\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-5adsf5m-27ba23c212c670b6abcee1feffc434ad hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58xjmtm-20f9c8fb9b445c36b3eac29671a4c547 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Button size and alignment<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-b236af71f41efb3f4c72eb569244c796 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-17n9b0q-6253d61d547966b31d1ccbcde2ecdf45'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-20' data-fake-id='#toggle-id-20' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-20' data-slide-speed=\"200\" data-title=\"Default Size\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Default Size\" data-aria_expanded=\"Click to collapse: Default Size\">Default Size<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-20' aria-labelledby='toggle-toggle-id-20' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>By default, the fullwidth buttons take the entire width of the parent container it is placed in.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-u25pka-d7550b5fbba7b85e8b59d9045f0549b3'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-21' data-fake-id='#toggle-id-21' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-21' data-slide-speed=\"200\" data-title=\"Custom Width\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Custom Width\" data-aria_expanded=\"Click to collapse: Custom Width\">Custom Width<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-21' aria-labelledby='toggle-toggle-id-21' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The easiest way to control the button width is to place it inside the column whose width suits your design.<\/p>\n<p>If you wish to do the CSS way, please use the below code and do not forget to calculate the button padding which adds to the width of the buttons.<\/p>\n<pre><code>\r\n\r\n\/* Button width *\/\r\n#top .my-custom-fullwidth-button .avia-button-fullwidth .avia_button_background,\r\n.my-custom-fullwidth-button .avia-button-fullwidth {\r\n   max-width:200px;\r\n   left: 50%;\r\n   transform: translate(-50%);\r\n}\r\n\r\n<\/code><\/pre>\n<p>NOTE: If you do not like to center align the custom width button please use the below code instead: User &#8220;float:left;&#8221; or &#8220;float:right;&#8221; to align the custom width button to left or right.<\/p>\n<pre><code>\r\n\r\n\/* Button width *\/\r\n#top .my-custom-fullwidth-button .avia-button-fullwidth .avia_button_background,\r\n.my-custom-fullwidth-button .avia-button-fullwidth {\r\n   max-width:200px;\r\n   float: right;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[],"class_list":["post-11938","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","documentation","content-elements"],"modified_by":"vinay","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/11938","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=11938"}],"version-history":[{"count":5,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/11938\/revisions"}],"predecessor-version":[{"id":11958,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/11938\/revisions\/11958"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=11938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=11938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=11938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}