Changing the Hero Section

In the website editor

18 Steps

Click on the hero section (green outline)

Click on the image icon

Double-click on the image you want to add

Click the mobile icon

Save if the image looks good on both mobile AND desktop. Publish to go live.

If the image isn't good enough, you can make 2 SEPARATE HERO SECTIONS - 1 for desktop and 1 for mobile. Click the duplicate icon (the 2 square boxes) when a green outline is highlighted.

*This can be tricky, and you may have to duplicate within the mobile view instead of the desktop view. You even may have to duplicate the menu to reach the green outline. Make sure to remove any duplicated elements you don't need.

You should now have a copy of the hero section. Click the top one.

Click on Advanced (on the right side)

Click on the mobile icon. This will hide it from mobile view.

Blue = live. Gray = Hidden

now click the 2nd hero image

Click on Advanced

Click on the computer icon. This will hide it from desktop view.

Click on mobile view.

Click on the hero image

Click on General

Click on image

Double-click on a new image just for mobile view.

Save your changes, or push Publish to go live.

Well done!

Create how-to guides like this in a snap. Get Tango now.