Solution: Making a smart module completely invisible

[MyaRiley]

I’ve found a way to completely hide smart modules, without awkward spaces left behind.

You can use Design Manager to create a custom reusable email module that is invisible (including padding) unless you flip a toggle. The process:

1. Create the custom module using the settings and code below.
2. Add the module to your email. It will be invisible by default.
3. Make the module smart and add your segment rule.
4. Leave the toggle off for the default version.
5. Switch to the segment-specific version, turn the toggle on, and add your content.

Because the content and padding are wrapped inside the visibility condition, the default audience won’t see the module or any empty space where it would have appeared.

Creating the Module

1. Create a new email module (Design Manager > Create a new file > Module > Emails > Local module)
2. Add two fields (see screenshots):
   1. A Boolean field named show_module, with the toggle off by default.
   2. A rich-text field named block_content, with placeholder text as the default.
3. Paste this code into the coding space:

{% if module.show_module %}
<table role="presentation" 
width="100%"
cellpadding="0"
cellspacing="0"
border="0"
style="width: 100%; border-collapse: collapse;"> 
<tr> 
<td style="padding: 10px 20px;"> 
{{ module.block_content }}
 </td>
 </tr> 
</table>
 {% endif %}

4. Adjust the padding to your specifications; I typically use 10 on the top and bottom and 20 on either side so that’s what you see here. Look for this line in the code to adjust: <td style="padding: 10px 20px;">

You can also add other styling if you want (I used ChatGPT to write it for me), including background colors that won’t show up in the default! Just make sure it’s all inside the {% if module.show_module %} condition.

[chighsmith]

Hi @MyaRiley,

This is such a clever workaround! Thank you for taking the time to document it so thoroughly! The step-by-step breakdown and screenshots make it really easy to follow. The fact that it eliminates the empty space issue is a game-changer for anyone working with smart content in emails.

Happy HubSpotting!

Cassie, Community Manager

[MyaRiley]

Update: I played around with Design Manager and ChatGPT more and created a version of the disappearing block that allows for full design control from inside the marketing email drag-and-drop editor, including adding a button, instead of having to hard-code the design every time.

Making a Fully Customizable Disappearing Block w. Optional Button

Step 1: Build the Fields

You’re going to use two types of fields:

1. Fields:

1. A Boolean field named show_module, with the toggle off by default.
2. A rich-text field named block_content, with placeholder text as the default.
3. A Boolean field named show_button, with the toggle off by default.
4. *A text field named button_text, with placeholder text as the default.
5. *A link field named button_link.

2. Style Fields:

1. A color field named background_color.
2. A number field named corner_radius, with the suffix “px”, a minimum value of 0 and a maximum of 50.
3. A field group** named border_controls, with 1 field inside:
   1. A border field named border_field.
4. A field group** named padding_controls with 2 fields inside:
   1. A spacing field named external_padding. (This controls the padding outside of the smart block’s custom background color, if you use a color.)
   2. A spacing field named internal_padding. (This controls the padding inside the smart block’s custom background color.)
5. *A field group** named button_styling, with 4 fields and 2 field groups inside:
   1. A color field named button_background_color.
   2. A font field named button_text_style.
   3. A number field named button_corner_radius, with the suffix “px”, a minimum value of 0 and a maximum of 50.
   4. An alignment field named button_alignment.
   5. A field group** named button_border_controls, with 1 field inside:
      1. A border field named button_border.
   6. A field group** named button_padding_controls, with 2 fields inside:
      1. A spacing field named button_external_padding. (This controls the padding around the button.)
      2. A spacing field named button_internal_padding. (This controls the padding inside the button.)

* A single asterisk in front means I turned on that field/field group’s optional display condition so it only appears when the “show button” toggle is on. It makes the settings cleaner. See last screenshot below for those settings.

** Field groups make the settings cleaner & easier to work with. Each group will appear as an accordion block in the editor (see screenshots above). To make a field group, first make the field(s) that go inside it. Then click “Actions” at the top of the Style Fields section, and then choose “Group”. Select the field(s) you made and click “Create group”. Name the group and set any display conditions.

Step 2: Paste the Code

Paste the following code into the code space:

