Menggunakan Batas Modul Indeks Z Rendah sebagai Latar Belakang dengan Divi

Saat Anda mencoba membuat desain unik untuk situs web Anda, berpikir di luar kebiasaan dapat membantu Anda mencapainya. Dalam tutorial sebelumnya, kami sering menggunakan elemen desain untuk opsi bawaannya. Ini tidak hanya membantu Anda mempertahankan tampilan waktu nyata dari desain yang Anda buat, tetapi juga membantu Anda membuatnya terlihat persis seperti yang Anda inginkan di berbagai ukuran layar. Dalam tutorial Divi hari ini, kami akan menunjukkan kepada Anda bagaimana menggunakan batas indeks z rendah modul untuk membuat desain yang menakjubkan dan yang dapat digunakan untuk berbagai tujuan. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Batas Modul Indeks Z Rendah GRATIS

Untuk mendapatkan tata letak batas modul indeks z rendah gratis, Anda harus mengunduhnya 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!

Berlangganan Saluran Youtube Kami

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Jarak

Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan hapus padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Meluap

Pindah ke tab lanjutan dan ubah overflow.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah warna latar belakang.

• Warna Latar Belakang: #f3f3e6

Perekat

Pindah ke tab desain dan ubah pengaturan ukuran yang sesuai:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus padding atas dan bawah default dari baris berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Pengaturan Kolom 1

Setelah Anda menyelesaikan pengaturan baris, Anda dapat membuka pengaturan kolom pertama dan membuat beberapa perubahan.

Latar Belakang Gradien

Tambahkan latar belakang gradien menggunakan pengaturan berikut:

• Warna 1: rgba(0,0,0,0)
• Warna 2: #2e2d3c
• Arah Gradien: 90 derajat
• Posisi Awal: 54%
• Posisi Akhir: 54%

Bayangan Kotak

Tambahkan bayangan kotak juga.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba(0,0,0,0.3)

Tambahkan Modul Teks #1 ke Kolom 1

Biarkan Kotak Konten Kosong

Saatnya mulai menambahkan modul! Masukkan Modul Teks di kolom pertama dan biarkan kotak konten kosong. Kami akan menggunakan modul ini hanya untuk pengaturan bawaannya. Karena posisinya (modul pertama di kolom pertama), modul memiliki indeks z rendah dan akan muncul di bawah semua yang mengikutinya.

Perekat

Pindah pada tab desain dan ubah lebar di berbagai ukuran layar.

• Lebar: 24vw (Desktop), 50vw (Tablet & Ponsel)

Jarak

Buka pengaturan spasi berikutnya dan ubah nilainya sebagai berikut:

• Margin Atas: 15vw
• Margin Kiri: 12vw (Desktop), 30vw (Tablet & Ponsel)
• Padding Atas: 32vw (Desktop), 67vw (Tablet), 60vw (Telepon)

Berbatasan

Selesaikan desain modul dengan menambahkan perbatasan.

• Lebar Perbatasan: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)
• Warna Perbatasan: #00ffb2

Tambahkan Modul Teks #2 ke Kolom 1

Tambah isi

Tambahkan Modul Teks lain ke kolom 1 dan masukkan beberapa konten pilihan Anda.

Warna latar belakang

Cocokkan warna latar belakang dengan warna gradien kedua kolom.

• Warna Latar Belakang: #2e2d3c

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Montserrat
• Berat Font Teks: Tebal
• Gaya Font Teks: Huruf Besar
• Perataan Teks: Tengah
• Warna Teks: #f3f3e6
• Ukuran Teks: 4vw
• Spasi Surat Teks: -0,2vw

Perekat

Ubah lebarnya juga.

• Lebar: 27vw

Jarak

Kemudian, pergi ke pengaturan spasi dan bermain-main dengan nilai-nilai di berbagai ukuran layar.

• Margin Atas: -23.2vw (Desktop), -46vw (Tablet & Telepon)
• Margin Kiri: 21.5vw (Desktop), 64.5vw (Tablet), 64vw (Telepon)
• Padding Atas: 4vw
• Padding Bawah: 4vw
• Padding Kiri: 2vw
• Padding Kanan: 2vw

Ubah Putar

Selesaikan pengaturan modul dengan memutar modul di pengaturan transformasi.

