Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
For most of this course we've been dealing with the content that appears in the center of the page and ignored all of the stuff that's floating around the edges. This video talks about that edge stuff, which is contained in something called blocks. These blocks in turn are placed in blocks regions. You can put three kinds of things in blocks. First, there's static content such as text and pictures. Second, there's dynamic content, such as you'd create with simple views as you learned in an earlier video. Finally, Drupal Gardens automatically creates a few special blocks that are available for placement right away.
As we look through our page, we can see some of these blocks regions, scroll down a little bit and you see, this is the main region, where our main content goes. This left area is called sidebar A; the right area is called sidebar B. But there are many, many more. There is these down at the bottom. There are some up at the top. In fact, there are about 20 block regions, although only about eight have blocks in them right now. There are two ways to see all the block regions, one of them is to go to a Documentation page on the Drupal Gardens site.
That's at regions.drupalgardens.com, and here we are. As you can, there's a lot of stuff there that we don't have showing on our site. The other way is by going to your site's Block Management page. We'll go back to our site and go there by going to Structure and Blocks, and then clicking on this link toward the top, Demonstrate Block Regions. All of these yellow bars demonstrate, more or less, where these Blocks are. Remember those three columns at the top? Well, here they are, in our own theme.
When you're done looking at the block regions, just click on this Exit block region demonstration, and that takes you back to your list of block regions. Each section of bold text here corresponds to one of those block regions, so we have the Header, Navigation Area, Highlighted Content, and so on. I mentioned Sidebar A, which is a lot of stuff in it, and Sidebar B, and you might remember that we had added some things into the earlier on in the course. Toward the bottom are all of the blocks that are available but are not yet in a block region. They are in this Disabled area.
By the way, I want to mention that these block regions are standardized throughout Drupal Gardens, so if you create something in the Campaign theme and then change to a different theme altogether, your items will stay in their block regions. That's a real boon, because it's not true among contributed themes for core Drupal, generally. That is, if you self-host Drupal, not using Drupal Gardens, but just put it on your own server and you start downloading all these themes, you might find that blocks disappear as you change from theme to theme, but you don't have to worry about that in Drupal Gardens, which I think is just terrific.
Anyway, let's get back to our blocks. When I am working with them I like to open up a few windows. The first one shows this Block Administration page, so I can move things around. The second, which I'll open by right- clicking and choosing it in a new tab, is to show where those block regions are. The third page I'd like to show is just the homepage and, again, I'll open that in a new tab. This way I can see the immediate effects of what I change on this Block page, as well is where those block regions are, very quickly just by moving from tab to tab.
Now, there are a few different ways that I can move blocks from one region to another. Let's say, for example, that I want a move that rotating banner that's at the top from the Banner area into, let's say, Precontent second. Well, I could just grabbed that little compass-like icon and drag it down. When I do that, you'll notice that it changes on the pop-up menu, and it also shows this little orange asterisk. What that means is that I have to save the page, or I'll lose that change. If I were in fact to close this out by clicking on this X, it would not move.
In fact, that's what I'm going to do, because I don't really want to move this. And you see that page redraws, and this banner up here doesn't actually move. I'll go back by going to Structure and Blocks. Another way to move things around, as you might guess, is by changing it in this region pop-up menu itself. Again, go back to that Rotating Banner and move it to Preheader First, for example. It jumps up to that area, and once again we see our orange asterisk. And again, I'm not going to save that. I am just to bring it back to the Banner area.
Another way to change things on a block is by going to the block itself and editing it. You can do that in two ways, either by hovering your cursor over the block itself until you see the widget and then click it and change Configure Block. In the page that you get to, you'll see Region Settings, and there you can choose from the list here of what region you want it to be in, or remove it entirely by changing it to None. You can also get to that Block Configuration page, once again, by going to the Block page > Structure > Blocks and clicking the Configure link next to whichever block you want to change.
Now that you know how to move blocks around, let's look at some of those that Drupal Gardens provides but keeps disabled by default. Scroll down to the bottom here to our Disabled region, and we see Active Forum Topics, Author Information, Add This button. The best way to learn about these is really to start implementing them in your site, particularly when you have a lot of stuff on your site already, because some of these things only become relevant when they are displayed in your content, or when you have a lot of comments coming in. For example, right now, if we go back or front page, we have a block over here, Comments, but no comments are available, so there's really not much reason for it to show. And in fact, it doesn't tell us anything.
In fact, I'm going to remove this one by clicking Configure Block, going to our Region Settings and going to None and saving. One block that I actually like to add is the Recent Content block, which again starts out as disabled. I am going to put that let's say into sidebar A. Now when I do that it, jumps up to Sidebar A, but since there's a lot of stuff there, I'm never really sure where it's going to put it. It might be at the top or the bottom or the middle, so I'll just go down and save and make sure that I like the way that it looks. And there it is.
Although it said that it was at the top before, it actually ended up in the middle. Now let's add a dynamic block that we created earlier with simple views. That block was called Newest Tours. I'll go up to Structure and Blocks once again, and down toward Disabled region. And there's our Newest Tours Block. Go and I'm also going to put that one into sidebar A. Go down and save. Then actually, instead of closing this out, I am going to go to my homepage right there, and reload it.
Now when I scroll down, I see recent content which I put there, and then at the bottom Newest Tours, just as we would expect. This is a good time to take a look at what else is on this page and decide what we really want. You know, I think I am going to remove this sample gallery. We don't need it there, and again, it's just a sample. So, Configure Block, move it out of sidebar B, and it's gone. There is one thing that I want to warn you about blocks: not every one fits into every block region well.
Let's go back down here to that Newest Tours, for example, which looks so good in sidebar A. I am going to configure it, and let's move it up into say, the header region, go down and save it. Hey! It really kind of clutters up the header region there, so I am going to bring that right back down and put it in sidebar A once again. And what you'll find is that a lot of those ones at the very top and bottom of the screen actually change the look of the block quite a bit. So don't just decide, oh! This will look good there, this will look good there, because the typefaces will actually change depending on the design of the theme.
Go back and save the block. Put it back to where it was. Now, at the beginning of this video I said there were three kinds of blocks. They were those provided by Drupal Gardens-- which you already saw, such as Recent Content-- dynamic blocks, such as the one you saw are created by simple views--that Recent Tours--and static blocks that you create explicitly. I am now going to going to create one of those static blocks. To do that, I go back to my Blocks administration page. I could do that again by just going to that tab or clicking Structure and Blocks, and then say Add block.
Block Description, I am going to say "Need guidance?" I'll make that the block title as well, and then, in the Body, I'm going to add "Need help finding your way around? Write for one-on-one help," and then for this Write for one-on-one help, I am going to link that to our Contact page, which incidentally is at /contact, in Drupal Gardens. You'll learn more about that in the video "Setting Up Contact Forms." Click on the link here and make it /contact. There. Go down and change its region so it shows up in sidebar A. Scroll to the bottom and Save.
Let's take a look at what that looks like by going back for homepage, clicking, and scrolling down. There it is! It does show up at the bottom, however, so I am just going to move that up to the top. I think it is important enough. I do that by going down here, grabbing its little compass, dragging it up to the top, and saving. Close that out, and there it is. You know, blocks are a tough subject to teach.
On one hand they're vitally important for defining how people experience your sites, so I wish I could teach them first. But on the other hand you need to understand a lot of Drupal concepts first, about nodes and such, before blocks make any sense. But now you know the basics of block management; we haven't really gone deeply into the configuration pages, or for example you can change settings so the block only shows up on certain pages or to certain kinds of users. If you want to know more of those details, the Drupal Essential Training course is the place to go.
Get unlimited access to all courses for just $25/month.Become a member