Managing the Hero Area

The Hero Area sec­tion is the first thing your vis­i­tors see, mak­ing it a great spot to get them acquaint­ed with your catchy con­tent. Con­trolled by a smooth par­al­lax scrolling and fea­tur­ing a fullscreen back­ground image or video, this is the per­fect place to make a great first impres­sion.

With so many pos­si­bil­i­ties at your fin­ger­tips, here are just a few use-cas­es for the Hero Area cov­er:

  • use it as the Page Title with a short and elo­quent descrip­tion (exam­ple)
  • use it as a stand­alone page to dis­play your resume or an eye-can­dy slideshow (exam­ple)
  • add a back­ground video that tells a sto­ry (exam­ple)

Adding Content

We strived to offer a sim­ple yet flex­i­ble sys­tem to man­age the con­tent of the Hero Area. We lever­age the com­plete free­dom of the native Word­Press Edi­tor, so you can eas­i­ly cre­ate the lay­out that ful­ly rep­re­sents you.

When you first cre­ate a project, the default text will give you a good start on how to mix and match dif­fer­ent ele­ments — to see how oth­er ele­ments look, check out the Text Styles page from our demo.

*It is good to know that if you want to dis­play the page title you can do it through the [page title] short­code.

Hero Content Alignment

Con­sid­er­ing the back­ground image a focal point, you can quick­ly align the con­tent using the arrow con­trols below the edi­tor, in order to make them both more vis­i­ble (see a visu­al expla­na­tion).

*Pro Tip: When pre­view­ing the page, press the Right Arrow key once, and after that you will be able to live pre­view the place­ment of the con­tent using the Arrow Keys. (see demon­stra­tion)

Adding a Background Image

On the right side­bar, the Hero Area » Back­ground sec­tion is used to con­fig­ure the cov­er back­ground of your Hero Area.

Pile Hero Area Background

After upload­ing an image or video you can cor­rect­ly con­trol its trans­paren­cy using the Opac­i­ty option. To ensure high con­trast for your over­lay text, you just need to reduce the opac­i­ty to 50%.

In case you pre­fer a plain col­or back­ground, skip upload­ing any images, and just pick a back­ground col­or.

*Note that the image from the “Fea­tured Image” sec­tion is used only as a thumb­nail on the Port­fo­lio archive grid, not as a hero back­ground.

Adding a Background Video

Anoth­er great thing is that you can upload a self-host­ed video to cre­ate a loop­ing visu­al ele­ment behind your con­tent.

Adding a Slideshow

If you’re a slideshow fan, you can upload mul­ti­ple images and videos to cre­ate great one. The hero con­tent will always be shown on the first slide only. 

Removing the Hero Area

You can start with the page con­tent right from the top. To hide the Hero Area sec­tion, emp­ty the hero con­tent area and any items from the Hero Area » Back­ground.

This article applies to Fargo, Noah, Osteria, and Pile as they share the same underlying structure.

Updated on October 27, 2017

Was this article helpful?