Membuat Navigasi Samping Kolom Kustom untuk Satu Halaman dengan Divi

Saat Anda memutuskan untuk membuat satu halaman, pengalaman pengguna navigasi menjadi sangat berbeda. Meskipun orang tidak dimaksudkan untuk meninggalkan halaman, Anda ingin membuat mereka tetap ramah pengguna. Itu sebabnya kebanyakan one-pager menggunakan tautan jangkar dalam halaman. Anda dapat menempatkan tautan jangkar ini di menu atas tradisional atau memilih navigasi samping sebagai gantinya. Dalam tutorial ini, kami akan menunjukkan cara membuat desain navigasi samping kolom yang indah untuk halaman Anda menggunakan opsi kolom baru Divi. Kami akan memasukkan semua elemen ke dalam ketinggian 100 viewport untuk menciptakan pengalaman layar penuh. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Tata Letak Navigasi Sisi Kolom GRATIS

Untuk meletakkan tangan Anda pada tata letak navigasi sisi kolom 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!

Berlangganan Saluran Youtube Kami

Buat Halaman Kosong Baru

Hal pertama yang perlu Anda lakukan adalah membuat halaman kosong baru. Setelah Anda melakukannya, beralihlah ke Visual Builder.

Tambahkan Bagian Baru

Warna latar belakang

Kami akan memasukkan semua konten halaman kami ke dalam satu bagian, satu baris dan dua kolom. Tambahkan bagian reguler baru ke halaman Anda dengan warna latar belakang putih.

• Warna Latar Belakang: #FFFFFF

Jarak

Hapus semua padding atas dan bawah default dari bagian tersebut.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran yang sesuai:

• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%
• Tinggi: 100vh

Jarak

Pindah ke pengaturan spasi dan hapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Pengaturan Kolom 1

Setelah Anda menyelesaikan pengaturan baris umum, buka pengaturan kolom 1.

Warna latar belakang

Tambahkan warna latar belakang putih.

• Warna Latar Belakang: #FFFFFF

Bayangan Kotak

Bersamaan dengan bayangan kotak yang halus.

• Posisi Horizontal Bayangan Kotak: 80px
• Kekuatan Buram Bayangan Kotak: 75px
• Warna Bayangan: rgba (0,0,0,0.07)

Transformasi Skala

Kami juga mengecilkan ukuran kolom di desktop.

• Bawah: 75% (Desktop), 100% (Tablet & Ponsel)
• Kanan: 75% (Desktop), 100% (Tablet & Ponsel)

Ubah Terjemahan

Ubah posisi kolom menggunakan beberapa pengaturan terjemahan transformasi kustom berikutnya.

• Bawah: -5vw (Desktop), 0px (Tablet & Ponsel)
• Kanan: 0px

Pengaturan Kolom 2

Lanjutkan dengan membuka pengaturan kolom 2.

Jarak

Pindah ke tab desain dan tambahkan nilai padding kiri dan kanan berikut di berbagai ukuran layar:

• Padding Kiri: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)
• Padding Kanan: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)

Kelas CSS

Nanti di postingan, kami akan menambahkan scroll halus dan menyembunyikan scrollbar. Untuk melakukannya, kita perlu menambahkan kelas CSS khusus ke kolom.

• Kelas CSS: kolom gulir

Visibilitas

Modul yang kami tambahkan di kolom kedua akan mewakili konten halaman kami. Untuk mengizinkan pengguliran, kami akan mengubah pengaturan luapan.

• Luapan Horisontal: Tersembunyi
• Luapan Vertikal: Gulir

Tambahkan Modul Teks Item Menu ke Kolom 1

Tambahkan Salinan

Mari mulai menambahkan modul! Tambahkan item menu pertama Modul Teks ke kolom 1 dengan beberapa konten pilihan Anda.

Tambahkan Tautan

Tambahkan tautan jangkar ke item menu.

• URL Tautan Modul: www.yourwebsite.com/yourpage/#home

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Montserrat
• Perataan Teks: Tengah
• Warna Teks: #383838
• Ukuran Teks: 3vw
• Spasi Huruf Teks: -3px (Desktop), -2px (Tablet), -1px (Telepon)

Jarak

Tambahkan beberapa nilai margin atas dan bawah kustom berikutnya.

• Margin Atas: 23vw (Desktop), 3vw (Tablet & Ponsel)
• Margin Bawah: 3vw (Desktop), 2vw (Tablet), 1vw (Telepon)

Item Menu Klon Dua Kali

Setelah Anda menyelesaikan item menu pertama, klon dua kali.

Ubah Konten Kedua Duplikat

Ubah konten item menu dari kedua duplikat.

Ubah Tautan Kedua Duplikat

Seiring dengan tautan jangkar.

• Duplikat 1: /#tentang
• Duplikat 2: /#layanan

Ubah Spasi Kedua Duplikat

Selesaikan duplikat dengan mengubah nilai spasi yang sesuai:

• Margin Atas: 3vw (Desktop), 2vw (Tablet), 1vw (Telepon)
• Margin Bawah: 3vw (Desktop), 2vw (Tablet), 1vw (Telepon)

Tambahkan Modul Pembagi ke Kolom 1

Visibilitas

Tambahkan Modul Pembagi tepat di antara Modul Teks pertama dan kedua di kolom 1. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Ubah warna garis selanjutnya.

• Warna Garis: #ffebc9

Perekat

Seiring dengan pengaturan ukuran.

• Berat Pembagi: 1vw
• Tinggi: 0px

Modul Pembagi Klon

