I just started using Canva, and it’s awesome! There are plenty of stock images to choose from, ways to edit them with text, or you can upload your own photos to work with.
#HOW TO CLONE HERO LOOK BETTER FREE#
Not everyone can afford to take their own photos or design infographics-luckily, you don’t have to! There are tons of websites that offer free (or very inexpensive) stock photos to slice and dice into your own hero image. You won’t know what works best with your specific audience until you test! Where to Find Hero Images It surprised most of us-check out that high-quality photograph with the adorable kid in Homepage A! This is just one example of many, many tests that we run. We were wrong, though! The homepage hero image test above ran for 15 days, with Homepage B showing a stronger conversion rate. Its high-quality imagery paired with simple text and a call to action.Ī while back, we tested a version of our home page that featured a hero image we dubbed “Rocket Kid.” We loved the idea of this new hero image and hoped it would have an immediate impact. Hero banners are really popular-like the one below from the Dollar Shave Club. That’s insane! Ensuring that caption is accurate, targeted and matches the hero image is SO important! Keep in mind that captions under images are read, on average, 300% more than body copy. The image can also advertise a sale or slogan-but keep the text to a minimum! A picture is worth 1000 words, so make sure any additional words are straight to the point. Selling specialty umbrellas? A nice picture of umbrellas keeping people dry on a rainy day would be great! But probably not a sunny beach with an umbrella-cocktail. It may not need to be said, but your hero image should accurately represent what you intend to sell. If you are concerned about your page’s speed, GTmetrix is a good place to start! Demonstrate & Appeal Leverage page caching as much as possible.JPG) to optimize quality without sacrificing load times Experiment with different image file types (PNG vs.
![how to clone hero look better how to clone hero look better](https://i.imgur.com/rqhFqzJ.png)
Compress the image in Photoshop, an online compressing tool or even in Paint.Resize the image yourself (as opposed to having the browser resize it).
![how to clone hero look better how to clone hero look better](https://pbs.twimg.com/ext_tw_video_thumb/1166462261231333377/pu/img/lhlMbGuCZjauIWxx.jpg)
Google research revealed that a loading time increase from 0.4 to 0.9 seconds can reduce traffic by 20%. Something to keep in mind with large, high-quality images: loading times. Note the blur where I placed the white text on the image.
#HOW TO CLONE HERO LOOK BETTER CODE#
If you want your hero to take up the entire width of the page, ensure that your image is 100% of the container tag through VW or VH ( more code knowledge here).Ĭustomize your stock images (more on this below)! As a general rule of thumb, make sure the background isn’t too loud where you are placing text and look for a color contrast. In terms of actual pixel width and height, the size of your image depends on exactly what you are looking to portray. To avoid the fuzz? Feel free to resize your images DOWN but never UP. This may not need to be said, but make sure it looks sharp! Computer and phone screens are so big and crisp now, your customer will absolutely be able to tell if you have a fuzzy, low-resolution hero image. It’s a blind date-appearances are everything! High-Quality Images The hero image is usually your first “real” impression someone was compelled enough to open the email or webpage to see what you have to offer. A great sale could fall flat because the image and copy did not explain the discount or sale selection. When I was working in email marketing, it was all about the hero image-the main image on the creative that would (hopefully) get the most clicks. And thus, the marvel that is a Hero Image was born and thrives. Retail websites began to move away from displaying category pages as their home content and toward a flashier gateway to the real content. With these progressions, websites like Facebook, Twitter and WordPress implemented featured images at the top of pages. Now, talk is about landing page experiences this has come way beyond utility and is now diving into flow and style. As websites have progressed from HTML to JavaScript, Flash, and CSS, web design has utilized these tools to make websites more visual. Heroes come in all different shapes and sizes, from large headers to full-screen banners to featured content. Hero images have become immensely popular in web design recently because they are flashy, pretty and work to keep visitors engaged.
![how to clone hero look better how to clone hero look better](https://i.redd.it/wjyff6x4x5i11.jpg)
It is up to you to choose a high-quality photograph or graphic to represent the theme of your page as a whole. The goal of the hero image is to immediately draw visitors in and show them what your site and your content are all about. But the heroes we need.īut for real – a hero image is the first, main photo or graphic that you see at the top of a webpage or email.