Special Event Layout #1

Steps Overview

This layout involves multiple areas of Ekklesia360, so you will want to follow these steps, each of which are outlined in this setup guide.

  • Step 1 - Create your Event
  • Step 2 - Add your content to the various Sections (see detailed instructions below)
  • Step 3 - Update the template details
  • Step 4 - Update your layout colors (if applicable)

Template Overview

The Special Event Layout allows you to provide a central location for visitors to learn about a specific event. This template can be reused as many times as you'd like; however, the map location and colors would apply to all pages using the layout.

This layout works in conjunction with the Events module. You will need to setup an event in the CMS, and the layout will automatically populate with the event details (image, title, date, location and countdown timer). The rest of the layout is powered by Sections (Content > Sections). The sections are fully editable, making it easy to drop in new content or rearrange the order of sections on the template.

In addition, you will have the option to change colors specific to your Special Event page using the color picker. NOTE: this is only applicable if your website includes a color picker.

Anchor Page Navigation

The Special Event Layout features a horizontal Anchor Page Navigation. Each title is linked to a section on the template. When clicked, page visitors will be moved down to the anchor points, and the navigation bar remains at the top as visitors move down the page.

The Anchor Titles will pull from the "Description" field of each section (overview included in the Sections portion of the setup guide).

PRO-TIP: We recommend using short titles for the anchor links to ensure that the navigation doesn't become crowded.

Before You Get Started

Your implementor should have already built out the Special Event Template #1 for you, and the page will be located under Content > Pages. If you can’t easily find the template in the list, use the Template Filter.

Create Your Event

A number of areas within your layout will auto-populate content from your event, so the event will need to be created under Events > Events. Within the event settings, the following areas will be used for Special Event Layout:

  • Name: Displays the event name at the top of your page
  • Start/End Date and Time: Displays the date below the event title, as well as controls the countdown timer
  • Location: Display the location below the event title, as well populates the map area of the layout
  • Image: Displays at the top of the layout

Event Image

In order for your event image to display correctly on both the Special Event Layout and Event Layout #3, you will want to use a 16x9 image, such as 1200x675px. However, if you are not using the Events Layout #3, you are welcome to shorten the image height or use the header image dimensions outlined in your website setup guide.

Working with Sections

The majority of your Special Event Layout is powered by Sections, which are located under Content > Sections. Your template features up to 6 sections that you can fully edit and rearrange the order of. The default sections used on the layout will be pre-built for you, but you are welcome to add your own as well!

NOTE: Because Sections are used for other areas of your website, you can easily find the pre-built sections for your Special Event layout by using the "search this list" field and looking for the word "Special".

Within each section, the following fields/options are used for this layout:

  • Name: title of the section (for internal use only)
  • Description: populates the section title on the Anchor Bar Navigation
  • Content: WYSIWYG editor that supports all text, media, links, etc. See specific instructions for each section below
  • Background Color: Adding a hex code will change the background color of a section. Refer to your color picker to grab the correct code. Using the Color Picker.
  • Background Image: The image will display behind the section content and replace the color if uploaded
  • Dark Background: Inverts the section content to show white text on a dark background (like the Schedule section)
  • Parallax Background: Adds parallax scrolling functionality, so you would see the text scrolling overtop of the background image (like the Countdown Timer section)

Detailed instructions for each section are listed below:

"Special Event #1 - General Info" Section

This first section will display the event title, date and location from your event settings. All the content underneath will pull from the "Content" field within this section.

"Special Event #1 - Countdown " Section

The title displaying above the timer is editable within the "Content" field of the section. The timer will automatically pull from the date/time in your event settings.

NOTE: The Countdown section does not include a title in the anchor navigation bar, so the "Description" field for this section can remain blank.

"Special Event #1 - Pricing" Section

The pricing info is all entered in the "Content" field of this section. You can add your own text, links, images, etc.

"Special Event #1 - Schedule" Section

The title, background image, etc are managed within the "Special Event #1 - Schedule" secion, but each tab is also setup as it's own section. Each section shows unique content and is supported by the WYSIWYG editor with font styles, media, links, and more. 

Step 1

Navigate to Content > Sections > then select the section you would like to edit:

“Special Event - Tab 1,” “Special Event - Tab 2,” and “Special Event - Tab 3” 

Within each tab section, you only need to fill in the following fields:

  • Name: This will be for internal use only, so you will want to use a naming convention that is easy to locate in the sections area and includes the tab number. This will be used for Step 2.
  • Content: This is where you will add in the content for each tab (ie: text, links, buttons, etc.)

