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:
Headlines range from H1-H6 and can be manipulated by editing the headline, going into Settings, and selecting from the ‘Style’ dropdown. The headline styles are as follows:
To add ‘pipemarks’ next to headline, edit the headline and go into Settings. Find the Decorations dropdown and select the following:
To change the color of the title (and pipemarks), edit the headline and go into Settings. Under the color dropdown, choose the correct style as mentioned above. Primary blue, primary orange, primary purple, primary gray, white and black can all be created by this method.
Other Secondary colors can be found going to ‘My Elements’ when you add a new element. They are listed as ‘Title_Secondary Color with vertical/horizontal pipemarks’.
Paragraph text (Roboto) Link Text
For colors, refer to above.
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
Lastly, with ‘New Elements’ you can manipulate the panel style in settings (seen below):
Panel Style = None
Description could go here.
Panel Style = Default
Description could go here.
Panel Style = Primary
Description could go here.
Panel Style = Secondary
Description could go here.
Description ^ is white
Panel Style = Hover
Description could go here.
The Panel element is used on the customer page for all the product boxes. 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.
Similarly to the Grid element above, you have New Element styles that do not match other pages of the site Differing from other elements on this page, the panel is a single element, but when you have 3 elements in a row, it creates a layout. If you want 3 panels in a row in the same color, go into My Layouts and select Panel_Primary Color.
Primary Blue, Primary Orange, Primary Purple, and Primary Gray panel elements can be found in the ‘My Layouts’ section when adding a new element to a page. Look for Panel_Primary Color and click on it to insert it into the page.
If you add a panel element from the ‘New Element’ screen before My Elements, you have the following styles within panel settings.
Panel Style = None
Panel Style = Card Default
Panel Style = Card Primary
Panel Style = Card Secondary
Description ^ is white
Panel Style = Card Hover
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’.