CMS Development

LoicM
Colaborador

Landing Page (Ridge Template): add a button below text while including a form in Hero section

resolver

Hello All,

 

I am contatcing you because I am struggling on one aspect of Landing Page template editing.

I am using Ridge template (Hero background with form, below) but I would like to add another CTA below the introduction text as per screen shot attached (below with red circle).

> The thing is that I can indeed add a CTA but not right belos the intoduction text while editing the template, because the Hero background goes as a whole that I can't edit.

template to achieve.png  Ridge landing page.png

 

Thanks a lot and best regards,

0 Me gusta
1 Soluciones aceptada
Anton
Solución
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

Landing Page (Ridge Template): add a button below text while including a form in Hero section

resolver

Hi @LoicM,

you'll need to modify the Module "Ridge - Page Hero with Form" which can be found in Ridge_Campaign_Pack/Custom_Modules.

 

I suggest to clone the original one so you can always have the original one. 
To clone a module simply right click on it and select "duplicate module". Rename it as you like "custom_form_hero" or so. 

After you've cloned it it should be open - if not, open it. 

 

You'll see a lot of functions in the right sidebar like "Background image", Heading...

You can add many different functions to the module by selecting "add function" above those existing functions. 

Select "CTA" and give it a name(if you want). 

It will be at the very bottom in the right sidebar. You can drag&drop it to the position you want. I suggest to place it between "Sub Heading" and "Banner Form". 

 

Since you've created the new function it has to be placed in the HTML+Hubl section so it will be visibile to your visitors. To do so hover on the created CTA function and click on "options". Select "copy Snippet". 

Create a new line after line 4 and write this code:

<div class="custom-cta-area">PASTE YOUR COPIED SNIPPET HERE</div>

After that paste you copied CTA snippet in the area. 

You can call the class as you want. (It's only needed if you want to have the ability to style/position it via CSS).

 

The new version of the module should look like this: 

Bildschirmfoto 2020-08-29 um 12.51.31.png

 

best, 

Anton

Anton Bujanowski Signature

Ver la solución en mensaje original publicado

6 Respuestas 6
jonchim
Guía | Partner nivel Diamond
Guía | Partner nivel Diamond

Landing Page (Ridge Template): add a button below text while including a form in Hero section

resolver

Hey @LoicM 
Do you have a preview link to the page I can take a look at?






Jon Chim
VP of Design & Development
Hypha HubSpot Development


check Did my post help answer your query? Help the Community by marking it as a solution
0 Me gusta
LoicM
Colaborador

Landing Page (Ridge Template): add a button below text while including a form in Hero section

resolver

Hello Jonchim,

 

Thank you for your message, unfortunately I can't share the link because it's for a client and confidential on ongoing launch.

 

Thank you anyway.

Best regards, 

0 Me gusta
Anton
Solución
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

Landing Page (Ridge Template): add a button below text while including a form in Hero section

resolver

Hi @LoicM,

you'll need to modify the Module "Ridge - Page Hero with Form" which can be found in Ridge_Campaign_Pack/Custom_Modules.

 

I suggest to clone the original one so you can always have the original one. 
To clone a module simply right click on it and select "duplicate module". Rename it as you like "custom_form_hero" or so. 

After you've cloned it it should be open - if not, open it. 

 

You'll see a lot of functions in the right sidebar like "Background image", Heading...

You can add many different functions to the module by selecting "add function" above those existing functions. 

Select "CTA" and give it a name(if you want). 

It will be at the very bottom in the right sidebar. You can drag&drop it to the position you want. I suggest to place it between "Sub Heading" and "Banner Form". 

 

Since you've created the new function it has to be placed in the HTML+Hubl section so it will be visibile to your visitors. To do so hover on the created CTA function and click on "options". Select "copy Snippet". 

Create a new line after line 4 and write this code:

<div class="custom-cta-area">PASTE YOUR COPIED SNIPPET HERE</div>

After that paste you copied CTA snippet in the area. 

You can call the class as you want. (It's only needed if you want to have the ability to style/position it via CSS).

 

The new version of the module should look like this: 

Bildschirmfoto 2020-08-29 um 12.51.31.png

 

best, 

Anton

Anton Bujanowski Signature
LoicM
Colaborador

Landing Page (Ridge Template): add a button below text while including a form in Hero section

resolver

Hello Anton, 

 

Thank you very much for your help and support !

Best regards,

natsumimori
Administrador de la comunidad
Administrador de la comunidad

Landing Page (Ridge Template): add a button below text while including a form in Hero section

resolver

Thank you @jonchim !!

0 Me gusta
natsumimori
Administrador de la comunidad
Administrador de la comunidad

Landing Page (Ridge Template): add a button below text while including a form in Hero section

resolver

Hi @LoicM ,

 

I will tag in some subject matter exterts here to see if they can give you advice: @Stephanie-OG and @alyssamwilie , could you share your advice for @LoicM ?

 

Meanwhile, I'd also recommend you to reach out to the Technical Support since it might be difficult for the Community members to suggest a solution for you without actually looking at the template.

0 Me gusta