Note: ChatGPT said that margins render less effectively than padding, which is why there are fields for both internal and external padding. I couldn’t get rid of the margin option in the editor, but I updated the code to only read the padding instructions. If you want to use margins as well as padding, you should update the code.

{% if module.show_module %}

<table role="presentation"
       width="100%"
       cellpadding="0"
       cellspacing="0"
       border="0"
       style="width: 100%; border-collapse: collapse;">
  <tr>
    <td style="
      padding-top: {{ module.style.padding_controls.external_padding.padding.top.value }}{{ module.style.padding_controls.external_padding.padding.top.units }};
      padding-right: {{ module.style.padding_controls.external_padding.padding.right.value }}{{ module.style.padding_controls.external_padding.padding.right.units }};
      padding-bottom: {{ module.style.padding_controls.external_padding.padding.bottom.value }}{{ module.style.padding_controls.external_padding.padding.bottom.units }};
      padding-left: {{ module.style.padding_controls.external_padding.padding.left.value }}{{ module.style.padding_controls.external_padding.padding.left.units }};
    ">

      <table role="presentation"
             width="100%"
             cellpadding="0"
             cellspacing="0"
             border="0"
             style="
               width: 100%;
               border-collapse: separate;
               border-spacing: 0;
               border-radius: {{ module.style.corner_radius }}px;
               overflow: hidden;
             ">
        <tr>
          <td bgcolor="{{ module.style.background_color.color }}"
              style="
                padding-top: {{ module.style.padding_controls.internal_padding.padding.top.value }}{{ module.style.padding_controls.internal_padding.padding.top.units }};
                padding-right: {{ module.style.padding_controls.internal_padding.padding.right.value }}{{ module.style.padding_controls.internal_padding.padding.right.units }};
                padding-bottom: {{ module.style.padding_controls.internal_padding.padding.bottom.value }}{{ module.style.padding_controls.internal_padding.padding.bottom.units }};
                padding-left: {{ module.style.padding_controls.internal_padding.padding.left.value }}{{ module.style.padding_controls.internal_padding.padding.left.units }};
                {{ module.style.border_controls.border_field.css }}
                background-color: {{ module.style.background_color.color }};
                border-radius: {{ module.style.corner_radius }}px;
                overflow: hidden;
              ">

            {{ module.block_content }}

            {% if module.show_button %}

              {% set button_url = module.button_link.url.href %}

              {% if module.button_link.url.type == "EMAIL_ADDRESS" %}
                {% set button_url = "mailto:" ~ button_url %}
              {% endif %}

              <table role="presentation"
                     width="100%"
                     cellpadding="0"
                     cellspacing="0"
                     border="0"
                     style="width: 100%; border-collapse: collapse;">
                <tr>
                  <td align="{{ module.style.button_styling.button_alignment.horizontal_align|lower }}"
                      valign="{{ module.style.button_styling.button_alignment.vertical_align|lower }}"
                      style="
                        padding-top: {{ module.style.button_styling.button_padding_controls.button_external_padding.padding.top.value }}{{ module.style.button_styling.button_padding_controls.button_external_padding.padding.top.units }};
                        padding-right: {{ module.style.button_styling.button_padding_controls.button_external_padding.padding.right.value }}{{ module.style.button_styling.button_padding_controls.button_external_padding.padding.right.units }};
                        padding-bottom: {{ module.style.button_styling.button_padding_controls.button_external_padding.padding.bottom.value }}{{ module.style.button_styling.button_padding_controls.button_external_padding.padding.bottom.units }};
                        padding-left: {{ module.style.button_styling.button_padding_controls.button_external_padding.padding.left.value }}{{ module.style.button_styling.button_padding_controls.button_external_padding.padding.left.units }};
                        text-align: {{ module.style.button_styling.button_alignment.horizontal_align|lower }};
                        vertical-align: {{ module.style.button_styling.button_alignment.vertical_align|lower }};
                      ">

                    <table role="presentation"
                           cellpadding="0"
                           cellspacing="0"
                           border="0"
                           align="{{ module.style.button_styling.button_alignment.horizontal_align|lower }}"
                           style="
                             border-collapse: separate;
                             border-spacing: 0;
                             border-radius: {{ module.style.button_styling.button_corner_radius }}px;
                           ">
                      <tr>
                        <td align="center"
                            bgcolor="{{ module.style.button_styling.button_background_color.color }}"
                            style="
                            {{ module.style.button_styling.button_border_controls.button_border.css }}
                            background-color: {{ module.style.button_styling.button_background_color.color }};
                            border-radius: {{ module.style.button_styling.button_corner_radius }}px;
                           text-align: center;
                           overflow: hidden;
                         ">

                          <a href="{{ button_url }}"
                             style="
                               padding-top: {{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.top.value }}{{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.top.units }};
                               padding-right: {{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.right.value }}{{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.right.units }};
                               padding-bottom: {{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.bottom.value }}{{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.bottom.units }};
                               padding-left: {{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.left.value }}{{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.left.units }};
                               {{ module.style.button_styling.button_text_style.css }}
                               display: inline-block;
                               background-color: {{ module.style.button_styling.button_background_color.color }};
                               border-radius: {{ module.style.button_styling.button_corner_radius }}px;
                               line-height: 1.2;
                               text-decoration: none;
                               text-align: center;
                             "
                             {% if module.button_link.open_in_new_tab %}
                               target="_blank"
                             {% endif %}
                             {% if module.button_link.rel %}
                               rel="{{ module.button_link.rel }}"
                             {% endif %}>
                            {{ module.button_text }}
                          </a>

                        </td>
                      </tr>
                    </table>

                  </td>
                </tr>
              </table>

            {% endif %}

          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

