Button Section

Description

The Buttons Section is a component for displaying a call-to-actions that can't be placed inside another section.

Button types:

Single call-to-action Button: A Button section that displays a centered call-to-action button, using a Rich Content Widget.
Double call-to-action Button: A Button section that displays two centered call-to-action button, using a Recent Content Widget and a Rich Content Widget.

Single call-to-action Button

Configuration

Create a new Section in the content builder.

Add a HTML Markup Widget inside the section with the following code:

<input
       name="open-section"
       data-section="buttons"
       data-name="buttons"
       value="buttons"
/>

Add a Rich Content Editor inside the section. Use the predefined font format for the call-to-action and add a link anchor to the designated page.

Usage

After including the HTML Markup Widget to inform that the specific element is a Button block, various css classes can be added to value in order to costumize it.

Background Colors:

bg-red bg-deep-red bg-turquoise bg-blue bg-deep-blue bg-yellow bg-amber bg-cream bg-slate bg-slate-15 bg-soft-white

Button style type:

btn btn-invert btn-outline

Double call-to-action Button

Configuration

Create a new Section in the content builder and select the two column layout.

Add a HTML Markup Widget inside the section with the following code:

<input
       name="open-section"
       data-section="buttons"
       data-name="buttons"
       value="buttons double-cta"
/>

Add a Recent Content Widget in the first column and insert the expected tag (created in the backend) in order to display the call-to-action link.

Add a Rich Content Editor in the second column. Use the predefined font format for the call-to-action and add a link anchor to the designated page.

Usage

After including the HTML Markup Widget to inform that the specific element is a Button block, various css classes can be added to value in order to costumize it.

Background Colors:

bg-red bg-deep-red bg-turquoise bg-blue bg-deep-blue bg-yellow bg-amber bg-cream bg-slate bg-slate-15 bg-soft-white

The Double call-to-action Button doesn´t require additional button style configurations since its design should stay the same in every page.

Activities Carrousel