Home » Website » Elementor » Design Posts with Elementor for WordPress Website

Design Posts with Elementor for WordPress Website

course 1, elementor

In this tutorial I’m going to show you how to design posts with Elementor for a WordPress website.

I’m going to make a template for the blog posts so that all posts on the website are displayed in the same style and layout.

A big advantage is that you can add new posts very quickly after the single posts template has been created.

If you then add a new blog post, you don’t have to adjust anything to the design and all you have to do is paste a new text and select a few new images and that’s it. This way you can add a new blog post to your website in minutes!

I’ll show you exactly how it works in this tutorial.

Watch tutorial on YouTube

Tools I use in my tutorials:

Design general blogpost

So let’s start with creating a template for the blog posts.
I will show you how to do this from the WordPress dashboard.

First click on Templates below Elementor in the left menu.

Now click on Add New at the very top of the page.

At Select click on the Single Post option and in the field below I enter a name for the template that I want to create and I call this Blogpost template and then I click on Create Template.

After that I click on My Templates and then I select a page that I have already created which in this example is the About Us page and import it by clicking on Insert.

First I’m going to delete the right column with the right mouse button and then I’ll click on the Delete option.

Now I’m going to modify the individual post template and the reason I imported a template from an existing page is because then I can copy the styling.

In addition the width and padding etc. of the sections and columns are already set correctly so that saves time.

Post Title widget

I will now start adding a new widget and which is the Post Title.

Go to the overview with the widgets and search for the Post Title widget and drag it above the title on the canvas.

As you can see in the left menu there are now a number of other widgets available as we have enabled the Single Post option for this template. Therefore you can select widgets that are not available when you are creating an Page for example.

So the widgets you see here apply to blog posts the Post Title ensures that the title as it is entered in the WordPress dashboard is also displayed as you can see over here on the canvas.

You only have to set the styling of this title once and not over and over again for every new blog post you create.

Adjusting the styling can be done very easily by copying the layout of the heading widget. So I right click on the heading of the About Us page and then select Copy.

Now I go to the Post Title widget and click on it with the right mouse button and after that select the Paste Style option.

As you can see the same styling is now applied in just one click.

Because post titles are usually a bit longer, I want to make the size of the title on mobile a bit smaller.

So I do this right away and therefore I go to the Responsive mode by clicking the icon at the bottom with the two screens, and select the mobile view.

Click on the Post title widget and go the the Style tab, then click on the icon at the Typography option and set the Size to 35 PX.

Breadcrumbs widget

Now I switch back over to the desktop view.

Above the title I also want to add Breadcrumbs that allow visitors to easily navigate through the website. So I go back to the widget overview and search for Breadcrumbs.

By the way, this widget can be used because I have activated the Yoast plugin. As I mentioned in the tutorial about setting up Plugins you can use Yoast to optimize your website for search engines.

I will explain that in detail in other videos, but one of the helpful features that Yoast has to offer in combination with Elementor is this Breadcrumbs widget.

We are going to modify this widget first by going to the Style tab. Here at Typography I change the Font to Rubik and set the Weight to 300.

I adjust the Text Color to black and I do the same for the Link Color. Now I go to the hover color for the link and set it to gray. After that I go to the Advanced tab and here at Margin I only add 30 PX at the Bottom.

Now we are done with the Breadcrums settings.

One more thing I want to mention is that the Breadcrumbs now display home but after we are done in a few minutes with creating the first blogpost then the Post Title will also be displayed.

You can also set it up so the Category of the post is also shown in the Breadcrumbs. I’ll show you that at the end of this tutorial because therefore you have to change a setting for the Yoast plugin in the WordPress dashboard.

So now let’s go on and the next thing I want to do is remove the About Us title with the right mouse button and then I click on Delete. After that I also remove the Contact Us button.

Featured Image widget

I also want the Featured Image that I have set for a post in the WordPress dashboard to be displayed below the Post Title and therefore I’m going to use the Featured Image widget.

Therefore I go to the overview with all the widgets and I select the Featured Image and drag it below the title.

Now the image is shown and I think it’s still quite large so I resize it by going to the Style Tab and here I set the size to 85% with the slider.

In the Advanced tab I also set some extra space above the image because it is now very close to the title. I set the Top Margin to 20 PX and I do the same for the Bottom Margin.

Then I add 10 to all fields at Padding.

Now I go to the Style tab to add a shadow around the image at the Box Shadow options. Here I set 10 for Horizontal and also for Vertical and I set the Blur to 5.

I delete the text below the image by selecting it and click on Delete.

