CMS Development

FionaW
Member

Adding an overlaid CTA Button to a website header image

SOLVE

I want to add a CTA button to a header image on the website. 

 

it is currently done on our home page so know its possible - but i dont know who did this. 

 

i want to add it to other landing pages - where there is a header image with some text already overlaid - i then want to add to that a CTA button underneath the text (still overlaid on the image).. 

 

 

 

0 Upvotes
1 Accepted solution
Stephanie-OG
Solution
Key Advisor

Adding an overlaid CTA Button to a website header image

SOLVE

Hi @FionaW 

 

It definitely is possible but the specifics of how to do it depend on your theme and how it was developed. To give you an exact answer I'd need to take a look.

 

You mention there's already a header image with text overlaid on the other pages. In this case, it's usually a Rich Text module and you can click into "Insert" at the top and add a call-to-action:

 

insert-cta.jpg

 

Otherwise, below are some suggestions that might work:

 

1. Drag and Drop - Reusing Sections

 

If you have a drag-and-drop type theme and it's a section on the homepage, then you should be able to hover over it, click on the arrow and save that section for other pages.

 

save-section.jpg

 

Then on the landing page click on the + sign that appears between sections, add it in and customize. Here's a video on saved sections that I haven't watched but Sprocket Talk are good and know their stuff so I trust it!

 

2. Create your own Section

 

Similarly, if you have drag-and-drop and can use sections, you can add in a section and click on it to update the background image. To do this:

 

  1. Drag a "Call-to-Action" module from the sidebar to a new section at the top of the page and choose your call-to-action (or you can use a "Rich Text" module and insert a call-to-action as mentioned above)
  2. Click into the section, you can edit the background to add an image. You can also increase the spacing (padding) above and below so that your banner is taller

You can find more on editing sections here.

 

3. Other Options

 

Custom Module: It's possible your developer created the hero as a custom module, in which case you should be able to use it again on a new page. 

 

Template: you can always use the same homepage template or clone the page for a new landing page and then edit the content, if the rest of the template works for you.


Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

View solution in original post

0 Upvotes
1 Reply 1
Stephanie-OG
Solution
Key Advisor

Adding an overlaid CTA Button to a website header image

SOLVE

Hi @FionaW 

 

It definitely is possible but the specifics of how to do it depend on your theme and how it was developed. To give you an exact answer I'd need to take a look.

 

You mention there's already a header image with text overlaid on the other pages. In this case, it's usually a Rich Text module and you can click into "Insert" at the top and add a call-to-action:

 

insert-cta.jpg

 

Otherwise, below are some suggestions that might work:

 

1. Drag and Drop - Reusing Sections

 

If you have a drag-and-drop type theme and it's a section on the homepage, then you should be able to hover over it, click on the arrow and save that section for other pages.

 

save-section.jpg

 

Then on the landing page click on the + sign that appears between sections, add it in and customize. Here's a video on saved sections that I haven't watched but Sprocket Talk are good and know their stuff so I trust it!

 

2. Create your own Section

 

Similarly, if you have drag-and-drop and can use sections, you can add in a section and click on it to update the background image. To do this:

 

  1. Drag a "Call-to-Action" module from the sidebar to a new section at the top of the page and choose your call-to-action (or you can use a "Rich Text" module and insert a call-to-action as mentioned above)
  2. Click into the section, you can edit the background to add an image. You can also increase the spacing (padding) above and below so that your banner is taller

You can find more on editing sections here.

 

3. Other Options

 

Custom Module: It's possible your developer created the hero as a custom module, in which case you should be able to use it again on a new page. 

 

Template: you can always use the same homepage template or clone the page for a new landing page and then edit the content, if the rest of the template works for you.


Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

0 Upvotes