Homepage Overview
Navigate to Content > Pages > Index
*Note: You can not change the name of the Index page, and the "Homepage" template is automatically assigned to this 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: Logo, header links, navigation and search
- Header area: three options - header image, background video, or image rotator
- Sections: nine fullwidth sections available (utilizing monklets)
- Footer: church information, button, social media links, and newsletter (utilizing monklets and sections)
Header Area
The header options for your homepage are the same for your subpage templates: static image, background video or image rotator.
With a static image or video, the "Header Text" field in your page settings can be used to add content overtop of the header spot (ie: text, buttons, etc.)
Rotator
If a rotator is assigned to a page, the images will display as slides. The title and caption are optional and will display as an overlay. The button uses the Button Text field.
- Design Lines - Selecting this option for the rotator will display the custom designed lines in front of the slide image.
- For individual slides, if the title has text in a span wrap that text will display in cursive. eg. "Your <span>story</span> matters." the "story" text will be in cursive.
- Universal Buttons Link List - placing a link list slug in this field will replace each slide button with master slide buttons (used for image slides only as the video slides display a play button for the video).
- I'm New/Watch buttons - managed under Content > Link Lists > Home Rotator Buttons
Featured Story
Content > Link Lists > "Header Video"
Displays the latest featured article assigned to the "Stories" category
The default theme homepage is using the {{header-monklet-featured-article-video|find_category="stories"}} monklet in the Header Text field to pull the latest story overtop of the header image or video.
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 five of them are pre-populated with homepage monklets designed for the Wesley theme (more on your Homepage Monklets HERE)
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.
Home - Banners
Content > Link Lists > "Home Banners"
Within each item, the following fields are used:
- Name: internal use only
- Link: page url
- Image: displays as a background image on rollover. This image is positioned to the bottom right of the banner. The image can vary in size, depending on the amount of text in the banner but the recommended size is 130px in width by 70px in height.
- Description: displays under the banner heading
- Sub Title - displays as the banner heading.
Customizations
- If the Sub Title field has text with a span wrapped around that text will display in cursive. eg. "Your <span>Kid</span> Matters" will display the "Kid" text in cursive.
- You can use the Class field to add a class that will customize the banner. The "bold" class will change the span text from cursive to uppercase bold. The "orange" class will make the rollover text the custom designed orange color and the "brightblue" class will make the rollover text the custom designed bright blue color. If the bold and color class are used together make sure there is a space between.
- If you have a link entry title "Kids" the span text will be replaced with a custom image for the word in the span text. This is hard coded and if this needs to be updated please contact us.
Note: The "Section Monklet - Link List Banners Carousel Top" moves the banners to overlay part of the previous section/header area.
Section Settings (Content > Sections > Home - Banners)
This "Home - Banners" section uses the {{section-monklet-link-list-banners-carousel-top|find="home-banners"}} monklet to pull the items from the "Home Banners" link list. Within this section, the "Section Settings: Gradient Border Yellow Green" category is used.
Home - Service Times Layout
Content > Link Lists > "Service Times Layout"
Within this link list, the first level link titled "Campuses" controls the heading area. Note: there should only be one first level link. The "Sub Title" field is used for the heading text (this heading coloring is set). The "image" is used for the circle image spot, and should be 1,024px in width by 1,024px in height.
Underneath "Campuses", each second level link displays below the heading, so you will see two items listed for "Entry 1" and "Entry 2". Within each of these items, The "Sub Title" is the heading followed by the "Description" field. If the link url is used, the "Button Text" is required.
Note: the design was very specific to have only two entries. If additional entries are needed the background imagery may need to be updated.
Section Settings (Content > Sections > Home - Service Times Layout)
This "Home - Banners" section uses the {{section-monklet-linklist-service-times-layout|find="service-times-layout"}} monklet to pull the items from the "Service Times Layout" link list.
Note: this section uses custom backgrounds for the campus map, so the standard section background options should not be used.
Home - Service Times
Content > Link Lists > "Service Times"
- Each first level link is the main campus display. Each second level link is used for a service time (each second level link name is a service time).
- The first level link name is the campus and if the url is used the button text is required.
- Images should be 1,024px in width by 1,024px in height. Images are raised up into the previous section.
Section Settings (Content > Sections > Home - Service Times)
This "Home - Service Times" section uses the {{section-monklet-linklist-service-times-list-image|find="service-times"}} monklet to pull the items from the "Service Times" link list.
Home - Countdown
Events > Events
Counts down to the next published event with the "live event" category assigned. The "watch live" button uses the "website" field in the event details.
The section title is managed within the section "content" field: Content > Sections > Home - Countdown
Within the section, the background is controlled via the "background image" field, and the "dark background" option is also selected.
Home - Sermon
Content > Sermons
Displays the video for your latest sermon and includes a button link to view the series.
The section title is managed within the section "content" field: Content > Sections > Home - Sermon
Within the section, the background is controlled via the "background image" field. The "dark background" and "large padding" options are also selected.
Home - Events
Events > Events
This section uses the {{section-monklet-featured-events-carousel}} monklet to display the latest events that are published as featured. You can also add the "find_category" or "find_group" parameter to pull the latest featured event assigned to a specific category or group.
Example: {{section-monklet-featured-events-carousel|find_category="children"}}
The section title and "view all events" button are managed within the section "content" field: Content > Sections > Home - Events
Within the section, the background is controlled via the "background color" field. The "large padding" option is also selected. The "Section Settings: Gradient Border Blue Green" category is used.
Home - New
This is a freeform content section, so any text, image, links, etc are managed in the content field. This default setup is using the "background image" field and "parallax background" option. The "dark background" option is also selected, so the section title and content display white against the dark background.