Cara Membuat Desain Teks Melengkung di Divi

Jika Anda mencari cara unik untuk menampilkan teks di halaman web, mengetahui cara membuat desain teks melengkung di Divi mungkin berguna. Desain semacam ini akan berfungsi untuk membuat grafik khusus atau desain header kreatif di Divi tanpa harus menggunakan editor foto. Biasanya ini melibatkan html dan css yang lebih lengkap untuk diselesaikan, tetapi dengan Divi, CSS kustom minimal dan Anda memiliki lebih banyak opsi bawaan untuk mendesain teks Anda dengan mudah dengan cara yang unik.

Dalam tutorial ini, Kami akan menunjukkan cara membuat beberapa desain huruf melengkung yang dapat Anda gunakan sebagai template yang berguna untuk tujuan Anda sendiri. Jika ada, Anda dapat menambahkan sesuatu yang baru ke kotak peralatan desain Anda untuk masa depan.

Mari kita mulai.

Sneak Peek

Berikut ini adalah sneak peek dari desain teks melengkung yang akan kita buat dalam tutorial ini.

Unduh Layout Contoh Desain Animasi Huruf secara GRATIS

Untuk meletakkan tangan Anda pada desain teks melengkung dari tutorial ini, 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!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.

Langsung saja ke tutorialnya ya?

Ide Dasar Dibalik Membuat Teks Melengkung di Divi

Untuk membuat teks melengkung menggunakan metode dalam tutorial ini, Anda perlu menambahkan setiap huruf teks Anda dalam modul teks terpisah (Anda akan ingin menggunakan font monospace untuk hasil terbaik). Berikan modul teks ketinggian yang ditentukan. Maka Anda perlu memberi setiap modul teks posisi absolut terpusat sehingga semuanya menumpuk di atas satu sama lain.

Ini penting karena kita ingin setiap huruf berputar dari titik tengah yang sama. Setelah itu Anda dapat menggunakan opsi transformasi Divi untuk memutar setiap huruf di sepanjang sumbu z untuk membuat teks melengkung (pikirkan menggunakan kompas di kelas matematika untuk menggambar lingkaran). Juga, perhatikan bahwa tinggi setiap modul teks menentukan radius lingkaran yang juga akan meningkatkan keliling lingkaran, dan sebagai hasilnya lebih banyak ruang di antara huruf-hurufnya.

Berikut adalah contoh 8 modul teks yang diputar dengan peningkatan 45 derajat untuk membuat tata letak lingkaran yang sempurna untuk teks. Saya telah menambahkan batas putih di sekitar setiap modul sehingga Anda dapat dengan mudah melihat rotasi.

Dan, berikut adalah contoh modul teks yang sama yang diputar dalam peningkatan 20 derajat.

Mulai

Berlangganan Saluran Youtube Kami

Untuk memulai, buat halaman baru di Divi. Kemudian beri Anda judul halaman dan gunakan pembuat Divi di ujung depan. Pilih opsi "bangun dari awal". Sekarang Anda siap untuk pergi!

Membuat Desain Teks Melengkung

Membuat Bagian dan Baris

Pertama buat bagian reguler dengan baris satu kolom.

Sebelum kami menambahkan modul kami, lanjutkan dan perbarui pengaturan bagian sebagai berikut:

• Warna Kiri Gradien Latar Belakang: #1e003d
• Warna Kanan Gradien Latar Belakang: #121212
• Tipe Gradien: Radial

• Gambar Latar Belakang: [masukkan gambar logo sekitar 100px kali 100px]
• Ukuran Gambar Latar Belakang: Ukuran Sebenarnya

Simpan pengaturan lalu lompat ke pengaturan baris dan perbarui yang berikut:

• Lebar Talang: 1
• Lebar: 100%
• Tinggi Min: 400px
• Tinggi: 40vw
• Tinggi Maks: 600px
• Padding Kustom: 0px atas, 0px bawah

Kemudian tambahkan CSS khusus berikut ke Elemen Utama Kolom untuk memastikan semua modul teks akan tetap berada di tengah horizontal:

CSS Elemen Utama Kolom:

display:flex;
justify-content:center;

Membuat Modul Teks untuk Setiap Huruf

Sekarang kita siap untuk menambahkan modul teks pertama kita dengan huruf pertama kita. Untuk melakukan ini, tambahkan modul teks baru ke kolom baris dan perbarui yang berikut:

• Isi: d (hanya satu huruf)
• Font Teks: Ubuntu Mono (font monospace apa pun bisa digunakan)
• Warna Teks Teks: #ffffff
• Ukuran Teks Teks: 5vw (desktop), 40px (ponsel)
• Orientasi Teks: tengah
• Tinggi Min: 200px
• Tinggi: 20vw
• Tinggi Maks: 300px

Kemudian perbarui asal transformasi ke bawah. Ini akan menjadi penting untuk menentukan di mana rotasi teks terjadi. Kami ingin modul teks berputar di titik bawah modul. Meskipun modul teks pertama ini tidak perlu diputar, penting untuk menambahkannya di sini sehingga kita dapat membawa opsi ini setiap kali kita menduplikasi modul teks untuk huruf tambahan.

• Transform Origin: 100% (atau terbawah)

Kemudian tambahkan CSS khusus berikut ke Elemen Utama untuk memberikan modul teks posisi absolut.

position: absolute !important;

Membuat dan Memutar Modul Teks Lainnya

