Cara Menambahkan Bayangan Kotak Satu Sisi ke Elemen Desain di Divi

Menambahkan bayangan kotak satu sisi ke berbagai elemen desain di Divi adalah cara halus untuk menambahkan kreativitas tanpa mengganggu konten. Dalam tutorial ini, saya akan menunjukkan cara menambahkan bayangan kotak satu sisi ke Tata Letak Halaman FAQ Terapi Divi. Sebagai tip bonus, saya juga akan menunjukkan cara menggabungkan ikon uraian sebagai grafik yang dipusatkan secara vertikal. Dengan mempelajari teknik desain Divi ini, Anda dapat menambahkan bayangan kotak satu sisi ke modul atau kolom apa pun yang Anda inginkan.

Mari kita mulai.

Sneak Peek

Berikut ini adalah sneak peek dari desain FAQ Layout yang akan kita buat menggunakan bayangan kotak satu sisi.

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 “Choose a Premade Layout”. Dari popup Load from Library, temukan dan pilih Therapist Layout Pack. Kemudian pilih Therapist FAQ Page Layout dan klik “Use this Layout”.

Sekarang Anda siap untuk mulai mendesain.

Bagian 1: Mengatur Tata Letak

Dalam tata letak premade ini, kami akan memusatkan perhatian kami pada bagian kedua yang berisi pertanyaan tiruan di dalam beberapa modul sakelar. Sebagai permulaan, mari kita ubah tata letak kolom baris menjadi tiga kolom (1/3 1/3 1/3).

Selanjutnya, pindahkan semua modul di kolom 2 ke kolom 3 menggunakan fitur Multiselect Divi. Untuk melakukan ini, tahan Command (atau Control) dan klik pada setiap modul di kolom 2 sampai semua dipilih. Kemudian seret ke kolom 3.

Sekarang kita perlu memberi baris kita sedikit lebih banyak ruang. Buka pengaturan baris dan perbarui yang berikut:

Lebar: 80%
Lebar Talang: 2
Samakan Tinggi Kolom: YA

Bagian 2: Merancang Modul Toggle

Untuk menyesuaikan desain semua modul sakelar di bagian ini sekaligus, gunakan fitur Multiselect untuk memilih masing-masing modul sakelar. Setelah semua dipilih, buka pengaturan untuk salah satu modul sakelar.

Kemudian perbarui yang berikut ini:

Buka Toggle Text Color: #ffffff
Buka Toggle Background Color: rgba(0,0,0,0)
Warna Teks Beralih Tertutup: #ffffff
Warna Latar Toggle Tertutup: rgba(0,0,0,0)

Warna Teks Tubuh: #ffffff

Padding Kustom: Atas 3vw, Bawah 3vw, Kiri 2vw, Kanan 2vw

Sekarang kita dapat menambahkan bayangan kotak di sisi kiri modul sakelar kita dengan memperbarui opsi bayangan kotak sebagai berikut:

Posisi Horizontal Bayangan Kotak: -30px
Posisi Vertikal Bayangan Kotak: 0px
Kekuatan Buram Bayangan Kotak: 40px
Kekuatan Penyebaran Bayangan Kotak: -35px
Warna Bayangan: rgba (0,0,0,0.4)

Trik untuk menempatkan bayangan kotak dengan benar adalah dengan memindahkan bayangan ke kiri dengan mengatur posisi horizontal ke -30px. Setelah itu, Anda perlu menemukan keseimbangan yang tepat antara kekuatan blur dan kekuatan penyebaran agar bayangan kotak tetap terlihat di sebelah kiri tanpa keluar ke bagian atas dan bawah modul.

Simpan Pengaturan.

Sekarang semua modul sakelar Anda telah diperbarui dengan desain baru.

Namun, kami ingin bayangan kotak modul sakelar di kolom kanan diposisikan di sisi kanan (bukan kiri). Untuk mengubahnya, gunakan Multiselect untuk memilih semua modul sakelar di kolom kanan dan buka pengaturan elemen. Kemudian ubah posisi horizontal dari -30px menjadi 30px sebagai berikut:

Posisi Horizontal Bayangan Kotak: 30px

Kemudian simpan pengaturan.

Itu menangani modul sakelar kami dengan bayangan kotak satu sisi yang unik. Sekarang kita perlu menambahkan bayangan kotak satu sisi yang serupa ke kolom kita.

Bagian 3: Menambahkan Bayangan Kotak Satu Sisi ke Kolom

Untuk menambahkan bayangan kotak satu sisi ke kolom, kita perlu menambahkan beberapa potongan CSS di bawah tab lanjutan dari pengaturan baris.

