Cara Menganimasikan Huruf untuk Desain Teks Unik di Divi

Animasi telah menjadi bagian umum dari pengalaman pengguna untuk situs web modern. Selain tampilannya yang keren, itu juga dapat menambahkan elemen interaktif halus yang melibatkan pengguna dengan menghidupkan konten. Efek animasi bawaan Divi memungkinkan Anda untuk menganimasikan hampir semua elemen pada halaman dengan gaya animasi yang berbeda.

Dalam tutorial ini, saya akan menunjukkan cara menganimasikan huruf untuk beberapa desain teks unik di Divi. Dengan memasukkan huruf individual ke dalam modul teks, Anda dapat menargetkan animasi setiap huruf dengan gaya animasi, durasi, dan penundaan yang berbeda yang akan membuat konten menonjol dengan cara yang kreatif. Teknik ini murni untuk tujuan desain karena huruf-huruf yang membentuk konten tidak akan terlalu seo friendly. Namun, huruf animasi memungkinkan Anda untuk berbagi cerita dengan pengguna dengan cara yang menakjubkan.

Mari kita mulai.

Sneak Peek

Unduh Layout Contoh Desain Animasi Huruf secara GRATIS

Untuk mendapatkan desain animasi huruf 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 ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.

Langsung saja ke tutorialnya ya?

Mulai

Untuk tutorial ini, yang Anda butuhkan hanyalah Divi. Kami akan membangun desain dari awal menggunakan pembangun Divi di ujung depan. Untuk memulai, buat halaman baru, beri judul halaman Anda, dan terapkan klik untuk menggunakan Divi Builder. Kemudian pilih opsi "bangun dari awal" dan klik untuk membangun di ujung depan.

Sekarang Anda siap untuk mendesain!

Membangun Tata Letak untuk Menganimasikan Huruf

Menambahkan Bagian, Baris, dan Kolom

Lanjutkan dan buat bagian reguler baru dengan baris satu kolom.

Sebelum kita mulai menambahkan modul teks kita (yang akan berisi huruf putih), mari tambahkan gambar latar belakang gelap ke bagian tersebut. Buka pengaturan bagian dan tambahkan gambar latar belakang. Saya menggunakan gambar latar abstrak dari tata letak Halaman Arahan Perusahaan Investasi.

Membuat Blok Huruf Individu dengan Modul Teks

