CMS Development

rossatgrowth
Colaborador(a) | Parceiro Diamante
Colaborador(a) | Parceiro Diamante

Custom <div> Height for Template w/ Module

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 Avaliação positiva
5 Respostas 5
webdew
Orientador(a) | Parceiro Diamante
Orientador(a) | Parceiro Diamante

Custom <div> Height for Template w/ Module

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 Avaliação positiva
mangelet
Orientador(a) | Parceiro Platinum
Orientador(a) | Parceiro Platinum

Custom <div> Height for Template w/ Module

@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 Veteran (12+ years)

Worried about messing up your HubSpot? I've got your back.

Join the thousands of people who have discovered how to avoid problems with simple tricks and have started to dominate HubSpot (and not be dominated).

️ Don't get left behind.

→ Click the subscribe button and scroll down to find the opt-in box.

Subscribe

Did I help answer your question? Mark this as a solution.

rossatgrowth
Colaborador(a) | Parceiro Diamante
Colaborador(a) | Parceiro Diamante

Custom <div> Height for Template w/ Module

@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

mangelet
Orientador(a) | Parceiro Platinum
Orientador(a) | Parceiro Platinum

Custom <div> Height for Template w/ Module

@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 Veteran (12+ years)

Worried about messing up your HubSpot? I've got your back.

Join the thousands of people who have discovered how to avoid problems with simple tricks and have started to dominate HubSpot (and not be dominated).

️ Don't get left behind.

→ Click the subscribe button and scroll down to find the opt-in box.

Subscribe

Did I help answer your question? Mark this as a solution.

rossatgrowth
Colaborador(a) | Parceiro Diamante
Colaborador(a) | Parceiro Diamante

Custom <div> Height for Template w/ Module

@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 Avaliação positiva