Penjualan Ulang Tahun Elemen

Nikmati diskon 60% untuk pembelian baru, pembaruan dan peningkatan.

00 Hari -hari
:
00 Jam
:
00 Menit
:
00 Detik

Beli sekarang

Cara Membuat Scrolling Sticky Heading Untuk Navigasi Tautan Jangkar Unik Di Divi

Rifat Divi Tutorials Oct 18, 2021

Pernahkah Anda berpikir untuk membuat halaman yang memiliki sistem navigasi tautan jangkar tajuk lengket yang luar biasa di halaman itu? Sehat! Divi telah membuka pintu berbagai kemungkinan untuk pengembang web. Anda dapat membuat segala macam desain yang luar biasa melalui Divi . Hari ini kami akan merancang halaman web konten yang memungkinkan pengguna kami menjelajahinya melalui judul yang melekat sebagai tautan jangkar. Judul akan secara berurutan menempel di bagian atas halaman, dan pengunjung dapat mengklik hanya pada judul untuk melompat ke kanan pada bagian tersebut. Terdengar keren! Lalu mari kita ke tutorial hari ini, di mana kita akan membuat gaya ini dengan fitur bawaan Divi yang disebut -"Sticky Option."

Pratinjau Desain

Seperti inilah desain kami hari ini.

Bagian Satu: Memulai

Kami yakin Anda telah berhasil menginstal dan mengaktifkan tema Divi . Sekarang, tambahkan halaman baru dari dasbor Anda dan buka dengan Divi builder. Di sini kita akan pergi dengan opsi kedua yang mengatakan, "Pilih tata letak yang dibuat sebelumnya."

Kami akan mencari dari Paket Tata Letak Meal Kit

Penawaran luar biasa

Ulang tahun ke -6 Elementor dengan diskon hingga 60%

Mulai sekarang

Kami akan mengaktifkan tata letak dengan opsi "Gunakan Demo ini".

Bagian Dua: Modifikasi Tata Letak

Hapus Baris

Setelah Anda selesai mengimpor tata letak, hapus dua baris bawah terakhir.

Sekarang, Anda memiliki satu baris yang disebut "Langkah-1".

Pembuatan Baris Baru Dan Penambahan Konten

Tambahkan baris yang ditandai di bawah baris pertama.

Sekarang, pilih beberapa modul bersama-sama dan seret ke baris yang baru dibuat.

Bagian Tiga: Membuat Judul Lengket

Dalam tata letak ini, akan ada empat baris dan masing-masing akan berisi header lengket di kolom kirinya. Kami akan membuat yang pertama dan menduplikasi itu untuk sisa baris.

Langkah Satu: Buat Header Lengket Untuk Baris Pertama

Tambahkan modul teks ke kolom kiri. Ini akan menjadi heading lengket kami untuk baris ini.

Sekarang perbarui pengaturan berikut di bawah tab desain. Pastikan untuk melakukan perubahan pada header H4.

  • Judul 4 Berat Font: Tebal
  • Judul 4 Gaya Font: TT
  • Judul 4 Perataan Teks: Tengah
  • Judul 4 Ukuran Teks: 15px
  • Spasi Judul 4 Huruf: 3px
  • Pos 4 Tinggi Baris: 2em

Juga, perbarui pengaturan jarak dan sudut membulat.

  • Margin: 0px
  • Padding: 10px
  • Sudut Bulat: 3px

Di bawah tab lanjutan, perbarui pengaturan berikut pada efek lengket.

  • Offset Bawah Lengket: 150px (desktop), 0px (tablet)
  • Batas Tempel Atas: Bagian (desktop), Tidak Ada (tablet)
  • Batas Tempel Bawah: Bagian (desktop), Baris (tablet)
  • Offset Dari Elemen Lengket Sekitarnya: TIDAK

Sekarang, kembali ke tab konten dan ubah teks sesuai kebutuhan. Letakkan juga teks dengan heading H4 karena sebelumnya kita telah memodifikasi pengaturan H4. Juga, ubah warna latar belakang yang lengket.

  • Warna Latar Lengket: #febd2d

