Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The TEAM page of the red30 website features black-and-white photos which colorize and reveal a biography when you hover or mouse over them. The Tab panel widget was used to achieve this effect along with some simple editing of photos in Photoshop. Let's jump into Muse and see how this was built. Let's go ahead and first move this original widget out of the way. We're going to reference back to it a few times as we build it from scratch. Now that we've moved our final widget out of the way, let's create a new one from scratch.
In the Widgets panel, let's scroll down to the Panels area, and we'll drag a Tabbed panel widget out onto the page. Once that appears on our page, I'm just going to scale it to fit the full width of our site. Now that it's scaled with full width, I am going to delete out any of the content that's included in the Sample widget that I don't need. So I'm going to just delete this tab altogether, and I'll click into the second tab and delete that as well. Next, I'll delete out this content just by clicking in and selecting it.
And now that I've no content, let's go ahead and add our 5 different tabs that we're going to use for each of the 5 team members. Now that we've got these 5 tabs, let's scale them to make them a little bit higher as they are going to contain those tall images or our team members. So if we scale them to about 300 pixels that should be perfect. Next, if we click the blue arrow beside our widget, we can change some of the options. I am going to turn off Show Label, as I don't want the label to show, I want an image to show, and I'm also going to change Edit Together.
Edit Together means that all of these tabs are styled the exact same way and we want them to be different for each individual different team member on our site. Now if we click into the first tab, what we're going to do is we're going to change the states. So, I'm going to set our Normal state. I want to include the black-and-white image of Sarah. I've created black-and-white versions of all our team members' photos prior to building this in Muse. Once we've got this photo in place, I'm going to set our fitting to Scale To Fill and our positioning to the center.
Next, let's click onto our Rollover state. Our Rollover state is going to be the color photo of Sarah. So if we change our fill, select an image and select Sarah's color photo, click Open. And again set our fitting to Scale to Fill and our position to cente; that looks good. Finally what I'm going to do is I'm going to change our Active state. Our Active state also needs to be the color image of Sarah, click Open.
Let's go ahead and preview this. So, because this tab is selected we've got a color image of Sarah. However, if we select the tab beside we can see that it changes to our black-and-white version. Now, you can go ahead and repeat the process for all of the other tabs throughout the site. For now, I'm going to move down and style the content below Sarah's tab. So, let's move our original widget down a little bit out of the way. Let's go ahead and scale down this content area below.
I'd like to make it big enough to include some text. Now, what I want to do is I want to change this and include a fill or an image behind. Let's have a look at the width of this box. It's 915 pixels Wide by approximately 233 pixels High. I created an image in Photoshop that looks something like this. It just uses a couple of brackets on the left and right side and we're going to put this in the background of that content area. In Muse, if I select this content area, and I change the Fill, let's select that graphic that I just created using the brackets, and click Open.
What that's going to do is place that in the background of this content area. Now, with Sarah's image selected, we can go ahead and add some text--just by clicking on the Text Box tool, drawing a textbox, and typing anything we need. I'm going to select Sarah's text from the original widget saying that she is the Creative Director, and I'll go ahead and paste that in my new text box. I've actually created a style already for this. It's a paragraph style and I've called it Widget - Team Heading. Once we've got some text in this area, we can go ahead and duplicate this text throughout all areas on our widget.
Just by selecting the second tab you can see that we don't have any text in there. So, if we go back to the first tab, if we select our text, we can click Edit>Copy. Select the second tab, make sure our content area is selected, and click Edit>Paste in Place. And what that will do is make sure that this text appears in the content area of the second tab. We know that the second tab is going to be used for Uri. So if we go ahead and change this to Uri, and we select Sarah again, we can see that it changes.
Now, you may notice that our bracketed background isn't appearing in each of these tabs. That's because we have Edit Together turned off. So if we want something to appear in all of the tabs, we need to make sure that we've turned Edit Together back on. If we right-click this blue arrow, turn on Edit Together, and select Uri's tab, we can go ahead and change this fill to that same bracketed image. And now this will appear in all of the tabs throughout the widget.
Lastly, what we want to do with this widget is we want to change some of the mouseover and event settings. So if we click the blue arrow on the right we can change the event. On Click means we have to click on each of the tabs. However, if we select On Rollover what this will do is it means that when our mouse moves over any of these images it will automatically display the new text below. So if we go ahead and preview that, so you can see if we mouse over this image it's the one that's selected. So that's why Sarah is in color. However, if we mouse over the image beside which is Uri's spot, Sarah changes to black and white, and that's because we've got our event set to mouseover.
Now if we reference down to our final widget, we can see that with all of the photos in place and all of the content in place it's quite a cool and interactive widget. Now, I'm noticing a difference between the two of these and that's just that this one still has strokes applied to it. So if we go back to our Design view, click on our widget and make sure we've got Edit Together selected. We can simply click into each tab and let's go ahead and remove our stroke. And we're going to want to do that for each of the different states throughout our widget. Once we've removed all of the strokes, this widget will perfectly match up with the original we've designed below.
The Tabbed panel widget is a great way to condense a large amount of information in this one small interactive area on your website. Experiment with adding different types of content into both tabs--and the panels--such as videos, embedded HTML, and buttons.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 57890 Viewers
119 Video lessons · 67361 Viewers
84 Video lessons · 16711 Viewers
125 Video lessons · 29589 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.