Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents
maxLevel2
minLevel2

Overview

Pages in Bento 3.0 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.


Expand
titleView the tutorial

Multimedia
namecreate-page-new.mp4
width800
height450



Warning

When saving the header or footer on your page, you must hover over the header and footer section and click the save icon.

Expand
titleSee what this looks like


How to create a page

  • From the main admin screen, click Pages (Figure 1).

Figure 1

  • Hover over the page title (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).
Note

To create a page tree that reflects your site structure, be sure that the page you want to add a child page under is currently being viewed. A page being currently viewed has a solid right-facing arrow to the left of the page name. When you click New to add a new page, it will be a child page of the page displaying the arrow. Pages can be nested using the page tree, but your main pages must be rearranged in the menu.

Expand
titleView a sample page tree with the active page highlighted

 


Figure 2

  • In the Page Title textbox, type the name of your page (Figure 3.1). This page name only displays in the Bento admin; use the menu component to name this page in your website menu.
  • The Pathname field auto-populates as you type the title (Figure 3.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 3.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 3.4). 
  • Click Advanced Settings dropdown menu for more options (Figure 3.5).

Figure 3

  • If this page is shared on social media sites, the Social Media Image can be used to display the representative image shared on social networks. To add an image, hover over the image icon and click Select Image to add an image from your filer folders (Figure 4.1). If you do not add an image to this field, Bento will display the first image on the page. 
  • In the Title Tag of the SEO Settings section, type a title for your page that will appear in browser tabs (Figure 4.2). If you do not type anything in this field, the Page Title will be used.
  • In the Description Meta Tag textbox, type a brief description of the content of your page (Figure 4.3). This information appears in search results when someone conducts a search on the internet.
  • In the Keywords Meta Tag textbox, type keywords that are relevant to the content of your page (Figure 4.4). Remember to implement SEO best practices here and list only the most relevent 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 it from search engines (ON) (Figure 4.5).
  • When finished, click Save (Figure 4.6).

Figure 4

Blocks

All of your Bento content must be contained within a block. Blocks are sections of your page that hold components and components are what 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

How to select a block layout

Each block can be formatted on your page in the following ways:

View the block layout selector

Page LayoutDescriptionExample

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.

3 column

Three even columns - each column is 33% of the page.

4 column

Four even columns - each column is 25% of the page.

Full width

One column with no padding. Content stretches to far left and right side of browser. This is typically used to hold the Hero Carousel. 

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 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. 

    Expand
    titleSee 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.

How to add blocks

  • 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). 

Figure 4

  • The list of available components for that section appears (Figure 5). 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 5

How to move blocks

You can move entire blocks of content up or down your page as well as to different sections of the page.

  • Hover your mouse over a block, and when the orange border with icons appears, click the "grippy" icon (the orange dotted block) and drag the entire block to its new position (Figure 1). Let go of the grippy icon when the background in the space to which you are moving it has turned orange. The orange color indicates that the piece you are dragging will fall into place and commit to its new position.

Keep in mind that items within a global component, such as the header and footer, can only be moved within the global component; these items cannot be moved to another section of the page. Alternatively, components from other sections of the page cannot be moved into a global section. 

Figure 1

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.

Learn how to set the image on your overall site

  • 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

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 will surface when people share the page to Facebook and Twitter (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.
  • When finished, click Save (Figure 4.4).

Figure 4

  • When someone shares the page on Facebook or Twitter, the image displays (Figure 5).

Figure 5