Cara Membuat Kotak Konten Bergaya di Divi untuk Tips, Info, Peringatan, dan Lainnya (Unduh GRATIS)

Kotak konten bergaya untuk hal-hal seperti tip, peringatan, dan info penting lainnya adalah aset yang berguna untuk situs web atau blog apa pun. Mereka adalah cara yang efektif dan nyaman untuk menampilkan konten penting dengan desain yang konsisten yang akan dihargai oleh pengguna. Misalnya, Anda mungkin memerlukan desain kotak konten untuk menyoroti tip utama dalam tutorial atau untuk memperingatkan pengguna tentang potensi masalah.

Dalam tutorial ini, kami akan menunjukkan cara membuat 3 desain kotak konten di Divi. Desain kotak konten ini dapat dengan mudah diubah dengan ikon baru, skema warna, dan/atau konten agar sesuai dengan kebutuhan apa pun. Setelah kami menunjukkan kepada Anda cara mendesain kotak, kami akan menunjukkan kepada Anda bagaimana Anda dapat menggunakan preset global Divi untuk mempermudah penerapan kotak konten pra-desain baru hanya dengan beberapa klik. Tidak diperlukan plugin!

Mari kita mulai!

Sneak Peek

Hari ini, kita akan membangun 3 desain kotak konten utama ini di Divi.

Dengan 3 desain kotak konten utama ini, Anda akan dapat membuat penyesuaian yang mudah (seperti ikon, warna, dan teks) untuk membuat desain kotak konten tanpa akhir untuk setiap kesempatan.

Berikut adalah 36 contoh yang kami sertakan dalam unduhan GRATIS kami di bawah ini.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan semua 36 desain kotak konten, Anda harus mengunduh tata letak terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Membuat Desain Kotak Konten di Divi

Sebelum kita mulai mendesain kotak konten kita, mari tambahkan baris satu kolom baru ke bagian default di Divi Builder.

Desain Kotak Konten #1

Untuk membuat kotak konten pertama, tambahkan modul uraian ke kolom.

Di bawah tab konten, perbarui yang berikut ini:

• Gunakan Ikon: YA
• Ikon: lihat tangkapan layar
• Warna Latar Belakang: #ffffff
• Warna Kiri Gradien Latar Belakang: #00529b
• Warna Kanan Gradien Latar Belakang: #bde5f8
• Arah Gradien: 90 derajat
• Posisi Awal: 3em
• Posisi Akhir: 0%

Di bawah tab desain, perbarui gaya ikon sebagai berikut:

• Warna Ikon: #ffffff
• Penjajaran Gambar/Ikon: Kiri
• Gunakan Ukuran Font Ikon: YA
• Ukuran Font Ikon: 2em

Selanjutnya, perbarui gaya teks sebagai berikut:

• Warna Teks Judul: #00529b
• Judul Teks Ukuran: 1.5em
• Tinggi Baris Judul: 2em
• Warna Teks Tubuh: #bde5f8
• Ukuran Teks Tubuh: 1em
• Tinggi Garis Tubuh: 2em

Setelah gaya teks berada di tempatnya, perbarui ukuran dan padding sebagai berikut:

• Lebar Konten: 100%
• Lebar Maks: 700px
• Penyelarasan Modul: Pusat
• Padding: 2em atas, 2em bawah, 5em kiri, 2em kanan

Kemudian tambahkan bayangan kotak halus ke uraian sebagai berikut:

• Bayangan Kotak: lihat tangkapan layar
• Posisi Vertikal Bayangan Kotak: 0px
• Kekuatan Buram Bayangan Kotak: 88px
• Kekuatan Penyebaran Bayangan Kotak: -10px
• Warna Bayangan: rgba (0,0,0,0.17)

Di bawah tab lanjutan, kita akan memberi ikon blurb gaya khusus sehingga memiliki bentuk lingkaran dengan warna latar belakang dan batas yang cocok dengan warna gradien latar belakang kiri yang digunakan sebelumnya. Kami juga akan memposisikan ikon dengan posisi absolut sehingga kami dapat menempatkannya tepat di tempat yang kami inginkan tanpa mengambil ruang yang sebenarnya dalam dokumen.

Untuk menambahkan gaya kustom, tempel kode CSS berikut di kotak CSS Gambar Blurb:

position:absolute;
margin-bottom: 0px;
border: 0.5em solid #00529b !important;
border-radius:50%;
background: #00529b;
transform: translateX(-3.75em);

CATATAN: Saat mengubah skema warna kotak konten (atau modul uraian), kita juga perlu memperbarui warna yang digunakan dalam CSS Gambar Blurb untuk batas dan latar belakang ikon.

Mari kita lihat hasil akhirnya.

Desain Kotak Konten #2

Untuk membuat desain kotak konten kedua kami, duplikat modul uraian sebelumnya untuk memulai desain sehingga kami dapat membuat beberapa modifikasi.

Untuk desain ini, kita akan memusatkan ikon secara vertikal di sisi kiri uraian menggunakan properti grid CSS.

Di bawah tab desain, ganti CSS Gambar Blurb dengan yang berikut:

margin-bottom: 0px;

Kemudian tambahkan CSS berikut ke kotak Blurb Content CSS:

display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 5em auto;
grid-gap: 2em;

