WYSIWYG Templates

The CKEditor, a visual HTML editor, is sometimes called WYSIWYG editor. In the CKEditor toolbar there is a template function template.jpg, which allows a user to select a HTML template from a drop-down and insert it into the WYSIWYG text area. Several templates have been created for you, but you can also create your own. Click on the Configuration link in the Drupal toolbar at the top of the page, then select WYSIWYG templates under the Content Authoring section. Click on +Add template. To add source code, click on Source in the toolbar.

 

How to Upload Images and Replace Image Placeholders
  1. Navigate to the edit page screen by clicking the New draft tab
  2. Click the image placeholder, then click the Insert images icon imageUpload.png in the toolbar
  3. Select the folder where you would like to store your image
    NOTE: Choose the location of your image file carefully; once it is placed in the file manager it cannot be moved.
  4. Click Upload
  5. Click Add file
  6. Select the file  you would like to upload from your computer and click Open
    NOTE: Use the recommended pixel size and ratio for all images in the template. If you want a different ratio, review the list of preferred image ratios and be sure to change the pixel height only: Web Style Guidelines and Resources.
  7. Click Select in the menu bar

Examples

The following examples are displayed at the full width of the container. With the exception of Full Block, the templates will not work within the Advanced Region.


Images with Captions: Two-Up, Three-Up, or Side

Recommended image size: 750(w) x 500(h) pixels for 3:2 and 750(w) x 600(h) pixels for 5:4

ratio-3-2.png

Autem iusto praesent lobortis vel euismod ratis.

ratio-3-2.png

Secundum proprius praesent diam jugis tation.

ratio-3-2.png

Autem iusto praesent lobortis vel euismod ratis.

ratio-3-2.png

Secundum proprius praesent diam jugis tation.

ratio-3-2.png

Secundum proprius praesent diam jugis tation.

5:4

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Promo: 2x2-Up

Recommended image size: 700(w) x 1050(h) pixels

ratio-2-3.png
ratio-2-3.png
ratio-2-3.png
ratio-2-3.png

 


Promo: Two-Up, Three-Up, or Four-Up

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

 


Promo With Points: Two-Up, Three-Up, or Four-Up

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

 


Promo With Arrows: Two-Up, Three-Up, or Four-Up

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

 


Promo With Images: Two-Up, Three-Up, or Four-Up

Recommended image size: 750(w) x 500(h) pixels

ratio-3-2.png
Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

ratio-3-2.png
Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

ratio-3-2.png
Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

ratio-3-2.png
Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

ratio-3-2.png
Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

ratio-3-2.png
Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

ratio-3-2.png
Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

ratio-3-2.png
Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

ratio-3-2.png
Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

 


Promo With Images: Three-Up With Description

Recommended image size: 700(w) x 875(h) pixels

Nobis diam autem cui suscipere.

Blandit hos oppeto amet. Ideo ex odio luptatum defui. Abigo veniam pala volutpat quadrum velit in vulpes enim indoles aptent. Blandit hos oppeto amet. Ideo ex odio luptatum defui. Abigo veniam pala volutpat quadrum velit in vulpes enim indoles aptent.

ratio-pref-4-5.png

Lorum Ipsum

ratio-pref-4-5.png

Lorum Ipsum

ratio-pref-4-5.png

Lorum Ipsum

 


Promo With Icons: Two-Up, Three-Up, or Four-Up

Recommended image size: 500(w) x 500(h) pixels. Image ratio must be 1:1.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

 


Promo With Circular Images: Two-Up, Three-Up, or Four-Up

Recommended image size: 500(w) x 500(h) pixels. Image ratio must be 1:1.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

1x1

Sed dignissim lacinia

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.

 


Promo With Points and Images: Two-Up, Three-Up, or Four-Up

Recommended image size: 750(w) x 500(h) pixels

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

 


Promo With Arrows and Images: Two-Up, Three-Up, or Four-Up

Recommended image size: 750(w) x 500(h) pixels

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

ratio-3-2.png

Patria feugait quis valetudo.

Conventio ideo valetudo adsum. Dolore regula pagus exerci minim bis quidne. Illum premo quidem dignissim melior exerci sed letatio in tum.

Read More  

 


Promo Image Gallery: Six-Up or Twenty-Up

Recommended image size: 400(w) x 400(h) pixels for 1:1 ratio, 750(w) x 500(h) pixels for 3:2

Toggle:
ratio-pref-1-1

 

ratio-pref-1-1.png

 

ratio-pref-1-1.png

 

ratio-pref-1-1.png

 

ratio-pref-1-1.png

 

ratio-pref-1-1.png

 

750(w)x500(h) pixels, preferred ratio:3:2

Qui blandit consectetuer

750(w)x500(h) pixels, preferred ratio:3:2

Secundum praesent ulciscor

 
750(w)x500(h) pixels, preferred ratio:3:2

exerci te dolore importunus

 
750(w)x500(h) pixels, preferred ratio:3:2

Duis tamen hos erat vicis

 
750(w)x500(h) pixels, preferred ratio:3:2

