# Pages

## **How to Create, Duplicate, and Delete Pages**

After creating an application, you can access its pages by clicking on **Pages** in the left-side toolbar. You will already have a **Home** page by default and can start creating new pages using the **Add Page** button at the bottom.

<figure><img src="https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FV8Ja4rGdtxvP0bqOmRyt%2Fadd-page-b.png?alt=media&#x26;token=f3f418bc-6af5-4acb-aa56-a70e76c56372" alt=""><figcaption><p>Adding a new page</p></figcaption></figure>

Each page has a three dots icon on it, which opens a menu with the following options: **Settings, Duplicate,** and **Delete.**

<figure><img src="https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FtpxfH0i9gtaZVhcq5zLU%2Fpage-menu-b.png?alt=media&#x26;token=af90e56f-eb2e-4253-aeb3-d43b3511c81f" alt=""><figcaption><p><strong>Page actions</strong></p></figcaption></figure>

Well, the **Delete** option is obvious. It simply removes the page from your Softr app. Now, let’s check out the **Duplicate** action, and then we’ll get back to page **Settings** and review the configuration options.

### Duplicating a page

After clicking on **Duplicate**, a copy of the page will be created below.

<figure><img src="https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2Fv6xDyUbWNi8z7b8oZagH%2Fduplicate-b.png?alt=media&#x26;token=1b9899d7-202a-4bda-887a-203c13394cf9" alt=""><figcaption><p>Duplicating a page</p></figcaption></figure>

### Enabling and disabling a page

You'll notice that each page has an "eye" icon on it, which can be used to disable it. If you disable a page, it won't go anywhere and will just become unavailable (e.g. user won't be able to access it through its URL anymore). The good thing is that you can bring it back (i.e. enable it) whenever you want. See below how it works.

<figure><img src="https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FLRf3LjizR7Ux33d8XXz1%2FScreen%20Recording%202022-09-10%20at%2016.22.41.gif?alt=media&#x26;token=9c23b70a-250b-4e36-b0fb-ab7e81f83ae0" alt=""><figcaption><p>Disabling a page</p></figcaption></figure>

This feature is also available in page settings as you'll see next.

## Page Settings

As mentioned above, you can access the page settings by opening the page's menu and choosing **Settings**. Let's review all the settings one by one.

### General

In the **General** section, you have the **Page Name** and **URL** fields, where you can edit the name and URL you had assigned to the page on creation. You can also [Disable](#undefined) page (i.e. hide it) and **Enable** any time later on.

Lastly, there's the **Delete Page** button to remove the page from your Softr app if needed.

![General page settings](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MjUMMsO4-mOl0ho0yHB%2F-MjUOewYILM3dvI9jfQg%2Fpage-general-b.png?alt=media\&token=d01b20d8-7460-40aa-b74b-3d27f2fe55c0)

### SEO

![SEO Title and Description](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MjUP4wRLoDgX5L18Jv0%2F-MjUPStTycXPDZ24c72D%2Fseo-settings-b.png?alt=media\&token=4945bfdb-241e-4cf4-ac99-375b3c3500e5)

In the **SEO** section, we have page **Title** and **Description**. In the **Title** field you set the HTML title tag, which appears in the HTML head section of the page. It is also called the SEO title of the page. In the **Description** field, you add the meta description of the page, which appears in the head section as well. Let’s consider a specific example. When you search for something on the web, you receive a list of results presented as snippets. The title and description you’ve provided for your page will appear here in the snippet as shown below.

![](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MPiZ21EmA9DuNlh3YkI%2F-MPiZRBoB4n7hcx_8bfG%2Fsearch_b.png?alt=media\&token=cca82114-9f95-4c70-9b24-2cb33d2da39f)

### Social

Next, in the **Social** section, we have three fields for configuring the page appearance on social media. By default, if you don’t add anything in the first two fields here, the **Title** and **Description** provided in the **SEO** section will appear when sharing the page on social media.

The third field is for adding a **custom image** for social media. Please, pay attention to the image size guidelines and keep the aspect ratio.

Now, let's fill out these fields and see how they appear on social media (e.g. Facebook). Below is what we've added in page settings.

![Social fields filled in](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MjUQY8scd1Co3k8p6Ke%2F-MjUQptkzl0aYXbAwT_d%2Fmetas-b.png?alt=media\&token=e60d996f-4604-4d3e-a578-f634d4905951)

Here's what the shared page looks like on Facebook.

![How the page appears on Facebook](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MjUQY8scd1Co3k8p6Ke%2F-MjURan_UwPohn11PNxT%2Fpost-social-b.png?alt=media\&token=d35837d1-18b5-41f5-9f89-435b94b72584)

## Default Header & Footer

![Default Header & Footer Section](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MjUQY8scd1Co3k8p6Ke%2F-MjURuZR4BZG-Sjy4K_4%2Fdefault-header-footer-b.png?alt=media\&token=32127e8b-c08d-4947-92f2-932f3a22a482)

By default,  if a **Header** and **Footer** are already set in the **Home** page, they are applied to the rest of the pages as well. In the **Default Header & Footer** section of the page settings, you can switch that off using the two toggles (see the screenshot above).

## Visibility

Here you define which user groups the page should be visible to and can also configure paid access for the page. The details can be found [here](https://softr.gitbook.io/softr-documentation/memberships/page-visibility).

## Custom Code

Finally, in the Custom Code section, you can add custom code to the page header or footer.

![Page Custom Code](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MjUQY8scd1Co3k8p6Ke%2F-MjUSHtPsJkPudD4Yxus%2Fpage-custom-code-b.png?alt=media\&token=b2bda188-acb0-4fc5-9863-ea7825b0e92d)

There can be many different cases when you might need this. For instance, you might want to apply a custom styling to your page to reduce the content text width. The below code achieves that once added in the **Code Inside Page Header** area (and applies a 10-column width instead of the default 12-column width).

```
<script>
document.addEventListener("DOMContentLoaded", function() {
    $('section[class^=text] div.col-12').addClass('offset-lg-1 col-lg-10');
});
</script>
```

Here's how it looks once added.

![Custom code added to page header](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MjUQY8scd1Co3k8p6Ke%2F-MjUSWSQf6rPmhyYd-F_%2Fcustom-code-added-b.png?alt=media\&token=92bb441c-c1be-4cd4-8e80-e4a0eb8104fc)

You need to follow the instructions provided by the script owners to see whether it's best to add the code to the header or footer.
