University Marketing and Communications

How to use snippets

Snippets are pre-defined bits of html used to customize web pages. They can be added to a page to better organize content or highlight information. 

Having basic html knowledge is helpful when using snippets. Find instructions on how to insert a snippet below.

Available Snippets

Below are the snippets currently available to UToledo's Modern Campus website managers.

3 Columns with Photos above Text

 

 

---

 

3 Columns with RSS Feeds

 

 

---

 

Blue Box

 

---

 

Blue Box with Heading

 

 

---

 

Blue Box with 2 Columns

 

---

 

Blue Box with 3 Columns

 

---

 

Blue Box with 3 Columns of Links

 

---

 

Column Layouts

The column layout snippets create columns on the page. They are named to indicate the percentage of the page width each column takes up. 

 

Column Layout: 25% 25% 25% 25%

 

---

 

Column Layout: 25% 75%

 

---

 

Column Layout: 33% 33% 33%

 

---

 

Column Layout: 33% 66%

 

---

 

Column Layout: 50% 50%

 

---

 

Column Layout: 66% 33%

 

---

 

Column Layout: 75% 25%

 

---

 

Headshot and Bio

Learn more about the headshot and bio snippet.

 

 

---

 

Photo above Text

Use this snippet within a smaller column, not the full width of a page.

 

 

---

 

RSS Feed

 

---

 

Alternative RSS Feed

If you experience an RSS feed not displaying correctly with the main RSS feed snippet, try using the Alternative RSS feed instead. It may have better compatibility.

 

---

 

Statistic Row

 

---

 

Tabs

 

---

 

White Box (Panel)

 

---

 

How to Insert a snippet

1. Browse to the page you want to edit, log in and click the green "Edit" button   next to the section you want to edit. 
2. Place your cursor where you want the snippet to appear and click the "Insert Snippet" icon. 
3. In the window that appears, in the snippet drop-down menu, select the snippet you want to use.
    
   
    
4. Click the "Insert" button  to insert the snippet and close the window.
5. Carefully edit the placeholder text as desired. 
6. Edit or delete the line that reads “Content after: select and edit or delete”. It is placeholder text for content after the snippet. You can select it and edit it, add another snippet, or delete it. 
   If you accidentally delete this line and decide you want content there, then you can open the source code of the editable space and add html for a new paragraph: <p>Insert content here</p>  
7. Save your work by clicking the "Save" icon. 
8. To make your edits live, click the green "Publish" button.