A single post page with a good format allows your readers to feel good when reading your post. It also helps attract new or existing visitors to visit your website, reduce the jump rate, help improve your website page views, and so on. This is why you need to focus on the design of the single post page.
If you are looking for an ideal guide to create a custom single post page with Elementor, the following guidelines will be your ideal choice.
In this guide, we will show you how to design an Elements blog post template or page from scratch. Before that, you should know why you need to create a custom single post page.
Let’s start:
Why do you need to design a custom ELEMENTOR blog post template
most of the most popular popularity The WordPress theme has its own single article design framework. But the default single post design format of your theme may not meet your needs. Suppose you need to add a custom pop -up window to a single post page, but the theme you used for designing a website does not allow you to do this.
What do you do in the next step? From this perspective, you need to design a custom single post page to add the features you need. However, when creating a custom blog article page for your website, you can consider other important aspects. The fact worth noting is:
Make sure a better user experience
Reducing the jump rate
Improve a single post page design
Add customized customization Function
Make sure a better post view
2 methods to create custom Elements blog post templates
You can create customized customs in two simple ways Elementor blog post template-
Method 1: From scratch, create Elementor blog post template
Method 2: Use the prefabricated Elementor template to create a single post page
Make sure you have installed and activate Elementor (free) and Elementor Pro plugins on your websiteEssence
If you are a novice of Elements, please check this convenient blog about how to use Elements correctly.
Method 1: From scratch, create an Elementor blog post template
If you want to design your own single post template from scratch, you can use Elementor small components to complete.
Step 1: Add column and part
First, you need to add a part and insert a column as needed. To this end, you should click the
(+)
icon and the column of this part.
Step 2: After adding feature image widths
, you can add the required small parts to the columns Essence Here, we added
Featured Image
small components to display our post feature images. You can find a small part from the left menu and drag and drop the small parts to the correct position.
The content of the feature image
You can in the content regional management characteristics image. You can change
Image Size
, set alignment , add capption and insert link as needed.
style characteristics Image
You can use the style option to customize the image design. Turn to the
style
area, change the necessary settings to make your characteristic images more attractive.
Step 3: Add new columns and settings
After adding feature images, we have to add other small components. Prior to this, we like to add a new list and use
Advanced to set the setting layout. View the figure below, you will see that we set up
Content Width-\u0026 GT; Boxed
and define
width
as
850px. Let’s add other small components to this column.
Step 4: Add post information width
We add
Post Info Small parts to display to display Our post metadata. Find a small part and put it in the column.
The content of the information of the information
In the content, you can control the publishing information small component components metadata
.
Set the post information nominal part of the component
If you want to customize the information design Performing in the
style area. Here, we set the
alignment
method of the content of the post.
Change the post to change the post The color and size of the information icon We also changed the color of the icon
and
size
. You can change the text design by turning to the style-\u0026 gt; text
area. But we have a good design of the default text.
Step 5: Add post Title small components Add post title Small components and display blogs title. You can add small components according to the above process.
Style post title
You can also pass to the
style area area Let’s manage the title style. Here, you can customize the post title text color, layout, text shadow
and
hybrid mode
.
Note: If you have installed the Happy Addons plug -in to your site, then you you, then you It will get Text Stroke option. Step 6: Add post Content small components
NowIt’s time to add the content of the entire post to our page. To this end, we add
to the content to the page.
风格帖子内容
[123 ]
You can set the content of alignment, text color
and
typeset
.
Step 7: Add social sharing width We added social sharing
social sharing
123] button.
Step 8: Add the author’s information widget
We also added
Author information
Small components To display the detailed information of the author.
style author box
According to your needs, you can use the style option to change the author’s information default by default design. Here, you can get different options to define
image, text
and
buttons .
Step 9: Add paging small parts
In order to make post navigation, we added Post Paggment [ 123] Small components. You can easily browse the post now.
Step 10: Add related posts
This is a very common feature you often see at the bottom of a single blog article Essence This is why we decide to add the \”related posts\” small parts to our page. We also set up a column of small parts, per page
and other necessary post settings.
Step 11: Added Comment on small parts
By adding
Post Comment small components, you can easily implement the review options to your post page. You can use \” content
\” option settings
Skin and comments Source .
The final preview of the design of the Elementor Single Post
After adding all the necessary sub -components and customizing the design, this is our single one The current design of the post.
Method 2: Use the prefabrication Elementor template to create a single post page We will be in this part of our blog, we will be in part Show how to use Elementor Theme Builder to create a single post template. Let’s start:
Go to Tempalte Teme Builder
First, you need Post template.
Add a new single post
On the next page, you have several options. Click
a single post
tab. Then click
to add a new single post
button.
After creating a single post template , you can find the option to create templates. Write template name and click
to create the template
button and wait for the upcoming page.
Select the appropriate pre -designed post template It’s time to select the appropriate prefabricated blog template for your blog page. Essence Just install the template and use it.
Note:
You can also customize the prefabricated template as needed.
Just. Use a happy plug -in post to enhance your custom ability Happy plug -in is one of the lightweight and rapid growth Elementor plug -in, allowing you to use its powerful post small components Design a customized single post page. At present, it has 8 high -end posts that are easy to use and can be completely customizedEssence
Let’s briefly introduce these small components so that you can understand why you try these small components.
Post list (free)
I want to display your blog post in the list ? The new post list of happy plug -ins allowed you to display your blog can according to the list. Try this small component to make your post design unique.
View post list of component documents.
Post label (free)
You may notice that many websites use labels to display their posts. If you want to do this, then Happy Addons’s free Post Tab component will be the perfect tool for this design.
Read the post tab small component document and understand how to use it. Classification (free) Want to modernize your post -classification? From now on trying a free classification of happy plug -ins, you can effectively decorate your classification and classification in a more organized way.
Check the complete documentation of the classified small components.
Rear grid (professional version)
If you are looking for a reliable tool to display your blog post with a grid layout, then you should try Happy Addons’s post grid components. This creative component can save your precious time to design such web elements and make your blog page more attractive.
Read the post grid component component Full document.
Post Tile (Professional Edition)
Post Tiles Widget of Happy Addons is another advanced tool that allows you to display posts in a more organized way. You can add multiple posts at a time and manage their width and height. It is easy to use and can be completely customized.
Learn how to use this magical tool according to the document of the Post Tiles component.
Smart Post List (Professional Edition)
Use this exclusive intelligent post list small components. You can list blog posts on the Elementor website more effectively than before. You can add sticky posts with display classification posts.
View smart post list document.
Post Rotation (Professional Edition)
This unique happy plug -in component allows you to show your blog post in the rotation layout. Try the Post Carousel component to make your post design more attractive to your visitors.
Read the post carousel documentation Understand how to use it.
The author list (professional version)
Try to use the author list of the New Happy Addons to make a beautiful author list and show how many posts they write.
More information about the components of the author list through reading documents.
Are you ready to design custom ELEMENTOR blog post templates
It’s time to use Elementor to create your own single post page.
If you operate in accordance with the above instructions, you will accurately understand how to design custom ELEMENTOR single post page from scratch. We also discuss how to use Happyaddons Post Widgets to add more value to your post page.
If you still have any questions about the design of the Elements blog post, you can use the following comment box to ask questions. We will solve your problems as soon as possible.
If you like this useful guide, please share on your social channel. And join our current affairs communication to obtain more interesting guides about WordPress and Elements.
Subscribe to our news Get the latest news and updates about Elementor
You can use the style option to customize the image design. Turn to the 
to set the setting layout. View the figure below, you will see that we set up 
Small parts to display to display Our post metadata. Find a small part and put it in the column. 
metadata 
area. Here, we set the 
style-\u0026 gt; text 
to the page. 
alignment, text color 
style author box 
per page 
Read the post carousel documentation Understand how to use it. 
Are you ready to design custom ELEMENTOR blog post templates 