• Kiri: 270 derajat

Tambahkan Modul Gambar ke Kolom

Unggah Gambar

Modul berikutnya dan terakhir yang kita butuhkan di kolom 1 adalah Modul Gambar. Unggah gambar semi-transparan pilihan Anda.

Perekat

Buka tab desain dan aktifkan opsi 'Force Fullwidth'. Ini akan membantu kami membuat gambar responsif di berbagai ukuran layar.

• Paksa Lebar Penuh: Ya

Jarak

Buka pengaturan spasi berikutnya dan ubah nilainya sebagai berikut:

• Tampilkan Spasi Di Bawah Gambar: Tidak
• Margin Atas: -6vw
• Margin Kiri: 3vw
• Padding Kanan: 22vw (Desktop), 47vw (Tablet & Ponsel)

Filter

Kami juga mengurangi saturasi gambar dalam pengaturan filter.

• Saturasi: 43%

Tambahkan Modul Teks #2 ke Kolom 2

Tambah isi

Ke kolom berikutnya! Masukkan beberapa konten pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks sebagai berikut:

• Font Teks: Montserrat
• Perataan Teks: Justify
• Warna Teks: #2e2d3c
• Ukuran Teks: 0.9vw (Desktop), 2.2vw (Tablet), 2.5vw (Telepon)
• Tinggi Baris Teks: 2.5em

Jarak

Tambahkan beberapa nilai spasi kustom berikutnya.

• Margin Atas: 10vw (Desktop), 15vw (Tablet & Ponsel)
• Padding Kiri: 8vw
• Padding Kanan: 8vw

Modul Teks Klon

Setelah Anda menyelesaikan Modul Teks, klon sekali.

Hapus Margin Atas

Hapus margin atas duplikat.

Tempatkan Modul Teks Baru Di Antara Kedua Modul Teks di Kolom 2

Tambah isi

Tambahkan Modul Teks lain tepat di antara kedua Modul Teks yang ada di kolom dan masukkan beberapa konten pilihan Anda.

Pengaturan Teks

Ubah pengaturan teks sebagai berikut:

• Font Teks: Montserrat
• Berat Font Teks: Semi Tebal
• Warna Teks: #2e2d3c
• Ukuran Teks: 2vw (Desktop), 5vw (Tablet & Ponsel)
• Tinggi Baris Teks: 1.4em

Jarak

Ubah nilai padding juga.

• Padding Atas: 4vw (Desktop), 8vw (Tablet), 10vw (Telepon)
• Padding Bawah: 4vw (Desktop), 8vw (Tablet), 10vw (Telepon)
• Padding Kiri: 4vw
• Padding Kanan: 4vw

Tambahkan Modul Tombol ke Kolom 2

Tambahkan Salinan

Ke Modul Tombol berikutnya dan terakhir. Masukkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Pindah ke tab desain dan ubah pengaturan tombol.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 0.9vw (Desktop), 2.5vw (Tablet), 3vw (Ponsel)
• Warna Teks Tombol: #f3f3e6
• Warna Latar Tombol: #2e2d3c
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px
• Font Tombol: Montserrat

Jarak

Selesaikan desain Modul Tombol dengan menambahkan beberapa nilai spasi khusus dan selesai!

• Margin Atas: 2vw (Desktop), 8vw (Tablet & Ponsel)
• Margin Bawah: 10vw (Desktop), 15vw (Tablet & Ponsel)
• Margin Kiri: 8vw
• Padding Atas: 1.5vw (Desktop), 2.5vw (Tablet), 3vw (Telepon)
• Padding Bawah: 1.5vw (Desktop), 2.5vw (Tablet), 3vw (Telepon)
• Padding Kiri: 4vw (Desktop), 8vw (Tablet), 10vw (Telepon)
• Padding Kanan: 4vw (Desktop), 8vw (Tablet), 10vw (Telepon)

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan cara kreatif menggunakan pengaturan batas indeks z rendah modul kosong untuk membuat hasil yang menakjubkan. Kami juga menyertakan beberapa salinan yang diputar dalam desain kami. Tutorial ini menunjukkan betapa serbagunanya opsi bawaan Divi dan bagaimana Anda dapat mengubah pengaturan setiap elemen agar sesuai dengan ukuran layar yang berbeda. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.