Cara Membuat Halaman Gesek Sepenuhnya Horizontal dengan Divi

Pernahkah Anda berpikir untuk membuat halaman yang sepenuhnya horizontal yang menggunakan tautan gesek dan jangkar untuk bernavigasi? Nah, jika Anda pernah dan tidak tahu persis bagaimana mendekatinya, ini adalah pos yang ideal untuk Anda. Kami akan menunjukkan kepada Anda cara membuat halaman gesek yang sepenuhnya horizontal menggunakan Divi. Teknik ini sangat membantu Anda membuat situs web Anda menonjol dari yang lain dan cocok dengan tren desain web tahun 2019. Hasil yang akan kami buat akan terlihat bagus di semua ukuran layar.

Mari kita lakukan!

Pratinjau

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

Desktop

Seluler

Mendekati

• Kami akan membuat seluruh halaman hanya menggunakan satu bagian
• Kami mengubah bagian itu menjadi kisi horizontal menggunakan beberapa baris kode CSS di akhir tutorial
• Kisi horizontal akan menempatkan masing-masing baris dalam kolom yang ditempatkan secara horizontal
• Anda harus memutuskan berapa banyak kolom horizontal yang berisi bagian
• Dalam hal ini, kami akan menggunakan 4 kolom berbeda yang masing-masing terdiri dari 2 baris
• Anda dapat mengubah jumlah kolom horizontal yang Anda buat dan menentukan berapa banyak baris yang dikandung masing-masing kolom bagian
• Kami juga menggunakan tautan jangkar untuk membantu orang menavigasi melalui kolom bagian yang berbeda
• Selain itu, kami menambahkan scroll halus dan efek snap scroll bagian yang akan memudahkan navigasi pengunjung Anda

Mari Mulai Berkreasi

Tambahkan Bagian Baru

Warna latar belakang

Buat halaman baru dan tambahkan bagian reguler ke dalamnya. Buka pengaturan bagian dan ubah warna latar belakang.

• Warna Latar Belakang: #ffffff

Jarak

Kemudian, buka pengaturan spasi dan tambahkan beberapa bantalan khusus di berbagai ukuran layar.

• Padding Atas: 10.5vw (Desktop), 15vw (Tablet), 10vw (Telepon)
• Padding Bawah: 3vw (Desktop & Tablet), 10vw (Telepon)

Tambahkan Baris #1

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 layar.

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

Jarak

Buka pengaturan spasi berikutnya dan buat beberapa perubahan di semua ukuran layar yang berbeda.

• Padding Atas: 0px
• Padding Bawah: 0px
• Padding Kiri: 6vw (Tablet & Ponsel)
• Padding Kanan: 6vw (Tablet & Ponsel)
• Kolom 1 Padding Bawah: 15vw (Tablet & Ponsel)
• Kolom 2 Padding Kiri: 4vw (Desktop), 0vw (Tablet & Ponsel)

ID CSS

Kita harus menetapkan ID CSS ke baris pertama dari setiap kolom bagian yang kita buat. Ini akan membantu kami membuat panah jangkar nanti di posting ini.

• ID CSS: geser-1

CSS khusus

Seperti yang disebutkan di bagian pendekatan posting ini, kami juga menerapkan efek gulir dan gertakan yang halus ke mekanisme. Untuk dapat melakukannya, kita perlu menambahkan satu baris kode CSS ke baris pertama dari setiap kolom horizontal yang kita buat.

scroll-snap-align: start;

Tambahkan Modul Blurb ke Kolom 1

Pilih Ikon

Sekarang kita dapat mulai menambahkan modul! Mulailah dengan Modul Blurb di kolom 1. Buka pengaturan modul dan pilih ikon panah kiri.

Pengaturan Ikon

Kemudian, buka tab desain dan buat beberapa perubahan pada tampilan ikon.

• Warna Ikon: rgba(255,255,255,0)
• Penempatan Gambar/Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ikon Ukuran Font: 5vw (Desktop), 13vw (Tablet), 21vw (Telepon)

Jarak

Tambahkan beberapa nilai margin kustom berikutnya.

• Margin Atas: 14vw (Desktop), -11vw (Tablet), -17vw (Telepon)
• Margin Kiri: 60vw (Tablet & Ponsel)

Visibilitas

Kami juga menyembunyikan modul pada ukuran layar yang lebih kecil.

Tambahkan Modul Teks ke Kolom 2

Tambahkan Konten H2

Modul selanjutnya yang kita butuhkan adalah Modul Teks di kolom 2. Tambahkan beberapa konten H2.

Pengaturan Teks H2

Lalu, buka tab desain dan ubah pengaturan teks H2.