{% endif %}

[MyaRiley]

Another update! I’ve made the disappearing smart block work with images as well as buttons. Now, you can have any combination of image, rich text, and button in your disappearing module.

I’ve also discovered that you can use smart modules to make a multi-column section disappear, as long as you have no padding in the section itself and all of the modules have the same smart rule.

How to do it:

To your fields, you’re going to add:

1. A Boolean field named show_text, with the toggle off by default.

2. A Boolean field named show_image, with the toggle off by default.

3. *An image field named block_image

4. *A link field named image_link

5. A choice field named content_orderwith the following options:

   Display label	Internal value
   Image → Text → Button	image_text_button
   Image → Button → Text	image_button_text
   Text → Image → Button	text_image_button
   Text → Button → Image	text_button_image
   Button → Image → Text	button_image_text
   Button → Text → Image	button_text_image

To your style fields, you’re going to add:

1. A field group named image_styling containing:
   1. A number field named image_corner_radius, withthe same settings as the other radius fields.
   2. A field group named image_padding_controls containing:
      1. A spacing field named image_spacing

Here’s the updated code:

(The code ensures that if neither the text, button, or image is turned on, the module will be invisible, regardless of the “show module” toggle’s position. This prevents an empty rectangle from appearing.)

{# ---------------------------------------------------------
   Determine which content elements actually contain output
---------------------------------------------------------- #}

{% set has_image =
  module.show_image
  and module.block_image.src
%}

{% set has_text =
  module.show_text
  and module.block_content
%}

{% set has_button =
  module.show_button
  and module.button_text
%}


{# ---------------------------------------------------------
   Image
---------------------------------------------------------- #}

{% macro render_block_image() %}

  {% if has_image %}

    {% set image_url = module.image_link.url.href %}

    {% if module.image_link.url.type == "EMAIL_ADDRESS" %}
      {% set image_url = "mailto:" ~ image_url %}
    {% endif %}

    <table role="presentation"
           width="100%"
           cellpadding="0"
           cellspacing="0"
           border="0"
           style="
             width: 100%;
             border-collapse: collapse;
           ">
      <tr>
        <td style="
          padding-top: {{ module.style.image_styling.image_padding_controls.image_spacing.padding.top.value }}{{ module.style.image_styling.image_padding_controls.image_spacing.padding.top.units }};
          padding-right: {{ module.style.image_styling.image_padding_controls.image_spacing.padding.right.value }}{{ module.style.image_styling.image_padding_controls.image_spacing.padding.right.units }};
          padding-bottom: {{ module.style.image_styling.image_padding_controls.image_spacing.padding.bottom.value }}{{ module.style.image_styling.image_padding_controls.image_spacing.padding.bottom.units }};
          padding-left: {{ module.style.image_styling.image_padding_controls.image_spacing.padding.left.value }}{{ module.style.image_styling.image_padding_controls.image_spacing.padding.left.units }};
        ">

          {% if image_url %}
            <a href="{{ image_url }}"
               style="
                 display: block;
                 text-decoration: none;
                 border: 0;
               "
               {% if module.image_link.open_in_new_tab %}
                 target="_blank"
               {% endif %}
               {% if module.image_link.rel %}
                 rel="{{ module.image_link.rel }}"
               {% endif %}>
          {% endif %}

            <img src="{{ module.block_image.src }}"
                 alt="{{ module.block_image.alt|escape_attr }}"
                 width="{{ module.block_image.width }}"
                 style="
                   display: block;
                   width: 100%;
                   max-width: 100%;
                   height: auto;
                   border: 0;
                   border-radius: {{ module.style.image_styling.image_corner_radius }}px;
                 ">

          {% if image_url %}
            </a>
          {% endif %}

        </td>
      </tr>
    </table>

  {% endif %}

{% endmacro %}


{# ---------------------------------------------------------
   Rich text
---------------------------------------------------------- #}

{% macro render_block_text() %}

  {% if has_text %}
    {{ module.block_content }}
  {% endif %}

{% endmacro %}


{# ---------------------------------------------------------
   Button
---------------------------------------------------------- #}

{% macro render_block_button() %}

  {% if has_button %}

    {% set button_url = module.button_link.url.href %}

    {% if module.button_link.url.type == "EMAIL_ADDRESS" %}
      {% set button_url = "mailto:" ~ button_url %}
    {% endif %}

    <table role="presentation"
           width="100%"
           cellpadding="0"
           cellspacing="0"
           border="0"
           style="
             width: 100%;
             border-collapse: collapse;
           ">
      <tr>
        <td align="{{ module.style.button_styling.button_alignment.horizontal_align|lower }}"
            valign="{{ module.style.button_styling.button_alignment.vertical_align|lower }}"
            style="
              padding-top: {{ module.style.button_styling.button_padding_controls.button_external_padding.padding.top.value }}{{ module.style.button_styling.button_padding_controls.button_external_padding.padding.top.units }};
              padding-right: {{ module.style.button_styling.button_padding_controls.button_external_padding.padding.right.value }}{{ module.style.button_styling.button_padding_controls.button_external_padding.padding.right.units }};
              padding-bottom: {{ module.style.button_styling.button_padding_controls.button_external_padding.padding.bottom.value }}{{ module.style.button_styling.button_padding_controls.button_external_padding.padding.bottom.units }};
              padding-left: {{ module.style.button_styling.button_padding_controls.button_external_padding.padding.left.value }}{{ module.style.button_styling.button_padding_controls.button_external_padding.padding.left.units }};
              text-align: {{ module.style.button_styling.button_alignment.horizontal_align|lower }};
              vertical-align: {{ module.style.button_styling.button_alignment.vertical_align|lower }};
            ">

          <table role="presentation"
                 cellpadding="0"
                 cellspacing="0"
                 border="0"
                 align="{{ module.style.button_styling.button_alignment.horizontal_align|lower }}"
                 style="
                   border-collapse: separate;
                   border-spacing: 0;
                   border-radius: {{ module.style.button_styling.button_corner_radius }}px;
                 ">
            <tr>
              <td align="center"
                  bgcolor="{{ module.style.button_styling.button_background_color.color }}"
                  style="
                    {{ module.style.button_styling.button_border_controls.button_border.css }}
                    background-color: {{ module.style.button_styling.button_background_color.color }};
                    border-radius: {{ module.style.button_styling.button_corner_radius }}px;
                    text-align: center;
                    overflow: hidden;
                  ">

                <a href="{{ button_url }}"
                   style="
                     padding-top: {{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.top.value }}{{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.top.units }};
                     padding-right: {{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.right.value }}{{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.right.units }};
                     padding-bottom: {{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.bottom.value }}{{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.bottom.units }};
                     padding-left: {{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.left.value }}{{ module.style.button_styling.button_padding_controls.button_internal_padding.padding.left.units }};
                     {{ module.style.button_styling.button_text_style.css }}
                     display: inline-block;
                     background-color: {{ module.style.button_styling.button_background_color.color }};
                     border-radius: {{ module.style.button_styling.button_corner_radius }}px;
                     line-height: 1.2;
                     text-decoration: none;
                     text-align: center;
                   "
                   {% if module.button_link.open_in_new_tab %}
                     target="_blank"
                   {% endif %}
                   {% if module.button_link.rel %}
                     rel="{{ module.button_link.rel }}"
                   {% endif %}>
                  {{ module.button_text }}
                </a>

              </td>
            </tr>
          </table>

        </td>
      </tr>
    </table>

  {% endif %}

{% endmacro %}


{# ---------------------------------------------------------
   Module container
---------------------------------------------------------- #}

{% if module.show_module and (has_image or has_text or has_button) %}

  <table role="presentation"
         width="100%"
         cellpadding="0"
         cellspacing="0"
         border="0"
         style="
           width: 100%;
           border-collapse: collapse;
         ">
    <tr>
      <td style="
        padding-top: {{ module.style.padding_controls.external_padding.padding.top.value }}{{ module.style.padding_controls.external_padding.padding.top.units }};
        padding-right: {{ module.style.padding_controls.external_padding.padding.right.value }}{{ module.style.padding_controls.external_padding.padding.right.units }};
        padding-bottom: {{ module.style.padding_controls.external_padding.padding.bottom.value }}{{ module.style.padding_controls.external_padding.padding.bottom.units }};
        padding-left: {{ module.style.padding_controls.external_padding.padding.left.value }}{{ module.style.padding_controls.external_padding.padding.left.units }};
      ">

        <table role="presentation"
               width="100%"
               cellpadding="0"
               cellspacing="0"
               border="0"
               style="
                 width: 100%;
                 border-collapse: separate;
                 border-spacing: 0;
                 border-radius: {{ module.style.corner_radius }}px;
               ">
          <tr>
            <td bgcolor="{{ module.style.background_color.color }}"
                style="
                  padding-top: {{ module.style.padding_controls.internal_padding.padding.top.value }}{{ module.style.padding_controls.internal_padding.padding.top.units }};
                  padding-right: {{ module.style.padding_controls.internal_padding.padding.right.value }}{{ module.style.padding_controls.internal_padding.padding.right.units }};
                  padding-bottom: {{ module.style.padding_controls.internal_padding.padding.bottom.value }}{{ module.style.padding_controls.internal_padding.padding.bottom.units }};
                  padding-left: {{ module.style.padding_controls.internal_padding.padding.left.value }}{{ module.style.padding_controls.internal_padding.padding.left.units }};
                  {{ module.style.border_controls.border_field.css }}
                  background-color: {{ module.style.background_color.color }};
                  border-radius: {{ module.style.corner_radius }}px;
                  overflow: hidden;
                ">

              {# Image → Text → Button #}
              {% if module.content_order == "image_text_button" %}

                {{ render_block_image() }}
                {{ render_block_text() }}
                {{ render_block_button() }}

              {# Image → Button → Text #}
              {% elif module.content_order == "image_button_text" %}

                {{ render_block_image() }}
                {{ render_block_button() }}
                {{ render_block_text() }}

              {# Text → Image → Button #}
              {% elif module.content_order == "text_image_button" %}

                {{ render_block_text() }}
                {{ render_block_image() }}
                {{ render_block_button() }}

              {# Text → Button → Image #}
              {% elif module.content_order == "text_button_image" %}

                {{ render_block_text() }}
                {{ render_block_button() }}
                {{ render_block_image() }}

              {# Button → Image → Text #}
              {% elif module.content_order == "button_image_text" %}

                {{ render_block_button() }}
                {{ render_block_image() }}
                {{ render_block_text() }}

              {# Button → Text → Image #}
              {% elif module.content_order == "button_text_image" %}

                {{ render_block_button() }}
                {{ render_block_text() }}
                {{ render_block_image() }}

              {# Safe fallback if Content Order has no value #}
              {% else %}

                {{ render_block_image() }}
                {{ render_block_text() }}
                {{ render_block_button() }}

              {% endif %}

            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>

{% endif %}