Composer Kit Module

Composer Kit Module has two features: Composer Widget & Composer Css Extension. 
More From This Segment

Discover what you can do with the Composer Kit Module.

Composer is comprised of two sections. The upper part has a repeater that allows you to get a Dynamic Tag value and name it. Since it is a repeater, there is no limitation to the amount of variables you can define and name.

The 2nd part at the bottom is a free text area that enables two functions:

  • Html – in this mode, you can take HTML markup and replace portions of it with your predefined repeater variables. So you can create HTML using data from your database. And use many Dynamic Tags in a single widget.
  • Calculations – this will make the text area control support arithmetical actions such as + – / * and so on. This means you can fetch two values from your database, do some math on them and print out the result. It will also allow you to decide which HTML tag should they have for SEO and structure compatibility.

Composer Dynamic CSS Extension.

Now we know what the Composer is. We added that feature on top of your normal Custom CSS. With our Global Dynamic Tag, you can get Elementor global colors and use them in your custom CSS. This is a very cool feature and it allows you to finally have your custom CSS using database values and other dynamic data.

You can use the variables not only as values of CSS but also in class names and other CSS targeting. With composer, you are not limited. Be careful, this feature is addictive

The Composer Kit Module in Gloo is a feature for Elementor that allows you to define and name Dynamic Tag values in a repeater, and use those values in a free text area for both HTML markup and calculations.
The Composer Kit Module enables you to create HTML using data from your database and use many Dynamic Tags in a single widget. It also supports arithmetical actions such as + – / * for calculations, and allows you to decide which HTML tag should be used for SEO and structure compatibility.
The Composer Kit Module can be used to create highly customizable website designs by using dynamic data from databases, global Elementor colors, and other dynamic data sources in HTML markup and custom CSS.
No, there is no limitation to the number of variables that can be defined and named in the Composer Kit Module’s repeater, allowing for unlimited flexibility in website design.
Play Video
THIS FEATURE IS PART OF :
Shadow

Got A Question ?
We Are Here to Help
Shadow
Gloo logo - white

Composer Kit Module

Fluid Dynamic By Gloo - title

We call this feature the “black-box” because its immensely powerful and agile. here are a 2 small examples of what it can do

Fetch multiple dynamic tags values - for example : current post id , related term brand color , related image and our global main color
post id : 570
Fluid Dynamic By Gloo - title
This is what we get when we just print our dynamic tags in the composer
570 #ff2861 #474646
Now lets use this HTML code and place it in the composer section of the composer widget
				
					<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="HTML5 Icon" style="width:128px;height:128px;" data-lazy-src="wrongname.gif"><noscript><img decoding="async" src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;"></noscript>

<svg height="300" width="300">
  <circle cx="80" cy="80" r="40" fill="red" />
  <circle cx="120" cy="80" r="40" fill="red" />
</svg>
				
			
Now lets use this HTML code and place it in the composer section of the composer widget
our image
Time to add our dynamic parameters in the composer
our post id is 570
Our code now looks like this : dynamically generated with dynamic tags
				
					<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="our post id is post_id" style="width:128px;height:128px;" data-lazy-src="related_image"><noscript><img decoding="async" src="related_image" alt="our post id is post_id" style="width:128px;height:128px;"></noscript>

<svg height="300" width="300">
  <circle cx="80" cy="80" r="40" fill="brand_color" />
  <circle cx="120" cy="80" r="40" fill="global_color" />
</svg>
				
			

More Extension Modules

Gloo Hero 7
Shadow
Fluid Dynamic
Power Gloo
New
Power Gloo
Forms Extensions
New
Forms Extensions
Forms Extensions
New
Woo Gloo
Forms Extensions
New
Fluid Dynamic