Hub #1

Template Overview

The Hub is a content-heavy page specifically aimed towards regular and engaged church attenders. This page serves to provide the latest media and make it easy for regular attenders to be engaged.

Your Hub #1 templates allows up to 9 content sections and provides the same options as your main site full width sections.

Content > Sections

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

Background Color - This color allows you to set the background color of the section and should be a html hex value.  A good reference is http://www.w3schools.com/tags/ref_colorpicker.asp.

Background Image - This serves as the section background image.  This image should be 1,400px in width by the desired height.  The height will depend on the amount of content in the section.  A recommended height would be between 600px and 1,200px (double for retina).

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

Large Padding - Adds additional horizontal padding to make the container taller.

Narrow Container - Displays the content at a narrow width.

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

Icon Class - Selecting the page checkbox "Section Nav" will place a section navigation at the bottom of the page on mobile devices allowing users to scroll between sections.  If this option is used the section Description will be the name of the link and the Icon Class is used to add a custom icon to the link.  If the page checkbox is selected only sections with the Description field used will display in the navigation.  To see a full list of available icons: http://mk041.dev.monkpreview.com/_assets/fonts/icons/icomoon/

Sections and Monklets

Overview

Monklets defined with "Hub 1 Monklet " in the title can be inserted in the content area of a section.  Inline parameters are not currently supported, except for the blog and link list monklets.  Monklets are setup to display all items from a given module.  

*To filter items, you can assign a category or group (in addition to the default site group) to the Hub page.  Once a category or group is assigned, all monklets (except for the blog, "Hub 1 Monklet - Connect Links" and "Hub 1 Monklet - Link List" monklets) will pull in and display all matching items from modules with the same category or group.

NOTE: Categories and groups are supported throughout all modules (sermons, articles and events) so using a single category or group will work seamlessly through all modules.

As an example, if you add the category or group of "Hub" to your Hub page, any item that you'd like shown on the Hub page will also need to have the category or group of "Hub" assigned to it. The exception to this rule are the blog, "Hub 1 Monklet - Connect Links" and "Hub 1 Monklet - Link List" monklets.

Content > Link Lists > "Hub Link"

This Link List should contain a link to your Hub landing page.  The name of the link will be used for the title and landing page name.  If an image is used it will be the Hub template logo icon.  The logo will be capped at a width of 390px but is recommended to be a square icon image (re. 46px in width by 46px in height).

Connect | Section, Monklet and Link List

Content > Sections > Hub - Connect

Displays a carousel of image links from a link list.  The find inline parameter is required.  

Connect Section Content

The CONTENT field can include any WYSIWYG content before or after the monklet.

Editing the Connect Link List

Content > Link Lists > Hub 1 Monklet - Connect Links

Connect Images

All images used within the same list should be the same size.  Square or 16:9 ratio images are recommended.  The "find" inline parameter is required.  The coloring is based on your Accent Color options from the color picker.

{{hub-1-monklet-connect-links|find="hub-1-connect-links"}}
Click to copy

Events | Section and Monklets

Content > Sections > Hub - Events

Displays up to 20 recent events in a carousel row of 3 events at a time.  

Adding Events

  1. Navigate to the Events Module to add a New Event.
  2. Click the Add a New Event button
  3. Fill out all Event Management information; being sure to include a Name, Start Date/Time and End Date/Time
  4. Click the Add Event button to add the Event or the Cancel button to cancel adding the Event
  5. You can Publish the Event or Keep as Draft

Event Images

Images should be 1,024px wide by 576px tall.  The "Missions Trips and Classfinder #1" categories are automatically hidden.

{{hub-1-monklet-events}}
Click to copy

Sermons | Section and Monklet

Content > Sections > Hub - Sermons

Displays the most recent sermon and the series information that sermon is assigned to.  If no series is assigned the 2 most recent sermons will display.  

Adding Sermons

  1. Navigate to Content > Sermons.
  2. Click the Add New Sermon button.
  3. Enter a titlecategoryserieskey passage date, and preacher then click Save Content.
  4. Enter in a brief summary, any keywords, and your content then click Add Content.
  5. Enter in your interactive notes and click Save.
  6. Upload any related images, audio, video, and notes then click the Submit Selections, Done, or Upload button.
  7. Choose how you want to publish your sermon, or keep it as a draft until later.

Sermon Image and Video

Images should be 1,024px wide by 576px tall.  If a video is assigned to the sermon it will display in place of the image.

{{hub-1-monklet-sermons}}
Click to copy

Articles | Section and Monklet

Content > Sections > Hub - Articles

Displays up to 20 recent articles in a carousel row of 1 article at a time.  

Adding Articles

  1. Navigate to Content > Articles.
  2. Click Add New Article button.
  3. Enter a titlecategoryseriesdate, and the author then click Save Content.
  4. Enter in a brief summary, any keywords, and your content then click Add Content.
  5. Attach any related images, audio, video, and notes then click Submit Selections, Done, or Upload.
  6. Choose how you want to publish your article, or keep it as a draft until later.

Article Images and Videos

Images should be 1,024px wide by 576px tall.  If a video is assigned to the article it will display in place of the image.  The "Volunteer" category is automatically hidden. Must include the Hub 1 Articles Monklet.

{{hub-1-monklet-articles}}
Click to copy

Blog | Section and Monklet

Content > Sections > Hub - Blog

Displays up to 20 recent blog posts in a carousel row of 1 post at a time.  The blog image and description display as the first slide.  

Creating a Blog Post

  1. Navigate to Content > Blogs > Blog Posts.
  2. Click the Add A New Blog Post button.
  3. Enter a Post Title, select the desired Blog to post to, Categories, Author, Date, Post, keywords, and image then click Save.
  4. Choose how you want to publish your Blog Post, or keep it as a draft until later.

Blog Images

Images should be 1,024px wide by 576px tall.  This monklet requires the name inline parameter to define which blog to display posts from.  If this is not used all blogs will be displayed.

Groups | Section and Monklet

Content > Sections > Hub - Groups

Displays up to 40 small groups.  The "Missionaries" category is automatically hidden.  If the group has a valid address that supports latitude and longitude the group will display on the map.

Adding Small Groups

  1. Navigate to Events > Small Groups.
  2. Click the Add a New Small Group button.
  3. Fill in all of the relevant information about the new small group and click the Save button.
  4. Choose whether to publish the group to your site right away or keep it as a draft until later.
{{hub-1-monklet-small-groups}}
Click to copy

Give | Section

Content > Sections > Hub - Give

WYSIWYG Section to direct users to your giving related page(s). The example content uses the DARK BACKGROUND, LARGE PADDING, and NARROW CONTAINER custom styling check-box options.

Content > Sections > Hub - News

Displays image/news type links from a link list in a carousel row of 1 link at a time.  The find inline parameter is required.  

Images

Images should be 1,024px wide by 576px tall.  The Button text field is required to display the link/button.

News Content

The CONTENT field can include any WYSIWYG content before or after the monklet.

{{hub-1-monklet-link-list|find="hub-1-news"}}
Click to copy