Cara Menambahkan Animasi SVG Jalur Teks Lingkaran ke Desain Divi Anda

Mengikuti tren di ruang desain web adalah salah satu cara terbaik untuk tetap up-to-date sebagai desainer web. Ini memungkinkan Anda untuk membuat situs web modern yang akan mengesankan klien Anda dan membantu membawa keahlian Anda ke tingkat berikutnya. Dalam tutorial hari ini, kami akan menunjukkan kepada Anda bagaimana membiasakan diri dengan tren yang sering Anda lihat saat ini di situs web tingkat lanjut; lingkaran teks animasi SVG. Kami akan menunjukkan cara menambahkan ini di dalam desain halaman Divi Anda, dan bahkan menggunakannya sebagai tombol juga. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letaknya GRATIS

Untuk mendapatkan tata letak gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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!

Buat Desain Pahlawan

Tambahkan Bagian Baru

Warna latar belakang

Mari kita mulai dengan membuat desain pahlawan. Buka halaman baru atau yang sudah ada dengan Divi dan tambahkan bagian reguler baru ke dalamnya. Buka pengaturan bagian dan terapkan warna latar belakang pilihan Anda.

• Warna Latar Belakang: #f3eee8

Jarak

Pindah ke pengaturan spasi berikutnya dan ubah nilai padding atas dan bawah.

• Padding Atas: 30px
• Padding Bawah: 30px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian, menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris, navigasikan ke tab desain, buka pengaturan ukuran dan buat penyesuaian berikut:

• Lebar: 95%
• Lebar Maks: 2580px

Pengaturan Kolom 1

Setelah pengaturan baris umum di tempat, Anda dapat melanjutkan untuk membuka pengaturan kolom pertama.

Gambar latar belakang

Di dalam pengaturan latar belakang, unggah gambar latar belakang pilihan Anda. Gambar ini akan muncul di bawah animasi SVG teks lingkaran di bawah tutorial.

• Ukuran Gambar Latar Belakang: Sampul
• Posisi Gambar Latar Belakang: Tengah
• Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan

Tambahkan Modul Teks #1 ke Kolom 2

Tambahkan Konten H1

Saatnya menambahkan modul, dimulai dengan Modul Teks pertama di kolom 2. Tambahkan beberapa konten H1 pilihan Anda jika Anda menggunakan bagian ini sebagai pahlawan, atau konten H2 jika Anda menggunakan ini di tempat lain di halaman Anda.

Pengaturan Teks H1

Gaya pengaturan teks judul modul ini berikutnya.

• Font Judul: Tampilan Playfair
• Warna Teks Judul: #212121
• Ukuran Teks Judul:
  • Desktop: 100px
  • Tablet: 60px
  • Telepon: 45px

Perekat

Kemudian, buka pengaturan ukuran dan terapkan lebar maksimal.

• Lebar Maks: 600px

Tambahkan Modul Teks #2 ke Kolom 2

Tambah isi

Di bawah Modul Teks pertama, kami akan menambahkan Modul Teks lainnya. Kali ini, kami akan menyertakan beberapa konten deskripsi.

Pengaturan Teks

Arahkan ke tab desain dan gaya teks sebagai berikut:

• Font Teks: Montserrat
• Ukuran Teks: 15px
• Tinggi Baris Teks: 2em

Perekat

Gunakan lebar maksimal dalam pengaturan ukuran juga.

• Lebar Maks: 520px

Jarak

Kemudian, navigasikan ke pengaturan spasi dan gunakan beberapa nilai responsif.

• Batas atas:
  • Desktop: 20vh
  • Tablet & Ponsel: 50px
• Padding Kiri: 5%

Berbatasan

Kami juga menyertakan batas kiri dalam pengaturan batas.

• Lebar Batas Kiri: 2px
• Warna Batas Kiri: #000000

Tambahkan Animasi SVG Teks Lingkaran

Tambahkan Modul Kode ke Kolom 1

Sekarang kita telah membuat dasar dari desain bagian kita, kita dapat fokus pada pembuatan animasi SVG teks lingkaran. Untuk menambahkan animasi SVG teks lingkaran, kita akan menggunakan Modul Kode di kolom 1. Silakan dan tambahkan satu.

Tambahkan Tautan

Jika Anda ingin animasi SVG teks lingkaran ini dapat diklik, Anda dapat menambahkan URL pilihan Anda di pengaturan tautan modul.

Perekat

Pastikan lebar modul diatur ke "100%" dalam pengaturan ukuran juga.

• Lebar: 100%

Tambahkan Lingkaran & Teks SVG ke Kotak Kode

Kembali ke kotak kode di tab konten. Di sini, pertama-tama kita akan menambahkan lingkaran SVG dan jalur teks menggunakan kode HTML berikut:

<svg viewBox="0 0 500 500">
<defs>
	<path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="circle">
	</path>
</defs>
	<text dy="70">
		<textPath xlink:href="#circle">View Portfolio • New Homes •</textPath>
	</text>
</svg>

Gaya SVG dengan CSS

Tentu saja, kita perlu menata jalur teks SVG agar sesuai dengan desain kita. Kami memastikan SVG diatur ke "100%" juga. Rekatkan baris kode CSS berikut di dalam kotak kode, di antara tag gaya:

<style>
svg { 
	width: 100%;
}
svg textPath { 
  font-size: 39px;
	font-family:  "Montserrat";
	text-transform: uppercase;
	letter-spacing: 20px;
	fill: #fff;
}
</style>

Tambahkan Tag HTML AnimateTransform

Sekarang, untuk membuat rotasi tanpa akhir untuk teks kita, kita akan menggunakan elemen transformasi bernyawa yang memungkinkan kita membuat animasi tanpa memerlukan kode JavaScript eksternal. Ini adalah atribut yang kami tetapkan ke SVG kami:

  <animateTransform
            attributeName="transform"
            begin="0s"
            dur="15s"
            type="rotate"
            from="0 250 250"
            to="360 250 250"
            repeatCount="indefinite" 
			/>

Anda dapat memodifikasi atribut ini sesuka Anda, untuk membuat animasi pilihan Anda. Perhatikan bagaimana atribut terakhir, repeatCount, diatur ke “indefinite”. Ini memungkinkan kita untuk membuat putaran putaran tanpa akhir untuk SVG kita.

Ubah Jalur Teks Untuk Penggunaan Sendiri

Tentu saja, Anda ingin memodifikasi teks agar sesuai dengan situs web Anda sendiri, Anda dapat melakukannya dengan mudah di antara tag jalur teks. Namun, setelah Anda mengubah panjang salinan, Anda harus mengubah pengaturan untuk memastikan Anda membuat lingkaran yang sempurna. Anda dapat bermain-main dengan nilai "dy", yang menunjukkan pergeseran sepanjang sumbu y dan mengubah ukuran font dan spasi huruf dari jalur teks sampai Anda mendapatkan hasil yang diinginkan. Itu dia!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana menjaga situs web Anda tetap up to date dengan tren desain. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara membuat animasi SVG teks lingkaran dan menggunakannya secara elegan dalam desain Divi Anda. Setelah Anda mendapatkan pendekatannya, Anda dapat menggunakan elemen ini untuk menampilkan teks apa pun yang Anda inginkan dan menyesuaikannya dengan desain Anda sendiri. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.