Lebar kolom kiri di kisi (yang memegang ikon) diatur ke 5em , dan kolom kanan yang berisi judul dan teks isi diatur ke auto . Kita perlu mencocokkan lebar warna gradien kiri dengan kolom grid lebar 5em yang memegang ikon. Untuk melakukannya, perbarui yang berikut ini:

• Posisi Awal: 5em

Di bawah tab desain, perbarui perataan dan ukuran ikon:

• Penjajaran Gambar/Ikon: tengah
• Ukuran Font Ikon: 3em

Sekarang kita tidak perlu padding kiri jadi keluarkan.

Sekarang semuanya harus berbaris dengan baik. Lihat hasil akhirnya.

Desain Kotak Konten #3

Untuk membuat desain kotak konten ketiga, duplikat modul blurb kedua (kotak konten) yang baru saja kita selesaikan.

Setelah uraian uraian kedua diduplikasi, buka pengaturan uraian uraian duplikat.

Di bawah tab Desain, ubah warna ikon:

• Warna Ikon: rgba(255,255,255,0.3)

Selanjutnya, kita akan menambahkan teks label vertikal di atas ikon dengan menambahkan CSS khusus ke elemen sebelum pseudo (yang pada dasarnya memungkinkan Anda untuk melampirkan desain dan/atau konten tambahan sebelum elemen modul uraian).

Untuk menambahkan label, rekatkan CSS berikut ke kotak Sebelum CSS:

content: 'key tip';
bottom:50%;
font-size: 1em;
line-height: 1em;
letter-spacing: 0.4em;
position:absolute;
transform: rotatez(-90deg) translateX(-50%) translateY(3em) !important;
transform-origin: bottom left;
color: #fff;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
z-index:1;

Kami juga akan memutar ikon agar sesuai dengan teks vertikal yang diputar. Untuk melakukan ini, tambahkan CSS berikut ke kotak Blurb Image CSS:

margin-bottom: 0px;
transform: rotateZ(-90deg);

Berikut adalah hasil akhirnya.

Memperbarui Desain

Perbarui Ukuran Elemen Kotak Konten dengan Mengubah Ukuran Teks Tubuh

Setiap kotak konten dibangun menggunakan sebagian besar satuan panjang em (em relatif terhadap ukuran font akar tubuh elemen). Karena itu, kotak konten akan diskalakan ukurannya dengan mulus saat menyesuaikan ukuran teks isi dalam pengaturan desain bawaan Divi.

Perbarui Warna CSS Khusus

Untuk desain kotak konten #1, kami menambahkan latar belakang khusus dan warna batas ke ikon dengan CSS khusus. Pastikan untuk memperbarui warna yang digunakan untuk properti perbatasan dan latar belakang agar sesuai dengan skema warna desain Anda sendiri.

Memperbarui Teks Label

Untuk desain kotak konten #3, kami menambahkan label dengan CSS khusus pada elemen pseudo sebelumnya . Untuk memperbarui teks, cukup ubah nilai properti konten di kotak Sebelum CSS.

Membuat Kotak Konten Dapat Digunakan Kembali di Divi

Simpan Modul ke Perpustakaan Divi

Ada dua cara utama untuk membuat modul dapat digunakan kembali di Divi. Cara pertama adalah menyimpan modul (atau elemen apa pun) ke Divi Library.

Setelah elemen disimpan ke perpustakaan, Anda dapat menemukannya di perpustakaan Divi saat menambahkan elemen baru ke halaman.

Gunakan Preset Global

Cara utama kedua untuk membuat modul dapat digunakan kembali di Divi adalah dengan membuat preset global untuk modul tersebut. Setelah Anda menyimpan desain modul sebagai preset global, Anda dapat dengan mudah menambahkan preset global itu ke instance lain dari modul yang sama.

Dalam hal ini, kita dapat membuka pengaturan untuk setiap kotak konten (atau modul uraian) dan membuat preset global baru untuk masing-masing kotak. Untuk melakukannya, buka pengaturan Modul Blurb dan klik opsi preset di bagian atas. Kemudian ubah pengaturan modul menjadi preset baru dari gaya kustom.

Beri nama preset baru apa pun yang Anda inginkan dan simpan.

Ulangi langkah-langkah ini untuk setiap preset modul uraian yang ingin Anda buat.

Untuk membuat lebih banyak kotak konten di masa mendatang, cukup tambahkan modul uraian baru dan pilih ikon yang ingin Anda gunakan. Kemudian aktifkan salah satu preset yang diunggah dengan mengklik dropdown preset di bagian atas, dan pilih preset pilihan Anda.

Hasil Akhir

Berikut adalah tampilan akhir dari 3 desain kotak konten utama yang kami buat.

Dan berikut adalah 36 desain yang dapat Anda buat dengan beberapa penyesuaian mudah yang kami sertakan dalam unduhan GRATIS kami di atas.

Pikiran Akhir

Kotak konten bergaya yang kami buat dapat menjadi aset desain yang berguna untuk situs web atau blog apa pun. Anda dapat memanfaatkan opsi desain yang kuat di Divi untuk mengubah kotak konten agar sesuai dengan desain apa pun. Plus, dengan kemampuan untuk menyimpan dan mengunggahnya ke perpustakaan Divi dan/atau membuat preset global, Anda akan dapat menggunakan kotak konten ini kapan pun Anda mau hanya dengan beberapa klik. Mudah-mudahan, ini akan berguna.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!