Viewers: in countries Watching now:
Author Tom Geller demonstrates how to create and publish a complete web site with the powerful tools in Acquia's hosted service, Drupal Gardens. The course shows how to leverage the pre-built page layouts and add custom styling using the ThemeBuilder tool; integrate rich site features, such as surveys, user ratings, and media galleries; and push content to Twitter and Facebook. The course also covers transitioning from a Drupal Gardens site to a self-hosted Drupal site. Exercise files are included with the course.
If you look at our site like a storefront, we're not quite ready to open yet. We stocked our inventory with text, graphics, videos and maps, but we still don't have any signage, so people don't know how to find anything. Adding some menus will make our site a lot more visitor-friendly and better showcase what we have. That's what this video is all about. When you first create your site on Drupal Gardens, there are already two menus on the page. There is this Main menu right here and the User menu right here. You can tell that they are menus by clicking on the little widget here.
In addition to Configure block, you also have Edit menu and List links, both of which are specific to menus. By contrast, if you go down to any other sort of block--this one is from a feed-- you get different options: Configure block, sometimes you'll get some other things like Edit view. So you can edit a specific menu by going up and using that contextual menu link, or you can edit all of them by going up to Structure and then clicking on Menus. Here we see all of the menus that come by default in Drupal Gardens.
Again, I mentioned Main menu and User menu, but there are also these two: Management and Navigation. Let's click on List links, just to see what's in those. The Management menu contains Dashboard, Content, Structure, and so on, and that might sound familiar to you, because it's actually what's in the toolbar up here at the top. The Management menu controls what shows up in the toolbar, but like every other menu, it also appears in a block. We could take a look at these menus by going to the Blocks Administration page. To do so, you go up to Structure and then Blocks, and we discussed this quite a bit in the video about working with blocks.
Now as we scroll down, we see the User menu is already in that Preheader second area. That's right. That's the one up here on the right. The Main menu is in the Navigation area and then down at the bottom, we have all of our disabled blocks, which include Management and Navigation. So if you wanted to, you could move all of these options into any block area on your page: the left column, the right column, the bottom of the page, and so on. But I do want to warn you: don't just move a block somewhere and walk away without checking it out.
Make sure that it works in the target region, because some blocks simply don't look right when you move them around. For example, you might end up with white text on a white background, which doesn't do anyone any good. But let's move on and actually start building our own menu. To do so, once again, you go up to Structure and Menus, and then up at the top, click Add menu. I am going to call this one "Explore California," and I don't think I need a description. Once again, that description only shows up on administrative pages. Then click Save.
Now we've created the menu, but there are no links in it yet. It also doesn't show up anywhere on the page, because it appears in a block, which hasn't been placed in a block region. Let's start adding some links by clicking Add link. I think the first one I'm going to create is actually an offsite link. I'll call it "State parks," and the path will be http://www.parks.ca.gov. I happen to know that that's the State parks' site. And for description, we'll say, "Information about state parks." Now that shows up when you hover your cursor over the link.
We'll ignore the rest of the settings for now and just click Save. Great! So we have one link so far. Just to show how that works, I am going to move that block into a block region, so we can keep an eye on the menu as we build it. To do so, go up to Structure and then Blocks, and then scroll all the way down to the Disabled blocks, because when you create a menu, the block that it creates remains disabled until you put it somewhere. And there is our Explore California block, which I'll just put in sidebar A.
Scroll down to the bottom, Save Blocks, and just to prove it's there, I'll close out that overlay. Once the screen redraws, we go down, and there it is, down at the bottom. And when we click on the link, of course we would then go to the external page. But let's go back and continue building our menu by clicking Structure and Menus. I'll just add a few more links by clicking Add link here next to the menu. Let's say, Related news.
The Path is going to be aggregator. We covered what the aggregator page is in the video earlier about subscribing your site to RSS feeds. Again, I don't really need a description, and I'll leave things as they are, and save. I am just going to create two more. Click Add link. It will be About us. The path is about-us, and save. And then one more, which is Our Mission, with the path, content/who-we-are.
Let's just have a description there. What makes us different? Now the reason that I did this is I want to show a little bit about the hierarchy. So we have these four links, and you might notice that Our Mission sort of fits underneath About Us. So I will actually pull it over, so it's subordinate to About us. You'll notice that as you drag these around, you can make them subordinate to each other, and in fact, you could have multiple levels like this. It takes a little bit of practice to figure out exactly how to make them fit underneath each other properly, but eventually you get it. And I will leave it just like that, so we have our three levels with one sublevel.
Scroll down and save configuration. Now, when we go back to our front page, wait for it to redraw--now when we scroll down, we can see our menu, and it shows that there's something underneath About us. In order to show what's underneath About Us, we're going to have to go back and edit that menu. I'll do that simply by clicking on this little widget here and Edit menu and List links. Now this About us menu is what has to change, because we need to expand it to show that Our Mission.
Click Edit, scroll down, and Show as expanded, then save. Now let's take another look at that page. Wait for it to redraw and scroll down. Now we see all of the links in there. There's something interesting about the way that this works as well. If you were to put this up into the Navigation region--that is, up where the Main menu is now, and you had this multilevel sort of menu with the top one expanded, it would show up as a dropdown menu. And in fact, you could have dropdown menus as much as nine levels.
The one thing you have to make sure you do is to expand each level to show the ones underneath it. The last thing that I'm going to do is I am going to hide that menu just to keep our site clean. Scroll down, go to that widget, and this time instead of editing the menu, I configure the block and then move it so that it's in no region and save. Now I have to admit that sometimes I'll build a big site with features I am very proud of and then forget to make them easy to access with menus. But it's really important that you give people easy and obvious ways to reach the parts of your site you most want them to see.
Then if you want to be really thorough about its usability, invite friends to browse the site while you watch over their shoulders, and adjust menu links according to their behavior.
There are currently no FAQs about Drupal Gardens Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.