You are here

WYSIWYG Templates

Back to Wiki

WYSIWYG Templates are small widgets available to page owners that can be placed anywhere inside of a WYSIWYG text area. Some of these include inline accordions, tabs, photo flip cards, colored boxes, and many more. These can be used to make your page more interesting and visually appealing for your end users. Follow along below for a how-to on adding these components to your page.

Steps to Add a Template to your Page

  1. First off, take a look through the list of available options below. Determine what you are trying to achieve and choose a widget based on that.
  2. Next you want to choose an area on your page within your wysiwyg text area in which to place this new widget. Typically adding a blank line or two will give you the right spacing.
  3. Now you are ready to place this new template in your wysiwyg. Make sure the cursor is placed in this new blank area and select the Templates button in your wysiwyg text area (top row on right side) WYSIWYG Templates button
  4. A popup window showing the list of available templates will appear. Scroll down the list to find the one you chose is step one. Select it.
    The template should get placed in the empty white space where you placed your cursor.
    You can edit any of the text or images as you normally would any other text/images within the wysiwyg.

Template Options

Blue Oval Button

A hyperlink styled as a blue outlined oval button

2 Columns

Text shown in two columns
Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

3 Columns with border

Text shown in three columns with a border
The town was established and started to grow with the arrival of the railroad in 1905. However, its growth did not really take off until shortly after 1931, when the Nevada legislature legalized gambling in an effort to lift the state from the Great Depression. The construction of nearby Hoover Dam aided the area economically as well.
The town was established and started to grow with the arrival of the railroad in 1905. However, its growth did not really take off until shortly after 1931, when the Nevada legislature legalized gambling in an effort to lift the state from the Great Depression. The construction of nearby Hoover Dam aided the area economically as well..
The town was established and started to grow with the arrival of the railroad in 1905. However, its growth did not really take off until shortly after 1931, when the Nevada legislature legalized gambling in an effort to lift the state from the Great Depression. The construction of nearby Hoover Dam aided the area economically as well.

Colored boxes grid

Displays a grid of 3 different colored boxes for text

Blue Box

Quisque eu quam ligula. Etiam eleifend magna felis, nec laoreet odio commodo

Gold Box

Quisque eu quam ligula. Etiam eleifend magna felis, nec laoreet odio commodo

Grey Box

Quisque eu quam ligula. Etiam eleifend magna felis, nec laoreet odio commodo

Grey Content Box

A grey box for text at 100% width of the content area
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image left paragraph

Container with an image floating to the left inside of a paragraph

Las Vegas, like any other large metropolitan area, offers libraries, museums, theater, art exhibits and parks which are enjoyed and supported by the diverse Southern Nevada population.  As one of the fastest-growing areas in the United States, Southern Nevada is an example of modern urban living.  Between April 1990 and April 2000, the Las Vegas metropolitan area population increased by 83%, growing from 852,737 to 1,563,282.

Image Grid

Columns of Images with or without descriptions

Lorem ipsum dolor sit amet, consectetur adipiscg elit. Phasellus maximus us.

Lorem ipsum dolor sit amet, consectetur adipiscg elit. Phasellus maximus us.

Lorem ipsum dolor sit amet, consectetur adipiscg elit. Phasellus maximus us.

Lorem ipsum dolor sit amet, consectetur adipiscg elit. Phasellus maximus us.

Numbered List

List with bordered numbers as bullets
  • Demonstrate effective and appropriate communication choices as sender, receiver, and observer.
  • Understand the human communication process in a variety of contexts: interpersonal, public, group and mass.
  • Understand, analyze and evaluate major theories of communication as they invent, research, organize and deliver structured speeches, papers or projects.
  • Demonstrate competence with technologies and equipment common to communication practices.
  • Apply critical analysis and logical thinking toward making informed, reasonable and equitable decisions.

Photo Flip Card

A card with a photo, title, and optional details, typically used as a bio for non-AD staff.
  • Picture of Photo 1 Title

  • Picture of Photo 2 Title

  • Picture of Photo 3 Title

Inline Accordion (jQuery)

Creates a set of collapsable accordion items.

Accordion 1 Title

Content for accordion 1 goes here.
If you have not used this feature before, please review the documentation for inline accordions at Inline Accordion Instructions before proceeding with editing this content.

Accordion 2 Title

Tab 2 Content: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Accordion 3 Title

Tab 3 Content: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Inline Tabs (jQuery)

Creates a set of tabbed content.

Tab 1 Title

Content for tab 1 goes here.
If you have not used this feature before, please review the documentation for inline tabs at Inline Tabs Instructions before proceeding with editing this content.

Tab 2 Title

Tab 2 Content: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Tab 3 Title

Tab 3 Content: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.