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.
Adding the HTML Module
Adding an HTML module is very simple.
- Navigate to your Page Builder Template that you’d like to add the HTML module.
- 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.
<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:
- Create a custom field of type
- 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.
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!