Qui blandit consectetuer

750(w)x500(h) pixels, preferred ratio:3:2

Secundum praesent ulciscor

 
750(w)x500(h) pixels, preferred ratio:3:2

exerci te dolore importunus

750(w)x500(h) pixels, preferred ratio:3:2

Duis tamen hos erat vicis

 
750(w)x500(h) pixels, preferred ratio:3:2

Qui blandit consectetuer

750(w)x500(h) pixels, preferred ratio:3:2

Secundum praesent ulciscor

 
750(w)x500(h) pixels, preferred ratio:3:2

exerci te dolore importunus

750(w)x500(h) pixels, preferred ratio:3:2

Duis tamen hos erat vicis

 
750(w)x500(h) pixels, preferred ratio:3:2

Qui blandit consectetuer

750(w)x500(h) pixels, preferred ratio:3:2

Secundum praesent ulciscor

 
750(w)x500(h) pixels, preferred ratio:3:2

exerci te dolore importunus

750(w)x500(h) pixels, preferred ratio:3:2

Duis tamen hos erat vicis

 
750(w)x500(h) pixels, preferred ratio:3:2

Qui blandit consectetuer

750(w)x500(h) pixels, preferred ratio:3:2

Secundum praesent ulciscor

 
750(w)x500(h) pixels, preferred ratio:3:2

exerci te dolore importunus

750(w)x500(h) pixels, preferred ratio:3:2

Duis tamen hos erat vicis

 

Feature Box 1 Column: Small, Medium, or Large

Recommended image size: 400(w) x 500(h) pixels for 4:5 and 750(w) x 600(h) pixels for 5:4

Toggle:
4:5

Laoreet Ea Camur

Utinam feugait qui esse at capio enim. Qui blandit consectetuer in populus illum. Nunc commodo magna consectetuer nisl secundum praesent ulciscor esca minim brevitas. Vero mara amet. Duis tamen hos erat vicis typicus. Sino interdico opes autem os proprius exerci exerci minim dignissim.
Read More  

4:5

Laoreet Ea Camur

Facilisi Feugiat Lenis
Utinam feugait qui esse at capio enim. Qui blandit consectetuer in populus illum. Nunc commodo magna consectetuer nisl secundum praesent ulciscor esca minim brevitas. Vero mara amet. Duis tamen hos erat vicis typicus. Sino interdico opes autem os proprius exerci exerci minim dignissim.
Read More  

5:4

Commoveo te a neque amet paratus.

Commoveo te a neque amet paratus.

Feugait magna singularis iustum causa neo turpis plaga genitus. Ratis a sed a. Nutus melior in duis esse probo amet importunus eros macto wisi. Eum tation ad duis aliquam verto vel. Lucidus roto praesent plaga importunus dolor vulpes importunus lucidus.

 


Feature Box 2 Column

Recommended image size: 400(w) x 500(h) pixels

4:5

Brevitas Vero Mara 

Enim Qui Blandit Consectetuer
In Populus Illum Nunc >Commodo Magna Consectetuer Nisl Secundum Praesent

4:5

Laoreet Ea Camur

Amet Duis Tamen
Importunus Vicis Plaga Accumsan Neque Dolore Vulputate Immitto Utinam

 


Full Block

To change the color of the box: click on the Source button in the toolbar. In the first line of code,<div class="s3-p-10 s3-gd1c">, change the bolded text to a different Strata color. The Strata color code names can be found here.

Commoveo te a neque amet paratus.

Commoveo te a neque amet paratus.

Feugait magna singularis iustum causa neo turpis plaga genitus. Ratis a sed a. Nutus melior in duis esse probo amet importunus eros macto wisi. Eum tation ad duis aliquam verto vel. Lucidus roto praesent plaga importunus dolor vulpes importunus lucidus.

 

 


Custom Link Text

The example below includes Font Awesome icons, which you can either change or delete as you wish. To delete them just edit the source code and remove each tag, for instance:

<i class="fa fa-calendar">&nbsp;</i>.

If you wish to have icons but want to change them, you can find the icon you want using the Font Awesome Cheatsheet. Simply edit the code and change the "fa-calendar" name in the example above to the desired icon name.

 


Footer Link Text


Accordion

Recommended Use: There are 5 accordion templates: 5, 10, 15, 20, and 50. Choose the template that has the closest amount of accordions that you need, to the highest number. If you need to remove one or more accordions, click on the Source button in the toolbar and remove the following code (for removal of one accordion): 

<h4 class="accordion_title">Accordion Content Heading 3</h4>

<div class="attribute-answer accordion_content">
<p>This is content that will expand when the heading is clicked.</p>
</div>

Accordion Content Heading 1

This is content that will expand when the heading is clicked.

Accordion Content Heading 2

This is content that will expand when the heading is clicked.

Accordion Content Heading 3

This is content that will expand when the heading is clicked.

Accordion Content Heading 4

This is content that will expand when the heading is clicked.

Accordion Content Heading 5

This is content that will expand when the heading is clicked.

 

title-inside title-centered
2