Sexy subscriber callouts with Gutenberg blocks

Blocks have revolutionized web content creation, but all those options can be intimidating. In this post, Jesse Friedman walks you through creating a subtle but sexy WordPress subscriber block using reusable Gutenberg blocks. Reusable callouts will speed up your work and make it easy to edit all of your callouts in the future.

Time: 10 min read

Block Structure

Below is an example of the block that we are going to be building. It’s functional, so feel free to test it out and subscribe to this blog 😉. The full-size image is in a cover block. This makes it easy to have the image expand full width across your site. Inside the cover block, we have columns and a web form to accept the subscriber details. The block is responsive and works really well on desktop or mobile.

Add a Cover block

In your blog post editor start by adding a cover block. You can add a cover block by creating a new line and typing /cover.

Pro Tip: keyboard shortcuts!

• Ctrl + Alt + t = Insert a new block before the selected block(s)
• Ctrl + Alt + y = Insert a new block after the selected block(s)
• / will bring up the new block list, when you start typing, the editor will filter new blocks using the characters you’re typing.

Select the “Cover” block seen above. This will bring up the following prompt:

The prompt above is asking you to choose a color or an image for the cover block background. We are going to add an image.

I chose “Select Media” because the image I want to use is already in my media library. You can choose to upload an image if you already have one, or if you need to find an image, I would suggest trying Openverse. Openverse is WordPress.org’s free creative commons media library.

Above, I have selected the tunnel image we will use to build this block. Click insert, and your cover block will start to come to life.

Now we need to configure the width of our cover block. Select the cover block and press on the align button, seen below.

If you’re looking for a full-width cover block like the one I created above, choose Full width.

Now your cover block is ready to become a subscriber call out.

📷 I’m having a lot of fun with these duotone reusable cta blocks I’m creating.  It’s so easy to add a beautiful but subtle callout mid blog post to get people to subscribe.  The duotone perfectly matches my blog colors!  https://t.co/E83Xs0L5xB

— Jesse Friedman (@Professor) November 16, 2022

Duotones are so hot!

Colors are amazing. They evoke emotion and set the stage for the experience we will have on a website. I will likely write another post on choosing color schemes and integrating them into your site. For today we are going to keep it simple and focus on duotones. The WordPress duotone feature makes it possible for any image we upload to express our preset color scheme. Jesse.blog has 3 primary colors, Raisin, Hot Rod Pink, and Pink.

It’s hard to find images that match these colors, which is where the duotone feature comes in. In order to convert your image, you will need to modify two settings on your cover block image. Start by selecting the image in the cover block.

Pro Tip: If you’re ever confused about which block you’ve selected, take a look at the very bottom left corner of your editor. In this case, you’ll see Post > Cover.

Now you’re going to want to select that monochrome triangle, seen below.

With this modal open, your next step is to select the colors you want for your Shadows and Highlights. For this blog, I’m going to choose Raisin as my Shadow color and Pink as my Highlight color.

You can select any colors you want, and if you’re interested in setting up preset colors like I use, go here to learn more. Contrary to popular belief, WordPress.com support docs are handy for WordPress.org issues.

If your image seems really dark, like the one above, take a minute to review the Overlay Opacity. Select your cover block and look at the block settings on the right. If you want your cover image to be bright and vibrant you can turn down the overlay opacity to zero.

I’m using duotones to alter the image color scheme while matching the colors of this blog. This creates a striking image background that also subtly falls into the background. It’s sexy but it isn’t distracting. Next up we need to add a form and some structure to the block.

Adding columns and forms

I chose to add two columns to this block because I want the image to maintain a staring role in the blocks. By adding two columns, I can put all the content into one column while leaving the other column blank. This also creates a nice asymmetrical balance.

Inside the cover block where it says Write title...go ahead and add your handy /and start typing columns. Select the columns block and then choose 50/50 as seen below.

In the left column, we will add a header and form block. Place your cursor inside the left column, which is indicated by the dashed rectangle, and add a Header block

Pro Tip: You can create H1, H2, H3, and other header tags by starting with hashtags. # = H1, ## = H2, etc…

Now that we have the header block in place we’re going to want to add a form block. There are several ways to do this but what I would suggest is adding Jetpack to your site. Jetpack has a great form block and preset templates that make it super easy to add a form anywhere on your WordPress site.

After you’ve installed and connected Jetpack you can add the form block (seen above). From there you can choose a preset, for this block we’re going to select the Newsletter preset.

The cool thing about the Jetpack Newsletter Sign-up form preset is that it can be integrated with Creative Mail or Jetpack CRM. You can also choose to use MailChimp or other integrations. The way I look at it, there are tons of tools that do the same things but with small nuances that make them unique. Be comfortable choosing the tool that is right for you and your site.

The last thing we are going to do is add some negative space above and below the form area. Click on the “Subscribe!” header and press Ctrl + Alt + t to add a block before the header. Then type /spacer to add a spacer block. Feel free to increase or decrease the height of your spacer block to better fit your design. Repeat this step by clicking the form and pressing Ctrl + Alt + y to add a spacer block below it. Your new block should look like this:

Making this block reusable

The last step to this process is to make this block reusable. Reusable blocks will seriously change your life. You have the ability to create your own blocks or group of blocks that can be inserted into any post or page just as easily as adding an image.

As I mentioned above I like to add a bit of negative space before and after call outs like this. I find that a bit of space can be a really subtle but effective way to draw attention to a call out. So I’m going to repeat the steps above to add space before and after the cover block as seen below.

Notice that all three blocks are selected above. The fastest way to do this is to click the spacer block above the cover block, then hold “shift”. With shift depresssed click the spacer block below the cover block. This will highlight all the blocks we want to conver into a reusable block.

Now you’re going to want to click the three dots on the block modal. This will open the window to create a reusable block, see below.

Click the Create Reusable Block link and name your block. This name will be used to refer to this set of blocks going forward so use a naming convention that will make sense later when you’re looking for this block.

Once you hit save, you’re golden. You now have a reusable block that you can use in all posts and pages. The most beautiful part about reusable blocks is that if you decide to make edits, those changes will be automatically reflected throughout your site. Adding a reusable block is easy peasy too. Just use the /and start typing the name of you resuable block.

One thing to note, that a reusable block sometimes has difficulting being “full width” in the editor but it should work great in the live site. I only mention this so you aren’t discouraged that you did something wrong. Let me show you what I mean.

What you see above is the reusable block in my editor. It’s not full-width here, but as you can see below it is on the live version of this post.

And that’s it! Congrats on creating a realy sexy but subtle callout to convert visitors into subscribers.

I continued to modify my block to tweak the style a bit, and I created a few additional versions.

I like variety, and with four versions of this block, I can easily choose the one that fits my posts the best. Take a look below, and let me know in the comments which one you think is best.