Move CTA Button

[ErinKas]

Hey Community! I need help...Again. Can you help me move the blue button on the banner image off of the title? Move it lower in the banner image? 

http://www.omniresources.com/-temporary-slug-5e1c1cb0-8f1a-4be9-9966-98b168c74dee?hs_preview=kxUkZVo...

Preview link. 

Thank you so so much!

[Stephanie-OG · Accepted solution]

Hi Erin, 

Using the module as you currently have it already has the problem of the title being cut off on mobile, which is why I would recommend changing it. This will also fix the CTA positioning. 

You can also use positioning with various media queries to try to position the CTA correctly, but it's a much more difficult approach. I don't believe there is a simple solution to position your CTA in the exact spot on the image across devices. 

However, the template can be changed so that your text looks exactly like in the module. This preview was done extremely quickly so it would need to be perfected (e.g. full width on mobile, fonts, the right colour...), but it has the same style and is responsive. This is the code used: 

  .background-image {
  	background: url(https://images.pexels.com/photos/461077/pexels-photo-461077.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center; 
    padding: 50px 0;
	}
  .text-background {
  	background-color: rgba(0, 153, 204, 0.4);
    width: 75% !important;
    padding: 20px;
  }
  .call-to-action {
  	text-align: center;
    padding: 20px;
  }

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[Stephanie-OG]

Hi Erin, 

The title is part of the image and the CTA is placed over the background image. You could push it down, for example, by adding padding to the top (click on the CTA module in the template and, in the "Inline Style" box, add padding-top: 200px; ).

However, it's not an idea solution: the padding required will depend on the screen size. For example, on mobile the title is cut off and the CTA appears over the icons with the above.

I would recommend instead having a background image with no text, and then adding the text to a Rich Text module. It's better for SEO, responsiveness... etc. In this post I put some details on how to do this. Some additional CSS would be needed to add the blue transparency, etc. 

I hope that helps!

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[ErinKas]

Thanks for the reply, however, that solution will not work. 😞 The CTA is part of the banner module. We can use text instead of the copy on the banner, but I do like the blue bar. We will have to keep exploring.

Thanks!

Erin

[Stephanie-OG · Accepted solution]

Hi Erin, 

Using the module as you currently have it already has the problem of the title being cut off on mobile, which is why I would recommend changing it. This will also fix the CTA positioning. 

You can also use positioning with various media queries to try to position the CTA correctly, but it's a much more difficult approach. I don't believe there is a simple solution to position your CTA in the exact spot on the image across devices. 

However, the template can be changed so that your text looks exactly like in the module. This preview was done extremely quickly so it would need to be perfected (e.g. full width on mobile, fonts, the right colour...), but it has the same style and is responsive. This is the code used: 

  .background-image {
  	background: url(https://images.pexels.com/photos/461077/pexels-photo-461077.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center; 
    padding: 50px 0;
	}
  .text-background {
  	background-color: rgba(0, 153, 204, 0.4);
    width: 75% !important;
    padding: 20px;
  }
  .call-to-action {
  	text-align: center;
    padding: 20px;
  }

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[ErinKas]

Hey @Stephanie-OG Where exactly do I put this code? 🙂 I tried the style sheet and it didnt do anything.....?

Thank you!

[Stephanie-OG · Accepted solution]

Hi Erin, 

You would need to change the template to use that code since it targets modules that I created. In this sample template, there is a group with the CSS class "background-image", a nested group with the CSS class "text-background" containing a Rich Text module and a call-to-action module below with the class "call-to-action":

For the purpose of the example, I added the code to the page's "Additional <head> markup" between <style></style> tags but a better practice would be to add it to your stylesheet. 

If you're going to try to change the template, I'd recommend cloning it. The above was also just a quick example to show that it can be done but the CSS should ideally be tweaked more to make it look better. 

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!