Post Content widget

I now choose the Post Content Widget and drag it onto the canvas.

This widget ensures that the text of the blog post is displayed, but because I haven’t placed any content at the individual blog post level, we do not see anything yet at this point.

But we need this widget to be able to create blog posts and I’ll show that in a moment.

Post Navigation widget

But first I want to add one more widget and that is the Post Navigation. Go to the overview with the widgets and drag the Post Navigation widget blow the Post Content widget because this widget should be at the very bottom of the page.

On the Content tab, I disable the Show Borders option so that the dash in the middle is hidden.

Now I go over to the Style tab.

Here I set the color at Label to black and then at Typography I select the Rubik font and set the Weigth to 600.

Now I go to the options for Title and here I set the color to gray and in Typography I adjust the font to Rubik with a Weight of 300.

I also set the Size to 13 to make it a larger.

I also want to add some extra space to the Top Margin by going to the Advanced tab and in the field Top Margin and I set it to 40 PX.

Save general blogpost template

Now I first save the settings by clicking on Publish and then on Add Condition, it now says All Singular and I change that to Posts. This means that the template is applied to all blog posts. Then I click on Save & Close.

Create first blogpost

Now I need to go back to the WordPress dashboard to the Posts overview.

Therefore I click on the icon above in the menu and then click on Exit To Dashboard. After that I click on the WordPress icon to go to the dashboard.

Then I go to All Posts and go to the blog post I want to design first and here I click on Edit.

When the page has loaded you need to click on Edit with Elementor.

Because I have just published the template for individual blogpost, you see that the changes are now also visible at the post level.

It’s important to know that you only have to set the dynamic parts such as the Post Title and Featured Image only once in the general blogpost template.

And adding the text, images and other widgets can be customized for every blog post at the blogpost level as im doing right now for the first post.

Text Editor widget

In a new empty section I drag a Text editor widget onto the canvas.

As an example I paste a dummy text in the text field.

After that I select the Heading 2 in the editor and I place the title Blog 1 heading 1 (H2) above the text.

For SEO it’s important that there is only one H1 title on the page and it must be at the top of the post or page and I have set it for the Post Title widget in the general blog template.

For the individual blogpost text you can use H2 titles and you can also place sub-titles with an H3 tag.

To give an example I will also create two titles with an H3 tag.

You can also set the font settings for text and titles as they are displayed in the Text Editor widget on a global level.

To set that up you need to go to the Site Settings option in the top left menu.

Now select the Typography option. Here you have the settings for the Body text and also for the titles based on the tags they have like H2, H3 etc.

We do not need to set the H1 title because we have already set it correctly on all pages.

So now I go to the H2 title and set the color to black. I set the font to Playfair Display and I also make it Bold. You will see that the changes are also immediately visible on the canvas.

You can also adjust the size if you want, but I will leave it as it is already set.

Now I go to the H3 title and here I also adjust the color to black and then I adjust the Weight to Bold.

I also do this for the H4 tag and I also change it to black with the font Playfair Display set to Bold.

Sometimes I also use the H4 titles if you have a lot of text in a post. Then it is better to read the information if it is clearly presented instead of reading one long text.

I leave the other titles as they are and now I go to the Body, the text is already black and now I want to change the Font to Rubik. Then I set the Weight to 300.

You can also set the Link color here for all links on your site that are in the Text editor widget.

Now I click on the blue Update button to save the changes. After that you can click on the cross in the blue bar to go back to the WordPress editor.

Now the texts have been adjusted and if we now add a new title or text in the Text Editor, it has the right styling applied to it.

Check out this tutorial to learn how to add a NoFollow attribute to a textlink in Elementor.

Table of Contents widget

There is also another helpful widget that I want to show you that you often find in blog posts and that is Table of Contents. And this is an overview of all the titles you have used in the post.

I’ll show it by going to the widgets overview and searching for the Table of Contents widget. I now drag this above the first heading.

You can see that the text is already in the correct font because it is an H4 heading with body text below it for the links and that is because we have just set this up in the Site Settings.

In the left menu in the Contents tab you can change the title Table of Contents to something else, but I’ll leave it like that.

In the Anchors By Tags field you can also indicate which titles should be displayed in the overview and I will also leave this at the default settings.

At Marker View I select the option Bullets and then I select the option to hide them, so now only the titles are visible.

Now I go to the Style tab and then to the List options, here I select Yes at the Underline option.

Now I go to the Advanced tab and set the Top and Bottom Margin to 10 PX to add a more space.

