Menyembunyikan Pembatas Bagian Bawah Salinan Anda dengan Elegan dalam Desain Menakjubkan dengan Divi

Opsi bawaan Divi memungkinkan Anda menggunakan satu pengaturan desain tertentu untuk berbagai tujuan, yang pada gilirannya membantu memicu kreativitas. Hari ini, kita akan menggunakan pembagi bagian dengan cara yang unik untuk menyembunyikan salinan situs web Anda secara elegan. Ini adalah cara yang bagus untuk menambahkan interaksi ekstra ke halaman Anda tanpa memerlukan kode khusus. Kami akan membuat ulang contoh yang indah dari awal dan Anda juga dapat mengunduh file JSON contoh secara gratis.

Mari kita lakukan!

Pratinjau

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

Desktop

Seluler

Unduh Tata Letaknya GRATIS

Untuk mendapatkan tata letak 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!

Mari Mulai Berkreasi!

Tambahkan Bagian #1

Hal pertama yang perlu Anda lakukan adalah menambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan.

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Tambahkan Modul Teks ke Kolom

Tambahkan Konten H2

Modul pertama yang kita butuhkan di baris ini adalah Modul Teks dengan beberapa konten H2.

Pengaturan Teks H2

Pindah ke tab desain dan ubah pengaturan teks H2.

• Judul 2 Font: Tampilan Playfair
• Judul 2 Berat Font: Reguler
• Judul 2 Perataan Teks: Tengah
• Judul 2 Ukuran Teks: 70px (Desktop), 40px (Tablet), 30px (Telepon)

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Modul kedua dan terakhir yang kita butuhkan di baris ini adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Kami juga mengubah warna garis di tab desain.

• Warna Garis: #000000

Perekat

Pindah ke pengaturan ukuran dan terapkan pengaturan berikut:

• Berat Pembagi: 5px
• Lebar: 27%
• Penyelarasan Modul: Pusat

Tambahkan Bagian #2

Warna latar belakang

Tambahkan bagian reguler kedua ke halaman Anda, buka pengaturan bagian dan ubah warna latar belakang.

• Warna Latar Belakang: #f7f7f7

Meluap

Pastikan Anda juga menyembunyikan bagian yang meluap di tab lanjutan. Ini akan memastikan tidak ada yang melebihi wadah bagian.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Transisi

Nanti di postingan ini, kita akan membuat transisi hover. Untuk memastikan ini berjalan dengan lancar, kami akan meningkatkan durasi transisi di tab lanjutan.

• Durasi Transisi: 800ms

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar wadah bagian dengan menerapkan pengaturan berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Tambahkan Modul Teks #1 ke Kolom

Tambahkan Konten H3

Saatnya mulai menambahkan modul, dimulai dengan Modul Teks. Masukkan beberapa konten H3 pilihan Anda.

Pengaturan Teks H3

Pindah ke tab desain dan ubah pengaturan teks H3.

• Judul 3 Font: Tampilan Playfair
• Judul 3 Perataan Teks: Tengah
• Judul 3 Warna Teks: #000000
• Judul 3 Ukuran Teks: 3vw (Desktop), 6vw (Tablet), 7vw (Telepon)

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Modul kedua yang kita butuhkan di baris ini adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Ubah warna pembagi juga.

• Warna Garis: #000000

Jarak

Dan tambahkan beberapa margin atas dan bawah khusus untuk menciptakan ruang.

• Margin Atas: 2vw
• Margin Bawah: 2vw

Tambahkan Modul Teks ke Kolom

Tambah isi

Modul selanjutnya yang kita butuhkan adalah Modul Teks lainnya. Tambahkan beberapa konten paragraf pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks.

• Font Teks: Buka Sans
• Perataan Teks: Tengah
• Warna Teks: #777777
• Ukuran Teks: 0.8vw (Desktop), 1.7vw (Tablet), 2.2vw (Telepon)
• Tinggi Baris Teks: 1.8em

Jarak

Tambahkan beberapa nilai margin kustom berikutnya.

• Margin Kiri: 3vw (Desktop), 7vw (Tablet), 10vw (Telepon)
• Margin Kanan: 3vw (Desktop), 7vw (Tablet & Ponsel)

Tambahkan Modul Tombol ke Kolom

Tambahkan Salinan

Modul berikutnya dan terakhir yang kita butuhkan di baris ini adalah Modul Tombol. Masukkan beberapa salinan pilihan Anda.

Penyelarasan

Ubah perataan tombol di tab desain.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Lanjutkan dengan menata pengaturan tombol.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Warna Teks Tombol: #000000
• Lebar Perbatasan Tombol: 1px
• Radius Perbatasan Tombol: 0px
• Font Tombol: Tampilan Playfair

