loading

Overview of the HTML Module in Page Builder| Hitchhikers Platform

What You’ll Learn

  • How to add an HTML module
  • How to edit an HTML module with fixed content
  • How to edit an HTML module with dynamic, entity-specific content

The HTML Page Builder Module

Page Builder has many different modules that address various layout options. However, there may be a case where you would like to provide your own HTML to customize a section further, or you may have embed codes from other providers that allow you to add more dynamic content to your page. The HTML module gives you this flexibility.

light bulb
Tip
You should use the built-in modules as much as possible, and only use the HTML modules if none of the modules fit your use case. Our modules are browser and device tested, and represent our user-experience best practices.

Adding the HTML Module

Adding an HTML module is very simple.

  1. Navigate to your Page Builder Template that you’d like to add the HTML module.
  2. Click ‘+ Add Module’ at the bottom of your module list. Add module options
  3. Select the HTML module option, and click Add. Select HTML module
  4. Your new HTML module will be at the bottom of your page by default. Now you’re ready to begin editing!
light bulb
Tip
You can add as many HTML modules to a template as you want! To make it easier to identify the purpose of each specific HTML module, click the pencil icon next to the title to rename the module.

Editing the Module with Constant HTML

As you learned in our technical HTML training, the HTML will provide the content and the structure of the module. You’ll be able to customize the CSS in the next module, Customizing Page Branding & Styling.

In this example, we’ll add some simple HTML to create a section with a heading, a paragraph, and link. Editing HTML module

In the Code Editor, you can add whatever HTML you would like. In our example, we are adding a <h2> of “Delivery Disclaimer”, a <p> tag including more details, and an <a> tag for a link. Once you click ‘Save’, you will be able to preview your changes in the live preview on the right.

light bulb
Tip
You’re not just restricted to HTML in the HTML module, despite the name. You can also include JavaScript in this section via <script> tags, and CSS via <style> tags or in the ‘Edit CSS’ screen of the module!

Editing the Module with Entity-Specific HTML

For dynamic content that varies between entities, use the Knowledge Graph to store HTML code. This way, your module code remains as flexible as the data behind it.

To do this, simply follow these steps:

  1. Create a custom field of type Multi-Line Text.
  2. Edit the field in your knowledge graph to add the HTML. In this example, we are adding entity-specific Call to Action Links. The link for the ‘Give Us Feedback’ <a> tag has the ‘Entity ID’ appended to the end, and there is now a second call-to-action to call this store. Knowledge Graph Field
  3. Go to your Page Builder HTML Module and select ‘More Options’. Click on ‘Map to [[entity name]] field’. Mapping Field Options
  4. Once you click on this option, you can map to a custom field as you do in other built-in modules. Select the field desired, hit save, and see your module update in the live preview! Map to Field
light bulb
Tip
You can also use our new Rich Text Fields to add simple formatting (bold, underline, italic, lists, and hyperlinks).
unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 3

    What are some examples of when HTML modules could be used? (Select all that apply)

    Error Success Question 2 of 3

    How many HTML modules can you place on one template?

    Error Success Question 3 of 3

    What kind of content can you include in the HTML module when you’re using constant value? (Select all that apply)

    Wahoo - you did it! 🙌

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect
Splash Loading