one of the best multipurpose/portfolio premium wordpress themes ever Werkstatt - Creative Portfolio Theme THEME LIVE DEMO THEME PLAYGROUND Review: Werkstatt - Creative MultiPurpose and Portfolio Theme Portfolio Website of Zhou li, designer currently based in Beijing, China. This is an awesome treat to see such a prolific, but simple site designed and engineered from our friend from the east. Makes since that his design is so west, because most of his clients are. We love it. Not WordPress, but it was decided to make this site the candidate to inaugurate our Copywork In Progress series of posts. Copyworks, in our context, are a case study and an exercise in cloning website elements, sections and/or complete pages. We do this to demonstrate that almost any website can be built with WordPress given the right theme, plugins, code – and yes, persistence. So what do you get? Well for starters you get step by step guides to how we used reverse engineered the targeted website and duplicated it in WordPress. What theme(s) and plugins were used. What methods and techniques were employed to match not only the design, but ins many cases interactions and animations of the original website. But you also get something, very, very special, access to the cloned website in your very own sandbox for yout to play around and learn how we did it. One more thing, Copyworks are cumulative, so expect updates from us and contributions made by the community on each project – hence “in progress”. ORIGINAL SITE COPYWORK SITE COPYWORK PLAYGROUND Notes and Observations theme_in_review Status Theme Developer Platform URL Werkstatt - Creative Portfolio Theme Fuel Themes WordPress http://themes.fuelthemes.net/?theme=werkstatt Rating Development Design Usability Creativity Content Tools of the Trade Werkstatt is packed with the usual accompaniment of plugins that are include in the best premium themes today. These plugins extend the the possibilities almost infinitely in regards to advance layouts, animations and design without the hassle of code. Werkstatt also includes a custom plugin to support theme specific custom posttypes. Theme Plugins Werkstatt - Creative Portfolio Theme WP Bakery Visual Composer - Page Builder WooCommerce Contact Form 7 Deconstruction Anatomy of A Well Designed and Engineered Website Now it is time to tear down this site and figure out how it ticks. We will do this through visual observations, Chrome Inspection Tool and a few assumptions. To best clone this site using WordPress, we need to determine how some of the more advance designs, animations and transitions were accomplished. Then we need to translate that in what WordPress can do with the right theme and accompaniment of plugins. Yes, the ultimate goal is to accomplish a 1:1 representation of the original site using WordPress, but we want to avoid coding as much as possible. Our intent is to use WordPress, a great theme, plugins, and great technique from stock elements – so that anyone can apply the same methods to their projects. So let’s get started. ORIGINAL SITE COPYWORK SITE COPYWORK PLAYGROUND EXTRAS COMMENTS Original Site Screenshots Highlights Nothing really special here. Most of the site’s elements and design fits current design trends. This will not be a real challenge to duplicate using a decent WordPress theme. The site contains elements that employ parallax, traditional logo and portfolio grid/hover effects. One interesting element we will attempt to clone is the glitch effect in the contact section at the the bottom of the site. Results A Near 1:1 Clone of Original Site Not bad for our first official Copywork. Most of the design was preserved including many of the transitions and animations. As mentioned before, Copyworks are cumulative, so we will be adding and updating this clone periodically to match and/or enhance some of the features from the original. Our plan also is to invite and highlight contributions from the community for each Copywork. Go ahead, take a look around. We’ve left some notes to let you know how certain features and elements were accomplished, including the theme, plugins and methods. You can always visit the original site, Copywork and even venture over to the playground admin area we’ve created for you to explore how we did it and make some changes too. So we used Werkstatt Portfolio, Multipurpose wordpress theme Fuel Themes. This theme had everything we needed straight out of the box including Visual Composer. A review on this theme is forthcoming. We matched typography somewhat with font weight, size and color. Only thing we did't do is the animated strike-through that occurs original site at page load. The irony is Werkstatt theme has same animation already enlisted for links. So we'll probably revisit this and add animation for strike-through leveraging the same code. There were so many ways too format text with Visual Composer elements, but WP text editor element was used to ensure responsiveness. Parallax effects can be complicated, but with Visual Composer (VC), it is very easy to accomplish even the most complex (with the right add-ons). The effect employed on the original site is uncommon unless hardcoded into the Wordpress theme by the developer. Fortunately, there was an VC add-on specifically designed to support layered parallax. See below. Near 1:1 match for everything including client logos. The theme included a client logo feature, but ended up using Visual Composer (VC) add-on to create a more flexible grid of images and still was able to maintain same hover over effects as the original site. The integrated client logo grid element was too limited with image size and column number support. It also reduced flexibility of row count usage in Visual Composer. To clone the portfolio section of the original site, we used the stock Visual Composer portfolio grid element from the theme. What made it interesting is on the original site, the developer used triple overlays on each image, one logo, one filter, and a hover overlay. We used Visual Composer's CSS override option to add the filter layer, however did not attempt to do the logo layer. Also used CSS to reposition the hover-over text title and categories along with the text size. So this part of the grid element got a little interesting on the original site. Of course it can be matched, but not with a little additional coding. Looks like the developer used multiple layers again, but no portfolio image, just text. Then he used a different color for the hover overlay. Fortunately the theme Werkstatt had this capability integrated directly into the Portfolio post type so changing the color hover overlay was very simple. We will revisit this by either adding a portfolio image of the text or duplicating the developers version exactly with custom code. Visual Composer makes this somewhat easy. End of the line. Almost - we applied the same parallax layered plugin that we did at the beginning. The Visual Composer add-on supports many advance parallax transitions and animations. So we were, again, able to apply the same effects in WordPress as the developer did in the original with no need for additional code. Like anything with cloning the original website, things could be duplicated many ways. The glitch effect in this section is no different. Ironically Werkstatt theme actually has this capability, but only full screen. it's hardcoded into the page and portfolio post types. We could have also used the background video option, but nope. We will duplicate this sometime soon.