Know which layouts are best for which content. Be able to pick one quickly and visually. Then if needed-- get into the details to know which elements can be configured
Contributors
Nelly
JUNO version
Reviewers (check the box when you’re done!)
Scrilla
Travis
Renae
Review deadline
Notes for reviewers
This is part 1 of 2. The second doc will cover all options for pulling and sorting content.
And we'll also be making a list of "prebuilt" modules so clients don't have to look at all this detail if they don't want to.
...
Expand
title
Configuration options for this module
Element
Options
1
Rotator width
Select one: Full width Partial width
Total number of items
Choose the maximum number of items in the module (recommend 3-7)
2
Module title
Remove title Align title to the left, right, center, or bottom left
3
Item titles
Remove overlaid item titles
4
Scroll
Turn off automatic scrolling Change automatic scrolling speed 5 seconds Show or hide indicator dots or arrows
...
An example featured rotator. See the configuration options above.
Billboard rotator
The billboard rotator is wide and skinny. It’s typically used for advertisements. It showcases one item at a time as it rotates. You can turn this module into a static banner image by only including one item total.
Expand
title
Configuration options for this module
Element
Options
1
Rotator width
Select one: Full width Partial width
Total number of items
Choose the maximum number of items in the module (recommend 3-7)
2
Module title
Remove title Align title to the left, right, or center
3
Item titles
Remove item titles
4
Scroll
Turn off automatic scrolling Change automatic scrolling speed 5 seconds Show or hide indicator dots or arrows
...
An example billboard rotator. See the configuration options above.
Square rotator
The square rotator showcases multiple items at once as it rotates. You can choose to show 3 or show 4.
Expand
title
Configuration options for this module
Element
Options
1
Items shown
Select one: Show 3 items at a time Show 4 items at a time
Total number of items
Choose the maximum number of items in the module (recommend 10)
Item arrangement
Align items to the left, right, or center when there aren’t enough to fill the row
2
Module title
Remove title Align title to the left, right, or center
3
Scroll
Turn off automatic scrolling Change automatic scrolling speed 5 seconds Show or hide arrows
...
An example square rotator. See the configuration options above.
Round rotator
We recommend only using this module to showcase speakers. It showcases multiple speakers at once as it rotates. You can choose to show 3 or show 4.
Expand
title
Configuration options for this module
Element
Options
1
Items shown
Select one: Show 3 items at a time Show 4 items at a time
Total number of items
Choose the maximum number of items in the module (recommend 10)
Item arrangement
Change circle size Align items to the left, right, or center when there aren’t enough to fill the row
2
Module title
Remove title Align title to the left, right, or center
3
Scroll
Turn off automatic scrolling Change automatic scrolling speed 5 seconds Show or hide arrows
...
An example round rotator. See the configuration options above.
...
Grids
Two-column grid
Also known as Square Grid. This grid is always two columns wide.
Expand
title
Configuration options for this module
Element
Options
1
Total number of items
Choose the maximum number of items in the grid (between 2-50)
2
Module title
Remove title Align title to the left, right, or center
...
An example two-column grid. See the configuration options above.
Multi-column grid
Also known as Grid Image. This grid can have 2-5 columns.
...
Expand
title
Configuration options for this module
Element
Options
1
Number of columns
Show 2-5 columns
2
Total number of items
Choose the maximum number of items in the grid (between 2-50)
3
Module title
Remove title Align title to the left, right, or center
4
Item titles
Remove titles and abstracts
...
An example multi-column grid. See the configuration options above.
Round grid
We recommend only using this module to showcase speakers. This grid can have 2-6 columns.
Expand
title
Configuration options for this module
Element
Options
1
Number of columns
Show 2-6 columns
2
Total number of items
Choose the maximum number of items in the grid (between 2-50)
3
Item arrangement
Change circle size Align circles to the left or center
4
Module title
Remove title Align title to the left, right, or center
5
Speaker role
Remove speaker’s company/role
...
An example round grid. See the configuration options above.
...
Infinite search grid
The search grid includes a search bar and filter options. This grid This grid displays an infinite number of items that load as you scroll down the page. It can have 2-5 columns.
...
. Above it, you can include a search bar and filter options.
We recommend using this grid to display all of a specific content type. For example, on your Courses page, you could make all courses searchable. Note that if there are multiple modules on a page, the infinite search grid must come last.
Expand
title
Configuration options for this module
Element
Options
1
Number of columns
Show 2-5 columns
2
Total number of items
Choose the maximum number of items in the grid (between 2-50)
3
Filter button
Remove button
Search bar
Remove search bar and filter button Remove filter button only
3
Tab navigation
Add one or more tabs to filter content: All My Favorites …or any other content tags
4
Abstract
Remove abstract
...
An example search grid. See the configuration options above.
Round infinite search grid
We recommend only using this module to showcase speakers. It includes displays an infinite number of items that load as you scroll down the page. It can have 2-5 columns. Above it, you can include a search bar and filter options. This grid can have 2-5 columns
Note that if there are multiple modules on a page, the round infinite search grid must come last.
Expand
title
Configuration options for this module
Element
Options
1
Number of columns
Show 2-5 columns
2
Total number of items
Choose the maximum number of items in the grid (between 2-50)
3
Filter button
Remove button
3
Tab navigation
Add one or more tabs to filter content: All My Favorites …or any other content tags
4
Speaker role
Remove speaker’s company/role
...
An example round search grid. See the configuration options above.
Full width
Choose the maximum number of items in the module (recommend 3-7)
Remove title
Show or hide indicator dots or arrows