Share Your Work

mrepede
メンバー

{% module %} template is being out of the <span />

解決

Hi

 

I am currently in the process of exporting a landing page template to HubL and have been utilizing the single line text module.

In this module, the code is enclosed within a <span> tag as follows:

 

<p><span>{% module "${key}",
path="@hubspot/text",
label="${label}",
value="${text}"
%}</span></p>


However, I am encountering a difficulty. Post-export, in the HubSpot Landing Page, the module input seems to be falling outside of the span, as demonstrated below:

 

<p><span> </span></p>
<div id="hs_cos_wrapper_3ff53984-8111-2fdf-b8a4-ac7de550b901" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module widget-type-text hs-baymax-editor" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module" data-hs-overrideable="true" data-test="selenium-widget-editor-ready"><div id="hs_cos_wrapper_3ff53984-8111-2fdf-b8a4-ac7de550b901_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="text">As an SEO specialist, you understand the challenges of making healthcare more accessible and profitable.</div></div>


Given that the module input is not enclosed within the span, the designated styles are not applying correctly, resulting in broken formatting.

I would appreciate any insights or advice on how to correctly place the module input within the <span> tag to prevent this issue.

 

Thanks!

0 いいね!
1件の承認済みベストアンサー
alyssamwilie
解決策
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

{% module %} template is being out of the <span />

解決

This is happening because paragraph tags cannot have block elements inside them (aka the <div>s). If you add no_wrapper=True to the module tag it should render without the divs.

 

{% module "${key}",
path="@hubspot/text",
label="${label}",
value="${text}",

no_wrapper=True
%}

 

Will note however that I believe the wrapper is how HubSpot makes the module clickable within the page editor so removing that means someone editing a page with this template would have to locate the module in the editor sidebar to edit it. So if you want it to be 'click to open' you'll have to instead not use a paragraph tag around the module.

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.

元の投稿で解決策を見る

5件の返信
alyssamwilie
解決策
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

{% module %} template is being out of the <span />

解決

This is happening because paragraph tags cannot have block elements inside them (aka the <div>s). If you add no_wrapper=True to the module tag it should render without the divs.

 

{% module "${key}",
path="@hubspot/text",
label="${label}",
value="${text}",

no_wrapper=True
%}

 

Will note however that I believe the wrapper is how HubSpot makes the module clickable within the page editor so removing that means someone editing a page with this template would have to locate the module in the editor sidebar to edit it. So if you want it to be 'click to open' you'll have to instead not use a paragraph tag around the module.

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
mrepede
メンバー

{% module %} template is being out of the <span />

解決

Thanks for your suggestion. I tried as you suggested.

 

{% module "${key}",
path="@hubspot/text",
label="${label}",
value="${text}",
no_wrapper=True
%}

 

<p><span class="tofu-element" data-tofu-id="3ff53984-8111-2fdf-b8a4-ac7de550b901">{% module "3ff53984-8111-2fdf-b8a4-ac7de550b901",
path="@hubspot/text",
label="The industry has struggled to make healt",
value="The industry has struggled to make healthcare more accessible, but [MyCompany] is here to help. Our services can unlock profitability in the telehealth industry.",
no_wrapper=True
%}</span></p>

But it's still falling outside of the span.

 

<p><span class="tofu-element" data-tofu-id="c39e413b-54ea-fa13-8504-79bf3469ecc9"></span></p>

<div id="hs_cos_wrapper_c39e413b-54ea-fa13-8504-79bf3469ecc9_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="text">Unlock the ROI in telehealth with our expert SEO services for companies struggling.</div>

 

Does it mean that we can't edit the copy in span, p tags?

 

Thanks!

0 いいね!
alyssamwilie
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

{% module %} template is being out of the <span />

解決

Hm, yea, looks like it only removes one of the divs. So you'll have to just not put the module in a paragraph tag. Once removeing the <p> the <span> should still work. It's only the <p> tag that explicility doesn't allow block elements in it.

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
0 いいね!
mrepede
メンバー

{% module %} template is being out of the <span />

解決

We're mostly trying to update copies on landing pages that are inside p or span tags. Could this be a limitation of HubSpot, do you think?

0 いいね!
Jaycee_Lewis
コミュニティーマネージャー
コミュニティーマネージャー

{% module %} template is being out of the <span />

解決

Hi, @mrepede 👋 Thanks for your question. Let's invite some of our community members to the conversation — hey @alyssamwilie @louischausse @carolgiacon @Anton, do you have any feedback for @mrepede? Have you been successful with doing this without creating a custom coded module? 

 

Thank you for taking a look! — Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 いいね!