Custom <div> Height for Template w/ Module

rossatgrowth
Participant | Partner

Hello,

 

We're looking to create a module on this page (https://4079370.hubspotpreview-na1.com/_hcms/preview/template/multi?hs_preview_key=g8pRPTlbo0-af0xC5...) that would adjust the height of the hero.

 

The client is hoping to use these as templates for a number of landing pages. Can this be accomplished with a module or by any other means to enable their designer to adjust the height without any coding?

 

Thanks, everyone!

-Ross

0 Upvotes
5 Replies 5
mangelet
Contributor | Gold Partner

@rossatgrowth you link is not displaying but... yes that can be done, sure. And it's usually the case, when designing a module, you will create module properties for the designer / user to customize the end result.

Martin Angeletti
HubSpot CRM Specialist @ Andimol.com
ln: www.linkedin.com/in/mangelet
w: www.andimol.co
e: martin@andimol.com

Did I helped answer your question? Help the community liking and marking this post as a solution.

Learn HubSpot with me
rossatgrowth
Participant | Partner

@mangelet thanks for the reply, how can this be accomplished? Support wasn't able to address this question at all and suggested purchasing an additional tech service 😑.

 

Unsure of why it's not displaying, but essentially it's your run-of-the-mill hero currently hardcoded to 500px height in the stylesheet.

 

Set available size options to "show height and width only" (this is all I need) and removed the hardcoded CSS. However, when editing in the page editor based on this template, the sizing doesn't change with the values.

 

Screenshot 2021-04-22 154307.png

 

Thanks again,

Ross

0 Upvotes
mangelet
Contributor | Gold Partner

@rossatgrowth I recommend you create a "custom" module... a background image won't do it, you need a front image or a fixed height in the html that contains the background image...  yes?

Martin Angeletti
HubSpot CRM Specialist @ Andimol.com
ln: www.linkedin.com/in/mangelet
w: www.andimol.co
e: martin@andimol.com

Did I helped answer your question? Help the community liking and marking this post as a solution.

Learn HubSpot with me
rossatgrowth
Participant | Partner

@mangelet thanks for following up. As I was typing up my response I realized I was attaching those values to the background image rather than the <div> containing it 😔.

 

For anyone else that needs help with this, I added inline CSS to the <div> whose height should be adjusted, created a number module, and injected it into the div's inline CSS, i.e:

<div class="off-canvas-content" style="height: {{ module.hero_height }}px; background: url({{ module.background_image.src }});" >

 

Thanks, @mangelet for pointing me in the right direction!

 

Best,

Ross

webdew
Top Contributor | Diamond Partner

Hi @rossatgrowth ,

Created a loom video for you. Kindly implement the same.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

0 Upvotes