Cara Menampilkan Konten Kolom di Arahkan dengan Divi (Unduh Gratis!)

Di salah satu posting Divi terbaru, kami telah menunjukkan kepada Anda cara membuat konten baris tersembunyi muncul di hover. Hari ini, kami akan menunjukkan cara menggunakan jenis pendekatan yang sama untuk mengungkapkan konten kolom. Pendekatan yang akan kami tangani serupa dan akan memungkinkan Anda untuk membuat semua jenis desain yang memiliki efek hover yang bagus di desktop, tetapi bekerja dengan baik untuk ukuran layar yang lebih kecil tanpa opsi hover juga.

Kami berharap tutorial ini akan menginspirasi Anda untuk membuat semua jenis desain interaktif untuk situs web yang Anda buat! Di akhir posting, Anda akan dapat mengunduh file JSON dan menyesuaikannya dengan kebutuhan Anda.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya pada ukuran layar yang berbeda.

Desktop

Seperti yang Anda lihat di GIF di bawah, kami memiliki transisi hover yang mulus yang mengungkapkan konten kolom saat hover.

Seluler

Pada ukuran layar yang lebih kecil, di sisi lain, konten kolom sudah akan ditampilkan tanpa perlu melayang.

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Reguler Baru

Jarak

Buka halaman baru atau yang sudah ada dan tambahkan bagian reguler ke dalamnya. Buka pengaturan bagian dan tambahkan beberapa bantalan khusus atas dan bawah dalam pengaturan jarak.

• Padding Atas: 10vw
• Padding Bawah: 15vw

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan buat beberapa perubahan pada pengaturan ukuran. Pengaturan ini akan memungkinkan baris untuk mengambil seluruh lebar layar dan juga akan membantu menghapus semua ruang di antara kolom.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Pergi ke pengaturan jarak baris berikutnya. Di sini, kita akan mengganti ruang yang telah kita hapus pada langkah sebelumnya dengan menambahkan nilai padding kustom.

• Padding Kiri: 8vw
• Padding Kanan: 8vw
• Kolom 1 Padding Kanan: 2vw
• Kolom 2 Padding Kiri: 1vw
• Kolom 2 Padding Kanan: 1vw
• Kolom 3 Padding Kiri: 2vw

Tambahkan Modul Teks #1 ke Kolom 1

Tambah isi

Saatnya mulai menambahkan modul! Mulailah dengan Modul Teks di kolom 1. Tambahkan beberapa konten H3 pilihan.

Pengaturan Teks H3

Kemudian, buka pengaturan teks judul dan buat beberapa perubahan pada tampilan konten H3.

• Judul 3 Font: Didact Gothic
• Judul 3 Berat Font: Tebal
• Judul 3 Perataan Teks: Tengah
• Judul 3 Warna Teks: #3567ff
• Judul 3 Ukuran Teks: 1.2vw (Desktop), 20px (Tablet & Ponsel)

Jarak

Tambahkan beberapa nilai spasi khusus ke Modul Teks berikutnya.

• Margin Bawah: 4vw
• Padding Atas: 4vw
• Padding Bawah: 4vw

Bayangan Kotak

Dan beri modul bayangan kotak yang halus.

• Posisi Vertikal Bayangan Kotak: 36px
• Kekuatan Buram Bayangan Kotak: 60px
• Warna Bayangan: rgba (0,0,0,0.06)

Tambahkan Modul Teks #2 ke Kolom 1

Tambah isi

Lanjutkan dengan menambahkan Modul Teks lain tepat di bawah yang sebelumnya. Tambahkan beberapa konten paragraf pilihan.

Pengaturan Teks

Kemudian, buka tab desain dan buat beberapa perubahan pada pengaturan teks.

• Font Teks: Buka Sans
• Ukuran Teks: 0.8vw (Desktop), 14px (Tablet & Ponsel)
• Spasi Surat Teks: -0,05vw
• Tinggi Baris Teks: 2.2em
• Orientasi Teks: Dibenarkan
• Warna Teks: Gelap

Jarak

Bermain-main dengan margin kustom dan nilai padding dalam pengaturan spasi juga.

• Margin Bawah: 3vw
• Padding Atas: 2vw
• Padding Bawah: 2vw
• Padding Kiri: 4vw
• Padding Kanan: 4vw

Berbatasan

Dan tambahkan batas kiri dan kanan ke modul menggunakan pengaturan berikut:

• Lebar Batas Kanan: 1px
• Warna Batas Kanan: #e5e5e5

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Modul selanjutnya yang kita butuhkan pada kolom pertama adalah Button Module. Tambahkan beberapa salinan pilihan Anda.

Penyelarasan

Kemudian, buka tab desain dan ubah perataan tombol ke tengah.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Lanjutkan dengan membuka pengaturan tombol dan mengubah tampilan tombol agar sesuai dengan keseluruhan desain yang ingin kita capai.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 15px (Tablet & Ponsel)
• Warna Teks Tombol: #000000
• Lebar Perbatasan Tombol: 1px
• Warna Batas Tombol: #dddddd
• Radius Perbatasan Tombol: 0px
• Jarak Huruf Tombol: -0.05vw
• Berat Huruf: Tebal
• Gaya Font: Huruf Besar

