Apakah Anda ingin meningkatkan posting blog Anda? Divi dengan menambahkan bagian Pahlawan ke dalamnya?
Bagian Hero layar penuh terlihat bagus di halaman web mana pun, tetapi sangat bagus di postingan blog.
Meskipun gambar yang ditampilkan adalah layar penuh, ada banyak pilihan desain untuk menempatkan judul dan teks meta. Ini mudah dilakukan dengan Pembuat Tema Divi .
Pada artikel ini, kita akan melihat beberapa cara untuk menambahkan bagian Hero layar penuh ke template postingan blog Anda. Divi.
Mari kita mulai.
penelitian
Berikut adalah pratinjau dari apa yang akan kita rancang dalam tutorial ini.
Baca juga: Divi: Cara menggunakan "Gradient Builder" untuk mempercantik gambar Anda
Bagian pahlawan dengan modul versi Post Title Desktop
Bagian pahlawan dengan modul versi seluler Post Title
Tata letak bagian Hero alternatif dengan modul versi desktop Post Title
Unduh DIVI sekarang!!!
Tata letak bagian Hero alternatif dengan modul Post Title seluler
Bagian pahlawan dengan metadata versi Desktop
Bagian pahlawan dengan metadata versi seluler
Unduh DIVI sekarang!!!
Templat Posting Blog untuk Bagian Pahlawan Layar Penuh Anda
Anda dapat membuat template posting blog di Divi Pembuat Tema dari awal atau unduh templat dari blog Tema Elegan. Untuk menemukannya, cari di blog “template posting blog gratis”. Jika Anda mengunduh templat, pastikan untuk mengekstraknya.
Untuk contoh kita, kita akan menggunakan the Template Posting Blog gratis untuk Paket Tata Letak Perancang Busana Divi . Kami juga menggunakan paket tata letak gratis Perancang Busana Header dan Footer .
Unduh atau buat template posting blog Anda untuk bagian Pahlawan layar penuh Anda
Anda dapat mengunduh template posting blog Anda atau membuatnya dari awal. Kami akan mengunggahnya, tetapi proses pembuatan Bagian Pahlawan layar penuh tetap sama.
Lihat juga: Divi: Cara Menggunakan Masker dan Pola Latar Belakang untuk Bagian Pahlawan
Metode 1: Modul Judul Posting Layar Penuh
Metode ini akan menggunakan modul PostTitle . Ini adalah pilihan yang baik jika Anda ingin menampilkan semua informasi secara bersamaan. Setelah Anda memiliki template, pilih ikon edit untuk membukanya.
Template yang kami unggah memiliki bagian dengan gambar unggulan. Kami akan menghapus bagian ini dan menambahkan a bagian lebar penuh di tempatnya.
Sélectionnez Judul Posting Lebar Penuh dalam daftar modul lebar penuh.
Semua item dipilih secara default. Biarkan mereka diaktifkan. Gulir ke Penempatan Gambar Unggulan dan pilih Di Atas Judul.
- Penempatan Gambar Unggulan: Di Atas Judul
Gulir ke Warna latar belakang dan atur warnanya ke #fff9f2
- Latar belakang: #fff9f2
Teks judul
Pilih tab Rancangan. Untuk teks judul, pertahankan H1 dan pilih Playfair Display. Atur ke Left Justified dan pilih #34332e untuk warnanya.
- Judul:
- Tingkat judul: H1
- Font: Tampilan Playfair
- Perataan Teks: rata kiri
- Warna Teks: #34332e
Pour la ukuran teks , atur versi desktop menjadi 65px, versi seluler menjadi 42px, dan tinggi baris menjadi 1,2em.
- Ukuran Teks Judul (Desktop): 65px (Desktop), 42px (Ponsel)
- Judul Baris Tinggi: 1,2 em
teks meta
Gulir ke Teks Meta. Pilih Montserrat untuk font dan atur ke media, huruf besar, perataan kanan untuk versi desktop dan perataan kiri untuk versi seluler. Pilih #7b7975 untuk warna.
- MetaFont:
- Font: Montserrat
- Berat: Sedang
- Gaya: TT
- Teks Meta:
- Perataan: kanan (Desktop), kiri (Telepon)
- Warna: #7b7975
Mengatur ukuran huruf untuk versi desktop 14 px, untuk versi mobile 10 px, spasi huruf 1 px dan tinggi baris 1,6 em. Tutup pengaturan Anda dan simpan template Anda.
- Teks Meta:
- Ukuran (Desktop): 14px
- Ukuran (Telepon): 10px
- Spasi Huruf: 1px
- Tinggi Garis: 1,6 em
Judul pada gambar latar belakang
Jika Anda memutuskan ingin judul muncul pada gambar unggulan, gunakan pengaturan desain yang sama dan kembali ke tab Konten.
Sélectionnez Gambar Judul/Latar Belakang Meta untuk Penempatan Gambar Unggulan.
- Penempatan Gambar Unggulan: Gambar Latar Judul/Meta
Gulir ke Latar Belakang dan pilih Gradien Latar Belakang. Atur warna kiri ke #fff9f2, warna kanan ke rgba(255,255,255,0), arah ke 90 derajat, posisi awal ke 30% dan pilih ya untuk menempatkan gradien di atas gambar latar belakang. Tutup dan simpan pengaturan Anda.
- Gradien Berhenti:
- 30%: #fff9f2
- 100%: rgba (255,255,255,0)
- Arah Gradien: 90 derajat
- Gradien Persegi Di Atas Gambar Latar Belakang : YA
Metode 2: Bagian Pahlawan Layar Penuh dengan Metadata
Metode ini akan menggunakan modul Teks dengan konten dinamis untuk informasi. Ini adalah opsi yang bagus jika Anda ingin menampilkan semua item di tempat yang berbeda.
Pertama, unduh template dan hapus bagian pertama. Kami akan membuat ulang modul dan pengaturannya di kolom kiri, tetapi kami akan menelusurinya sehingga Anda dapat mengonfigurasinya.
Pengaturan Bagian Pahlawan Layar Penuh dengan Metadata
Buka pengaturan dari bagian dan gulir ke Gambar Latar. Pilih Gradien Latar Belakang dan ubah pengaturannya sebagai berikut:
- Gradien Berhenti:
- 30%: #fff9f2
- 100%: rgba (255,255,255,0)
- Arah Gradien: 90 derajat
- Gradien Persegi Di Atas Gambar Latar Belakang : YA
Sélectionnez Gambar Latar dan pilih opsi Gunakan Konten Dinamis.
Pilih Gambar Pilihan dalam opsi.
Pilih tab Mendesaindan gulir ke Perekat. Tambahkan 100vh ke ketinggian minimum. Tutup pengaturan bagian.
- Tinggi Min: 100vh
Pengaturan Bagian Pahlawan Layar Penuh dengan Metadata
Selanjutnya, tambahkan baris kolom ganda ke bagian tersebut.
Tambah sebuah Modul teks di kolom kanan.
Untuknya isi, pilih Gunakan Konten Dinamis.
Pilih Judul Postingan/Arsip dalam daftar opsi.
- Konten Dinamis: Judul Posting/Arsip
Pergi ke tab Desain.
- Menuju:
- Teks: H1
- Font: Tampilan Playfair
- Perataan Teks: rata kiri
- Warna Teks: #34332e
Untuk ukuran teks , atur untuk versi desktop menjadi 65px, untuk versi seluler menjadi 42px dan tinggi baris menjadi 1,2em.
- Menuju:
- Ukuran Teks: 65px(Desktop), 42px(Telepon)
- Tinggi Garis: 1,2 em
Gulir ke Jarak dan masukkan 50% untuk top padding. Tutup Pengaturan.
- Padding: 50% (Atas)
Anda juga dapat membaca artikel ini di: Cara Membuat Bagian Pahlawan dengan Modul Header Fullwidth Divi
Bagian pahlawan dengan kategori metadata
Tambahkan bagian baru reguler di bawah bagian Pahlawan.
Buka pengaturannya dan atur couleur latar belakang #fff9f2. Tutup Pengaturan.
- Warna Latar Belakang: #fff9f2
Kemudian tambahkan baris dari 4 kolom ke bagian baru.
Pahlawan layar penuh dengan teks kategori metadata
Tambah sebuah Modul teks di kolom kiri.
Buka pengaturan modul dan pilih Gunakan Konten Dinamis untuk tubuh teks.
Sélectionnez Kategori Sebelumnya dalam daftar
- Konten Dinamis: Kategori Posting
Pilih tab Mendesain dan gulir ke bawah ke Teks Tajuk. Pilih H4. Pilih Tampilan Playfair untuk font dan atur ke medium, huruf besar, perataan kanan untuk versi desktop dan perataan kiri untuk versi ponsel. Pilih #7b7975 untuk warna.
- Menuju:
- Tampilan Teks
- Font: Tampilan Playfair
- Berat Font: Sedang
- Gaya: TT
- Perataan Teks: Tengah
- Warna Teks: #7b7975
Atur ukuran font untuk versi desktop menjadi 14 px, untuk versi seluler menjadi 10 px, spasi huruf menjadi 1 px dan tinggi baris menjadi 1,6 em. Tutup pengaturan Anda dan simpan template Anda.
- Judul 4:
- Ukuran (Desktop): 14px
- Ukuran (Telepon): 10px
- Spasi Huruf: 1px
- Tinggi Garis: 1,6 em
Gulir ke Jarak dan tambahkan 0px ke margin bawah. Tutup Pengaturan.
- Margin (Bawah): 0px
Bagian Pahlawan layar penuh dengan metadata Teks Meta
Selanjutnya, salin modul Kategori dan seret ke kolom berikutnya. Setiap modul Meta memiliki pengaturan yang sama. Kami akan menunjukkan cara membuat modul pertama dan kemudian menyalinnya dua kali untuk membuat modul lainnya.
Auteur
Buka pengaturan dan hapus isi dinamis.
Klik Gunakan Konten Dinamis dan pilih Penulis Posting.
- Konten Dinamis: Penulis Posting
Di tab Mendesain, Ubah pengaturan berikut.
- Judul 4:
- Font: Montserrat
- Berat Font: Sedang
- Gaya: TT
- Perataan Teks (Desktop): Tengah
- Perataan Teks (Telepon): Kiri
- Warna: #7b7975
Parameter dari ukuran huruf termasuk:
- Ukuran Teks: 14px (Desktop), 10px (Telepon)
- Spasi Huruf: 1px
- Tinggi Garis: 1,6 em
La margin bawah harus memiliki 0px.
- Margin (Bawah): 0px
Tanggal
salinan modul Penulis dan seret ke kolom berikutnya.
Hapus isi dinamis saat ini, pilih Gunakan Konten Dinamis dan pilih Tanggal Posting Publikasi. Tutup Pengaturan.
- Konten Dinamis: Tanggal Pasca Publikasi
komentar
Anyway, salinan modul Post Publish Date dan seret ke kolom terakhir.
Seperti modul lainnya, hapus konten dinamis dan pilih Gunakan Konten Dinamis .
Pilih Jumlah Komentar Pos dari pilihan Anda.
- Konten Dinamis: Hitung Posting Komentar
Kali ini tambahkan spasi dan kata Komentar di kolom Setelah . Tutup modal kecil lalu tutup pengaturan. Simpan pekerjaan Anda.
- Setelah: Komentar
Baca juga: Divi: Cara menampilkan modul Fullwidth Header di layar penuh
Résultats
Bagian pahlawan dengan modul versi Post Title Desktop
Bagian pahlawan dengan modul versi seluler Post Title
Tata letak bagian Hero alternatif dengan modul versi desktop Post Title
Tata letak bagian Hero alternatif dengan modul Post Title seluler
Bagian pahlawan dengan metadata versi Desktop
Bagian pahlawan dengan metadata versi seluler
Unduh DIVI sekarang!!!
Kesimpulan
Itu saja itu saja! Ini adalah pandangan kami tentang cara menambahkan bagian Hero layar penuh ke template posting blog Anda. Divi.
Modul Divi dan Pembuat Tema menawarkan beberapa opsi untuk membuat bagian Pahlawan layar penuh. Semua metode bekerja dengan sangat baik dan semuanya memiliki kelebihannya masing-masing.
Dengan menggunakan metode ini, Anda dapat menambahkan bagian Hero layar penuh ke template posting blog Divi mana pun.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Jangan ragu untuk juga berkonsultasi dengan panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
