Demo Info

Welcome to your new website. This section has been put together to assist you in making the transition, understanding how the design / layout works with your content and how to efficiently collect and load your content.

Using the Blank Demo Layouts

Select from the Demo menu to view the available demo layouts, sections, and elements.  Each layout, section, and the element is labeled accordingly for easy retrieval from the Library.


  • Facility Layout 1   Minimal layout best suited for:
    Facilities that require minimal/no promotional offer sections or do not offer a broad array of services.
  • Facility Layout 2   Medium layout best suited for:
    Facilities that offer several services have a few basic/ongoing offers and one dynamic offer with a call to action.
  • Facility Layout 3   Extensive layout best suited for:
    Facilities with many services, classes, programs and multiple dynamic offers and with seperate calls to action.
  • Basic Page Laout   Use For: All other uses not covered above

Want to experiement and come up with somthing new or tweak an existing layout, that's what the FSSd Sandbox is for :).

Page Layout Explained

Page SubNav

The Page SubNav and corresponding Section Titles can be changed and customized as required to meet each facilities individual needs. In order to follow the best persuasive and responsive design practices, it is strongly advised NOT to exceed 6 items on the Page SubNav.

What if all the sections are not needed?

If a facilty does not require all the sections, those that are not needed can be disabled or deleted and the Page SubNav can be updated accordingly.

What if the Facility has a lot of things to promote?

Facilities that offer several services, lots of programs and special offers should use Facility Layout 3 which provides extensive options. You can also duplicate sections and parts of elements to add more offers to a page. Lastly, take advantage of the event Calendar the number of default events can be increased if the facility has a lot of events, and the main calendar is one of the top hit pages of Your Force Support Websites.

Selecting and Prepping Images

If you follow the below guidlines for cropping and optimizing images along with the suggestions in the layout guides, everything will fit together as presented in the demo pages.

image guides


  • Sidebar width on static pages (generated by the builder) is determined by the settings in the sidebar and column housing the sidebar (width, padding, gutter).
  • Sidebar width on dynamic pages (generated by other components outside of the builder) the sidebar width is set to 33%.  To change this open the template -> layout -> sidebar -> select desired width from drop down.  Note, changing this is a global change to all dynamic pages.
  • Color / Style of the module is changed in the module manager under the Template Tab -> Style  and Template Tab -> Title Decoration.  The change the principle values of Got to Template - > Style -> Card   see also Template - > Style -> Inverse -> Card
  • Icons can be added through Template -> Layout -> Menu (see the documentation for additional information)

FSS Connect

Stay in the loop and get all the lastest 355 FSS community news!


NIPR Note Protection Status ©