Cara Menambahkan Tautan Navigasi Halaman Lengket (Berikutnya, Sebelumnya, Pertama, Terakhir) ke Bagian Divi

Terkadang lebih nyaman untuk menavigasi konten halaman dengan mengklik tombol daripada menggulir. Hal ini terutama berlaku untuk satu pager atau jika Anda memiliki bagian berurutan tertentu pada halaman yang menjamin aksesibilitas optimal bagi pengguna. Menambahkan tautan navigasi halaman tempel ke bagian bawah dapat menjadi alternatif unik untuk membuat pengguna menggulir terus-menerus atau menyertakan tautan jangkar di menu tajuk utama Anda.

Dalam tutorial ini, kami akan menunjukkan cara menambahkan tautan navigasi halaman tempel (berikutnya, sebelumnya, pertama, terakhir) ke halaman di Divi. Ini akan memungkinkan Anda untuk menavigasi ke bagian tertentu di seluruh halaman dengan mudah.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Perhatikan bagaimana tautan navigasi lengket berubah saat menggulir ke bawah halaman.

Perhatikan betapa mudahnya menavigasi ke setiap bagian dengan mengeklik tautan navigasi.

Dan inilah tampilan desain di ponsel.

Dan ini adalah codepen yang menunjukkan fungsionalitas inti.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. 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!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Menambahkan Tautan Navigasi Halaman Lengket ke Bagian Divi

Membuat Bagian Atas

Secara default, akan ada bagian reguler yang siap digunakan di Divi Builder. Menggunakan bagian reguler default, buka pengaturan bagian dan keluarkan bantalan bawah sebagai berikut:

• Padding: 0px bawah

Pengaturan Baris

Tambahkan baris satu kolom ke bagian.

Kemudian perbarui pengaturan desain untuk baris sebagai berikut:

• Lebar: 100%
• Lebar Maks: 80vw (desktop, tablet), 95vw (ponsel)

Judul Bagian

Untuk membuat judul bagian, pertama, tambahkan modul teks baru ke baris/kolom.

Kemudian perbarui teks isi dengan judul H2 berikut:

<h2>Top</h2>

Di bawah tab desain, perbarui pengaturan teks untuk judul H2 sebagai berikut:

• Pilih tab H2
• Judul 2 Font: Montserrat
• Judul 2 Berat Font: Berat
• Judul 2 Gaya Font: TT
• Judul 2 Perataan Teks: tengah
• Judul 2 Ukuran Teks: 8vw (desktop, tablet), 61.36px (ponsel)

Membuat Bagian 1

Selanjutnya, kita akan membuat bagian pertama kita yang akan berisi tautan navigasi lengket. Untuk membuat Bagian 1, duplikat bagian atas dan beri label pada bagian duplikat sesuai dengan tampilan lapisan.

Bagian 1 Warna Latar Belakang

Buka pengaturan untuk Bagian 1 dan perbarui warna latar belakang:

• Warna Latar Belakang: #fec0f4

Bagian 1 ID CSS untuk Navigasi Tautan Jangkar

Untuk menautkan ke bagian ini menggunakan tautan jangkar kami, kami perlu menambahkan ID CSS. Di bawah tab lanjutan, tambahkan ID CSS berikut:

• ID CSS: satu

Perbarui Teks Judul

Kemudian perbarui teks judul dalam modul teks untuk membaca "Bagian 1".

Membuat Baris Lengket untuk Bagian 1

Setelah Bagian dan Judul diperbarui, kita akan membuat baris lengket yang pada akhirnya akan menampung tautan navigasi kita. Untuk melakukannya, tambahkan satu baris kolom baru di bawah baris yang ada di Bagian 1.

Karena bagian kita tidak memiliki bantalan bawah, baris harus duduk dengan baik di bagian paling bawah.

Pengaturan Baris Lengket

Untuk membuat baris lengket, kita perlu memperbarui pengaturan baris.

Opsi Lengket

Di bawah tab lanjutan, perbarui opsi posisi lengket sebagai berikut:

• Posisi Lengket: Menempel ke Bawah
• Batas Lengket Atas: Bagian
• Offset dari Elemen Lengket Sekitarnya: TIDAK