Sebelum kita dapat mulai menambahkan animasi ke huruf, pertama-tama kita harus membuat modul teks terpisah untuk setiap huruf yang ingin kita tambahkan. Untuk contoh ini, kita akan membuat teks "Desain Divi". Karena frasa teks ini mencakup 11 spasi karakter (termasuk spasi di antara huruf, kita perlu menambahkan 11 modul teks yang berbeda.

Silakan dan tambahkan modul teks ke kolom.

Di kotak konten, tambahkan huruf pertama dari teks Anda yang dalam hal ini adalah huruf “d”.

Kemudian perbarui pengaturan desain teks sebagai berikut:

• Font Teks: Rubik
• Gaya Font Teks: TT
• Warna Teks Teks: #ffffff
• Teks Ukuran Teks: 80px (desktop), 50px (tablet), 30px (ponsel)
• Tinggi Baris Teks: 1.6em
• Orientasi Teks: tengah

Selanjutnya tambahkan animasi ke modul teks sebagai berikut:

• Gaya Animasi: Slide
• Arah Animasi: Atas
• Durasi Animasi: 600ms
• Penundaan Animasi: 100ms
• Animasi Mulai Opacity: 100%

Gandakan modul teks dan perbarui konten dengan huruf "i". Kemudian tingkatkan penundaan animasi sebesar 100 ms sebagai berikut:

• Penundaan Animasi: 200ms

Gandakan modul teks dan perbarui konten dengan huruf "v". Kemudian tingkatkan penundaan animasi menjadi 300 ms.

• Penundaan Animasi: 300ms

Gandakan modul teks dan perbarui konten dengan huruf "i". Kemudian tingkatkan penundaan animasi menjadi 400ms.

• Penundaan Animasi: 400ms

Untuk modul teks berikutnya kami ingin menambahkan ruang kosong. Gandakan modul teks dan tambahkan html berikut ke kotak konten:

 

Tidak perlu memperbarui penundaan animasi untuk yang satu ini.

Kemudian duplikat modul teks dan perbarui konten dengan huruf “d”. Ini adalah huruf pertama dalam kata "desain". Kemudian tingkatkan penundaan animasi menjadi 500 ms.

• Penundaan Animasi: 500ms

Lanjutkan proses duplikasi modul teks dan tingkatkan penundaan animasi sebesar 100 ms untuk setiap huruf yang tersisa yang mengeja kata "desain".

• Huruf "e": penundaan animasi 600 ms
• Huruf "s": penundaan animasi 700ms
• Huruf "i": penundaan animasi 800ms
• Huruf "g": penundaan animasi 900ms
• Huruf "n": penundaan animasi 1000ms

Berikut adalah tampilan desain sejauh ini.

Menambahkan Properti Flex untuk menyelaraskan modul secara horizontal

Belum cukup hasil yang kita cari. Tapi yang perlu kita lakukan secara ajaib menyatukan desain adalah menambahkan potongan kecil css ke kolom baris. Untuk melakukan ini, buka pengaturan baris dan tambahkan CSS khusus berikut ke Elemen Utama Kolom.

display: flex;

Properti display: flex menyelaraskan semua modul secara horizontal dalam tabel fleksibel yang akan menyesuaikan dengan lebar browser yang berbeda dengan indah. Dan karena modul berada dalam baris satu kolom, desainnya tidak akan rusak di tablet atau perangkat seluler.

Kita juga perlu menambahkan lebar talang khusus untuk menghilangkan margin bawah di bawah huruf dan menambahkan beberapa bantalan atas dan bawah ke baris sehingga huruf memiliki ruang untuk bernyawa.

• Lebar Talang: 1
• Padding Kustom: 5vw atas, 5vw bawah

Berikut adalah hasil akhirnya.

Menambahkan Gaya Animasi Berbeda

Dengan pengaturan ini, Anda dapat dengan mudah menambahkan gaya animasi baru untuk efek yang benar-benar unik. Untuk melakukan ini, Anda dapat memanfaatkan fitur multiselect Divi untuk memperbarui semua modul sekaligus. Di ujung depan, tahan shift dan klik modul teks pertama dan terakhir. Kemudian buka pengaturan untuk salah satu modul yang dipilih.

Ini akan membuka modal pengaturan elemen yang memungkinkan Anda memperbarui pengaturan untuk semua modul yang dipilih. Kami tidak ingin mengubah penundaan animasi karena kami ingin mempertahankan efek cascading pada setiap huruf. Namun, kami dapat memperbarui opsi animasi lainnya dengan cara yang berbeda untuk membuat hasil yang benar-benar unik.

Saya menyarankan untuk menduplikasi bagian sebelum menguji animasi baru sehingga Anda dapat menyimpan contoh sebelumnya.

Berikut adalah beberapa contoh.

Animasi Teks Zoom Terbalik

Untuk menganimasikan huruf dengan efek zoom terbalik, perbarui pengaturan elemen (pengaturan untuk semua modul) dengan yang berikut:

• Gaya Animasi: Zoom
• Arah Animasi: Pusat
• Intensitas Animasi: 200%

Berikut adalah hasil akhirnya.

Animasi Teks Gelombang Bergulir

Untuk menganimasikan huruf dengan efek gelombang bergulir, perbarui pengaturan elemen (pengaturan untuk semua modul) dengan yang berikut:

• Gaya Animasi: Putar
• Arah Animasi: Atas
• Intensitas Animasi: 100%

Berikut adalah hasil akhirnya.

Animasi Teks Domino

Untuk menganimasikan teks dengan efek domino, perbarui pengaturan elemen (pengaturan untuk semua modul) dengan yang berikut:

• Gaya Animasi: Balik
• Arah Animasi: Kiri
• Intensitas Animasi: 100%

Berikut adalah hasil akhirnya.

Animasi Teks Berdiri

Untuk menganimasikan teks dengan efek domino, perbarui pengaturan elemen (pengaturan untuk semua modul) dengan yang berikut:

• Gaya Animasi: Lipat
• Arah Animasi: Atas
• Intensitas Animasi: 100%

Kemudian tambahkan perspektif untuk membuat elemen desain 3d dengan menambahkan css berikut ke Elemen Kolom Utama di bawah pengaturan baris.

CSS Elemen Kolom Utama:

perspective: 1000px;

Berikut adalah hasil akhirnya.

Menganimasikan Huruf Menggunakan Kombinasi Arah Animasi

Jika Anda ingin lebih kreatif, Anda dapat menganimasikan huruf menggunakan kombinasi efek animasi. Untuk contoh ini, saya akan menggunakan kombinasi arah animasi dan intensitas untuk gaya slide. Ini akan memberi kita presentasi yang benar-benar unik.

Berikut cara melakukannya.

Pertama, duplikat salah satu bagian yang kita buat sebelumnya sehingga kita bisa memulai proses desain.

Kemudian hapus 4 modul teks pertama sehingga hanya teks “desain” yang ditampilkan.

Pengaturan Bagian

Selanjutnya, karena kita ingin beberapa huruf dalam animasi dimulai di luar viewport bagian, kita perlu menambahkan potongan kecil css ke pengaturan bagian sebagai berikut:

overflow: hidden;

Ini akan membuat huruf tetap tersembunyi sampai masuk ke bagian.

Pengaturan Baris

Sekarang, untuk memastikan modul teks (huruf) kita tetap di tengah, kita perlu menambahkan css berikut ke pengaturan baris:

display:flex;
justify-content: center;

Pengaturan Umum Modul Teks

Menggunakan multiselect, perbarui keenam modul teks dengan pengaturan elemen berikut:

• Margin Kustom: 3% kiri, 3% kanan
• Lebar Perbatasan: 1px
• Warna Perbatasan: #ffffff

• Gaya Animasi: Slide
• Durasi Animasi: 2000ms
• Penundaan Animasi: 100ms
• Intensitas Animasi: 300%

Itu menangani pengaturan animasi dasar yang akan umum untuk semua modul teks. Sekarang kita bisa mengubah pengaturan animasi untuk mereka satu per satu.

Pengaturan Individual Modul Teks

Pada titik ini, kita dapat bersenang-senang mengubah pengaturan modul teks individual untuk mengubah arah animasi untuk masing-masing. Ini akan memungkinkan kita untuk menganimasikan huruf dengan cara yang benar-benar unik. Untuk setiap huruf, perbarui arah dan intensitas animasi sebagai berikut:

• Huruf D
  Arah Animasi: Atas
• Huruf E
  Arah Animasi: Bawah
• Huruf S
  Arah Animasi: Kiri
  Intensitas Animasi: 80%
• Huruf I
  Arah Animasi: Kanan
  Intensitas Animasi: 80%
• Huruf G
  Arah Animasi: Bawah
• Huruf N
  Arah Animasi: Atas

Berikut adalah desain akhir.

Dan inilah tampilannya di ponsel.

Pikiran Akhir

Saya pikir aman untuk mengatakan bahwa Divi memiliki banyak cara untuk menghidupkan huruf setelah Anda memiliki pengaturan yang tepat. Dan saya harus mengatakan bahwa cukup sulit untuk berhenti bermain-main dengan pengaturan animasi saat membuat contoh-contoh ini. Ada begitu banyak variasi yang bisa dicoba! Bagaimanapun, saya harap ini memberi Anda sedikit inspirasi untuk proyek Anda berikutnya. Jika ada, Anda mungkin ingin membangunnya hanya untuk bersenang-senang.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!