CMS Development

yellowchilli
Participant

placing CTA buttons / text over image slider

SOLVE

We're looking to place cta buttons and text over images and images sliders.

 

How can this be done please?

 

thanks

0 Upvotes
1 Accepted solution
Jsum
Solution
Key Advisor

placing CTA buttons / text over image slider

SOLVE

@SaraC,

 

If you used the code exactly like in the example than what should have happened is that you applied a rich text module. You can actually insert CTA's from the rich text editor in your page editor so you shouldn't need any extra mark up.

 

Optionally you could replace the rich text module, or add below it, three cta modules:

 

<div style="background: url({% image_src 'executve_image_src' src='//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg', no_wrapper=True %})">
    
    {% widget_block rich_text "iamge_text" overrideable=True, label='Image Text'  %}
        {% widget_attribute "html" %}
            <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p>
        {% end_widget_attribute %}
    {% end_widget_block %}
    
    {% cta "image_cta_1"  label="Image CTA 1" %}    
    {% cta "image_cta_2"  label="Image CTA 2" %}   
    {% cta "image_cta_3"  label="Image CTA 3" %}   
</div>

****EDIT: I just realized there was an "r" missing from background in the inline styling.

View solution in original post

0 Upvotes
11 Replies 11
Jsum
Key Advisor

placing CTA buttons / text over image slider

SOLVE

@yellowchilli,

 

My solution to your question might be a bit complicated so first let me ask, If you took Hubspot out of the equation do you have the ability to do this using html and css?

 

If you do I can tell you how to use HubL to do what you are wanting.

0 Upvotes
yellowchilli
Participant

placing CTA buttons / text over image slider

SOLVE

Hi Jsum,

 

Yes we do have an inhouse developer here who can handle html and css!

thanks

0 Upvotes
Jsum
Key Advisor

placing CTA buttons / text over image slider

SOLVE

@yellowchilli,

 

Ok Good.

 

Basically what you are going to want to do is build out your module in html and css. That means that if you want a cta and text ontop of an image or images sliders build a mock up of this outside of hubspot. This includes making the slider work with Javascript/Jquery.

 

Once you have this built You can plug it into Hubspot. If you are using the drag-and-drop template builder use a custom HubL:or HTML module. Add your html to the module, your css in your main css style sheet, your custom javascript to your main or pages specific script file, and any plugin/library you might be using to make the slider work can be added as a new template then linked to your page. 

 

If you added all this in correctly then your custom work should look like it did outside of Hubspot with the same static content you used to build it. 

 

Now to make it editable Your going to use HubL. HubL is the code equivalent to the drag and drop modules, basically. A a major difference is that with some programming skill you can manipulate the modules with HubL and you interweave it with your html instead of it being added automatically. 

 

Here are the supported modules in HubL.

 

if you just want to place text ontop on an image, for instance, you would just use an image_src module and a richtext module. 

 

There are a few of ways to place text over an image, one of them being absolute position, another being applying the image as the background to a div and containing the text within that div. I am going to write out the html for the latter. 

<div style="backgound: url({% image_src 'executve_image_src' src='//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg', no_wrapper=True %})">
    
    {% widget_block rich_text "iamge_text" overrideable=True, label='Image Text'  %}
        {% widget_attribute "html" %}
            <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p>
        {% end_widget_attribute %}
    {% end_widget_block %}

</div>

Notice a few things, I nested the quotations in the div style attribute where I placed the image module. You want to watch for quotations. also notice the no_wrapper=true applied to the module. That removes any default Hubspot wrappers allowing it to just output the value.

 

Sliders are more complicated. You have to loop through the slides with a foreach loop and output the attributes for each loop as you do. If you are at all familiar with foreach loops this should be pretty understandable. 

 

first, find the image slider module in the list of available modules.

{% image_slider "image_slider" label="Image Slider", export_to_template_context=True %}

<div class="slider-container">
{% for slide in widget_data.image_slider.slides %}
    <div class="single-slide">
        <img src="{{ slide.img_src }}" alt="{{ slide.img_alt }}>
        <p>slide.caption</p>
    </div>
{% endfor %}
</div>

