Using Snippets to Format Custom Pages
Snippets are provided as a method for creating more complex formatting
of your web pages without coding any HTML. It is highly recommended you avoid
tables for the overall formatting of your pages since these will not display
well on a mobile device. Use the text block snippets to create blocks of texts that
display side-by-side in a browser but will be "stacked" on a phone.
The editor used to create content for your Home page and all custom pages
includes a feature to insert special blocks of content to help you layout and
format a page. At the top of the editor, click the "Insert" tab.
In the ribbon bar that displays, you will use the "Insert Code Snippet"
drop-down list to select content to insert.
In the editor, locate where you want to insert the special content. You might
create a new paragraph where you want this to happen. You then select
one of the items from the "Insert Code Snippet" list. This will insert
a block of text with special formatting instructions as described below.
Most of the time this is a formatted block of text that you can then modify.
While these descriptions reference "text", you can insert gallery tags and
images within the text blocks. You can nest snippets within snippets.
Snippets Available
Highlight Panel
This inserts a highlighted block of text with
the themed border and background.
Highlight Panel White
This inserts a block of black text with a white background
and a themed border.
Highlight Panel-Float Left
This inserts a highlighted block of text with
the themed border and background.
This block of text will "float" to the left side of the page.
This can be useful if you have other blocks of text that will "float" to the right.
After all floated blocks of text you must add a "Clear Floated Panels"
snippet to complete the floating of text blocks.
Highlight Panel-Float Left White
This inserts a block of black text with a white background
and a themed border.
This block of text will "float" to the left side of the page.
This can be useful if you have other blocks of text that will "float" to the right.
After all floated blocks of text you must add a "Clear Floated Panels"
snippet to complete the floating of text blocks.
Highlight Panel-Float Right
This inserts a highlighted block of text with
the themed border and background.
This block of text will "float" to the right side of the page.
This can be useful if you have other blocks of text that will "float" to the left.
After all floated blocks of text you must add a "Clear Floated Panels"
snippet to complete the floating of text blocks.
Highlight Panel-Float Right White
This inserts a block of black text with a white background
and a themed border.
This block of text will "float" to the right side of the page.
This can be useful if you have other blocks of text that will "float" to the left.
After all floated blocks of text you must add a "Clear Floated Panels"
snippet to complete the floating of text blocks.
Clear Floated Panels
This inserts an invisible marker that indicates that the "floating"
of text blocks is complete. The formatting returns to a single column for the page.
This is only needed if you used any of the "float" snippets.
Error Panel
This inserts a special highlighted block of text that is used to display
an important warning message. It has special formatting that is the same for
all themes.
Flexbox Container and Main Column
This creates a container for using the Flexbox system for creating
columns. It includes the main column.
Additional articles may be inserted after the main column.
Multiple columns will display as space is available for the articles
in the Flexbox container.
You can read more about the Flexbox method of formatting page content
from //developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox.
This system adapts best to different browser sizes and mobile devices.
Flexbox Aside for a Minor Column
This creates a minor column inside a FlexBox container.
Flexbox Aside for a Left Column
This creates a minor column inside a FlexBox container.
This block will "float" to the left side of the container.
Flexbox Aside for a Right Column
This creates a minor column inside a FlexBox container.
This block will "float" to the right side of the container.