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 is assigned automatically to your home page. This template operates the same as your "Subpage Fullwidth" template.
Custom Home
In the custom home header area, the rotator on the home page will now only show images.
The size requirement is 1366px by 1791px. The heading 2 in the header text is set up at 580px on the desktop with the updated font-weight to make the "of" drop to the next line.
The monklet is "Section Monklet - Tagline Buttons" and uses a link list. The name is the text, the description shows the text before the word (used for "&") and the subtitle is used for the text after the word (used for ",")
Navigate to Content > Link List > Tagline Buttons - Home
The link list is Tagline Buttons - Home and can edit the text and the three buttons on the hero area.
Note: For the three buttons to display on the header area it's required to add the URL and the button text within the link list.
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
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
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).
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.
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.
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.
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.
