This block allows you to add an eye-catching, full-width section with a big title, paragraph text, and a customizable button.
How To Add The Call To Action Block #
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Call To Action or you can search for it if it doesn’t pop up quickly for you.
- 2.By default, you’ll get the below design-
%20(1).png?alt=media&token=cfb58680-1a78-4c0b-bc37-081a38016071)
How To Configure The Call To Action Block #
Under the ‘Content’ tab, you will find the Border radius & Box shadow settings.
General #
Border Radius – You can give a border radius to the block from here.
Box Shadow – You can give box-shadow to the block with a number of options available for customization such as color, blur, spread, position, etc.
%20(1).png?alt=media&token=52fbe93f-7c19-4ba2-9662-a54694e9ae42)
How To Style The Call To Action Block #
Typography Options #
Under the Typography tab, options for font family, font size, font-weight, and line height are available for Title, Button and Description.
You can now set the responsive font size of Title for Mobile and Tablet view.
Text Color: Select color for the text from here.
%20(1).png?alt=media&token=8084009b-e497-4c3c-b686-415aa327c8a1)
Background Options #
You can select a background type for the block from here. The options available are:
- 1.Color
- 2.Gradient
- 3.Image
Opacity: You can set opacity from here for the block.
%20(1).png?alt=media&token=e1537121-fe28-4420-8f3d-be9670b1bcab)
Button Options
Choose to open the link in a new tab.
Button Size – Choose the size of the button as small, medium, large, or extra-large.
Button Shape – Choose the shape of the button as square, rounded square, or circular.
Type – Choose the type as Button or Text.
Border: The following settings are available in the border panel – Style – You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it
Border Thickness – You can set the thickness of the border from here.
Spacing options are also available to customize the button padding and margin separately for Vertical and Horizontal.
Under the Colors tab, color options are available for Background, Button, and Button Text.
%20(1).png?alt=media&token=3c905e8a-b35f-448b-9e41-c8cefbf8154c)
Icon Settings #
Select an icon to display on the button from here.
Icon Color – Select a color for the icon.
Icon Position: You can display the icon after or before the text.
Icon Spacing – Increase or decrease the spacing between icon and text from here.
%20(1).png?alt=media&token=9a54b4fa-a5db-44a7-a292-9f22c0f53e1a)
Spacing #
The spacing tab offers responsive options to customize the padding and margin separately for the block.
