Designing Your Site: Navigating the Layout Tab

Learn how to navigate the site designer's Layout tab to arrange pages, sections, and content

Your website's design is key to making a great first impression. With the updated Fourthwall site editor, you can easily customize your site’s appearance using four main tabs: Layout, Style, Pages, and Theme.

This guide will walk you through the Layout tab, where you can visually customize your site’s structure and content. 

Access the Layout tab

Within your Fourthwall dashboard, navigate to Site design > Layout

You’ll see a list of sections on the left and a preview of your page on the right.

Choose which page layout to edit 

By default, the Home page opens every time you click on the Layout tab. If you want to customize a different page:

  1. Click on the dropdown menu at the top to switch pages.
  2. Choose an existing page or create a new one by selecting + Create Page.
Layout menu - Create page.png

Note: Some pages, such as Checkout or Product pages, have limited customization options due to their predefined structure.

Edit sections within your page

Each page is made up of different sections, such as headers, banners, and product displays. Here’s how to edit them:

  • Move: Click and hold the six-dot icon next to a section, then drag it up or down.
  • Hide: Click the eye icon to remove a section from the page temporarily.
  • Delete: Click the section and select Delete to remove it permanently.
  • Edit: Click on a section’s name to open its settings and customize text, images, or layout.

customizing pages.gif

Add new sections

Want to add more content to your page? Follow these steps:

  1. Click Add page section.

    Click on Add page section.png
  2. Choose from various categories, including text, images, videos, and more.

    GIF - FW - All available sections to add.gif
  3. To edit a specific section, click on its name, which will take you to its specific settings.

    GIF - FW - Edit a page section.gif

Available section types

Layout elements

  • Text – Add headlines and descriptions
  • Image – Upload an image
  • Image with text – Combine image with text
  • Image banner – Combine image, text, and buttons
  • Video banner – Combie video, text, and buttons
  • Custom HTML – Embed your own code
  • Links list – Create a links list with icons and text
  • Announcement bar – Add a text bar with an optional countdown
  • Video – Upload or embed a video
  • Video with text – Combine video with text

Shop elements

  • Featured collection – Showcase your products.
  • Featured product – Showcase your product
  • Collections list – Showcase your collections

Memberships elements

  • Membership tiers – Promote your "Memberships" tiers
  • Recent posts – Embed your latest membership posts

Social feeds

  • YouTube feed – Embed your latest YouTube videos
  • TikTok feed – Embed your latest TikTok videos
  • Instagram feed – Embed your latest Instagram posts

Other

Start customizing

While the Layout tab focuses on structure, these tabs help refine your site’s look and feel:

  • Style: Adjust colors, fonts, and branding
  • Pages: Manage and organize different pages
  • Theme: Apply pre-made themes for a cohesive design

With Fourthwall’s new and improved site editor, you have more control over your website’s design than ever before. Experiment with different sections and layouts to create a unique and engaging experience for your visitors.

Ready to start? Head over to Site Design> Layout and customize your site today!

Was this article helpful?
12 out of 35 found this helpful

Articles in this section

See more