---
title: "How to Create a Page"
canonical: "https://docs.pbs.org/space/B3/4751444/How%20to%20Create%20a%20Page"
format: markdown
---
> Macro (toc)
## Overview
Pages in Bento are created dynamically, which means they can be seen and modified as you are building them. You can add and remove components, change the page layout, add and remove page columns, modify your header and footer, and rearrange every item on your page on the fly.
**Need to create an anchor link on your page? ****[Learn how](https://docs.pbs.org/space/B3/4751557/Using+Anchor+Links)**
Saving the header or footer on your page is available when you go to save the page.
## How to create a page
- From the left side navigation menu on your dashboard, click **Pages** (Figure 1).
Figure 1
- Hover over the** title of the page** (Figure 2.1) under which you want to add a page and click the** downward-facing arrow** that surfaces to the right of the page title (Figure 2.2).
- Click **+ Page** (Figure 2.3).
> ⚠️ Only Site Admins and Editors see the additional selections on page dropdown menu; Writers only have access to Page and Settings. [See roles and permissions](https://pbs-docs.atlassian.net/wiki/spaces/B3/pages/4751446)
Figure 2
- Select the** type of page** you are creating (Figure 3.1). Each selection provides a template that is preformatted for the specific type of content that you are adding.
- Click **Create **(Figure 3.2).
Figure 3
- In the Page Title textbox, type the **name of your page** (Figure 4.1). This page name only displays in the Bento admin; use the [menu component](https://pbs-docs.atlassian.net/wiki/spaces/B3/pages/4751466) to name this page in your website menu.
- The Pathname field auto-populates as you type the title (Figure 4.2). We recommend not changing this since it is optimized for best SEO practices.
- The Full URL displays as it will display on your site (Figure 4.3).
- Click the **ON/OFF toggles** in the Header and Footer sections to display or hide the sitewide header and footer on this particular page (Figure 4.4).
- In the Rail section, click **Left **or **Right **to activate the page side rail (Figure 4.5). [Learn more about the rail](https://docs.pbs.org/space/B3/4751560/Rail)
- Click **Advanced Settings dropdown menu** for more options (Figure 4.6).
- Click **Bentomatic Settings** to make this page a Bentomatic (Figure 4.7). [Learn more about Bentomatics](https://docs.pbs.org/space/B3/4751562/Bentomatics)
Figure 3
### Advanced Settings
The Advanced Settings section offers ways to redirect your pages and assign tags for use in search engines.
**Page Redirect**
- Under the Page Redirect section, click **Another Redirect** to add a shorter or more distinct URL for this page (Figure 1.1). This is optional. [Learn about Redirects](https://docs.pbs.org/space/B3/4751671/Redirects)
- Once the textbox displays, type the** URL **to the page to which the current page should redirect (Figure 1.2).
- Click the **radio button **next to the type of redirect you'd like to apply (Figure 1.3).
- **301** - A permanent redirect from one URL to another; all users who request an old URL will be automatically sent to this URL.
- **302 **- Lets search engines know that a website or page has been moved temporarily. Use this type of redirect if you want to send users to a new site or page for a short period of time, such as when you're redesigning or updating your website.
Figure 1
- If this page is shared on social media sites, the Social Media Image can be used to display a representative image shared on social networks. To add an image, hover over the Social Media Image icon and click **Choose Asset** to add an image from your [filer folders](https://pbs-docs.atlassian.net/wiki/spaces/B3/pages/4751570) (Figure 1.2). If you do not add an image to this field, Bento will display the first image on the page.
Figure 2
**SEO Settings**
- To add a canonical URL to your page, click the** toggle** next to *Add Canonical URL* so that it displays **ON **(Figure 1.1). A canonical URL is the URL for the “main” version of a duplicated page, as determined by search engines like Google.
- When the textbox displays, type the** full canonical URL** (Figure 1.2).
- In the SEO & Social Media Title Tag textbox in the SEO Settings section, type a **title for your page** (Figure 1.3). This field displays in browser tabs, and if you do not type anything in this field, the *Page Title* is used.
- In the Description Meta Tag textbox, type a **brief description of the content of your page** (Figure 1.4). This information appears in search results when someone conducts a search on the internet. Remember to implement SEO best practices here and list only the most relevant tags for your page content.
- Click the **ON/OFF toggle button** in the *Hide From Indexing* section to allow your page to be searched by search engines (OFF) or hide the page from being discovered by search engines (ON) (Figure 1.5). This is useful if you are still working on a published page but don't want the page to be discovered when users search.
- Click the **ON/OFF toggle button** in the *Disqus *section to activate (ON) or deactivate (OFF) the [Disqus feature](https://docs.pbs.org/space/B3/4751649/Disqus) on your site (Figure 1.6).
- When finished, save your changes by clicking** Apply page settings** (Figure 1.7).
Figure 1
## Blocks
All of your Bento content must be contained within a block. Blocks are containers that hold [components](https://pbs-docs.atlassian.net/wiki/spaces/B3/pages/4751450) and components hold your content. Blocks can be formatted in different column layouts, however, one block cannot render in two different layouts. Each block can be assigned only one layout. [Learn more](https://docs.pbs.org/space/B3/4751444/How+to+Create+a+Page#Exceptions)
## How to select a block layout
Each block can be formatted on your page in the following ways:
[View the block layout selector](https://static.pbslearningmedia.org/media/help/block-selector.jpg)
> Macro (excerpt)
>
> | **Page Layout** | **Description** | **Example (*****click to enlarge*****)** |
> | --- | --- | --- |
> | 1 column | One column with padding on the side. | |
> | 2 column | Two even columns - each column is 50% width. | |
> | 2/3-1/3 column | Two columns - left column is 2/3 width of the screen and the right column is 1/3 width of the screen. | |
> | 1/3 - 2/3 column | Two columns - left column is 1/3 width of the screen and the right column is 2/3 width of the screen. | |
> | 3 column | Three even columns - each column is 33% of the page. | |
> | 4 column | Four even columns - each column is 25% of the page. | |
## Exceptions
Each block is an independent entity, which means you can format one block to display one way, such as two columns, while another block, directly beneath it, may display as four columns. This allows for a more flexible design. There are a couple of cases in which you may not be able to add the type of content you want to a block due to the size or design of the component. View [Component Library details](https://pbs-docs.atlassian.net/wiki/spaces/B3/pages/4751450) for a page layout guide.
- **The component does not look good in a particular column layout.** In cases where a component will not look good in certain column widths, you will be prevented from choosing that column layout. For instance, the Profile Grid custom component does not look good on a page in a three or four column layout, so you will receive a message explaining why you are prevented from choosing certain layouts.
See example
- **Certain components cannot be placed in the header and footer.** Page sections can determine what types of components can be added. The components that are available to add to the body of your page may not be available in the header or footer of your page. When adding components to your header and footer, you will be presented with only those components that are allowed.
- **Bentomatics affect block features.** If you add a Bentomatic to a block, the block cannot be cut or copied.
## How to add blocks
Each time you add a new block to your page, another new block displays directly beneath it. A new block created each time makes it easier to [rearrange content](https://docs.pbs.org/space/B3/4751653/How+to+Rearrange+Page+Content) should the need arise.
- To add a section to your page, click **Add Block** (Figure 1).
Figure 1
- Hover over your new block and click the** block layout icon** (Figure 2).
Figure 2
- Your layout choices are displayed; click the **layout you want to use for this block** (Figure 3). Each block is assigned its own layout. To change the layout for some content but not others, create another block.
Figure 3
- Hover over your new block and click the **plus sign** to bring up your component options (Figure 4.1).
- The [list of available components](https://pbs-docs.atlassian.net/wiki/spaces/B3/pages/4751450) for that section appears (Figure 4.2). Component options can vary depending on the section in which you are placing them. For instance, some components do not render correctly in certain column widths so if you are trying to put a large image in a four-column layout, you may not be presented with that option. Click the **component** you wish to add.
Figure 4
## Adding social media images
When someone shares a page from your Bento site to Facebook or Twitter, there is a representative image that appears on each social media site. The following instructions illustrate how to program the image you want to use.
### Image size
The following are the recommended image sizes for Facebook and X (formerly Twitter).
| **Platform** | **Image Dimensions** | **Max. Image Size** | **File Format** | **More information** |
| --- | --- | --- | --- | --- |
| Facebook | Min: 200 pixels wide by 200 pixels high | 8MB | | [https://developers.facebook.com/docs/sharing/webmasters/images/](https://developers.facebook.com/docs/sharing/webmasters/images/) |
| X (formerly Twitter) | Min: 300 pixels wide by 157 pixels high
Max: 4096 pixels wide by 4096 pixels high | 5MB | JPG, PNG, WEBP, GIF | [https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image) |
[Learn how to set the image on your overall site](https://docs.pbs.org/space/B3/4751441/Setting+Up+Your+Site#Social-Media-Settings)
- On the page to which you are adding the image, click the **Advanced Settings section** on the left side of the page to expand the menu (Figure 1).
Figure 1
- Hover your mouse over the Social Media Image and click **Select Image** (Figure 2). You should have already added the image you want to use to your filer folders. [Learn how to create filer folders and add content](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-create-a-filer-folder)
Figure 2
- To the left of the image you want to use, click the **downward-facing arrow** (Figure 3).
Figure 3
- The image has been added to the Social Media Image section and displays when people share the page to Facebook and X (Figure 4.1).
- Don't forget to fill out the** SEO Settings**! (Figure 4.2).
- The Hide From Indexing toggle displays OFF, indicating that the page is not crawled by search engines (Figure 4.3). To hide the page from search engines, click the **toggle **so that it displays **ON**.
- To incorporate the [Disqus feature](https://docs.pbs.org/space/B3/4751649/Disqus), click the **toggle **so that it displays **ON **(Figure 4.4).
- When finished, click **Apply page settings **(Figure 4.5).
Figure 4
- When someone shares the page on Facebook or X, the image displays (Figure 5).
Figure 5
