# Page

The 'Page' content type is the most flexible content type.

This content type allows you to choose from a wide range of CivicTheme out-of-the-box components to build a striking *landing page* or a simpler *content* page. The style of the page depends totally on how you use the components.

### Create a Page

1. Go to `/admin/content`
2. Select `Add content`\\

   <figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-844192ee61b3d2df997a8804247d1714f34a2d3f%2Fimage.png?alt=media" alt="Add Content page in the Drupal back end edit interface"><figcaption><p>Add content</p></figcaption></figure>
3. Select 'Page'\\

   <figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-76cb4497f16c1a3da093dc13620c645e3c626cac%2Fimage.png?alt=media" alt="Back end edit interface for the Add content screen"><figcaption><p>Add Page</p></figcaption></figure>

You now have a page with a Content tab and a Banner tab.

### Set up the page essentials

Most fields are empty when the page is first created. There are some compulsory fields that must be filled before you can save the page, and some other important items to configure now.

Note there is a Content tab and a Banner tab. Go to [Banner](https://docs.civictheme.io/content-authoring/content/page-content-type/configure-the-banner) to read more about configuring a per-page banner.

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-3964b5525b14c98d8b047b429be8a02c948935ca%2Fpage-1.png?alt=media" alt="Back end edit interface of the Page content type"><figcaption><p>Content tab on a newly created Page</p></figcaption></figure>

1. Add the page title in the Title field
2. Add the Summary. This displays in teasers and within links.
3. If you want a 'Table of contents' to display, select the checkbox. The TOC will display at the top of the page.

#### Components

CivicTheme has many out-of-the-box components.

Go to [Components](https://docs.civictheme.io/content-authoring/components) to learn how to configure components to build your page.

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-fcc086d65e7b46201260498e2bcbd97e97ef5f0a%2Fcomponents.png?alt=media" alt="Dropdown box showing the list of available components for the Page content type"><figcaption><p>Component list</p></figcaption></figure>

#### Appearance

Add a thumbnail image, set the vertical spacing, hide sidebar and tags.

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-15727b27ce8f438c758e288ee10b998b60b60b15%2Fappearance.png?alt=media" alt="Appearance fields"><figcaption><p>Appearance fields</p></figcaption></figure>

#### **Thumbnail**

Add an image for cards and teasers that link to this page. Every time you link to this page using a component that has an image field, it will use this image.

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-806fc237793826426526d733fd3cd44e42309264%2Fthumbnail.png?alt=media" alt=""><figcaption><p>Thumbnail added</p></figcaption></figure>

#### **Vertical spacing**

Vertical spacing allows you to add some extra white space at the top or bottom of the page, or both.

* Top: between the bottom of the banner and top of the H1
* Bottom: above the footer
* Both: both of the above.

Open the Vertical spacing dropdown and select from None, Top, Bottom, Both.

#### **Hide sidebar**

Select this if you want to hide the sidebar. This will cause the content and components to display full width of the page, removing the default gutter, or sidebar, on the left and right sides.

### Menu settings, Last updated date, URL alias and Promotion options

Find these settings on the right side of the interface.

<div align="left"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-45f5c140555e25da97ff127338370463e0d688f7%2Fright-side.png?alt=media" alt="" width="375"><figcaption></figcaption></figure></div>

#### Menu settings

To place the page within the site menu, open the 'Menu settings' section. By default the page is not in the menu.

1. Check 'Provide menu link' to open the menu link fields.
2. Enter the 'Menu link title'. This is usually the page name and will display in the menus.
3. Add a description if you like, this displays when hovering over the menu link.
4. Open the 'Parent link' dropdown and select the *parent* of this page.
5. The 'Weight' determines the order in which each page displays below their parent page. The lower the weight the higher the position in the menu. You can also configure the order of the site menu in `/admin/structure/menu`.

<div align="left"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-5e50630440f7640296ad36f3f25fa6c9a42540ab%2Fmenu-settings.png?alt=media" alt="Menu settings fields. Menu link title, Description, Parent link, Weight" width="375"><figcaption><p>Menu settings</p></figcaption></figure></div>

#### Last updated date

By default the 'Last updated date' is checked to display on the page. It will automatically display the last published date. Uncheck the box if you don't want to display the last updated date.

If you want to customise the date, use the date picker.

#### URL alias

The URL alias is set to generate automatically. It uses the page title and the menu structure to create the URL alias.

To override the automatic URL alias, uncheck the box and add the alias to the URL alias field.

#### Authoring information

Automatically records who created the page and on which date. There is usually no need to modify this setting.

#### Promotion options

Promote to the front page (homepage) to display a teaser or card and stick at the top of lists.

<div align="left"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-a9c2b8cbea80600ca710ff3f3bb0363ec04ddbcd%2Fpromotion-options.png?alt=media" alt="" width="375"><figcaption><p>Promotion options</p></figcaption></figure></div>
