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.
Apa itu Hero Header?
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.
Untuk mulai membuat hero header PBS pertama Anda, ikuti langkah-langkah cepat di bawah ini:
Langkah 1: Masukkan Kolom dan sesuaikan Lebar Baris
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.
Langkah 2: Sesuaikan margin untuk membuat Whitespace
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.
Langkah 3: Tambahkan latar belakang dengan teks dan hamparan elemen
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.
Tip #2: Untuk elemen merek, pertimbangkan untuk menggunakan logo berwarna putih atau hitam agar tidak bertabrakan dengan gambar latar belakang yang penuh warna.
You can also add buttons by clicking on Button below the Insert Content tab.
Jangan lupa untuk menyimpan pekerjaan Anda dan Anda siap berangkat!
Selamat telah membuat hero header pertama Anda dengan PBS! Namun jika belum berhasil, jangan khawatir; memulai dari awal bisa dibilang lebih mudah dengan PBS, jadi seharusnya tidak terlalu merepotkan.
Selamat membangun situs web!