---
description: >-
  Even simple apps have more than one page, and most apps will have multiple
  pages. Get an understanding of pages within your Appeggio app.
---

# Pages

## What Are Pages?

Pages are generally used to separate your app into logical segments or distinct pieces of functionality, much like the chapters of a book.

Application pages are typically dynamic and interactive, allowing users to perform actions and interact with data. For example, your application might have a products page, which displays available products and allows these to be added to a cart. Then, a different page would be the checkout page, which lets the user input payment information and pay for the product.

In the Appeggio editor, you can switch between pages in your application using the Page Selector dropdown in the Top Toolbar.&#x20;

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2F4jEgAiyQ5kDTOp8ucjeu%2FMovingBetweenPages.gif?alt=media&#x26;token=a222c59e-bdfd-4423-8a67-b61884d14cb5" alt="A gif showing how to switch between pages in your application using the Page Selector dropdown in the Top Toolbar."><figcaption><p>Switching Between Pages</p></figcaption></figure>

## Adding A New Page

To add a new page, click on the 'New Page' button on the top left of the screen. You'll be prompted to fill in some basic information.

### /Path

You needn't be concerned about the technical aspects of the path. Appeggio and the browser clients will manage all of that. However, you should make the 'Title' of your page (the words after the /) short, descriptive, and easy for humans to recognize, e.g., Home, Pricing, Features, etc. Search engines use the page path to understand your website, so following these rules is important.

### Title

Every page needs a title. The title displays on the browsers tab when accessing the page within a browser. When crafting a title, users should consider clarity, relevance, length, and keyword SEO optimization to ensure it accurately represents the page and attracts users' attention during browsing or search queries. You can find it within the settings of a page or when creating a new page.

### Description

A page description, also known as a meta description, is a brief summary or snippet of text that appears below the title in search engine results. The page description typically describes the page's expected use and the functionality within. Usually, it's a couple of sentences long. This is an important description, as it helps with ranking web apps in Search Engines such as Google, Bing, and Yahoo. Keep the description within the recommended length limits, typically around 150-160 characters, and include relevant keywords to improve search engine visibility and click-through rates.

### Keywords

Keywords are words or phrases that describe the page's content and are used by search engines to index and rank the page. Including relevant keywords is crucial to improve the visibility and ranking in search engine results, driving relevant organic search traffic to the page.

### Including A Navbar Header and Footer for the Page

If you'd like your new page to include a navbar header and a footer to match the other pages of your app, select from a master from the dropdown.&#x20;

### Visibility - Set Who Can Access the Page

You can also select who gets to see the new page. Pages that are only visible to registered users and administrators require a login.&#x20;

Here is an example of what this should look like:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FVzMT7Rt5DWuZhsYpGWY3%2FHelp%20-%20Pages%20-%20Create%20New%20Page.png?alt=media&#x26;token=3c2a36a8-7569-4c57-a157-7b96a016e020" alt="An example of setting up a page with the visibility information."><figcaption><p>Setting Up Your Page, and Adding Descriptive Information</p></figcaption></figure>

## Adding a Background Image to a Page <a href="#editing-and-formatting-the-card" id="editing-and-formatting-the-card"></a>

To add a [background image](../customising-and-formatting/background-images) to your page, select the page, then go to the property editor in the right panel. Go to 'Image', then choose your preferred image from the Media Gallery or upload a new image. You can then adjust the [opacity](../customising-and-formatting/opacity) of the background image within the Decoration Editor as needed.
