Dapatkan Hosting Instan dengan Elementor dan Elementor Pro

dengan CDN, SSL dan cadangan.

Mulai hari ini

Cara Menambahkan Bagian Pahlawan Layar Penuh Ke Halaman Posting Blog Di Divi

Rifat Divi Tutorials Feb 4, 2022

Bagian pahlawan layar penuh terlihat fantastis di situs web mana pun, tetapi terlihat lebih menarik di artikel blog. Meskipun memiliki gambar fitur layar penuh, ada banyak kemungkinan desain di mana judul dan informasi meta mungkin terlihat luar biasa. Seluruh pemikiran sangat mudah dicapai dengan Divi Theme Builder. Pada artikel ini, kita akan melihat cara menggabungkan gambar fitur layar penuh ke dalam template posting blog Divi Anda.

Pratinjau Desain

Jadi kita akan membuat tiga modul desain berurutan yang berbeda. Mari kita lihat bagaimana penampilan mereka.

Pertama, bagaimana tampilan modul judul postingan layar penuh baik di desktop maupun seluler.

Lalu, bagaimana tampilan modul judul posting layar penuh dengan judul di atas latar belakang baik di desktop maupun seluler.

Terakhir, bagaimana tampilan pahlawan layar penuh dengan metadata baik di desktop maupun seluler.

Template Posting Blog Gratis

Ada banyak template posting blog gratis yang tersedia di toko template Divi. Anda dapat memilih salah satu dari mereka dan memberi mereka bentuk yang luar biasa untuk meningkatkan keindahan blog Anda. Untuk posting hari ini, saya akan menggunakan template gratis dari toko Divi yang disebut Template Posting Blog untuk Tata Letak Perancang Busana Divi. Bersamaan dengan itu, saya juga akan menggunakan Header And Footer untuk Tata Letak Perancang Busana Divi . Kedua template tersebut sepenuhnya gratis untuk digunakan.

Bagaimana cara mengunggah Template Divi?

Anda dapat mengunggah template posting blog yang ada atau membuatnya dari awal. Kami akan mengunggah satu, namun, teknik untuk membuat pahlawan layar penuh tetap sama.

  • Pergi ke Divi
  • Klik Ikon Portabilitas
  • Buka tab Impor
  • Pilih file JSON Anda
  • Klik untuk Mengimpor
  • Simpan Pengaturan

Prosedur Desain

Kita akan melihat beberapa metode desain untuk menghiasi bagian pahlawan layar penuh.

Buat Situs Web Luar Biasa

Dengan Elementor pembuat halaman gratis terbaik

Mulai sekarang

Metode 1: Judul Postingan Layar Penuh

Kami akan menggunakan Modul Judul Postingan. Jika Anda ingin menampilkan semua info sekaligus, ini adalah opsi yang bagus. Setelah Anda menemukan tata letak Anda, klik ikon edit untuk membukanya.

Template memiliki bagian gambar fitur yang dibuat sebelumnya. Kami akan menghapusnya dan menambahkan bagian lebar penuh baru.

Kami akan menambahkan judul posting lebar penuh ke bagian baru ini.

Ubah bagian gambar unggulan dan pertahankan semuanya tetap sama.

  • Penempatan Gambar Unggulan: Di Atas Judul

Atur warna latar belakang baru ke modul.

  • Warna: #fff9f2

Teks Judul

Sekarang dari tab desain. buat perubahan berikut untuk Teks Judul.

  • Font: Tampilan Playfair
  • Perataan: Rata Kiri
  • Warna: #34332e
  • Ukuran Teks: 65px untuk desktop, 42px untuk ponsel
  • Tinggi Garis: 1.2em

Teks Meta

Sekarang turun ke pengaturan teks meta dari tab desain dan buat perubahan berikut.

  • Font: Montserrat
  • Berat: Sedang
  • Gaya: Huruf Besar
  • Penjajaran Desktop: Kanan
  • Penjajaran Telepon: Kiri
  • Warna: #7b7975
  • Ukuran Teks: 14px untuk desktop, 10px untuk ponsel
  • Spasi Huruf: 1px
  • Tinggi Garis: 1.6em

Judul Gambar Latar Belakang

Sekarang karena tujuan kita adalah membawa judul di atas gambar unggulan, mari kembali ke tab konten dan ubah pengaturan berikut dari elemen dan latar belakang.

  • Penempatan Gambar Unggulan: Gambar Latar Belakang Judul/Meta
  • Warna Gradien Kiri: #fff9f2
  • Warna Gradien Kanan: rgba(255,255,255,0)
  • Arah Gradien: 90 derajat
  • Posisi Awal: 30%
  • Tempatkan Gradien Di Atas Gambar Latar Belakang: YA

Metode 2: Pahlawan Layar Penuh dengan Metadata

Sebagai informasi, teknik ini akan memanfaatkan Modul Teks dengan Konten Dinamis. Jika Anda ingin menampilkan semua elemen di tempat yang berbeda, ini adalah solusi yang fantastis. Untuk melanjutkan, unggah template dan hapus bagian pertama. Kami akan mereplikasi modul dan pengaturan di kolom kiri, tetapi kami akan memandu Anda melaluinya sehingga Anda dapat mengonfigurasinya.

