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

Play Video
THIS FEATURE IS PART OF :

Got A Question ?

We Are Here to Help

Composer Kit Module

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
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 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 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 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 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
Forms Extensions
NEW
Fluid Dynamic
NEW
Interactor
NEW
Forms Extensions
Woo Gloo
NEW
Fluid Dynamic
Forms Extensions
NEW
CRM and Marketing
NEW
Woo Gloo
UPDATED
Fluid Dynamic
Power Gloo
NEW
Buddypress \ BuddyBoss