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.
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.