Page Builder Navigation | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

• An overview of the Pages tab
• The three sections of Page Builder
• Live Preview concept and how it works
• Previewing Pages

Overview

When navigating through Pages, you will see a few different tabs that align with the components of the page: Sites and Domains.

All Sites: where you can view all of the features associated with your Site. This is where you will do all of the work to build your pages.

Domains: where you can view the Domain information. This will become more relevant in later modules as you work to publish your pages.

Page Builder Navigation

When building your Pages in the Yext Page Builder, there are three main tabs that you will navigate among:

• Content
• Design
• Settings

Content: where you manage the modules and the content within the modules.

Design: where you customize the colors, font, and design of the page.

Settings: where you manage template-wide settings like the page name, URL path structure, and custom schema.org markup.

You will learn about all of these in more detail in the following modules, but for now we want to get you acquainted with how you will be navigating the Page Builder during this process of creating your pages.

Live Preview

On all of these tabs, you will see that the Live Preview is visible on the right side of the page. This Live Preview shows you what the page will look like once it is published. As you make changes in the Content and Design page, and click Save, this Live Preview will update accordingly to reflect your changes.

Module Navigation

On the Content page, when you click to edit a module, the page will automatically navigate you to that module in the Live Preview, and will gray out the rest of the page.

Previewing Pages

An important thing to remember is that when you are editing a page, you are previewing the template for one entity. This means that the Live Preview displays a preview of the page as it will appear for that specific entity.

To ensure that your pages are configured correctly for each entity, you have the ability to preview what this page will look like for all of your entities.

To do this, when you are editing a Page template, click on the button at the top of the page next to View Content for: and select the entity you would like to view a page preview of.

This allows you to review the pages for each entity to verify the necessary information has been added to the entity, and make sure everything looks good on the page before publishing.

Page Preview Link

Another way to preview your pages is with the Page Preview link. The Page Preview link allows you to view these pages in a browser, outside of the Live Preview in the Page Builder.

One great benefit of this is that it allows you to share the Page Preview with people who may not have access to the Page Builder, like a design team that may want to sign off on the styling of the pages before they are pushed live.

Throughout this training, we talk about the importance of previewing pages for each entity as you are making changes to your pages. This Page Preview link is an easy way to see how the pages look for each entity. To access this link click on the Preview URL button at the top of the Live Preview.

One important thing to note, is that each page has a unique link, and the preview link will default to the link of the page you are currently viewing the Live Preview for. To access the links for each page, click on the drop-down and select your desired entity.

Edit Entity

You will also be able to efficiently edit your entity data if you need to adjust content while you are building your pages. By clicking on “Edit Entity” button, you can navigate to the specific entity that you’re viewing the page for. This is helpful when you are previewing content for a specific entity and want to make some changes quickly to that entity.