Today I want to show you how easy it is to change the look and feel of your site by changing the layout. At this point, I’m sure that most of you are happy with the design that you are working with but sometimes its a good idea to try out different looks to reinforce what is (or what is not) working for you. Then, we’ll spend a little more time with the floating remote to help speed up your editing.
Change the Layout. It’s easy to preview your work (the content of your portfolio) in any of Portfolio’s five different Layouts. When you switch from one layout to another, a separate version of your Portfolio will be saved. Only the contents of your Portfolio site will be carried between the layouts. This enables you to modify the styles within each layout independently of one another. And, at any point, you can return to the current version of any layout or, reset any of the layouts to their default settings.
Click the Switch Layouts icon in the left margin of the Portfolio editor.
I started creating my Portfolio site using the Sawdust layout, so I’ll choose Matthias to see the difference. (Sorry, a little update here – my options are different because I have previously gone through all of the layouts.) If you haven’t selected the Layout before, you should choose to “Use this Layout”. If you had previously selected the layout, chose “Use original layout” to start with the default Matthias layout, or choose “Use customized version” if you had previously selected and modified the layout and want to use the modified version as your starting point.
I like the overall look, especially the way that rolling over the project covers displays their name and year on white. (FYI – the fourth project’s cover is a single JPEG file that displays two images. That’s why you see two images.)
Click the Switch layouts icon in the left margin and try Lina. I still prefer Sawdust for my Portfolio.
Returning to your modified layout. If and when you decide to return to the layout that you originally selected and then modified over the past eight days, IT IS VERY IMPORTANT that you choose to “Use your customized version” when returning to your layout. Selecting the customized version will apply all of the modified attributes and styles (such as text styles in the navigation area as well as projects and pages) that you applied during the previous days of the challenge. WARNING: If you select Use Original Layout, Portfolio will reset all customized attributes and styles setting that you had previously applied.
Using the Floating Remote. Now that you’ve gotten more comfortable working with Portfolio’s editor, I want to point out that using the floating remote can often be a quicker way to edit the contents or attributes of your site. You’ve probably noticed by now that depending on what part of the layout is being edited, the contents of the floating remote will display different options. More often than not, I find this to be a faster way to navigate and make changes (similar to using the context sensitive menus or keyboard shortcuts in Photoshop). Plus, I really like the way that the floating remote highlights the area associated with the option (by adding a diagonal stripe) so that you know what you’re going to be editing if you select that option.
Here are a few options that you might not have run across thus far. When you are on the main page of your portfolio, you can use the floating remote set to Customize to modify the:
- Page Background – add a background image to the landing page (use Global Background to apply a background to all pages.
- Website Container – customize the website container and layout options (including the position of the navigation).
- Project Covers – modify number of columns, gutters, and spacing.
- Logo – quickly change the site title and add site caption if desired.
- Navigation – access and change nav styles and spacing.
- Footer – customize text style and margins, width of footer information and social media icons.
- Global Background – add a background image to your site.
Note: Some of these options differ depending on the selected layout.
Click the Basic option to change the colors schemes and default font used throughout the site.
When you click on a project in the navigation area, or are editing the content of a page, other options specific to that task appear in the floating remote enabling you to modify:
- Edit Info – edits the information about the projects such as the title, date, description, custom field, and creative fields.
- Edit project content – displays additional options including uploading files, adding images from Lightroom or Creative Cloud, adding text, and embedding media. When you finish changing the contents of the project, choose Update project to apply the changes.
- Page Background – adds a background image to the landing page (use Global Background to apply a background to all pages.
- Project Container – modify the margins and spacing for the project.
- Project Header – change the style and content of the project container, title, creative fields, custom field, and project date.
- Other Projects – enabling this option allows you to control how many other projects are displayed at the bottom of the project.
- Back to Top – customize the footer area of the site.
At first all of the customizable options can be overwhelming, but remember, you don’t have to customize any of the layout styles or other default settings. All you need to do is add your content. Then, as you get more familiar with the interface, or when you decide that you want to customize any aspect of your Portfolio site, you can.
Excellent! That’s all that we need to cover for today. Tomorrow we’ll master the advanced settings for security, metadata etc. Have a great night.