Skip to main content

Design your site: Navigate 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 Layouttab, where you can visually customize your site’s structure and content.

Step 1: 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.

Layout tab showing sections list and site preview

Step 2: 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 tab page dropdown listing Home, Custom pages, Memberships, Policies, Checkout, and Create page option

note

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

Step 3: 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

Step 4: Add new sections​

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

  1. Click Add page section.

Click on Add page section

  1. Choose from various categories, including text, text blocks* (new!), images, videos, and more.*****Text blocks allow you to divide lengthy content into structured segments, making it easier for visitors to scan, comprehend, and engage with your site.

All available sections to add

  1. To edit a specific section, click on its name, which will take you to its specific settings.

Edit a page section

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​

Step 5: Customize!​

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!