3 Cara Bermanfaat Menggunakan Opsi Overflow di Divi

Opsi Overflow bawaan Divi membuatnya sangat mudah untuk menambahkan properti css overflow (mis. terlihat, tersembunyi, gulir) ke elemen apa pun di halaman. Ini berguna untuk membuat desain unik dan konten yang dapat digulir dengan mudah. Dalam posting ini, saya akan membahas apa yang sebenarnya dilakukan oleh opsi overflow ini. Dan, saya akan membahas tiga cara bermanfaat untuk menggunakan overflow di situs Divi Anda sendiri.

Mari kita mulai.

Memahami Opsi Overflow Divi

Opsi overflow Divi memungkinkan Anda untuk mengatur properti css overflow dari suatu elemen ke salah satu nilai berikut:

1. Default – Nilai default terlihat (lihat di bawah).
2. Terlihat – Konten yang meluap akan tetap terlihat dan tidak terpotong saat diperpanjang di luar kotak. Karena ini adalah pengaturan default di Divi, Anda jarang perlu memilihnya.
3. Gulir – Konten yang meluap akan disembunyikan, tetapi pengguna akan dapat menggulir konten yang tersembunyi baik secara vertikal maupun horizontal.
4. Tersembunyi – Konten yang meluap di luar kotak akan disembunyikan (tanpa kemampuan untuk menggulir)
5. Otomatis – Opsi ini akan mengaktifkan fungsi gulir kapan pun diperlukan (mis. konten melampaui kotak). Ini akan berguna untuk desain dengan tinggi atau lebar yang ditetapkan yang perlu memiliki kemampuan menggulir pada browser yang lebih kecil.

Divi memiliki opsi luapan untuk luapan horizontal dan vertikal yang memungkinkan Anda menetapkan nilai properti yang berbeda untuk masing-masing. Ini berguna ketika Anda ingin menambahkan fungsionalitas gulir vertikal ke elemen tetapi Anda tidak ingin bilah gulir juga muncul secara horizontal.

Berikut adalah beberapa ilustrasi singkat yang diambil dari desain dalam tutorial ini untuk membantu Anda memahami cara kerja opsi overflow.

Meluap Terlihat (default)

Dalam contoh ini, konten yang telah diposisikan di luar penampung baris tetap terlihat, yang merupakan pengaturan default untuk semua elemen di Divi.

Meluap Tersembunyi

Setelah Anda menambahkan properti tersembunyi overflow ke baris, konten di luar kotak menjadi terpotong dan disembunyikan sepenuhnya dari tampilan.

Gulir Meluap

Menggunakan gulir luapan memungkinkan Anda menyembunyikan konten di luar wadah kotak (seperti halnya luapan tersembunyi). Perbedaan utama adalah bahwa bilah gulir muncul memungkinkan pengguna untuk menggulir konten yang ada di luar batas wadah.

Sebagai contoh, berikut adalah modul teks dengan tinggi 400px. Isi modul teks melampaui modul teks tetapi tetap terlihat secara default.

Tetapi begitu Anda menambahkan properti gulir luapan vertikal ke modul teks, bilah gulir muncul memungkinkan pengguna untuk menggulir konten tersembunyi.

Sekarang setelah Anda memahami opsi overflow sedikit lebih baik, mari selami membangun beberapa contoh kerja cara bermanfaat untuk menggunakannya dalam kehidupan nyata.

Berlangganan Saluran Youtube Kami

3 Cara Bermanfaat Menggunakan Opsi Overflow Divi di Divi

#1 Menggunakan Overflow Hidden untuk Meng-Clip Konten Overflow untuk Desain Unik

Untuk memahami cara menggunakan properti overflow hidden, kita akan membuat contoh desain cepat dengan teks overflow dan gambar overflow. Kemudian kita akan melihat bagaimana desain berubah saat mengatur baris kita ke overflow hidden.

Pertama, buat bagian reguler dengan satu baris kolom. Sebelum kita mulai menambahkan modul, mari beri bagian padding berikut:

Padding Kustom: 12vw atas, 12vw bawah

Kemudian perbarui pengaturan baris sebagai berikut:

Lebar: 80vw
Lebar Maks: 80vw
Padding: 0px atas, 0px bawah
Bayangan Kotak: lihat tangkapan layar
Kekuatan Buram Bayangan Kotak: 80px

Kemudian tambahkan modul teks ke baris dan perbarui pengaturan modul teks berikut:

