Dynamic HTML Attrributes Repeater

With the dynamic attributes feature you now have the freedom to create as many attributes as you want and fetch dynamic content for those, and power your sliders with parallax effects.

watch the Dynamic HTML Attrributes Repeater tutorial

Play Video

Dynamic Attributes.

Adding attributes to our markup can be really handy. As it stands now, the Elementor Attributes Menu inside the Advanced tab doesn’t allow us to add multiple attribute keys. Our feature will add a repeater that will allow you to do two things: first, add as many attributes you desire, and second, fetch data dynamically, for keys or values of your attribute.

Use cases.

Attributes can be used for many things. For example; to target using CSS:

{background-color: red;}

Another popular use is to create analytics measurements in Google analytics according to an attribute.

Parallax attributes.

Working with Slider Power and want to get even more out of your slider? Parallax effects are where it’s at.

YouTube video

The parallax effect is a visual phenomenon where objects appear to shift their position relative to each other when viewed from different angles, which is usually replicated in web design or motion graphics by applying different amounts of scrolling effects to different elements, to instill a sense of depth and immersion in a digital interface.

Gloo’s Dynamic HTML Attributes Repeater makes accessing that design power extremely easy, it’s as simple as toggling on the Power Slider Parallax option inside your repeater item for the widget or element you want the effect to apply to, provided that the given element is inside a Power Slider slide container, as these effects will kick in as soon as we change the slides on our slider in the frontend once all is set up correctly.

Toggling this on, the UI will change to show Parallax Key options that we can select from a handy drop down menu. The available options are:

  • Data-swiper-parallax

General parallax effect key.

  • Data-swiper-parallax-x

Controls horizontal movement. Positive values for right, negative for left.

  • Data-swiper-parallax-y

Controls vertical movement. Positive values for downwards movement, negative for upwards.

  • Data-swiper-parallax-scale

Controls scaling of the element. Positive values for scaling up, negative for scaling down.

  • Data-swiper-parallax-opacity

Change the opacity from 0 to 1 during the parallax effect

  • Data-swiper-parallax-duration

This attribute adjusts the duration of the parallax effect in milliseconds.

All of the values for these attributes (except the duration) represent the end value of the related attribute at the end of the parallax effect, which duration is determined by the duration attribute.

Using the Dynamic HTML Attributes Repeater, we can add as many of these attributes to a single element as we want.

By using different values on other items in the same general composition (lower values for items that need to appear closer to the observer, usually) We can easily create captivating and mesmerizing parallax effects for our sliders, or even just simple one-attribute animations without needing to resort to Gloo’s GSAP Scrolltrigger.

Scope : Extension

Frequently Asked Questions

Enable the feature on your Gloo dashboard, and a repeater will be available in the Elementor attributes tab.
With Dynamic HTML Attributes, users can add multiple attribute keys and values to their markup, and fetch data dynamically. This can be useful for targeting elements using CSS or creating custom analytics measurements.
Yes, Dynamic Attributes can be used for a variety of purposes, depending on the needs of the user. Some examples include integrating with third-party services, creating custom meta tags, or improving accessibility by adding ARIA attributes.

Gloo logo - white

Dynamic HTML Attrributes Repeater

Fluid Dynamic By Gloo - title

Attributes are very useful. and in fact are built in to elementor. so what is the difference you ask ? our dynamic html attributes allow multiple and dynamic attributes to be shown.

First lets selct a simple title widget

Our Title !

Now lets add attributes to it - this is what we should get but its going to fetch the value dynamically

segment="fluid dynamic" and scope="extension"

we will use our "Taxonomy Terms" dynamic tag because it supports return of multiple values with the use of a empty space delimiter - which is the correct syntax for the HTML
You can also decide what kind of charachters will be used :

Our Title ! (before)

					<div class="elementor-element elementor-element-c95312e elementor-widget elementor-widget-heading" data-id="c95312e" data-element_type="widget" data-widget_type="heading.default">

Our Title ! (after)

					<div class="elementor-element elementor-element-c95312e elementor-widget elementor-widget-heading" data-id="c95312e" data-element_type="widget" segment="Fluid Dynamic" scope="Extension" data-widget_type="heading.default">

More Modules

Cookies Dynamic Tag New
BuddyBoss Friendship Status Dynamic Tag
Calculation Field New
GTM DataLayer Connector New
Query Control
GSAP Custom Tween New
Interactor Engine
JetEngine Dynamic Visibility: LearnDash Addon
ActiveTrail Form Submit Action New
GSAP Line Drawing
Dynamic Tag Everywhere
3D Model Widget
Fluid Logic New
Select2 Fields
Cart Values Dynamic Tag New
Woo Product Discount Widget
Autocomplete Address Fields
Custom Webhook Connector New
LearnDash Dynamic Tag Kit
GSAP Standard Event