Hi. I'm Shelli Minton and I'm the Web Training Supervisor in University Communications and Marketing.
00:07
This video demonstrates how to create a Modular Page in Drupal.
00:11
A modular page allows for the greatest amount of flexibility in your page creation, but this may make it more difficult and time-consuming to build.
00:20
You can make a modular page simple by using one content row with one content text editor block…
00:28
or you can use many different rows with different web elements.
00:32
It is important to plan your layout based on the content that you have before you start creating your page.
00:39
Use the Web Element Catalog
00:45
and the webpage templates for ideas.
00:51
Before starting, open the Website Help Hub so that you have access to the training materials.
00:57
In a second tab or window, open the Drupal CMS.
01:02
Remember that all pages created in Drupal must follow our brand and accessibility guidelines. You will find those details under Brand and Accessibility Resources on the Website Help Hub.
01:16
Login to the CMS and navigate to the Nodes listing in your site folder.
01:23
To create a new page, select Add New Content.
01:31
Choose Modular Page.
01:39
Add the Page Title.
01:43
Note that the URL is created automatically based on your page title.
01:48
To change the hierarchy of the page, move the page under Page Location.
01:58
I will put this test page under UCM
02:10
and then Web.
02:22
You can see that the URL updates automatically.
02:29
If you want the left navigation to show on your page, under Display settings, change Number of Columns to 2. I recommend saving your page as a Draft at this point to make sure that the page is created, and you don't lose your settings.
02:47
Choose Edit to reopen the page.
02:56
We will add our first row under Page Container.
03:02
You have many options when you click the drop-down.
03:05
I'm only going to review a couple of options in this video, but each web element will be explained in detail in separate training videos.
03:15
The simplest page can be created by adding an Advanced Content Row
03:29
with a content text editor.
03:39
You can add content like you would on a basic page with text, images, videos, and links.
03:51
Adding a row description makes it easier to find your content rows later.
04:00
You can change the background color of the row.
04:03
Let's look at a webpage template to get some ideas.
04:10
The Resources template has Icon Tiles, Card Links, Topic Preview, and several other rows.
04:24
Let's recreate this on our modular page.
04:27
When you know what kind of element you want to use, you can add it to a row.
04:31
Click the dropdown,
04:36
and we will add Icon Tiles.
04:41
Click the dropdown again
04:45
and add Card Links.
04:51
Click the dropdown again
04:55
and add Topic Preview.
04:59
So you can see that we created four rows for each of the different items.
05:09
We can open a row and then change the content that we need for that particular element.
05:25
By clicking the headings you can expand or collapse each of the element rows.
05:32
If you want to rearrange them you can just use the drag and drop arrows.
05:37
14. When your edits are complete, you can save it in Draft, Needs Review, or Published status.
05:43
Draft means that you are still editing the page.
05:47
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.
05:54
Published means that your changes will be reflected on the live site.
05:58
This concludes the video for creating a modular page. Please check out our other learning resources and schedule a consultation if you have additional questions. Thank you.
06:08
(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 -
Create a Modular Page
July 20, 2022 | 0:06:08Create a Modular Page