Especially if you have a lot of information on a page, the Table of Contents is very useful for visitors to navigate. You can set everything up however you want but I’ll leave it as it is now.

The next thing to do is check whether everything is also fully responsive by switching over to Responsive mode. Here I first take a look at the tablet view and it looks fine!

Now I move on to the mobile view and i want to make the size of the featured image on this view larger. So i click on the orange tab to go to the general blogpost template because there I have done the settings for this widget earlier.

Then I go to the mobile view and in the Style tab I go to the Width option and set it to 100% and save the changes.

After that I go back to the WordPress dashboard and select the individual post that I was designing.

Add images to your posts

Now go back to the desktop view again and I also want to briefly explain something about adding images.

You can do this in two ways, the first way is to add an image with the Text Editor Widget. You do that by selecting the Text Editor and then clicking on Add Media and then you can select an image or upload a new one.

Here you can then set the position to the center by clicking on it and then select the Center option.

You can also adjust the size by clicking on the image in the widget and clicking on the pencil icon. Here you can adjust the size to Large for example.

Furthermore, there are few things that you can customize in this way, but it’s very basic so this is more suitable if you want to add simple images to a blog.

I delete the image again and now I show you the second way which I always follow.

You can also use an Image widget by dragging it below the text as I showed before

Here I select the Image widget again and on the Content tab I first set the Image Size to Medium-Large.

Then I go to the Style tab and I make it a bit smaller by setting the width to 60%

Let’s see what that looks like on tablet and mobile in the Responsive mode.

On tablet I adjust the size to 80% so that the image is better visible.

Now I go to Mobile by clicking the icon in the gray bar and here I want to make the image larger and I set this to 100%

Now I go back to the Desktop view by clicking the icon in the gray bar.

You can also add a shadow at the Box Shadow options, which you just couldn’t do from the Text editor widget.

Over here I set this to 10 for Horizontal and Vertical and add 5 to Blur.

Now I go to the Advanced tab and there I set 10 PX at Top Margin and 20 PX at Bottom Margin to add a little more space above and below the image.

The reason I only do 10 PX at Top Margin instead of 20 PX is because there was already some more space added there by default.

So in this way, with the Elementor image widget you have much more options to customize the image compared to the Text editor widget image options.

Suppose you want the image somewhere in between the text then you can do that as follows.

You then just split the text into two Text editor widgets by duplicating it with the right mouse button.

Now drag the Image widget between the two text widgets.

That is now done and you can already see that everything is looking good as it is right now.

For example, you can also duplicate the Image by clicking on it and select Duplicate

After that I drag this below the second text widget and I change the image.

That looks good so let’s save this first by clicking on Update.

Button widget

I also want to add a button on this blog page where you can place an affiliate link or any other link of course.

It’s also useful to know that you can also copy the layout from a widget that you have opened in another tab of your browser.

To show what I mean, I now drag a button widget onto the canvas below the image.

In another tab I open the Elementor Editor for the homepage. So now I have the blog page in one browser tab and the homepage in another browser tab.

Now I go to a button of the homepage and I click on the right mouse button and select Copy.

Ater that I go to the button with the default settings and I right click on it and then I click on Paste Style.

Now the layout of the button is the same as that of the homepage. The next thing I do is adjust the text of the button to Buy Now.

I also want to add a shoppingcart icon by clicking again at Icon on the icon library. Then search for shop and select the icon and after that click on Insert.

I also want to add a some space at the top and bottom of the button. So I go to the Advanced tab and set the Top Margin to 40 PX.

Now I click on Update to save the changes.

For each blog post you can enter the affiliate links of the products or services you want to promote at Link and in this example I have one button placed on the canvas, but you can add as many buttons and links as you want to.

Now let’s see how it looks on tablet view. I open the Responsive mode with the icon at the bottom of the menu.

Then I go to the Tablet view and here everything looks fine and I don’t have to adjust anything.

If I now go to the Mobile view you can also see that it is completely fine!

Save section as a template

That’s all good and now we’re going to save this section (not the whole page) as a template to use for creating the other blog posts.

Now right-click on the section and select Save as Template.

Then enter a recognizable name such as Section for Single Posts and click on Save.

You can click on the cross to close the window.

Add Category link to Breadcrumbs

As mentioned earlier, I also want to set a link with the Category of a post in the Breadcrumbs. You can do this by going back to the WordPress dashboard by clicking on the icon with the 3 bars and then select Exit to Dashboard.

Now go to SEO in the left menu and choose the second option Search Appearance.

