{"id":5247,"date":"2016-09-18T05:17:20","date_gmt":"2016-09-18T12:17:20","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=5247"},"modified":"2016-10-13T12:25:50","modified_gmt":"2016-10-13T19:25:50","slug":"dual-button-cta-beaver-builder","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/dual-button-cta-beaver-builder\/","title":{"rendered":"How to Create Dual-Button CTA using Beaver Builder"},"content":{"rendered":"

Last week, I\u00a0wrote about creating a call to action (CTA) button in header menu<\/a> for Beaver Builder Theme.\u00a0Following the series, today I would like to share a tip for creating dual button call to actions\u00a0using Beaver Builder.<\/p>\n

Dual button Call to Action button is useful when you want to showcase your product and also offer the users a chance to\u00a0signup. Here’s an example of how Beaver Builder website uses it.<\/p>\n

\"dual-button-cta-1\"<\/p>\n

 <\/p>\n

How to Create Dual Button with Beaver Builder<\/h2>\n

Beaver Builder\u00a0provides a button module that allows you to create and style buttons easily. The good thing is, this button module is available in the free (lite) version as well.<\/p>\n

First of all, you need to add a 2-column row layout to the content section, as shown below.<\/p>\n

\"dual-cta-button-row\"<\/p>\n

Next, add the button module in both the columns and style them as per your requirements. I have created a flat button and another one as a\u00a0transparent\u00a0button.\"dual-cta-button-row-2\"Now, we have both the buttons in place but, these aren’t aligned perfectly and should be in the center. By default, Beaver Builder aligns the buttons to the left.<\/p>\n

So, if we look at the screenshot, Buy Now buttons looks fine. All we need to do is move the Explore button to the right. For this, simply click the button to open button module settings and change the alignment to Right as shown below.<\/p>\n

\"dual-cta-button-alignment\"<\/p>\n

 <\/p>\n

As you can see, now both the buttons look balanced and center aligned. In order to reduce the gap between the buttons,\u00a0we can adjust the right margin for the first button to\u00a0zero or second button’s left margin to zero.<\/p>\n

\"dual-button-margin\"<\/p>\n

 <\/p>\n

Create Dual Buttons using PowerPack add-on for Beaver Builder<\/h3>\n

So, this was how you can create dual buttons using Beaver Builder. Although, it works well but it turns out to be limiting sometimes. For e.g., if you would like to create something like the screenshot below, the above method will need some custom CSS as well.<\/p>\n

\"dual-button-cta-2\"<\/p>\n

That’s because Beaver Builder currently doesn’t have nested columns, which will be available in version 1.9<\/p>\n

If you are looking for more control over styling and creating dual button easily then you can look at Dual Button module<\/a> from the PowerPack addon.<\/p>\n

This module provides you with easy to use options for styling and can do much more than the default Button module.<\/p>\n

\"powerpack-dual-button-1\"<\/p>\n

Style Options for Dual Button Module<\/h3>\n

\"powerpack-dual-button-2\" \"powerpack-dual-button-3\"<\/p>\n

PowerPack Dual Button Typography Options<\/h3>\n

\"powerpack-dual-button-4\"<\/p>\n

and here’s the end result.<\/p>\n

\"dual-button-example\"<\/p>\n

You can check more examples of the Dual Button module on this page<\/a>.<\/p>\n

Join our Facebook Group<\/h3>\n

You can join our Facebook Group<\/a>\u00a0for more updates and tutorials about Beaver Builder and PowerPack add-on.<\/p>\n","protected":false},"excerpt":{"rendered":"

Last week, I\u00a0wrote about creating a call to action (CTA) button in header menu for Beaver Builder Theme.\u00a0Following the series, today I would like to share a tip for creating dual button call to actions\u00a0using Beaver Builder. Dual button Call to Action button is useful when you want to showcase your product and also offer…<\/p>\n","protected":false},"author":1,"featured_media":5406,"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,27],"tags":[],"class_list":["post-5247","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-beaver-builder"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/5247"}],"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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=5247"}],"version-history":[{"count":0,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/5247\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/5406"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=5247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=5247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=5247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}