Custom Module for emails

[scalabria]

Hi guys! I am trying to create a custom module for an email template. The section has two columns and I need both columns to have different background colors. As far as I know, HS editor allows me to modify the entire section background-color, but not the one in each column.

Just trying to find out if there are some materials regarding this topic to help me get this done. The image below is what I currently have, and the other one is what I need.

I appreciate your comments on this.

[Gracjan]

Hi scalabria,

As you may have noticed, it's possible to change the background of the entire section in the email editor.

What you could do is create a completely new custom module with two color picker fields. Then, you can apply the background using inline style, for example: style="background-color: {{ module.bg_first_col.color }}".

Since you've already created the section in the email editor, I would suggest copying the entire HTML code of the section using the developer tool and pasting it into the new module. This way, you can save some time.

Hope this helps.

Regards,
Gracjan

[scalabria]

Hi Gracjan!

Thank you for your response. Yes! I did it already, somehow in any landing page that section works fine, however, in any of my emails, that section does not reflect the background color I set at the custom module.

Not sure why. Emaili template may have something set that override that code?

[Gracjan]

Hi @scalabria , 

would you share the module code so we can have a look into it?

I would also recommend you to create separate module for email only.

Regards,
Gracjan

[scalabria]

Hi @Gracjan !

Sure, below is the entire code. I added some images showing the preview from this code in HS and how it looks when I use it on the email section.

—

<div class="main-container row">
<div class="col-lg-6">
{% if module.image_left.src %}
{% set sizeAttrs = 'width="{{ module.image_left.width|escape_attr }}" height="{{ module.image_left.height|escape_attr }}"' %}
{% if module.image_left.size_type == 'auto' %}
{% set sizeAttrs = 'width="{{ module.image_left.width|escape_attr }}" height="{{ module.image_left.height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
{% elif module.image_left.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="{{ module.image_left.max_width|escape_attr }}" height="{{ module.image_left.max_height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
{% endif %}
{% set loadingAttr = module.image_left.loading != 'disabled' ? 'loading="{{ module.image_left.loading|escape_attr }}"' : '' %}
<img src="{{ module.image_left.src|escape_url }}" alt="{{ module.image_left.alt|escape_attr }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
</div>

<div class="col-lg-7">
{% if module.image_right.src %}
{% set sizeAttrs = 'width="{{ module.image_right.width|escape_attr }}" height="{{ module.image_right.height|escape_attr }}"' %}
{% if module.image_right.size_type == 'auto' %}
{% set sizeAttrs = 'width="{{ module.image_right.width|escape_attr }}" height="{{ module.image_right.height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
{% elif module.image_right.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="{{ module.image_right.max_width|escape_attr }}" height="{{ module.image_right.max_height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
{% endif %}
{% set loadingAttr = module.image_right.loading != 'disabled' ? 'loading="{{ module.image_right.loading|escape_attr }}"' : '' %}
<img src="{{ module.image_right.src|escape_url }}" alt="{{ module.image_right.alt|escape_attr }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
</div>

</div>

{% require_css %}
<style>
{% scope_css %}
.main-container {
width: 100%;
display: flex;
background-color: transparent!important;
}

.col-lg-7 {
width: 100%;
display: flex;
background-color: {{ module.bg_color_right.color }};
}

{% end_scope_css %}
</style>
{% end_require_css %}

—

In the 1st screenshot you´ll see the second column with a different color.

In the second one, how it looks when I try to use it.

[Gracjan · Accepted solution]

Hi @scalabria ,

Thank you for sharing your custom code.

Unfortunately, you cannot reuse this module in email templates as is. I assume you are also using Bootstrap or another framework for the grid system. While this may function properly in your theme and on your CMS pages, it won't translate well to email templates.

Email templates have significant limitations when it comes to styling. Drag-and-drop email modules do not support 'require_css' or external CSS (and JavaScript) files. Instead, you must utilize inline styles (e.g., 'style=""').

Additionally, in email templates, it's advisable to use tables to position items next to each other, similar to using 'col' classes.

I suggest rebuilding this section in the drag-and-drop email editor and then inspecting the code using development tools to copy it into your new module. You should also create this module for emails only. 

Regards, Gracjan

[scalabria]

Thank you @Gracjan!

I will do as you advice. I appreciate your time helping me through.

Cheers.

Seb