I have gone with Banner Image for my image and Header and Subheader for my text fields. Give them a name that will be meaningful to you when you are editing them on the page level. To add a field, on the right hit ‘Add field’ and then search/find the one you are looking for. We will use an Image field for the background-image, and two separate text fields for the header and subheader. For each of these things we want to change, we need a field. We’re now ready to move onto our fields.Īt its most basic level, the three things here we will want to be able to change will be the banner image itself, and the header and subheader text. HOW TO ADD FOOTNOTE IN RICH TEXT EDITOR FULLWe’re doing it this way so that the banner image can be full width, while the text will have some styling to put it in the center. Inside that, we have another div called banner-text-area, where we have an h1 and an h2. Here we have an outer-wrapper div we’re called banner-image, and this is what will display the banner image. The basic build will look something like this: I am going to assume that the reader knows some basic HTML and CSS, or at least enough to Google the things you don’t know that I mention here. This allows me to get everything in place, and then I can add in the fields after, and then insert their values where I need them. Don’t want the subheader and instead want a CTA? You should be able to do that by the end of this.įor me, when I am building out a module for the first time, I like to start with the HTML without adding any fields yet. HOW TO ADD FOOTNOTE IN RICH TEXT EDITOR HOW TOIn building this, I am hoping to convey some general building concepts here as well, so that you the reader will know how to replace parts of it with whatever you want. Our module is going to be a full-width background image, that has a main header and a subheader. We’re going to get deeper into fields as we start to build out the module. 1, the HTML and HubL section, is where things actually happen and so we need to put something there that says something akin to ‘when something is set here, that goes there’ Now, just adding the field here does not do anything directly, apart from allowing a user to select it and set a value, but that value would not be put anywhere. ![]() Any text that you want to be able to edit, you need to add a text field for that here. These are going to be the available fields that you can edit when you are on the page editor. This one is pretty important to understand. This can also be a downside: if it conflicts with other JS on the page, so keep that in mind. This is nice because you don’t need to add anything to your main JS file to support it on each implementation, it will be there wherever the module is present. This section supports JS, we won’t be using any here, but if we wanted to, we could add it here. We don’t need to do that, but it can be nice. CSS that would require HubL would be any CSS call that you would want to customize from the page editor. I believe that currently, HubL is not supported here, so we will only be using CSS that does not require HubL here. In terms of the module, this is essentially what actually gets output on the page. ![]() This is the section where we’re going to do the majority of our work. ![]() Here’s what things should look like now, I have labeled a few parts It does not matter what you name it, give it a name that means something to you. In Design Tools use the ‘Create a new file’ button or File > Create a new file in option on the left. To do that, we’ll need to first create the custom module. With that in mind, let’s look first at the playing field, so we can understand the components, and then we’ll be able to better use them. This means no matching up stylesheets, none of that, and you can customize it all you want. The module that we make here will look, more or less, the same wherever it is dropped. Here’s the main concept we’re working with, and why we are doing it this way: This guide will still go over the same concept, making a custom background image module, but it will be better, like description below. As such, I have updated it with the specific audience of ‘people who have not made a module in HubSpot’ in mind. Re-reading this post, after learning so much, feels like reading my middle-school diary. For people who read the old version of this guide: I have found that this post over a year later is still quite popular.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |