Unlike many traditional email builders, Stripo is an intuitive email template builder that allows users to create responsive, professional-looking emails without needing to write code. However, Stripo uses a unique approach when it comes to saving modules, which may differ from traditional methods. One key difference is that CSS styles are not automatically included in the HTML code after a module is saved.
For a detailed guide on what modules are and how to use them, please follow our separate article.
In this article, we’ll explain why this happens, how it works, and how you can save modules with CSS directly in the code.
How Stripo Modules Work?
Modules in Stripo are saved in HTML format, meaning CSS styles are not directly saved in the HTML. When you create and save a module (e.g., stripe/structure/container), only the HTML code is stored, and the styles are determined by the "General Settings" of the email template into which the module is inserted.
Adapting Styles Automatically:
When you drag and drop a saved module into another email template, it automatically adapts to the styles defined in that template. For instance, if the "General Settings" of the email template specifies that links should have a red color, those styles will be applied to the relevant elements in the module once inserted into the email template. This ensures that your modules effortlessly match the look and feel of any email template, without requiring manual adjustments to the styles.
For example:
Let’s take a module based on the Menu Block. In the screenshot below, you can see that the links are blue in the module:
When this module is added to a new email template with different "General Settings", the module will automatically inherit the new email template’s settings:
As shown in the second screenshot, the links in the module now adopt the new email template's color scheme, which specifies red for links.
Why is CSS not added to the code after saving?
This approach offers several advantages:
Separation of Structure and Styles: By storing HTML and CSS separately, users can easily update the design without editing the core HTML. This makes template customization more manageable, especially when you need to quickly update branding or styles.
Flexibility and Reusability: The same module can be used in multiple email templates, and it will automatically adapt to the styles of each email template. This helps save time since you don't need to manually modify the styles for each email template.
Optimized Code Weight: When modules inherit CSS from the email template instead of including it directly within each module, the overall email size is reduced. The module contains only its HTML structure and inline styles (if any), while the rest of the CSS is applied from the template. This makes the email lighter and faster to load while maintaining design consistency.
How to Save CSS in a Module?
To ensure that specific styles remain consistent across templates, you can use inline styles. Inline styles allow you to define properties directly within the HTML elements, which is particularly useful for preserving specific colors, padding, or font sizes.
Please be aware, Inline Styles in HTML are set up by using internal settings for each block or from the Ck-editor panel (for text block in old editor).
Example:
You might want a button in your module to always have a blue background and white text. You can achieve this by adding inline styles directly to the button block. For doing this, you need to highlight the button (click on it) and in the opened settings just set up the suitable styles as on the screenshot below:
In the screenshot above, you can see the button block with inline styles applied to ensure it has a blue background and white text.
How it works:
After saving the button block as a module, you can easily drop it into any email template. The inline styles will ensure that the button retains its blue background and white text, regardless of the email template’s "General Settings".
Result:
As shown in the screenshot below, the button retains its blue background and white text, regardless of the email template’s "General Settings".
By using inline styles, you ensure that the button’s design is preserved no matter where the module is used, offering both consistency and flexibility.
Conclusion:
Stripo’s approach to handling modules provides flexibility and efficiency, allowing users to maintain consistent branding across multiple email templates. By understanding how modules interact with general email template settings and knowing how to lock specific styles using inline methods, you can create adaptable yet consistent email designs. This ensures both creative freedom and adherence to brand guidelines while saving time and effort.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.