In the back end you have Layouts and Elements. Think of layouts as a full page template and elements as just a panel or item within the template. The only exception is that layouts can also include a smaller panel with a few elements combined.

Layouts can be found within the back-end of a page/post by clicking on ‘Library’ in the upper right of the left sidebar. Form there, select the tab for ‘My Layouts’. All templates are there and listed by page type. There are also some other layouts that include a group of elements.

Elements can be added by going into the back-end of a page/post and hovering over a section in the left sidebar. When you hover, a plus sign should display. Click on the plus sign. From there, you have two options: 1) New, 2) My Elements.

New elements will create the element based on styles inputted into the website in the code; you have a variety of ‘styles’, but they do not necessarily match with elements on other pages.

My Elements have been created specifically for this website. You see them across all pages of the website. This includes Headlines, Grids (homepage What’s New section), Panels (Customer page product boxes), Dividers, and Buttons. My Elements have been created in the 4 primary colors (blue #298FC2, orange #E7721, purple #564095, and gray #54585A) and sometimes in the website’s secondary colors (light blue #45C8E6, light orange #FEA92E, and a maroon/purple #5A2453). There are also sometimes white and black versions of elements to used elsewhere on the site.

Color styles can be set by editing any element, going to the Settings tab and selecting your color. Site-wide, the colors should match up with the following:

The Grid element is used on the homepage for What’s New. When using this element, do not put in anything in the meta field. You will edit the Panel Style and Title in settings to create the design that you want.

With the Grid element, you have New Element styles that do not match other pages of the site, My Element styles that match other pages closely, and a custom grid that was created for the homepage What’s New that includes 3 different colors.

To create the grid like on the homepage with 3 different colors, edit the Grid and select the Advanced tab. Set the class to be: ws-blog-whats-new

To make all boxes outlined in the primary blue (like the first one above), add a new element, select ‘My Elements’ and find “Grid_Primary Blue”. Only orange can be done with “Grid_Primary Orange” and the same goes for the primary gray and primary purple.

Lastly, with ‘New Elements’ you can manipulate the panel style in settings (seen below):

To create an orange, blue, purple or gray divider line, add a new element and select ‘My Elements’. Select Divider_Color to insert it into your page.

Other dividers that are within the styles when creating a new
divider from scratch and not from ‘My Elements’:

Style = None

Style = Icon

Style = Small

Style = Vertical

Buttons can be found within both My Elements and New Elements.

When you create a ‘New Element’, you are able to create buttons in these colors: Primary Blue, Secondary Orange, Primary, Secondary Purple, Primary Gray. You can manipulate the button style at the bottom of the edit button area.

Other buttons can be found added through ‘My Elements’. This includes: Primary Orange, Primary Purple, Secondary Light Blue, White. They are named as ‘Button_Color’.