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. From the Blocks panel, drag a Container onto the page — this will be our main page container
  2. Set this Container to Display: Flex, Flex-direction: Column (stacks sections vertically)
  3. 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 Container — this will be the header. In the Element settings (gear icon at the top of the right panel), set its Tag name to header
  2. Give it a class: in the Style Manager (paint brush icon), click + in the selector area at the top, type agency-header and press Enter
  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. Container with its Tag name set to nav — 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 Container:

  1. Add a Container with the class agency-nav-links
  2. Set it to Display: Flex
  3. Add three Text elements inside, one for each page. Double-click each one and type the link text, then in the Element settings (gear icon) set Link Type to URL and the URL to the page (each Text becomes an <a>):
  4. "Home", URL: ./index.html (relative path)
  5. "About", URL: ./about.html

  6. "Contact", URL: ./contact.html

  7. Add Column-gap to the agency-nav-links Container (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 Container with class agency-content (or agency-main), and set its Tag name to 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 Container with class agency-footer, and set its Tag name to footer
  2. Inside, add a Text (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 stay the same on all pages.

Make the header a Symbol

  1. Select the header Container (with class agency-header)
  2. Open the Symbols panel (left sidebar, Shift+S) and click +
  3. Type Header and confirm

The header is now a Symbol. Any change you make to it updates everywhere it is used.

  1. Select the footer Container
  2. In the Symbols panel, click +
  3. Type Footer and confirm

Copy the layout to other pages

The index page is now complete. Let's add the header and footer to the about and contact pages.

  1. In the Pages panel, switch to about
  2. From the Symbols panel, drag the Header symbol onto the page, then the Footer symbol below it
  3. Between them, add the main content area: a Container with its Tag name set to main
  4. Repeat for contact

Changes to the Header or Footer symbol now apply on all three pages.

Starting a new page from an existing one

The Clone page button of the Pages panel copies a page with all its content. The copy keeps the symbols: the header and footer stay in sync.

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 that its Link URL 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:

  • The URL uses relative paths (./about.html, not /about.html or absolute URLs)
  • The text you click has a Link set in the Element settings (gear icon)
  • 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 elements
  • The editor — editor interface overview
Edit this page on GitLab