Client Setup Guides

Section Monklets

Overview

Monklets are predefined code snippets that allow you to bring in other module content (sermons, events, etc.) into your pages. There are a few monklets that have been created that are placed in the content area of your full width sections.

You can use a monklet inside a section by placing your cursor in the content area, selecting Insert > Insert Monklet > "Desired Monklet".

Some monklets allow/require inline parameters to be passed to define items from a specific group, category, etc. http://help.monkcms.com/article/using-monklets/ and https://help.ekklesia360.com/article/using-inline-parameters/ provides details on using these parameters.

*NOTE - Monklets defined with "Section Monklet" in the title can be inserted in the page content area or the content area of a section and those with "Sidebar Monklet" only in sidebar sections.

Section Monklet - Callout

Displays a callout feature from a link list. The find inline parameter is required. The button text is required to display the link button. If an image is assigned to the link it will display in the left column.

Section Monklet - Locations

Displays a list of all church entries that are setup as groups in the campuses group series.

Section Monklet - Connect

Displays a row of links from a link list. The button text is required to display the link button.

The custom icons are created by entering a custom class in the icon class field. To see a full list of available icons: http://nhlc.monkpreview3.com/_assets/fonts/icons/icomoon/ or http://nhlc.org/_assets/fonts/icons/icomoon/ when your site goes live.

Section Monklet - Two Columns

Uses a link list to display two columns. Each link in the list represents one column and should contain two links/columns. The description field is used for the content in each column. The background color field will allow you to assign a background color to the column and the dark option allows you to display the content on a dark background (both of these work the same as the section options).

*NOTE - The description field of the link list will display as paragraph text. If you would like to have full a html section content for a specific tab you can do so by creating a section with the desired content. Once created you will place the slug of the section in the corresponding link description field with curly braces. If you create a section labeled "My Section" the link description field should contain the slug as {{my-section}}. You can also use monklets in the same way eg. "Section Monklet - Featured Events (1)" would be {{section-monklet-featured-events-1}} in the description field.

Click to see detailed instructions:

Step 1 – create a new link list (Content > Link Lists). Within the list, you need to have two items, which are for the two columns. I created a new link list titled “Adults – Two Columns” and add two items to the list, one for each column → see here. Within each item, you can use the “background color” field to add a hex color for that column, and the “dark” option can be used with a dark background color so it will switch the content to white.

The “description” field is where the content for the column can be added. However, the link list doesn’t have a full editor option like pages/sections, so if you want to have more than just paragraph content, you’ll need to create a section for the content in each column, which is step 2…

Step 2 – create a new section for the content in each column (Content > Sections). For your Adults page, I setup two sections → see here, and the content for each column would need to be setup in each section.

Step 3 – connect the content sections to each column item in the link list. For each section, copy the tag here and then this needs to be pasted into the description field of the respective link list items → see video example here. The curly brackets need to be added, as well.

Step 4 – create a new section and add the “two columns” monklet. I created a new section titled “Adults – Two Columns” and added the section columns monklet. The “find” parameter needs to be added to the monklet in order to specify which link list to pull in. The slug version of the link list title needs to be used, so all lowercase and dashes instead of spaces → see example.

Step 5 – add the section to your page → see here.

Section Monklet - Featured Events (1)

Displays the most recent event published as featured. You can use the find_group and find_category inline parameters as needed.

*NOTE - This is primarily used in the link list for the Two Columns monklet but can be used in any section.

Section Monklet - Recent Events (3)

Displays the 3 most recent events. You can use the find_group and find_category inline parameters as needed.

*NOTE - This is primarily used in the link list for the Two Columns monklet but can be used in any section.

Section Monklet - Featured Events Row (3)

Displays the 3 most recent events published as featured in a row of 3 events. You can use the find_group and find_category inline parameters as needed.

*NOTE - The image displays on top followed by the event name, the day/date, the time and the location name (if one is used).

Section Monklet - Recent Sermon

Displays the most sermon. You can use the find_group and find_category inline parameters as needed.

Displays a row of 3 links from a link list.

The image displays at the top followed by the name, description and optional url. If the url is used the button text must also be used. Note that the link displays on the same line as the description.

The optional custom icons are created by entering a custom class in the icon class field. To see a full list of available icons: http://nhlc.monkpreview3.com/_assets/fonts/icons/icomoon/ or http://nhlc.org/_assets/fonts/icons/icomoon/ when your site goes live.

Section Monklet - Linklist Row (4)

Displays a row of 4 links from a link list.

The image displays at the top followed by the name, description and optional url. If the url is used the button text must also be used. Note that the link displays on the next line from the description.