4 Contoh Menakjubkan Modul Judul Posting Divi & Cara Mencapainya
Diterbitkan: 2019-01-13Untuk semua blogger Divi Anda di luar sana yang mencari cara baru untuk melibatkan orang dengan posting blog Anda, Modul Judul Posting Divi adalah tempat yang bagus untuk memulai. Modul Judul Postingan memungkinkan Anda untuk menata judul posting (dan gambar unggulan) dalam berbagai cara untuk desain menakjubkan yang tak terhitung jumlahnya. Ini memungkinkan Anda untuk membuat beberapa artikel indah yang menarik pembaca potensial Anda dari pandangan pertama. Hari ini, saya akan menunjukkan kepada Anda empat cara menakjubkan untuk menata Modul Judul Posting Divi untuk membantu menarik pembaca Anda.
Mari kita mulai!
Sneak Peek
Berikut adalah sekilas desain modul judul posting yang ditampilkan dalam tutorial ini.
#1 Pembingkaian Abstrak
Mulai Membangun #1
#2 Teks Tumpang Tindih dan Gambar Unggulan
Mulai Membangun #2
#3 Latar Belakang Konten Unik untuk Keterbacaan
Mulai Membangun #3
Efek Susun #4 dengan Gambar Unggulan Ganda
Mulai Membangun #4
Mulai
Berlangganan Saluran Youtube Kami
Yang Anda butuhkan untuk tutorial ini adalah Divi. Kami akan membuat posting baru dan menggunakan Divi Builder untuk membuat desain judul posting. Anda juga memerlukan beberapa gambar untuk dijadikan gambar unggulan.
Pengaturan untuk Posting Baru
Untuk tutorial ini, saya akan menggunakan Divi Builder untuk membuat contoh desain judul postingan pada postingan baru. Untuk mendapatkan pengaturan untuk build dalam tutorial ini, Anda perlu melakukan hal berikut:
- Buat postingan baru.
- Tambahkan Judul ke posting Anda.
- Tambahkan Gambar Unggulan ke posting Anda.
- Terapkan Pembuat Divi.
- Pilih untuk Membangun Dari Awal
- di bawah Pengaturan Halaman Divi, pilih tata letak halaman Tanpa Bilah Sisi dan pilih untuk Sembunyikan judul posting.
- Kemudian klik Build on the Front End atau terapkan mode tampilan Desktop di backend sehingga Anda dapat mendesain halaman secara visual.
Terserah Anda apakah Anda ingin membuat posting baru untuk setiap desain atau hanya menambahkan beberapa desain judul posting ke satu posting. Perlu diingat bahwa jika Anda menambahkan beberapa judul posting dalam satu posting, mereka akan mewarisi judul halaman dan gambar unggulan yang sama.
#1 Pembingkaian Abstrak
Desain judul postingan yang bersih ini memiliki elemen pembingkaian abstrak yang halus yang akan berfungsi dengan baik pada gambar unggulan dan judul postingan Anda. Efek pembingkaian dibuat menggunakan beberapa batas kustom dan gaya bayangan kotak.
Berikut cara melakukannya.
Pastikan Anda mengatur posting baru seperti yang dijelaskan di awal artikel ini (Tambahkan Judul, Gambar Unggulan, Tanpa tata letak halaman bilah sisi, sembunyikan judul posting default). Tambahkan bagian baru dengan baris satu kolom ke postingan Anda. Kemudian tambahkan modul judul posting ke baris.
Pada Pengaturan Judul Postingan, atur Featured Image Placement sebagai berikut:
Penempatan Gambar Unggulan: Di Atas Judul
Kemudian perbarui tambahkan gradien latar belakang untuk menambahkan elemen desain abstrak kecil di sudut kanan bawah modul.
Warna Kiri Gradien Latar Belakang: rgba(0,0,0,0.06)
Warna Kanan Gradien Latar Belakang: rgba(0,0,0,0)
Tipe Gradien: Radial
Arah Radial: Kanan Bawah
Posisi Awal: 10%
Posisi Akhir: 0%
Lanjutkan memperbarui sisa desain sebagai berikut:
Judul Font: Josefin Sans
Perataan Teks Judul: kanan
Ukuran Teks Judul: 36px
Judul Baris Tinggi: 1.7em (desktop), 1.3em (tablet dan smartphone)
Meta Font: Josefin Sans
Gaya Font Meta: TT
Perataan Teks Meta: kiri
Spasi Huruf Meta: 2px
Tinggi Garis Meta: 2em
Margin Kustom: -5vw atas
Padding Kustom: 5vw atas, 5vw bawah, 5vw kiri, 5vw kanan
Lebar Batas Kanan: 4px
Margin -5vw menarik modul ke atas di luar baris agar batas kanan berdiri di atas batas kiri yang akan kita tambahkan ke baris.
Sekarang mari tambahkan elemen desain abstrak menggunakan bayangan kotak:
Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 112px
Posisi Vertikal Bayangan Kotak: 85px
Kekuatan Penyebaran Bayangan Kotak: -80px
Warna Bayangan: rgba(224,43,32,0.3)
Simpan Pengaturan.
Sekarang buka pengaturan baris untuk mengubah ukurannya dan buat sisi kiri desain bingkai menggunakan batas dan bayangan kotak.
Lebar Kustom: 700px
Lebar Batas Kanan: 4px
Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 112px
Posisi Vertikal Bayangan Kotak: 85px
Kekuatan Penyebaran Bayangan Kotak: -80px
Warna Bayangan: rgba(224,43,32,0.3)
Sekarang mari kita periksa desain akhir.
#2 Teks Tumpang Tindih dan Gambar Unggulan
Buat bagian baru dengan dua baris kolom. Kemudian tambahkan modul gambar di kolom kiri.
Ini akan berfungsi sebagai gambar unggulan kami menggunakan konten dinamis. Buka pengaturan gambar dan hapus gambar tiruan dan klik ikon konten dinamis di kanan atas kotak pratinjau gambar. Kemudian pilih Gambar Unggulan dari daftar untuk menambahkan gambar unggulan ke halaman.
Sekarang tambahkan modul judul posting ke kolom kanan. Buka pengaturan dan sembunyikan gambar unggulan dengan mengatur opsi Tampilkan Gambar Unggulan ke TIDAK.
Kemudian tambahkan gradien latar belakang ke modul judul posting.
Warna Kiri Gradien Latar Belakang: #ffffff
Warna Kanan Gradien Latar Belakang: rgba(255,255,255,0)
Ini akan terlihat setelah kita menambahkan beberapa margin negatif untuk menutupi gambar.
Perbarui sisa desain sebagai berikut:
Judul Font: Fira Sans Condensed
Judul Font Berat: Ultra Ringan
Judul Teks Ukuran: 80px (desktop), 70px (tablet), 45px (smartphone)
Meta Font: Fira Sans Condensed
Gaya Font Meta: TT
Perataan Teks Meta: kanan
Warna Teks Meta: #cccccc
Spasi Huruf Meta : 2px
Margin Kustom: -20% tersisa (desktop), 0% (tablet dan smartphone)
Padding Kustom: 5vw atas, 5vw bawah, 30px kiri
Sekarang mari kita beri bayangan kotak untuk membuat garis di bawah judul.
Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 80px
Posisi Vertikal Bayangan Kotak: 82px
Kekuatan Penyebaran Bayangan Kotak: -80px
Simpan pengaturan dan buka pengaturan baris untuk menyesuaikan lebar talang.
Lebar Talang: 1
Samakan Tinggi Kolom: YA
Sekarang periksa desain akhir.
Alternatif Desain Gambar Bulat
Hanya dengan beberapa penyesuaian kecil, Anda dapat membuat gambar unggulan melingkar dan menyesuaikan ubin pos agar berada di tengah secara vertikal. Untuk melakukan ini, buka pengaturan gambar dan perbarui yang berikut:
Sudut Bulat: 50%
Kemudian buka pengaturan baris dan tambahkan CSS khusus berikut di bawah Elemen Utama:
align-items: center;
Ini hanya berfungsi jika Anda memiliki Equalize Column Heights yang disetel ke YA yang mengaktifkan properti flex yang memungkinkan kita untuk menyelaraskan item secara vertikal. 
Berikut adalah desain akhir.
#3 Latar Belakang Konten Unik untuk Keterbacaan
Desain judul posting ini menggabungkan gradien latar belakang untuk membuat judul dan teks meta lebih mudah dibaca dengan latar belakang gambar unggulan.
Berikut adalah cara melakukannya.
Buat bagian baru dengan baris satu kolom. Kemudian tambahkan modul judul posting ke baris.
Kemudian perbarui pengaturan modul judul posting untuk menyembunyikan gambar unggulan.
Judul Font: Abril Fatface
Warna Teks Judul: #121212
Judul Teks Ukuran: 75px (desktop), 50px (tablet), 30px (smartphone)
Spasi Huruf Judul: 2px
Tinggi Baris Judul: 1.1em
Meta Font: Roboto Dipadatkan
Warna Teks Meta: #ffffff
Ukuran Teks Meta: 16px
Spasi Huruf Meta : 2px
Tinggi Garis Meta: 2em
Lebar: 60% (desktop), 90% (tablet), 100% (ponsel pintar)
Padding Kustom: tersisa 3vw
Sekarang mari tambahkan bayangan kotak untuk dijadikan latar belakang teks meta dan membuatnya mudah dibaca.
Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 0px
Posisi Vertikal Bayangan Kotak: -32px
Warna Bayangan Kotak: #121212
Sekarang kita akan menambahkan gambar unggulan kita ke latar belakang bagian menggunakan konten dinamis. Buka pengaturan bagian dan klik ikon konten dinamis di kanan atas kotak pratinjau gambar latar belakang. Kemudian pilih gambar unggulan dari daftar untuk menambahkan gambar unggulan ke bagian.
Sekarang mari tambahkan elemen latar belakang gradien untuk membuat teks judul posting lebih mudah dibaca. Cukup klik tab gradien dan perbarui yang berikut:
Warna Kiri Gradien Latar Belakang: rgba(255,255,255,0,76)
Warna Kanan Gradien Latar Belakang: rgba(255,255,255,0)
Tipe Gradien: Radial
Arah Radial: Kiri Atas
Posisi Awal: 40%
Posisi Akhir: 0%
Tempatkan Gradien Di Atas Gambar Latar Belakang: YA
Sekarang mari kita lihat desain akhir.
Efek Susun #4 dengan Gambar Unggulan Ganda
Desain ini menggabungkan beberapa bayangan kotak untuk memberikan efek penumpukan elemen yang membentuk modul judul posting dan latar belakang bagian. Ini juga menggunakan dua versi gambar unggulan (secara dinamis) untuk elemen desain yang unik.
Berikut cara melakukannya.
Buat bagian baru dengan baris satu kolom. Kemudian tambahkan modul posting ke baris dan perbarui penempatan gambar unggulan ke Judul/Gambar Latar Meta.
Kemudian perbarui pengaturan desain sebagai berikut:
Warna Teks: terang
Warna Latar Belakang Teks: rgba(1,59,104,0,79)
Orientasi Teks: tengah
Judul Font: Roboto Condensed
Judul Font Berat: Ringan
Judul Teks Ukuran 70px (desktop), 50px (tablet), 30px (smartphone)
Tinggi Baris Judul: 1.3em
Berat Font Meta: Ringan
Gaya Font Meta: TT
Warna Teks Meta: #cccccc
Spasi Huruf Meta: 1px
Padding Kustom: 10vw atas, 0px bawah
Sekarang mari tambahkan bayangan kotak pertama kita untuk membuat layer susun pertama kita.
Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 0px
Posisi Vertikal Bayangan Kotak: -46px
Warna Bayangan: #ffffff
Anda dapat melihat bahwa ini juga berfungsi sebagai cara kreatif untuk membagi judul dan teks meta juga.
Sekarang simpan pengaturan Anda dan buka pengaturan bagian. Tambahkan gambar unggulan ke latar belakang Anda sebagai konten dinamis. Kemudian tambahkan gradien sebagai berikut:
Warna Kiri Gradien Latar Belakang: rgba(1,59,104,0,79)
Warna Latar Belakang Gradien Kanan: rgba (1,59,104,0,79)
Tempatkan Gradien Di Atas Gambar Latar Belakang: YA
Desain latar belakang gambar unggulan tambahan ini adalah cara unik untuk memberi judul posting Anda desain unik yang akan berubah secara dinamis dengan setiap gambar unggulan baru.
Selanjutnya, tambahkan beberapa bantalan khusus.
Padding Kustom (desktop): 10vw atas, 0px bawah
Padding Kustom (ponsel cerdas): 0vw atas, 0px bawah
Kemudian tambahkan bayangan kotak lain untuk melanjutkan efek susun.
Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 0px
Posisi Vertikal Bayangan Kotak: -92px
Warna Bayangan: #ffffff
Untuk menyelesaikan desain, buka pengaturan baris dan perbarui yang berikut:
Jadikan Baris Ini lebar penuh: YA
Lebar Talang: 1
Padding Kustom (desktop): 0px atas, 0px bawah, 6% kiri, 6% kanan
Padding Khusus (ponsel pintar: 0 piksel atas, 0 piksel bawah, 0% kiri, 0% kanan
Sekarang periksa desain akhir.
Pikiran Akhir
Dengan desain judul posting ini, Anda harus memiliki pemahaman yang cukup baik tentang apa yang mungkin terjadi dengan modul judul posting Divi dan Divi Builder. Hanya dengan beberapa penyesuaian desain, dikombinasikan dengan kekuatan konten dinamis untuk gambar unggulan, Anda dapat membuat gaya judul posting unik yang tak terhitung jumlahnya untuk posting blog Anda. Jika ada, saya harap ini akan menginspirasi Anda untuk membuat beberapa judul posting yang menakjubkan sendiri.
Untuk inspirasi desain terkait lainnya, lihat posting blog kami di bagian pahlawan posting blog dinamis yang indah dan menarik dan rahasia merancang tata letak grid yang rusak di Divi.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!