Subpage Sections

Overview

Your subpages allow up to 5 content sections to be assigned to a page and can contain text, images, etc.  These sections will display under the main content of the page.  The page "Style Guide Example" has been created to review the section defaults.

Content Section Fields

Content > Sections

Content - This is the main content block and resembles the content/styles of the page content.

Background Image - This serves as the section background image.  This image should be 1600px in width by the desired height (for retina images you can use 3,200px in width).  The height will depend on the parallax option.  If this option is selected you may have to play around with the desired height since the image is fixed to the users screen at desktop view.  A recommended height would be between 800px and 900px.

Dark Background - Selecting this checkbox displays the content in white color on top of the site default dark section background color or parallax background.

Has Monklet - Select this checkbox if a monklet is used in the content area of the section (see below for more details).

Header Image - This serves as the section top background image.  This image will display at 990px in width at full desktop view (there is no restriction on height).

Parallax Background - This option turns the Background Image into a parallax background.

 

Section Monklet

The monklet "Section Monklet Link List" works similar to the Landing Monklet and displays content from a link list in columns.  (the bottom row of featured columns or the icon rows in the I'm New page).

*NOTE - The Has Monklet option is required when using the section monklet.  The Dark Background option is optional depending if you are using the monklet with a dark background image (the bottom columns).

Section Monklet List

The landing monklet uses the link list module and a list will need to be created for each monklet.  From the link list module you can create the list and will use all the fields available.  Each list should only have either two or three links (columns).

Name: Heading of the column

Link: The link of the button

Image: The image field serves as the column background and should be 534px by 340px (for retina images you can use 1,068px by 680px) for three column and 800px by 348px (for retina images you can use 1,600px by 696px)  for two column.

Description: Text below the heading.

Button Text:  The label of the button.

Column Monklet: Use custom monklet in the column instead of link fields.  There are currently two column monklets available.  Using the slug "current-series" in this field will display the current series content (eg. home page current series column).  Using the slug "latest-sermon" in this field will display the latest sermon content.  When the column monklet is used the only field for the link list that will display is the image for the background.  All other content will come from the monklet.

Icon Class: Displays an icon above the heading (see the I'm New page for an example).  A full list of available icons can be found at http://tpcc2.monkpreview2.com/_assets/fonts/icons/ (use http://tpcc.org/_assets/fonts/icons/ when your site goes live).

Section Monklet - Mobile Image Option

This monklet allows you to setup a full-width section and choose one image that will show on desktop and a different image for mobile display; the two images and their respective links are setup using a linklist.

Start by creating a new, blank Section and then add the following monklet code:
{{section-monklet-mobile-image-option|find="mobile-image-option"}}

In the above example, the linklist being referenced is called, "Mobile Image Option," but you can name your linklist as needed—just make sure that it contains two items, one called "desktop" and another called "mobile."

Once the linklist has been created and the monklet code is entered, assign the new section to the desired page. The desktop image will normally show, unless the user is on a device with a width of 768px or less (i.e. iPad portrait), in which case the desktop image will be hidden and the mobile image will take precedence.