I have to admit I hated Gutenberg when it was introduced. But, honestly, it has come a long way and has simplified creating beautiful posts and pages. But, can you create an effective call to action using just the Gutenberg Blocks?
We will create a call to action using Gutenberg columns, text, a button and Emojis. Let's get started!
To draw attention to our button, we will use pointing finger emojis like ? . Our brains are conditioned to pay attention to wherever the pointing takes it. Plus a button that contrasts the background. It would also be ideal to make the background of the whole cta different to the page background, but that will need css and has been excluded from this tutorial. Let's Start!
A general know-how of the Gutenberg Builder is required.
First, create a column block and set the number of columns to 3.
Set the number of columns to 3
Add a Button to the centre column, it would look something like this:
Next copy the finger-pointing emoji ? to the left column and set the text-align to right. Set font size Large from the blocks panel for the Emoji block. You will get something like this:
?
Next copy the finger-pointing emoji ? to the right column and set the text-align to left. Set font size Large from the blocks panel for the Emoji block. You will get something like this:
?
?
Add a paragraph block with large font size above the column block. Add some text to entice action. Center the text.
Also add an emoji pointing up ? in the center column, just below the button.
Here's the Result:
