Base Template Publishing Guide

Content Type: Static

Position: Body

View: Anchor (Base)

How to publish this:

1. Add a Basic Wrapper to the site page of your choosing.

2. Drag and drop any Content item onto the wrapper and choose the Anchor (Base) view. Note: the alias of your content item will be what is used as the anchor link!

3. Drag and drop that same Content onto the wrapper, but this time choosing a different view (depending on the type of content).

4. Format of links will be:
   https://url.org#content-item-alias

BASIC (BASE)

PREVIEW

Content Type: Static

Position: Body

View: Basic (Base)

How to publish this:

1. Drag and drop a Basic Wrapper over onto the page you would like your content to display.

2. Choose the Body position and Basic (Base) view.

3. Create a Static content item with any information you would like to display (Title, Button, Text, Image, etc.).

4. Drag and drop your content item onto the Wrapper you had placed on the page.

5. Choose the View you’d like your content to display. Examples in the screenshot are Basic (Base) and Hero (Base) respectively.

6. Preview your page and make any adjustments using View Classes!

Example: Video Link

Button Right - If a button is specified on the content item, then it will align to the right side of the row (as far as it can go)

Text Center - All text within your content item will shift to the center

Example (As Link): Video Link

Example (Positions): Video Link

As Link - An image specified will become a “button” where the link you have set in the Button field will be where the image links

Left - The image appears to the left of the content

Right - The image appears to the right of the content

Example: Video Link

Example: Video Link

H1 - Title of your content becomes largest at 48px*

H2 - Title of your content becomes 40px*

H3 - Title of your content becomes 36px*

H4 - Title of your content becomes 28px*

H5 - Title of your content becomes 25px*

Example: Video Link

Example: Video Link

BOX SUMMARY (BASE)

PREVIEW

View: Box Summary (Base)

How to publish this:

1. Drag and Drop a Basic Wrapper onto your page.

2. Drag and Drop Static content onto the page within the Wrapper and choose the Box Summary (Base) view to get it to look like the screenshot to the right! Note: The image is pulled from the Cover Image related to your content items you publish! Also, it will preview like Screenshot 1, but on hovering the content item it will display the Summary text with a line underneath the title as seen in Screenshot 2.

Example: Video Link

FLIP CARD (BASE)

PREVIEW

View: Flip Card (Base)

How to publish this:

1. Drag and Drop a Basic Wrapper onto your page.

2. Drag and Drop your Static content to display on the frontend of your website.

3. You will notice that the Image field is being pulled as the image behind the Title, and when clicking the Flip Card you will see the Summary text!

FLOATING BUBBLE LINK (BASE)

PREVIEW

View: Floating Bubble Link (Base)

How to publish this:

• Drag and Drop a Basic Wrapper onto your page.

• Bring over your Static content by dragging and dropping it into the newly added Basic Wrapper and select the Floating Bubble Link (Base) View. 

• Preview your page and your content will show up in the bottom right corner of your screen and follow along as you scroll! Note: When adding a link, (found in the Button fields), you can have it link to an anchor or a regular page, or any other custom link you may have!

Example: Video Link

Align Left - When selected, the floating link will display on the bottom left side of your screen

HERO (BASE)

Content Type: Static

Position: Body

View: Hero (Base)

How to publish this:

1. Add a Basic Wrapper by dragging and dropping it onto your site page.

2. Ensure your Static content item has at least an image in the Image field, and an engaging title along with Summary Text and/or a Button that links to a giving or learning outcome!

3. Drag and drop your Static content over to the page you want your Hero to be published to and select the Hero (Base) View.

4. Your content will now display with a large background image behind it along with your other content as seen in the screenshot on the right! Example: I have the Title, Summary and Button fields filled out in the screenshot.

Example: Video Link

Example: Video Link

Example: Video Link

Fade Out - Content within your Hero image will fade out while scrolling

Fixed Background - The image position stays the same as you scroll

Parallax - The image position moves when scrolling either way

