{"id":248188,"date":"2020-01-08T20:42:47","date_gmt":"2020-01-09T04:42:47","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=248188"},"modified":"2020-01-14T20:38:07","modified_gmt":"2020-01-15T04:38:07","slug":"coupons-page-beaver-builder","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/coupons-page-beaver-builder\/","title":{"rendered":"How to Create a Coupons Section Using Beaver Builder?"},"content":{"rendered":"<p>Are you planning on adding a coupon section on your website? Do you want to list coupons of various products on your website built with Beaver Builder? You are on the right page. In this article, we will see how you can create a coupon section or a page on your website using Beaver Builder.<\/p>\n<p>Creating a coupon section on your website with Beaver Builder is made super easy with the help Coupon module of PowerPack addon. This module allows you to create a coupon or a grid of coupons on your website easily without touching a single line of code.<\/p>\n<h2>Features of the Coupon Module:<\/h2>\n<h3>Coupon Styles<\/h3>\n<p>With the coupon module, you get three different coupon display styles that you can choose from the dropdown easily.<\/p>\n<ul>\n<li>Click to Copy<\/li>\n<li>Click to Reveal &amp; Copy<\/li>\n<li>No Code Needed<\/li>\n<\/ul>\n<h3>Coupons Customization<\/h3>\n<p>You can customize each section of the coupon module individually and can make them look exactly like you want. There are various customization options in the style tab that allows you to customize the design of the coupon as you wish.<\/p>\n<h3>Content Options<\/h3>\n<p>You are not restricted in terms of content as well. You can choose an image, enter the details you want, and can change the styling of the button as well. Further, you can make your button look like a link, button, or text.<\/p>\n<p>Let&#8217;s see how you can create Coupons section on your website.<\/p>\n<p><strong>Tools we will needs:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/wpbeaveraddons.com\/go\/beaverbuilder\/\">Beaver Builder Plugin<\/a><\/li>\n<li><a href=\"https:\/\/wpbeaveraddons.com\/pricing\/\">PowerPack addon for Beaver Builder<\/a><\/li>\n<\/ul>\n<p>Make sure both the plugins are installed &amp; activated on your website.<\/p>\n<h2>Creating a Coupons Section with Beaver Builder<\/h2>\n<p>Now let&#8217;s see the step by step guide on how you can create a Coupons section.<\/p>\n<p>If you would prefer watching a video, you can check it here:<\/p>\n<p><iframe title=\"Coupon module for Beaver Builder | PowerPack addon for Beaver Builder\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/L74NNQaeeiI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h3>Step 1: Creating a New Page<\/h3>\n<p>Just like any other page, we will be creating a new page for our coupons section. If you wish to add the coupons section on an existing page, you can do that too. Simply open the page you want in Beaver builder.<\/p>\n<p>For a new page, go to your WP admin Dashboard &gt; Pages and click on &#8216;Add New&#8217;. Now give your page a proper title and launch the Beaver builder.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-248366 size-full\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/b.png\" alt=\"coupons beaver builder\" width=\"1085\" height=\"673\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/b.png 1085w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/b-300x186.png 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/b-768x476.png 768w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/b-1024x635.png 1024w\" sizes=\"(max-width: 1085px) 100vw, 1085px\" \/><\/p>\n<h3>Step 2: Creating Grid for Coupons<\/h3>\n<p>Here in this tutorial, we will be creating the display of 3X2 coupons, and for this, we need to add a 3 column layout on our page. Click on the plus &#8220;+&#8221; icon at the top and select rows and add the three columns row on the page.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-248367\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/c-2.jpg\" alt=\"\" width=\"1907\" height=\"943\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/c-2.jpg 1907w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/c-2-300x148.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/c-2-768x380.jpg 768w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/c-2-1024x506.jpg 1024w\" sizes=\"(max-width: 1907px) 100vw, 1907px\" \/><\/p>\n<h3>Step 3: Adding the Module on the Page<\/h3>\n<p>Now we have three column displays on the page; we will be adding the coupons module in the first column. We will customize the coupon in terms of styling and then duplicate it and drag it to other columns. This way, we won&#8217;t have to change the styling for each module individually.<\/p>\n<p>Simply go to modules and drag and drop the coupon module in the first column.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-248368\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/d-1.jpg\" alt=\"coupon widget beaver builder\" width=\"1907\" height=\"882\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/d-1.jpg 1907w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/d-1-300x139.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/d-1-768x355.jpg 768w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/d-1-1024x474.jpg 1024w\" sizes=\"(max-width: 1907px) 100vw, 1907px\" \/><\/p>\n<h3>Step 4: Changing the Styling first<\/h3>\n<p>We will start by changing the styling of the module first. This way, we will copy the module after making the changes, and then the only task that will be left will be changing the content.<\/p>\n<p>For styling, you get loads of options in the Coupon module. You can customize every aspect of your coupon module, like the discount banner, text, image, etc.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-248381\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/f-1.jpg\" alt=\"\" width=\"756\" height=\"864\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/f-1.jpg 756w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/f-1-263x300.jpg 263w\" sizes=\"(max-width: 756px) 100vw, 756px\" \/><\/p>\n<p>Go ahead and play with the styling and customize the coupon module and make it look like the way you want. For this tutorial, I changed the settings and design, and this is what the end result of the first coupon looks like.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-248383 size-full\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/g-1.jpg\" alt=\"coupons beaver builder\" width=\"469\" height=\"659\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/g-1.jpg 469w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/g-1-214x300.jpg 214w\" sizes=\"(max-width: 469px) 100vw, 469px\" \/><\/p>\n<p>Once you have designed the coupon, go ahead and duplicate it and arrange the coupons in the grid as you want. Here I am creating a 3 X 2 grid.<\/p>\n<h3>Step 5: Editing the Content<\/h3>\n<p>Now comes the part where you&#8217;ll edit the content. Since all the coupons have the same design, we just need to edit the content of the coupons. Go ahead and alter the coupon&#8217;s content. This is what the coupon section looks like:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-249918\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/coupons-grid.jpg\" alt=\"\" width=\"1478\" height=\"1348\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/coupons-grid.jpg 1478w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/coupons-grid-300x274.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/coupons-grid-1024x934.jpg 1024w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/coupons-grid-768x700.jpg 768w\" sizes=\"(max-width: 1478px) 100vw, 1478px\" \/><\/p>\n<h2>Over To You!<\/h2>\n<p>This is just the coupons section; you can use your creativity and add more elements to the coupons page as you like. There are more creative modules that come with the<a href=\"https:\/\/wpbeaveraddons.com\/\"> PowerPack addon for Beaver Builder<\/a>. Check out <a href=\"https:\/\/wpbeaveraddons.com\/\">these modules\u00a0<\/a>and give them a try yourself!<\/p>\n<p>Let us know what do you think of the coupon module and the coupon section. If you liked this article, do share it!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you planning on adding a coupon section on your website? Do you want to list coupons of various products on your website built with Beaver Builder? You are on the right page. In this article, we will see how you can create a coupon section or a page on your website using Beaver Builder.&hellip;<\/p>\n","protected":false},"author":1811,"featured_media":251797,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-248188","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/248188"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1811"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=248188"}],"version-history":[{"count":0,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/248188\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/251797"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=248188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=248188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=248188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}