4 Tombol Gulir Animasi untuk Bagian Pahlawan Situs Divi Anda (dan Cara Membuatnya)
Diterbitkan: 2019-08-08Tombol Gulir Animasi memiliki pekerjaan sederhana namun penting untuk menarik perhatian pengguna dan mengarahkan mereka ke halaman web Anda. Jenis tombol ini biasanya ditemukan di paro atas sehingga pengunjung dapat dengan mudah mengklik tombol tanpa harus menggulir ke bagian penting berikutnya dari halaman web. Bahkan, Divi memiliki fitur tombol gulir ini di dalam modul header fullwidth.
Dalam tutorial ini, saya akan menunjukkan cara membuat tombol gulir animasi kustom sepenuhnya di Divi. Jadi, jika Anda mencari alternatif kreatif untuk tombol gulir bawaan Divi dalam modul header lebar penuh, desain tombol gulir animasi ini akan membantu mengarahkan Anda ke arah yang benar (secara harfiah).
Sneak Peek
Berikut ini sekilas desain yang akan kita buat bersama.
Unduh Tata Letak Tombol Gulir Animasi 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 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.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Berlangganan Saluran Youtube Kami
Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda harus memiliki yang berikut:
- Tema Divi diinstal dan aktif
- Halaman baru dibuat untuk membangun dari awal di ujung depan (pembuat visual)
- Gambar yang akan digunakan untuk konten tiruan
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Membangun Bagian Header
Sebelum kita mulai mendesain tombol gulir animasi, kita perlu mengatur bagian header tiruan kita. Karena kita akan lebih berkonsentrasi untuk mendapatkan desain tombol gulir animasi, kita akan menjaga desain header tetap sederhana dengan latar belakang gelap. Setelah selesai, kita dapat menduplikasi bagian tersebut untuk menangani setiap desain tombol gulir baru.
Untuk memulai, buat bagian reguler dengan satu baris kolom.
Kemudian sebelum Anda menambahkan modul, buka pengaturan bagian dan tambahkan latar belakang gelap sebagai berikut:
Warna Latar Belakang: #222222
Latar belakang gelap apa pun akan berfungsi.
Tambahkan Teks Header
Untuk membuat teks header tiruan, tambahkan modul teks baru ke baris satu kolom.
Kemudian perbarui konten isi dengan header h1 tepat di atas teks paragraf default.
<h1>scroll button animation</h1> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
Kemudian perbarui pengaturan desain sebagai berikut:
Font Teks: Karla
Perataan Teks Teks: Tengah
Judul Teks Ukuran: 5vw
Warna Teks: Cahaya
Ini akan menjadi desain bagian dasar yang akan kita gunakan untuk tombol gulir animasi yang berbeda.
Desain Tombol Gulir Animasi #1: Teks Vertikal dengan Animasi Pantulan Lambat
Dengan desain bagian dasar kami di tempat, kami siap untuk menambahkan tombol gulir animasi pertama kami. Tombol gulir ini terdiri dari modul uraian yang akan memiliki ikon di sisi kanan. Kemudian teks dan ikon akan diputar secara vertikal sehingga ikon panah mengarah ke bawah. Setelah itu kita akan menambahkan animasi bouncing dengan durasi yang lambat.
Berikut cara melakukannya.
Pertama, tambahkan baris satu kolom baru tepat di bawah baris kita yang berisi teks header.
Kemudian tambahkan modul uraian ke baris.
Di bawah pengaturan uraian, hapus konten isi default dan tambahkan yang berikut:
Judul: gulir
Gunakan Ikon: YA
Ikon: panah kanan (lihat tangkapan layar)
Kemudian perbarui pengaturan desain sebagai berikut:
Warna Ikon: #ffffff
Penempatan Gambar/Ikon: Kiri
Gunakan Ukuran Font Ikon: YA
Ukuran Font Ikon: 50px
Judul Font Gaya: TT
Warna Teks Judul: #ffffff
Ukuran Teks Judul: 14px
Spasi Huruf Judul: 3px
Tinggi Baris Judul: 50px (sama dengan ukuran font ikon)
Selanjutnya, kita perlu memberikan uraian lebar kita dan memutarnya secara vertikal sebagai berikut:
lebar: 132px
Penyelarasan Modul: tengah
Transformasi Putar sumbu Z: 90 derajat
Sekarang yang perlu kita lakukan adalah membalikkan urutan konten uraian sehingga ikon panah berada di kanan uraian, bukan kiri. Ini akan membuat tampilan panah di bawah teks vertikal sebagaimana dimaksud. Untuk melakukan ini, kita perlu menambahkan CSS khusus berikut ke Elemen Utama:
direction: rtl;
Menambahkan Animasi Pulsa Lambat
Untuk menambahkan animasi, perbarui yang berikut ini:
Gaya Animasi: Bounce
Arah Animasi: Bawah
Durasi Animasi: 5000ms
Penundaan Animasi: 400ms
Gambar/Ikon Animasi: kiri ke kanan
Hasil Akhir
Sekarang mari kita lihat hasil akhir untuk desain #1.
Desain Tombol Gulir Animasi #2: Animasi Teks Marquee Vertikal
Desain berikutnya ini dibangun dari desain #1 di mana kita akan menyimpan tombol gulir teks vertikal yang dibuat menggunakan modul uraian. Perbedaannya akan menjadi animasi. Untuk desain ini kita akan menambahkan animasi slide yang dimulai dengan tombol gulir yang disembunyikan di atas wadah baris dan kemudian diakhiri dengan tombol yang disembunyikan di bawah baris. Dengan animasi pada loop, ini akan membuat efek animasi text marquee yang menarik perhatian pengguna.
Berikut cara melakukannya.
Pertama duplikat seluruh bagian desain #1.
Perbarui Pengaturan Baris 2
Selanjutnya, perbarui baris bagian yang berisi modul blurb/tombol gulir sebagai berikut:
Luapan Horisontal: tersembunyi
Overflow Vertikal: tersembunyi
Perbarui Pengaturan Modul Blurb
Untuk membuat animasi tenda, pertama-tama kita perlu menggunakan transform translate untuk memindahkan teks uraian di bawah wadah baris (tersembunyi dari tampilan). Ini akan menjadi posisi teks di akhir animasi. Perbarui berikut ini:
Transformasi Terjemahkan sumbu Y: 115px
Selanjutnya, tambahkan pengaturan animasi berikut:
Gaya Animasi: Slide
Arah Animasi: Bawah
Durasi Animasi: 4000ms
Intensitas Animasi: 195%
Animasi Mulai Opacity: 100%
Kurva Kecepatan Animasi: Linear
Pengulangan Animasi: Loop
Hasil Akhir
Sekarang mari kita lihat hasil akhir untuk desain #3.
Desain Tombol Gulir Animasi #3: Tab Panah dengan Animasi Geser Turun Tertunda
Untuk desain selanjutnya ini, kita akan menggabungkan modul teks dan modul blurb untuk membuat desain tab panah yang unik.
Untuk desain ini kita akan mulai dengan desain bagian header dasar. Jadi Anda dapat menduplikasi bagian desain duplikat #3 dan kemudian menghapus modul uraian di baris 2.
Kemudian tambahkan modul teks ke baris satu kolom langsung di bawah baris pertama.
Kemudian perbarui konten tubuh dengan kata "gulir".
Kemudian perbarui pengaturan desain sebagai berikut:
Warna Latar Belakang: #ffffff
Warna Teks Teks: #222222
Perataan Teks: tengah
Lebar: 50px
Penyelarasan Modul: tengah
Margin: 0px bawah
Padding: 20px atas, 20px bawah
Sudut Bulat 5px kiri bawah, 5px kanan bawah
Tambahkan Ikon Blurb
Sekarang modul teks sudah terpasang, kita perlu membuat ikon uraian tepat di bawahnya untuk menyelesaikan desain tab panah. Untuk melakukan ini, tambahkan modul uraian baru di bawah modul teks.
Kemudian hapus judul default dan teks isi. Kemudian tambahkan perbarui berikut ini:
Gunakan Ikon: YA
Ikon: segitiga panah bawah (lihat tangkapan layar)
Kemudian perbarui pengaturan sebagai berikut:
Warna Ikon: #ffffff
Margin: -36px atas, 0px bawah
Margin negatif ini akan melampirkan panah ke modul teks untuk desain tab panah yang bagus.
Kemudian tambahkan css berikut ke gambar uraian untuk menghilangkan beberapa margin yang tidak perlu di bawah ikon.
CSS Gambar Kabur:
margin-bottom: 0px;
Baris 2 Pengaturan dan animasi
Karena kita ingin menambahkan animasi yang sama ke kedua modul yang membentuk desain tombol gulir, kita perlu menambahkan animasi ke baris yang memuatnya. Perbarui pengaturan untuk baris sebagai berikut:
Lebar Maks: 100px
Padding: 0px atas, 0px bawah
Gaya Animasi: Slide
Arah Animasi: Bawah
Durasi Animasi: 1200ms
Baris 1 Warna Latar Belakang dan Bayangan Kotak
Sentuhan terakhir dari desain ini melibatkan penambahan warna latar belakang ke baris pertama tepat di atas baris tombol gulir. Dan dengan memperbarui indeks Z dari baris itu, kami akan mengizinkan animasi tombol gulir muncul seolah-olah menerobos header.
Buka pengaturan untuk baris 1 sebagai berikut:
Warna Latar Belakang: #222222
Z-Indeks: 10
Bayangan Kotak: lihat tangkapan layar
Posisi Vertikal Bayangan Kotak: 80px
Kekuatan Buram Bayangan Kotak: 22px
Kekuatan Penyebaran Bayangan Kotak: -70px
Warna Bayangan: #222222 (pastikan ini cocok dengan warna latar belakang)
Hasil Akhir
Sekarang lihat hasil akhirnya.
Desain Tombol Gulir Animasi #4: Animasi Menggulir Mouse
Untuk tombol gulir animasi terakhir ini, kita akan membuat animasi gulir mouse dengan menggabungkan modul teks dan modul uraian.
Berikut cara melakukannya.
Untuk memulai, Anda dapat menggunakan bagian header dasar. Kemudian tambahkan baris baru di bawah baris 1.
Tambahkan Modul Blurb
Selanjutnya, tambahkan modul uraian ke baris. Kemudian hapus judul default dan teks isi.
Setelah itu, perbarui ikon sebagai berikut:
Gunakan Ikon: YA
Ikon: lingkaran (lihat tangkapan layar)
Kemudian perbarui pengaturan desain uraian sebagai berikut:
Warna Ikon: #ffffff
Gunakan Ukuran Font Ikon: YA
Ukuran Font Ikon: 15px
Gaya Animasi: Slide
Arah Animasi: Bawah
Durasi Animasi: 1200ms
Pengulangan Animasi: Loop
Gambar/Ikon Animasi: Tanpa Animasi
Kemudian tambahkan CSS khusus berikut ke Gambar Blurb:
margin-bottom: 0px;
Tambahkan Modul Teks
Selanjutnya, tambahkan modul teks baru langsung di bawah modul uraian. Kemudian perbarui teks isi dengan kata "gulir".
Kemudian perbarui pengaturan teks berikut:
Warna Teks Teks: #ffffff
Perataan Teks: tengah
Lebar: 90px
Margin: 10px atas, -30px kiri
Perbarui Pengaturan Baris 2
Sekarang perbarui pengaturan baris sebagai berikut:
Lebar: 30px
Tinggi: 60px
Sudut Bulat: 16px
Lebar Perbatasan: 1px
Warna Perbatasan: #ffffff
Gaya Perbatasan: Padat
Luapan Horisontal: terlihat
Overflow Vertikal: terlihat
Hasil akhir
Sekarang mari kita lihat hasil akhirnya:
Menambahkan Fungsi Tautan Jangkar
Tautan jangkar adalah tautan yang melompat ke berbagai bagian halaman. Mereka sering digunakan dalam situs web satu halaman. Kami dapat menggunakan konsep yang sama untuk menambahkan tautan jangkar ke tombol gulir kami sehingga mereka melompat ke bawah halaman ke bagian yang diinginkan. Untuk menambahkan fungsionalitas tautan jangkar ke tombol gulir animasi Anda, ada dua hal utama yang perlu Anda lakukan.
- Anda Perlu Menambahkan ID CSS ke Bagian atau Baris yang ingin Anda lompat
- Anda Perlu Menambahkan tautan jangkar dengan ID CSS yang sama ke tombol gulir Anda
Inilah cara kerjanya. Pertama, buat bagian baru di bawah bagian header yang berisi tombol gulir. Kemudian berikan bagian baru ID CSS di bawah tab lanjutan.
Kemudian temukan elemen/tombol gulir yang ingin Anda ubah menjadi tautan jangkar Anda dan tambahkan url yang dimulai dengan tagar (atau simbol pound) dan segera diikuti oleh ID CSS dari elemen yang Anda lompati.
Misalnya, jika ID CSS bagian tersebut adalah "bagian-2", maka Anda akan menambahkan "#bagian-2" sebagai URL tautan.
Ingat, Divi memungkinkan Anda untuk menambahkan URL tautan ke setiap elemen di Divi, jadi jangan ragu untuk menambahkan tautan ke seluruh baris yang berisi tombol gulir animasi.
Untuk info lebih lanjut, lihat beberapa hal keren yang dapat Anda lakukan dengan tautan jangkar.
Menjadi kreatif!
Jangan takut untuk menggabungkan modul yang berbeda dan menganimasikannya dengan cara yang berbeda. Bahkan, saat saya sedang menjelajahi cara baru untuk mendesain tombol gulir dengan Divi, saya membuat animasi gulir ibu jari yang menyenangkan yang dapat digunakan untuk seluler. Saya telah memasukkannya ke dalam unduhan gratis di atas jika Anda ingin memeriksanya.
Pikiran Akhir
Tombol gulir animasi seperti ini mudah dibuat dengan Divi. Dan mereka dapat digunakan di lebih banyak tempat daripada header jika Anda memperlakukannya seperti tautan jangkar. Saya harap desain ini akan menginspirasi Anda untuk membuat beberapa tombol gulir baru untuk proyek Anda berikutnya.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!