Drupal/C3/Modifying-the-Page-Layout/English-timed
From Script | Spoken-Tutorial
| Time | Narration |
| 00:01 | Welcome to the Spoken tutorial on Modifying the Page Layout. |
| 00:06 | In this tutorial, we will learn about:
Layouts Block Configuration and Permissions and Removing and Re-ordering blocks. |
| 00:16 | To record this tutorial, I am using:
Ubuntu Linux Operating System Drupal 8 and Firefox Web browser. |
| 00:26 | You can use any web browser as per your choice. |
| 00:30 | First, we will learn about layout. |
| 00:33 | Here, we will get an introduction to Themes and Blocks. |
| 00:37 | Themes gives us the general layout, look and feel of our site. |
| 00:42 | I will introduce you to Themes in a little while. |
| 00:47 | For now, understand that a Theme can be applied to a Drupal site, without changing the content. |
| 00:54 | And, it gives us the colour scheme, location of the Blocks and all the formatting for the text and images. |
| 01:03 | Previously, we learnt that Blocks are information that can be placed in various areas of a site. |
| 01:10 | Blocks go into Block regions and Block regions are determined by the Theme. |
| 01:15 | In the design area,
we have Blocks, we have Themes and we have Menus. |
| 01:23 | Please note, we didn’t talk about or apply our Themes earlier. |
| 01:29 | This was done to highlight the fact that we can apply a Theme at any point while building a site. |
| 01:36 | The only reason we’ve waited till now is to show that we can wait till the very end to apply a Theme. |
| 01:42 | But, I will always prefer to apply my Theme as soon as it’s ready. |
| 01:49 | Let us open our website which we created earlier. |
| 01:52 | Let’s now get into the layout with a look at Blocks and Block regions. |
| 01:58 | Blocks enable us to place information anywhere on our site. |
| 02:03 | Go to Structure and Block layout. |
| 02:06 | All the blocks that are available from our current theme are here. |
| 02:11 | For e.g: Header, Primary Menu, Secondary Menu and others. |
| 02:18 | We’ve actually already placed a few of those. |
| 02:22 | Recall, we had placed the "Welcome To Drupalville" custom block in the sidebar. |
| 02:28 | It appears in the left sidebar on this particular theme. |
| 02:33 | We also added a "Recent Events Added" view to our Left sidebar. |
| 02:39 | Now, let’s learn how to configure and to give permission to our blocks. |
| 02:44 | First, we need to know which Block Regions do what. |
| 02:48 | At the top, there is a Demonstrate Block Regions. Click on it. |
| 02:53 | Every theme in Drupal gives us this kind of a picture of where the Block Regions are. |
| 03:00 | Block Regions are dependent on the themes. |
| 03:04 | In Bartik, we have the options: |
| 03:07 | Secondary Menu, Header, |
| 03:09 | Primary Menu, Highlighted, Featured top, Breadcrumb, Sidebar first, Content |
| 03:16 | Sidebar second. |
| 03:18 | We can place any block in any region. |
| 03:21 | The important ones like the Content block should be left in the Content region. |
| 03:27 | Let us click on Exit. |
| 03:30 | Leave the Breadcrumbs block in the Breadcrumb region. |
| 03:34 | But, there are some other things we can move around. |
| 03:38 | Move the Search block by either- clicking and dragging it or |
| 03:43 | clicking on the drop down and putting it in the Header. And, it moves up. |
| 03:49 | Similarly, move the "Welcome to Drupalville" to the top of Sidebar first. |
| 03:55 | Save the changes by clicking on the Save button. |
| 03:59 | Now, let’s go to the Homepage to see the changes. |
| 04:03 | Here’s our search bar, up in the header. |
| 04:06 | And our "Welcome to Drupalville" block is now at the very top. |
| 04:11 | So, that’s how we position and order blocks. |
| 04:15 | Now, we will move to configurations and permissions of Blocks. |
| 04:20 | Click on Structure and Block layout. |
| 04:24 | And, let’s find our Recent Events Added block. |
| 04:27 | Right now, it’s in Sidebar first and it’s visible on every page. |
| 04:33 | Click on Configure. |
| 04:35 | Right now, Recent Events Added block is visible everywhere. |
| 04:40 | But we may want it to show up only on an event page. |
| 04:44 | Put a check-mark in Events and click Save Block. |
| 04:49 | Once again, scroll down and click Save Block button again. |
| 04:54 | Click Back to site. |
| 04:56 | Now, the Recent Events Added block is not there anymore. |
| 05:00 | But, if we go to an event, we can see Recent Events Added. |
| 05:05 | Now, up here, under the "Welcome to Drupalville" block, we see the welcome message
which is not necessary once we have logged in. |
| 05:15 | Let’s hide that. |
| 05:17 | Just click on the little pencil here and choose Configure block. |
| 05:22 | One of the great things about Drupal is, we can edit the front end using the pencil or the gear. |
| 05:29 | Instead of restricting by Content type, let’s restrict it by an individual page. |
| 05:35 | See here, ’Specify pages by using their paths..’. |
| 05:40 | To hide or show something on the front page, use this angle bracket- front- angle bracket. |
| 05:47 | Copy and paste it. Now choose "Show for the listed page". |
| 05:52 | Our welcome block will be only on the Homepage. |
| 05:58 | Let’s go one step further. |
| 06:00 | Click on Roles and put a check-mark in Anonymous user. |
| 06:05 | And click on Save block. |
| 06:07 | Now, it’s only going to show up when we’re not logged in. |
| 06:12 | We don’t see this message because we are logged in right now. |
| 06:16 | Let’s logout and our 'Welcome to Drupalville' block shows up again. |
| 06:21 | But when we login, and click on Home, it’s no longer there. |
| 06:27 | So, configuring, moving, and giving permissions to Blocks is really quite simple. |
| 06:34 | Let’s practice this more. |
| 06:36 | Click on Structure and then on Blocks. |
| 06:40 | We have the Main navigation in the Primary menu block. |
| 06:44 | If we move that, then our Main navigation will be in a completely different place. |
| 06:51 | Down here, at the bottom, we have: Featured bottom first, second and third |
| 06:58 | Footer first, second, third, fourth and fifth |
| 07:03 | Powered by Drupal and Footer menu in the Footer fifth location. |
| 07:08 | Right now, there are no disabled blocks. |
| 07:12 | Let’s put one of our menus in the Footer first block region. |
| 07:17 | Scroll back up to the top. |
| 07:19 | Find your User account menu and put that in Footer first. |
| 07:25 | It is immediately moved down. |
| 07:28 | Now, click on Save blocks. |
| 07:31 | Back to the site. |
| 07:33 | Scroll down and see that the user account, instead of being at the top, is down here in the footer. |
| 07:40 | So, any block can be placed anywhere, for any purpose. |
| 07:45 | Go back to Structure and Block layout. |
| 07:49 | Let’s now remove a block. |
| 07:52 | Let’s remove Powered by Drupal from the Footer fifth block. |
| 07:57 | Simply click on the drop-down and choose None. Then click on Save blocks. |
| 08:04 | Scroll down now. |
| 08:06 | We can see that Powered by Drupal block is now in the disabled block region. |
| 08:12 | Click on Back to site to see that it’s totally gone. |
| 08:16 | With this, we come to an end of this tutorial. |
| 08:19 | Let us summarize. |
| 08:21 | In this tutorial, we have learnt about:
Layouts Block Configuration and Permissions and Removing and re-ordering blocks. |
| 08:42 | This video is adapted from Acquia and OSTraining and revised by the Spoken Tutorial Project, IIT Bombay. |
| 08:50 | The video at this link summarizes the Spoken Tutorial project. Please download and watch it. |
| 08:56 | The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us. |
| 09:04 | Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture, Government of India. |
| 09:15 | This is Vanessa Varkey, signing off. Thanks for joining. |
