To use this feature, open Local Styles options and find the option to add an extra Option. Here, you can add any CSS option and its value

But the real power is the Placeholder. Click on the Placeholder button, and you will see a list of all available placeholders. Let’s check an example.

You have ACF color field. And you want to assign it to the dynamic background of an element. Create next Option

Name as “background-color”

Value as {{META:color}}

where “color” is meta key where you store your color

That’s all.

Also, you can get not only server data but also other things. For example, you can use placeholder {{RANDOM:0-100}} to make a random number from 0 to 100.

Dynamic Indexer

There is another important dynamic CSS option called indexer. This is a crucial feature for any kind of sequential styling. For example, if you want to have circles, each next circle must be bigger than the previous one, so you will need to set sizes 100px, 200px, 300px, and 400px. But what if you decide to change sizing? Then, you need to change again in all elements.

But with an indexer, you just need to use a straightforward line of code.

So, Add an Element and then add many child elements. Enable Indexer in Extra panel.

This will add local style “–index” on each child element. And ‘–total-items’ on element itself. Now, we can use simple code like

{CURRENT} > *{width: calc(100px * var(--index)}

You can even improve it and combine it with the previous Extra option feature. So, the code will look like this: See, here I added an extra option—radius, and then I could use it in the code. Now, when I want to increase/decrease the size of circles, I just change the radius value here.

This is an example. I also made it without any code using interaction layers. As you see, you can dynamically change any value on the page with our Interaction Layer feature.