5 Desain Modul Blurb Divi Kreatif

Dalam posting ini, kita akan menjelajahi salah satu fitur paling populer Divi, Modul Blurb. Meskipun tampaknya sederhana, ia memiliki banyak fitur yang dapat disesuaikan yang dapat menghidupkan elemen situs web Anda. Umumnya, Modul Blurb digunakan untuk hal-hal seperti layanan, manfaat, informasi kontak, dll, tetapi dengan Divi, kemungkinannya tidak terbatas.

Ayo bersenang-senang!

Sneak Peek

Berikut ini adalah cuplikan dari 5 gaya modul uraian yang akan saya buat dalam tutorial ini.

5 Desain Modul Blurb Divi Kreatif

Berlangganan Saluran Youtube Kami

Mulai

Untuk memulai, Anda perlu membuat halaman baru. Dari Dasbor WordPress Anda, navigasikan ke Pages > Add New. Kemudian beri judul pada halaman Anda dan gunakan pembuat visual. Pilih opsi "Bangun Dari Awal". Setelah pembuat visual dimuat di halaman, Anda siap untuk mulai mendesain.

Tutorial ini dirancang untuk memudahkan membuat masing-masing desain gaya uraian ini satu per satu, jadi jangan ragu untuk melompat ke bawah posting ke desain yang ingin Anda buat. Dengan kata lain, Anda tidak harus memulai dengan yang pertama.

1. Blurb Pop-Out dengan Daftar Fitur

Dalam contoh pertama ini, kita akan sedikit bersenang-senang dengan memperluas uraian di luar baris untuk menciptakan efek pop-out. Kemudian kita dapat menggunakan kolom yang berdekatan di sebelah masing-masing untuk menambahkan beberapa uraian dengan ikon rata kiri untuk dijadikan sebagai item daftar unggulan.

Untuk memulai, buat bagian dan baris baru dengan struktur empat kolom.

Kemudian lanjutkan dan perbarui pengaturan baris sebagai berikut:

Warna Latar Belakang: #2e3858
Jadikan Baris Ini Lebar Penuh: YA
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 1
Samakan Tinggi Kolom: YA
Margin Kustom: Atas 5vw, Bawah 5vw
Padding Kustom: 0px atas, 0px bawah

Simpan Pengaturan.

Kemudian di kolom pertama, tambahkan modul uraian pertama Anda.

Keluarkan kalimat terakhir di kotak konten untuk sedikit mempersingkat jumlah teks. Kemudian pilih untuk menggunakan ikon alih-alih gambar dan pilih ikon (siapa pun akan melakukannya).

Kemudian perbarui yang berikut ini:

Warna Latar Belakang: #df4570
Warna Ikon: #ffffff
Orientasi Teks: Tengah
Judul Font: Encode Sans Semi Condensed
Judul Font Gaya: TT
Spasi Huruf Judul: 2px
Margin Kustom (desktop): -5vw Atas, -5vw Bawah
Margin Kustom (tablet): 0px Atas, 0px Bawah
Padding Kustom: Atas 5vw, Bawah 5vw, Kiri 3vw, Kanan 3vw
Bayangan Kotak: lihat tangkapan layar
Kekuatan blur Bayangan Kotak: 80px

Menggunakan opsi menu klik kanan atau tombol pintas cmd+c dan cmd+v, salin modul yang baru saja Anda buat dan tempel ke kolom 3. Kemudian perbarui pengaturan modul uraian baru dengan warna latar belakang cerah (tetapi gratis):

Warna Latar Belakang: #24c4a3

Sekarang saatnya untuk menambahkan uraian item daftar yang berdekatan dengan uraian sembulan yang baru saja kita buat.

Untuk melakukan ini, tambahkan uraian baru di kolom 2. Kemudian keluarkan teks tiruan di kotak konten sehingga hanya teks judul yang tersisa. Kemudian tambahkan ikon untuk mengganti gambar Anda seperti sebelumnya. Kemudian perbarui pengaturan desain sebagai berikut:

