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.
**NOTE - Monklets defined with "Sidebar Monklet" in the title can be inserted in the content area of a sidebar section.
Sidebar Monklets
Sidebar Monklet - Fancy Image Blue, Sidebar Monklet - Fancy Image Orange or Sidebar Monklet - Fancy Image Red: Uses a link list to display a custom designed view of that image. You will need the find tag to define which link list to display. The link list should only have a single link. Any size image can be used. The design recommendation is 820px wide by 1,060px tall.
Sidebar Monklet - Staff (1): Displays the first person from the members module assigned to a specific group. The find_group inline parameter is required.
Section Monklet - Linklist Carousel or Section Monklet - Linklist Carousel
Either monklet displays the linklist links as a carousel. The calendar option displays the heading and view calendar options. Images for a specific linklist should be uniform in size. The design recommendation is 640px wide by 410px tall.
Section Monklet - Linklist Carousel 2
Displays the linklist links as a carousel. Similar to the options above but displays in a 2 column row with larger cards. Images for a specific linklist should be uniform in size. The design recommendation is 640px wide by 410px tall.
Section Monklet - Embed Video Button
This monklet can be used in a section or in the header text for the billboard area of a page. This uses a link list that can contain a single linked video and must be linked to an embed video (Vimeo or YouTube) loaded on the CMS. The video will open in a lightbox.
Section Monklet - Linklist Grid
Uses a linklist to display a custom grid of images. This supports 1 to 4 links. Each grid item is custom colored to match the design. If color adjustments are needed or additional grid items needed please contact support.
The link Name is the first word in the heading followed by the Sub Heading. If a url is used the Button Text is required. Images for 1 to 3 links should be 994px wide by 1,120px tall.
If 4 links are used the below image specs are required.
Image for Link 1 - 994px wide by 1,120px tall
Image for Link 2 - 1,370px wide by 820px tall
Image for Link 3 - 940px wide by 820px tall
Image for Link 4 - 1,150px wide by 400px tall
*NOTE - the first link on the home page example uses a custom monklet in the description area. {{linklist-grid-monklet-recent-sermon}} is used to display the most recent sermon.
Section Monklet - Linklist Stories Carousel
Uses a linklist to display a carousel of rotating stories. This is a custom full width section an no other section content should be used. This includes the section settings as this has multiple custom background images that are used.
Each link entry is a slide. Images used should always be 1,250px wide by 1,100px tall and have transparent backgrounds as required by the design (each image has custom shadows, etc. and the transparent background allows for the section backgrounds to display behind the image).
The Name field displays as the heading followed by the Description field.
If the URL field is used the Button Text field is required and displays over the image area. If you use the Icon Class that icon will display as the button and the hover effect will display the Button Text field.
Section Monklet - Linklist Image Row
Uses a linklist to display a 3 column row of images. The link Name is used for the button overlay. Images for a specific linklist should be uniform in size. The design recommendation is 820px wide by 430px tall.
*NOTE - The Button Text field is used for customizing the overlay background and button background. This should be a hashtag followed by a html hex value (re. #959595). The default grid coloring will display if this field is left blank.
Section Monklet - Linklist Image Row Steps
Uses a linklist to display a 2 column row of images. There should be a single (1) level 1 link entry. This will serve as the left column information. The Name field will display as the heading and the Description field as the sub heading.
The second level/child link entries will displays as the right two column grid. The Name field is used for the button overlay. Images for a specific linklist should be uniform in size. The design recommendation is 820px wide by 430px tall.
*NOTE - The Button Text field is used for customizing the overlay background and button background. This should be a hashtag followed by a html hex value (re. #959595). The default grid coloring will display if this field is left blank.
Section Monklet - Alternating Rows
Uses a linklist to altenating rows of content. Each link represents a row with the link image in one column and the link text in the other. Images for a specific linklist should be uniform in size. The design recommendation is 1,990px wide by 880px tall. The Sub Heading field is used as the heading followed by the description text. If a link is used the Button Text field is required to display the button. Rows will automatically display images in alternating left/right columns.
Section Monklet - Tagline
Uses a linklist to display a three column custom option. The link image is in the left column, the link description in the center column and the url with button text is in the right column. Image for the link should be 600px wide by 600px tall.
*NOTE - the description text should have some custom html tags to display the correct coloring and size.
Each line must be in a span tag and the text that you desire bold should be wrapped in a b tag.
Example HTML:
<span><b>Multiplying</b></span>
<span><b>Disciples</b> in a</span>
<span><b>Healthy</b></span>
<span><b>Church</b></span>
Section Monklet - Linklist Featured Button
Uses a linklist to display a two column custom button option. The Name field displays in the left column with the button in the right. The button requires the URL and the Button Text field. You have the option of using an image or a custom icon. You cannot use both together. If an image is used it will be set as a max width of 24px to mimic the icon size
Section Monklet - Linklist Numbered List
Uses a linklist to display a full column row of numbered options. Each link only requires the Name field. The numbering is automatic and will display as equal columns in the row.
Section Monklet - Directions
Uses a linklist to display a two column custom option. The link description is in the left column and the link url with button text is in the right column.
Section Monklet - Linklist Grid Color
Uses a linklist to display a column row of colored link boxes.
- The field "Sub Heading" is used for the hex color. This should be a hashtag followed by a html hex value (re. #959595)
- The Name field is the colored box heading
- The Description field displays under the name
- You have the option of using an image or a custom icon. You cannot use both together. If an image is used it will be set as a max width of 64px to mimic the icon size
- The Button Text field is used for the button text below the Description field
This is a custom full width section and should not be used with other content in the section.