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.




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


How to create a page

Figure 1

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.

 


Figure 2

Figure 3

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.

How to add blocks

Figure 1

Figure 2

Figure 3

Figure 4

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.

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

Figure 1

Figure 2

Figure 3

Figure 4

Figure 5