Digital Commons:Tabs, Accordions and Tables Audience: All roles Editors, Publishers, Site Admins and Site Managers. SUMMARY: Training to help users of the NC Digital Commons Platform to create data tables, WYSIWYG tables, and format content into accordions or tabs. All roles can create this content in site pages. The landing page portion of the training pertains only to the Site Manager and Site Admin roles. Contents Digital Commons Intermediate Training .............................................................................................................. 2 Accordions and Tab Accordions ........................................................................................................................... 2 Video: ............................................................................................................................................................... 2 Adding a Tab Accordion on a Site Page ........................................................................................................... 2 Removing Tabs ................................................................................................................................................. 6 Adding an Accordion to a Landing Page ............................................................................................................... 6 Removing Accordions .................................................................................................................................... 11 Examples ........................................................................................................................................................ 11 Data Tables ............................................................................................................................................................. 13 Tables in the WYSIWYG .......................................................................................................................................... 15 Best Practices in All Page Creation ......................................................................................................................... 17 Styles in the Text Editor ................................................................................................................................. 17 Formatting in the Text Editor......................................................................................................................... 17 Links in the Text Editor ................................................................................................................................. 17 Images in the Text Editor ............................................................................................................................. 17 Drupal Terms .......................................................................................................................................................... 18
18
Embed
Digital Commons:Tabs, Accordions and Tables · Digital Commons:Tabs, Accordions and Tables Audience: All roles Editors, Publishers, Site Admins and Site Managers. SUMMARY: Training
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Digital Commons:Tabs, Accordions and Tables Audience: All roles Editors, Publishers, Site Admins and Site Managers.
SUMMARY: Training to help users of the NC Digital Commons Platform to create data
tables, WYSIWYG tables, and format content into accordions or tabs. All roles can
create this content in site pages. The landing page portion of the training pertains only
to the Site Manager and Site Admin roles.
Contents Digital Commons Intermediate Training .............................................................................................................. 2
Accordions and Tab Accordions ........................................................................................................................... 2
Adding an Accordion to a Landing Page ............................................................................................................... 6
Data Tables ............................................................................................................................................................. 13
Tables in the WYSIWYG .......................................................................................................................................... 15
Best Practices in All Page Creation ......................................................................................................................... 17
Styles in the Text Editor ................................................................................................................................. 17
Formatting in the Text Editor ......................................................................................................................... 17
Links in the Text Editor ................................................................................................................................. 17
Images in the Text Editor ............................................................................................................................. 17
Organizing and managing content on the web site creates challenges for web designers on how to choose the best presentation style for the variety of the content. We are going to introduce several tools to help you with the creation of the content rich pages with easy navigation. Learn how to use Accordions and Tabs on Digital Commons site pages (Editors and Publishers) and on landing pages (Site Managers and Site Admins). Data tables provide the ability to display data in a sortable table, that can be paginated if long, that has mobile display and downloadable content.
Accordions and Tab Accordions
Accordions and Tab Accordions allow you to organize information on a page so that only the first entry
is visible, and the other entries are visible when the user clicks on the tab.
A Fill in a Title for the tab group, if desired. In this example, the Tab Accordion is a
Glossary.
B Enter a Tab Title for the first tab.
C You can choose from existing Blocks, such as CTAs or Article cards.
D Enter the tab content.
E The same Blocks are also available as a Sidebar.
3. Click the Add another item button to add another tab.
4. Add a Tab Title and text in the Tab Content fields.
5. You can reorder the individual tabs within the group by dragging on the control dots.
6. Repeat for as many tabs as are desired, and click the Save button.
When published, the first tab is highlighted on the page, and its information is shown below.
When the user clicks on the next tab, its associated information is visible.
Intermediate Training 6 Document Owner: Marla Labisch Document Created: 7/13/16 NC Digital Commons Document Modified: 7/20/17
Removing Tabs
Click the Remove button underneath a specific tab to remove only that tab, or the Remove button
underneath the tab group to remove the entire set.
Adding an Accordion to a Landing Page
The accordion is available on a site page or landing page. The example below is for a landing page, which only Site
Managers and Site Admins can create or edit. The process is similar to the Tab Accordion, with additional steps.
1. In the Band type area, select Accordion and click Add another Band.
Intermediate Training 7 Document Owner: Marla Labisch Document Created: 7/13/16 NC Digital Commons Document Modified: 7/20/17
2. Fill out the information for the first item.
A Fill in a Title for the accordion group, if desired.
B Enter a Title for the first accordion item.
C You can choose from existing Blocks, such as CTAs or Article cards.
D Enter the item content.
3. Click the Add another item button to add another accordion item.
4. You can reposition the accordion group on the page by dragging the dots on the left, and reorder the
individual items within the group the same way.
Intermediate Training 8 Document Owner: Marla Labisch Document Created: 7/13/16 NC Digital Commons Document Modified: 7/20/17
5. Repeat for as many accordion items as are desired, and click the Save button.
Intermediate Training 9 Document Owner: Marla Labisch Document Created: 7/13/16 NC Digital Commons Document Modified: 7/20/17
The accordion items appear vertically, rather than side-by-side. The first item is open by default:
Intermediate Training 10 Document Owner: Marla Labisch Document Created: 7/13/16 NC Digital Commons Document Modified: 7/20/17
Clicking on another item opens that information and closes the other one. The plus sign (+) next to the item indicates there is more information.
Intermediate Training 11 Document Owner: Marla Labisch Document Created: 7/13/16 NC Digital Commons Document Modified: 7/20/17
Removing Accordions
Click the Remove button underneath a specific accordion item to remove only that item, or the Remove button
underneath the accordion group to remove the entire set.
Examples
Accordion with a CTA card selected as the Block.
Tab Accordion with a CTA card selected as the Sidebar.
Intermediate Training 12 Document Owner: Marla Labisch Document Created: 7/13/16 NC Digital Commons Document Modified: 7/20/17
Intermediate Training 13 Document Owner: Marla Labisch Document Created: 7/13/16 NC Digital Commons Document Modified: 7/20/17
Data Tables
Data tables offer a lot of flexibility for displaying information. The table is searchable; columns are
sortable and you can download the data. The data table content type allows the user to manually enter
data into the table, but it also allows for a .csv file upload. This is the recommended method for data
tables. CSV files can be created from any excel file.
1) Click Add Content, choose Data Table.
2) Add a Title in the Title field
3) Add descriptive information in the Body, if desired.
4) You can fill in the table manually if you have a small data set, but it’s recommended to upload a .csv file to the table.
5) Click the Import from CSV,
6) Click the Browse… button to browse your local machine for the .csv file. Choose your file, then click Open.
7) Click Upload CSV.
5
7
2
3
4
6
Intermediate Training 14 Document Owner: Marla Labisch Document Created: 7/13/16 NC Digital Commons Document Modified: 7/20/17
The uploaded file populates the table. You can edit any cell before saving.
Here is a new data table. The table has a lot of features:
1) Show number of
entries per page options: 10, 25, 50, 100 or All. 100 is displayed by default
2) All the columns are sortable just by clicking on the column heading.
3) Keyword search
4) Export and save the data set
2
3
4
1
Intermediate Training 15 Document Owner: Marla Labisch Document Created: 7/13/16 NC Digital Commons Document Modified: 7/20/17
Tables in the WYSIWYG
For large tables, you may wish to use the Data Table content type. However, for small, simple tables that
are not sortable, you can insert them in the WYSIWYG. Select the insertion point in the paragraph where
you want the table to go - click on the Table button.
1) Fill in the number of Rows and
Columns in your table. 2) You can set a table width. 500 is
about the largest you should use. You can set the width to 100% to fill the entire width of the page, or leave it blank to have the table adjust its width to fit the content. You can also set the table height, but it's recommended that you use the default setting, by leaving the field blank.
3) Select Headers, if you wish. This will make the first row or first column look different from the rest of the table.
4) Set the alignment - this is where the table will appear in the paragraph. When the table is on its own line, leave it at not set.
5) Enter a caption. 6) You can enter a Summary. It won't
be visible but it's useful metadata.
7) Click OK
1
2
3
4
5
6
7
Intermediate Training 16 Document Owner: Marla Labisch Document Created: 7/13/16 NC Digital Commons Document Modified: 7/20/17
8) Now enter the table text. Don't worry, the cells will even themselves out.
You won't see the real formatting until you view the page.
Let's save.
Once the table is created, you can make
changes to the text in the WYSIWYG. Just
click on the text you want to edit.
You can also right-click on the table to add
rows or columns.
8 8
9
Intermediate Training 17 Document Owner: Marla Labisch Document Created: 7/13/16 NC Digital Commons Document Modified: 7/20/17
Best Practices in All Page Creation
Styles in the Text Editor
Headings in the Text Editor are in the correct outline order (heading 2 is first,
subtopics within heading 2 are heading 3, sub-subtopics within heading 3 are
heading 4, etc.). Do not skip heading numbers, or use simple bold for heading text.
Paragraph text is “normal.” All text is spell checked.
Formatting in the Text Editor
Clean formatting: No formatting was inadvertently added (font tags, div tags,
formatting tables). If something looks funny, cut it and then paste using the "paste
as plain text" icon.
Links in the Text Editor
They each work.
They each have a descriptive label, not simply "click here" or "learn more."
The link label matches its destination page title closely.
If the link goes to a page within the site, ensure it is relative, not absolute. Relative
links do not include the domain; they begin after the first slash.