• Judul 2 Font: Sumber Serif Pro
• Judul 2 Perataan Teks: Kiri
• Judul 2 Ukuran Teks: 3vw (Desktop), 7vw (Tablet & Ponsel)

Perekat

Ubah lebar dalam pengaturan ukuran berikutnya.

• Lebar: 77%

Jarak

Dan tambahkan beberapa margin bawah untuk ukuran layar yang lebih kecil.

• Margin Bawah: 15vw (Tablet & Ponsel)

Tambahkan Modul Tombol ke Kolom 2

Tambah isi

Tepat di bawah Modul Teks yang telah Anda tambahkan, lanjutkan dan tambahkan Modul Tombol. Masukkan beberapa salinan.

Pengaturan Tombol

Lalu, buka tab desain dan ubah di sekitar pengaturan tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 0.9vw (Desktop), 2vw (Tablet), 3.5vw (Telepon)
• Warna Teks Tombol: #000000
• Lebar Perbatasan Tombol: 1px

• Warna Batas Tombol: #000000
• Radius Perbatasan Tombol: 0px
• Font Tombol: Mukta
• Berat Huruf: Tebal
• Gaya Font: Huruf Besar

Jarak

Tambahkan beberapa margin kustom dan padding berikutnya.

• Margin Atas: 6vw (Desktop), 4vw (Tablet & Ponsel)
• Padding Atas: 15px
• Padding Bawah: 15px
• Padding Kiri: 50px
• Padding Kanan: 50px

Tambahkan Modul Blurb ke Kolom 3

Pilih Ikon

Modul berikutnya dan terakhir yang kita butuhkan di baris ini adalah Modul Blurb lain di kolom 3. Pilih ikon pilihan Anda.

Tautan

Kemudian, buka pengaturan tautan dan tambahkan tautan yang akan mengarahkan pengunjung ke kolom horizontal kedua dari bagian tersebut.

• URL Tautan Modul: https://www.yourwebsite.com/page/#swipe-2

Pengaturan Ikon

Silakan dan ubah pengaturan ikon juga.

• Warna Ikon: #333333
• Penempatan Ikon Gambar: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ikon Ukuran Font: 5vw (Desktop), 13vw (Tablet), 21vw (Telepon)

Jarak

Lanjutkan dengan menambahkan beberapa margin atas dan kiri kustom di berbagai ukuran layar.

• Margin Atas: 14vw (Desktop), -11vw (Tablet), -17vw (Telepon)
• Margin Kiri: 60vw (Tablet & Ponsel)

Tambahkan Baris #2

Struktur Kolom

Baris kedua yang kita butuhkan menggunakan struktur kolom berikut:

Warna latar belakang

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

• Warna Latar Belakang: #f7f7f7

Perekat

Ubah pengaturan ukuran berikutnya.

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

Jarak

Seiring dengan nilai padding dan margin khusus dalam pengaturan spasi.

• Margin Atas: -3.5vw (Desktop), -10vw (Tablet), -17vw (Telepon)
• Padding Atas: 8vw (Desktop), 15vw (Tablet), 20vw (Telepon)
• Padding Bawah: 8vw (Desktop), 15vw (Tablet), 20vw (Telepon)
• Padding Kiri: 24vw (Desktop), 5vw (Tablet & Ponsel)
• Padding Kanan: 24vw (Desktop), 5vw (Tablet & Ponsel)
• Kolom 1 Padding Kanan: 2vw (Desktop), 0vw (Tablet & Ponsel)
• Kolom 2 Padding Kiri: 2vw (Desktop), 0vw (Tablet & Ponsel)

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Silakan dan tambahkan Modul Teks ke kolom pertama. Masukkan beberapa salinan pilihan Anda (termasuk judul H3).

Pengaturan Teks

Buka tab desain dan ubah pengaturan teks.

• Font Teks: Buka Sans
• Ukuran Teks: 0.65vw (Desktop), 1.8vw (Tablet), 2.7vw (Telepon)
• Tinggi Baris Teks: 1.8em

Pengaturan Teks H3

Bersamaan dengan pengaturan teks H3.

• Judul 3 Font: Mukta
• Judul 2 Berat Font: Tebal
• Judul 3 Gaya Font: Huruf Besar
• Judul 3 Ukuran Teks: 0.8vw (Desktop), 3vw (Tablet), 4vw (Telepon)
• Pos 3 Tinggi Baris: 1.8em

Jarak

Tambahkan beberapa margin bawah untuk ukuran layar yang lebih kecil juga.

• Margin Bawah: 5vw (Tablet & Ponsel)

Modul Teks Klon & Tempatkan di Kolom 2

Setelah Anda selesai memodifikasi Modul Teks di kolom 1, Anda dapat mengkloningnya dan menempatkan duplikatnya di kolom kedua.

Ubah Konten

Pastikan Anda mengubah konten.