Warna Ikon: #df4570
Penempatan Gambar/Ikon: Kiri
Judul Font: Encode Sans Semi Condensed
Padding Kustom: Atas 20px, Bawah 20px, Kiri 3vw, Kanan 3vw

Gandakan uraian uraian dua kali sehingga Anda mendapatkan tiga uraian uraian total di kolom. Kemudian gunakan fitur Multiselect Divi untuk memilih ketiga uraian lalu salin dan tempel ke kolom 4.

Anda juga dapat menggunakan multiselect untuk memilih ketiga uraian di kolom 4 dan mengedit pengaturan elemen secara massal untuk mengubah warna ikon ketiganya menjadi #24c4a3.

Itu dia! Membuat ringkasan pop-out adalah cara yang menyenangkan untuk membuat ringkasan Anda menonjol dan memiliki ringkasan daftar yang berdekatan di samping memberi Anda beberapa opsi tambahan untuk desain yang lebih kreatif.

Berikut adalah hasil akhirnya.

2. Blurb Promosi dengan Gambar Latar Kustom.

Gaya uraian ini sangat bagus untuk menampilkan konten dan penawaran promosi seperti buku gratis. Ide dasarnya adalah memposisikan konten uraian di sebelah kiri modul untuk memberi ruang bagi gambar latar belakang khusus. Mari kita lakukan.

Pertama tambahkan bagian reguler dengan struktur baris dua kolom. Di kolom kiri tambahkan modul uraian baru.

Perbarui teks Judul dan keluarkan kalimat terakhir dari konten tiruan untuk mengurangi jumlah teks. Kemudian perbarui gambar Anda dengan gambar buku (atau gambar produk Anda). Ikon buku atau sesuatu juga akan berfungsi.

Saya menggunakan aset gambar dari Paket Tata Letak Blog Perjalanan, jadi jangan ragu untuk memulai desain dengan mengambil gambar-gambar itu.

TIPS: Anda juga dapat menambahkan URL Tautan Modul ke modul ini agar seluruh modul dapat diklik karena dapat berfungsi sebagai promosi.

Selanjutnya, tambahkan gambar latar belakang ke modul. Pastikan gambar latar belakang adalah gambar seperti header dengan titik fokus gambar di sisi kanan sehingga Anda dapat menambahkan konten Anda di sebelah kiri gambar dengan latar belakang yang mengganggu teks.

Kemudian tambahkan gradien latar belakang untuk berfungsi sebagai overlay parsial yang berada di belakang konten dan overlay gambar latar belakang untuk membuat teks lebih mudah dibaca. Untuk menambahkan pembaruan gradien latar belakang berikut ini:

Warna Kiri Gradien Latar Belakang: rgba(255,255,255,0.8)
Warna Kanan Gradien Latar Belakang: rgba(255,255,255,0)
Arah Gradien: 90 derajat
Posisi Awal: 40%
Posisi Akhir: 70%
Tempatkan Gradien Di Atas Gambar Latar Belakang: YA

Kemudian perbarui yang berikut ini:

Bayangan Kotak Gambar: lihat tangkapan layar
Judul Font: Noto Serif
Ukuran Teks Judul: 26px
Font Tubuh: Noto Sans
Ukuran Teks Tubuh: 16px
Lebar Gambar: 150px
Lebar Konten (desktop): 60%
Lebar Konten: (ponsel cerdas): 80%
Padding Kustom: Bawah 2vw, Kiri 2vw, Kanan 2vw

Teknik desain utama di sini adalah memberikan lebar khusus pada gambar dan konten sehingga konten dapat diposisikan ke kiri nanti.

Sekarang kita perlu menambahkan bayangan kotak di bagian atas uraian untuk menciptakan kesan bahwa gambar buku memanjang di atas modul untuk efek tumpang tindih yang bagus. Untuk melakukannya, perbarui yang berikut ini:

Bayangan Kotak: Lihat Tangkapan Layar
Posisi Horizontal Bayangan Kotak: 0px
Posisi Vertikal Bayangan Kotak: 50px
Warna Bayangan: #ffffff

