Composer Kit Module

Composer Kit Module has two features: Composer Widget & Composer Css Extension. 

watch the Composer Kit Module tutorial

Play Video

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

Frequently Asked Questions

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.

THIS FEATURE IS PART OF :
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 0 #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=&#039;http://www.w3.org/2000/svg&#039;%20width=&#039;0&#039;%20height=&#039;0&#039;%20viewBox=&#039;0%200%200%200&#039;%3E%3C/svg%3E" alt="HTML5 Icon" style="width:128px;height:128px;" class="perfmatters-lazy" data-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=&#039;http://www.w3.org/2000/svg&#039;%20width=&#039;0&#039;%20height=&#039;0&#039;%20viewBox=&#039;0%200%200%200&#039;%3E%3C/svg%3E" alt="our post id is post_id" style="width:128px;height:128px;" class="perfmatters-lazy" data-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 Modules

GSAP Custom Tween New
Image Upload UI New
Typography +
GTM DataLayer Form Action
Custom Webhook Connector New
Time Span Form Field New
Woo Variation Table New
Frontend Post Editing New
OpenAI Form Action New
User Type Field
Custom DB Value Dynamic Tag New
Google Spreadsheet Tag
Device Widget New
Community Dynamic Tags New
Dynamic HTML Attrributes Repeater New
Select2 Fields
Related Products Dynamic Tag
BuddyBoss Dynamic Tag Kit
Checkbox & Radio Field Control
Globals Dynamic Tag