CTA Button element by Max Addons lets you add beautifully styled buttons to your Bricks Builder pages. With multiple options for text, icons, styles, and links, you can create visually engaging Call-to-Action buttons quickly.
In this guide, we will walk you through how to use the CTA Button in Bricks Builder and explain each customization option.
Getting Started#
Before using the CTA Button element, ensure you have installed and activated:
Once both tools are active, you can get started!
- Step 1: Create a new page or edit an existing page using the Bricks Builder editor.
- Step 2: Search for "cta button" in the Bricks Builder element search bar.
- Step 3: Add the CTA Button element onto your desired section. Make sure to check the “Max” tag in the top-right corner of the element.
Customizing Your CTA Button#
All the options for the CTA Button can be found in the Content Tab. The Style Tab includes default styling options that are common across Bricks elements.
Content Tab Options#
Here's a breakdown of the customization options available in the Content Tab:
TEXT#
- Text: Set the button text to make your CTA compelling.
- Description: Add an optional description below the button text to provide more context.
- HTML Tag: Choose the appropriate HTML tag for your button, depending on your needs.
- Size: You can adjust the button size to suit your design. Available options include, Small, Medium, Large and Extra Large.
- Style: Apply predefined button styles for a polished look.
- Circle: Enable this option to create a circular button for a clean and modern appearance.
- Outline: Enable this option to turn your button into an outlined button with a transparent background and border.
LINK#
- Link Type: Customize where your button links to by choosing a Link Type:
- Internal Post/Page: Link to another post or page within your site.
- Taxonomy: Link to categories, tags, or custom taxonomies.
- Dynamic Data: Pull links dynamically from your database.
- Custom URL: Add a custom external link.
- Media: Link to media files.
- Lightbox Image: Open an image in a lightbox when clicked.
- Light Video: Open a video in a lightbox for an engaging experience.
ICON#
Enhance your CTA Button with a customizable icon. The following options are available:Icon Type
- Icon Type: Choose between:
- Icon: Select any icon from your preferred icon library.
- Image: Upload an image to use as an icon.
If you choose Icon:
- Set the Icon Color.
- Adjust the Icon Size.
If you choose Image:
- Define the Image Height and Width to ensure the image fits your button design.
- Position: Choose where the icon appears relative to the button text:
- Before Title
- After Title
- Before Title & Description
- After Title & Description
- Gap: Set the space (gap) between the button icon and the button text for a clean layout.
With the CTA Button element, you can create beautiful and engaging buttons that align perfectly with your website's design and functionality.
Hope this helps!