Cara Mengubah Pembagi Horizontal menjadi Pembagi Vertikal dengan Divi

Setiap minggu, kami memberi Anda paket tata letak Divi baru dan gratis yang dapat Anda gunakan untuk proyek Anda berikutnya. Untuk salah satu paket tata letak, kami juga membagikan kasus penggunaan yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya.

Minggu ini, sebagai bagian dari inisiatif desain Divi kami yang sedang berlangsung, kami akan menunjukkan kepada Anda bagaimana mengubah Modul Pembagi horizontal standar yang kita semua tahu menjadi vertikal menggunakan Paket Tata Letak Perusahaan Bergerak Divi sebagai contoh. Pendekatan ini akan sangat berguna jika Anda mencoba membuat garis waktu di halaman Anda. Ini bagus untuk digunakan untuk bagian 'cara kerjanya' juga, dan banyak lagi. Setelah mengatur pembagi vertikal, kami akan menambahkan Modul Blurb di atasnya untuk membuat efek garis waktu. Tutorial ini tidak memerlukan kode CSS apa pun dan hanya didasarkan pada opsi bawaan Divi.

Mari kita lakukan!

Pratinjau

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

Mari Mulai Membuat: Tambahkan Halaman Baru & Unggah Halaman Arahan Paket Tata Letak Perusahaan Pindah

Tambahkan Halaman Baru & Beralih ke Visual Builder

Mari kita mulai dengan menambahkan halaman baru, menambahkan judul dan beralih ke Visual Builder.

Pilih Tata Letak Premade

Setelah Anda melakukannya, Anda akan memiliki kemampuan untuk membangun dari awal, memilih tata letak yang dibuat sebelumnya atau mengkloning halaman yang ada. Kami akan menggunakan halaman arahan Paket Tata Letak Perusahaan Pindah untuk membuat hasil akhir, jadi lanjutkan dan telusuri tata letak yang telah dibuat sebelumnya.

Pilih Halaman Arahan Paket Tata Letak Perusahaan Pindah

Gulir ke bawah tata letak yang dibuat sebelumnya sampai Anda menemukan Paket Tata Letak Perusahaan Pindah dan unggah halaman arahan ke halaman Anda.

Mulai Membuat Garis Waktu Pembagi Vertikal

Temukan Bagian Garis Waktu

Kami sekarang siap untuk mulai mengubah pembagi horizontal menjadi pembagi vertikal dan menggunakan pembagi itu untuk membuat garis waktu. Silakan dan temukan bagian berikut di halaman arahan Anda:

Tambahkan Bagian Standar Baru Di Bawah

Tepat di bawah bagian ini, tambahkan bagian standar.

Tempatkan Baris 'Cara Kerjanya' di Bagian Baru

Lanjutkan dengan menyeret baris 'Cara Kerja' dari bagian sebelumnya ke bagian baru Anda.

Tambahkan Baris Baru

Struktur Kolom

Tepat di bawah baris yang baru saja Anda tempatkan di bagian Anda, tambahkan satu lagi dengan struktur kolom berikut:

Jarak

Sebelum menambahkan modul apa pun, buka pengaturan baris Anda dan tambahkan '60px' ke margin atas.

Tambahkan Modul Pembagi ke Kolom 1

Sembunyikan Pembagi

Sekarang kita dapat mulai menambahkan modul! Kita akan mulai dengan kolom pertama dan setelah selesai, kita akan beralih ke kolom kedua. Hal pertama yang kita perlukan di kolom pertama adalah Modul Pembagi. Seperti yang disebutkan sebelumnya, kita akan mengubahnya menjadi vertikal. Langkah pertama untuk mencapai hasil yang kita inginkan adalah menonaktifkan opsi Show Divider.

Latar Belakang Gradien

Alih-alih menggunakan pembagi yang sebenarnya, kita akan membuat pembagi menggunakan latar belakang Modul Pembagi. Kami menggunakan latar belakang gradien berikut:

• Warna 1: #e0aa25
• Warna 2: #c11000

Perekat

Sekarang, kami sudah memastikan pembagi tidak terlihat. Langkah penting berikutnya untuk membuat pembagi vertikal adalah mengurangi lebar pembagi kita secara drastis. Kami menggunakan '2%' tetapi Anda dapat membuatnya tampak setebal yang Anda inginkan. Kami juga mengaktifkan Penyelarasan Modul tengah.

