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.

Section Monklet - Callout

Displays a callout feature from a link list.  The find inline parameter is required.  The description is the callout text and 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://mk041.dev.monkpreview.com/_assets/fonts/icons/icomoon/

Connect Links: Displays image links from a link list.  The find inline parameter is required.  All images used within the same list should be the same size.  Square or 16:9 ratio images are recommended.  The find inline paramter is required.  The coloring is based on your Accent Color options from the color picker.

Section Monklet - Content Rotator

Displays images as a rotator from the rotators module.  Use the find inline parameter to define which rotator to display.

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

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

Section Monklet - Recent Sermons (1)

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

Section Monklet - Next Steps

Displays icon links from a link list.  The find inline parameter is required.  The coloring is based on your Accent Color options from the color picker.  The custom icons are created by entering a custom class in the icon class field.  To see a full list of available icons: http://mk041.dev.monkpreview.com/_assets/fonts/icons/icomoon/

Displays a row of campuses and service times from a link list.  The find inline parameter is required.  

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.

The url/button option is used on the monklet ""Section Monklet - Linklist - Service Times List"  and is hidden from the "Section Monklet - Linklist - Service Times List (Image)" monklet.

The image option is used on the monklet "Section Monklet - Linklist - Service Times List (Image)" and is hidden from the "Section Monklet - Linklist - Service Times List" monklet.  Images are raised up into the previous section.

Displays a video from a link list (Content > Link Lists). The find inline parameter is required. The video is assigned in the url field of the link. The image is used as the preview image prior to the user selecting to play the video.

Displays a row of two columns from the Link List module. The find inline parameter is required. Each link in the list represents a row.  The link image displays in the left column and the link information fields display in the right column.

  • The image is recommended to be 16:9 ratio (1,024px by 576px).  If you use the icon class field the icon will display over the image.
  • Sub Title - Displays the section heading . The default section heading option will display as the site yellow. You can place any of the three additional color option in the link "Class" field "blue, breen, darkblue".  If you want to display the section heading with the right underline you can also place the class "right" in the class field.  If you are also using the class field for the color you will want to make sure there is a space between the color class the right class.
  • The description displays under the section heading.
  • If the url is used the button text is required.

Section Monklet - Tabs w/ 2 Column Feature

This monklet combines the site tab with the monklet "Section Monklet - Linklist Feature - 2 Column".

  • The name field is used as the tab title.
  • The instructions for the monklet "Section Monklet - Linklist Feature - 2 Column" are the same for this option.   The only difference is that the alternating link entries (rows) will display the image/information on alternating sides.

Displays a row of 3 columns from the Link List module. The find inline parameter is required. Each link in the list represents a column.  If the entry does not have a link/url assigned the information will display at the top, otherwise the information will display at the bottom and if an image is used the link box will overlay the image. 

  • If the Sub Title field is used the section heading option will display (looks best on entries that do not have links).  The class field is not an option for the section heading and will display to match the custom designed layout.
  • The Button Text field should be used if the the entry as a link/url.
  • The description displays below the headings.
  • Images should be 1,280px in width by 1,170px in height.

Note - This is a full width monklet and no other section content should be used with this monklet.

Displays a carousel of 3 banners from the Link List module. The find inline parameter is required.

  • Sub Title - displays as the banner heading.
  • Description - displays under the banner heading.
  • 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.

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 Monklet - Event Countdown

Displays a countdown to the latest event published to the category you add with the find_category inline parameter.  If the find_category parameter is not used the default category is "Live Event".  The event website field will be used as the live link.  

*NOTE - this should be used only once on a page.

Section Monklet - Recent Sermon Video

Displays the most recent sermon published to the sermons module.  The sermon image displays as the video overlay.  You can use the find_group and find_category inline parameters as needed.

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

Displays custom content from a link list. The find inline parameter is required.

  • There should only be 1 level 1 link entry.  This is used for the heading.  The Sub Title field is used for the heading text (this heading coloring is set).  The image for the link entry should be 1,024px in width by 1,024px in height.
  • Each second level link displays below the heading.  Please note the design was very specific to have only two entries.  If additional entries are needed the background imagery may need to be updated.  The Sub Title is the heading followed by the Description field.  If the link url is used the Button Text is required.

*Note - this section uses custom backgrounds for the campus map so the section background options should not be used.