Ini akan memastikan baris lengket akan terkandung di dalam bagian.

Pengaturan desain

Di bawah tab desain, perbarui yang berikut ini:

• Gunakan Lebar Talang Kustom: YA
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 25vw (desktop, tablet), 50% telepon
• Penjajaran Baris: kanan (desktop, tablet), kiri (ponsel)
• Padding: 0px atas, 0px bawah

Untuk menyembunyikan baris (bersama dengan tombol yang ada di dalamnya), kami akan memindahkan baris di belakang bagian di bawahnya menggunakan pengaturan transformasi terjemahan. Kemudian kita akan memindahkan baris ke atas ke tampilan saat dalam keadaan lengket. Ini akan memastikan tombol hanya terlihat saat dalam status lengket.

Untuk melakukan ini, klik ikon tempel (thumbnail) saat mengarahkan kursor ke judul opsi transformasi untuk mengaktifkan tab tempel. Kemudian perbarui opsi transformasi sebagai berikut:

• Transformasi terjemahan Sumbu Y (desktop): 100%
• Transform menerjemahkan Sumbu Y (lengket): 0%

Posisi Offset

Akhirnya, kita akan memiliki baris tongkat lain untuk tombol pertama dan terakhir yang akan menempel di kanan bawah jendela. Jadi kita perlu memindahkan baris tongkat ini ke kiri.

Untuk memindahkan baris lengket, buka tab lanjutan dan perbarui opsi offset posisi sebagai berikut:

• Offset Asal: kanan atas
• Offset Horizontal: 25vw (desktop, tablet), 0px (ponsel)

Catatan: Offset pada ponsel diatur ke 0px karena perataan baris akan diatur ke kiri dan lebarnya akan menjadi 50%.

CSS Kolom Baris Lengket

Untuk memastikan tombol kita duduk berdekatan satu sama lain dan disejajarkan secara vertikal, kita akan menambahkan potongan kecil CSS khusus untuk meletakkan tombol dalam tata letak kotak CSS.

Di bawah tab lanjutan, tambahkan CSS berikut ke Elemen Utama:

display:grid;
grid-template-columns:50% 50%;

Menambahkan Tombol Pembagi dan Berikutnya ke Baris Lengket (Bagian 1)

Sekarang saatnya untuk mulai menambahkan tombol kita ke kolom. Untuk bagian pertama ini, kita hanya membutuhkan Tombol Berikutnya. Jadi, kita membutuhkan pembagi untuk berfungsi sebagai tempat untuk tombol kiri.

Pembagi

Tambahkan pembagi baru ke kolom.

Kemudian atur opsi Tampilkan Pembagi ke "TIDAK".

Tombol Berikutnya

Di bawah modul pembagi, tambahkan modul tombol.

Kemudian perbarui pengaturan konten tombol:

• Teks Tombol: Selanjutnya
• URL Tautan Tombol: #dua

URL "#dua" akan melompat ke bagian berikutnya yang akan kita buat dengan ID CSS "dua".

Di bawah tab desain, perbarui yang berikut ini:

• Penjajaran Tombol: tengah
• Gunakan Gaya Kustom Untuk Tombol: YA
• Ukuran Teks Tombol: 2.1vw (desktop, tablet), 16.1px (ponsel)
• Warna Teks Tombol: #000000
• Latar Belakang Tombol: #eeeeee
• Lebar Batas Tombol: 0px
• Ikon Tombol: panah bawah (lihat tangkapan layar)
• Hanya Tampilkan Ikon di Arahkan untuk Tombol: TIDAK

• Margin: 2% benar

Untuk memastikan tombol menjangkau lebar penuh kolom kisi CSS, tambahkan CSS khusus berikut ke Elemen Utama:

display:block !important; width: 100%;

Membuat Bagian 2

Sekarang kita telah menyelesaikan Bagian 1, duplikat Bagian 1 untuk membuat Bagian 2 dan perbarui label dalam tampilan lapisan yang sesuai.

Perbarui Bagian 2 Warna Latar dan Teks Judul

