Call to action block

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 into calls to action, but better yet, you can use a specifically designed Call to action block. It delivers 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:

  1. Choose a location where you want to add a call to action and click the Add Block (+) Plus button.
  2. In the Blocks library, navigate to the Call to action section and click it to see the pre-designed layout for this block type.  
  3. Click a block that fits your website strategy. It will be automatically added to the page.

    No-logo-Call-to-action-block-1.png

Customizing block settings

You can customize the Call to action block with the help of its control pane.  To activate it, hover over the block and then click the Block settings icon.

No-logo-Call-to-action-block-2.png

The block settings menu consists of two tabs: the Layout tab and the Appearance tab.

In the Layout tab, you can switch the block layout and choose which elements should be displayed in the block. To hide a specific block element (for example, if you want to remove a button), remove the blue tick next to the element’s name.

No-logo-Call-to-action-block-3.png

In the Appearance tab, you can make the following changes:

  • Crop the background image: Change the image’s focal point and its position
  • Replace image: Change the background image by uploading it from your computer storage or the built-in free photo stock. 
  • Block style: Change the color scheme of the block.
  • Block spacing: Change the whitespaces on the top and bottom of the block.
  • Horizontal alignment: Choose the horizontal content alignment in this block (left or center).
  • Background settings: add a black and white filter to the background image or add an overlay.

Note: Depending on the block layout you choose, you may have more or fewer controls in the Appearance tab. 

Once you are done customizing block settings, click Save. Read more about managing your blocks in our dedicated tutorial.

Note: You can reverse any action by clicking Undo on the Topbar or pressing Ctrl+Z (Command+Z on Mac) on your keyboard.

Editing the 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 our Editing buttons tutorial.

Adding more Call to action blocks

If you want 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 on its control pane.

No-logo-Call-to-action-block-4.png

The identical block element will appear below the original block.

Creating a sale or promotion banner

Use the Call to action block to quickly create a promotional content block. This lets you quickly draw attention to your sale, event, promotion, or other 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 the Call to action block layout you like. 
  2. Customize the block background with a promotional image. 
  3. Customize the block title and subtitle with the information about your sale or promotion.

Here’s the video of the process. 

Once you have customized your block, click Publish to make changes live.

Was this article helpful?
0 out of 0 found this helpful