Hubspot Starter templet Css edit

Develop, Build & Integrate CMS Development
1

hi,

i have a problem in a landing page, i need to add whats app image and i need to make that image position fixed, it is a starter templet, no themes or templets are or no code are used.

Capture.PNG
Capture.PNG1903×985 172 KB

2

Hi @Raghavendra,

a fixed image(I assume it should be clickable) isn’t possible by default but you can easily create a custom module and use this on your pages.

The layout of the custom module should look something like this

{% require_css %}
<style>
.fixedImage{
position:fixed;
right:1rem;
top:40%;
}
.clickableImage{
width:3rem;
height:3rem;}
}
</style>
{% end_require_css %}

<div class="fixedImage">
<a href="tel:{{module.whatsapp_number|cut(" ")|replace("+", "00")}}"><img src="{{ module.image.src }}" alt="{{ module.image.src }}" class="clickableImage">
</a>
</div>

Add a text(not rich-text) function “whatsapp number” and an image function “image” to the module and you’re ready to go.

One thing to keep in mind - phone numbers have to be only numbers (without slashes, spacings etc.) so either you put the number in the correct format right into the text field or you can use |cut and |replace filters like in the example above.

Let me now if you need further assistance

best,

Anton

3

unable to add custom module

Raghavendra_0-1688627143836.png
Raghavendra_0-1688627143836.png482×800 52.6 KB

4

Hi @Raghavendra,

you have to create and publish a custom module in the design-manager first.

You can find the design-manager here: Marketing-> Files & Tempaltes → Design tools (the new name of design-manager). The next steps are

  • navigate to your theme (if you’re not using a child or custom theme you don’t have to do this)
  • select “File” → “New file” in the top left corner of the left sidebar
  • select “Module” in the pop-up window
  • select the page-types you’d like to use this module in (don’t select Email and/or Quote)
  • choose if it should be a local or global module.
    local modules: can be used several times and can have different content
    global module: can be used several times and have the same content
  • type in a name. I recommend to use dashes or underscores instead of spaces like “THIS_IS-MY-CUSTOM_MODULE” instead of " THIS IS MY CUSTOM MODULE"
  • add a text field(“Whatsapp number”) in the right sidebar
  • add an image field(“Image”) in the right sidebar
  • Paste the code from the previous answer to the HTML+Hubl area in the middle of the screen
  • click on “Publish” in the top right corner
  • done

Also - here some useful ressources on module development:

p.s: You might need to change some CSS settings

best,

Anton