Jarak

Dan tambahkan beberapa nilai spasi khusus juga.

• Margin Atas: 2vw
• Padding Atas: 1vw
• Padding Bawah: 1vw
• Padding Kiri: 3vw (Desktop), 6vw (Tablet), 8vw (Telepon)
• Padding Kanan: 3vw (Desktop), 6vw (Tablet), 8vw (Telepon)

Pengaturan Bagian Tambahan

Pembagi Atas Default

Setelah Anda selesai menambahkan semua modul ke bagian, saatnya untuk melalui beberapa pengaturan bagian tambahan. Buka pengaturan bagian, buka tab desain dan tambahkan pembagi atas berikut:

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: #e8e8e8
• Tinggi Pembagi: 7000px
• Flip Pembagi: Vertikal
• Pengaturan Pembagi: Di ​​Atas Konten Bagian

Arahkan Pembagi Atas

Ubah ketinggian pembagi saat mengarahkan kursor.

• Tinggi Pembagi: 0px

Pembagi Bawah

Tambahkan pembagi bawah juga.

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: #5c26ff
• Tinggi Pembagi: 600px
• Pengaturan Pembagi: Di ​​Atas Konten Bagian

Arahkan Pembagi Bawah

Dan hapus ketinggian pembagi saat melayang.

• Tinggi Pembagi: 0px

Jarak

Seperti yang Anda lihat di pratinjau pos ini, kami mengubah bagian ini menjadi lingkaran. Untuk melakukannya, pertama-tama kita perlu menambahkan beberapa nilai margin dan padding khusus di berbagai ukuran layar:

• Margin Kiri: 10vw (Desktop), 11vw (Tablet), 0vw (Telepon)
• Margin Kanan: 47vw (Desktop), 11vw (Tablet), 0vw (Telepon)
• Padding Atas: 8vw (Desktop), 15vw (Tablet), 16vw (Telepon)
• Padding Bawah: 8vw (Desktop), 15vw (Tablet), 16vw (Telepon)

Berbatasan

Lanjutkan dengan menambahkan '50vw' ke setiap sudut untuk mengubah bagian menjadi lingkaran. Kami juga menambahkan perbatasan menggunakan pengaturan berikut:

• Lebar Perbatasan: 1px
• Warna Perbatasan: rgba (255,255,255,0)

Arahkan Perbatasan

Ubah warna batas saat mengarahkan kursor.

• Warna Perbatasan: #000000

Bagian Klon Dua Kali

Setelah Anda menyelesaikan semua pengaturan bagian, Anda dapat melanjutkan dan mengkloning bagian tersebut dua kali.

Ubah Duplikat #1

Ubah Warna Pembagi Atas

Kami akan memodifikasi kedua duplikat bagian, dimulai dengan yang pertama. Buka pengaturan bagian dan ubah warna pembagi atas.

• Warna Pembagi: #5c26ff

Ubah Warna Pembagi Bawah

Ubah juga warna pembagi bawah.

• Warna Pembagi: #ff3a5e

Ubah Spasi

Kemudian, buka pengaturan spasi dan pastikan nilai berikut berlaku:

• Margin Atas: -20vw (Desktop), 0vw (Tablet & Ponsel)
• Margin Kiri: 47vw (Desktop), 11vw (Tablet), 0vw (Telepon)
• Margin Kanan: 10vw (Desktop), 11vw (Tablet), 0vw (Telepon)

Ubah Duplikat #2

Ubah Warna Pembagi Atas

Buka pengaturan duplikat kedua dan ubah warna pembagi atas.

• Warna Pembagi: #ff3a5e

Ubah Warna Pembagi Bawah

Ubah warna pembagi bawah juga.

• Warna Pembagi: #e8e8e8

Ubah Spasi

Dan ubah juga nilai spasi di sini.

• Margin Atas: -20vw (Desktop), 0vw (Tablet & Ponsel)
• Margin Bawah: 7vw
• Margin Kiri: 10vw (Desktop), 11vw (Tablet), 0vw (Telepon)
• Margin Kanan: 47vw (Desktop), 11vw (Tablet), 0vw (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 kepada Anda cara menyembunyikan salinan Anda di bawah pembagi bagian dengan elegan. Ini adalah cara yang bagus untuk menggunakan beberapa opsi bawaan Divi yang intuitif dengan cara lain dari biasanya. Kami harap tutorial ini menginspirasi Anda untuk membuat desain alternatif Anda sendiri menggunakan teknik ini juga. 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.