PRO-TIP: If you would like to add more than 3 tabs to this section on your layout, simply copy one of the pre-existing "Special Event Tab” sections and add the section to the Link List "Special Event- Tabs.”

Step 2

The next step is to setup the title for each tab, which is done by using a Link List. Navigate to Content > Link Lists > “Special Event - Tabs”. Within the list, you will see a separate items created for each tab. You can use the up/down arrows to change the order, the green + to add more items, and the pencil icon to edit each one.

Within each item, you will need to update the following fields:

  • Name: Enter the title you would like to appear as the Tab Title
  • Description: In the "Description" field, you’ll find the Slug Title for each of the corresponding tab sections (from Step 1). For example, the section title "Special Event - Tab 1" is formatted like this in the Link List description: "special-event-tab-1"

A Slug Title is a web-friendly version of the title, where all spaces are converted to dashes (-) and all special characters are removed. The default Slug Titles will already be setup for you layout, but if you create more tabs or additional sections with tabbed content, feel free to check out this Slug Creator Tool to help generate the correct Slug Titles.

NOTE: Do not change the "Special Event - Tabs" Link List title or the "Description" field.

Step 3

This step is ONLY needed if you are creating additional tabbed content sections for your layout. If you are just using the default one that was included, you can skip this step.

To create additional sections with tabbed content, you would need to setup a new parent section (like "Special Event #1 - Schedule" Section) as well as a separate sub-section for each tab. You would also need to create a new Link List with an item for each tab, following the instructions in Steps 1 and 2.

The final step is to go back to the parent section (Content > Sections), and in the "Content" area, the following monklet tag needs to be added:

{{special-event-1-tabs|find="special-event-tabs"}}

The bolded area would need to be replaced with the title of your new Link List (Content > Link Lists), also using the Slug version of the title.

"Special Event #1 - Location" Section

The Location and map will display whichever location of the campuses that you indicate. There is a field called "CAMPUS LIST" within the event that you will need to add the slug of the campus name from the branches module into. Ex, if you wanted north and south campuses to display, you would type 1north-campus,2south-campus (the slug of the campus name in the branches module, separated by a comma). 

If you want to change the display of the location info or add more details, you can add your own text into the "Content" field of this section, and it will override the default address (to only display the content you add within the section). The map will still pull from the address in your branch settings.

"Special Event #1 - Contact" Section

This is a fully editable section using the Content field. You can add in a form from the Forms module, or add your own text, button, links, etc.

HELP SITE: Creating Forms

Editing the Template

The template pulls in the details from one specific event (using the Events module) as well as sections of editable content (located under Content > Sections). A section can display any type of content you create - text, images, videos, links, and monklets, and the template is pre-built with sections for you to begin editing. Each section used for the Special Event layout is outlined below in this setup guide.

HELP SITE: Editing Sections

Page Title

The page title for your Special Event Layout will not display on the site, so this is for internal use only.

Description (Event ID)

Within the "Description" field, you will need to add your 6-digit event ID. This is how the layout will pull information from your event into the page.

To grab this number, you will need to locate your event in the CMS (under Events > Events), select your event title and the event ID number will display at the end of the URL in your browser bar. Copy that and then add it to the "Description" field of your page.

NOTE: If your event is not yet created, please see the "Create Your Event" instructions outlined above.

Header Image

The "header image" field will display ABOVE the event image at the top of your layout. It's not necessary to load an image in this field since the event image will be displaying at the top of your page; however, some designs require that a header image is included.

If you do add in a header image, please refer to the specific dimensions listed in your website setup guide.

Template

The "template" dropdown will be pre-selected to the "Special Event 1 Layout". Any additional pages where you want to use this custom layout will need to have this template selected within the page settings.

Sections

The content on your page pulls from your event and pre-built sections, so no content will be added within the page itself. The default sections for the layout will be pre-built for you and selected in the respective section dropdowns in your page. The sections are found under Content > Sections, and you can also click the "edit section" link next to each dropdown.

You are welcome to remove any of the preset sections and add in your own!

Changing the Layout Colors

If your website includes a color picker, you will have the option to change background color for the anchor navigation bar and buttons, as well as the navigation and button text color, as well as the sticky nav background color. The header and text color throughout the layout will pull from the default color picker options for your website.

NOTE: The colors changes will apply to all pages using this template.

You can also use the "Background Color" field to change the background color for the sections in your layout. You will need to use a 6-digit hex value.