Overview

Block settings is a feature in Bento that enables you to create a full width layout on your website and include features such as background images and color. Additionally, you can adjust the block to fill the entire vertical space of the browser window and align the content vertically within that visible window and add padding around your content to create a more pleasing page layout. 

This feature is available in the page content area of your Bento page, as well as in the mega menu option in the Station Header

How to apply block settings

Figure 1

  • Add a component to the block as you normally would and hover over the block and click the settings (cog) icon (Figure 2).

Be sure to click the settings icon in the grey panel, not the orange panel. The icons in the orange panel are for the component settings. Block settings are in the grey panel.

Figure 2

On the left side of the page, use the available options to customize your block.

Add background color

  • Click the toggle next to Background Color so that it displays ON to add a color to your block (Figure 3.1). 
  • When the toggle displays ON, click the color swatch that appears next to Pick Background Color (Figure 3.2). The default color is white.

Figure 3

  • To select a color, you can do any of the following:
    • click a custom color from the color palette
    • type a hex value
    • click the theme swatches to select a color that's in your theme
    • type RGB values
  • The selected colors are reflected on your page and will appear behind any content on the page.
  • When finished, click outside of the popup box.

Figure 4 

click image to enlarge


Add a background image

You can add a background image of any size to your block. Your image can also be transparent or solid, a graphic or pattern. If you add a transparent image to a background color, the background color will appear on the image.

  • To add an image to your block, click the toggle next to Background Image so that it displays ON (Figure 5.1). 
  • Once the toggle displays ON, hover your mouse over the placeholder graphic and click Select Image to open your filer folders and select an image (Figure 5.2). You do not need to submit a specific image size but how the image appears on your page is dependent on the image size. A smaller image will take up less space on the page, whereas a larger image will automatically stretch and fill up more space. 

Figure 5

You can use both the background image and background color options at the same time. However, if your background image is not transparent, the background color will not be visible. If your background image is transparent, the background color displays behind the image. 

  • After you've added your image, the image thumbnail displays in the settings section and the image displays in the page body (Figure 6).

Figure 6

Add cell padding

  • In the top, left, bottom, and right padding input boxes, type a number between 0-200 to specify the space you want to establish between your component and the edges of visible portion of the window (Figure 7). 0 = no space. 200 = maximum space.

Figure 7

click image to enlarge

  • Click the toggle next to Full-width so that it displays ON if you want the content of your block to fill the entire width of the browser window. 
  • Click the toggle next to Window Height so that it displays ON if you want the content of your block to fill the entire vertical space in a browser window (i.e.: the visible portion of a page when being viewed in a browser). 
  • Click the toggle next to Vertically Center Content so that it displays ON if you want to center your content vertically. This can be useful if you don't have a lot of content on your page and want it centered on a larger layout.

Figure 8

  • In the Block Name textbox, type a name for this particular block of content. This name serves as an anchor on a single page website enabling users to navigate to different sections of the site (Figure 9). 

Figure 9

  • When finished, save the page.