Homepage Overview
Content > 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.
- Body Background: only used for the section background assignment (see more details below)
- Sections: nine 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.
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.
The "Header Full Height" check box option is being used on the homepage to extend to the full height of the browser window.
Countdown Timer
The "Billboard Monklet - Event Countdown" monklet is used and is only supported in the "Header Text" field of the page. This monklet displays a countdown timer tied to the most recent event with the "Live Event" category. You can use the "find_category" inline parameter to display from a specific event category.
By default, specific fields within the "live" event settings will be used to control the countdown bar info:
- Website - controls the "watch live" link
- Title - controls the button text during the countdown
- Summary - controls the button text when live
Content > Link Lists > "Countdown"
You can override the event text and url options with this link list, and the list should only have a single link entry. The following fields are used:
- Link - controls the "watch live" link
- Description- controls the text before the timer
- Button text - controls the linked text when an event is live
When there is no live event occurring, the "view past sermons" link will display and automatically point to your sermons page.
Note: you can test the "live" version by adding "/?live=true" to the end of your staging url.
Body Background
The section assignment for "Body Background" is only used to assign a single background image to the page. This is setup on your homepage, and the background image is managed in the "Home - Background" section. The only field used in this section is the "background image" field.
For the additional sections added to the homepage, all full width section background colors are removed with the exception of the 50/50 sections. You will still want to make sure each section has its default, dark or light background assignments to define the content coloring.
The size of the body background image may vary depending on how many sections you use and the amount of content in each section. The image from the initial designs is 1,366 pixels in width by 2,861 pixels in height (you can double size for retina devices 2,732 x 5,722 but keep in mind the larger image will impact page load times). The background is positioned to the bottom and center.
Note - the "Section Animation" category is automatically added to the home page.
Sections
The rest of the page is controlled via sections, and the homepage sections function the same way as the "Subpage Fullwidth" template.
Home - Service Times
This is a freeform content section, so the heading, text and button are managed in the section content field.
For this section, the background image field is used, as well as the following section categories:
- Section Options: Section 50/50 - Image Right
- Section Options: Section 50/50 - Offset
Home - Sermon
Content > Sermons
Displays the most recent sermon (title, date, summary and image). The "Recent Sermon" heading is hard coded.
Within the Home - Sermon section, the monklet labeled "Section Monklet - Recent Sermon" is used. If you'd like to display the latest sermon for a specific category or group, "find_category" or "find_group" parameters can be used as needed.
The category "Section Options: Section Dark" is also used.
Home - Groups
INTRO TEXT & SECTION SETTINGS
The small groups content the displays on the right is freeform content, so the heading, text and button are managed in the section content field. This content will display by default for the section.
Within the Home - Groups section, the monklet labeled "Section Monklet - 50/50 Offset Image Rollovers" is also added in the content field (below the intro text). The "find" parameter is needed in order to specify which link list to use.
ex: {{section-monklet-5050-offset-image-rollovers|find="home-groups-images"}}
The following categories are used for this section:
- Section Options: Section 50/50 - Image Left
- Section Options: Section 50/50 - Offset
GROUPS INFO
Content > Link Lists > Home Groups Images
The images on the left and corresponding text that displays on hover are managed in this separate link list. Within each item, the name, image and description fields are used.
NOTE: the description field is plain text only. In order to display full HTML content, a section would need to be setup for each item where the content would be managed, and the slug version of the section title added to the description field of the corresponding link list item. The slug version is all lowercase and dashes instead of spaces, and it also needs to have dual curly braces around it. ex: {{home-groups-image-1}}
The following sections are setup to manage the content for each of the 3 areas:
- Home - Groups - Image 1
- Home - Groups - Image 2
- Home - Groups - Image 3
Home - Events
Events > Events
Displays the 9 most recent featured events in a carousel.
Within the Home - Events section, the monklet labeled "Section Monklet - Featured Events Carousel" is used. If you'd like to display events for a specific category or group, "find_category" or "find_group" parameters can be used as needed.
ex: {{section-monklet-featured-events-carousel|find_category="all-church"}}
The category "Section Options: Section Dark" is also used.
Note: The heading and button are hard coded. On mobile, the "Featured Events" heading is hard coded to say "Events".
Home - 50/50
This is a freeform content section, so the heading, text and button are managed in the section content field.
For this section, the background image field is used, as well as the "Section Options: Section 50/50 - Image Left" section category.