Create a Custom Tout

April 5th, 2012
Check out how to make a fully customizable tout! The tout system has limitless possibilities and can be as easy or as complex as you like. In this tutorial, we will cover how to create a standard tout and insert it into your page using the Edit Modules section.

STEP-BY-STEP INSTRUCTIONS »

For this example, I am going to create a custom tout for Health & Counseling Services.

1.

Log in to the CMS and click “View Site.”

 

Note yellow dot in image the image at left. 

2.

Click “Edit Modules.”

3.

The Layout Editor allows you to customize the rail layout on the page. A custom tout can be used on either the left or right rail.

NOTE: You cannot add a custom tout to the Content Area.

Click “Add a Flexible Tout.”

4.

Click “Create a New Tout.”

All flexible touts are saved for reuse.

NOTE: It is important that you edit or delete ONLY the touts that you created. Do not edit or delete any other touts.

5.

You have the option to create a standard tout that has been automatically styled, or a free-form tout. Free-form touts require a solid knowledge of HTML and CSS, and therefore will be covered in a separate tutorial.

Insert the information in the fields provided.

NOTE: Make sure to include the http:// at the beginning of the URL.

Check “Published.”

Images should be resized to 215px in width @ 72dpi in order to fit properly inside the rail.

You can preview the tout in the page by clicking “Preview.”

If you are satisfied with the result, click “Save Changes.”

6.

The page redirects back to the Layout Editor, and you will note that you have your new custom tout attached to your cursor. Hover over the right of left side and click your mouse to release the tout.

Click “Apply Changes.”

7.

Click “Edit Page Content.”

8.

Click “Publish Changes” at the bottom of the page.

9.

Click “View This Page.”

Your tout should appear where you placed it in the Layout Editor.