This text explains the behind-the-scenes logic of Stripo modules. Why is CSS not added when saving modules? What advantages does this method carry to entrepreneurs?
When utilizing Stripo, you could discover that while you add your saved module to the template, the colours are completely different, and the font isn’t the identical because the one you saved. Why is that? How does it work? This text will reply your questions in addition to present you methods to save your module types if you would like them to stay unchanged when drag-‘n-dropping your modules.
How modules and CSS function
Let’s begin from the start and see how modules work in Stripo. We now have a lovely electronic mail ingredient with new costs, and it’s time to put it aside as a module. That is straightforward to do — we simply click on the “Save as Module” button.
We are able to already see that the header font within the module preview isn’t the identical as that in our electronic mail.
We added this module to a unique electronic mail, and now its look is totally completely different from its unique look. All of the fonts within the module are actually the identical as the primary font of the e-mail, and the background of the module has additionally been modified to match the colour of the template. Why does it work that method?
Why can we design our modules this manner?
These modifications to modules, when drag-‘n-dropping them to completely different templates, happen as a result of CSS types.
CSS types are available in two sorts:
- basic types are created and altered by Normal settings. These settings form the type of the modules within the colours chosen by the person after they drop the module into their template;
- inline types are CSS written contained in the HTML code. They’re saved with the module and will likely be like this when drag-‘n-dropped into any template. Normal types won’t have an effect on them. That is essential to create distinctive issues that may seem because the designer meant them, making your modules inflexible when it comes to how they give the impression of being.
Roman Burdyga,
Now, you perceive CSS types, however you should still have questions on why the module performance isn’t saving your whole types by default. Why didn’t we save the complete CSS without delay? The reply is sort of easy:
The entire method to how modules and CSS work was deliberate from the start. The unique concept of modules was that every module saved within the module library would apply the template types to which our person provides it. This is sensible from a design perspective as a result of if I create an electronic mail format, set its types, and finalize its total look, I anticipate the modules to even be in my types after I add them. Due to this fact, CSS types aren’t saved along with HTML modules.
Roman Burdyga,
In essence, by not storing the CSS within the module, we free you from the additional work of manually tweaking every module each time you add it to a different template. This protects time, making electronic mail creation sooner and extra handy — a big profit for any marketer. Speaking about advantages…
The advantages of not saving CSS
To make clear this matter utterly, let’s speak about all the advantages that our modules operation logic brings to electronic mail entrepreneurs.
Profit 1. Decoupling CSS from HTML for easy design management
First, the logic of modules is constructed across the marketer’s comfort. When HTML and CSS are saved individually, the marketer can simply replace the module design with out enhancing the primary HTML. Because of this, the configuration of modules and templates is easier and extra manageable, particularly when it’s essential to shortly change branding and tweak types with out having to undergo the complete technical a part of the e-mail.
Profit 2. Auto-adaptive modules for seamless template integration
The second pillar on which the logic of modules is predicated, and which we briefly talked about above, is comfort. Since any module can be utilized in numerous templates, it ought to be shortly adaptable to a brand new type. Nevertheless, what if the modules wanted to be edited manually for every template individually? In such a state of affairs, the entire level of modules — saving time and making the creation of templates straightforward — can be misplaced. Our modules mechanically adapt to the types of every template, which considerably saves time and makes the lives of entrepreneurs somewhat simpler.
The truth that basic CSS types aren’t saved with the module makes it doable to make use of modules universally, with none complications. Every module will match a selected electronic mail type and doesn’t have to be configured or reconfigured each time you utilize it. Nevertheless, when you nonetheless must tweak the looks of some components, you’ve the choice to take action.
Roman Burdyga,
As well as, this method offers the marketer the selection to have the template adapt to every electronic mail or make it unchangeable through the use of inline types — you are able to do what fits you greatest.
Profit 3. Code weight optimization
The third pillar, no much less necessary than the primary two pillars, stands on the technical facet of our topic — specifically, the load of the code. The heavier the e-mail code, the larger the possibility for electronic mail shoppers to clip the e-mail within the recipients’ inboxes. Nevertheless, when modules inherit CSS from the e-mail template as a substitute of together with it immediately in every module, the general dimension of the e-mail is decreased. The module comprises solely its HTML construction and inline types (when you add them), and the remainder of the CSS is utilized from the template. This makes the e-mail code lighter and ensures that the e-mail masses correctly.
Learn how to save your CSS types
Let’s repair the scenario and save your module types with inline types. The fundamentals are the identical — an electronic mail ingredient with new tattoo costs. Nevertheless, earlier than saving it to the module, we added inline types, as follows:
- by clicking on the title, we put in the font we would have liked, and it was written into the e-mail code;
- in the identical method, we modified the background colour, and the modifications appeared within the code.
We saved it as a module, so now it’s time to see the outcomes. We now have dropped our new module into the identical electronic mail close to the earlier one, and voilà! The font type and background colour stay the identical as we beforehand set them for the module.
We achieved what we wished — unchanged module types that we need to drop into different templates.
Wrapping up
We created modules to attain our foremost aim — to make the e-mail creation course of simpler and sooner. One of many instruments used to attain this aim is CSS logic below the hood. With out it, the entire level of modules disappears, creating extra steps when creating emails, comparable to tweaking the design of modules for every template. That’s why we give customers the selection to make use of the pre-built logic out-of-the-box or to reinforce the modules with easy-to-apply inline types, leaving the modules unchanged when working in any template.
