Blocks

In addition to basic WYSIWYG editing of text and images as described previously in this style guide, the ASU website is composed of numerous different types of pre-designed blocks that can be mixed and matched to create countless layout options.

In LiveWhale, these blocks are called “Content Layouts” and can be added in any editable area from the editor toolbar:

1. Click “Insert” and then “Content Layout”.
2. Choose a layout from the dropdown to see a brief description and preview of it.
3. Click “Insert” to add the layout to your page.

Once added to a page, specified sections of the Content Layout can be edited while keeping the structure of the block intact.

Types

This guide breaks content layouts into three different groups based on their functionality and intended use.

Explore the many options of each type in the menu on this page.

Layout Blocks

These blocks are empty containers intended to create layouts that break out of the standard single narrow column built into the site template.

Static Blocks

Static blocks are used for inserting a single design element onto a page. The designs range from simple to complex, but unlike repeating blocks they have no controls for manipulating elements inside the blocks.

Repeating Blocks

Unlike Static Blocks, Repeating blocks contain the ability to add, remove, and rearrange elements within a single content layout. These blocks can be used to create multiple instances of a design element to easily create complex layouts.

Customizations

Many Blocks can be customized to create multiple variations of the same content layout. To add a customization:

1. Position your cursor with an editable area of the content layout
2. Click the Formats dropdown in the editor toolbar. Available options will appear under the “——Block Options——” section.
3. Select an option to apply it to the content layout. (Click the option again to remove the customization).

Available Options

The following options are available on some content layouts where applicable:

• Wide Block - changes the maximum width of the content layout from 680px to 1200px.
• Flipped - can be applied to certain content layouts in order to change the order of the content, for example from “image left/text right” to “image right/text left”.
• Background Options - one or more customizations for backgrounds may exist for select content layouts to change the default color:
  • Yellow Texture Background
  • Blue Texture Background
  • White Texture Background
  • Blue Background (solid dark blue)

Specific available customization options are discussed on the relevant pages of this guide.