Need Dynamic Text over Image

[Promita_M]

Hi, I need some help for creating a custom module for dynamic text over banner images in landing pages. I have referred to a HubSpot blog post to create the custom module: https://blog.hubspot.com/customers/create-a-full-width-banner. The post had some coding in HTML and CSS. The module has been tested in a landing page and its functional, I am able to get  readable and editable text over banner images in multiple widths. However, I have a trouble when i use this same module in othe landing pages with different images.

Is there a way to create a fixed custom module which can be used in multiple pages without cloning the module for each page? Also, ensuring that text changes done on one page doesnt reflect in other pages where the same module has been used.

The module should give me an option to choose any background image and place any text/copy over it, editable when required.

Thank you.

Here is the module code:

<div class="custom-banner-image">
  <div class="banner-overlay"></div>
  <div class="banner-text">
    <div class="page-center">
     <div>
     {% inline_rich_text field="richtext_field" value="{{ module.richtext_field }}" %}
     </div>
   </div>
 </div>
</div>
 
{% require_css %}
 <style>
   .custom-banner-image {
       background-image: url('https://info.absolutdata.com/hubfs/Foodservices_Blank%20Banner.png');
         }

</style>
{% end_require_css %}

CSS:

.custom-banner-image {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
position: relative;
width: 1279px;
height: 363px;
display: block;
}
.custom-banner-image .banner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.custom-banner-image .banner-text {
padding: 50px 0;
color: #eee;
text-align: center;
position: relative;
z-index: 1;
width: 100%;
font-family: sans-serif;
}
.custom-banner-image .banner-text{
color: #fff;
}
@media (max-width: 767px){
.header-container.container-fluid .row-fluid .page-center {
padding: 0;
}
.custom-banner-image .banner-text {
padding: 50px 15px;
}

}

[Kevin-C]

Hey @Promita_M

This can easily be done by creating a custom local modules, with modifiable fields fields.

The code you provided seems to make use of some fields already, I would just create another to be used for the background image. Just make sure you create a local module not a global, this ensures you can change the content per page.

[Promita_M]

Hi Kevin,

Thank you for the solution. Since I am not very fluent with coding and HTML, could you please help me with the HTML for creating a customer local module. It would be great if you could provide me with the HTML and CSS code for this module. How do I create a local module? 

[Kevin-C · Accepted solution]

Luckly this can be done with minimal HTML knowledge and research. For the basics check out https://www.w3schools.com/.

What you really need to look into is building custom modules using th HS platform. Specifically this lesson in the HS acedemy. In that lesson yu'll not onlyn learn how but also the why behind the solution.