Designing Your Site: Navigating the Layout Tab

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. 

Accessing the Layout Tab

To find the layout tab, within your Fourthwall dashboard, go to Site Design> Layout. You’ll see a list of sections on the left and a preview of your page on the right.

Selecting which page you want to edit the layout

By default, the Home page will be open for editing 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".
  3. Some pages, like Checkout or Product Pages, have limited customization options due to their predefined structure.

Screenshot 2025-03-16 at 10.12.02 AM.png 

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

customizing pages.gif

 

Adding New Sections

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

  1. Click "Add page section."
  2. Choose from various categories, including text, images, videos, and more.
  3. To edit a specific section, click on its name, which will take you to its specific settings for that section.

Add page sections.gif

Available Sections

Layout Elements

  • Text: Add headlines, descriptions, or announcements.
  • Image: Upload an image.
  • Image with Text: Combine images and text.
  • Image Banner: Add an image with text and buttons.
  • Video Banner: Upload a video with text and buttons.
  • Custom HTML: Embed your code for advanced customization.
  • Links List: Create a list of links with icons and text.

Engagement & Social

  • Announcement Bar: Add a text bar with an optional countdown.
  • Video: Upload or embed a video.
  • Recent Posts: Embed your latest membership posts.
  • Social Feeds:
    • YouTube Feed: Show your latest YouTube videos.
    • TikTok Feed: Display your latest TikTok posts.
    • Instagram Feed: Showcase your Instagram posts.

E-commerce & Monetization

  • Shop: Highlight a set of products or multiple product collections
  • Memberships: Promote different membership levels.
  • Donations: Ask your fans for support.
  • Newsletter: Add an email signup form.

Other Site editor tabs: Style, Pages, and Theme

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?
10 out of 28 found this helpful

Articles in this section

See more