061716_PBS_Jihan_How to Create Basic Hero Headers_Done

When your dream website finally becomes a reality, the first thing you want your audience to know is what your site’s all about. The trick to reel them in is to give them a good but quick summary of your site’s content – and the easiest way to do that is by creating a Hero Header for your page.

What are Hero Headers?

The purpose of the Hero Header is to visually communicate with your target audience in the fastest and most efficient way possible. You need to grab their attention quickly, in a way that it says: “Hey, this is my website, and here are the reasons it may be worth your time.”

Typically, hero headers take up most of the space on the page, usually with large text and an equally large background image in order to give your readers a quick but firm-enough grasp as to what your website can offer them.

To get started on your first ever PBS hero header, follow the quick steps below:

Step 1: Insert Column and adjust Row Width

061716_PBS_Jihan_How-to-Create-Basic-Hero-HeadersClick 1 Column below the Insert Content tab on the inspector (that thing on the left/sidebar). Make sure your caret (the blinking cursor on the text box) is inside the text box.

061716_PBS_Jihan_How to Create Basic Hero Headers_Step-1-b_Revised-1Under the Row Properties tab, you may change the background color in order to use it as a guide for the next steps. Change Row Width from Normal to Full-Width: Retained Content Width using the toggle button shown above.

What’s the difference between Normal, Full-Width
and Full-Width: Retained Content Width?

Row Width-Normal

Normal – Background, text and other elements are contained within the bounds of your current theme’s row width

Row Width-Full-Width

Full-Width – Background, text and other elements fill the entire width of your browser window

Row Width-Full-Width Retain

Full Width: Retained Content Width – Only the background fills the entire width of your browser window. Text and other elements are contained within the bounds of your current theme’s row width

In this layout, Full Width: Retained Content Width is used because the text that will be applied is centered; not full-width.

Step 2: Adjust margin to create Whitespace

061716_PBS_Jihan_How to Create Basic Hero Headers_Step-2-revisedIncrease the top and bottom margin by hovering the cursor on the arrow pointing to the margin you want to adjust. When the cursor turns into a double-headed arrow, click and drag down to your desired margin height. Its important to put Whitespace (also called Negative Space) between elements in a composition to create flow and help draw focus to the content on the page.

Step 3: Add background with text and element overlays

061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-aTo add a background image with text and element overlays, simply click the Background Image icon under the Row Properties tab, upload your desired background image, and select to apply.

061716_PBS_Jihan_How to Create Basic Hero HeadersTip #1: For Premium users, using the Background Image Tint option, helps to provide more contrast for text, buttons or other elements. You can select a tint color and adjust its value by clicking on the Background Color icon. Both icons can be found under Background on the Row Properties tab.

061716_PBS_Jihan_How-to-Create-Basic-Hero-Headers_Step-3-cType in the message for your header. See Text Formatting tab to adjust the style. Choose typefaces that are easy to read and goes well with the background image. Remember to show contrast from the background image.

Tip #2: For branding elements, consider use a white or black logo so it does not clash with a colorful background image.

061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-dYou can also add buttons by clicking on Button below the Insert Content tab.

Don’f forget to save your work and you’re all set!

Congratulations on making your first hero header with PBS! In case you don’t though, no need to fret; starting from scratch is arguably easier with PBS, so it shouldn’t be that much trouble.

Happy website building!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.