/INSTRUCTIONS

 Your turn 

Configure the header

Note

This course is part of a path. If you skipped the 1st course but want to follow along using the instructions below, you'll need to do the following:

Instructions are provided in video and in written instructions below.

Step 1: Use the Layers Panel

As you learned in the last lesson, the Layers panel allows you to see and manage the hierarchy of elements within your site, ensuring you can easily access and edit for example the header and its components. If you haven't already popped open this panel, let's do that:


  1. Access the Layers Panel: In the side panel of the editor, select Layers.
  2. Select an element: Click on an element on the canvas to see it highlighted in the layers panel.
  3. Rename a layer: Double-click on the element name in the Layers panel and enter a new name for better organization.
  4. Toggle visibility: You can toggle the visibility of different layers to focus on specific elements during the editing process. Or, you can toggle the visibility of elements for specific screen sizes.
  5. Refer to the Layers Panel during design: Rename layers and keep this panel open as you design your site to be mindful of your nesting structure and make quicker element selections.

Best Practice: Regularly use and update the Layers panel to maintain a clear and organized site structure. This practice helps in quickly locating and editing elements, especially as your site grows.

Step 2: Replace the logo

To replace a logo: 

  1. Replace Image: Click on the image element and, in the floating design panel, select Replace Image. 
  2. Sync with Content Library: If the Replace button is grayed out, the widget is connected to the Content Library. Click Edit, then Replace, and select the new logo image.
  3. Customize Logo Size: Open the design panel and adjust the logo size for better visibility, if necessary.

Best Practice: Ensure your logo is high-quality and appropriately sized. A clear and well-positioned logo reinforces brand identity and enhances the professional appearance of your site.

Step 3: Configure navigation links

The Navigation Links widget generates an all-inclusive navigation menu with links to links to all pages on the site, and you can modify the menu to showcase select links. Normally, you may need to add the Navigation Links widget from the Widgets panel, but for our example, we do not need to add a widget since the template already contains one in the header.

To configure the navigation links:
  1. Select the Navigation Links Widget: Select the Navigation Links widget from the Layers panel and in the floating design panel select Content. Or, right-click the widget and select Edit Content.
  2. Navigation Content Modal: In the Navigation Content modal, select one of the following:
  3. Site pages. Populate the navigation links with site pages, navigation folders, and anchors. This menu is generated automatically based on the site pages. To edit the pages in your site, click Open Pages Panel. 
  4. Custom links. Create a custom menu with links to inner pages, footer navigation (refer to the example found in the footer section of the “Electrician” template which uses only the most useful links to describe the company’s top services), social accounts, and more.

To configure the design: 
  1. Access Design Settings: Right-click on the Navigation Links widget and select Edit Design to open the design panel.
  2. Set Layout Settings: Select an orientation and layout for the site and sub-page navigation.
  3. Set Pages Settings: In the Pages property of the design panel, you have the following options:
  4. All Pages. Configure the background color, space between items, navigation item direction, divider style, and font style for the link text.
  5. Selected page & hover. Select a display effect for the selected page and configure the font for the link text.
  6. Set Subpages Settings: In the Subpages property of the design panel, you can configure the background color, shadow spacing between items, divider style, and font style for the link text.

Best Practice: Keep your navigation simple and intuitive. Ensure that important links are easy to find and the navigation is consistent across all pages to enhance user experience.