swapping out an image in a module

bwalsh
Participant

I'm new to HubSpot design, but have been trying for the past hour to:

1. In a cloned custom module,

2. replace the background image with another image.

 

Any pointers on how to do this would be appreciated.

0 Upvotes
5 Replies 5
Stephanie-OG
Key Advisor

Hi there! It really depends on how they've added in the background image. If you could copy and paste in the code from the HTML and CSS boxes in the module or send a link to a page where the module is being used we can take a look. 

 


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

0 Upvotes
bwalsh
Participant

Thanks Stephanie - here's the html+hubL:

 

<div class="hs-video-slider-wrapper">
<div class="hs-video-slider-top-section">
<ul class="slider-for">
{% for item in module.video_slider_item %}
<li>
<video class="sow-full-element" autoplay muted loop><source src="{{ item.video_slide }}" type="video/mp4"></video>
</li>
{% endfor %}
</ul>
</div>
<div class="hs-video-slider-bottom-section">
<div class="slider-nav">
{% for item in module.video_slider_item %}
<div class="hs-video-slider-bottom-item">
<p>{{ item.caption }}</p>
</div>
{% endfor %}
</div>
</div>
</div>

 

The CSS box is empty. Under Linked Files there's a css sheet I cannot find and that can only be deletd.


Here's what I see: 

design managerdesign manager

0 Upvotes
Stephanie-OG
Key Advisor

Thanks for uploading the code!

 

That uses code from the Slick Slider (the attached CSS and JavaScript files) and pulls the video and caption from the fields on the right hand side. You can change the default by editing either but, when you use the module, you should have the option to add and remove slides. 

 

Try clicking on "Preview" and you'll see on the left hand side that you have the option to "Add" slides and remove them. You'll have the same when using the module on any page.

 

If that's not what you're trying to change, are you using the module on any page or page preview that you can send me?

 


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

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

0 Upvotes
bwalsh
Participant

It's probably easier looking at the page itself: https://laterpay.net. See the iphone mockup toward the top of the page? We want to swap that image for a iPhone X mockup. I see the image on the page in Chrome, but not in the HS Design Manager...

0 Upvotes
Stephanie-OG
Key Advisor

The content is at the page level and not the template level. If you go into Marketing > Website > Website Pages and find the homepage (or click on the HubSpot sprocket on the top right-hand corner when you visit the homepage and click on Edit Page), you should have the option to click on the slider.

 

When you click on it (a pencil icon should appear over it on hover), on the left hand side you should see options to add or remove slides, similar to what you can see here on my page with my testimonial slider: 

 

editslider.png

 

If I click on that first testimonial, for example, I have the option to update content, name, photo... etc. In your case it should let you update the video and caption. 

 


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

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

0 Upvotes