FACS logo

Widget Demos

Widgets are fields that content admins use with minimal requirements to make advanced designs. This page contains demos of most widgets you can easily create.

Icon Links

On This Page Widget

Just above you see On This Page being used. Handy for long pages. The Accordion widget (below) can alternatively be used to condense long pages.

Body Field

This field's just for heading + text pairs.

Nothing fancy, just headings and paragraphs, potentially formatted as lists.

  1. List Item #1
  2. List Item #2
  3. List Item #3

What's Not Demo'd

This page has most widgets, but there are a few still that haven't been demo'd here. They are:

  1. Header Image (example)- News is using that space.
  2. Logo (example) - This replaces the FACS logo at the top with another one. Good for separate units.
  3. Hide Menu (example) - This hides the left menu and makes the page wider. All elements grow to full width automatically. Great for if you want a strong visual presence and/or don't need the local menu.
  4. News options - This pulls in news in one of multiple ways; currently "Big Header" is used, but Small and Big Body are also options.
  5. Related People (example) "Job Description" option - This pulls in a related person, but emphasizes their job description.
  6. Image Grid - Checkerboard Option (example)

Want to see how these are defined in Expression Engine?

Click "Edit Page" at the bottom right of this page. Switch between the default tab and the Advanced tab to see the widget definitions.

Let's Use Accordion

  • This field expands/collapses accordion items. Useful for long amounts of content that you'd like discoverable. The "On This Page Menu" widget does something similar, in that it makes content on long pages discoverable. 

  • This is a field where you can define just the "Title" sub-field, and a heading will be output instead of the normal content.

Card Grid

Card Grid

This is the Card Grid. It is used when you'd like cards, each with an optional paragraph, and option link from your title.

Next Card

Next Card

You don't have to use the Link URL field within this widget. You can simply link from this text if preferred.

  • portrait of woman

    Image + Text Field

    Image + Text is handy if you want an image followed by some text. Typically this is for smaller images and larger amounts of text. For example, if you don't use the Related People field to automatically pull somebody's profile from the directory and you want to define it yourself, this is a good option (or Card Grid). 

  • portrait of woman

    Another Image + Text

    Image + Text is handy if you want an image followed by some text. Typically this is for smaller images and larger amounts of text. For example, if you don't use the Related People field to automatically pull somebody's profile from the directory and you want to define it yourself, this is a good option (or Card Grid). 

Image Popups

  • Big Icon Links

    Big Icon Links

    This lets you upload your own icon, which will appear bigger than the regular "Icon Links" widget at the top of the page.

  • Another Link

    Another Link

    This lets you upload your own icon, which will appear bigger than the regular "Icon Links" widget at the top of the page.

  • Another One

    Another One

    This lets you upload your own icon, which will appear bigger than the regular "Icon Links" widget at the top of the page.

  • Last Link

    Last Link

    This lets you upload your own icon, which will appear bigger than the regular "Icon Links" widget at the top of the page.

Photos

 

Featured People Field

Claire de La Serre

Claire de La Serre

Claire de La Serre studies the mechanisms that trigger overeating. She answers questions about her background and career so far at UGA.

Emma Laing

Emma Laing

Emma Laing positions students for success in their professional and personal lives. She gives them a research-based understanding of nutrition, diet and disease prevention.

Questions / Answers Widget

This is useful for anything that involves a question/answer, such as a FAQ or interview.

The Next Questions / Answers Example

Right above this field is a switch you can pull to make an index of every Q/A. This is handy if you have a bunch of these. It is pulled for the sake of this demo.

Logos Widget

  • Logo for Kohls
  • Logo for Cheeky Peach

Next Logos

  • Logo for Lela Rose
  • Logo for Stein Mart
  • Logo for Roberto Cavalli

Wow, this is a lot of widgets!

This is the Testimonials field. Wow, this is a lot of widgets! As you can see, it's pretty neat. If you use the Standout Quote sub-field, it should be in the quote somewhere here. The full testimonial, here, can be long or short.

Jimmy Hansen - Web Developer
Jimmy Hansen
  1. Timeline

    This is the Timeline widget. The basics are date and title. But you can also add custom icon, paragraph and image for each slide.

    Timeline
  2. Next Slide

    The Timeline widget is located at the bottom of the Advanced tab. Use it to make something like this.

    Next Slide
  3. Final Slide

    Typically this widget looks better with more width. You can do this by not including a Contact box or eliminating the local/left menu (Advanced > Hide Local Menu).

    Final Slide

Events

12:30pm - 1:45pm
 
Jump to top