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.
Ce sunt 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.
Pentru a începe lucrul la primul tău hero header PBS, urmează pașii rapizi de mai jos:
Pasul 1: Inserează coloana și ajustează lățimea rândului
Click 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.
Under 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?
Normal – Background, text and other elements are contained within the bounds of your current theme’s row width
Full-Width – Background, text and other elements fill the entire width of your browser window
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.
Pasul 2: Ajustează marginea pentru a crea spațiu alb
Increase 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.
Pasul 3: Adaugă fundal cu suprapuneri de text și elemente
To 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.
Tip #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.
Type 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.
Sfatul #2: Pentru elementele de branding, ia în considerare utilizarea unui logo alb sau negru, astfel încât să nu intre în conflict cu o imagine de fundal colorată.
You can also add buttons by clicking on Button below the Insert Content tab.
Nu uita să îți salvezi munca și totul este gata!
Felicitări pentru crearea primului tău hero header cu PBS! În cazul în care nu ai reușit, nu trebuie să-ți faci griji; pornirea de la zero este probabil mai ușoară cu PBS, așa că nu ar trebui să fie o problemă prea mare.
Spor la crearea site-ului!