How to Create Dynamic Content and Custom Layout on Elementor - WpBuilt 1350476922971554523
How to Create Dynamic Content and Custom Layout on Elementor

How to Create Dynamic Content and Custom Layout on Elementor

Sick of the default look the posts have? No need to worry, what we can do is allow you to create dynamic content for Elementor so that your posts could look more unique, genuine and suited according to your preference! Follow the guide for creating dynamic content for Elementor below to get started!

Before anything else…

Perhaps you want to try a new Elementor addon specifically designed for Dynamic Content for Elementor? Introducing Dynamic.ooo! Notable features and addons of this new Elementor addon include:

  • Animated TextTRENDING – Allows you to create captivating animated text sequences. You can choose among 8 different types of incoming and outcoming animation and set parameters as speed, amount, delay, easing and equation.
  • WebGL Images Distortions Hover – The Images Distortion Hover widget allows you to add special roll-over effects based on webgl, threejs and transformation shaders.
  • Global Settings Smooth Transition – The Smooth Transition widget allows you to manage the animated transition between pages in a gentle way. Your creating a transition effect will improve the user experience.

Download Now

Now let’s begin this tutorial!

Step 1. Go to “Templates” section of your WordPress 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 🙂

Step 2. Okay! Let’s start designing! I’ve created a section with one column to create our dynamic content for Elementor. This will serve as the header of the post that we will make. 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 our dynamic Elementor posts so I proceeded to the image settings

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. Note that this is only for the sake of this dynamic content for elementor tutorial and just mainly according to my personal preferences.

Step 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 used open sans style. 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.)

Step 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 and create dynamic content for Elementor.

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

Step 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 content for elementor 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.

Step 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 for 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. Glenn

    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. Sachin Thakur

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

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

Leave a Reply

×

Cart