Button module overview

The Button module is exactly that: a button that you insert into your layout to lead visitors elsewhere within your site or to an external link – and the Page Builder button has an extra capability: instead of following a link, clicking the button can open a lightbox that displays the video or any other content that you can insert with shortcut or HTML.

Button style

Here are some example of the Button module’s style options:

You can add a button border and change the curvature of the button corners.You can change text size and increase the padding between text and the button border. You can set a gradient color on the button or leave it flat. You can set the button width to Auto, full column width, or a custom width, and you can set the horizontal alignment to left, center, or right. See the screenshot above for examples.

There are various options for button hover behavior. You can set different background and text colors for resting state and hover state. You can enable or disable the button’s transition behavior – if enabled, there’s a 0.2-second linear transition from resting state to hover state.

Tips:

  • If you add a background color to the Style tab, a Style section will appear with some additional options, including the ability to make the button transparent. See the Related Articles on how to make a button transparent.
  • If you want to set a link for the button but don’t have the link ready yet, enter a pound sign (#) for the URL so you can save the module.
  • Other modules that include buttons: Callout, Call to Action, Contact Form, Subscribe Form.

You can set the button’s click action to either a link or a lightbox.

When you set Click action to Link, a Link section opens.

Enter the URL to the link or click Select to choose a page or post from your site. Set Link target to determine whether the linked page replaces your current page in the same tab ( Same window) or opens in a new tab (New window). The Link No Follow field tells search engines whether or not to follow the link. The default is No, which tells search engines to follow the link. Yes means “Yes don’t follow the link.” For more information about when to use nofollow, see the Google webmaster article.

Set the click action to a lightbox

If you choose the Lightbox option, you next choose whether the lightbox content will be based on HTML that you enter or a link to a video.

HTML content

With the HTML content type option, an HTML editing box lets you enter custom HTML that will be displayed in the lightbox. This works great for adding shortcode.. In the following screenshot, the shortcode for a saved row containing a Call to Actionmodule was inserted into the HTML box to make an opt-in popup.

You could also add shortcode from third-party plugins. For example, a plugin that uses a shortcode to display PDF content in a web page could be used to display the PDF in a lightbox by using the same shortcode in the HTML box.

The video option works well as an alternative to embedding the video in the page. Insert the URL of the video you want to open in the lightbox, from a service such as Youtube or Vimeo.

Related Articles