Step 2: Edit Your Site

Edit Global Styles

Global styles are the branding and styling that apply to every page and, thus, every layout. From the Page Groups screen, click on the Edit Global Styles button.

Here, you’ll see a visual editor you can use to edit the global styles across your entire site. The tools on this page are here to help you design your global styles.

• Make global styling changes, such as choosing the color palette and fonts, in the right panel. This is the primary function of this screen (1).
  
• All changes you make will be displayed on the page preview (2).
  
• Toggle the page group, entity from that page group, and locale you want to preview. You can also view the entity in the Knowledge Graph to make any content changes (4).
  
• Collapse or expand the right panel to give yourself more space (6).
  
• Change the viewport between mobile, tablet, and desktop views, and zoom in and out on the preview (7).
  
• Undo, redo, clear, or publish your local changes (8).
  
• Open the page preview and live site in new tabs, so you can view the layout as a full webpage (9). Every entity already has a live page, but clicking the Preview Changes button will generate a new preview page. The page preview will include all local changes, while the live page will only include published changes. You can share these links to get buy-in and feedback from others.
  
• Update your library (10) to pull in the latest product changes. This may change the structure and properties available on the tools above.

Note that while you can toggle between page groups and entities here, you can not add, reorder, or remove components. This is meant to show a preview of the layout in production.

Try it Out!

1. Navigate to the Page Groups screen and click Edit Global Styles.
   
2. Edit any aspect of the global styles.
   
3. Toggle through different page groups and the entities in each set to validate that they all reflect your changes.
   
4. Click Preview Changes. This will generate a new preview page. Validate that the preview reflects the changes you’ve made.
   
5. Navigate away from the global styles editor by returning to the Page Groups screen. Then, go back to the global styles editor. You should see your changes persist.
   
6. Click View Live Site. Notice that your changes are not shown here.
   
7. Click Publish. This should make your changes go live for every page across all page groups.
   
8. Back on your live page, refresh the page to validate that your changes have gone live.

Edit a Layout

A page group’s layout defines the look of each page in the page group. The layout will inherit the global styles, but you can also customize the design of individual components. From the Page Groups screen, click Edit Layout next to the page group you want to edit.

Here, you’ll see a visual editor you can use to edit the layout for this page group. There are similar tools here as on the global styles editor, with a few differences:

• Make changes to component properties in the right panel. Common actions are mapping content to an entity field or a constant value, changing fonts, and changing colors (1).
  
• In the left panel (3), view a list of available components and an outline of the layout. Drag and drop available components onto the preview, reorder them by dragging and dropping them, or delete them by clicking on them (in either the outline or the preview) and clicking on the trash can icon (2).
  
• Toggle on and off entity fields (5), which displays where fields are being pulled from Knowledge Graph entities on the layout (2).
  
• Close or expand the left and right panels to give yourself more space (6).

Mapping Fields

Components can take in constant values or be mapped to an entity field. Constant values are the same across all pages, while entity fields will pull in the content for the corresponding entity. When selecting fields to map to, you will only see options on the entity type of the same field type as the component. For example, if you are mapping a URL field, you will only see URL fields as mapping options.

Updates to the content in the Knowledge Graph will automatically be reflected on your Pages. This emphasizes the importance of previewing the page for each entity to ensure that each page has the correct information.

You may decide you want content to appear that doesn’t exist on the entity yet. If so, you can add a custom field and fill in the values of that field. Note: If you add new fields to the entity type, the site will redeploy to show those new fields in the visual editor. Site deployments may take a few minutes.

Try it Out!

1. Navigate to the Page Groups screen and click Edit Layout next to the page group you want to edit.
   
2. From here, try dragging a new component onto the page, reordering the components by dragging and dropping them, and/or changing a component’s props.
   
3. Toggle through the different entities in the page group and validate that they all reflect the changes you’ve made.
   
4. Click Preview Changes. This will generate a new preview page. Validate the preview reflects the changes you’ve made.
   
5. Navigate away from the visual editor by returning to the Page Groups screen. Then, go back to the layout editor. You should see your changes persist.
   
6. Click View Live Site. Notice that your changes are not shown here.
   
7. Click Publish. This should make your changes go live for every page across all page groups.
   
8. Back on your live page, refresh the page to validate your changes have gone live.