Using Snippets and Components
This page will show you how to insert components on a specific page template properly.
It will also show you what snippets these components must be contained within in order
to display properly per page template.
Whats the Differences Between "Components" and "Snippets":
- Components: Components are content areas that can be inserted into almost any snippet and are
customizable through form fields that prompt you to insert content. Think of components
as all the page elements that cannot be achieved in a standard WYSIWYG editor such
as page slider images, custom contact information, photo galleries, etc. Similar to
snippets, components are labeled with what type of templates they work with and you
will see all the components available no matter what template type you are working
in.
- Snippets: Snippets are structural in nature and are inserted into your page sections to get
them to look a certain way. For example, an Interior Container snippet is one of the
most common snippets used on the full-width-interior template and allows you to insert
content freely using the WYSIWYG editor. Another type of snippet could be a 2-Column-Section
snippet which allows you to place your page content into two columns. Snippets can
be used on their own or often in combination with other snippets to achieve a desired
look on a page.
Note: Always follow the red helper text in each snippet to ensure proper usage and placement.
Default Snippets
How and where snippets are used can take some getting used to. For this reason, each
section of a page contains a default snippet that can either be removed or added to
by the site editor. This is simply designed to give you a starting place so that you
don’t forget to add one, as the alignment of text and ability to properly display
content usually relies on the use of a snippet. A default snippet will always show up in each section when creating a page. These
can be removed or added to depending on the look a site editor is looking to achieve.
How to insert "Components" and "Snippets"
- To insert a Component find and click the icon highlighted below in the main toolbar. This will bring up
a list of components to choose from. Be mindful when picking a component that it is
compatible with your template type.
- To insert a snippet find and click the icon highlighted below in the main toolbar. This will bring up
a list of snippets to choose from. Be mindful when picking a snippet that it is compatible
with your template type.
How to edit "Components" and "Snippets" once inserted
Once insterted and clicked, a Snippet will have an options menu appear either at the
top or bottom of the snippet, which will outlined in blue. Use this options menu to
remove, duplicate and edit the table properties. Enter WYSIWYG text and images as
needed into the snippet.
To insert a component into a snippet, click into the snippet so that the table is
outlined in blue. Then click the Component icon from the top toolbar and select your
appropriate component.
Once the desired componenet is selected from the list, a window will appear with feilds
to be filled to create the component. To edit the component details later, click the
blue bar with the compenent name and select the edit option from the menu tht appears.
