Designing your own single post template in WordPress has never been easy, especially if you don’t have any design skills. Luckily, this has changed dramatically, thanks to Elementor Pro’s Theme Builder.
The Single Builder allows you to design your blog posts visually right in the Elementor editor, just like you build any other page. This is a major improvement for all designers who want to simplify their workflow when building a new WordPress website.
In this post, Dave Foy, E-Teacher and Director at Design Build Web, demonstrates how to use the amazing new Single Post Builder in Elementor Pro.
He does this by recreating a Single Post blog design by Flywheel, the WordPress hosting company for designers and creative agencies. Why did Dave choose Flywheel? Because the blog features a high impact image, a clean and clear layout, and is overall very functional. This video will help you understand the powerful capabilities of our Single Post Builder as well as its flexibility.
This post is divided into several chapters, according to the structure of the page. We do not go into the technical details such as the layout settings or widget modifications, but instead, focus on the main elements that help us re-create the page. The full technical details appear in the video itself.
So, let’s get started!
Initial setup & first steps
Before we actually start building our Single Post template, let’s lay down some groundwork settings that will make life much easier.
For starters, the content width has to be the same as Flywheel’s blog post width. Flywheel’s default layout is 1250px, so go ahead and change it. Next, make sure you have the right fonts. Flywheel uses two Google fonts that are included in Elementor, and one font that you can add using the Elementor Typekit integration.
Use Elementor’s Header and Footer Builder to easily create Flywheel’s header and footer.
Add a few blog posts and set their featured images, so you can preview your progress while you build the single post template.
Creating a single template
To create the blog post, select the single post template under Elementor > My Templates > Single.
Once it opens, apply it to whatever post (or page) you choose. Just close the template window and start with a blank canvas page.
Full-width dynamic featured image area
The first step is to switch the page layout to full width. After that, set the background to display the featured image and match the height with Flywheels’ layout. Choose a dynamic featured image so that it will be pulled in systematically from each post.
Building the body of the post
Now it’s time to add a new section with three columns: one for the main content area, and two for the left and right sidebars. Resize them to fit Flywheel’s layout.
The post title is dynamically added and appears at the top of the central column. Use the Post Title Widget in order to automatically add the post title. Go on to edit the date and the author name by dragging a Post Info Widget into the section. Drag and drop the Post Content Widget to form the main content field. It’s as simple as that.
For the author profile photo, use the Author Box Widget. Below the author profile photo, you can see the name of the current category being viewed. Here, use the Post Info Widget again. Next, style the Social Sharing widget to mirror Flywheel’s social media buttons.
On top of the right sidebar, use the Heading Widget and just below it drag in a Form Widget. Now take a Spacer Widget to make some space above the Top Posts section. Then you can drag and duplicate the top heading and place it below the form.
At the bottom of the right sidebar, you can see a “Local by Flywheel” ad. This ad was actually created as a separate template located in the template library, for use on other pages on the site. It includes an image, a text, and a button. For a nice effect, use some CSS to position the small “Free” flag just outside the left border. In order to place the ad inside your sidebar, you need to drag in a Template Widget. From the panel, you can then select the template you designed earlier.
Nest a new Columns Widget inside the main column to include it underneath the main column, then frame and style it separately. Since you already added a border, use this tiny “hack” to create a yellow bottom border. To do so, apply the Box Shadow feature and modify the settings to create a solid line. To modify the small yellow flag, use that CSS magic again to position it outside the box borders.
Adding blog comments
To add more space below the Email Signup box use the Spacer Widget. To style your blog comments, try out the Post Comments Widget, another dynamic element on this page, located under Theme Elements.
'Links to more' section
As this is a completely new section, you can use a one column section for your ‘links to more’. Drag in an Image Widget and a Heading Widget. Top it all off with a Post Widget with three columns, and modify it according to Flywheel’s layout.
The Email-signup block
For this section, Flywheel applies custom CSS code to the layout. However, you can simplify this process by only using Elementor standard controls. Nonetheless, as you can see in the video, the results are remarkably close.
First, add another two column Section. Then drag an Image Widget into the left column and a Heading Widget along with a standard Elementor form Widget into the right column.
Below this, add one more two column Section, drag a Heading Widget into the left column and a Social Media Icon Widget into the right column.
You made it! But wait, don’t forget to check every stage for any responsive tweaks for mobile and tablet!
Dave’s tutorial guides you step-by-step how to create a Single Post Template. We hope that it will help you simplify the process of designing your WordPress website. Enjoy the flexibility and the extensive toolbox provided by Elementor. Let us know if you found this tutorial helpful in the comments below.