How to Create a SiteWide Opt In Using Gutenberg Blocks in WordPress

If you are looking to insert a stylized opt in box inline in all your blog posts using Gutenberg blocks – this tutorial will show you how to do it. No coding required!

The tutorial is a bit advanced and involved. But I made it happen without coding (because my coding knowledge is very basic).

There are likely many ways to do it, and I can’t guarantee that this will work with all the gazillions of WordPress themes out there, but this has worked for me – so I want to share in case it will help you.

Please look at my photos and videos and not a the opt in boxes that are actually in this post – because I tend to change the way I do things from time to time.

The Opt In Boxes That I Am Talking About

The screenshot below shows you the opt in boxes that I am talking about.

They are the teal boxes with a photo of my lead magnet on the left hand side and some text with a button on the right hand side.

In place of a button, you can embed an actual opt in form from your email provider instead.

For reference, at the time of the screenshot, I am using Convertkit as my email provider and LeadPages for the button. When a user clicks the button an opt in form will pop up.

What You Will Need To Make It Happen

Obviously, you will need a blog that runs on self hosted WordPress. Your WordPress install should be updated to the most recent version that supports the Gutenberg block builder.

You will also need a free plugin called AdInserter (there is a paid version as well but you won’t need that for this purpose).

Also, you will need to create an image of your freebie or lead magnet. I use both PicMonkey and Canva to create graphics for my blog – and either one will do the trick.

Finally, as I mentioned before, you will need the embed code for a opt in form from your email service provider – I would use a plain form like the Convertkit Clare form.

If you want to do a button instead – you can use a service like LeadPages where they will provide the button code for you.

Or you can create a button in Gutenberg and link it to your landing page – or if your email service provider offers the feature (not many do) – you can link it to a pop up.

Install The AdInserter Plugin

If you need a refresher on how to install a WordPress plugin – you can read this article.

What you need to do is install the AdInserter plugin and become familiar with how it works.

Basically, it allows you to insert code (don’t worry – we are NOT coding), at a variety of locations on your site.

It’s a pretty powerful plugin with lots of amazing options.

You can add things to posts, pages, categories, etc. And you can also exclude certain posts, pages, categories, etc.

I’m sure there are other plugins with similar functionality – I just haven’t used them.

If you have one you like better – feel free.

Create a Blank Draft Page in WordPress

The next thing you want to do is create a blank WordPress page – NOT a post – and save it as a DRAFT.

You will NEVER publish this page – you are just using this to design a block for your opt in.

So, the title and meta details are not important. You can call it something like – Inline Opt In Form Draft Only.

Design Your Opt In Box

Now you can go to town designing the block that you want to use for your opt in.

I used a Columns block with two columns.

First, I changed the background color to the teal that you see.

It is good to use something bright and eye catching so your readers notice it as they scroll through your posts.

I uploaded the image of my lead magnet and placed it in the left column.

Then using heading and paragraph blocks – I added some text in the right column.

Finally, I used a Custom HTML block for adding the embed code for my LeadPages button (you can use this same block to add the embed code for your form as well).

You can tweak the look of this box all you want using the tools available to you in Gutenberg.

When you are happy with the way that it looks, save your draft again, move onto the next step.

Change From the Visual Editor to the Code Editor

In the upper right hand corner of your WordPress editor window, you will see 3 stacked dots.

Click on this and in the Editor section, switch from the Visual Editor to the Code Editor.

Note that if you save your draft while in the Code Editor – the next time you open any post or page to edit – they will also show up in the Code Editor. Simply click on the three stacked dots in the upper right hand corner to switch back to the Visual editor from within any post or page.

Now copy all of the code that you see on the page for the opt in block that you just created.

Navigate to Your AdInserter Settings

In a new window, navigate to your AdInserter Settings.

Paste the Code

If you haven’t used AdInserter before, click on the number 1 position and paste the code that you copied into the black box code area.

If you have used AdInserter – then find your first open number position and paste the code there.

Select the Location

In AdInserter, select the location for where you want your opt in box to appear.

Typically, I have mine show across all posts after the 7th paragraph. But in the image above, at the bottom of the screen you can see that I have it set to appear after paragraph 4.

It’s easiest when you have one opt in that you want to show up sitewide – and that is what these instructions are for.

If you have multiple opt ins that you want to show on different categories then you can play around with the AdInserter settings that work best for you.

With AdInserter you can designate specific categories and exclude others but there is a learning curve.

Save Your Settings

Save your settings and your opt in should appear in all your posts.

That’s it!

Another Alternative

Recently, I changed my theme on this site to the child Farmhouse Theme from Restored316 using the parent Kadence Theme for WordPress.

If you upgrade to the Kadence Pro Theme it includes “Hooks” functionality.

You can use this instead of AdInserter to add “Elements” that you create using Gutenberg blocks throughout your site.

This process is easier because you don’t have to copy the code from the editor and then paste it into a separate plugin.

You can also make changes to your “Elements” whenever you want and they will push through to your whole site.

I am just learning my way through Kadence and so far I really like it. You can read my Farmhouse Theme and Kadence Pro Review here.

So, that is another option for you.

To Sum It Up

You can create a nice looking styled opt in box using Gutenberg blocks and the AdInserter plugin in WordPress without any coding.

If you want to make it easier – consider trying the Kadence theme with one of their child themes or with some really pretty ones from Restored316.

Be sure to subscribe to my Blogging Newsletter where I share the things that I learn along the way.

Happy blogging!