Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Styling the tabbed photo panels on the team page

From: Designing a Portfolio Website with Muse

Video: Styling the tabbed photo panels on the team page

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.

Styling the tabbed photo panels on the team page

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.

Show transcript

This video is part of

Image for Designing a Portfolio Website with Muse
Designing a Portfolio Website with Muse

43 video lessons · 24183 viewers

Steve Harris
Author

 
Expand all | Collapse all
  1. 5m 1s
    1. Welcome
      1m 13s
    2. Using the exercise files
      2m 7s
    3. Understanding what you should know before watching this course
      30s
    4. Touring the Red30 Design portfolio site
      1m 11s
  2. 11m 4s
    1. Exploring information design
      2m 31s
    2. Generating content
      1m 46s
    3. Wireframing the site
      3m 58s
    4. Adding a mobile or tablet layout (New)
      2m 49s
  3. 32m 29s
    1. Creating master pages
      3m 19s
    2. Building and placing graphics from Photoshop
      2m 50s
    3. Building and placing graphics from Illustrator
      2m 5s
    4. Building graphics in InDesign
      3m 39s
    5. Creating repeating backgrounds
      4m 33s
    6. Manipulating layers and transparency
      4m 4s
    7. Creating buttons and button states
      5m 32s
    8. Defining and redefining text styles
      4m 13s
    9. Understanding the Sticky Footer (New)
      2m 14s
  4. 1h 10m
    1. Creating the header and the footer (Updated)
      4m 53s
    2. Adding the navigation widget
      6m 26s
    3. Creating a rotator for text and graphics
      6m 45s
    4. Creating the office photos slideshow
      6m 28s
    5. Creating the floating contact menu
      3m 42s
    6. Styling the tabbed photo panels on the team page
      7m 4s
    7. Creating a lightbox photo gallery
      8m 32s
    8. Styling the contact page
      5m 24s
    9. Creating a document link for downloadable content
      4m 5s
    10. Setting up a Business Catalyst contact form (Updated)
      3m 49s
    11. Styling and adding states to the contact form
      6m 52s
    12. Creating a Wufoo contact form
      6m 21s
  5. 30m 48s
    1. Best practices for search engine optimization
      5m 35s
    2. Inserting and activating Google Analytics
      4m 20s
    3. Setting up Google Webmaster Tools
      4m 44s
    4. Publishing to a third-party hosting server within Muse
      5m 8s
    5. Buying and linking a custom domain name
      6m 43s
    6. Enabling and using content management (New)
      4m 18s
  6. 25m 48s
    1. Pinning graphics to create depth (Updated)
      2m 36s
    2. Adding full-size images as backgrounds
      2m 26s
    3. The basics of horizontal scrolling websites
      5m 38s
    4. Placing a layered PSD file into Muse
      3m 19s
    5. Integrating Adobe Edge Animate graphics
      3m 6s
    6. Working with the Layers panel (New)
      2m 25s
    7. Working with Parallax Scrolling (New)
      4m 28s
    8. Helpful resources (Updated)
      1m 50s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Designing a Portfolio Website with Muse.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.