StuartRead.com

Dynamic Content in Elementor

With Toolset

Dynamic Sections in Elementor with Toolset.com

Intro

To create dynamic sections in Elementor you have to either use a plugin or some Toolset and Elementor magic.

This is a bit of a work around, but does give you a lot of flexibility if you are using the conditional logic that Tooslet provides.

Why do this?

Say you have a set of landing pages, on these landing pages you have a “social proof” section with logos – but they are from all over the world and this isn’t going to resonate to specific countries.

Now you can can easily build this logic to trigger changes for you PPC ad landing pages easily and fast.

How To do This

What you could do is setup a IP based, or URL parameter based content for these logos using Toolset and and IP detection plugin such as GeoIP Detection (which is awesome).

Now there are two ways to do this for creating logo/image sliders, the first is natively with Toolset by creating a view and displaying a list of logos, however if you wanted to design the section to be a little different its a bit harder without designers etc.

The I am going to do it is with Elementor Templates, Global Elements and Toolset.

Create Elementor Templates

First off create a new Elementor template that will house the country specific logos, make sure you name it with a country specific name and use a ‘section’.

Design the logos how you want them, I use the ‘Media Carousel” as it seem so do the job quickly and easily.  Upload the logos you want and save.

Repeat the steps and create a separate Elementor template for each of the country logos (or other asset) (** you can right click on the element and copy it, then past in to your new page to make it quicker, then change up the logos **).

Once you have created the Elementor templates you can now use them dynamically with Toolset.

Using Toolset conditionals

There are ton of resources about this on the Toolset.com website but here are a few to get you going, here and here

Create anew Elementor template, you wont be saving it so create a section template as before and name whatever you want.

Drag in a ‘Text Editor’ element and switch to ‘text’ mode:

Copy in the code below and l’ll explain what it does.

https://justpaste.it/7cs3p

{Added in the link above as the short-codes were being run on the page and no matter what I did, they still ran}

 

Once you have added the code to the text editor you’ll need to add your Elementor template short-codes for the logo sections created earlier… put these in the relevant places in the code.

The code looks for a URL parameter of ?utm_content=
If it finds UK it will execute the ‘uk’ template, if it finds ‘au’ it will run Australian logo template.
If it finds none it will run an IP lookup and apply based on that use case.

This is a simple example, and not exhaustive of all the variables – play with it.

Once you are done with this, right click the text element and save as “Global’. Now you can also save this as a template and work with it that way, so it depends on your workflow.

If you have a VPN you can test the location switch, and if you use the URL parameters you can see the difference as well as fall back when you have nothing.

Test here:

Elementor Templates inside Toolset templates.

So, there are few things I learnt throughout my testing/reading.

You cannot insert Elementor template short-codes inside a Toolset content template, then use the short-code for the Toolset content template in an Elementor page – Confused 🙂

Read official notes here at the bottom of the page.

Conclusion

You can do many things with the Toolset conditionals to suit your needs, have a play its fun.

Other Stuff

Google Hire No More!

Google Hire has announced it will be closing its doors on the 1st of September 2020, in what appears to be a

Can I build it?

Building Popular Websites Using Low Code So, I thought it would be fun to test my skills and try to build popular

Leave a Comment