CMS Development

MhillmanPAV
Member

Looking to create responsive floating module (widget?) for hero section of website

Hello, all. I'm new to the community so please redirect me if this belongs elsewhere.

I'm looking to create a floating module for the hero section of my organization's website, one wherein I can put some small "badge" icons. I need this module (or widget?) to be wireframe responsive, and editable. While the main body of the page and template allows for additional modules, the hero section is, by Hubspot's default on our templates, locked.

Contacting Hubspot support only resulted in the usual answer of "contact your developer," but we don't have one. I'm the main webmaster, and I don't have extensive development experience, although I am quite capable of copying and slightly altering templates, etc. 

Anyone able to help me out with this? 

0 Upvotes
2 Replies 2
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Looking to create responsive floating module (widget?) for hero section of website

Hi @MhillmanPAV

 

could you please specify what a "floating" module is? Do you mean a module which you can "drag&drop" to templates?

 

Before getting into coding it - it's completly up to you in case of responsiveness, functionality and other things.

 

I would start by creating a new (custom) module, select all the options of page types you'd like to use this module in. Typicly it's "pages" since blog post drag&drop isn't out yet (and I don't know when and if it will come) and blog listing doesn't make sense for this kind of module since the blog hero is quite often either a static image or displays the latest blog post informations(featured image, title, author, publish date...)

If you're using one of the "out-of-the-box" HubSpot themes like Session, Growth, Martech... their build upon the HubSpot boilerplate which is based on the Bootstrap2 Grid system(important).

If you've bought a "premium" theme from the marketplace - it's completly up to the developers of the theme. Most likely they will use the Bootstrap4 grid system.

 

But - let's assume you're on a boilerplate based theme.

After creating a custom module write your desired layout in the HTML+Hubl field.

If you want a "two column" based hero with one(or more) text fields for headline, subline a background image and a "badge" the basic layout could look like this

 

 

<div class="heroWrapper" style="background-image:url();background-size:cover;background-position:center center; width:100vw; overflow:hidden; height:40rem;">
<div class="container">
<div class="row-fluid">
<div class="span10">Text content</div>
<div class="span2">Badges</div>
</div>
</div>
</div>

 

 

After you've written your layout you should place/add the functionality.

 

Add a background-image

Add an image function in the right sidebar and give it a name. I will use "Background Image" for this how-to. 

Optional/recomended: Since this image function will be used as a background-image, disable the size and load options to make the lives of marketers a bit easier. 
(To see what options you have copy the "Snippet" and paste it below your layout). 

There will be some if-statements and the important part for your hero: the <img>-tag.

Since you want to use this image as a background-image the only important thing in this whole Snippet is the "src" value. It shoud look something like this

 

{{ module.background_image.src }}

 

copy it and paste it in your code/layout. It should look like this:

 

 

<div class="heroWrapper" style="background-image:url('{{module.background_image.src}}');background-size:cover;background-position:center center; width:100vw; overflow:hidden; height:40rem;">
<div class="container">
<div class="row-fluid">
<div class="span10">Text content</div>
<div class="span2">Badges</div>
</div>
</div>
</div>

 

 

delete the snippet from the image. Otherwise it will add the selected background-image below your hero.

 

 

Add text options to the hero

If you want you can simply add a rich-text function but this can lead to an unwanted look&feel if the marketers will copy/paste text directly from a text program(e.g. Word). 

Let's go a seperated route in this guide.

First add two text functions(not rich-text). The first one should be called "Headline" and the second one "Subline".

Extend your layout like this:

 

<div class="heroWrapper" style="background-image:url('{{module.background_image.src}}');background-size:cover;background-position:center center; width:100vw; overflow:hidden; height:40rem;">
<div class="container">
<div class="row-fluid">
<div class="span10">
<h1>{{ module.headline }}</h1>
<span class="subline">{{ module.subline }}</span>
</div>
<div class="span2">Badges</div>
</div>
</div>
</div>

 

note: the subline is a span with a class. The tags are up to you but for best coding options I recomend to use classes so you can style them with CSS.

 

Add a Badge:

Adding a badge is almost the same as adding the background-image. First add an image function and call it "Badge". Enable/disable the size/loading options of this image function to your need. I like to disable them and do everything via CSS so it will always look the same. 

If you'd like to keep the options, copy/paste the snippet. Otherwise write your own img-tag

 

Here's a codepreview without the snippet: 

 

<div class="heroWrapper" style="background-image:url('{{module.background_image.src}}');background-size:cover;background-position:center center; width:100vw; overflow:hidden; height:40rem;">
<div class="container">
<div class="row-fluid">
<div class="span10">
<h1>{{ module.headline }}</h1>
<span class="subline">{{ module.subline }}</span>
</div>
<div class="span2">
{% if module.badge.src != "" %}
<img src="{{ module.badge.src }}" alt="{{ module.badge.alt }}" class="badge" loading="lazy">
{% endif%}
</div>
</div>
</div>
</div>

 

 

Now you can create a new CSS file, edit existing ones and place styling to it. 

 

 

Hope this helps, 

 

best, 

Anton

Anton Bujanowski Signature
natsumimori
Community Manager
Community Manager

Looking to create responsive floating module (widget?) for hero section of website

Hi @MhillmanPAV , thank you for your post! I have moved this post to the CMS Development board so that other Community members who have experience in this field can find your post easily.

 

@Anton and @jonchim , would you be able to share your advice here?

0 Upvotes