Example: Video Link

Height 1 (Tiny) - The height of your hero image becomes 400

Height 2 (Small) - The height of your hero image becomes 500

Height 3 (Normal) - The height of your hero image becomes 600

Height 4 (Big) - The height of your hero image becomes 700

Example: Video Link

H2 - Title of your content becomes 40px*

H3 - Title of your content becomes 36px*

H4 - Title of your content becomes 28px*

H5 - Title of your content becomes 25px*

H6 - Title of your content becomes smallest at 18px*

Text Shadow - This will add shadow behind any text being displayed within your content

* Custom Templates and Customize variables will change these fixed pixel values!

PHOTO ALBUM (BASE)

PREVIEW

Content Type: Static

Position: N/A

View: Photo Album (Base)

How to publish this:

1. Add a Basic Wrapper by dragging and dropping it onto your site page.

2. Create a content item using ONLY the Image Multi field, adding as many images you would like to display on your page.

3. Drag and drop your content item onto the Wrapper you published earlier and choose the Photo Album (Base) view.

4. Preview your page and you will now see all of your images populated on the page!

Note: You can also click on any image to show the larger version, view it in fullscreen, as well as share it to your favorite social media platform!

Example: Video Link

TESTIMONY (BASE)

PREVIEW

Content Type: Static

Position: Body

View: Testimony (Base)

How to publish this:

1. You will want to add a Basic Wrapper onto the page where you would like your testimonies to be displayed.