Jarak

Untuk meregangkan Modul Pembagi secara vertikal, kita akan menambahkan '480px' ke padding kustom atas dan bawah Modul Pembagi kita. Et voila, kami memiliki pembagi vertikal!

Tambahkan Modul Blurb dari Bagian Sebelumnya ke Kolom 1

Hal berikutnya yang akan kita lakukan adalah membuat garis waktu menggunakan pembagi vertikal ini. Dalam bagian sebelumnya, Anda akan menemukan tiga Modul Blurb. Silakan dan tempatkan masing-masing dari mereka di kolom pertama dari baris yang sedang Anda kerjakan, tepat di bawah Modul Pembagi.

Ubah Modul Blurb #1

Tambahkan Warna Latar Belakang

Kami akan menggunakan salah satu fitur efisiensi Divi untuk mempercepat proses saat mengedit Modul Blurb kami. Kami akan menerapkan semua perubahan pada Modul Blurb pertama dan setelah itu, kami hanya akan menyalin gaya modul dan menambahkannya ke Modul Blurb lainnya dalam satu klik. Buka Modul Blurb pertama Anda dan tambahkan 'rgba(255.255.255.0.73)' sebagai warna latar belakang.

Ubah Ukuran Font Ikon

Hal berikutnya yang perlu Anda lakukan adalah mengubah Ukuran Font Ikon menjadi '65px'.

Hapus Spasi

Kami juga akan menghapus semua margin di pengaturan Spasi. Nanti, kami akan menambahkan margin ke setiap Modul Blurb satu per satu karena nilainya berbeda.

Salin Gaya Modul Blurb & Tambahkan ke Modul Blurb Tersisa

Salin Gaya Modul Blurb

Kami selesai memodifikasi Modul Blurb pertama. Klik kanan padanya dan pilih 'Copy Module Styles'. Ini akan menyalin semua modifikasi yang baru saja kita buat.

Tempel Gaya Modul pada Modul Blurb yang Tersisa

Dan rekatkan gaya modul pada dua Modul Blurb yang tersisa. Anda akan melihat bahwa itu tidak mengubah konten, itu hanya mengubah pengaturan desain yang menghemat banyak waktu.

Jarak Modul Blurb

Modul Blurb #1

Seperti disebutkan sebelumnya, jarak dari Modul Blurb berbeda. Yang kedua tidak memiliki apapun kecuali yang pertama menggunakan '-900px' untuk margin atas. Setelah Anda menambahkan margin negatif ini, Anda akan melihat Modul Blurb menjadi bagian dari timeline. Di dalam Visual Builder, sepertinya Modul Pembagi berada di atas Modul Blurb. Tetapi begitu Anda keluar dari Visual Builder, Anda akan melihat semuanya berjalan pada tempatnya, jadi jangan khawatir tentang itu.

Modul Blurb #3

Buka Modul Blurb terakhir Anda berikutnya dan tambahkan '150px' ke margin bawah.

Jatuhkan Modul Gambar di Kolom 2

Cari Gambar

Kita sekarang dapat melanjutkan ke kolom 2! Satu-satunya modul yang kita perlukan adalah Modul Gambar. Kami menggunakan kembali salah satu yang sudah ada di halaman kami, jadi lanjutkan dan temukan:

Jatuhkan Gambar di Kolom 2

Jatuhkan dan seret ke kolom kedua Anda berikutnya.

Ubah Spasi

Untuk memusatkannya secara vertikal, kita akan menambahkan beberapa margin ke dalamnya:

• Margin Atas: 300px (Desktop), 30px (Tablet & Ponsel)
• Margin Bawah: 50px (Tablet & Ponsel)

Hapus Bagian Sebelumnya & Berikutnya

Kami selesai membuat bagian kami! Hal terakhir yang tersisa untuk dilakukan adalah menghapus bagian yang berlebihan.

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhir pada ukuran layar yang berbeda.

Pikiran Akhir

Dalam posting blog kasus penggunaan ini, kami telah menunjukkan kepada Anda cara mengubah pembagi vertikal menjadi pembagi vertikal menggunakan Paket Tata Letak Perusahaan Pindah Divi. Pendekatan ini sangat ideal jika Anda ingin membuat garis waktu di halaman Anda tanpa harus menggunakan kode tambahan apa pun. Ini semata-mata didasarkan pada opsi bawaan Divi. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!