In the above example I assumed the text would be absolute positioned over the image, but you can use the html from the first example and vice versa. 

 

whats happening here in Hubl is that I created an image_slider module and exported it to the template context. This makes the data belonging to the module available to the template but it nolonger shows in the template unless you out put it's data using data tokens like I did above.

 

I looped through the number of slides using a for each in loop. so for each slide setup in the module (on the page editor) we are going to output that slides image source, alt, and the caption. It's pretty simple when you understand how it works. 

 

To add a cta, because it is not natively apart of the image slider setup, you would need to use unique_in_loop=True to ensure that the cta is unique to the slide you set it up in

{% image_slider "image_slider" label="Image Slider", export_to_template_context=True %}

{% for slide in widget_data.image_slider.slides %}
    
    {% cta "cta"  unique_in_loop=True %}

{% endfor %}

I removed the html and added the cta so you could see how this looks.

 

You will want to go the the editor for the page(s) where this code is applied and actually set up your slides, then view the live or previewed page. 

 

These are just examples and you can really do anything you want to using these couple of methods, just read the docs.

SaraC
Member

placing CTA buttons / text over image slider

SOLVE

Hello, so I've just used the first code for adding text over a still image (no slider), I've done that and was just going to link the text, however, we'd like to add 3 CTAs instead of the linked text. I am wondering what the html to insert those where the text is in the first html code might be? 

 

Thank you!

0 Upvotes
Jsum
Solution
Key Advisor

placing CTA buttons / text over image slider

SOLVE

@SaraC,

 

If you used the code exactly like in the example than what should have happened is that you applied a rich text module. You can actually insert CTA's from the rich text editor in your page editor so you shouldn't need any extra mark up.

 

Optionally you could replace the rich text module, or add below it, three cta modules:

 

<div style="background: url({% image_src 'executve_image_src' src='//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg', no_wrapper=True %})">
    
    {% widget_block rich_text "iamge_text" overrideable=True, label='Image Text'  %}
        {% widget_attribute "html" %}
            <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p>
        {% end_widget_attribute %}
    {% end_widget_block %}
    
    {% cta "image_cta_1"  label="Image CTA 1" %}    
    {% cta "image_cta_2"  label="Image CTA 2" %}   
    {% cta "image_cta_3"  label="Image CTA 3" %}   
</div>

****EDIT: I just realized there was an "r" missing from background in the inline styling.

0 Upvotes
SaraC
Member

placing CTA buttons / text over image slider

SOLVE

Ah awesome! I wasn't even thinking, so I can just embed. Looks good/working now! 

Thank you!

0 Upvotes
Jsum
Key Advisor

placing CTA buttons / text over image slider

SOLVE

@SaraC,

 

I'm happy to help. Just so you know, you can find an embed code for your cta in your cta dashboard, but you can also click the "add cta" icon in the rich text editor and it will bring up your cta's to choose from and place them right in the editor.

0 Upvotes
BambooWH
Member

placing CTA buttons / text over image slider

SOLVE

Hi everyone,

Is there any way you could explain this solution to someone that doesn't understand code? I am having issues in that I have managed to add the CTA to the images using the padding functions. It works on normal PC view but as soon as you view the page on a mobile device the CTA's disappear or all pile-up. Any help would be most appreciated!

Thanks so much,

Lauren

Jsum
Key Advisor

placing CTA buttons / text over image slider

SOLVE

@BambooWH,

 

I don't think your issue is with this method, I think it is with adjusting the output of this method for mobile. You should be able to use your inspector tool in your console to see what is happening and you can use media queries in your css to adjust your css accordingly. 

 

If web development were easy I would be out of a job. Let me know if this helps.

0 Upvotes
yellowchilli
Participant

placing CTA buttons / text over image slider

SOLVE

thank you, that looks really detailed! I'll get this to our dev and see how it goes

0 Upvotes
roisinkirby
HubSpot Product Team
HubSpot Product Team

placing CTA buttons / text over image slider

SOLVE

Thanks for such a detailed response @Jsum!

 

@yellowchilli let us know how this works for you, and be sure to mark @Jsum's response as an Accepted Solution if this works for you 🙂