Campus Alert: Find the latest UMMS campus news and resources at umassmed.edu/coronavirus

Search Close Search
Page Menu

Episerver CMS Blog

Horizontal Full Width Block

Posted On: Wednesday, June 12, 2019 Posted By: Leslie Rutter Tags: Blocks, Training

This block is a container for other blocks which allows you to set a background color that extends the full width of the browser. This can be used to help break up the layout and highlight your information. While this block has no text areas itself, you drop other blocks within it. You can drop 1 or many and set the columns widths on each block. You can also set the width of the block area to extend the full width, the theme width as to align with other content on the page, or a width that you can set. Some examples are shown farther below.

Properties of this block

  1. Tab: Drop Block Area
    • Drag and drop your blocks, 1 or more
      horiz-area-dropblock.png
  1. Tab: Layout
    horiz-area-layout.png

    • Text Color – colors limited to UMMS palette
    • Background Color – colors limited to UMMS palette
    • Maximum Inner Width – pick list
      horiz-area-layout-maxwidth.png

    • Other – if other chosen, set a number (pixels)
      • NOTE: If you pick a number larger than the users screen size, this will default to 100% of their browser width
        horiz-area-layout-other.png

Examples of this block

horiz-area-example3.png

Setting the widths on the blocks to appear in columns

You can adjust the column widths of your blocks in layout (preview) view or properties view. The default setting, if unset, will be Automatic which is the same as Full.

horiz-area-set-block.png   horiz-area-set-block-pv.png

Mixing blocks in Top Slider area
Here are 3 blocks: 1 is a slider block while the other 2 are horizontal full width blocks to provide some colored backgrounds.

All blocks will extend full width automatically. You can then set their width using Display As in the block menu as show above.

horiz-area-dropblock-reg-horiz.png