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.
Apakah itu Pengepala Hero?
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 bermula dengan pengepala hero PBS pertama anda, ikuti langkah pantas di bawah:
Langkah 1: Masukkan Lajur dan laraskan 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: Laraskan margin untuk mencipta Ruang Putih
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: Tambah latar belakang dengan tindihan teks dan 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 penjenamaan, pertimbangkan untuk menggunakan logo putih atau hitam supaya ia tidak bertembung dengan imej latar belakang yang berwarna-warni.
You can also add buttons by clicking on Button below the Insert Content tab.
Jangan lupa untuk menyimpan hasil kerja anda dan anda sudah selesai!
Tahniah kerana berjaya mencipta pengepala hero pertama anda dengan PBS! Namun sekiranya belum, tidak perlu bimbang; bermula dari awal boleh dikatakan lebih mudah dengan PBS, jadi ia tidak sepatutnya menjadi masalah yang besar.
Selamat membina laman web!