Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now let's add a scrolling sidebar widget to our "Explore California" travel guide. If you're following along, I'm on page 23, which is in the "Desert to See" chapter. To add a scrolling sidebar widget, just click on the Widgets dropdown menu and select Scrolling Sidebar from the dropdown menu. When the widget appears on screen, go ahead and change it to a floating object and then drag it into place. We'll place it over here in the left- hand column and then grab the lower right-hand control handle and drag it until the widget fills that entire column.
Now, we can add text, images or shapes directly inside of our widget. I've included a file in the text files folder called Channel_Islands.rtf that has some text on it. I'll go ahead and copy this text and then go back into my widget and then press Command+A to select all of the existing text that's there and then Command+V to paste that text in. Now, let's apply some formatting to our text. Let's go up here at the first line where it says, Channel Island Excursion and triple-click on that line of text to select the entire row.
Now, we can come over here to our toolbar, click the dropdown menu for Paragraph Styles and scroll down until you find Heading 1. That's looking much better. Now, we'll add some images. Let's go ahead and close Graphics Inspector and click on the Media Inspector. Inside of the 10_pictures folder, I've included these images. Let's go ahead and drag the first image arch_ rock_anacapa up here into the top of the widget. We can stretch the image out, until it mostly fills the sidebar. Now, let's add a few more images in to make this text a lot more interesting for our users.
Let's drag the island_fox image in next, and place it so it's just below the first paragraph. And again, stretch the image out until it matches the size of the image above. Now, we can use the scrollbar on the right to scroll down and add a few more images. We'll next add the gray_whale image. Simply click and drag the image in place, and drop it. Reposition it, and stretch the size out until it matches the other images.
We'll scroll down on our page again, and now let's add the santa_rosa_island image. Simply click and drag the image into place. Once more, we'll position it, scroll down to the very bottom, and finally, we'll add the image of the torrey_pines. Go ahead and drop that in place. Make sure it shows up at the bottom of our text, and stretch the image size out, until it also matches in the same size as well.
Now, we can apply a little bit more formatting to our widget. It'd be nice to change the background color of our image so that it stands out to our users a little bit more. So, we'll close the Media Inspector and go back into our Regular Inspector and make sure we're on the Graphics tab. Next, click on the widget to select it and then in the Graphics Inspector, click the Fill Color. Let's use the Magnifying Glass to select one of these hues that's up here in the sky portion of the torrey_ pines image, maybe that nice blue.
It's a little bit intense for this image, so we'll go ahead and lighten it up a little bit by dragging the slider, until you find a hue that's pleasing to the eye. Now, we can go ahead and scroll back up to the top and see how our widget looks. It looks pretty good. It would be a good idea to go ahead and preview this widget on your iPad by coming up here and clicking the Preview button when your iPad is connected. Then, you can scroll around on your iPad and see how the scrolling sidebar reacts.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 57998 Viewers
119 Video lessons · 67405 Viewers
84 Video lessons · 16757 Viewers
125 Video lessons · 29632 Viewers
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.