Kembali ke tab lanjutan dan perbarui indeks-Z dalam status lengket. Ini akan membuat teks tetap teratas di perangkat seluler.

  • Indeks Z (lengket): 10003

Tambahkan Lebih Banyak Konten

Kami perlu melampirkan beberapa konten lagi di bawah gambar sehingga kami memiliki cukup konten untuk digulir. Jadi tambahkan modul teks lain di bawah gambar dan tambahkan beberapa tulisan pilihan Anda.

Duplikat Baris 1

Terakhir, buat replika baris satu dengan menduplikasinya.

Langkah Kedua: Buat Header Lengket Untuk Baris Kedua

Sekarang ubah heading H4 di kolom 1.

Sekarang ubah pengaturan lengket.

  • Offset Atas Lengket: 50px (desktop), 0px (tablet)
  • Offset Bawah Lengket: 100px (desktop)
  • Batas Lengket Atas: Bagian (tablet)

Perbarui nilai indeks-Z.

  • Indeks Z (lengket): 10002

Duplikat Baris 2

Kemudian, buat lagi replika baris kedua dengan menduplikasinya.

Langkah Tiga: Buat Header Lengket Untuk Baris Ketiga

Sekali lagi, ubah H4 di kolom 1 dan beri nama sebagai Langkah - 3.

Sekarang ubah opsi tempel untuk teks.

  • Offset Atas Lengket: 100px (desktop)
  • Offset Bawah Lengket: 50px (desktop)

Sekali lagi, perbarui nilai indeks-Z untuk baris ketiga.

  • Indeks Z (lengket): 10001

Perbarui Indeks Z Untuk Setiap Kolom Satu

Kami telah menempatkan nilai indeks-Z untuk semua judul H4. Sekarang, kami juga akan memperbarui nilai untuk setiap kolom yang berisi judul tempel tersebut. Buka setiap kolom dan perbarui nilainya.

  • Baris 1
  • Baris 2
  • Baris 3

Bagian Tiga: Tautan Jangkar Untuk Judul Lengket

Sekarang kita akan menetapkan ID CSS ke baris sehingga pengguna dapat dengan mudah mengoperasikan seluruh halaman melalui baris tersebut.

Baris 1: Tautan Jangkar

Buka pengaturan baris 1 dan tambahkan id CSS berikut.

  • ID CSS: satu

Sekarang, Buka pengaturan modul teks di kolom 1 atau baris 1 dan tambahkan URL tautan modul.

  • URL Tautan Modul: #one

Baris 2: Tautan Jangkar

Buka pengaturan baris 2 dan tambahkan id CSS berikut.

  • ID CSS: dua

Sekarang, Buka pengaturan modul teks di kolom 1 atau baris 1 dan tambahkan URL tautan modul.

  • URL Tautan Modul: #dua

Baris 3: Tautan Jangkar

Buka pengaturan baris 3 dan tambahkan id CSS berikut.

  • ID CSS: tiga

Sekarang, Buka pengaturan modul teks di kolom 1 atau baris 1 dan tambahkan URL tautan modul.

  • URL Tautan Modul: #three

Tampilan Akhir

Jadi, inilah judul lengket gulir kami untuk desain navigasi tautan jangkar yang unik.

Kata-kata Terakhir

Sejujurnya, menggunakan judul yang lengket dalam desain web membawa lebih banyak pesona, dan ini membantu pengunjung menelusuri konten. Menggunakan tautan jangkar dapat meningkatkan pengunjung Anda dengan meningkatkan pengalaman pengguna dalam banyak cara. Opsi bawaan Divi ini memberi Anda lebih banyak cara untuk menyediakan situs web yang lebih baik bagi pengunjung Anda. Semoga tutorial ini akan membantu Anda dalam membuat judul yang lengket dengan navigasi tautan jangkar yang unik. Scrolling Sticky Heading Untuk Navigasi Tautan Jangkar Unik. Tolong, beri tahu kami topik apa lagi yang bisa kami bagikan dengan Anda. Selamat bersenang-senang dengan Divi .