Selanjutnya, perbarui warna latar belakang bagian:

• Warna Latar Belakang: #8dc6c1

Kemudian perbarui teks judul untuk membaca "Bagian 2" di modul teks baris atas.

Perbarui ID CSS Bagian 2

Di bawah tab lanjutan, perbarui bagian dengan ID CSS baru:

• ID CSS: dua

Tambahkan Tombol Berikutnya dan Sebelumnya ke Baris Lengket (Bagian 2)

Di dalam baris lengket Bagian 2, hapus modul pembagi dan duplikat tombol Berikutnya sehingga Anda memiliki dua tombol.

Perbarui URL Tautan Tombol Berikutnya

Buka pengaturan untuk tombol Berikutnya pertama/kiri dan perbarui tautan tombol sebagai berikut:

• URL Tautan Tombol: #three

URL “#three” akan melompat ke bagian berikutnya yang akan kita buat dengan ID CSS “tiga”.

Tambahkan Teks Tombol dan URL Tautan Sebelumnya

Untuk membuat tombol Sebelumnya, buka pengaturan untuk tombol kedua/kanan dan perbarui yang berikut:

• Teks tombol: Sebelumnya
• URL Tautan Tombol: #one

URL "#one" akan melompat kembali ke bagian dengan ID CSS "satu".

Tambahkan Ikon Tombol Sebelumnya

Kemudian perbarui ikon:

• Ikon Tombol: panah atas (lihat tangkapan layar)

Membuat Bagian 3

Sekarang kita telah menyelesaikan Bagian 2, duplikat Bagian 2 untuk membuat Bagian 3 dan perbarui label dalam tampilan lapisan yang sesuai.

Perbarui Bagian 3 Warna Latar dan Teks Judul

Tambahkan warna latar belakang baru ke bagian:

• Warna Latar Belakang: #9fa5f4

Kemudian perbarui teks judul untuk membaca "Bagian 3" di modul teks baris atas.

Perbarui ID CSS Bagian 3

Di bawah tab lanjutan, perbarui bagian dengan ID CSS baru:

• ID CSS: tiga

Tambahkan Pembagi dan Tombol Sebelumnya ke Baris Lengket (Bagian 3)

Tambahkan Pembagi dan Hapus Tombol Berikutnya

Kita dapat melanjutkan dan membuat bagian sebanyak yang diperlukan untuk menyertakan tombol Berikutnya dan Sebelumnya. Tapi untuk contoh ini, kita akan membuat Bagian 3 bagian terakhir dengan Link Navigasi.

Jadi, karena kita tidak memerlukan Tombol Berikutnya, hapus Tombol Berikutnya dan ganti dengan pembagi seperti yang kita lakukan di Bagian 1.

Perbarui URL Tautan Tombol Sebelumnya

Kemudian, buka pengaturan untuk tombol Sebelumnya dan perbarui URL Tautan:

• URL Tautan Tombol: #dua

URL "#dua" akan melompat kembali ke bagian dengan ID CSS "dua".

Membuat Bagian Bawah

Sekarang setelah 3 bagian selesai dengan navigasi baris lengket dan fungsionalitas tautan jangkar, kami akan membuat bagian bawah yang akan berfungsi sebagai bagian halaman yang tidak menyertakan navigasi lengket Berikutnya/Sebelumnya. Ini untuk menunjukkan jika ada bagian tambahan pada halaman yang mungkin tidak memerlukan navigasi yang lengket.

Untuk membuat bagian bawah, cukup duplikat Bagian Atas dan seret ke bawah Bagian 3.

Kemudian perbarui teks judul untuk membaca "Bawah".

Membuat Bagian Bawah Lengket

Untuk langkah terakhir kami, kami perlu membuat bagian lengket yang akan menempel di bagian bawah halaman dan berisi tautan navigasi (jangkar) Pertama dan Terakhir kami. Bagian ini harus berada di bagian bawah halaman jika Anda ingin tautan navigasi muncul di semua bagian halaman saat menggulir.

Di bawah Bagian Bawah, buat bagian reguler baru.