Jarak

Bermain-main dengan nilai jarak dari Modul Tombol juga.

• Margin Bawah: 100px (Tablet & Ponsel)
• Padding Atas: 0.8vw (Desktop), 10px (Tablet & Ponsel)
• Padding Bawah: 0.8vw (Desktop), 10px (Tablet & Ponsel)
• Padding Kiri: 3.5vw (Desktop), 50px (Tablet & Ponsel)
• Padding Kanan: 3.5vw (Desktop), 50px (Tablet & Ponsel)

Kloning Modul di Kolom 1 Dua Kali & Tempatkan Duplikat di Kolom Tersisa

Setelah Anda selesai menambahkan tiga modul berbeda ke kolom 1, Anda dapat melanjutkan dan mengkloning masing-masing modul dua kali. Tempatkan duplikat di dua kolom yang tersisa untuk mencapai desain yang sama di masing-masing kolom.

Ubah Warna Teks Modul Teks #1 di Kolom 2

Buka Modul Teks pertama di kolom 2 dan ubah warna teks.

• Judul 3 Warna Teks: #6d28c1

Ubah Warna Teks Modul Teks #1 di Kolom 3

Lakukan hal yang sama untuk Modul Teks pertama di kolom ketiga.

• Judul 3 Warna Teks: #15668e

Tambahkan Modul Teks Overlay ke Kolom 1

Tambah isi

Sekarang setelah kita memiliki semua konten kolom yang kita butuhkan, kita dapat menambahkan elemen tumpang tindih yang akan menyembunyikan konten sebelum mengarahkan kursor. Untuk mencapai ini, kita akan menggunakan Modul Teks lain. Silakan dan tambahkan satu lagi ke kolom pertama. Pastikan ini adalah modul terakhir di kolom. Tambahkan beberapa konten pilihan Anda.

Latar Belakang Gradien

Lanjutkan dengan menambahkan latar belakang gradien ke modul.

• Warna 1: #6a30ff
• Warna 2: #3567ff
• Arah Gradien: 124deg

Pengaturan Teks

Ubah pengaturan teks selanjutnya.

• Font Teks: Didact Gothic
• Warna Teks: #ffffff
• Ukuran Teks: 2vw
• Orientasi Teks: Tengah

Jarak

Dan buat bentuk dari modul dengan menambahkan beberapa nilai padding khusus. Kami juga menambahkan beberapa margin atas negatif untuk membuat tumpang tindih antara modul ini dan konten kolom. Konten yang Anda sembunyikan di balik Modul Teks tidak akan dapat diklik. Itulah mengapa penting untuk menjaga agar ajakan bertindak, seperti tombol dalam contoh kita, terlihat tanpa mengarahkan kursor.

• Margin Atas: -38vw
• Padding Atas: 15vw
• Padding Bawah: 15vw

Berbatasan

Tambahkan beberapa sudut membulat ke Modul Teks berikutnya.

Bayangan Kotak

Bersamaan dengan bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 40px
• Warna Bayangan: rgba (0,0,0,0.16)

Filter Bawaan

Kemudian, buka pengaturan filter dan pastikan opacity adalah '100%' secara default.

• Opasitas: 100%

Arahkan Filter

Ubah opacity saat mengarahkan kursor ke '0%'. Ini akan membuat modul menghilang dan akan memungkinkan semua konten kolom muncul sebagai gantinya.

• Opasitas: 0%

CSS khusus

Untuk memastikan Modul Teks tetap berada di atas semua konten kolom, tambahkan dua baris kode CSS di tab lanjutan Modul Teks.

z-index: 99;
position: relative

Visibilitas

Dan sembunyikan seluruh modul di tablet dan ponsel. Seperti yang disebutkan di awal posting ini, kami menampilkan semua konten kolom pada ukuran layar yang lebih kecil untuk memastikan pengalaman pengguna yang dimiliki pengunjung baik.

Modul Teks Overlay Klon Dua Kali & Tempatkan Duplikat di Kolom Tersisa

Setelah Anda selesai memodifikasi Modul Teks overlay, lanjutkan dan klon dua kali. Tempatkan masing-masing duplikat di dua kolom yang tersisa.

Ubah Latar Belakang Gradien Modul Teks Overlay di Kolom 2

Ubah warna latar belakang gradien dari duplikat pertama.

• Warna 1: #d530ff
• Warna 2: #6d28c1

Ubah Latar Belakang Gradien Modul Teks Overlay di Kolom 3

Dan lakukan hal yang sama untuk duplikat kedua juga.

• Warna 1: #41ff30
• Warna 2: #15668e

Unduh Bagian ini GRATIS

Untuk meletakkan tangan Anda di bagian pengungkapan kolom, 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!

Pratinjau

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara mengungkapkan konten kolom saat mengarahkan kursor. Anda dapat menggunakan pendekatan ini untuk semua jenis situs web yang Anda buat untuk menambahkan tingkat interaksi ekstra. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!