Pertama tambahkan heading h2 di kotak konten sebagai berikut:

<h2>Overflow</h2>

Kemudian perbarui pengaturan desain sebagai berikut:

Judul 2 Font: Lato
Judul 2 Berat Font: Tebal
Judul 2 Gaya Font: TT
Judul 2 Perataan Teks: tengah
Judul 2 Warna Teks: #dddddd
Judul 2 Ukuran Teks: 15vw
Spasi Judul 2 Huruf: 0.1em
Heading 2 Text Shadow: lihat tangkapan layar
Judul 2 Warna Bayangan Teks: rgba(0,0,0,0.05)

Sekarang, untuk membuat teks meluap ke area konten baris, kita perlu menggunakan margin khusus. Tambahkan margin khusus berikut ke modul teks untuk membuatnya meluap di atas baris (secara vertikal) dan di setiap sisi baris (secara horizontal).

Margin: -6vw atas, -10vw kiri, -10vw kanan

Selanjutnya, tambahkan modul teks lain di bawah yang baru saja Anda buat dan perbarui yang berikut:

Isi:

<h3>design</h3>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

(Omong-omong, cuplikan kode seperti ini adalah cara yang bagus untuk memanfaatkan opsi gulir luapan.)

Font Teks: Lato
Perataan Teks Teks: kanan
Ukuran Teks Teks: 24px (desktop), 16px (ponsel)
Tinggi Baris Teks: 1.3em
Lebar Maks: 50%
Penyelarasan Modul: kanan
Padding: 4vw benar

Sekarang, mari tambahkan gambar yang meluap di luar baris. Buat modul gambar baru di bawah dua modul teks dan kemudian unggah gambar pilihan Anda.

Kemudian perbarui pengaturan gambar sebagai berikut:

Lebar Maks: 35vw
Margin: -12vw atas, -8vw bawah, -5vw kiri
Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: -40px
Posisi Vertikal Bayangan Kotak: -50px
Warna Bayangan: rgba (0,0,0,0.17)

Desain dengan Baris diatur ke Overflow Visible (default)

Sekarang mari kita periksa desain yang menjaga agar baris melimpah kita tetap terlihat (default).

Seperti yang Anda lihat, opsi default overflow terlihat sangat bagus untuk membuat beberapa desain yang indah dan modern.

Desain dengan Baris diatur ke Overflow Hidden

Sekarang mari kita lihat apa yang terjadi ketika kita menggunakan properti Overflow Hidden untuk baris. Buka pengaturan baris dan perbarui yang berikut:

Luapan Horisontal: tersembunyi
Overflow Vertikal: tersembunyi

Inilah hasilnya.

Seperti yang Anda lihat, konten yang meluap (judul atas dan gambar) kini terpotong dan disembunyikan untuk membuat desain yang unik. Dan dengan pengaturan ini, Anda dapat dengan mudah memanfaatkan opsi transformasi untuk menskalakan dan memindahkan elemen untuk mendapatkan desain yang tepat.

#2 Menggunakan Overflow Scroll untuk Mengizinkan Pengguna Menggulir Konten Secara Vertikal

Contoh berikut ini memperkenalkan gulir luapan vertikal. Opsi luapan ini berguna untuk menambahkan konten yang dapat digulir ke daftar tautan atau sumber daya. Anda dapat mengubah modul atau baris apa pun menjadi wadah untuk konten yang dapat digulir. Berikut cara melakukannya dengan modul teks.

Buat bagian reguler dengan baris satu kolom. Kemudian tambahkan modul teks dengan konten berikut:

<h3>overflow scroll</h3>
<ol>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">consectetur adipiscing elit</a></li>
<li><a href="#">sed do eiusmod tempor</a></li>
<li><a href="#">incididunt ut labore et dolore</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">quis nostrud exercitation</a></li>
<li><a href="#">ullamco laboris nisi ut</a></li>
<li><a href="#">aliquip ex ea commodo</a></li>
<li><a href="#">Duis aute irure dolor in</a></li>
<li><a href="#">reprehenderit in voluptate</a></li>
<li><a href="#">velit esse cillum dolore eu</a></li>
<li><a href="#">fugiat nulla pariatur</a></li>
<li><a href="#">Excepteur sint occaecat</a></li>
<li><a href="#">cupidatat non proident</a></li>
<li><a href="#">sunt in culpa qui officia</a></li>
<li><a href="#">deserunt mollit anim id</a></li>
<li><a href="#">est laborum</a></li>
</ol>