Langkah terakhir melibatkan cuplikan singkat CSS khusus yang diperlukan untuk menyelaraskan konten uraian ke sisi kiri modul. Untuk melakukan ini, buka tab lanjutan dan tambahkan CSS khusus berikut di bawah kotak input Konten Blurb:

margin-left: 0;

Sekarang Lihat hasilnya!

TIP: Jangan lupa tentang opsi hover yang tersedia. Coba beri gambar buku batas pada hover untuk membuat segalanya menjadi hidup!

3. Gaya Blurb Lingkaran menggunakan Gradien Latar Belakang

Gaya uraian sederhana ini menggunakan gradien latar belakang untuk berfungsi sebagai latar belakang lingkaran untuk konten uraian Anda. Ini adalah alternatif yang menyenangkan untuk mengubah seluruh modul uraian Anda menjadi lingkaran menggunakan CSS khusus.

Mulailah dengan menambahkan bagian reguler baru dengan struktur baris tiga kolom.

Kemudian tambahkan modul uraian di kolom kiri.

Kemudian keluarkan kalimat terakhir dari konten untuk mengurangi jumlah teks. Penting untuk desain ini untuk menjaga jumlah teks agak kecil karena Anda akan memasangnya di dalam lingkaran.

Kemudian tambahkan gradien latar belakang untuk membuat latar belakang lingkaran sebagai berikut:

Warna Kiri Gradien Latar Belakang: #fa7f28
Warna Kanan Gradien Latar Belakang: rgba(255,255,255,0)
Tipe Gradien: radial
Posisi Awal: 60%
Posisi Akhir: 0%
Tempatkan Gradien Di Atas Gambar Latar Belakang: YA

Kemudian perbarui pengaturan desain lainnya sebagai berikut:

Orientasi Teks: Tengah
Judul Font: Oswald
Judul Font Gaya: TT
Spasi Huruf Judul: 1px
Font Tubuh: Robot
Berat Huruf Tubuh: Ringan
Ukuran Teks Tubuh: 16px
Lebar (tablet): 80%
Penyelarasan Modul: Pusat
Padding Kustom (desktop): 20% Atas, 25% Bawah, 20% Kiri, 20% Kanan
Padding Kustom (smartphone): 20% Atas, 25% Bawah, 10% Kiri, 10% Kanan

Kuncinya di sini adalah menyesuaikan padding khusus dengan benar sehingga lingkaran latar belakang sejajar dengan konten di tengah. Anda mungkin perlu menyesuaikan pengaturan ini tergantung pada jumlah konten yang Anda miliki.

Sekarang Anda dapat menyalin dan menempelkan modul ke kolom yang tersisa.

Kemudian perbarui pengaturan baris sehingga memiliki lebar kustom 80% dan lebar Talang 1.

Untuk melengkapi desain, Anda dapat menambahkan gambar latar belakang dan gradien ke bagian Anda sebagai berikut:

Tambahkan Gambar Latar Belakang
Warna Kiri Gradien Latar Belakang: rgba(2,0,76,0.51)
Warna Kanan Gradien Latar Belakang: rgba(2,0,76,0.84)
Tempatkan Gradien Di Atas Gambar Latar Belakang: YA

Itu dia! Lihat desain akhir!

Untuk ruang tambahan, Anda selalu dapat mengurangi ukuran ikon uraian menjadi sekitar 50px agar lingkaran tidak bertabrakan pada lebar browser yang lebih kecil. Saat melakukan penyesuaian, jangan lupa untuk memanfaatkan fitur Multiselect Divi untuk melakukan pengeditan massal ke semua modul sekaligus.

Kiat Bonus: Membuat Seluruh Modul Blurb menjadi Lingkaran dengan CSS Khusus

Jika Anda ingin mengubah seluruh modul menjadi lingkaran (alih-alih menggunakan gradien latar belakang), ganti gradien dengan warna latar belakang biasa dan tambahkan CSS khusus ini di bawah Tab Lanjutan pada pengaturan modul uraian:

Di kotak Elemen Utama:

