Homepage Overview
Navigate to Content > Pages > Index
Note: You cannot change the name of the Index page. "Index" is your home template and assigned automatically to your home page. This templates operates the same as your "Subpage Fullwidth" template.
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
- 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.
Countdown Timer
Content > Events > "Live Event" category
If there is an active, upcoming event published to the "Live Event" category, the countdown timer will display at the bottom of the header area.
Content > Link Lists > "Countdown"
This link list controls the bar content and should only have one entry.
- Description - pre-live text preceding the timer
- Button Text - live text
- Link - controls the link for the timer bar. This should link to your live stream page/url.
If the "Countdown" link list is removed, the "website" field within the event settings will control the link, and the event "summary" field can be used for the live text.
Note: the countdown timer bar will display on the homepage only.
Optional Header Fields
With the "Header Overlay" check box, you can add a dark overlay to the header image/video. This is helpful if you are using text overtop.
Note: to have the dark color overtop of the header image or video extend/bleed into the page content area, this option needs to be checked.
The field "Header Text" adds content overtop of your static header image or background video, which will override the page title. This works the same as the page content field, so you can include text, buttons, etc. The text will display left aligned.
If you are using the default page title, the "Tagline" field can be used to add a short line of text underneath the title.
Note: the "Header Text" and "Tagline" fields will not be used with the image rotator option. The text overlay and additional settings pull from each rotator slide.
For the rotator options, see more info here >>
Header Text with Button
To display a title/text on the left and a button on the right, you will need to use the monklet labeled "Header Monklet - Title with Button". This monklet should be placed in the "Header Text" field of your page.
The overlay text would then be managed in a link list (content > link lists), and the following fields are used: name, link, description and button text.
The monklet needs to use the "find" parameter with the link list title.
ex: {{header-monklet-title-with-button|find="example-title-with-button"}}
Sections
The majority of your homepage is controlled by sections, and this area is located at the bottom of the page settings. There are 9 available sections, and 7 of them are preset sections with monklets designed for the Kalley theme.
You can rearrange, remove, or replace any of these sections. Leaving any of the section fields blank won't cause an issue - you can choose to make your homepage as long or as short as you'd like.
Homepage Sections Overview
This setup uses a section and link list to display a row of four images/links.
The content/images are managed under Content > Link Lists > "Home Connect Links". Each link represents a column and displays the best with 4 - 8 entries/columns. Within each item, the name, link, description and icon class fields are used. The icons are created by entering a custom class in the "icon class" field (ie: fa-twitter)
Within the Home - Connect section, the monklet "Section Monklet - Linklist Icon Row Links" is setup in the content field. The "find" parameter is required in order to specify the link list name.
ex: {{section-monklet-linklist-icon-row-links|find="home-connect-links"}}
This default section is also using the following category options: "Section Options: Section Overlay" and "Section Options: Section Short Padding" (to reduce the overall height of the section).
Content > Sermons
Displays the series, image/video, title, date and summary for your latest message.
Within the Home - Sermons section, the "Section Monklet - Recent Sermon" monklet is used. You can use the "find_category" or "find_group" to display articles for a specific category or group.
The section title and description shown above the monklet are also managed in the section content field.
Content > Articles
Displays the 6 most recent featured articles from the Articles module assigned to the "Stories" category.
Within the Home - Stories section, the "Section Monklet - Featured Articles Carousel" monklet is used. You can use the "find_category" or "find_group" to display articles for a specific category or group.
ex: {{section-monklet-featured-articles-carousel|find_category="stories"}}
The section title shown above the monklet is managed in the section content field. This default section is also using a background image and the "Section Options: Section Overlay" category option.
Events > Events
Displays the 6 most recent events in a carousel.
Within the Home - Events section, the monklet labeled "Section Monklet - Recent Events Carousel" is added in the content field. You can use the "find_category" or "find_group" to display events for a specific category or group.
ex: {{section-monklet-recent-events-carousel|find_category="events"}}
The section title and description shown above the monklet are also managed in the section content field.
Alternate Option with Images
The alternate Home - Events with Image section is an additional events monklets that will include the event images.
If you'd prefer for images to be included, you can use the monklet labeled "Section Monklet - Recent Events Carousel Images". You can also included the "find_category" or "find_group" to display events for a specific category or group.
ex: {{section-monklet-recent-events-carousel-images|find_category="events"}}
The section title and description shown above the monklet are also managed in the section content field.
This section uses the "Section Monklet - Linklist Fullwidth Columns" monklet to display between 2-4 images side by side with a text overlay. The example link list is titled "Two Columns" but you can create additional link lists for this setup as well.
For each item in the link list, the "title" field controls the display title. The "subtitle" field displays as the smaller heading, followed by the description field. For the button to display, both the link and button text are required.
The images serve as the column background, and the size would depend on the number of links/columns used. Typically, 600px to 800px in width and height will fit most situations.
------------------------------------------------------------------------------------------------------------------------------------------------
Within the Home - Columns section, the "Section Monklet - Linklist Fullwidth Columns" monklet is used and should be the only item in the content field. The "find" parameter needs to be used in order to specify the link list where the content should pull from.
ex: {{section-monklet-linklist-fullwidth-columns|find="home-columns"}}
Note: This is a full width section option and should not be placed in the content of a page. No other content should be placed in the section with this monklet.
Reusing this monklet
Here are the steps to use this side by side image/column design for other fullwidth sections throughout your site:
- Create a new link list (Content > Link Lists). Within the link list, add a new item for each column/image
- Copy the "Home - Columns" section and re-title the copied version.
- Update the "find" parameter in the monklet to include the title of the new link list created in step 1. ex: {{section-monklet-linklist-fullwidth-columns|find="link-list-title"}}
- Add this new fullwidth section to your page settings
Content > Blogs
Displays the most recent blog post. The image, title, date and text will pull from the blog post details.
Within the Home - Blog section, the monklet labeled "Section Monklet -Recent Post" is used in the content field. The specific blog you want to pull from needs to be added as an inline parameter:
ex: {{section-monklet-recent-post|name="blog-name-here"}}
The section title and description shown above the monklet are also managed in the section content field.