Kemudian perbarui pengaturan desain modul teks sebagai berikut:

Font Teks: Lato

Warna Teks Tautan: #333333
Ukuran Teks Tautan: 18px

Warna Teks Daftar yang Dipesan:
Ukuran Teks Daftar yang Dipesan: 20px
Tinggi Baris Daftar yang Dipesan: 1.8em
Tipe Gaya Daftar yang Diurutkan: desimal-depan-nol

Judul 3 Berat Font: Ultra Tebal
Judul 3 Ukuran Teks: 50px
Lebar Maks: 500px
Padding: 3% atas, 3% bawah, 8% kiri, 8% kanan

Berikut adalah tampilan modul teks sebelum kita memberikan scroll tinggi dan overflow.

Sekarang, perbarui modul teks dengan tinggi maksimal 400px. Karena nilai luapan default untuk modul teks terlihat, Anda akan melihat teks meluap di bawah modul.

Yang perlu kita lakukan sekarang adalah mengatur overflow vertikal untuk menggulir sebagai berikut:

Luapan Vertikal: gulir

Berikut adalah desain akhir.

Untuk contoh lebih lanjut tentang cara menggunakan gulir luapan vertikal di situs Divi Anda, lihat posting ini:

• Cara Membuat Mockup Galeri Gulir dengan Opsi Overflow Baru Divi
• Cara Mendesain Area Widget Postingan Terbaru yang Dapat Digulir di Divi

#3 Menggunakan Overflow Scroll untuk Mengizinkan Pengguna Menggulir Konten Secara Horizontal

Menggunakan gulir luapan untuk pengguliran horizontal adalah cara lain untuk menjaga konten Anda tetap dapat diakses dari satu lokasi yang ringkas. Plus, ini juga merupakan cara yang bagus untuk menggabungkan fungsionalitas side-swiping di ponsel tanpa plugin.

Untuk menunjukkan cara melakukannya, kita akan membuat contoh singkat bersama-sama.

Pertama, buat bagian reguler dengan satu baris kolom.

Kemudian tambahkan modul uraian ke baris.

Anda dapat mengganti gambar default dengan gambar atau ikon baru. Kemudian perbarui pengaturan desain dengan beberapa penyesuaian:

Perataan Teks: tengah
Judul Font: Lato
Judul Font Berat: Berat
Padding: 3% kiri, 3% kanan

Gandakan modul uraian 5 kali sehingga Anda memiliki total 6 uraian di kolom baris Anda.

Kemudian perbarui pengaturan baris dengan CSS khusus berikut ke Elemen Utama Kolom.

display: grid;
grid-template-columns: repeat(6, 50%);

Ini akan memberikan kolom uraian Anda ke dalam tata letak kotak horizontal dengan 6 kolom masing-masing dengan lebar 50% dari wadah (atau dalam hal ini baris). Ini berarti bahwa dua uraian/kolom akan menempati ruang di dalam baris. 4 modul lainnya akan memanjang di luar baris ke sisi kanan. Di sinilah properti scroll overflow berguna. Perbarui opsi luapan berikut:

Luapan Horisontal: Gulir

Sekarang Anda dapat menyesuaikan lebar baris sesuai kebutuhan dan kedua uraian akan selalu berbaris dengan baik. Berikut adalah desain akhir.

Saya menambahkan bayangan kotak ke baris sehingga Anda dapat melihat kotak konten sedikit lebih baik. Perhatikan bagaimana dua uraian akan ditampilkan pada awalnya sampai pengguna menggulir ke kanan.

Untuk info lebih lanjut, lihat posting lengkap tentang membuat kartu gesek horizontal.

Pikiran Akhir

Elemen yang tumpang tindih dan elemen pemosisian di luar tata letak kisi yang khas menjadi lebih umum akhir-akhir ini. Sebagian besar, ini dilakukan murni untuk tujuan desain. Memahami cara menggunakan opsi luapan Divi akan membantu Anda memahami cara menyembunyikan atau menampilkan konten di luar wadah untuk membuat desain unik ini. Dan, memahami gulir luapan juga akan berguna untuk menambahkan konten yang dapat digulir ke situs web Anda.

Saya harap artikel ini telah membantu menjelaskan properti overflow dan bagaimana Anda dapat menggunakannya untuk proyek Divi Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!