Kloning Modul Pembagi dan tempatkan duplikat di bawah Modul Teks kedua.

Tambahkan Modul Ikuti Media Sosial ke Kolom 1

Tambahkan Jejaring Sosial

Modul selanjutnya dan terakhir yang kita butuhkan di kolom 1 adalah Modul Follow Media Sosial. Tambahkan jejaring sosial pilihan Anda.

Penyelarasan

Kemudian, buka tab desain dan ubah perataan modul.

• Penyelarasan Modul: Pusat

Jarak

Ubah nilai margin berikutnya.

• Margin Atas: 12vw (Desktop), 5vw (Tablet & Ponsel)
• Margin Bawah: 3vw (Tablet & Ponsel)

Berbatasan

Dan tambahkan '50vw' ke masing-masing sudut untuk membuat bentuk melingkar.

Tambahkan Modul Gambar ke Kolom 2

Unggah Gambar

Ke kolom kedua! Tambahkan semua modul yang Anda inginkan tetapi jangan lupa untuk menambahkan ID CSS ke setiap modul yang Anda inginkan untuk dirujuk oleh tautan jangkar. Jika Anda ingin membuat ulang desain persis seperti yang ditampilkan di pratinjau posting ini, mulailah dengan menambahkan Modul Gambar dan unggah gambar pilihan Anda.

Penyelarasan

Pindah ke tab desain dan pilih perataan gambar kiri.

• Perataan Gambar: Kiri

Perekat

Ubah pengaturan ukuran berikutnya.

• Paksa Lebar Penuh: Ya

Jarak

Dan tambahkan beberapa bantalan yang tepat.

• Padding Kanan: 20vw

ID CSS

Terakhir, buka tab lanjutan dan tambahkan ID CSS pertama. Pastikan ini cocok dengan tautan jangkar item menu pertama.

• ID CSS: Beranda

Tambahkan Modul Teks Judul ke Kolom 2

Tambahkan Konten H2

Ke modul berikutnya, yaitu Modul Teks. Masukkan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Pindah ke tab desain dan ubah pengaturan teks H2 yang sesuai:

• Judul 2 Font: Montserrat
• Judul 2 Perataan Teks: Kiri
• Judul 2 Warna Teks: #383838
• Judul 2 Ukuran Teks: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)
• Spasi Judul 2 Huruf: -1px

Jarak

Tambahkan beberapa nilai margin kustom berikutnya.

• Margin Atas: 6vw (Desktop), 10vw (Tablet), 12vw (Telepon)
• Margin Bawah: 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)

Tambahkan Modul Pembagi ke Kolom 2

Visibilitas

Modul selanjutnya yang kita butuhkan adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Ubah warna garis.

• Warna Garis: #ffebc9

Perekat

Dan ubah pengaturan ukuran yang sesuai:

• Berat Pembagi: 15px
• Lebar: 16%
• Penyelarasan Modul: Kiri

Tambahkan Modul Teks Isi ke Kolom 2

Tambah isi

Tambahkan Modul Teks lain ke kolom kedua dengan beberapa konten paragraf pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Roboto
• Perataan Teks: Justify
• Warna Teks: #a8a8a8
• Ukuran Teks: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Spasi Huruf Teks: 1px
• Tinggi Baris Teks: 2vw (Desktop), 3.5vw (Tablet), 4.5vw (Telepon)

Jarak

Tambahkan beberapa nilai spasi kustom berikutnya.

• Margin Atas: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)
• Margin Bawah: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)
• Margin Kanan: 20vw (Desktop & Tablet), 5vw (Telepon)

Tambahkan Modul Tombol ke Kolom 2

Tambah isi

Lanjutkan dengan menambahkan Modul Tombol dengan beberapa salinan pilihan Anda.

Penyelarasan

Pilih perataan tombol kiri di tab desain.

• Penjajaran Tombol: Kiri

Tombol

Ubah pengaturan tombol yang sesuai:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #0072ff
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px
• Font Tombol: Montserrat
• Berat Huruf Tombol: Semi Tebal

Jarak

Dan bermain-main dengan nilai spasi juga.

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

Klon Semua Modul di Kolom 2 Dua Kali & Tempatkan dalam Urutan Yang Sama

Setelah Anda menyelesaikan semua modul di kolom 2, Anda dapat mengkloningnya dua kali dan menempatkannya dalam urutan yang benar.

Ubah Modul Gambar Duplikat #1 CSS ID

Ubah ID CSS dari Modul Gambar duplikat pertama.

• ID CSS: tentang

Ubah Modul Gambar Duplikat #2 ID CSS

Lakukan hal yang sama untuk Modul Gambar duplikat kedua.

• ID CSS: layanan

Sembunyikan Bilah Gulir & Tambahkan Gulir Halus

Buka Pengaturan Halaman

Sekarang, untuk membuat efek gulir halus dan menyembunyikan bilah gulir kolom 2, kita akan menambahkan beberapa baris kode CSS. Buka pengaturan halaman.

Tambahkan CSS Khusus

Kemudian, buka tab lanjutan dan tambahkan beberapa kode CSS. Setelah Anda menyelesaikan langkah ini, Anda selesai!

.scroll-column::-webkit-scrollbar {
display: none;
}

.scroll-column {
scroll-behavior: smooth;
}

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 membuat navigasi sisi kolom yang indah untuk satu halaman Anda dengan opsi kolom baru Divi. Ini adalah cara yang bagus untuk menambahkan tautan jangkar ke halaman Anda yang akan membantu meningkatkan pengalaman pengguna situs web Anda. 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.