Buka pengaturan baris dan klik tab lanjutan. Di dalam Elemen Utama Kolom 1, tambahkan CSS berikut:

bayangan kotak: 30px 0px 70px -45px rgba(0,0,0,0.4)

Jika Anda tidak terbiasa dengan CSS, Anda harus dapat mengenali kesamaan kode dengan pengaturan modul bayangan kotak yang tersedia di pembuat Divi. Pada kode di atas…

30px adalah nilai untuk posisi horizontal
0px adalah nilai untuk posisi vertikal
70px adalah nilai untuk kekuatan blur
-45px adalah nilai untuk kekuatan penyebaran
rgba (0,0,0,0.4) adalah warna bayangan

Saya memberi bayangan kotak kolom kekuatan blur yang lebih besar daripada modul sakelar untuk membuat kedalaman yang sedikit lebih besar.

Untuk menambahkan bayangan kotak kiri ke Kolom 3, Anda perlu menambahkan CSS berikut ke Elemen Utama Kolom 3:

box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)

Sekali lagi, satu-satunya perbedaan antara CSS ini dan yang digunakan untuk kolom 1 adalah posisi horizontal negatif.

Bagian 4: Menambahkan Ikon Blurb ke Kolom 2

Sekarang setelah bayangan kotak satu sisi kami selesai, kami memiliki kolom tengah kosong di mana kami dapat menggabungkan beberapa ikon modul uraian untuk membuat desain grafis sederhana. Untuk melakukan ini, pertama-tama tambahkan modul uraian dan hapus judul dan konten. Kemudian klik untuk menggunakan ikon dan pilih ikon obrolan berikut.

Kemudian perbarui pengaturan desain sebagai berikut:

Warna Ikon: rgba (203.241.252,0.37)
Ukuran Font Ikon: 20vw
Margin Kustom: 0px Bawah

Selanjutnya, duplikat modul uraian untuk membuat modul tambahan di bawahnya.

Kemudian perbarui uraian atas dengan ikon tanda tanya dan perbarui pengaturan desain berikut:

Ukuran Font Ikon: 9vw
Lebar: 40%
Penyelarasan Modul: Kanan
Margin Kustom: -2vw

Terakhir, salin modul uraian tanda tanya yang baru saja Anda rancang dan tempel di bawah modul uraian ikon obrolan besar. Kemudian perbarui pengaturan desain untuk modul uraian tersebut sebagai berikut:

Bagian 5: Memusatkan Modul Secara Vertikal di Kolom 2

Untuk menyelesaikan desain, kita perlu memusatkan ikon uraian di kolom 2 secara vertikal sehingga tetap menjadi elemen desain terpusat untuk tata letak kita. Untuk mencapai ini kita akan memanfaatkan penggunaan flex Divi. Karena kami memilih untuk menyamakan tinggi kolom untuk baris kami, kami dapat menggunakan cuplikan CSS sederhana untuk memusatkan semua modul di dalam kolom 2. Anda selalu dapat mempelajari lebih lanjut tentang cara menyelaraskan konten secara vertikal di Divi sesuai keinginan Anda. Tetapi untuk saat ini, buka pengaturan baris dan klik tab lanjutan. Kemudian masukkan css berikut di dalam Elemen Utama Kolom 2:

margin: auto

Sekarang semua modul uraian akan dipusatkan secara vertikal di dalam kolom 2.

Untuk membuat segalanya lebih mudah di mata, lanjutkan ke tengah teks pada masing-masing modul teks yang berada di bagian atas kolom 1 dan kolom 2. Kemudian tambahkan gradien latar belakang ke bagian sebagai berikut:

Warna Kiri Gradien Latar Belakang: #616ce1
Warna Kanan Gradien Latar Belakang: #3846e0

Itu dia. Sekarang desainnya sudah selesai.

Lihat hasil akhirnya.

Dan, perhatikan bagaimana bayangan kotak mengembang dan mengerut saat membuka dan menutup sakelar.

Pikiran Akhir

Menambahkan bayangan kotak satu sisi ke modul dan kolom dapat memberikan kedalaman konten Anda dengan cara yang kreatif. Caranya adalah dengan mengetahui cara menyesuaikan pengaturan desain bayangan kotak Divi secara efektif. Tata letak halaman FAQ ini hanyalah salah satu dari banyak contoh Anda dapat menggabungkan desain ini. Tetapi proses keseluruhannya cukup sederhana dan harus menjadi teknik yang bagus yang dapat Anda simpan di kotak peralatan desain Anda untuk proyek masa depan.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!