Flexible Content Items
In our first article about Flexible Content Items, we discussed a general overview of what Flexible Content Items are, how to use them and where to find them.
In this article we discuss how to create the following Flexible Content Items:
- Accordion
- Callout
- Carousel
- Contact
- Embed
- Social Media: Callout
- Special List: Large
- Special List: Small
Accordion
Learn about the accordion
What is an Accordion and why do I care?
An accordion on a web page is a tool used to collapse content to minimize scrolling for the end user. The headings, or accordion titles, act as a way for viewers to see at-a-glance some of the content on the page.
There are 3 general principles that should be considered when using accordions: reducing cognitive load, increasing readability, and clarity.
On the downside, hiding content behind the accordion diminishes people’s awareness of it. Therefore, headings and titles must be descriptive and enticing enough to motivate people to click on them. When content is hidden, people might ignore information. Luckily, our accordion has an expand-all feature for people to click once and have all the accordion items expand simultaneously.
How can Accordion Help My Page?
Accordions are most appropriate when users will only need a few specific pieces of content within a page or if you have only a small space to display a lot of content. Accordions can be used on a page with more content, but since accordions are a more at-a-glance type of component, I would recommend using them closer to the beginning of the page. Of course one must also keep the flow of content in mind and make sure the accordion is in a place within the rest of the information where it makes the most sense.
Having an accordion for Questions/Answers or FAQ is a great use of accordions because you can easily see which question is of interest and only have to expand that accordion item if you desire.
How to create an accordion
This Flexible Content Item is a typical accordion element, where you have a Title and an Item for each accordion item in the accordion list. You can add as many Accordion Items as you’d like, using the “Add Accordion Item” pill button. The Accordion has a Heading and Introduction that will appear before the accordion list.
It displays like this on the page:
Callout
This is a Flexible Content Item that calls attention to something. It allows you to have an image, title, body text and up to three links. This is a versatile element because you have the ability to just have a heading, or just have links or just have some text, or include an image. This is what it looks like displayed on the page with all the options filled in:
When you choose to Add Callout you will see options to fill in. A heading and a heading level. This allows you to be mindful of accessibility needs by properly setting the correct heading level. It is defaulted to H2, which is usually fine for most situations. If you don’t fill in a heading, no text will appear.
It allows you to select the color background for the box, with choices of either grey or yellow. It is defaulted to grey.
You can optionally add an image, body text and up to three links.
You can either upload or select an image that is already in our site’s Media Library. We will go over Uploading an image in detail on our Media article.
The three links can be set to open in a target window, and is default to “none” (no target selected). These links are optional.
These links can also be set to have either a primary or secondary style, or just be a plain link
Carousel
A carousel is a Flexible Content Item that can be added to any Basic Page, News Article or Event, if logged in.
When you click-select the Carousel from the Flexible Content list, you will get fields to fill in for the behavior of the Carousel and fields for each slide, with a button to add another slide item
The behavior of the Carousel is just telling it which way to align the overlay text box, on the left or right side of the image. This alignment is for ALL the slides in the Carousel. This means that you will have to curate your images so they all look good with the text box over the same side throughout your carousel.
The fields for the Slide are Title, Supertitle (which appears above the title), Image, Body and a CTA (or Call to Action) which has a URL field and a Text field.
The CTA can have an outside URL like https://google.com or you can use the type-ahead box to look for the title of a node to link to. (Note: external or outside URLs must include http:// or https://)
Once you add all your slides, you can save the page and see how it looks.
Contact
This is a great piece of Flexible Content that will allow you to put contact info on your page. It consists of Heading, Title, Image, and a body field, which is a limited WYSIWYG where you can write the contact info exactly the way you want.
Here is how our example looks on the page:
Embed
This Flexible Content Item is used to embed a form or something advanced that the WYSIWYG is programmed to strip out. It is similar to the old Full HTML ability in the old site.
If you have been granted Embed permissions (This was Full HTML permissions in the old site), you may use these instructions to embed forms and other content that provide iframe or javascript embed code.
If you don’t have this permission but would like to request it, please reach out to help@brynmawr.edu or communications@brymnmawr.edu for assistance.
Only embed content from known, trusted sites. Ask Web Services if you aren’t sure.
The Embed Flexible Content Item should only be used for specific code-related embedding needs.
It is an extra level of permission. If you don’t have that level of permission, you will see something like this:
If you do have permission to use that Flexible Content Item, you would see a non-WYSIWYG text box appear. In this example, we will have pasted in the WuFoo embed code so a form will appear on the page.
First step is to copy the embed code from the source. For example, in Wufoo, hover over your form and click “Share” to get the form code.
Next, click the Edit tab to edit your page and scroll to the bottomof the edit screen. Under Flexible Content, you can select "Add Embed" then paste the code into the non-WYSIWYG text box, like so
Save your page and see if the form or other content is displayed as expected.
Social Media: Callout
This Flexible Content Item allows you to add URL links to your department’s various social media accounts so folks can follow you online.
You can add URLs from Facebook, Instagram, Twitter, LinkedIn and YouTube
This is what it looks like on the page:
Special List: Large
This Flexible Content Item allows you to have a Special List with a title that can be linked or not, along with some additional text that you would add to the body field.
This is what it looks like on the page
Special List: Small
This Flexible Content Item is a small list of titles only.
Special List: Small is also an additional part of the Basic Page in a special spot at the top called Audience Quick Links.
Adding links to it is the same in either spot, but the Audience Quick Links can’t be moved on the page like the Special List: Small can within the Flexible Content area.
You can add as many items as you’d like
This is how it looks on the page
More Flex Articles
Please see the following Articles for how to use the following Flexible Content Items.
- FLEX: Basic - WYSIWYG (basic, links, tables, blockquotes and images & videos from library)
- FLEX: Basic 2 - Accordion, Callout, Carousel, Contact, Embed, Social Media: Callout, Special List: Large, Special List: Small
- FLEX: Intermediate A - WYSIWYG (Video), Columns, Feature: Grid, Image Gallery, Image List
- FLEX: Intermediate B - People: List, Social Media: Connect, Feature: Large, Feature: Medium, Feature: Quote, Image Detail: Large
- FLEX: Advanced - Event 3-up, News 3-up, News & Contact, Story 1-up, Story 3-up, Announcement 4-up
- FLEX: Special - Slide: Homepage Hero, Homepage Feature: Large, Homepage Feature: Medium, Homepage Feature: Story, Course Code, Description Code, Donor List
Please note that Flex Advanced and Flex Special items require training and possibly special permission levels.
As with anything on the site, if you are unsure what the item is, how it looks or how to best utilize it, please see our sample pages Basic Page with all content and News article with all content or reach out to Communications for guidance at communications@brynmawr.edu.
Please note, there are corresponding training videos available that cover some of the items in these articles. Some items may require increased permission levels and special training. Please reach out to Communications for guidance at communications@brynmawr.edu.
Questions?
If you have any additional questions or problems, don't hesitate to reach out to the Help Desk!
Phone: 610-526-7440 | Library and Help Desk hours
Email: help@brynmawr.edu | Service catalog
Location: Canaday Library 1st floor
