Call-to-Action Block

IMPORTANT NOTE: Genesis Blocks 3.0.0 removes the Button block from Genesis Blocks and replaces it with WordPress® core blocks.¹

Updating your plugin to version 3.0.0 will automatically convert your Genesis Blocks Call-to-Action blocks to Core blocks when opening the block editor for that content. The blocks should look mainly the same, but there could be some styling changes, especially if you have custom styling for classes other than gb-block-cta.

The Call-to-Action block allows you to add a compact, wide, or full-width call-to-action section to your post or page. This block includes settings for adding a background image, a background color, and customizing the appearance of the text and button so it’s easy to set the section apart from the rest of the page.

Table of Contents:

• General settings
• Text Options
• Background Options
• Button Options
• Advanced settings

---

General settings

After adding the block to the post or page, add a title and the text first (as described below) so it’s easy to see how everything will look while you’re customizing all the available settings.

Click image to enlarge

1. Call-to-Action Title: Add an attention-grabbing title.
2. Call-to-Action Text: Add a brief description to tell visitors what to expect when they click the button.
3. Button Text: Place your cursor directly on the button to add your custom button text. For example, your button might say Buy Now.
4. Button URL: Where do you want the user to go when they click the button? Paste that URL here. Or you can start typing the name of a post or page on your site that you want to link to.

Text Options

Click image to enlarge

1. Title Font Size: Adjust the font size of the title.
2. Text Font Size: Adjust the font size of the description.
3. Text Color: Click the colored circles to select a pre-defined text color. Or click Custom Color to select your own.

Background Options

Click image to enlarge

1. Background Image: Add a background image that will be displayed behind the title, text, and button, if desired.
2. Image Opacity: Adjust the opacity (or transparency) of the background image. The lower the number, the more transparent the image will be. This setting makes it easier to read text if the background image has a lot of busy detail on it. This option only shows if a background image is added above.
3. Background/Overlay Color: Click the colored circles to select a pre-defined background color. Or click Custom Color to select your own. If you do not add a background image above, this color will be displayed as a solid background color. If you do add a background image, this color will be overlaid on top of the image and its opacity (or transparency) will be determined by the Image Opacity setting above. For example, when the image opacity is set to a low number, more of the background color will be seen (because the image is more transparent).

Button Options

Click image to enlarge

1. Open link in new window: Enable this option if you’d like a new window (or tab) to open when someone clicks the button.
2. Button Size: Choose whether the button is small, medium, large, or extra large.
3. Button Shape: Choose whether the button has square corners, rounded corners, or is “pill shaped” (circular).
4. Button Color: Click the colored circles to select a pre-defined background color. Or click Custom Color to select your own.
5. Button Text Color: Click the colored circles to select a pre-defined button text color. Or click Custom Color to select your own.

Advanced settings

Click image to enlarge

1. Additional CSS Class(es): You can add one or more CSS class to customize the appearance of this block. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.