Homepage Overview
Navigate to Content > Pages > Index
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: 12 fullwidth sections available (utilizing monklets)
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.
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
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 "Header Tagline" field can be used to add a short line of text underneath the title.
Note: the "Header Text" and "Header 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 >>
Sections
The majority of your homepage is controlled by sections, and this area is located at the bottom of the page settings. There are 12 available sections, and some of them are utilizing monklets to pull content from other modules.
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
Settings > Link List > "Schedule"
This setup is used to displays tabs with a list of service times under each one.
Within the link list, the days are listed as parent items (level one) which serve as the tabs for the schedule, and each service time is listed underneath (level two). For each time, you can edit the name (time), link and description fields.
-----------------------------------------------------------------------------------------------------------------------------
Within the Home - Visit section, the "Section Monklet - Schedule Tabs" monklet is used to display the tab structure. The "find" parameter needs to be used in order to specify the link list where the content should pull from.
ex: {{section-monklet-schedule-tabs|find="schedule"}}
The titles and text are managed in the section content field. The following section categories are also used with the default setup:
- Section 50/50 - Image Left
- Section Overlay
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 - Visit" 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-schedule-tabs|find="schedule"}}
- Add this new fullwidth section to your page settings
This setup uses a section and link list to display rows of 3 images/links.
The content/images are managed under Settings > Link Lists > "Home Next Steps". There should be a single level one/parent entry, which controls the column content on the left side. Within the parent item, the name, link, description, button text and subtitle fields are used.
The second level/child links control the image grid on the right. Each link represents an image/column, and within each item, the name, link, image and subtitle fields are used.
Within the Home - Next Steps section, the monklet "Section Monklet - Link List Next Steps" is setup in the content field. The "find" parameter is required in order to specify the link list name.
ex: {{section-monklet-link-list-next-steps|find="home-next-steps"}}
This default section is also using the following category options: "Section Options: Container - Full Width" and "Section Options: Section Dark".
This setup uses a section and link list to display a row of four images/links.
The content/images are managed under Settings > 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).
Alternate Option with Buttons Only
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.
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.
Content > Articles
Displays the most recent article from the Articles module.
Within the Home - Stories section, the "Section Monklet - Latest Article Full Width - Media" monklet is used. You can use the "find_category" or "find_group" to display articles for a specific category or group.
ex: {{section-monklet-latest-article-full-width-media|find_category="stories"}}
Note: this monklet is only supported in full width sections (not the page content area). The full width option is automatically applied and the article media displays in the right column by default. Selecting the section category " Section Options: Section 50/50 - Image Left" will move the article media to the left.
The section options "Section Dark", "Section Light", "Section Overlay" and "Section Overlay Color" are the only additional section categories supported.
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-latest-post -full-width-media|find_category="blog-name-here "}}
The section title and description shown above the monklet are also managed in the section content field.
Note: this is only supported in full width sections (not the page content area). The full width option is automatically applied and the post media displays in the right column by default. Selecting the section category " Section Options: Section 50/50 - Image Left" will move the post media to the left.
The section options "Section Dark", "Section Light", "Section Overlay" and "Section Overlay Color" are the only additional section categories supported.
