We are no longer implementing new Page Builder sites. This help article is for existing Page Builder clients to maintain their existing Page Builder sites.
We’ve launched a new Pages in-platform experience for marketers. To learn more, check out the guidehere.
For current Pages customers interested in accessing these new capabilities in addition to the current experience, talk to your account team to learn more about how to rebuild your pages on this new experience.
This article provides an overview of each module that can be added to your pages. For more information on how to configure the content that displays for each module, see Pages Module Overview. For steps to create a page, see Create a Page Builder Template.
Note: Not all modules are available for all entities or page types. If you do not see one of the modules listed below, it may not be available for the entity type or type of page you are creating.
About this Page
An image and paragraph with optional headline and call-to-action button
We recommend mapping the Paragraph field to a field in the Yext Knowledge Graph, so the text will dynamically display information specific to the entity the page was created for.
The ideal image size is 600x350px. Images with other dimensions may look distorted to fit this space.
Announcement Bar
A colored bar with a single line of text that you would typically place at the top of your webpage
To include the same Announcement Bar across all of your pages, enter the text in the text box. Otherwise, you can select a text field to dynamically pull this content from a field in the Yext Knowledge Graph.
You can also make the Announcement Bar a call-to-action by entering a link in the Announcement URL field or by mapping to a URL field in the Yext Knowledge Graph.
Search Bar
A full-width search bar
Users must set up their Search experience, and Search results page separately. When adding this module you will select which Search experience to pull from.
We recommend adding this module close to the top of the page.
By default, the search bar placeholder text will be set to Search… and the header for the hardcoded prompts will be You can ask your brand:.
App Download
Links to the Apple App Store and Google Play Directory
The ideal image size is 554x312px.
To set up clickthrough URLs to your apps, enter the link for your app in the text box for the corresponding App Store.
To remove one of the App Store icons, delete the placeholder text from the text box
Banner Image
A hero image with a headline, paragraph, and call-to-action buttons
By default, this will display a generic cover photo. To pull in a photo from the Yext Knowledge Graph, click Background Image and select the desired photo field.
The paragraph field in this module is a great place to showcase a description of your business.
To remove one of the call-to-action buttons, delete the default text in the CTAText and CTA URL fields.
Centered Image
A center-aligned image
You also have the option to add a link so users can click on the image and be directed to another page. To do this, click Image URL to select a field from the Yext Knowledge Graph or to enter a specific URL.
Centered Map
A large map displaying a pin for your location
By default, the Coordinates will pull from the Yext Display Lat/Long field in the Yext Knowledge Graph. To adjust this, select another Lat/Long field from the drop-down.
Core Location Details
Basic information about your location with a map
This module includes multiple fields with pre-set Header text. To update this, click into the field and update the text in the text box.
Location-specific fields will pull content from the Yext Knowledge Graph for the previewed entity by default.
You also have the option to add two sets of hours (e.g., for location hours, and ATM, drive-thru, or pharmacy hours).
Hours displayed on your pages will also reflect holiday hours. On a week when you have designated holiday hours, the hours displayed on your page will automatically update with the holiday hours you have designated.
Divider
A horizontal line that visually separates two modules
By default, this will not have a color. However, you can click Override Color and select the desired color from the color grid selector.
Event Details with Image
Basic information about your event with an image
Event-specific fields will pull content from the Yext Knowledge Graph for the previewed entity by default.
For the Date/Time fields, you can click Select Format to select which format you would like the date and time to appear in.
By default, the image will pull from the first image in the Photo Gallery field in the Yext Knowledge Graph.
To add a call-to-action button, enter the desired text and desired CTA URL
Event Details with Map
Basic information about your event with a map
Event-specific fields will pull content from the Yext Knowledge Graph by default.
By default, the header will be Date and Time. You can edit this text directly in the text box.
For the Date/Time fields, you can click Select Format to select which format you would like the date and time to appear in.
Links and social media icons for the bottom of your webpage
To include the same Footer Links across all of your event pages, you can enter the Link Text and Link URLs directly in the text box.
To include social links, enter a URL or select a field for each site. To remove any of the social icons, delete the text from the text box.
Formstack Event RSVP
An Event RSVP form
This module can be customized based on your needs. Reach out to your Client Success Manager or Yext Support for help setting this up.
Headline
A large single line of text
By default, the text will be set to Headline. To update this, click into the field and update the text in the text box.
HTML
A block of HTML that you can add to your webpage. You can include your own JavaScript here
By default, the code will be set to display Hello World. To update this, click into the HTML editor and enter your desired HTML.
You can also map the HTML module to a field in the Yext Knowledge Graph. This allows you to store and update entity-specific HTML in the Yext Knowledge Graph, and dynamically display the HTML on each page.
One way to use this functionality is to store your website’s header and footer HTML in the Yext Knowledge Graph.
Image Gallery
A grid of cropped images
This can be used to display a gallery of images. In this gallery we respect aspect ratios, so photos will display photos in their true size. This differs from Image Gallery II and III, where we crop or scale the photos to a consistent size.
The headline will default to Photos. You can edit this text directly in the text box.
To add photos, click Images and select which entity and which photo field you would like to pull images from.
You can enter a number into the Number of Columns text box to designate how many columns of images you would like: 2, 3, 4, or 6.
Image Gallery with Captions
A grid of images with captions and descriptions
This can be used to display a gallery of images, with associated captions, titles, and links. Images will be cropped to be a consistent size. Captions and links will be displayed below each image.
The headline will default to Photos. You can edit this text directly in the text box.
Image Gallery with Overlay
A grid of images as cards with captions overlaid
This can be used to display a gallery of images, with associated captions, titles, and links. Images will be cropped to be a consistent size. Captions and links will be overlaid on each image.
The call-to-action text will be set to LEARN MORE. You can edit this directly in the text box.
To update the call-to-action URL associated with the image, click into the desired entity, and edit the Click-through URL that is associated with the image in the Yext Knowledge Graph.
To remove the call-to-action for all images, delete the text in the CTA Text field.
Image Header
An image that covers the full width of your webpage
To display an image click on the Image field and select an entity to pull the image from.
By default, the background color is set to black. If you select an entity that does not have an image in the field you select, it will display a block of the background color.
Image with Bulleted List
A bulleted text list with an image and optional call-to-action button
To display an image click on the Image field and select an entity to pull the image from.
The ideal image size is 600x350px. Images with other dimensions may look distorted to fit this space.
This module includes a lot of pre-set Header text. To update this, click into the field and update the text in the text box or select an entity to pull content from the Yext Knowledge Graph.
Individual FAQ
A single question and answer pairing
This module includes multiple fields with pre-set Header text. To update this, click into the field and update the text in the text box.
You want to make sure that the Question Text and Answer Text are mapped to the Question and Answer fields for the FAQ entity so this will dynamically display the question and answer for each entity.
This module will include multiple fields where you can pull information in about the job’s location, hiring organization, employment type, date posted, and any other relevant job details.
To create a Page Builder Template for your job entities, see Create a Page Builder Template and select Job as the entity type.
Link Bar
A horizontal list of links with optional headline
To remove any unwanted links, delete the default text in the additional Link Text and Link Url fields.
List of FAQ Groups
A list of the FAQ Groups in your account
By default, the headline will be Headline Text. You can edit this text directly in the text box.
To display a list of FAQ Groups, you will need to select the list source to pull FAQs from. Click Choose list source to select the list source, then click Choose a field to select the desired field.
Location List
A list of related locations
By default, the headline will be Additional Locations. To change this, update the text in the text box.
To display a list of locations, you will need to select the list source to pull locations from. Click Choose a list from this [entity type] to select the list source, then click Choose a field to select the desired field.
Navigation Bar with Search Experience
Your brand’s logo followed by a list of links, typically placed at the top of your webpage
The navbar should be updated to match the existing navigation bar on your website.
To display your business logo in the Navbar, you will need to add your logo to the Yext Knowledge Graph for each location. By default, this field will be mapped to the Business Logo for each location, so each page will dynamically pull in the corresponding logo.
The ideal image size for the logo is 400x400px.
To remove any unwanted header links, delete the default text in the additional Link Text and Link URL fields.
If you use Yext Search you can add the search bar to the top nav by selecting Search experience to pull from. If you do not select a Search experience, or you don’t have Search in your account the search bar will not display in the module.
Nearby Locations
A list of nearby locations. You can set the radius and number of locations to display.
You can adjust the number of nearby locations to display on the page by entering the desired number in the Limit textbox. Note, the maximum number of locations that can display is 50.
You can define the range of nearby locations in miles by entering a number in the Radius textbox. Note, the maximum radius is 500 miles.
This module includes multiple fields with pre-set Header text. To update this, click into the field and update the text in the text box.
All nearby location titles will default to the Name of the entity. You can also use the Add Geomodifier module to pull the Geomodifier field into the title, making your location titles more geographic-specific.
Person Details
Core details about a Person Entity
Person-specific fields will pull content from the Yext Knowledge Graph for the previewed person by default.
By default, the additional information will be set to the Description field in the Yext Knowledge Graph.
Person List
A list of people displayed in a card layout
By default, the header will be Our Team. You can edit this text directly in the text box.
To pull a list of people, you will need to select the list source associated with your professionals.
Click Choose a list from another entity and select the entity the professionals are associated with, then click Choose a field to select the desired field to pull from.
Product List
Basic information about a product
This module includes a photo gallery, two call to action buttons, and product-specific fields such as Size, Color, and Stock Status.
Spacer
A vertical space between two modules
This can be used to visually break up modules. The height of the spacer can be adjusted by entering a value in the text box
Store Locator
A map of all your locations that your customers can filter and search
This module is designed to display the street address and phone number for each search result. Because users typically search using a ZIP code of city, results are usually targeting a small geographic range and the addition of city and state can become redundant.
A paragraph of text with optional headline and call-to-action button
This module includes multiple fields with pre-set Header text. To update this, click into the field and update the text in the text box or select a field in the Yext Knowledge Graph to pull the content from.
Text Block with Buttons
Call-to-action buttons under an optional headline and paragraph
To add a Headline, select the desired entity and field to pull the content from.
To update the Paragraph text, update the content in the text box, or select to map to a field in the Yext Knowledge Graph.
To adjust the text in the call-to-action buttons, click on the desired CTA Text field and enter your desired content.
To remove one of the call-to-action (CTA) buttons, delete the default text in the CTAText and CTA URL fields.
Text List
A bulleted list that you can use to display products, services, or any text list
This module includes a lot of pre-set text. To update this, click into the field and update the text in the text box, or select a field in the Yext Knowledge Graph to pull the content from.
To remove the call-to-action button, delete the default text in the ButtonText and Button URL fields.
Three Column List
A three column grid of items that can be used to list out entities in your account
This module includes multiple fields with pre-set text. To update this, click into the field and update the text in the text box.
To display a list of entities, you will need to select the list source to pull them from. Click List of [Type] to select the list source, then click Choose a field to select the desired field.
Two Column Text Block
Text block, separated into two columns
This module includes a lot of pre-set text. To update this, click into the field and update the text in the text box, or select a field in the Yext Knowledge Graph to pull the content from.
Upcoming Events
A list of upcoming events
You can adjust the number of events to display on the page by entering the desired number in the Results per Page textbox.