Homepage Overview

Websites > Pages > Index

The "Index" template is your homepage template and is assigned automatically to your home page. In the CMS, your homepage will be titled "Index" and cannot be changed. This template operates the same as your "Subpage Fullwidth" template, with the exception of being able to add a true background image to each of your full width sections. 

The home page (Index) works using various modules and elements throughout Ekklesia. The basics are:

  • Header area: three options - static image, looping/muted background video or image rotator. The header area also includes the countdown timer.
  • Sections: twelve fullwidth sections available (utilizing monklets)

Header Area

The header options for your homepage are the same for your subpage templates: static image, looping/muted background video or image rotator.

See detailed info about the header options HERE >> 

Optional Header Fields

The field "Header Text" adds content overtop of your static header image or background video. This works the same as the page content field, so you can include text, buttons, etc. 

This "Header Overlay" check box option will add a dark overlay to your header image or background video, so the text overtop is more visible.

Note: the "Header Text" and "Header Overlay" fields will not be used with the image rotator option. The text overlay and additional settings pull from each rotator slide. 

Sections

The rest of the page is controlled via sections, and the homepage sections function the same way as the "Subpage Fullwidth" template.

Home - Tabs

TAB TITLES

Settings > Link Lists > Welcome Tabs

This link list controls the three button/tabs for this section. The "name" field is used to control the tab title, and the "description" field contains the section slug title where the content for each tab is managed. 

TAB CONTENT

Websites > Sections > See titles below. All three sections use the content and background image fields plus the following categories:

  • Welcome Tab Times - section categories include: "Section 50/50 - Image Left" and "Section Dark"
  • Welcome Tab Aids - section categories include: "Section 50/50 - Image Right" and "Section Dark"
  • Welcome Tab Livestream - section categories include: "Section Dark" and "Section Overlay"

-------------------------------------------------------------------------------------------------------------------------------------

Within the Home - Tabs section, the monklet labeled "Section Monklet - Tabs Welcome" is added in the content field. The "find" parameter is needed in order to specify which link list to use.

ex: {{section-monklet-linked-buttons|find="welcome-tabs"}} 

The titles are also managed in the section content field.

Home - Visit

Settings > Link Lists > Visit Links

This option displays a custom column structure from a link list. With each link list item, the following fields are used: 

  • Name - controls the tag label at the top of each column
  • Link - controls the button link (must be used in conjunction with the button text field)
  • Image - controls the image at the top of each column
  • Description - controls the text
  • Button Text - used to display the button for each column (must be used in conjunction with the link field)

Within the Home - Visit section, the monklet labeled "Section Monklet - Link List Image Row (3)" is added in the content field. The "find" parameter is needed in order to specify which link list to use.

ex: {{section-monklet-link-list-image-row-3|find="vist-links"}} 

The titles are managed in the content field, and the Background Color and Background Image fields are used.

The following categories are also used for this section: 

  • Section Options: Section Bottom Space
  • Section Options: Section Dark
  • Section Options: Section Overlay
  • Section Options: Section Short Padding

Home - Know

Settings > Link Lists > Visit Links

This option displays an image rotator from a link list. With each link list item, the following fields are used: 

  • Name - internal use only
  • Link - controls the button link (must be used in conjunction with the button text field)
  • Image - controls the image
  • Button Text - used to display the button for each column (must be used in conjunction with the link field)

Note: the images should be the same size.

Within the Home - Know section, the monklet labeled "Section Monklet - Link List Image Button Carousel" is added in the content field. The "find" parameter is needed in order to specify which link list to use.

ex: {{section-monklet-link-list-image-button-carousel|find="know-christ-carousel"}} 

In addition, the titles are managed in the content field, and the "Section Short Padding" category is used.

Home - Banner

Settings > Link Lists > Banner Love Christ

This section uses a link list to display a banner similar to the section 50/50 option.

The image displays at a max width of 400 pixels on the left column. The right column is the larger content area in yellow. The name, subtitle and icon class are used to match the site wide custom heading section. The button text should be used with the url to display under the heading.

Within the Home - Banner section, the monklet labeled "Section Monklet - Link List Banner - Full Width" is added in the content field. The "find" parameter is needed in order to specify which link list to use.

ex: {{section-monklet-link-list-banner-full-width|find="banner-love-christ"}}

Note: when using this setup, only the monklet should be included in the section content field and no other content or section options.

Home - Serve

Content > Articles

This monklet displays the 6 most recent articles from the Articles module (two rows of three).

From the article settings, the title, summary and image are used. The "learn more" button will link to the full article. An image is required for each article, and the title, text and button link display as an overlay.

Within the Home - Serve section,  the monklet labeled "Section Monklet - Recent Articles - Image Row (6)" is used. If you'd like to display articles for a specific category or group, "find_category" or "find_group" parameters can be used as needed. 

ex: {{section-monklet-recent-articles-image-row-6|find_category="volunteer"}}

In addition, the titles and button are managed in the section content field, and the "Section Short Padding" category is used.

Home - Connect

Settings > Link Lists > Social Links

This section uses a link list to display a list of social icons. 

Each item in the list uses the name, link and icon class. See a full list of available icons: http://stcharleshartland.monkpreview3.com/_assets/fonts/icons/icomoon/ (substitute the staging url with your domain when your site goes live).

Within the Home - Connect section, the monklet labeled "Social Media Monklet Large" is added in the content field. The "find" parameter is needed in order to specify which link list to use.

ex: {{social-media-monklet-large|find="social-links"}}

The titles are managed in the content field, and the Background Image field is used.

The following categories are also used for this section: 

  • Section Options: Section Bottom Space
  • Section Options: Section Dark Black
  • Section Options: Section Overlay