If you love reading articles online, You might have seen some content boxes within the blog post content, which offers something exciting such as free eBook, video courses or access to exclusive content.
These featured content boxes or you can also call them offers section look different than the rest of the blog post and attract readers to take action.
See the screenshot below, You can see three different content boxes. The first content box has an image with some text and a link to download the eBook, while the other two boxes have a different background color.
The first Content box has been created with WordPress Gutenberg editor while two other boxes have been created with a WordPress shortcode feature. All three boxes have been styled with custom CSS.
These type of content section are great to sell your products or you can use them to offer something great such as an ebook, video course, cheatsheet in return of an email subscription.
If you want to use these type of boxes within your blog post, You can do this by adding a simple function in your child theme’s functions.php file or you can create and use a custom-functions-plugin for WordPress.
Add the following code in your child theme’s functions.php file or in custom functionality plugin.
//https://createwptheme.com/featured-content-inside-post
//First Featured box inside the content
function tcab_featuredbox($atts, $content = null) {
return '<div style="background: none repeat scroll 0 0 #ff9; clear: both; margin-bottom: 24px; overflow: hidden; border: 10px solid #e5e597; padding: 13px;">' . do_shortcode($content) . '</div>';
}
add_shortcode('featuredbox', 'tcab_featuredbox');
//Second Featured box inside the content
function tcab_featuredbox2($atts, $content = null) {
return '<div style="background: none repeat scroll 0 0 #8ae2da; clear: both; margin-bottom: 24px; overflow: hidden; border: 10px outset #83c2bc; padding: 13px;">' . do_shortcode($content) . '</div>';
}
add_shortcode('featuredbox2', 'tcab_featuredbox2');Save your changes and edit an existing blog post or create a new blog post. If you are using the WordPress version 5 or above with Gutenberg editor, Click the + symbol and search for Shortcode block, if you are using the old classic WordPress editor, go to Code editor mode and add the following code.
[featuredbox]<h3>This is featured box</h3><p>Your offer content goes here, You can also use HTML code inside this box</p><a href="#" class="btn-primary">Get free eBook</a>[/featuredbox]Save the changes and preview your blog post. You can add this shortcode anywhere within your blog post.
We have added two different featured boxes with different background and borders. Now add an HTML block and paste the following code in it.
[featuredbox2]<h3>Title for great offer</h3><p>Your offer content goes here, You can also use HTML code inside this box.</p> <a href="#" class="btn">Download free eBook</a>[/featuredbox2]Save your changes and preview your blog post.
You should see the above result. You don’t need to remember these shortcodes or HTML. You can add them to reusable blocks to use them in future blog posts. Place your mouse cursor inside the block, select the more options and choose to Add to Reusable Blocks.
How to Display Featured offer with Gutenberg editor?
Gutenberg editor has made it very simple and easy to create content. It is a very powerful and free drag and
Gutenberg editor has so many useful blocks. Media & Text is one of them. Add a new Block and select/search Media and Text. This block lets you create a two-column layout. One for image and other for text.
Upload an image or select from the media library. You can make the image small or large. Holding down the Blue icon and move the cursor to change the image size.
You can style this Block with custom CSS. For example, add the following CSS to your styles.css file.
.wp-block-media-text {
background: #FFEB3B;
margin: 1rem 0;
border: 10px outset #FFEB3B;
}.wp-block-media-text is the class, WordPress uses for Media and Text block. You can use this class to style his block.
Conclusion
We have explained two different ways to add and style featured content secion inside post content. You can use them without any technical knowledge. If you have any question, feel free to ask me in he comments below.