Academy

Want to learn how to create and organize pages in WeWeb? Check out our Build a Proof of Concept course, which covers essential page creation techniques and how to design effective page structures.

Intro to pages

A page is the distinct screen that appears when visitors go to a specific web address (URL) on your web app. Each page shows different information and features, like how a "Contact" page displays contact details while an "About" page shows company information.

Create a page

To create a new page in WeWeb:

1. Click on the Pages icon in the Interface tab on the left side of the editor
2. Click on the Add Page button at the top of the Pages panel
3. Enter a name for your page
4. Choose whether to copy content from an existing page or start with an empty page
5. Configure the page's default URL path
6. If copying from another page, decide which sections should be linked across pages
7. Click Create to create the page

TIP

Linked sections are referred to as Multi-page sections in WeWeb. They are useful to improve the user experience and page loading time of your web application.

Learn more about using multi-page sections in WeWeb.

Page name

The name of your page. This is what you'll see in the Pages panel when you open the pages list in the Interface tab.

To update a page name:

1. Open the Pages panel in the Interface tab
2. Click on the page you want to rename
3. Update the Page name field
4. The name will be automatically saved

Page folder

Organize your pages into folders to keep your project structured. You can assign pages to folders and create new folders as needed.

To add a page to a folder:

1. Open the Pages panel in the Interface tab
2. Click on the page you want to organize
3. Select or type a folder name in the Folder field
4. The page will be moved to that folder in the pages list

Draft mode

Pages with draft mode Enabled won't be included when you publish your WeWeb app. This is useful when you're working on a page that isn't ready for production yet.

Pages in draft mode are indicated by a warning color in the Pages panel:

To enable draft mode for a page:

1. Open the Pages panel in the Interface tab
2. Click on the page you want to set as draft
3. Toggle Draft mode to Enable

WARNING

Changing a page's Draft mode setting only takes effect after you (re)publish the app.

For example, if the app was published when Page A had draft mode set to Disabled, changing the draft mode of Page A to Enabled in the WeWeb Editor won't remove the page from production until you publish the app again.

Note: You cannot enable draft mode on your homepage.

URL paths

Configure the URL path for your page to control what appears in the browser's address bar when users visit the page.

To configure URL paths:

1. Open the Pages panel in the Interface tab
2. Click on the page you want to configure
3. Click on Url paths in the menu
4. Set the default path for your page

Adding path variables

You can add variables to your path to create dynamic pages. Path variables are defined using the syntax {{variableName|defaultValue}}.

For example, a path like products/{{product_id|123}} creates a dynamic product detail page where product_id can change based on which product the user is viewing.

You can access path variables anywhere in your page through the data explorer under From path in current page.

TIP

Path variables are essential for creating detail pages for your collections. For example, if you have a collection of products, you can create a page with the path products/{{product_id|123}} and use the product_id variable to fetch and display the specific product details.

Learn more about dynamic collection pages and configuring URL parameters.

Page workflows

Page workflows allow you to run actions when specific events occur on a page, such as when the page loads, when a user scrolls, or when an error occurs.

Workflows are now managed in a dedicated Workflows tab in the Interface section, not in the page settings.

To create or edit page workflows:

1. Open the Workflows tab in the Interface section
2. Select the Page Triggers tab
3. Choose which page you want to add workflows to from the dropdown
4. Click the + Add Workflow button to create a new page workflow
5. Configure the trigger for your workflow (for example, on page load, on page scroll, etc.)
6. Add actions to your workflow

Page workflow triggers include:

• On app load (before fetching collections)
• On page load (before fetching collections)
• On app load
• On page load
• On page unload
• On page scroll
• On page resize
• On keydown
• On keyup
• On collection fetch error

Common use cases for page workflows:

• Reacting to a user scrolling up or down the page
• Updating a variable before a collection is fetched
• Checking for a purchase completion after a page loads
• Manipulating collection data before displaying it on the page
• Displaying a customized error message when a collection fetch fails
• Triggering analytics events when users interact with the page

TIP

For more information about creating and managing workflows, see the Workflows documentation.

Custom code

Add custom code to specific pages for tracking scripts, custom styling, or specialized functionality that only applies to that page.

To add custom code to a page:

1. Open the Pages panel in the Interface tab
2. Click on the page where you want to add custom code
3. Click on Custom code in the menu
4. Choose where to inject your code:
   • Page header — Code is loaded before the page renders (useful for custom CSS or JavaScript, but may affect SEO performance)
   • Page body — Code is loaded after the page renders (ideal for tracking scripts, doesn't impact SEO)

TIP

Custom code added at the page level only applies to that specific page.

To add custom code across your entire app, use the Custom code section in the Settings tab of the Integrations section.

Learn more about adding custom code at app level.

WARNING

When you add custom CSS to a page or project, do not include <head> or <body> tags. WeWeb handles those tags automatically.

Languages

Configure which languages are available on a specific page and control how language-specific URLs are structured.

To configure page languages:

1. Open the Pages panel in the Interface tab
2. Click on the page you want to configure
3. Click on Languages in the menu

In the Languages panel, you can:

1. Add languages to your project
2. Define the default language of your project
3. Decide if you want to add the default language slug to the URL path of the current page
4. Decide which languages should be enabled on the current page
5. Toggle between active languages to preview the page content in different languages

Working with multiple languages

When you have multiple languages enabled on a page:

1. Text elements on the page will prompt you to provide content in each language
2. You can toggle between languages in the editor to preview and edit content
3. The appropriate text will be displayed based on the user's language selection

Duplicate a page

Duplicate a page when you want to create a new page with similar content and structure to an existing one.

To duplicate a page:

1. Open the Pages panel in the Interface tab
2. Click on the page you want to duplicate
3. Click on Duplicate {page name} in the menu
4. Configure the new page name and URL path
5. Choose which sections should be linked
6. Click Create to create the duplicate

The duplicate page panel provides the same options as creating a new page, with all content pre-filled from the page you're duplicating.

Create collection page

Create static collection pages to generate multiple pages from a single template, with each page pre-rendered with content from your collection.

To create a static collection page:

1. Open the Pages panel in the Interface tab
2. Click the dropdown arrow next to the Add Page button
3. Select Add static collection page
4. Choose which collection to use
5. Configure the page template and paths
6. Click Create to generate the pages

Static collection pages are useful when you want to publish collection pages with pre-rendered content for better SEO and faster initial page loads.

WARNING

To create a static collection page, you need to have a static collection configured in your project.

Learn more about static collection pages and dynamic collection pages.

Make a page the homepage

Set any page as your app's homepage. The homepage is the page that users see when they visit the root URL of your app.

To make a page the homepage:

1. Open the Pages panel in the Interface tab
2. Click on the page you want to set as the homepage
3. Click on Make {page name} your home page in the menu
4. Confirm the change

Remove a page

Delete pages that are no longer needed in your app.

To delete a page:

1. Open the Pages panel in the Interface tab
2. Click on the page you want to delete
3. Click the trash icon at the top of the page settings panel
4. Enter the page name to confirm deletion
5. Click Delete page

WARNING

You cannot delete your homepage. If you want to delete the current homepage, first set another page as the homepage, then delete the original one.

Be careful when deleting pages, as any links pointing to that page will be broken.