2. Create your Static content item(s) with the following: Title (usually a Name), Body text (the testimonial itself, maybe with a small subtitle for their role Example: Missionary), and an Image (the person's image or placeholder image if anonymous).

3. Drag and drop the item(s) you created into the Basic Wrapper and select the Testimony (Base) View and it should now show like the screenshot on the right!

VIDEO (BASE)

PREVIEW

Content Type: Static

Position: Body

View: Video (Base)

How to publish this:

1. Add a Basic Wrapper to your site page where you would like the video to be displayed.

2. Next, add a content item with an Image related to the video you will be showing, along with the link of the video (Video File [internal] or Video URL [external]).

3. Drag and drop your content item onto the Wrapper you published and choose the Video (Base) view.

4. Preview your page and you will see the video bar with the image you chose along with a Play button (Screenshot 1). When you click the Play button, this will then bring up the video to fit the screen (Screenshot 2).

Example: Video Link

Height 1 (Tiny) - The height of your video’s row becomes 400

Height 2 (Small) - The height of your video’s row becomes 500

Height 3 (Normal) - The height of your video’s row becomes 600

Height 4 (Big) - The height of your video’s row becomes 700

VIDEO DETAIL (BASE)

PREVIEW

Content Type: Static

Position: Body

View: Video Detail (Base)

How to publish this:

1. Add a Wrapper to your site page where you would like the video to be displayed.

2. Drag and drop your content item onto the Wrapper you published and choose the Video Detail (Base) View.

VIDEO SUMMARY (BASE)

PREVIEW

Content Type: Static

Position: Body

View: Video Summary (Base)

How to publish this:

1. Add a Wrapper to your site page where you would like the video to be displayed.

2. Drag and drop your content item onto the Wrapper you published and choose the Video Summary (Base) View.

3. The screenshot on the right is how your content will show, and when clicking on this it should link to this specific content item's Detail View!

ADVOCACY DETAIL (BASE)

PREVIEW

Content Type: Missionary & Project

Position: Body

View: Advocacy Detail (Base)

How to publish this:

• Drag and Drop a Basic Wrapper onto your page that will hold the content.

• Drag and Drop one or more of your content items, or the folder itself (to get all dynamic content).

• After selecting the Advocacy Detail (Base) View, it will show like you see in the screenshot example!

Note: This is good to show the detail body text and the image of your dynamic content type, but no title or link is included in this view! The example given is only a missionary, but other content types will get the same view layout.

ADVOCACY REVIEW (BASE)

PREVIEW

Content Type: Missionary & Project

Position: Body

View: Advocacy Review (Base)

How to publish this:

• Drag and Drop a Basic Wrapper onto your page that will hold the content.

• Drag and Drop one or more of your content items, or the folder itself (to get all dynamic content).

• After selecting the Advocacy Review (Base) View, it will show like you see in the screenshot example!

Note: This is used to show advocacy details where someone can create a new advocacy campaign for, almost like having a featured type of campaign where you are trying to reach specific goals! The example given is only a missionary, but other content types will get the same view layout!

BOX SUMMARY (BASE)

PREVIEW

Content Type: All Dynamic Content Types

View: Box Summary (Base)

How to publish this:

1. Drag and Drop a Basic Wrapper onto your page

2. Drag and Drop one or more of your Missionaries, Projects, or Children onto the page in the Wrapper and choose the Box Summary (Base) view to get it to look like the screenshot to the right! Note: The image is pulled from the Cover Image related to your content items you publish!

Example:

Children (Video Link)

Missionary (Video Link)

Opportunity (Video Link)

PREVIEW

Content Types: Article

View: Card

How to publish this:

1. Drag and drop a Basic Wrapper that will hold your Article.

2. Drag an Article into the Basic Wrapper and choose the Card View.

3. This will now render your Article with the Title and Summary content.

Example: Video Link

DETAIL (BASE)

PREVIEW

Content Type: All Dynamic Content Types

Position: Body

View: Detail (Base)

How to publish this:

1. Drag and drop a Basic Wrapper onto your chosen page.

2. Drag and drop a Missionary content item, or drag the folder that contains the Missionaries (or any other content type) into that same Basic Wrapper along with choosing the Detail (Base) view to display it correctly.

3. Preview your page and it should look similar to the screenshot you see off to the right side.

4. You will know if it is working when you either go to the Missionaries page and the content items are linking to that page, or if you right-click on those content items within the Content Explorer side of Site Planner and the Preview button is taking you to that page.

Note: The use case for this view is as a detail page for any dynamically assigned content within a Search Module's Summary View. Learn how to set up the Search Module. Then once you have that setup, you will drag the page you want the Detail (Base) view to display, over to the folder with the content you want to be published! Example: Missionary page is dragged to the Missionary > Active folder and Detail (Base) View selected so that all Active Missionaries show in both the Summary View and have Detail pages!

Examples:

Video Link (Child)

Video Link (Missionary)

Video Link (Opportunity)

Video Link (Project)

Article Detail Page

Opportunity Detail Page

Project Detail Page

PREVIEW

Content Types: Opportunity

Position: Body

View: Event Summary (Base)

How to publish this:

1. Drag and drop a Basic Wrapper onto your chosen page.
2. Find an Opportunity content item and drag and drop that within your newly published wrapper.
3. Choose the Body (Position) and Event Summary (Base) (View) and you should now see a summary view of your opportunity!

Note: There are two different layouts for this view that you can choose with the "Alternate" View Class

Example: N/A

PREVIEW

Content Types: Article

Position: Body

View: Featured Summary

How to publish this:

1. Drag and drop a Basic Wrapper onto your chosen page.
2. Find an Article you would like to feature, and drag and drop that into your Basic Wrapper.
3. Choose the Featured Summary (View) and you should now see the featured summary of your desired Article(s)!

Note: At first it will only show the article's image and the title, but on hover it will replace the Title with the Summary and show a "Read More" button (see Hover Effect screenshot)!

Example: N/A

GIVE INPUT ONLY (BASE)

PREVIEW

Content Type: Children, Missionary & Project

Position: Body

View: Give Input Only (Base)

How to publish this:

1. Drag and drop a Basic Wrapper onto your chosen page.

2. Drag and drop any of the above Dynamic Content Types and select the Give Input Only (Base) View.

3. You will see just the give input where you can give any amount by typing in the field

Note: You can pair this with other kinds of content like call to actions or other information that donors may need to know what they are giving to!

Example: Video Link

PREVIEW

Content Types: Project

Position: Body

View: Give Input Only (Recurring) (Base)

How to publish this:

1. Add a Basic Wrapper to the page where you would like to display your content as Give Inputs only.

2. Drag and drop any number of the dynamic content items listed above and select the Give Input Only (Recurring} (Base) View

3. You will see the give input along with any Fixed Amounts that you have added to this Project and an "Other" field, where you can give any amount by typing in the field!

Note: By default, the view will be recurring, but if you click on the Give Once tab it will switch the gifts to a one-time gift (see Give Once View screenshot) and not show as Recurring in the cart!

Example: Video Link

PREVIEW

Content Types: Missionary & Project

Position: Body

View: Giving Popup (Base)

How to publish this:

1. Drag and drop a Basic Wrapper that will hold this content.

2. Drag and drop a Missionary or Project Content Item into that Basic Wrapper and choose the Giving Popup (Base) View.

3. This will now render a Gift icon in the bottom right of the screen where you can click it and a popup will appear with a Give Input for donors to give any amount they specify.

Example: Video Link

PREVIEW

Content Types: Project

Position: Body

View: Goal Meter (Base)

How to publish this:

1. Drag and drop a Basic Wrapper that will hold this Goal Meter.

2. Drag and drop a Project Content Item into that Basic Wrapper and choose the Goal Meter (Base) View.

3. This will now render a goal meter that shows the giving goal of a Project and fills in when funds are donated to it (both numerical and percentage)!

Example: Video Link

H2 - Title of your content becomes 40px*

H3 - Title of your content becomes 36px*

H4 - Title of your content becomes 28px*

H5 - Title of your content becomes 25px*

H6 - Title of your content becomes smallest at 18px*

PREVIEW

Content Types: Missionary & Project

Position: Body

View: Hero (Base)

How to publish this:

1. Drag and drop a Basic Wrapper that will hold your Missionary or Project content.

2. Drag and drop your desired Missionary or Project Content Item into the Basic Wrapper and choose the Hero (Base) View.

3. This will now render either a Missionary's name with summary text and a give input, or a Project's title, summary, and give input (with fixed amounts and a recurring toggle if set up)!

Example: Video Link 

(for Missionaries)

Fade Out - Content within your Hero image will fade out while scrolling

Fixed Background - The image position stays the same as you scroll

Parallax - The image position moves when scrolling either way

Height 1 (Tiny) - The height of your hero image becomes 400

Height 2 (Small) - The height of your hero image becomes 500

Height 3 (Normal) - The height of your hero image becomes 600

Height 4 (Big) - The height of your hero image becomes 700

H2 - Title of your content becomes 40px*

H3 - Title of your content becomes 36px*

H4 - Title of your content becomes 28px*

H5 - Title of your content becomes 25px*

H6 - Title of your content becomes smallest at 18px*

Text Shadow - This will add shadow behind any text being displayed within your content

* Custom Templates and Customize variables will change these fixed pixel values!

PREVIEW

Content Types: Missionary

Position: Body

View: Prayer Popup Summary (Base)

How to publish this:

1. Drag and drop a Basic Wrapper that will hold your Missionary content.

2. Drag and drop a Missionary into the Basic Wrapper and choose the Prayer Popup Summary (Base) View.

3. This will now render a Missionary content item with their image, name and summary text!

Example: Video Link

PREVIEW

Content Types: Article

Position: Body

View: Read Related Story (Base)

How to publish this:

1. Drag and drop a Basic Wrapper that will hold your related Article content.

2. Drag and drop your Article into the Basic Wrapper and choose the Read Related Story (Base) View.

3. You should now see the related Story with its Title, Summary and a Read Related Story button!

Example: N/A

Color 1, Color 2, Color 3, Color 4 - These will be colors based upon the Branding Guide that you provided to us and can be used to style the color of the Article's background color

PREVIEW

Content Types: Child, Missionary, Opportunity & Project

Position: Body

View: Related (Base)

How to publish this:

1. Drag and drop a Basic Wrapper onto any Detail Pages of the above content types (Ex: Missionary Detail Page) where these related items will be displayed

2. You will now want to drag a folder containing those exact same Content Types (Usually an Active folder if you have the structure set up that way so not to have any inactive items be shown)

3. Now your content should show as a wide view with the image, title and an arrow to click through to that content item's Detail Page!

Note: When publishing the folder, you will want to scroll down to the Tags section and choose a Tag Category and select the Tag Categories Mode to Filter, so that only content specifically related to the specific tags that are on each Content Item show so that it is precise when looking at related content to the one you are currently viewing!

Examples:

Video Link (Children)

Video Link (Missionary)

Video Link (Opportunity)

Video Link (Project)

PREVIEW

Content Types: All Content Types

Position: Body

View: Summary (Base)

How to publish this:

1. Drag and drop a Basic Wrapper onto your chosen page.

2. Drag and drop a Missionary content item, or drag the folder that contains the Missionaries (or any other content type) into that same Basic Wrapper along with choosing the Summary (Base) view to display it correctly.

3. Preview your page and it should look similar to the screenshot you see off to the right side.

4. You will know if it is working when you either go to the Missionaries page and the content items are showing with their Images, Summary Text, Give Inputs (if applicable), and linking to their Detail pages.

Note: The most used case for these Content Type views is within a Search Module's Summary View. Learn how to set up the Search Module. You will want to make sure that the Detail (Base) is set up for these Content Items to link to and display!

Examples:

Video Link (Missionary)

Video Link (Project)

Opportunities and Children (not listed in the examples) can be published the same way!

Examples:

Video Link (Child)

Video Link (Opportunity)

Video Link (Project)

Black - This will change the background color of the Accordion

Color 1, Color 2, Color 3, Color 4 - These will be colors based upon the Branding Guide that you provided to us and can be used to style the color of your Accordion

Shadow - Adds a shadow around your content item (20 wide)

Shadow Large - Adds a shadow around your content item (40 wide)

Shadow Small - Adds a shadow around your content item (10 wide)

POSITION: BODY

VIEW: ACCORDION (BASE)

PREVIEW

Content Type: Static

Position: Body

View: Accordion (Base)

How to publish this:

1. Create a Wrapper with the title you want your Accordion to have (Accordion Wrapper in this example - this can be any text!).

2. Create a Static Content item with a Title, Summary Text, Body Text and more! Examples: I used the Title, Image and Summary fields.

3. Drag your Wrapper onto the page of your choosing.

4. Set your Wrapper to have the Body position and Accordion (Base) view.

5. Drag and drop your content item onto the Wrapper and choose the View you would like it to display as. Examples: Hero (Base) and Basic (Base) views respectively

6. Right-click and Preview your page and you will see the wrapper name with an arrow that you can click to reveal the content you placed inside of it!

Example: Video Link

Black - This will change the background color of the Accordion

Color 1, Color 2, Color 3, Color 4 - These will be colors based upon the Branding Guide that you provided to us and can be used to style the color of your Accordion

Example: Video Link

Example: Video Link

H1 - Title of your content inside Accordion becomes largest at 48px

H2 - Title on content inside of Accordion becomes 40px

H4 - Title on content inside of Accordion becomes 28px

H5 - Title on content inside of Accordion becomes 25px

Example: Video Link

Black - Title Color on the Accordion will become Black

POSITION: BODY

VIEW: BASIC (BASE)

PREVIEW

Example: Video Link

Wrapper with centered text align - This will align any text in your content items to the center

Wrapper with left text align - This will align any text in your content items to the left side

Example: Video Link

Angled (Colors 1-4) - Makes the wrapper have a downward slant through the middle of the section

Angled Top (Colors 1-4) - Makes the wrapper have a downward slant before the top of the content

Bottom Half (Colors 1-4) - Makes the wrapper have the bottom half colored while leaving the other half transparent (this gives a slight overlapping effect this way!)

Black - This will change the background color of the Accordion

Color 1, Color 2, Color 3, Color 4 - These will be colors based upon the Branding Guide that you provided to us and can be used to style the color of your Accordion

Example: Video Link

1/2 Width Column - Makes your section of content span 1/2 the width of its current width (if any padding is included or other view classes causing it to be a smaller width). Only to be used with another 1/2 width column.

1/3 Width Column - Makes your section of content span 1/3 the width of its current width (if any padding is included or other view classes causing it to be a smaller width). Best used with other 1/3 width columns or the 2/3 width column depending on desired layout.

Example: Video Link

Centered - 1000px - Content inside of this wrapper becomes constrained to a 1000px width container

Centered - 1050px - Content inside of this wrapper becomes constrained to a 1050px width container

Centered - 1100px - Content inside of this wrapper becomes constrained to a 1100px width container

Centered - 1200px - Content inside of this wrapper becomes constrained to a 1200px width container

Centered - 1250px - Content inside of this wrapper becomes constrained to a 1250px width container

Centered - 1300px - Content inside of this wrapper becomes constrained to a 1300px width container

Centered - 400px - Content inside of this wrapper becomes constrained to a 400px width container

Centered - 450px - Content inside of this wrapper becomes constrained to a 450px width container

Centered - 500px - Content inside of this wrapper becomes constrained to a 500px width container

Centered - 550px - Content inside of this wrapper becomes constrained to a 550px width container

Centered - 600px - Content inside of this wrapper becomes constrained to a 600px width container

Centered - 650px - Content inside of this wrapper becomes constrained to a 650px width container

Centered - 700px - Content inside of this wrapper becomes constrained to a 700px width container

Centered - 750px - Content inside of this wrapper becomes constrained to a 750px width container

Centered - 800px - Content inside of this wrapper becomes constrained to a 800px width container

Centered - 850px - Content inside of this wrapper becomes constrained to a 850px width container

Centered - 900px - Content inside of this wrapper becomes constrained to a 900px width container

Centered - 950px - Content inside of this wrapper becomes constrained to a 950px width container

Centered - Default Width - This container becomes the width of the content inside of this Wrapper

Example: Video Link

Fade In Down - Content inside of this Wrapper fades in from top to bottom

Fade In Left - Content inside of this Wrapper fades in from right to left

Fade In Right - Content inside of this Wrapper fades in from left to right

Fade In Up - Content inside of this Wrapper fades in from bottom to top

Example: Video Link (Items / Row)

Videos Coming Soon for the Other Alignment View Classes!

2 Items / Row - Fits 2 items in the row, no matter the width

3 Items / Row - Fits 3 items in the row, no matter the width

4 Items / Row - Fits 4 items in the row, no matter the width

Center Content Horizontally - This will center content to the middle of their respective widths

Center Content Vertically - This will center content to the middle of their respective heights. Best used with the Center Content Horizontally View Class to give better visual appeal!

Top Aligned Content Vertically - Used with the Center Content Vertically View Class, this will align your content to the top of the Wrapper

Vertical Items - This will stack your content items on top of one another

Examples: 

Video Link (Hide Social Share)

Video Link (Related Items Holder)

Video Link (Equalized Children Height)

Video Link (No Vertical Padding on Smaller Screens)

Hide Social Share - Hides social sharing for Articles

Inline Shopping Cart - Shows the Shopping Cart within this section

No Snippet - Disables any Javascript Snippet usages from affecting this section

Related Items Holder - This will help display Related Items in another format

Wrapper with centered content without side padding - Eliminates any side padding that would be on centered content

Wrapper with equalized children height - Forces all Child, Project, Missionary, etc. content to be the same height regardless of the amount of summary text used

Wrapper without vertical padding on smaller screens - Eliminates vertical padding when viewing content on smaller screens

Example: Video Link

Padding - Bottom - Adds 10px of padding to the bottom of this section

Padding - Left - Adds 10px of padding to the left side of this section

Padding - Right - Adds 10px of padding to the right side of this section

Padding - Sides - Adds 10px of padding to the both sides of this section

Padding - Top - Adds 10px of padding to the top of this section

Padding Horizontal x 0.5 - Halves the padding on left or right side (5px)

Padding Horizontal x 1.5 - Multiplies the padding on left or right sides (15px)

Padding Horizontal x 2 - Doubles the padding on left or right sides (20px)

Padding Horizontal x 2.5 - Multiplies the padding on the top or bottom (25px)

Padding Horizontal x 3 - Triples the padding on left or right sides (30px)

Padding Horizontal x 4 - Quadruples the padding on left or right sides (40px)

Padding Horizontal x 5 - Multiplies the padding on left or right sides by 5 (50px)

Padding Horizontal x 6 - Multiplies the padding on left or right sides by 6 (60px)

Padding Horizontal x 8 - Multiplies the padding on left or right sides by 8 (80px)

Padding Horizontal x 9 - Multiplies the padding on left or right sides by 9 (90px)

Padding Horizontal x 10 - Multiplies the padding on left or right sides by 10px (100px)

Padding Vertical x 0.5 - Halves the padding on the top or bottom (5px)

Padding Vertical x 1.5 - Multiplies the padding on the top or bottom (15px)

Padding Vertical x 2 - Doubles the padding on the top or bottom (20px)

Padding Vertical x 2.5 - Multiplies the padding on the top or bottom (25px)

Padding Vertical x 3 - Triples the padding on the top or bottom (30px)

Padding Vertical x 4 - Quadruples the padding on the top or bottom (40px)

Padding Vertical x 5 - Multiplies the padding on the top or bottom by 5 (50px)

Padding Vertical x 6 - Multiplies the padding on the top or bottom by 6 (60px)

Padding Vertical x 8 - Multiplies the padding on the top or bottom by 8 (80px)

Padding Vertical x 9 - Multiplies the padding on the top or bottom by 9 (90px)

Padding Vertical x 10 - Multiplies the padding on the top or bottom by 10 (100px)

Example: N/A

Shadow - Adds a shadow around your content item (20 wide)

Shadow Large - Adds a shadow around your content item (40 wide)

Shadow Small - Adds a shadow around your content item (10 wide)

Example: N/A

Corner Radius (20) [DEFAULT] - Makes Rounded Corners a 20 radius

Corner Radius (40) - Makes Rounded Corners a 40 radius

Corner Radius (5px) - Makes Rounded Corners a 5px radius

Rounded Corner (Bottom Left) - Adds a rounded corner to the bottom left side of the section

Rounded Corner (Bottom Right) - Adds a rounded corner to the bottom right side of the section

Rounded Corner (Top Left) - Adds a rounded corner to the top left side of the section

Rounded Corner (Top Right) - Adds a rounded corner to the top right side of the section

Rounded Corners - Adds rounded corners to your section. These can be made larger or smaller with the Corner Radius 40 or 5px view classes respectively!

Example: N/A

Content Max Width (1000) - Section and content is restricted to a maximum of 1000 wide

Content Max Width (1280) - Section and content is restricted to a maximum of 1280 wide

Content Max Width (450) - Section and content is restricted to a maximum of 450 wide

Content Max Width (650) - Section and content is restricted to a maximum of 650 wide

Example: N/A

Important: These are to be used with the Offset Container (Base) View, as this will prevent overlapping of sections from happening!

Padding Bottom (150) - Adds 150 worth of padding to the bottom of your section to prevent overlapping with Offset Containers

Padding Bottom (200) - Adds 200 worth of padding to the bottom of your section to prevent overlapping with Offset Containers

Padding Bottom (325px) - Adds 325px worth of padding to the bottom of your section to prevent overlapping with Offset Containers

Padding Bottom (550) - Adds 550 worth of padding to the bottom of your section to prevent overlapping with Offset Containers

Example: Video Link

Black - This will change the background color of the Accordion

Color 1, Color 2, Color 3, Color 4 - These will be colors based upon the Branding Guide that you provided to us and can be used to style the color of your Accordion

Example: Video Link

Hide on Desktop - Hides content on devices that are 1100px or less in width
Hide on Mobile - Hides content on devices that are 600px or less in width
Hide on Tablet - Hides content on devices that are 900px or less in width

OFFSET CONTAINER (BASE)

PREVIEW

Content Type: Static

Position: Body

View: Offset Container (Base)

How to publish this:

1. You will want to be in Site Planner and add a new Basic Wrapper to a page with the Body (Position) and Offset Container (View) selected.

2. Depending on the content you are trying to create the Overlap effects for, you can choose a combination of these different View Classes. Example: Offset Top -50%, Offset Left (90), Fixed Height (650)

3. Once you have structured your first Offset Container wrapper, you will add another Basic Wrapper inside with the Basic (Base) View.

4. Make sure to select under the Special Padding section for this Basic Wrapper the Padding Bottom that will counter-balance the Offset container so that your content looks correct and does not overlap! Example: Padding Bottom (150) - This is used for our previous example

5. You can have fun and be creative with these new Views and View Classes by trying out different combinations!

Example: How to Use Offset / Overlapping Views

SLIDER (BASE)

PREVIEW

Content Type: Any

Position: Body

View: Slider

How to publish this:

1. You will want to be in Site Planner and add a new Basic Wrapper to your page with the Body (Position) and Slider (Base) options selected.

2. Find any content that you would like published within this slider and you can drag and drop that with any views how you would like them to display.

3. After doing so, you can adjust the look and functionality of your slider to now fit the content within it!

4. Preview your page that this slider is on and make any changes as you see fit.

Example: N/A

Example: Video Link

Arrow Padding - This will add padding to the left and right sides of your slider so that your content does not overlap the arrows at any point

Dark Color Dots - Instead of the default white dots these will become dark in color

Disable Pause on Hover - While autoplay is enabled, hovering over the slider will not pause the slider

Enable Autoplay - The slider will play through automatically without needing to manually change slides

Fade Transition - Adds a fade in and out transition to content items to the next instead of a slide animation

Featured Slider - Shows 3 items instead of a single content item

Show Arrows - This will display arrows on both sides of your Slider

TABS (BASE)

PREVIEW

Content Type: Wrapper

Position: Body and Popup

View: Tabs

How to publish this within the Body:

1. You will want to be in Site Planner and add a new Basic Wrapper to your page with the Body (Position) and Tabs (Base) option selected.

2. Create Wrappers with different names to hold your content within.

3. Publish each of the tabs to your page to see how they will look with their titles.

4. Now you can publish as much content as your heart desires within each of the tabs you have published.

5. Preview the page you have these published on now and see how the functionality of switching between the tabs works!

How to publish this within the Popup (and how it works):

1. You will want to be in Site Planner and add a new Basic Wrapper to your desired page with the Popup (Position) and Tabs (Base) option selected. Note: This is used frequently with the Give button in the header menu, so you may need to add this to your Assigned Content under the All Pages folder!

2. To ensure that the popup works, you will need to have a menu item or a link that has a CSS Class of “open-popup” (Example of inline HTML: <a href="#" class="open-popup"> Open Popup</a>)

3. You will need to now create up to 3 new Basic Wrappers which will give you multiple giving tabs on this popup. Examples: Support a Missionary, Give Where Needed and Featured Opportunity

4. Once you have created these Basic Wrappers, you can then drag and drop those into the Popup wrapper we added earlier

5. Create any content (static or dynamic) that you would like displayed within the Popup and test it out!

Example: How to Add the New Giving Popup (Assigned Content)

Example: N/A

Color 1, Color 2, Color 3, Color 4 - These will be colors based upon the Branding Guide that you provided to us and can be used to style the color of your Tabs (which will in turn make the Inactive tabs the same color, just more opaque!)