Overview of the HTML Module in Page Builder | Yext 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.

Note

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 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.

3. Select the HTML module option, and click Add.

4. Your new HTML module will be at the bottom of your page by default. Now you’re ready to begin editing!

You can add as many HTML modules to a template as you want! 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.

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.

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 fields in Content 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 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.

3. Go to your Page Builder HTML Module and select ‘More Options’. Click on ‘Map to [[entity name]] field’.

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!

Note

You can also use rich text fields to add simple formatting (bold, underline, italic, lists, and hyperlinks).