1. Organize Content into Columns
  2. Use Modal Windows
  3. Create Image, Video, and Slideshow Modals
  4. Use Slideme’s
  5. Adding Buttons
    1. To add a Button onto a Page/Event Page:
    2. To add a Button onto a Homepage Banner:

Organize Content into Columns

Content can easily be organized into two or three columns. This feature is a great alternative to tables with only a few simple steps.

To create columns:

  1. Select the column button as shown below
    Screen Shot 2016-07-06 at 2.48.14 PM
  2. Select whether you would like two or three columns from the drop-down menu.
  3. Click OK.
  4. A few lines of shortcode will now appear in the editing box. Enter your content for the columns where prompted.
    Screen Shot 2016-07-06 at 2.50.15 PM
  5. Update the page.

Example

Screen Shot 2016-07-06 at 2.50.30 PM

Use Modal Windows

Modal windows are a dynamic way to display important information and access different content without having to leave the page. A modal window is an additional window that appears and requires the user to interact with it before they can return to the parent (original) window. They are also often referred to as ‘dialogue boxes’ or ‘dialogue windows’. Modal windows are essentially a less intrusive version of pop up windows. With this comparison in mind, it is good to use modal windows sparingly.

Appropriate use cases for modal windows include:

  • Drawing attention to vital pieces of information
  • Completing action items without exiting a window
  • Reusing content across a site
  • Accessing different content types such as watching videos and filling out forms

To create modals within your Carleton CMS pages, use the Modal icon in the toolbar outlined below. Note: this is not a core feature – meaning we do not support direct training for modals and are recommended for advanced users only.

To create a modal window:

  1. Publish a new page with content that you want to pop up in a modal.
  2. Edit the page to which you want to add the modal.
  3. Click Add Media.
  4. Click Insert Post Element on the left side of the window that appears.
  5. Click Modal Link.
  6. Choose Carleton Page from the drop-down menu.
  7. From the “One of your pages” drop-down menu, choose the name of the page you created.
  8. Under “Text Options” enter the text for the link and the title for the modal.
  9. Click Insert Modal Link.
  10. A piece of shortcode will appear in your content. Update the page.

To create a modal window linking to an external page:

  1. Publish a new page with content that you want to pop up in a modal
  2. Edit the page to which you want to add the modal
  3. Click Add Media.
  4. Click Insert Post Element on the left side of the window that appears.
  5. Click Modal Link.
  6. Choose “External Page” from the drop-down menu
  7. Paste the URL of the external page in the External URL field
  8. Under “Text Options” enter the text for the link and the title of the modal
  9. Click Insert Modal Link.
  10. A piece of shortcode will appear in your content. Update the page.

Create Image, Video, and Slideshow Modals

You can easily display any single image or video in a modal. This is good for having thumbnails popup full size media. You can also display groupings of images that users can easily view by hitting the right arrow key or clicking forward or back on them.

To create a simple image modal:

  1. Upload the image into the media library.
  2. Edit the page to which you want to add the modal.
  3. Click Add Media.
  4. Click Insert Post Element on the left side of the window that appears.
  5. Click Modal Link.
  6. Choose “Image” from the drop-down menu
  7. From the “One of your images” drop-down menu, choose the name of the image you uploaded.
  8. Under “Text Options” enter the text for the link and the title for the modal.
  9. Click Insert Modal Link.
  10. A piece of shortcode will appear in your content. Update the page.

To create a video modal:

  1. Upload your video to YouTube or Vimeo
  2. Edit the page to which you want to add the modal
  3. Click Add Media.
  4. Click Insert Post Element on the left side of the window that appears
  5. Click Modal Link.
  6. Choose “Video” from the drop-down menu
  7. Paste the URL of the uploaded video into the URL field
  8. Under “Text Options” enter the text for the link and the title for the modal
  9. Click Insert Modal Link.
  10. A piece of shortcode will appear in your content. Update the page.

Use Slideme’s

Slideme’s show and hide content. Users collapse and expand the slideme by clicking on a highlighted title or heading.

To create a slideme:

  1. Edit the page in which you want to show and hide content.
  2. Type in this piece of code into either the visual or the text views:

    open square bracket es ell eye dee ee em ee title ="This is the title"]Block of text[/slideme close square bracket

  3. Replace the title and the block of text with your required information. Click update.

Users click on the slideme title to expand or collapse the content. The slideme within the square brackets tells the content when to end.

Important Notes:

  • Do not remove or modify the code, as the slideme will not appear correctly
  • Do not place a significant amount of text within your slideme
  • You can, however, change the title of the slideme at any time – simply replace your current title in the code (between quotations) with your new title
  • When entering content after your slideme code, make sure you begin on a new line

Adding Buttons

To add a Button onto a Page/Event Page:

  1. Click Add Post Element.
  2. In the Insert Post Element menu, select Button.
  3. It is required to add Text and a URL to the button.
  4. You have the option to choose the Button Style (Red Outline or Red Solid). By default, the button will be using the red outline style.

To add a Button onto a Homepage Banner:

  1. Click on the arrow on the Homepage Banner dropdown menu.
  2. Scroll down to the Banner Button option.
  3. Select Yes.
  4. You can a short piece of text in the Button Text section.
  5. You have the option to link the button to an external page, internal page, event page, video. etc in the Button Link Type section.

Was this page helpful?

3 people found this useful