Baris Klon #1 Tiga Kali

Setelah kedua baris Anda selesai, Anda dapat mengkloning baris pertama 3 kali.

Ubah Duplikat #1

Ubah ID CSS Baris

Kita harus mengubah ID CSS dari duplikat pertama.

• ID CSS: geser-2

Ubah Warna Ikon Modul Blurb (Kolom 1)

Seiring dengan warna Modul Blurb pertama.

• Warna Ikon: #333333

Ubah Tautan Kedua Modul Blurb

Untuk membuat tautan jangkar berfungsi, Anda harus mengubah tautan masing-masing panah yang sesuai:

• URL Tautan Modul: https://www.yourwebsite.com/page/#swipe-1

• URL Tautan Modul: https://www.yourwebsite.com/page/#swipe-3

Ubah Duplikat #2

Ubah ID CSS Baris

Ubah ID CSS dari duplikat kedua.

• ID CSS: geser-3

Ubah Warna Ikon Modul Blurb (Kolom 1)

Seiring dengan warna ikon Modul Blurb pertama.

• Warna Ikon: #333333

Ubah Tautan Kedua Modul Blurb

Dan sekali lagi, ubah tautan dari setiap Modul Blurb yang sesuai:

• URL Tautan Modul: https://www.yourwebsite.com/page/#swipe-2

• URL Tautan Modul: https://www.yourwebsite.com/page/#swipe-4

Ubah Duplikat #3

Ubah ID CSS

Ubah juga ID CSS dari duplikat baris ketiga.

• ID CSS: geser-4

Ubah Ikon (Kolom 2) Modul Blurb

Dan pilih ikon lain untuk Modul Blurb di kolom 3.

Ubah Tautan Modul Blurb (Kolom 2)

Pastikan bahwa pada klik, pengunjung akan diarahkan ke kolom bagian pertama dengan memodifikasi URL Link Modul yang sesuai:

• URL Tautan Modul: https://www.yourwebsite.com/page/#swipe-1

Baris Klon #2 Tiga Kali

Ke baris berikutnya. Kloning baris ini tiga kali juga.

Ubah Warna Latar Belakang Baris Duplikat #1

Ubah warna latar belakang duplikat pertama.

• Warna Latar Belakang: #dcdced

Ubah Warna Latar Baris Duplikat #2

Duplikat kedua menggunakan warna latar belakang berikut:

• Warna Latar Belakang: #ffeed1

Ubah Warna Latar Belakang Baris Duplikat #3

Ubah warna latar belakang duplikat baris ketiga juga.

• Warna Latar Belakang: #d6ffe5

Tambahkan ID CSS & Kode CSS ke Bagian

Sekarang kita memiliki semua baris yang kita butuhkan, kita bisa membuat keajaiban terjadi. Tambahkan ID CSS ke seluruh bagian. Nanti di postingan ini, kita akan menggunakan ID CSS ini untuk menyembunyikan scrollbar.

• ID CSS: bilah gulir bagian

Kemudian, buka opsi Custom CSS dan tambahkan beberapa baris kode CSS ke elemen utama.

overflow-y: scroll;
display: grid;
grid-template-columns: repeat(4, 100%);
scroll-behavior: smooth;
scroll-snap-type: x mandatory;

Semakin banyak kolom bagian yang ingin Anda buat, semakin banyak kolom yang harus Anda tambahkan dalam kode CSS. Jadi, misalnya Anda ingin memiliki struktur yang sama tetapi mengizinkan 7 gesekan alih-alih 4, Anda harus memodifikasi baris kode CSS kolom template grid yang sesuai:

grid-template-columns: repeat(7, 100%);

Namun ingatlah bahwa Anda harus menambahkan lebih banyak baris jika Anda menambah jumlah kolom. Jadi dalam hal ini, jika Anda ingin dua baris muncul per kolom bagian, Anda memerlukan 14 baris.

Sembunyikan Bilah Gulir

Anda juga dapat memilih untuk menyembunyikan bilah gulir dengan menggunakan bagian ID CSS dan menambahkan baris kode CSS berikut ke pengaturan halaman:

#section-scrollbar::-webkit-scrollbar {
display: none;
}

Pratinjau

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

Desktop

Seluler

Pikiran Akhir

Saat mendesain situs web dengan Divi, hal yang paling mudah dilakukan adalah membangun ke bawah. Tetapi hanya karena itu adalah hal yang paling mudah untuk dilakukan, tidak berarti Anda terbatas pada pilihan itu. Anda juga dapat membuat halaman gesek yang sepenuhnya horizontal. Dalam tutorial ini, kami telah menunjukkan kepada Anda bagaimana mencapai beberapa desain web gesek horizontal yang menakjubkan menggunakan Divi. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!