height: 300px;
width: 300px;
border-radius: 100%;
border: 5px solid #ffffff;
padding: 5% !important;
display: flex;

Di kotak Konten Blurb:

margin: auto;

CSS khusus ini menimpa set padding dalam pengaturan modul uraian sehingga Anda mungkin perlu mengeluarkan cuplikan itu jika Anda ingin mendapatkan kembali kendali atas pengaturan tersebut. Juga, css ini menggunakan flex untuk memusatkan konten uraian di dalam lingkaran. Ini akan berguna.

Ini akan terlihat seperti ini jika diterapkan pada ketiga modul.

4. Blurb Berbingkai dengan Batas dan Bayangan Kotak

Salah satu fitur desain Divi favorit saya untuk bersenang-senang adalah bayangan kotak. Kami telah menampilkan penggunaan kreatif untuk bayangan kotak dalam desain uraian promosi kami sebelumnya di mana kami membuat efek tumpang tindih. Tetapi Anda juga dapat menggunakan bayangan kotak sebagai cara kreatif untuk membingkai konten Anda dengan desain kisi yang rusak. Dalam desain ini, saya akan menunjukkan cara menggabungkan batas dan bayangan kotak dengan cara yang unik.

Untuk memulai, tambahkan bagian reguler baru dengan struktur baris tiga kolom. Kemudian tambahkan modul blurb ke kolom pertama.

Tambahkan gambar ke uraian. Kemudian beri gambar blurb batas dan bayangan kotak dengan memperbarui pengaturan desain sebagai berikut:

Lebar Batas Atas Gambar: 8px
Warna Batas Atas Gambar: #2f3854
Lebar Batas Kiri Gambar: 8px
Warna Batas Kiri Gambar: #2f3854

Bayangan Kotak Gambar: Lihat Tangkapan Layar
Posisi Horizontal Bayangan Kotak: -20px
Posisi Vertikal Bayangan Kotak: -30px
Warna Bayangan: #f89da9

Kemudian perbarui font Judul dan Badan dan spasi sebagai berikut:

Judul Font: Yeseva One
Font Tubuh: Montserrat
Margin Kustom: Bawah 50px
Padding Kustom: Bawah 2vw

Terakhir, berikan modul blurb Anda batas kustom dan bayangan kotak untuk menyeimbangkan desain bingkai sebagai berikut:

Lebar Batas Kanan: 15px
Warna Batas Kanan: #2f3854
Lebar Batas Bawah: 15px
Warna Batas Bawah: #2f3854

Bayangan Kotak Gambar: Lihat Tangkapan Layar
Posisi Horizontal Bayangan Kotak: 20px
Posisi Vertikal Bayangan Kotak: 35px
Warna Bayangan: #dddddd

Sekarang salin dan tempel modul di kolom 2 dan 3 dan perbarui gambar uraian untuk menyelesaikan desain.

Berikut adalah hasil akhirnya.

5. Styling Blurbs sebagai Daftar Melengkung

Desain selanjutnya ini adalah cara yang menyenangkan untuk membuat daftar menggunakan uraian. Menggunakan beberapa margin khusus, Anda dapat melengkungkan item daftar uraian untuk membungkus elemen di halaman Anda. Dalam contoh ini, saya akan melengkungkan daftar untuk membungkus sisi kanan ikon uraian besar. Dan Anda bisa sedikit kreatif

Pertama, tambahkan bagian reguler baru dengan struktur baris dua kolom.

Sebelum Anda menambahkan modul uraian apa pun, berikan baris Anda lebar khusus dan lebar talang dengan memperbarui pengaturan baris Anda sebagai berikut:

Lebar Kustom: 700px
Lebar Talang: 2

Sekarang mari kita buat ikon blurb besar dengan menambahkan modul blurb di kolom kiri. Kemudian keluarkan Judul Teks dan kontennya. Dan kemudian pilih ikon bola lampu. Sekarang hanya ikon yang akan terlihat. Selanjutnya, perbarui warna dan ukuran ikon sebagai berikut:

Warna Ikon: #96a6bd
Ukuran Font Ikon (desktop): 400px
Ukuran Font Ikon (ponsel cerdas): 200px

Di kolom kanan, tambahkan modul uraian baru. Ini akan menjadi yang pertama dari lima uraian total yang akan menjadi daftar kami. Kemudian buka pengaturan modul dan keluarkan konten hanya menyisakan teks judul. Kemudian pilih ikon panah kanan untuk uraian.

Selanjutnya perbarui pengaturan desain sebagai berikut:

Warna Latar Belakang: #bb7860
Warna Ikon: #ffffff
Penempatan Gambar/Ikon: Kiri
Gunakan Ukuran Font Ikon: YA
Ukuran Font Ikon: 30px
Judul Font: Raleway
Warna Teks Judul: #ffffff
Ukuran Teks Judul: 20px
Judul Baris Tinggi: 1.5em
Margin khusus: 5% bawah
Padding Kustom: 3% Atas, 10% Kiri, 2% Kanan

Gandakan modul empat kali hingga Anda mendapatkan total lima uraian yang ditumpuk di kolom kanan.

Kemudian beri warna baru pada uraian kedua, margin khusus untuk mendorongnya ke kanan, dan sudut membulat kreatif sebagai berikut:

Warna Latar Belakang: #393e56
Margin kustom (desktop): 10% Kiri, -10% Kanan
Margin kustom (tablet): 0% Kiri, 0% Kanan
Sudut Bulat: 50px kanan atas, 50px kiri bawah

Sebelum Anda meninggalkan modul ini, salin sudut membulat dengan mengklik kanan pada opsi di pengaturan uraian.

Kemudian simpan pengaturan blurb dan klik kanan pada modul pertama (atas) yang Anda buat dan tempelkan gaya sudut membulat pada modul.

Sekarang mari kita terus memperbarui tiga modul terakhir dengan warna yang tepat, jarak dan desain sudut membulat.

Untuk uraian ketiga di kolom, perbarui yang berikut:

Warna Latar Belakang: #96a6bd
Margin kustom (desktop): 20% Kiri, -20% Kanan
Margin kustom (tablet): 0% Kiri, 0% Kanan
Sudut Bulat: 50px kanan atas, 50px kanan bawah

Untuk uraian keempat, perbarui yang berikut:

Warna Latar Belakang: #393e56
Margin kustom (desktop): 10% Kiri, -10% Kanan
Margin kustom (tablet): 0% Kiri, 0% Kanan
Sudut Bulat: 50px kiri atas, 50px kanan bawah

Untuk uraian kelima, cukup salin sudut membulat di uraian keempat dan tempelkan.

Itu dia! Mari kita periksa desain akhir.

Lebih Banyak Inspirasi Gaya Blurb

Jika Anda tertarik menjelajahi desain modul blurb yang lebih menyenangkan, lihat tautan di bawah ini:

• Anda dapat menggunakan latar belakang melengkung asimetris untuk uraian.
• Anda dapat membingkai modul uraian Anda dengan desain kreatif menggunakan pembagi bagian.
• Anda dapat membuat bentuk gambar latar belakang Anda sendiri untuk membangun tata letak kotak geometris.
• Pelajari cara menggabungkan ikon uraian untuk membuat elemen grafis terpusat untuk bagian Anda di pos pada bayangan kotak satu sisi.
• Dan jangan lupa untuk menjelajahi tata letak premade Divi gratis kami yang tersedia di Divi Builder untuk gaya uraian yang lebih inspiratif

Saya harap contoh-contoh ini telah menginspirasi Anda untuk melihat apa yang mungkin dengan Modul Blurb Divi! Langit adalah batasnya di sini. Modul ini sangat populer dan mungkin akan digunakan di hampir setiap situs yang Anda buat, jadi sebaiknya Anda memiliki serangkaian ide yang serbaguna agar desain tidak terlihat sama. Terkadang, hanya mengubah warna dan font dapat memberikan tampilan yang sama sekali baru, jadi jangan ragu untuk mengambil ide ini dan menjadikannya milik Anda!

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!