Hero image

Hero image

The powerful hero image

*What is a hero image? A large homepage image, which immediately catches the attention of your
visitors and establishes the look and feel of your company, webshop or store from the very first second.

What settings can you regulate for the hero image?

1. Activate the hero image

Boost your webshop with an ultimate hero image. The eyecatcher that we all need in our life! Use this option to set it ‘on’ or ‘off’.

2. Desktop: Upload your hero image.

Upload your image here. Dimensions: 1380 × 415 pixels.

*Tip: don’t use text in your image, when you’re using the theme’s design text tool (below)

3. ‘Super’ hero image

You can also turn your hero image into a ‘super’ hero image, that extends it upwards, super cool. If you use ‘super hero image, then change your hero image desktop upload: 1900 × 575 pixels.

4. Super hero light text function (handy!)

Do you have a superhero image that you are going to use. Then it may be that it is darker. Or: you make it darker yourself with our color overlay functionality (see below) Turn this option on! All texts such as the menu, usp’s, etc. Then become white! You can still determine your hero text colors yourself. But of course this is a nice bonus.

5. Mobile: Hero image upload.

Every banner used on desktop, has an option to upload the mobile version. Use it please! Optimize your banners regarding loading time and design. Dimensions: 355 × 415 pixels.

*DMWS does not offer training in this area. However if you need help, we also offer very attractive design packages.

6. Hero image Color overlay

Give your hero image a color overlay. Super fancy. This gives it a color effect, or just to make it more dark, so your text will be better visible.

*What we actually do, is put a color on top of (over) your banner image. So first first decide what color. The next option is the Opacity of the color. This gives your image an extra boost, darkness, whatever you need. Without using photoshop. :)

Hero image Color overlay transparency

This is the transparency of the Color overlay on your hero image. Choose between 100 – 0 %.

7. Hero image text position

Depending on your image: where do you want your title and your text? Left, right or in the centre of your hero image? Play around with this and try things out.

8. Hero image title

What’s the title of your hero image? For enter use

 

9. Mobile: Hero image title (*new)

A mobile device is a lot smaller than a desktop. Fit your title in the screen. Shorten it! You can also change the titles now for mobile and desktop.

10. Hero image title color

This is the color of your title in your hero image.

11. Hero image text

This is the text that comes under the title.

12. Mobile: Hero image text

Also here: A mobile device is a lot smaller than a desktop. Fit your title in the screen. Shorten it!

13. Hero image text color

This is the color of your text in your hero image.

14. Hero image button text

What is going to be the text in your button?

15. Hero image button color

This is the color of the button in the hero image.

16. Hero image links to URL

Where should this hero image link to? Copy and paste a URL.