Cara Kreatif Menggunakan Bayangan Kotak Baris dengan Divi

Salah satu pembaruan Divi terbaru telah lama ditunggu-tunggu; integrasi bayangan kotak ke dalam bagian, baris, dan modul. Dalam posting ini, kami akan berfokus pada bagaimana bayangan kotak baris dapat meningkatkan keseluruhan tampilan dan nuansa situs web Anda.

Untuk mengilustrasikan bayangan kotak kedalaman yang dapat dibawa ke situs web Anda, kami telah membuat contoh yang akan kami tunjukkan cara membuat ulang langkah demi langkah.

Hasil

Desktop

Tata letak yang akan kami tunjukkan kepada Anda cara membuat ulang terlihat seperti ini di desktop:

Seluler

Dan seperti ini di ponsel:

Cara Kreatif Menggunakan Bayangan Kotak Baris dengan Divi

Berlangganan Saluran Youtube Kami

Format Tajuk

Hal pertama yang harus Anda lakukan adalah memilih Format Header yang tepat. Buka Dashboard WordPress > Customize > Header & Navigation > Header Format > Dan pilih 'Centered' sebagai Header Style .

Bilah Menu Utama

Kembali ke Header & Navigasi > Bilah Menu Utama > Dan lakukan penyesuaian berikut:

• Sembunyikan Gambar Logo: Aktifkan
• Tinggi Menu: 211
• Tinggi Maks Logo: 30
• Ukuran Teks: 16
• Spasi Huruf: 2
• Font: Lato Light
• Gaya Font: Huruf Besar
• Warna Teks: #FFFFFF
• Warna Tautan Aktif: #FFFFFF
• Warna Latar Belakang: rgba(255,255,255,0)
• Warna Latar Menu Dropdown: rgba(255,255,255,0)

Bagian Pertama

Setelah Anda membuat perubahan dalam Penyesuai Tema, saatnya untuk memulai dengan tata letak. Buat halaman baru, aktifkan Divi Builder dan alihkan ke Visual Builder. Kemudian, tambahkan bagian standar pertama ke halaman.

Bagian Latar Belakang Gradien

Bagian ini akan membutuhkan latar belakang gradien berikut:

• Warna Pertama: #ea2e7d
• Warna Kedua: #edd900
• Tipe Gradien: Linier
• Arah Gradien: 110deg
• Posisi Awal: 0%
• Posisi Akhir: 100%

Jarak

Pindah ke tab Desain. Dalam subkategori Spasi, gunakan '100px' untuk padding atas dan '200px' untuk padding bawah.

Baris Satu Kolom

Latar Belakang Gradien Baris

Lanjutkan dengan menambahkan baris satu kolom ke bagian tersebut dan manfaatkan latar belakang gradien berikut:

• Warna Pertama: rgba (255,255,255,0)
• Warna Kedua: #ea2e7d
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 56%
• Posisi Akhir: 100%

Latar Belakang Gradien Kolom

Gulir ke bawah dan gunakan latar belakang gradien berikut untuk kolom baris itu:

• Warna Pertama: rgba(237.217,0,0.77)
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien Kolom: Linear
• Arah Gradien Kolom: 180deg
• Posisi Awal Kolom: 0
• Posisi Ujung Kolom: 100

Perekat

Buka tab Desain dan buat perubahan berikut berlaku untuk subkategori Ukuran:

• Gunakan Lebar Kustom: Ya
• Lebar Kustom: 27%

Jarak

Kemudian, gunakan '20px' untuk Padding Kustom atas, kanan, bawah, dan kiri baris.

Modul Teks

Setelah Anda selesai dengan pengaturan baris, tambahkan Modul Teks dan gunakan pengaturan berikut untuk subkategori Teks:

• Font Teks: Arvo
• Ukuran Font Teks: 98px
• Warna Teks: #FFFFFF
• Spasi Huruf Teks: 32px
• Tinggi Baris Teks: 1.4em
• Orientasi Teks: Tengah

Bagian Kedua

Tambahkan bagian lain tepat di bawah bagian pertama. Bagian ini akan berisi semua baris lain yang ada di tata letak.

Bagian Latar Belakang Gradien

Pertama, gunakan latar belakang gradien berikut untuk bagian ini:

• Warna Pertama: rgba (255,255,255,0)
• Warna Kedua: #592851
• Tipe Gradien: Linier
• Arah Gradien: 180 derajat
• Posisi Awal: 80%
• Posisi Akhir: 80%

Jarak

Selanjutnya, buka tab Design dan tambahkan '100px' ke padding bawah.

Baris Dua Kolom Pertama

Warna Latar Baris

Tambahkan baris dua kolom pertama ke bagian baru ini dan gunakan '#dddddd' sebagai warna latar belakang.

Kolom 1 Latar Belakang Gradien

Kolom pertama akan membutuhkan latar belakang gradien berikut:

• Warna Pertama: #6ac922
• Warna Kedua: #b6c1b2
• Kolom 1 Jenis Gradien: Linear
• Kolom 1 Arah Gradien: 136deg
• Kolom 1 Posisi Awal: 23%
• Posisi Akhir Kolom 1: 100%

Warna Latar Kolom 2

Gulir ke bawah dan gunakan '#dddddd' sebagai Warna Latar Kolom 2.

Perekat

Pindah ke tab Desain dan gunakan pengaturan berikut untuk subkategori Ukuran:

• Gunakan Lebar Kustom: Aktifkan
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Subkategori Spasi akan membutuhkan padding dan margin berikut:

• Padding Atas, Kanan, Bawah & Kiri: 0px
• Margin Atas: -150px
• Kolom 1 Padding Atas: 235px (Desktop), 0px (Tablet & Ponsel)
• Kolom 1 Padding Bawah: 235px (Desktop), 0px (Tablet & Ponsel)
• Kolom 2 Padding Atas: 150px
• Kolom 2 Padding Bawah: 150px

Bayangan Kotak

Buka subkategori Box Shadow dan gunakan pengaturan berikut:

• Posisi Horizontal Bayangan Kotak: -3px
• Posisi Vertikal Bayangan Kotak: -18px
• Kekuatan Buram Bayangan Kotak: 77px
• Kekuatan Penyebaran Bayangan Kotak: 23px
• Warna Bayangan: rgba(0,0,0,0.3)

Modul Teks Pertama

Kemudian, tambahkan Modul Teks pertama ke kolom kedua dan gunakan pengaturan berikut untuk subkategori Teks:

• Font Teks: Arvo
• Ukuran Font Teks: 34px
• Warna Teks: #7a7a7a
• Orientasi Teks: Tengah

Modul Teks Kedua

Tambahkan Modul Teks lain tetapi gunakan pengaturan berikut sebagai gantinya:

• Font Teks: Lato Light
• Orientasi Teks: Tengah

Buka subkategori Sizing, gunakan Width '75%' dan pilih bagian tengah Module Alignment.

Terakhir, tambahkan margin atas '50px'.

Baris Dua Kolom Kedua

Warna Latar Baris

Tambahkan baris dua kolom lainnya ke bagian tersebut dan pilih '#b99bc1' sebagai warna latar belakangnya.

Warna Latar Kolom 1

Gulir ke bawah dan pilih '#dddddd' untuk Warna Latar Kolom 1.

Perekat

Pindah ke tab Desain dan buat pengaturan berikut berlaku untuk subkategori Ukuran:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Selanjutnya, gunakan padding berikut:

• Padding Atas, Kanan, Bawah & Kiri: 0px
• Kolom 1 Padding Atas: 150px (Desktop), 0px (Tablet & Ponsel)
• Kolom 1 Padding Bawah: 50px (Desktop), 0px (Tablet & Ponsel)
• Kolom 2 Padding Atas: 150px
• Kolom 2 Padding Bawah: 150px

Bayangan Kotak

Buka subkategori Box Shadow dan gunakan pengaturan berikut:

• Posisi Horizontal Bayangan Kotak: -4px
• Posisi Vertikal Bayangan Kotak: 24px
• Kekuatan Buram Bayangan Kotak: 77px
• Kekuatan Penyebaran Bayangan Kotak: 23px
• Warna Bayangan: rgba(0,0,0,0.3)
• Posisi Bayangan Kotak: Bayangan Luar

Modul Gambar Pertama di Kolom Pertama

Lanjutkan dengan menambahkan Modul Gambar ke kolom pertama. Setelah mengunggah gambar, buat pengaturan berikut berlaku untuk subkategori Spasi:

• Tunjukkan Spasi Di Bawah Gambar: Ya
• Margin Atas: -500px (Desktop), 0px (Tablet & Ponsel)
• Margin Kanan: -50px (Desktop), 0px (Tablet & Ponsel)
• Margin Kiri: 200px (Desktop), 0px (Tablet & Ponsel)

Buka subkategori Box Shadow dan gunakan bayangan kotak berikut:

• Posisi Horizontal Bayangan Kotak: 2px
• Posisi Vertikal Bayangan Kotak: 2px
• Kekuatan Buram Bayangan Kotak: 0px
• Kekuatan Penyebaran Bayangan Kotak: 30px
• Warna Bayangan: rgba (255,255,255,0.68)
• Posisi Bayangan Kotak: Bayangan Luar

Kolom Gambar Kedua di Kolom Pertama

Tambahkan Modul Gambar lain ke kolom yang sama dan gunakan margin berikut:

• Margin Atas: -50px (Desktop), 0px (Tablet & Ponsel)
• Margin Kanan: 100px (Desktop), 0px (Tablet & Ponsel)
• Margin Bawah: 30px
• Margin Kiri: 100px (Desktop), 0px (Tablet & Ponsel)

Kemudian, gulir ke bawah dan gunakan bayangan kotak berikut:

• Posisi Horizontal Bayangan Kotak: 2px
• Posisi Vertikal Bayangan Kotak: 2px
• Kekuatan Buram Bayangan Kotak: 0px
• Kekuatan Penyebaran Bayangan Kotak: 30px
• Warna Bayangan: rgba (255,255,255,0.68)
• Posisi Bayangan Kotak: Bayangan Luar

Modul Teks Klon & Tempatkan di Kolom Kedua

Terakhir, klon dua Modul Teks dari baris sebelumnya dan letakkan di kolom kedua dari baris ini. Hanya ada satu hal yang harus Anda ubah; warna teks. Buka setiap pengaturan Modul Teks dan ubah warna teks menjadi '#FFFFFF'.

Hasil

Desktop

Semua langkah dalam posting ini akan mengarah ke hasil berikut di desktop:

Seluler

Dan berikut hasilnya di ponsel:

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana Anda dapat secara kreatif menggunakan bayangan kotak pada baris. Kami telah membuat contoh warna-warni di mana Anda dapat dengan jelas melihat bayangan kotak kedalaman yang diberikan ke tata letak. Jika Anda memiliki pertanyaan atau saran; pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan oleh Dmitry Guzhanin / shutterstock.com