Dynamic Styles - Greenshift

Blog Staff

February 13, 2025

Greenshift is page builder that can have not only dynamic output but also dynamic styles. Let’s dive in

Dynamic styles only work in GreenLight Elements.

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.

Copy this post’s content

<!-- wp:paragraph -->
<p>Greenshift is page builder that can have not only dynamic output but also dynamic styles. Let's dive in</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-b97dbb5"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-b97dbb5" id="gspb_infoBox-id-gsbp-b97dbb5"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>Dynamic styles only work in <a href="https://greenshiftwp.com/element-tag-block/" data-type="post" data-id="4576">GreenLight Elements</a>. </p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:paragraph -->
<p>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</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5566,"width":"300px","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2025/02/image-591x1024.png" alt="" class="wp-image-5566" style="width:300px"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You have ACF color field. And you want to assign it to the dynamic background of an element. Create next Option</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Name as "background-color"</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Value as {{META:color}}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>where "color" is meta key where you store your color</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5567,"width":"300px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2025/02/image-1.png" alt="" class="wp-image-5567" style="width:300px"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>That's all. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="dynamic-indexer">Dynamic Indexer</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But with an indexer, you just need to use a straightforward line of code.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So, Add an Element and then add many child elements. Enable Indexer in Extra panel.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5568,"width":"300px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2025/02/image-2.png" alt="" class="wp-image-5568" style="width:300px"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>This will add local style "--index" on each child element. And '--total-items' on element itself. Now, we can use simple code like</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>{CURRENT} > *{width: calc(100px * var(--index)}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5571,"width":"300px","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2025/02/image-3-562x1024.png" alt="" class="wp-image-5571" style="width:300px"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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 <a href="https://greenshiftwp.com/documentation/greenshift-extra/interaction-panels/" data-type="documentation" data-id="3662">Interaction Layer</a> feature.</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-54476c4","type":"inner","localId":"gsbp-54476c4"} -->
<div><!-- wp:greenshift-blocks/element {"id":"gsbp-0719cec","interactionLayers":[{"actions":[{"actionname":"set-variable","attrValue":"{{VALUE}}px","attr":"\u002d\u002dradius","selector":".circledynamic"}],"env":"no-action","triggerData":{"trigger":"on-input"}}],"tag":"input","localId":"gsbp-0719cec","formAttributes":{"type":"range","min":"5","max":"100","step":"1"},"styleAttributes":{"width":["100%"]}} -->
<input data-gspbactions="[{"actions":[{"actionname":"set-variable","attrValue":"{{VALUE}}px","attr":"--radius","selector":".circledynamic"}],"env":"no-action","triggerData":{"trigger":"on-input"}}]" class="gsbp-0719cec" min="5" max="100" step="1" type="range"/>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-833d08d","interactionLayers":[],"type":"inner","className":"","localId":"gsbp-833d08d","styleAttributes":{"maxWidth":["100%"],"width":["var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002dglobal\u002d\u002dwide-size, 1200px)"]},"isVariation":"nocolumncontent","metadata":{"name":"Content Area"}} -->
<div class="gsbp-833d08d"><!-- wp:greenshift-blocks/element {"id":"gsbp-a413666","dynamicGClasses":[{"value":"circle-styles","type":"local","label":"circle-styles","localed":false,"css":"","attributes":{"styleAttributes":{}},"originalID":"gsbp-a413666","originalBlock":"greenshift-blocks/element","tag":"div","selectors":[{"value":" \u003e .circle-item:before","attributes":{"styleAttributes":{"backgroundColor":["#1ffff80a"]}},"css":".circle-styles \u003e .circle-item:before{background-color:#1ffff80a;}"}]}],"interactionLayers":[],"type":"inner","animation":{"duration":800,"easing":"ease","type":"zoom-in","onchild":true,"onsplit":false,"onscrub":false,"onchild_delay":true},"className":"circle-styles circledynamic","localId":"gsbp-a413666","align":"full","styleAttributes":{"cssVars_Extra":[{"name":"\u002d\u002dradius","value":"30px"},{"name":"\u002d\u002dimage-radius","value":"60px"}],"customCSS_Extra":"{CURRENT} \u003e .circle-item{\n\u002d\u002dcurrent-radius: calc(var(\u002d\u002dradius) * (var(\u002d\u002dindex)));\nwidth: calc(2 * var(\u002d\u002dcurrent-radius)); /* Diameter = 2 × radius */\nheight: calc(2 * var(\u002d\u002dcurrent-radius));\nposition:absolute;\n}\n{CURRENT} \u003e .circle-item:before{\n  content: \u0022\u0022;\n  border:1px solid #ccc;\n  position:absolute;\n  inset:0;\n  z-index: 0;\n  border-radius:100%;\n  opacity: calc(1 - (var(\u002d\u002dindex) / var(\u002d\u002dtotal-items)));\n}\n\n{CURRENT} .radial-item {\n    \u002d\u002dangle: calc(var(\u002d\u002dstart-angle, 0deg) + (360deg / var(\u002d\u002dtotal-items) * var(\u002d\u002dindex)));\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    z-index: 1;\n    transform: rotate(var(\u002d\u002dangle)) translate(var(\u002d\u002dcurrent-radius)) rotate(calc(-1 * var(\u002d\u002dangle))) translate(-50%, -50%);\n}\n{CURRENT} .radial-item img{\n  \u002d\u002dimage-size: calc(var(\u002d\u002drandom, 1) * var(\u002d\u002dimage-radius,80px));\n  width:var(\u002d\u002dimage-size);\n  height:var(\u002d\u002dimage-size);\n  min-width:var(\u002d\u002dimage-size);\n  min-height:var(\u002d\u002dimage-size);\n  object-fit: cover;\n  border-radius: 100px;\n}","display":["flex"],"flexDirection":["column"],"justifyContent":["center"],"alignItems":["center"],"pointerEvents":["none"],"position":["relative"],"zIndex":["0"],"minHeight":["700px"]},"dynamicIndexer":true,"metadata":{"name":"Circle Style"}} -->
<div data-aos="zoom-in" data-aos-easing="ease" data-aos-duration="800" class="circle-styles circledynamic gsbp-a413666 alignfull"><!-- wp:greenshift-blocks/element {"id":"gsbp-c1ef8d8","type":"no","className":"circle-item","localId":"gsbp-c1ef8d8"} -->
<div class="circle-item"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-a1b6bea","type":"no","className":"circle-item","localId":"gsbp-a1b6bea"} -->
<div class="circle-item"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-d48ec1b","type":"no","className":"circle-item","localId":"gsbp-d48ec1b"} -->
<div class="circle-item"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-6aa5ee0","type":"no","className":"circle-item","localId":"gsbp-6aa5ee0"} -->
<div class="circle-item"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-55a051f","type":"no","className":"circle-item","localId":"gsbp-55a051f"} -->
<div class="circle-item"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-51310d8","type":"no","className":"circle-item","localId":"gsbp-51310d8"} -->
<div class="circle-item"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-64259b8","type":"no","className":"circle-item","localId":"gsbp-64259b8"} -->
<div class="circle-item"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-ea49e4b","type":"no","className":"circle-item","localId":"gsbp-ea49e4b"} -->
<div class="circle-item"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-686874d","type":"no","className":"circle-item","localId":"gsbp-686874d"} -->
<div class="circle-item"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-df52083","type":"no","className":"circle-item","localId":"gsbp-df52083"} -->
<div class="circle-item"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-12d0675","type":"no","className":"circle-item","localId":"gsbp-12d0675"} -->
<div class="circle-item"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-7d4dfec","type":"no","className":"circle-item","localId":"gsbp-7d4dfec"} -->
<div class="circle-item"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-512b585","type":"inner","className":"","localId":"gsbp-512b585","styleAttributes":{"zIndex":["222"],"position":["relative"]}} -->
<div class="gsbp-512b585"><!-- wp:greenshift-blocks/element {"id":"gsbp-2c21899","type":"inner","className":"","localId":"gsbp-2c21899","styleAttributes":{"width":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dsize\u002d\u002dl, 74px)"],"height":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dsize\u002d\u002dl, 74px)"],"backgroundColor":["#ffffff"],"display":["flex"],"flexDirection":["column"],"justifyContent":["center"],"alignItems":["center"],"paddingLink_Extra":"all","paddingTop":["20px"],"paddingBottom":["20px"],"paddingLeft":["20px"],"paddingRight":["20px"],"borderRadiusLink_Extra":true,"borderBottomLeftRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dcircle, 50%)"],"borderBottomRightRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dcircle, 50%)"],"borderTopLeftRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dcircle, 50%)"],"borderTopRightRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dcircle, 50%)"],"borderRadiusCustom_Extra":false,"boxShadow":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dshadow\u002d\u002dhighlight, 0px 32px 48px 0px rgba(0, 0, 0, 0.15))"]}} -->
<div class="gsbp-2c21899"><!-- wp:greenshift-blocks/element {"id":"gsbp-84896f9","tag":"svg","type":"inner","icon":{"icon":{"font":"rhicon rhi-thumbs-up","svg":"","image":""},"type":"font"},"className":"icon-list-icon","localId":"gsbp-84896f9","styleAttributes":{"width":["100%"],"height":["100%"],"fill":["#1eb354"]}} -->
<svg viewBox="0 0 1024 1024" width="1024" height="1024" class="icon-list-icon gsbp-84896f9"><path d="M968.517 573.851c22.662-26.155 35.565-69.381 35.565-110.541 0-27.17-5.899-50.974-17.056-68.842-14.526-23.259-37.762-36.069-65.426-36.069h-134.053c72.966-132.683 91.408-232.587 54.766-297.302-25.534-45.096-72.366-61.098-104.714-61.098-12.811 0-23.65 9.469-25.368 22.165-9.147 67.554-60.811 148.131-141.742 221.074-77.518 69.869-172.765 125.768-270.642 159.208-12.317-26.010-38.811-44.046-69.448-44.046h-153.6c-42.347 0-76.8 34.453-76.8 76.8v460.8c0 42.347 34.453 76.8 76.8 76.8h153.6c32.437 0 60.222-20.226 71.459-48.718 100.421 12.57 138.195 32.754 174.794 52.314 45.802 24.482 89.062 47.605 230.547 47.605 36.854 0 71.587-9.624 97.8-27.101 25.61-17.074 41.968-41.006 47.4-68.755 20.414-8.283 38.544-27.426 52.454-55.893 13.53-27.688 22.272-63.077 22.272-90.166 0-5.069-0.296-9.726-0.89-14.014 12.944-9.528 24.56-24.243 34.152-43.592 13.837-27.912 22.099-62.866 22.099-93.494 0-21.694-4.027-39.802-11.968-53.822-0.645-1.128-1.312-2.234-2.003-3.31zM230.4 921.6h-153.6c-14.115 0-25.6-11.485-25.6-25.6v-460.8c0-14.115 11.485-25.6 25.6-25.6h153.6c14.115 0 25.6 11.485 25.6 25.6v460.738c0 0.022 0 0.043 0 0.066-0.002 14.114-11.486 25.597-25.6 25.597zM938.944 526.014c-7.739 15.546-15.57 21.186-18.944 21.186-14.139 0-25.6 11.461-25.6 25.6s11.461 25.6 25.6 25.6c2.149 0 3.699 0 5.971 4.008 3.378 5.965 5.315 16.382 5.315 28.582 0 22.77-6.427 49.883-16.771 70.754-10.131 20.437-20.451 27.856-24.915 27.856-14.139 0-25.6 11.461-25.6 25.6 0 9.067 4.715 17.034 11.827 21.582 1.581 16.206-5.976 59.629-25.627 87.947-7.438 10.722-15.238 16.87-21.4 16.87-14.139 0-25.6 11.461-25.6 25.6 0 45.072-49.765 65.6-96 65.6-128.659 0-164.691-19.259-206.413-41.56-38.992-20.84-82.864-44.29-193.587-58.085v-419.179c107.558-35.258 212.589-96.114 297.566-172.704 81.554-73.502 135.12-152.979 153.286-226.603 13.933 4.477 29.651 13.896 39.706 31.656 17.096 30.192 29.896 107.299-76.43 284.506-4.746 7.909-4.87 17.758-0.325 25.784s13.053 12.987 22.277 12.987h178.32c10.17 0 16.749 3.586 21.998 11.99 5.986 9.586 9.283 24.402 9.283 41.72 0 21.733-5.211 45.174-13.938 62.702z" /></svg>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

interactions