Call to action (CTA) blocks are designed to provoke an immediate response or trigger the desired action from your website visitor. You can turn any button in blocks into calls to action but better yet, you can use specifically designed Call action blocks. They deliver your strong message to the visitor in a highly visual way, so they cannot resist but click on your offer!
Adding a Call to Action block
Here’s how to add a Call to Action block:
- Choose a location where you want to add a call to action and click on the Add Block + button.
- In the Block library, navigate to the Call to Action section and click on a block that fits your website strategy.
- Click on the block and it will be automatically inserted into the page.
Customizing Call to actions block
1. Insert the block as described above.
2. Click on the block to activate the control pane:
3. Click on the “gear” Block settings icon to activate the menu. You can change the following settings:
- Block title
- Primary button
Once you are done customizing the Block settings > General, click Save to confirm the changes.
Customizing block appearance
In the Block settings > Appearance tab you can customize the following settings:
Block style: Choose the color scheme of this block (light or dark)
Horizontal alignment: Choose the horizontal content alignment in this block (left or right)
Background settings: Customize the background of this block
- Add B&W filter
- Add overlay (depending on the block color scheme, add a light or dark overlay over the background)
- Change the overlay opacity (make the background overlay more or less transparent)
Once done customizing, click Save to apply the changes.
Editing text in the title and description
To replace the demo text with your own text in the block title, simply click on any line anywhere on the page and start typing. You can also copy and paste the text from a text editor you are using. Note that the original formatting of your text will be preserved.
Learn more about text formatting: Text formatting
Editing the background
You can replace the demo images in the block with your own image or a banner. Here’s how you can do it:
1. To replace the image, hover over the block element to activate the control pane.
2. Click on the “picture frame” Edit Image icon and choose the new image from your computer. The following formats are accepted: Image formats.
You can also choose an animated .gif image for your background.
In Block Settings > Appearance you can change the overlay opacity so that the background image stands out more:
Once you are happy with the results, click Save to apply changes.
Editing Call to action button
You can edit the text in the button by hovering over it and starting to type your own text on top of the button. For more information on editing buttons, visit this tutorial:
Adding more Call to action blocks
If you would like to feature more offers on the page, you can easily duplicate the block. To do that, hover over any block element you want to duplicate and click on the Duplicate icon.
The identical block element will be inserted below the original block.
Creating a sale or promotion banner
To quickly create a promotional content block, use Call to action block. This allows you to quickly draw attention to your sale, event, promotion, or another action. You don't even need to use external image editing software. Here's how to add a responsive banner area to your page:
1. In the Blocks Library, choose Call to action block with one or two buttons and image background.
3. Customize the block title and subtitle with the information about your sale or promotion. For maximum impact, consider disabling block subtitles in Block Settings.
4. Customize the block background with a promotional image.
5. Click Publish to make your banner live.