The DevTeam Alpha News Aggregation service has sourced the following article originally published on Elementor:
The Template Kit’s homepage uses a variety of design techniques to represent their brand messaging as well as the vibe of their brick and mortar business location.
The use of visual contrast on this page is very prevalent throughout the design elements. The most dominant, as we see it, is the black and white photograph juxtaposed with the colored, zoomed-in photograph that details the client’s facial expression and his hairstyling. This represents the combined vibe of an old-fashioned men’s barbershop with the modern, fashionable hairstyling that they provide.
When we built this template with Elementor, we simply used Blend Mode and CSS Filters when modifying our image upload. No need for Photoshop or other image editing software.
In addition, the color block style combination of royal blue (‘blue ribbon’/#003AF1, to be exact) with ‘dark gray/#B0B6B6, as well as the broken-grid layout both illustrate the barbershop’s style of traditional in parallel to modernity.
When you scroll down to the next section, you’ll see a row of flat icons with a color changing hover effect. This icon list is used as a visual representation of all the services offered by the salon.
If we had to guess, we’d assume that this information is one of the visitor’s key questions that he’s looking to have answered when browsing the site. He wants to know exactly what the business can provide him with and why he should choose them as a provider.
Keep in mind that these icons can easily be interchanged with other icons if you use the template for a different business-type. You can refer to our icon list widget to understand this technique in better detail. By the way, each icon file is in .SVG format. In practice, this means that the colors can be changed easily, which is especially helpful if you want to explore different color changing hover effects.
When you choose to insert the homepage template into your website, take note that this template is a ‘Page’, which you download from:
Editor > Open Library popup > Pages tab > scroll the page and find it or search for “Barbershop.”
Learn more about Elementor by visiting their website.