Hero Image Widget

What is a Hero Image? 

A Hero Image is the main big photo typically across the top of a page. The Hero Image is top real estate on your site because it is the first person a user sees when they come to your site. It is already a great area for marketing as you can change text and include a call to action (button) to take users into the site or inform them of important happenings. 

Download the PDF Version

Want to save this information in your files? Not a problem! Download the PDF by clicking the button below.

How to Add a Hero Image:

1: At the very top of the page, press the main hamburger button and select, “add new widget” 


2: In the Widget directory—find “ATLAS- Hero Image”, click on it, and then press the green select button in the lower right of the window. 


3: In the window that appears, you will need three different size photos already cropped to their accurate sizes. Typically, the size is below. However, you should double check with the current Hero Images on your site to confirm what they are as it does change from site to site:

Small Mobile Size Screen (Square -640X640 px)

Medium Screen (3:1 – 1024X342 px)

Large Screen (3:1 – 1920X640 px)

4: After adding photos, next you will see “Header Text” and “Hero Text”.

Header Text: This will give you big bold text across your Hero Image.

Hero Text: This will give you small paragraph text across your Hero Image. 

NOTE: This text does not appear on the mobile version. Be sure to include any important   information in the Header Text. 

 5: Next you will see, Number of buttons. Switch this to zero if no buttons are wanted. If you want to utilize buttons, you have the option of adding Button Text, URL & style the button. You can have up to 2 buttons that will appear side by side. 

6: Last, make sure the Widget container has selected “ATLAS – Hero Image”.

7: Push Save & Close in the bottom right!