Untuk membuat sisa huruf, kita akan menduplikasi modul teks. Setelah kita menduplikasi modul teks, yang perlu kita lakukan hanyalah memperbarui huruf dan kemudian meningkatkan rotasi sebesar 45 derajat dengan setiap modul baru.

Karena modul teks akan ditumpuk di atas masing-masing di ujung depan, yang terbaik adalah menggunakan mode tampilan gambar rangka untuk membuat pembaruan ini.

Silakan dan duplikat modul teks dan kemudian perbarui yang berikut ini:

• Konten: saya
• Transformasi Rotasi sumbu z: 45deg

Lanjutkan proses duplikasi modul teks dan kemudian perbarui modul teks dengan huruf baru dan tingkatkan rotasi transformasi sebesar 45 derajat. Berikut adalah rincian dari 6 pembaruan modul teks yang tersisa:

Modul Teks 3

• isi: v
• Transformasi Rotasi sumbu z: 90deg

Modul Teks 4

• konten: saya
• Transformasi Rotasi sumbu z: 135deg

Modul Teks 5

• isi: d
• Transformasi Rotasi sumbu z: 180deg

Modul Teks 6

• konten: saya
• Transformasi Rotasi sumbu z: 225deg

Modul Teks 7

• isi: v
• Transformasi Rotasi sumbu z: 270deg

Modul Teks 8

• konten: saya
• Transformasi Rotasi sumbu z: 315deg

Itu dia! Sekarang lihat hasil akhirnya.

Hasil Akhir

Menyesuaikan ukuran Teks dan derajat rotasi untuk Teks yang Lebih Panjang

Jika Anda ingin menyesuaikan teks melengkung untuk opsi desain teks yang lebih besar, Anda dapat mengubah ukuran teks dan mengubah rotasi setiap modul teks.

Terapkan mode tampilan gambar rangka dan kemudian gunakan fitur multiselect Divi untuk memilih semua modul teks yang berisi huruf lengkung. Kemudian klik untuk membuka pengaturan salah satu modul teks yang dipilih untuk membuka modal pengaturan elemen yang akan memperbarui semua modul yang dipilih sekaligus.

Di bawah pengaturan elemen, ubah ukuran teks teks menjadi 40px di desktop.

Simpan pengaturan dan kemudian buka pengaturan untuk setiap modul teks dan perbarui huruf dan rotasi untuk masing-masing. Biarkan modul teks pertama dengan rotasi 0 derajat dan kemudian tingkatkan rotasi sumbu z sebesar 10 derajat untuk setiap modul teks berikutnya. Kemudian duplikat modul teks untuk lebih banyak huruf sesuai kebutuhan. Dalam contoh ini, saya akan mengeja "elegant.themes".

Berikut adalah rincian isi surat dan rotasi yang dibutuhkan untuk setiap modul teks.

• Modul Teks 1
  • konten: e
  • Transformasi Rotasi sumbu z: 0deg
• Modul Teks 2
  • isi: l
  • Transformasi Rotasi sumbu z: 10deg
• Modul Teks 3
  • konten: e
  • Transformasi Rotasi sumbu z: 20deg
• Modul Teks 4
  • isi: g
  • Transformasi Rotasi sumbu z: 30deg
• Modul Teks 5
  • isi: a
  • Transformasi Rotasi sumbu z: 40deg
• Modul Teks 6
  • isi: n
  • Transformasi Rotasi sumbu z: 50deg
• Modul Teks 7
  • isi: t
  • Transformasi Rotasi sumbu z: 60deg
• Modul Teks 8
  • isi: .
  • Transformasi Rotasi sumbu z: 70deg
• Modul Teks 9
  • isi: t
  • Transformasi Rotasi sumbu z: 80deg
• Modul Teks 10
  • isi: h
  • Transformasi Rotasi sumbu z: 90deg
• Modul Teks 10
  • konten: e
  • Transformasi Rotasi sumbu z: 100deg
• Modul Teks 11
  • isi: m
  • Transformasi Rotasi sumbu z: 110deg
• Modul Teks 12
  • konten: e
  • Transformasi Rotasi sumbu z: 120deg
• Modul Teks 13
  • isi: s
  • Transformasi Rotasi sumbu z: 130deg

Inilah hasilnya sejauh ini.

Cara mudah untuk menyesuaikan rotasi seluruh teks adalah dengan menerapkan transformasi rotasi ke baris. Buka pengaturan baris dan dan gunakan tombol kontrol indeks-z untuk memposisikan teks melengkung di mana pun Anda inginkan.

Berikut adalah desain akhir.

Jangan ragu untuk menjelajahi menambahkan lebih banyak teks dan menyesuaikan tingkat rotasi untuk mendapatkan jarak yang tepat di antara huruf. Anda juga dapat menyesuaikan ketinggian modul teks untuk mengurangi atau menambah radius.

Pikiran Akhir

Membuat desain teks melengkung di Divi adalah proses yang cukup sederhana setelah Anda memahami cara kerjanya. Artikel ini akan membantu Anda memahami geometri yang terlibat dalam pengaturan modul teks sehingga mereka berputar pada kurva. Dan setelah Anda mendapatkan pengaturan yang benar, selain beberapa potongan css khusus, Anda dapat menggunakan pengaturan desain bawaan Divi untuk menjadi cukup kreatif. Semoga ini bisa memberi sedikit inspirasi untuk Anda membuat beberapa desain teks lengkung unik milik Anda sendiri.

Dan, jika Anda ingin menambahkan beberapa animasi ke huruf melengkung Anda, lihat artikel kami tentang cara menghidupkan huruf.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!