Marketing Manager here with ZERO coding background, but responsible for making changes to our website functionality and design in HubSpot. My current delimma is how to create a CTA overlay on top of an existing image on our home page. HS built our site for us, designed all of our CSS files, templates, etc., so I’m clueless as to where to put additional code if that’s what’s needed (does it go in the reigning CSS file; in the page template; in the source code section of the page editor?), and what that code would actually look like. HELP?!
You might want to share a shareable link to the page. Your site could be built any number of ways so it’s hard to give you a solution that will work for you without know what your working with.
The page that I’m trying to add a CTA overlay to is https://www.pendella.com/. (I’m guessing you can inspect the existing code from there.) From your link, it looks like adding a rich text over it would be my best option, but definiely unsure as to how I do that and how to edit the code to reflect what I need to accomplish.
And yes, I believe we’re in the new design manager.
in your design manager use the search and you should find a module names something like “home-banner-group”. You can get the actual module name or access the module from the template to the page you shared.
If you open the module you will see that it is just a text editor. html, css, javascript, and hubl. You should see very little html and css, and no javascript. There is most likely just an image field in the right sidebar and you should see the HubL token for that, inline, set to the outer wrappers background.
What you are wanting to do should be pretty basic from here. Caution though, any changes you make will be applied to this module and all of it’s instances throughout your site. If you are going to add to it for a specific page type you should either clone it first or build in some booleans to wrap your additions in. If you need the addition in the editor you just check the boolean.
I’ve created “copy” versions of both my page template and the home-banner module to safegauard against messing up any other pages, so we’re good on that front.
As to the banner module, there is currently minimal HTML/HubL (as you said) and no CSS; however, there is a little bit of JS. The html is written as:
I attempted to connect the dots between what I’m trying to accomplish and your response to similar questions, but without much success. (Again, non-coder here… you lost me at “boolean.”) Do you happen to know the specific code that I would need to incorporate in order to add a rich text module on top of the banner image? (And as far as placement goes, will I need additional parameters to ensure that the rich text module is in the proper location on top of the banner, or is that adjustable at the page editing level?)
If you cloned the module then you can just edit the cloned module.
In the right side bar find the ‘add field’ link. in the drop down find the ‘rich text’ module option. Click it and it will be added to the side bar.
It is in different places depending on what you are looking at, but you want to grab the snippet for the field you created.
add it to your html. The contents of the module will display where ever the snippet is placed.
There will most likely be some css needed to style the content of the richtext module, however if you have a main stylesheet applied to your site, and that stylesheet has typography rules, then it might not be to bad of an ordeal.