{"id":322,"date":"2017-02-19T04:22:42","date_gmt":"2017-02-19T04:22:42","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=322"},"modified":"2017-02-19T04:22:42","modified_gmt":"2017-02-19T04:22:42","slug":"promo-box","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/promo-box\/","title":{"rendered":"Promo Box"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4s2zje-2151a8efaff7483cf4917cf40f896480\">\n.flex_column.av-4s2zje-2151a8efaff7483cf4917cf40f896480{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-4s2zje-2151a8efaff7483cf4917cf40f896480 av_one_full first flex_column_div av-zero-column-padding  '     ><p>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4hpegq-ce3b07f9c64f4cc92a7a3d467e604fde\">\n#top .av-special-heading.av-4hpegq-ce3b07f9c64f4cc92a7a3d467e604fde{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-4hpegq-ce3b07f9c64f4cc92a7a3d467e604fde .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-4hpegq-ce3b07f9c64f4cc92a7a3d467e604fde .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-4hpegq-ce3b07f9c64f4cc92a7a3d467e604fde 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\"  >Promo Box<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div><br \/>\n<div  class='hr av-4f5bne-ab0710e72ae4dfa82975ae7a9ce9c10c 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><br \/>\n<section  class='av_textblock_section av-f14yi-58dcd023676c0e422f8746b39e894fd1 '   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-432bxe-dbc0687e993ee59393a5cd2213885d24 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The Promo Box Shortcode allows you to add a special notification with call to action button to draw the visitors\u00a0attention. It is a convenience\u00a0element for something that by now can also be achieved in a more flexible way with column and button shortcode \ud83d\ude09<\/p>\n<\/div><\/section><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-3ykrki-8d8b0b8c7bf5b183afbd1820cc55e25e\">\n.av_promobox.av-3ykrki-8d8b0b8c7bf5b183afbd1820cc55e25e{\ncolor:#ffffff;\nbackground:#76daff;\n}\n<\/style>\n<div  class='av_promobox av-3ykrki-8d8b0b8c7bf5b183afbd1820cc55e25e avia-button-yes  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><div class='avia-promocontent'><p>\nWelcome Stranger! This is an example Text for your fantastic Promo Box! Feel Free to delete it and replace it with your own fancy Message!<\/p>\n<\/div><div  class='avia-button-wrap av-3ykrki-5ea39278753d6283b3dda5b3913572ca-wrap avia-button-right '>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-3ykrki-5ea39278753d6283b3dda5b3913572ca\">\n#top #wrap_all .avia-button.av-3ykrki-5ea39278753d6283b3dda5b3913572ca{\nbackground-color:#d2ea32;\nborder-color:#d2ea32;\ncolor:#333333;\ntransition:all 0.4s ease-in-out;\n}\n#top #wrap_all .avia-button.av-3ykrki-5ea39278753d6283b3dda5b3913572ca .avia-svg-icon svg:first-child{\nfill:#333333;\nstroke:#333333;\n}\n<\/style>\n<a href=''  class='avia-button av-3ykrki-5ea39278753d6283b3dda5b3913572ca av-link-btn avia-icon_select-no avia-size-large avia-position-right'   aria-label=\"Click me\"><span class='avia_iconbox_title' >Click me<\/span><\/a><\/div><\/div><br \/>\n<section  class='av_textblock_section av-dndai-9614825c107908d3405189c1d0011d14 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Examples of <a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/elements\/promo-box\/\" target=\"_blank\" rel=\"noopener\">Promo Box<\/a>.<\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-3lulqq-1c1aa2a05fa078a0603bbe031c2cd906 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-3f58p6-a42393d5ccbb4eefe3c69f294ca02b91 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Promo Box Settings<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-398n5e-5df8cd19d8c41b5133fc047541ac613c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><ul>\n<li>Promo Box Button<\/li>\n<li>Button Label<\/li>\n<li>Button Link<\/li>\n<li>Button Color<\/li>\n<li>Button Size<\/li>\n<li>Button Icon<\/li>\n<li>Custom Font Color<\/li>\n<li>Custom Background Color<\/li>\n<li>Custom Border Color<\/li>\n<\/ul>\n<\/div><\/section><br \/>\n<div  class='hr av-3491ve-2643588502347fac73c5e16868bd0847 hr-default  avia-builder-el-9  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-2vfn6a-08896fc812910e8a269832d1a6213bdf '   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-11  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div><br \/>\n<div  class='hr av-2kn2qy-82bc10fddd84b996b683b82279c7e7f1 hr-default  avia-builder-el-12  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-2eoize-fdbbf7821ab689be6218a536b7eacaa5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section><br \/>\n<br \/>\n<div  class='hr av-1w27t6-b1db568d6c2df054dda792355447071d hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1p1dyi-9a3c5e2757164d05b68a646681786bd5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section><br \/>\n<div  class='hr av-1jijs2-11ceb51be14a4ebd55e30e2a6819ad5d hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1f98hm-d835db4ae24af0e5f83bd483b0eacb6c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Custom Style<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-178tru-6c5208326111ec6140664d90643758e6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Promo box element will allow you to add custom colors to the background, button and fonts. In case you wish to add a background image or custom style your promo box please use the CSS below.<\/p>\n<\/div><\/section><br \/>\n<div  class='av_promobox av-13cs3u-698875ee9e73a9a0e04944cd71595b1e avia-button-yes  avia-builder-el-15  avia-builder-el-no-sibling  pbox-custom'><div class='avia-promocontent'><p>\nWelcome Stranger! This is an example Text for your fantastic Promo Box! Feel Free to delete it and replace it with your own fancy Message!<\/p>\n<\/div><div  class='avia-button-wrap av-13cs3u-ce998d512ef474d8a2e8b0993728fd88-wrap avia-button-right  pbox-custom'><a href=''  class='avia-button av-13cs3u-ce998d512ef474d8a2e8b0993728fd88 av-link-btn avia-icon_select-no avia-size-large avia-position-right avia-color-theme-color'   aria-label=\"Click me\"><span class='avia_iconbox_title' >Click me<\/span><\/a><\/div><\/div><br \/>\n<section  class='av_textblock_section av-z1k56-46c5cbf14cdeb63e16add00f0f89a65d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre> \/*----------------------------------------\n\/\/ CSS - Promo box custom style\n\/\/--------------------------------------*\/\n\n\/* Promo box*\/\n#top .av_promobox {\nbackground: #fbb034;\n}\n\n\/* Promo content *\/\n#top .av_promobox .avia-promocontent {\n\tcolor:#222;\n}\n\n\/* Promo box button *\/\n#top .av_promobox .avia-button {\n\tbackground: #34bf49;\n\tborder:none;\n}\n\n\/* Button title *\/\n#top .av_promobox .avia-button .avia_iconbox_title {\n\tcolor:#fefefe;\n}<\/pre>\n<\/div><\/section><br \/>\n<div  class='hr av-rp8pm-a14c8a11fefbcd913652d3482ea8b7eb hr-default  avia-builder-el-16  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-msitu-0d0983b74147c4e7c64aac3ae10022af '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section><br \/>\n<div  class='hr av-fwhte-a50121bdc53f97f20b690f5836492244 hr-default  avia-builder-el-18  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-6tvbu-2ffdf5bff8c98730e30c285fe05dd6ff '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=sNTCCpU3d1g\">Promo Box Tutorial <\/a><\/p>\n<\/div><\/section><\/p><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[16],"class_list":["post-322","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","tag-content-elements","documentation","content-elements"],"modified_by":"vinay","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/322","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=322"}],"version-history":[{"count":1,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/322\/revisions"}],"predecessor-version":[{"id":8271,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/322\/revisions\/8271"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}