This template has the ability to set the entire width of your set to either a
fixed pixel width or a fluid percentage width. You can set the width to any size
you want.
You may also set the widths of the following positions to any width that you
need to: left, left_inset, right, and right_inset. You may set them to any width
you need to. Columns can either be set to a fixed px width or they can be set to a fluid percentage width. If you are enabling the responsive layout we recommend setting these to percentage width.
Row Widths
This template comes loaded with module positions, many of which appear in rows
of 6 module positions. Any row that contains 6 module positions can have it's
row columns set to automatic widths or manual. For example, in the picture below
the first row shows 4 modules published and since it's set to automatic each is
set to 25% width. The second row shows a manual calculation for each module in
the row. Again, you may do this for any row that contains 6 modules. If you
setup a manual calculation they must total to 100%. Not all 6 modules need to be
used, as shown below.
All of this is done very easily in the template configuration.
This template includes a scroll to feature that will scroll your page to a specified section of your site. All you have to do is create an external link in your menu manager and then in the URL area enter in any ID on your page. You can reference any of the following IDs in order:
#s5_header_area1
#s5_top_row1_area1
#s5_top_row2_area1
#s5_top_row3_area1
#s5_center_area1
#s5_bottom_row1_area1
#s5_bottom_row2_area1
#s5_bottom_row3_area1
#s5_footer_area1
Screenshot of admin area of an external menu item with DIV reference entered:
The lazy load script is a great way to save bandwidth and load your pages much faster. Images that are not visible on the initial page load are not loaded or downloaded until they come into the main viewing area. Once an image comes into view it is then downloaded and faded into visibility. Scroll down this page to see the script in action.
Setup is very easy! By default this script is disabled, in order to enable it simply choose All Images or Individual Images from the drop down, as shown below from inside the template configuration page.
All images will load every standard image on the page with lazy load. There is no extra configuration or extra code to add with this configuration, it will just happen automatically. Individual images would be used if you want only certain images to load with this script and not all of them. To do this simply add class="s5_lazyload" to the image like so: