Cara Membuat Desain "Kembali ke Atas" Lengket Kustom dengan Divi

Diterbitkan: 2019-06-19

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 cara membuat desain lengket kembali ke atas dengan Divi dan Paket Tata Letak Energi Hijau. Teknik ini akan membantu Anda meningkatkan pengalaman pengguna di halaman Anda sambil memanfaatkan opsi bawaan Divi di sisi desain. Kami harap tutorial ini menginspirasi Anda untuk membuat alternatif Anda sendiri kembali ke desain teratas dan menggunakannya di situs web Anda berikutnya!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasil dari tutorial ini.

GIF

kembali ke atas

Contoh 1

kembali ke atas

Contoh #2

kembali ke atas

Contoh #3

kembali ke atas

1. Tambahkan Gulir Halus ke Halaman HTML

Unggah Halaman Arahan Energi Hijau ke Halaman Baru

Hal pertama yang perlu Anda lakukan adalah membuat halaman baru dan mengunggah halaman arahan Paket Tata Letak Energi Hijau.

kembali ke atas

Buka Pengaturan Halaman

Buka pengaturan halaman dengan mengklik ikon yang ditandai di layar cetak di bawah ini:

kembali ke atas

Tambahkan Gulir Halus ke Kotak CSS Kustom

Pindah ke tab lanjutan dan tambahkan perilaku gulir halus ke seluruh halaman dengan menambahkan kode CSS berikut ke kotak CSS Kustom:

html {
scroll-behavior: smooth;
}

kembali ke atas

2. Tambahkan ID CSS ke Bagian Pahlawan

Buka Bagian Pahlawan

Desain back to top akan mengarahkan pengunjung ke bagian hero. Untuk melakukannya, Anda harus membuka pengaturan bagian pahlawan terlebih dahulu.

kembali ke atas

Tambahkan ID CSS

Lalu, buka tab lanjutan dan tambahkan ID CSS ke bagian tersebut. Nanti di posting ini, kami akan menambahkan tautan jangkar yang akan mengarahkan pengunjung ke bagian ini.

ID CSS: bagian-1

kembali ke atas

3. Tambahkan Bagian Baru ke Bawah Halaman dengan Desain "Kembali ke Atas"

Langkah Umum

Tambahkan Bagian Reguler Baru ke Bawah Halaman

Seperti yang Anda lihat di pratinjau posting ini, kami akan membuat ulang tiga contoh desain yang berbeda. Untuk merampingkan proses, kami akan memulai dengan beberapa langkah umum terlebih dahulu dan fokus pada setiap contoh desain satu per satu nanti di posting. Tambahkan bagian reguler baru ke bagian bawah halaman Anda.

kembali ke atas

Jarak

Buka pengaturan bagian dan hapus semua padding atas dan bawah default.

Padding Atas: 0px
Padding Bawah: 0px

kembali ke atas

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

kembali ke atas

Tambahkan Tautan Jangkar

Segera setelah seseorang mengklik seluruh baris, kami ingin mereka diarahkan ke bagian atas halaman. Untuk melakukannya, kami akan menambahkan tautan yang mengarahkan ke bagian pahlawan halaman.

URL Tautan Baris: yourwebsite.com/page/#section-1

kembali ke atas

Penjajaran Baris

Kami juga menempatkan baris di sisi kanan wadah bagian.

Penjajaran Baris: Kanan

kembali ke atas

Posisi tetap

Selanjutnya, kami membuat seluruh baris diperbaiki dengan membuka tab lanjutan dari baris dan memperbarui opsi posisi berikut:

Posisi: Tetap
Offset Vertikal: 30px
Offset Horisontal: 30px
Indeks Z: 99

Selain membuat baris tetap, kami memastikan baris tumpang tindih dengan semua konten halaman dengan meningkatkan indeks z.

kembali ke atas

Buat Ulang Contoh Desain #1

kembali ke atas

Pengaturan Baris

Ubah Struktur Kolom

Sekarang setelah kita melalui semua langkah umum, kita akan membuat ulang tiga contoh berbeda yang dapat Anda lihat di awal posting ini. Mari kita mulai dengan yang pertama! Ubah struktur kolom baris:

kembali ke atas

Warna latar belakang

Lanjutkan dengan membuka pengaturan baris dan tambahkan warna latar belakang putih.

Warna Latar Belakang: #ffffff

kembali ke atas

Perekat

Pindah ke tab desain dan ubah pengaturan ukuran.

Gunakan Lebar Talang Kustom: 1
Lebar: 9vw (Desktop), 23vw (Tablet), 35vw (Telepon)

kembali ke atas