Blocks / Content

Blocks are the contet you add to your site.  We support a growing list of content types, a few are listed:

  • Text - a rich text editor that lets you edit content on your site.
  • Folio - a gallery of images that lays out in tiles automatically.
  • Gallery - a grid of images you can view in a lightbox.
  • Background - a section you can place blocks into, which has an image in the background
  • And many more...

Sections

Every page is broken into section where you can place blocks.  When you get into edit mode, and can see the full toolbar, you will also be able to see a number of sections on the page.

You can see the sections in the image below, one in the header above the icon. One in the banner section across the top of the content, a section to the left containing the page browser, and to the right containing the content.

When you place blocks you drop them into sections, and some blocks can contain sections within them, such as the "Cells" and "Background" blocks.

Sections

Add Block

Begin by selecting "Add Block".

Add Block

In the block gallery you can see categories on the left, they are:

  • Favorites - Blocks you use often and have clicked the "Star" on to mark as a favorite.
  • Layout - Blocks that contain other blocks and assist with page layout.
  • Text - Blocks containing text and other content, such as forms.
  • Media - Images and galleries.
  • Retail - Blocks related to online sales, shopping carts and favorite products
  • Blog - Blogs that help you layout your blog entry lists and blog entry views.
  • Other - A collection of other types, such as feature lists and business cards.

Add Blocks

"i" will show you more information about each block, and "+" to add the block to the page.  "Star" will mark it as a favorite block for easier access later.

Dropping Blocks

Once you select to add a block to the page, the block browser wil disappear, and an insertion marker will follow the cursor around the page.

Blocks can be placed:

  • At the top and bottom of sections.
  • Before and after other blocks already on the page.

Block Settings

Once you drop a block, its settings will be presented for you to edit and save.  Below is the settings editor for the "Text" block.

The key controls along the top of the block form are, left to right:

  • Close - Close the editor, discarding changes.
  • Move - Move to another location on the page.  Click move then click the location to move the block to.
  • This Page - If this block is shown on multiple pages, make it shown only on this page.
  • All Pages - Show this block in the current location on all pages.
  • Single - The block is only on this page.
  • Shared - The block is available to all pages.
  • Create - The block will be created on all new pages that are created automatically.
  • Delete - Delete the block off this page, leaving it on any other pages.
  • Delete All - Delete the block from this page and all other pages.
  • Save - Save your changes and update the page.

The settings that you can use are dependent upon the block.  Each block is separately documented below this topic.

ID and CSSClass are available to all blocks, they are inserted into the HTML markup for assist with styling. More on that in the "Styling with CSS" topic.

Text Block Editor

Changing Settings

After a block is added to the page, while in edit mode, the blocks will be covered by a dark section and a control panel:

Block Controls

"Text" is the name/type of the content block you are hovering over.

"Settings" brings up the settings editor for the block and thus you can make changes.  You can also click anywhere in the gray area to change block settings.

The toolbar buttons are:

  • Move - Move this block to a new location on this page.
  • Style Block - Create a style for the block type.  The style created will apply to all "Text" blocks.
  • Style This Block - Create a style for this specific block.  The style will only apply to this "Text" block, not all "Text" blocks.

See the "Styling with CSS" section for more assistance.

Block Heirarchies

As some blocks may contain other blocks, it can be challenging to get to the right block to edit its settings.  There are a number of ways for you to find the right place to click to edit.

As you move over blocks with the cursor, the highlighted block will change.  Holding the "SHIFT" key while moving the mouse will cause the currently selected block to be locked onto, allowing you to access its buttons and settings.

If you click to edit the setting of a block where there are a number of blocks, one on top of the next, a small dialog will let you select which one you want to edit the settings for.

These actions are common and necessary when working with:

  • Background - Contains a section for content that sits on top of an image backdrop.
  • Columns - Creates a block with a series of sections in a column.
  • Cells - Similar to columns, but the cells "wrap" on small devices down to minimum number of cells wide.
  • Menus - Menus contain sections on each end that you can add content to