Hi. I'm Shelli Minton and I'm the Web Training Supervisor in University Communications and Marketing.
00:07
This video provides an overview and example of the Modular Page in Drupal.
00:13
For a bit of background, the modular page is based on using a grid layout.
00:18
The grid layout is comprised 12 columns that can be combined in evenly spaced units.
00:25
The rows and web elements used on our modular page fill these units in the grid.
00:33
The Web Element Catalog shows examples of the different types of elements that can be added to a modular page.
00:43
Each content row by default is full width or 100% – or 12 columns of the grid.
00:51
Each web element has been styled and formatted for a specific purpose and may have different widths, taking up 50%, 33%, or 25% of the row.
01:03
By design these elements will be formatted to display correctly in different devices and will comply with our Ohio brand and accessibility standards.
01:16
For an example, let's review the homepage for College of Arts and Sciences.
01:21
When you examine this page, you can see the different sections that look grouped together in a row.
01:28
The first item is the Hero.
01:30
It is an option that can be added to the top of any page and can include an image, heading, sub-heading, and up to three call-to-action buttons.
01:42
This first row contains three content text blocks that are each set to 33% (or 1/3) of the row.
01:54
This is a row that only contains a heading.
02:00
This is a Card Links element with 4 cards.
02:08
This is an Image with Text element.
02:16
This row contains custom text and styles and is not one of our available elements.
02:21
These three rows each contain a Featured Media element with the images on alternating sides.
02:28
If we look at this page in the CMS, you can see how the page structure was created.
02:33
The details of creating a new page will be explained in a separate video.
02:38
The Hero section is built under Hero Settings in the Right panel.
02:47
You can see that the Page Container contains the multiple rows that we saw on the page.
02:53
You can expand each row to see the details and to make edits.
03:01
The first row contains three content blocks
03:11
and each block has a width set to 33%.
03:20
You can see that this page content row is our heading row.
03:27
and then we have the Cards Link section that contains each of the four cards that were shown.
03:35
Further down, you can see each of the Featured Media elements.
03:41
If you expand a row
03:45
you can make edits.
03:53
Whenever you open a page in the CMS it is locked for editing by any other user.
03:59
If you do not make any changes to the page, you need to Unlock it, so that someone else can access the page.
04:08
If you do make changes to a page, you can save it either in Draft, Needs Review, or Published status.
04:17
Draft means that you are still editing the page.
04:20
Needs Review means that it is ready to be published and someone else needs to check it if you do not have access to publish live.
04:27
Published means that your changes will be reflected on the live site.
04:31
This concludes the overview video. Please check out our other learning resources and schedule a consultation if you have additional questions. Thank you.
04:41
(End of video)
0:00
0:05
0:10
0:15
0:20
0:25
0:30
Delete Comment
Are you sure you want to delete this comment? This cannot be undone.
Caution!
You haven’t finished your comment yet. Do you want to leave without finishing?
0 Comments -
Overview of Modular Page
July 14, 2022 | 0:04:41Overview of Modular Page