Kemudian perbarui label bagian dalam tampilan lapisan yang sesuai (mis. "Bagian Bawah Lengket").

Membuat Baris untuk Tautan Navigasi Pertama dan Terakhir

Untuk menambahkan lebih banyak fungsi navigasi ke halaman bagian kami, kami akan membuat dua tombol tambahan (atau tautan jangkar) yang akan melompat ke bagian pertama (bagian 1) dan terakhir (bagian 3) pada halaman.

Duplikat Sticky Row di Bagian 2 dan Seret ke Bagian Bawah Sticky

Untuk membuat baris untuk tautan navigasi Pertama dan Terakhir, kita dapat menduplikasi baris lengket (baris 2) dari Bagian 2 dan menyeretnya ke Bagian Bawah Lengket yang baru.

Perbarui Pengaturan Baris

Untuk bagian terakhir ini, kita akan membuat seluruh bagian menjadi lengket sehingga kita dapat menghapus pengaturan lengket yang diwarisi dari pengaturan baris duplikat dan memberikannya posisi absolut sebagai gantinya.

Buka pengaturan baris dan perbarui yang berikut ini:

Selanjutnya, perbarui opsi posisi sebagai berikut:

• Posisi: Absolut
• Lokasi: kanan bawah
• Offset Horisontal: 0px
• Posisi Lengket: Jangan Menempel

Di bawah tab desain, setel ulang opsi transformasi untuk baris.

Tambahkan Tombol Pertama dan Terakhir untuk Bagian Bawah Lengket

Untuk membuat tombol Pertama, buka pengaturan tombol di sebelah kiri dan perbarui yang berikut:

• Teks Tombol: Pertama
• URL Tautan Tombol: #one

Kemudian perbarui ikon Tombol ke panah atas yang berbeda.

Untuk membuat tombol Terakhir, buka pengaturan tombol di sebelah kanan dan perbarui yang berikut:

• Teks Tombol: Terakhir
• URL Tautan Tombol: #three

Kemudian perbarui ikon Tombol ke panah bawah yang berbeda.

Perbarui Pengaturan Bagian untuk Bagian Bawah Lengket

Selanjutnya, buka pengaturan bagian dan perbarui yang berikut:

• Lebar: 100%;
• Tinggi: 0 piksel;
• Padding: 0px atas, 0px kanan

Ini pada dasarnya memastikan bagian tersebut tidak menggunakan ruang yang sebenarnya di halaman. Tetapi karena baris memiliki posisi absolut, maka akan tetap ditampilkan di atas bagian.

Terakhir, di bawah tab lanjutan, perbarui yang berikut ini:

• Overflow Vertikal: terlihat
• Luapan Horisontal: terlihat
• Posisi Lengket: Menempel ke Bawah
• Batas Lengket Atas: Area Tubuh
• Offset Dari Elemen Lengket Sekitarnya: TIDAK

Hasil Akhir

Perhatikan bagaimana tautan navigasi lengket berubah saat menggulir ke bawah halaman.

Perhatikan betapa mudahnya menavigasi ke setiap bagian dengan mengeklik tautan navigasi.

Dan inilah tampilan desain di ponsel.

Pikiran Akhir

Tautan navigasi halaman lengket yang kami buat dalam tutorial ini akan berguna bagi mereka yang mencari alternatif efektif untuk pengguliran tradisional atau menyertakan tautan jangkar di tajuk global Anda. Dan, Anda dapat dengan mudah menduplikasi bagian dan memperbarui tautan jangkar (dan ID CSS yang sesuai untuk setiap bagian) untuk membuat lebih banyak konten.

Untuk hasil terbaik, setiap bagian harus memiliki konten yang cukup untuk melampaui tinggi browser. Jika tidak, tautan jangkar tersebut mungkin tidak menjadi lengket (atau terlihat). Salah satu cara mudah untuk memastikan hal ini terjadi adalah dengan memberikan masing-masing bagian Anda ketinggian minimum 100vh. Jika Anda tidak menyukainya, Anda selalu dapat memilih untuk menyingkirkan opsi transformasi translate sticky untuk setiap baris sticky sehingga tombol tetap terlihat.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!