Pengaturan Bagian

Buka pengaturan bagian yang ditandai dan buat pengaturan berikut.

  • Warna Gradien Kiri: #fff9f2
  • Warna Gradien Kanan: rgba(255,255,255,0)
  • Arah Gradien: 90 derajat
  • Posisi Awal: 30%
  • Tempatkan Gradien Di Atas Gambar Latar Belakang: YA

Sekarang pindah ke bagian gambar dan pilih opsi Konten Dinamis.

Pilih Featured Image  di opsi.

Pindah ke tab desain dan sesuaikan ketinggian minimum.

  • Tinggi Min: 100vh

Teks Judul

Sekarang tambahkan baris kolom ganda. Kemudian tambahkan modul teks ke kolom pertama.

Sekarang gunakan konten dinamis untuk modul ini.

  • Konten Dinamis: Judul Postingan/Arsip

Dari tab desain, ubah pengaturan berikut.

  • Font: Tampilan Playfair
  • Perataan: Rata Kiri
  • Warna: #34332e
  • Ukuran Teks: Desktop 65px dan Telepon 42px
  • Tinggi Garis: 1.2em

Buka pengaturan spasi dan ubah nilai berikut.

  • Padding Atas: 50%

Bagian Kategori Metadata

Sekarang tambahkan bagian reguler di bawah bagian pahlawan.

Sekarang tambahkan warna latar belakang ke bagian ini.

  • Warna Latar Belakang: #fff9f2

Tambahkan 4 baris kolom ke bagian baru.

Teks Kategori Metadata

Sekarang tambahkan modul teks ke kolom pertama dan tambahkan konten dinamis ke dalamnya.

  • Konten Dinamis: Kategori Posting

Sekarang pindah ke tab desain dan tambahkan perubahan berikut.

  • Teks Judul: H4
  • Font: Tampilan Playfair
  • Berat: Sedang
  • Gaya: Huruf Besar
  • Penjajaran: Pusat
  • Warna: #7b7975
  • Ukuran Teks: Desktop 14px Dan Telepon 10px
  • Spasi Huruf: 1px
  • Tinggi Garis: 1.6em

Pindah ke pengaturan spasi dan ubah nilai berikut.

  • Margin Bawah: 0px

Metadata Meta Teks

Kemudian, duplikat modul kategori dan pindahkan ke kolom berikutnya. Semua modul Meta memiliki pengaturan yang sama. Kami akan menunjukkan cara membuat modul pertama dan kemudian menduplikasinya dua kali untuk membuat modul yang tersisa.

Pengarang

Buka pengaturan dan hapus konten dinamis untuk Kategori Postingan.

Pilih Post Author sebagai konten dinamis.

  • Konten Dinamis: Penulis Pos

Di tab Desain, ubah pengaturan berikut.

  • Font: Montserrat
  • Berat: Sedang
  • Gaya: Huruf Besar
  • Penjajaran Desktop: Tengah
  • Penjajaran Telepon: Kiri
  • Warna: #7b7975
  • Ukuran Font: Desktop 14px, Telepon 10px
  • Spasi Huruf: 1px
  • Tinggi Garis: 1.6em

Pengaturan Margin Bawah harus 0px.

  • Margin Bawah: 0px

Tanggal

Seret modul Penulis ke kolom berikutnya setelah menyalinnya. Hapus Dynamic Content, lalu pilih Use Dynamic Content dan Post Publish Date.Â

  • Konten Dinamis: Tanggal Penerbitan Posting

Komentar

Terakhir, seret modul Publish Date ke kolom terakhir. Hapus tanggal dan pilih tanggal untuk digunakan sebagai konten dinamis, sama seperti yang Anda lakukan dengan modul lainnya.

  • Konten Dinamis: Posting Jumlah Komentar

Di bidang Setelah, tambahkan spasi dan kata Komentar kali ini. Tutup modal kecil dulu, lalu pengaturan.

  • Setelah: Komentar

Hasil Akhir

Jadi kami telah membuat tiga modul desain berurutan yang berbeda. Mari kita lihat bagaimana penampilan mereka.

Pertama, bagaimana tampilan modul judul postingan layar penuh baik di desktop maupun seluler.

Lalu, bagaimana tampilan modul judul posting layar penuh dengan judul di atas latar belakang baik di desktop maupun seluler.

Terakhir, bagaimana tampilan pahlawan layar penuh dengan metadata baik di desktop maupun seluler.

Mengakhiri Pikiran

Itu menyimpulkan diskusi kami tentang cara menambahkan pahlawan layar penuh ke desain posting blog Divi Anda. Modul Divi dan Pembuat Tema menawarkan berbagai alternatif untuk membuat bagian pahlawan layar penuh. Salah satu cara ini bekerja dengan baik dan memiliki potensi besar untuk menarik lebih banyak pengunjung. Anda dapat menambahkan pahlawan layar penuh ke desain posting blog Divi apa pun menggunakan pendekatan ini.