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.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.