How to Create Custom Layout and Dynamic Content on Elementor | WpBuilt 1350206722971493323
How to Create Custom Layout and Dynamic Content on Elementor

How to Create Custom Layout and Dynamic Content on Elementor

Sick of the default look the posts have? No need to worry, with Elementor’s dynamic content and templates we can make your posts look more unique and suited to your preference! Follow the guide below to get started.

1. Go to Templates section in admin dashboard. We’ll have to set it to Single and post. I’ve named mine Custom Post Layout. This will allow us to create our custom layout for single posts without coding with the use of the dynamic content feature Elementor has to offer.

NOTE: that a pop up will open when you press create template that allows you to choose premade ones from the theme. In this case just close it. We’ll be doing our own 🙂

2. Okay let’s start designing! I’ve created a section with one column. This will serve as the header of the post. I’ve set it to stretch, so it would cover the whole width of the page.

Then I went to Style tab > background type classic > dynamic > Featured image. This will automatically set the featured image of the post as the header background.

I wanted to go with a parallax header image for posts so this are the image settings I went with.

After setting the background image, I’ve set an initial padding top and bottom to the section. Note that I went for percent; you can go for px or em if you prefer. This is just my personal preference.

3. Now let’s add the title of the post! You can add it by using the ‘Post Title’ module. This works like the title module so you can easily set the typography etc. to your desired design.

I made mine bold and went with open sans. It looks like this now.

Now we have a parallax header for posts! (The background and post title preview is grabbed from the latest post your site has.)

4. Our header is complete, now we need the actual content of the post. Let’s create another section below the header. Don’t forget to add some padding top and bottom! This time we’ll use the post content module.

Similar to the text module, you can set the typography etc. to your preference.

5. (Optional)

We can also add post navigation below our posts. Just create another section and use the ‘Post Navigation’ module. You can modify it to your preference, but for this example I chose not to add it. There are also a few other modules you can incorporate to your template design that is dynamic for single posts. You can experiment with the single modules and or other types of modules to get your desired layout.

Other modules can be used as well. Dynamic option is not limited to Single modules. For example the header module has dynamic options as do other modules. You can explore the settings by checking the dynamic options on the side.

6. Alright we’re done with the header and content! Now how do we set this for the single posts? Click publish and a popup condition will show.

Since we’ve already specified from the start that this is a template we’ll use for single posts, the options should be automatically set. If not, you can set it to this:

Press save and see how your single post layout changed!

 

Conclusion:

These are just the basics of how to make use of dynamic content plus templates in elementor. You’re free to explore and experiment with the templates and modules as you wish to create your desired layout for posts. I like how we’re given the option to make our posts unique without necessarily having to code. (We just need to build it via elementor builder. Yay!). Got questions? Comments? Leave it down in the comments below!

 

 

This Post Has 2 Comments

  1. Hey there! How does the dynamic featured image work? I created a template post for my website, I set a featured image within the template. When I go to set a different featured image in my post, it’s stuck on the featured image I set as my template. Any suggestions?

  2. ya thats amazing…. but it requires Elementor Pro 😒 …

    hope.. someday Elementor provide Theme building feature in FREE version…

Leave a Reply

×
×

Cart