Digital Commons:Tabs, Accordions and Tables · Digital Commons:Tabs, Accordions and Tables Audience: All roles Editors, Publishers, Site Admins and Site Managers. SUMMARY: Training

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

Digital Commons Intermediate Training

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.

Video:

https://www.youtube.com/watch?v=hFqevV80LAE&feature=youtu.be&list=PLOxAPZLr1Sg8V2jwyn0U

mupWAuJY2MCHJ

Tips:

Tabs work best when the heading is very short, like A-Z lists. They become accordions in mobile

view.

Accordions are suited to FAQs and procedural info.

Accordions and Tab Accordions are available on Landing Pages and Site Pages.

Adding a Tab Accordion on a Site Page

The Tabs/Accordion feature is at the bottom of the Site Page form.

1. Click the button for Add Tabs/Accordion.

https://www.youtube.com/watch?v=hFqevV80LAE&feature=youtu.be&list=PLOxAPZLr1Sg8V2jwyn0UmupWAuJY2MCHJ

https://www.youtube.com/watch?v=hFqevV80LAE&feature=youtu.be&list=PLOxAPZLr1Sg8V2jwyn0UmupWAuJY2MCHJ

2. Fill out the information for the first 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.


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.


5. Repeat for as many accordion items as are desired, and click the Save button.


The accordion items appear vertically, rather than side-by-side. The first item is open by default:


Clicking on another item opens that information and closes the other one. The plus sign (+) next to the item indicates there is more information.


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.



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


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


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


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


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.

Absolute link: http://www.nc.gov/government/our-government

Relative link: government/our-government

Images in the Text Editor

Alt text is entered and is descriptive.

The image is appropriate and is an appropriate size.

Your agency has the rights to publish this image, and is tracking that information.

Inline images should be sized at 320 pixels or less before they are brought into

Drupal, and then aligned either right or left.

Images greater than 320 pixels should be on their own line, and aligned left. Do not

use a caption for an image greater than 320 pixels, because the caption will break

the scaling.

http://www.nc.gov/government/our-government


Drupal Terms

Absolute URL – a link that is formatted with a full web path, e.g. https://www.nc.gov/government

Blocks – Blocks are content elements in landing pages or on the sidebar regions of your website. They

can be cards, such as call-to-action cards (CTA cards, which are colorful cards with icons) or article

cards (containing an image above the link). Quick links can be displayed in a block. Sidebar menus are

in blocks, and a Twitter feed is often displayed in a block on a landing page or footer.

Carousel, Slider, Banner – These three names are used interchangeably for a full width block created

using the "carousel" block type. A slider and a carousel have multiple slides. A banner is just a carousel

that only has one image.

Content Type - In Drupal, each item of content is called a node (see below), and each node belongs to

a single content type. Most of the time different content types have different data fields, layouts and

work flows associated with that content type.

Landing Page - A content type in the Digital Commons sites, used for home pages and often for the

first page in a section of content. Landing pages have more flexibility than other content types. They

contain a combination of various blocks, cards, bands and banners linking site visitors to deeper

content.

Modules – Drupal is powered by thousands of software projects called modules. These software

modules can plug into your site and provide enhanced functionality.

Node – The node is your core unit of storing content. If you're inputting and saving content, you're

probably saving it as a node. A page is a node. A block is a node.

Relative URL – a link that is formatted with a partial web path and points to content on your agency’s

site, e.g. government/open-government. Relative links do not include the domain; they begin after the

first slash.

Right Rail - Many content types in Digital Commons sites have a sidebar menu in the right. We call

that the right rail.

Taxonomy - A taxonomy is a collection of organizational keywords known in other systems as

categories, tags, or metadata. It allows you to connect, relate and classify your website’s content. It

can help a "view" to function (see below).

Text Editor/WYSIWYG - "What You See Is What You Get". The part of a Drupal form where the user

can enter text using paragraphs, bullets, and tables. Imagery can also be added.

Views - A list that is created dynamically. When you enter a new press release using the Press Release

content type, it is automatically entered into your Press Release page. That page with all the press

releases is a view. When you use the "event" content type, your calendar will be fed automatically;

that is another view. Documents are often in views as well. Views often rely on taxonomy.