Friday, March 27, 2020
3 Killer WordPress Portfolio Tweaks to Make Your Site Awesome
Plenty of professionals flock to WordPress due to its low learning curve and ample set of features. Its the perfect solution forà displaying your professional achievements ââ¬â that is, if you know how to use it. If youre not quite sure where to begin, lets talk about some killer WordPress portfolio tweaks!A great portfolio should meet three simple criteriaà ââ¬â it should put the focus on your work, introduce yourself to prospective clients, and remain simple to navigate. Fortunately, all three are easy to achieve when using WordPress.In this post, weve selected three live examples of stunning portfolios, and hereà well teach you how to replicate some of their design tricks. Lets dive in and look through these WordPress portfolio tweaks together:3 Killer WordPress Portfolio TweaksA.H.A. DesignA.H.A. Design is a London-based design company focusing on architecture, product design, and web design. Although we cant personally vouch for the quality of their work, their por tfolio caught our eye thanks to its unique style.What makes this portfolio stand out?A clean, uncluttered design.The subtle highlighting of the Shopà menu item.The use of circles throughout the entire site to highlight A.H.A. Designs past work.Lets elaborate a bit further on that last point. The first thing youll see on theà main page is a giant circle that showcasesà previous worksà ââ¬â the rest of the portfolio appears below as big circle blurbs, including simple hover animations.Another aspect that makes this design choice stand out is the monochromatic color scheme throughout the siteà ââ¬â the portfolio pieces are the only elements thatà have colors. This technique adheres to our rule about keeping the focus on your work. In fact, we like it so much well try to pull off a similar effect using our Zerif Pro theme as an example.WordPress Portfolio Tweaks #1: Use blurbs to showcase your workThe Zerif Pro theme enables you to replicate the effect weve just disc ussed using its Our Focusà widgets, as seen below in an example taken from theà live demo:After installing and activating the theme, we went into the live Customizer (check out this tutorial if youre rusty on how to use it) and modified the Our Focus widgets to display some example websites. To achieve this, we added some descriptive headers, removed theà four originalà widgets, and replaced them with some of our own:Notice the colored borders on each example? This is a simple hover animation coded into the Our Focus widgets by default!SocioDesignSocioDesign is another London-based design agency whose portfolio site piqued our attention due to its unique style. Lets review our favorite parts.What makes this portfolio stand out?A minimalistic design featuring eye-catching images of previous SocioDesignà works.Their simple layout, which keeps navigation easy.The use of an asymmetrical grid to display part of a portfolio on the homepage.WordPress Portfolio Tweaks #2: Use an a symmetrical grid system to make your work stand outImage grids are a rather conventional design element these days ââ¬â theyre efficient, but they can also get a bit monotonous. To change it up, designers sometimes break the mold a littleà by assigning different sizes to some of the images, such as the exampleà from the SocioDesign homepage (visible above).This serves two purposes ââ¬â it breaks the monotony of a regular grid, and also establishes a visual hierarchy. This means we automatically assign more importance to the largest section of the grid. If you want to create a portfolio on WordPress, this technique can help to guide attention towards the projects youre most proud of. We can replicate this effect using the Robo Gallery plugin: Image Gallery by Robo ââ¬â Responsive Photo Gallery Author(s): RoboSoftCurrent Version: 2.8.26Last Updated: August 26, 2019robo-gallery.2.8.26.zip 88%Ratings 1,036,554Downloads WP 3.3+Requires After activating the plugin, this instructional video on the developersà official YouTube channelà will guide you through the process of creating custom (asymmetrical) layouts. Once complete, you can insert your new gallery onto any page by utilizingà its corresponding shortcode.You can also insert galleries byà using the Add Robo Gallery button located above the WordPress editor. This enables you to select from all of the available options for creating your gallery, and will also add the shortcode for you:If you followed the custom layout tutorial we linked to above, the final result should look something like this (albeit with different images, of course):MethodFinally, we come toà Method. Theyreà a creative agency with an eclectic portfolio thats impossible to ignore. Lets check out its highlights below.What makes this portfolio stand out?The main header and the section below it on the homepage make great use of the CSS transform property to achieve some excellent effects.The header alsoà meld s with the navigation bar thanks to its simple color scheme to make a strong first impression.There are links to multiple case studies included on the first page.Theres a strong call to action at the bottom of the homepage to close the deal.WordPress Portfolio Tweaks #3: Use a simple color scheme and a full-width header to make a strong first impressionOur favorite aspect of the Method portfolio is the animated full-width header. Learning how to use the transform property to achieve similar effects is a complex subject, so well stick to creating a simple color scheme and implementing a full-width header using the Zerif Pro theme again.The Zerif Pro default template includes a full-width header section that we can use. Create a new page, select the default template from the Page Attributesà meta box, save the changes, thenà go into the live Customizer. Once here, choose the Big title section and customize its colors until they matchà your main menu:Now we have a clean ââ¬â albeit playful ââ¬â full-width header thatà shares a color palette with our menu, keeping things looking uncluttered.à Consider using a variation of this simple style the next time youre performing some WordPress portfolio tweaks!ConclusionAlong with a suitable theme, there are three basic criteriaà forà creating a portfolio on WordPress ââ¬â it should focus on your work, introduce yourself, and offerà simple navigation. Get all three right, and youll be well ahead of your competition.Consider implementing one or more of these three simple techniques when you beginà to create a portfolio on WordPress, and youll be hearing back from new clients in no time at all:Use blurbs to showcase your work.Implement a grid system to display your past projects.Combine a full-width header with a simple color scheme to make a lasting first impression.What do you think about having your portfolio built on WordPress? Do you have a portfolio of your own to share? Let us know in the comments section below.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.