Skip to content

Structure: pages, layout, and navigation

In this section, we'll create three pages, design a layout template with header and footer, and build navigation that works across all pages.

Creating pages

By default, Silex creates an index page (the homepage). Let's add two more.

In the Pages panel (left sidebar):

  1. Click the + button to add a new page
  2. Name it about
  3. Click + again and name the second new page contact

You now have three pages: index, about, and contact.

(Silex automatically creates index.html, about.html, and contact.html when you publish.)

Building the layout template

All three pages will have the same header and footer. We'll build this once using Symbols so changes sync across all pages.

Start with the index page (make sure you're on it). The general structure is:

Header (Symbol)
Main Content
Footer (Symbol)

Step 1: Add the main page structure

  1. On the canvas, click to select the root page element (the background)
  2. In the Blocks panel, add a Div — this will be our main page container
  3. Set this Div to Display: Flex, Flex-direction: Column (stacks sections vertically)
  4. Set Width to 100% and add a Max-width (e.g., 1200px) and margin: auto to center it (see Flexbox for details)

Step 2: Create the header

Inside the main container:

  1. Add a Div — this will be the header
  2. Label it "header" by adding a class (in the Element settings (gear icon), add class agency-header)
  3. Inside the header, add two elements side by side:
  4. Image — the logo (for now, use a placeholder or find an agency logo image)

  5. Nav element — for the navigation links

  6. Style the header:

  7. Display: Flex
  8. Justify-content: space-between (logo left, nav right)
  9. Align-items: center
  10. Add Padding (e.g., 20px)
  11. Add a Bottom border or Background color for visual separation

Step 3: Build the navigation

Inside the Nav element:

  1. Add a Div — call it agency-nav-links
  2. Set it to Display: Flex
  3. Add three Links (the <a> tag) inside, one for each page:
  4. Link text: "Home", Href: ./index.html (relative path)
  5. Link text: "About", Href: ./about.html

  6. Link text: "Contact", Href: ./contact.html

  7. Add Column-gap to the nav-links Div (e.g., 24px) to space the links

  8. Style the links: set Font-size, Font-weight, Color. Optionally add padding or margin

Step 4: Create the main content area

After the header, inside the page container:

  1. Add a Div with class agency-content (or agency-main)
  2. This is where page-specific content goes (hero section, cards, forms, etc.)
  3. Set it to Flex-grow: 1 so it expands to fill available space
  4. Add Padding (e.g., 60px 20px) for breathing room

After the main content:

  1. Add a Div with class agency-footer
  2. Inside, add a Paragraph (for copyright text) or multiple elements for footer links
  3. Style the footer:
  4. Top border or background color for separation
  5. Add Padding
  6. Set a smaller Font-size (e.g., 14px)
  7. Center text with Text-align: center

Now we'll convert the header and footer to Symbols so they sync across all pages.

Make the header a Symbol

  1. Select the header Div (with class agency-header)
  2. Right-click → Create Symbol (or use the Symbols panel)
  3. Name it Header
  4. A dialog appears asking to confirm. Click OK

The header is now a Symbol. Any change you make to it updates on all three pages automatically.

  1. Select the footer Div
  2. Right-click → Create Symbol
  3. Name it Footer

Now both are Symbols. You can edit them from any page and changes apply everywhere.

Copy the layout to other pages

The index page is now complete with the template. Let's copy this layout to the about and contact pages.

Option A: Fastest way — Duplicate and customize

  1. On the index page, select all content (Ctrl+A or Cmd+A)
  2. Copy it (Ctrl+C or Cmd+C)
  3. Switch to the about page
  4. Paste (Ctrl+V or Cmd+V)
  5. Delete the main content area placeholder and add your own
  6. Repeat for contact

The Symbols (header and footer) will sync automatically across all pages.

Option B: Slower but explicit — Rebuild

  1. Switch to about
  2. Recreate the page structure manually
  3. Add the main page container with flexbox
  4. From the Symbols panel, drag the Header Symbol onto the page
  5. Drag the Footer Symbol to the bottom
  6. Add the main content area between them

Setting the homepage

The homepage must be named index. Silex does this automatically, so you're already set.

When you publish, index.html is your homepage and is served at the root of your domain (e.g., mysite.com/ loads index.html).

Before moving on, test that internal navigation works:

  1. In the editor, click one of the navigation links
  2. In the Element settings (gear icon), verify the href starts with ./ (relative path)
  3. Publish the site to GitLab Pages (see Publish or Publish to GitLab)
  4. On the live site, click a link. You should navigate to that page

If links don't work, double-check:

  • Href uses relative paths (./about.html, not /about.html or absolute URLs)
  • You're clicking Links, not plain text
  • The page names match exactly (case-sensitive: about.html not About.html)

Next steps

Your three pages are now connected with consistent header and footer. Head to Styling to build a design system with CSS variables and consistent spacing.

  • Pages — creating and managing pages
  • Flexbox — layout with flex
  • Symbols — synced reusable components
  • The editor — editor interface overview
Edit this page on GitLab