Here I go to the Breadcrumbs tab. About in the middle of the page you see “Taxonomy to show in breadcrumbs for content types” and I choose Category at the Posts option. Then I click on Save Changes to save the settings.

If I now go back to the overview with the blog posts by going to the Posts option in the left menu, you can view the changes. I click on Edit with Elementor for the post I have just created.

Now you see that a link category has also been added to the Breadcrumbs as we have set it for the post.

At the beginning there is also a link to the Home page so through the breadcrumbs visitors can easily navigate to different parts of your website and this will also contribute to SEO.

How to create new blogposts

Now I have finished the general blog template with the dynamic parts such as the Breadcrumbs, Post title, Post featured image and the Post navigation widgets.

After that I have also completed the first blog at the individual blogpost level with one section containing all important widgets such as text, images and buttons. And the section for single post template I have made of the first post allows me to create other blog posts very quickly and I will now show that by creating the second post.

Insert template

Go back to the dashboard by clicking the icon with the three lines and then click on Exit to Dashboard. After that click on the WordPress icon. Now you see the overview with the three blog posts that I have already created in the tutorial WordPress Pages and Posts settings.

Now I go to the second post and I click on Edit.

After that I click on the Edit with Elementor button.

Now wait for the page to load and after this is done I want to add the template that I have just created of the blog section.

To do this I go to the folder and then to My Templates and here I search for the template for the individual blogpost section and click on Insert.

Click Yes at the notification and we now see that the blog post has been added.

Customize template

For the sake of clarity I will summarize it one more time.

If you want to create a new blog post you just have to import the template from the section for the individual post and then you only have to adjust the text, images and links.

You basically don’t have to do anything with the styling because that’s already done.

The Table of Contents also doesn’t need to be adjusted, because it will be updated automatically when the titles are changed and you save the settings and refresh the page.

Of course you can also add new widgets to the post because everything you set up for an individual blog post is only visible for that specific post.

The Post Title that appears at the top of the post is the title as entered for the post in the WordPress dashboard and if you want to change this you can do that over there.

And in the WordPress dashboard I have also set the Post Featured image.

And over at the general blogpost template level you can customize the styling of dynamic parts which are the Post Title, Post featured image, Breadcrumbs and Post Navigation widgets.

All the settings in this template will be automatically applied to all the blogpost on your website.

Suppose I now want to make a new post then I only have to adjust the titles. For this example I change Blog 1 to Blog 2 because this is a dummy text.

You can adjust it by clicking on it or via the field in the left menu, which is actually what I always do.

Now the titles have been adjusted but you don’t see them in the Table of Contents yet. That’s because we haven’t saved the settings yet. Click on the green button at the bottom of the page to do so.

Now I refresh the page in the browser tab and then you will see that the Table of Contents has been updated.

I will leave the dummy text as it is and now I will change the images. I click on the first image and then I click on the image in the left menu to select a new one from the Media Library.

Now I go to the image below and there I repeat the same steps to replace the image.

You can adjust the link of the button by clicking on it and then going to the Link option on the Content tab.

Now that’s done and you can click on the green button at the bottom again to save everything.

Repeat steps

Now the second blog is ready and I will do the same for the third and last blog.

So I go back to the WordPress dashboard and then go to the overview with all blogs.

Now I go to the third blog and I click on Edit and when the page is loaded I click on Edit With Elementor.

I’m going to import the template again by clicking on the folder and going to My Templates. Over here I select the template with the section for the individual blogposts.

I adjust the headings again by going to the text field in the left menu and change it to Blog 3.

I will also replace the images in the same way as I have just showed you.

Now I save the settings again by clicking on the green button at the bottom of the page.

Now all the blogpost are done!

Another advantage of Elementor is that you can create all text in advance in a program such as Word.

There you can also add titles with an h2, h3 or h4 to your text and if you paste that into Elementor, it will also be copied that way.
So you can prepare all the text and all you have to do is paste it into the Text Editor widget.

Now we are all done with creating the blog posts and the settings for the general blog post template.

You can watch the video tutorial on YouTube over here.

If you have responsive issues with designing in Elementor for mobile or tablet view you should check out this tutorial. There I will explain how you can fix this very easily.

Don’t forget to like and subscribe to the YouTube channel. I would appreciate that very much!

If you’re a beginner you should check out the WordPress pages and posts settings tutorial to learn the basics.

Check out this tutorial to learn the Elementor basics in 7 minutes.

In this tutorial I have explained how you can hide the page title very easily with Elementor.

In other tutorials I have explained how to design:

Recommended software: