A layout defines the structure and design of all pages in a page group. It inherits your site's global styles, but you can also customize the design of individual sections — changing fonts, colors, and content mappings at the section level. Each page group has one layout, and every entity in that group uses it.

Note: You are editing a layout template. Changes you make apply to every page in the page group, not just the one being previewed.

Access the Layout Editor

From the Page Groups screen, click Edit Layout next to the page group you want to edit.

The layout editor. Numbered callouts are referenced throughout this article.

Changes are auto-saved as you work, so you can leave and return without losing progress.

Add, Reorder, and Remove Sections

Sections are the building blocks of a layout. The left panel (3) shows all available sections in the section panel and an outline of what's currently in the layout.

To add a section: Drag a section from the section panel onto the preview (2) at the position you want.

To reorder sections: Drag and drop sections in either the preview (2) or the outline in the left panel (3).

To remove a section: Click the section in the preview or the outline to select it, then click the trash icon in the action bar that appears.

Use the Show Labels button to see the content source — static or Knowledge Graph — for every element in your current layout at a glance.

Note: The available sections in the left panel come from your site's library. If you're missing sections you expect to see, you may need to update your library. See Update Your Library.

Edit Section Properties

Click any section in the preview (2) or the outline (3) to select it. Its properties appear in the right panel (1). Common actions include:

• Mapping content to a Knowledge Graph entity field or setting a static value (see Map Section Properties)
• Changing fonts and colors at the section level to override global styles
• Showing or hiding elements within a section

Use the entity fields toggle (5) to highlight which fields on the layout are being pulled from the Knowledge Graph. This is useful for verifying your content mappings are set up correctly.

Add Custom Code

The Custom Code component lets you add custom HTML, CSS, and JavaScript directly to a page. Use it when you need functionality that isn't available through the built-in sections.

To embed Knowledge Graph field values in custom code, use Handlebars notation:

<div class="custom-banner">
  <h2>Welcome to {{name}}</h2>
  <p>Visit us at {{address.line1}}, {{address.city}}</p>
  <p>Call us: {{mainPhone}}</p>
</div>

Best practices for custom code:

• Prefer HTML and CSS over JavaScript where possible. Static content is more reliably indexed by search engines and AI crawlers. JavaScript-heavy implementations may not be indexed properly.
• Use built-in sections first. Yext-provided sections are maintained by Yext and optimized for accessibility and SEO. Use custom code only for functionality that built-in sections don't cover.

Copy and Paste Sections

If you have multiple page groups with shared sections — such as a header or footer that needs to look the same everywhere — you can copy a fully configured section from one layout and paste it into another instead of reconfiguring it from scratch.

To copy and paste a section:

1. From the Page Groups screen, click Edit Layout next to the page group that has the section you want to copy.
2. Click the section in the preview or the outline. An action bar appears above the section.
3. Click the copy icon (first icon in the action bar).
4. Return to the Page Groups screen and click Edit Layout next to the target page group.
5. If the section is not already in the layout, drag it in from the left panel. Then click it to select it.
6. Click the paste icon (second icon in the action bar).

All properties copy over, including any localized translations. Preview, edit, and publish as normal.

Preview Your Changes

Before publishing, validate your changes across different entities and viewports.

• Page preview (2) — Changes appear live in the preview as you make them.
• Entity toggle (top of editor) — Switch between entities in the page group to confirm the layout looks correct with different content.
• Viewport controls (7) — Check desktop, tablet, and mobile views.
• Preview Changes (9) — Generates a shareable, point-in-time preview link with all local changes. Note that this snapshot won't update to reflect subsequent edits — generate a new preview to see later changes.

Publish Your Changes

Click Publish in the change controls (8) to push your layout updates live for all pages in the page group simultaneously. If your pages are already live, this button reads Update # Pages.

To verify, open the live site (9) and refresh to confirm the updates are visible.