Call To Action Block

Table of Contents

The call to action block in Gutenberg is a great way to add a button or link to your page or post. You can use it to promote a product, service, or cause, or to simply invite your readers to take some action.

1. How to add the Call to Action block? #

To add the Call to Action Block in your Gutenberg editor first click on (+) icon then in the search box type “Call To Action” and you will see the “Call To Action” block.

After inserting the “Call to Action” block you will get the default look like below. Now you need to change the preset and other settings.

2. General Settings #

The General settings tab has the preset option and Title, description and button text, and URL options. The General settings panel properties are as follows.

  • Presets: From our pre-defined presets you can select which style you like.
  • Content: From the content settings you can enable or disable the title can set the Title Text. Also can enable or disable the description content also can set the description. Set the alignment of the text. Set the title tag from H1 – H6

The most important settings are button settings. There are two buttons here “Button One” and “Button Two” settings are as follows

There are 2 buttons here both button settings are the same.

Button One & Button Two Settings #

You can enable or disable this button

  • Text: Add your own text for the button
  • URL: Add the action URL of the button
  • Link Type: Set link type “New windows” also can enable the Nofollow option
  • Size: You can set size from pre-defined sizes like Small (S), Medium (M), Large (L), and Extra-Large (XL)
  • Button Icon: You can enable button icons, set your own icon from the drop-down list, Icon position, Icon Size, and Icon Gap

3. Style Settings #

From the Styles settings tab, you can set all possible styles like typography, color, margin, background and other style settings.

Title Style Settings #

  • Typography: You can set Title typography like font family, size, weight and line height.
  • Color: Set the Title color.
  • Margin: Set the title margin of the title.

Description Style Settings #

  • Typography: You can set Title typography like font family, size, weight and line height.
  • Color: Set the Title color.
  • Margin: Set the title margin of the title.

Button One and Button two Style Settings are as follows #

  • Typography: You can set Button typography like font family, size, weight and line height.
  • Text Color: Set the Button Text color.
  • Hover Text Color: Set the Button Hover Text color.
  • Icon Color: You can set your own icon color.
  • Hover Icon Color: You can set the Icon Hover color.
  • Margin: Set the title margin of the title.
  • Padding: Can set the padding of the button.
  • Background: You can set the button normal and hover background color.
  • BoxShadow: You can set the button BoxShadow
  • HoverEffect: Set the button hover effect

4. Advanced Settings #

From the advanced settings tab, you can control the wrapper style.

  • Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
  • Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
  • Border: You can set the default border or hover border with different border styles also can set border-radius.
  • Shadow: You can set box shadow for normal and hover style.

5. Final Outcome #

Here is the final outcome of a Call to Action Block

What are your Feelings

Powered by BetterDocs