Gutenberg makes it super simple to create your content, such as pages and blog posts. As WordPress and Gutenberg continue to grow, the new editor will be extended to work on other parts of your site, so the possibilities will only continue to grow!
Using WordPress’s native blocks and third-party blocks, you can achieve unique layouts, filled with design elements that are beautifully crafted by top-notch block developers and designers.
Table of Contents
What is CoBlocks
CoBlocks, founded by Rich Tabor at GoDaddy, is a suite of blocks for the WordPress editor. It includes a bunch of blocks that not only help content creators add new features to their websites, but they look flat out awesome!
In this post, we’ll look at how you can use CoBlocks with Ad Injector to bring the same powers of Gutenberg to your WordPress post archives, such as Blog page, custom post type listings, and even WooCommerce product grids!
What is Ad Injector?
With Ad Injector, you can use Gutenberg to create content like advertisements, promotions, calls to action, and much more. You can then insert that content anywhere within your blog page.
For example, say you’re launching a new product, and you’d like to display a promotional call to action after the first blog post on your Blog page. You can use Ad Injector to create the ad, insert it after the first post, and even schedule it for when to start and/or end. You can use CoBlocks to make it look great!
Here’s what we’ll be creating…
Here, we’ve created a promotional call to action using CoBlocks and Ad Injector, and have inserted it after the first post on the Blog page.
Prerequisites
You won’t need anything special here – just CoBlocks and Ad Injector!
CoBlocks is a free plugin you can download from your WordPress admin, or upload the zip file.
Ad Injector is available from Elegant Modules, with a Basic license starting at just $39. You can download the plugin’s zip file, and upload it in your WordPress admin. Make sure to add your license key in the Ad Injector settings to ensure you get access to automatic updates and support.
Creating the Promotion
After both CoBlocks and Ad Injector are installed and activated, you can create your promo. In your WordPress admin, in the admin menu on the left side of the screen, click on Ads –> Add New.
Creating a new ad is just like creating any other post or page in Gutenberg. For our example, we’ll be using the “Media Card” block available in CoBlocks. The setup will look similar to this:
The Media Card block looks great, and is simple to configure. We just need to select our image, and add a title and description. You can also set thing like a background color, the amount of padding, card or image shadows, and more.
After you’ve added the content for your promo, it’s time to insert it into your blog with Ad Injector.
Inserting the Ad
The Ad Injector settings next. Since we want to display the promo after the first post in our blog, we’ll select “Posts” as our post type, and enter “1” as the position. You can also set a start and end date for your ad, if desired. Your settings will look like…
After designing your promo and configuring the Ad Injector settings, you can save and public your ad. You can now create any kind and any number of promos you’d like, and insert them into whichever post type archives you wish. Use Ad Injector to insert things like email opt-ins, product upsells, and anything else you can do in Gutenberg!
Want to Add Custom Promos in Your Blog?
Check our Ad Injector, a WordPress plugin that lets you build, schedule, and insert custom promotional content right into your blog. It also supports custom post types and WooCommerce product grids!