Client Setup Guides

Next Steps Layout

Overview

Header Image

The header image for your Next Steps layout will be loaded into the "header image" field of your page (Content > Pages > Next Steps page). The recommended header image size for your design theme is 1600x480px.

Anchor Page Navigation

Below the header image, you will see a horizontal menu bar which functions as the Anchor Page Navigation. Each title is linked to a section on the template. When clicked, the visitor will be move down to the anchor points, and the navigation bar will remain at the top as visitors move down the page.

The titles will pull from the section or link list title field, which are explained further below.

Sections

The content througout on your Next Steps layout pulls from different sections in the CMS (Content > Sections) and are added to your page under the "Sections" area. No content is added into the page itself, but you will want to use the sections outlined below.

Within each section, you will see the following options:

Background Color: Adding a hex code will only change the background color. 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 Connect with Us section)

Parallax Background: Adds parallax scrolling functionality, so you would see the text scrolling overtop of the background image (like the Connect with Us section)

Next Steps Section

The Next Steps section at the top of your layout is managed under Content > Sections > Next Steps. The following areas are used within this section:

Name: Displays the section name in the anchor navigation
Content: Used for the section title and content

The "content" field is a WYSIWYG editor that supports all text, media, links, etc. This section is arranged in a two-column responsive style, so you can edit the content with your own.

HELP SITE: Creating Responsive Columns

Connect with Us Section

This section is located under Content > Sections > Connect with Us. The following areas are used within this section:

Name: Displays the section name in the anchor navigation
Content: Used for the section title ONLY
Background Image: Controls the image displaying behind your content
Dark Background
Parallax Background

The content within this section is managed under Content > Link Lists > Next Steps - Connect Links.

NOTE: Please make sure you do not change the Link List title (Next Steps - Connect List).

Once you click on the "Next Steps - Connect Links" title, you will see each area of this section listed as a separate item, and you can select the pencil icon to manage each one.

Within each item, the following fields are used:

Name: Displays as the title of the item
Link: Select the page or URL where the item should point
Description: Displays as the content area of the item
Icon-Class: This is the icon that displays above the content

The icons from your mockup are pre-loaded into the layout, but you can see a full list of available icons here: http://mk030.monkpreview.com/_assets/fonts/mk030/

Additional Sections

The remaining area of your page pulls from Content > Sections > Next Steps - Sections. However, none of your items or content will be managed here. The section references a monklet tag: {{next-steps-info-section|find="next-steps-section-links"}} which specifies for the layout to pull all the content for this additional section from the Link List area (similar to the Connect with Us section).

To manage the bottom portion of your page, you will need to go to Content > Link Lists > Next Steps - Section Links

NOTE: Please make sure you do not change the Link List title (Next Steps - Section Links).

Once you click on the "Next Steps - Section Links" title, you will see each area of this section listed as a separate item, and you can select the pencil icon to manage each one.