Kita semua ingin menonjol dari kompetisi, dan itu bisa dilakukan dengan memamerkan situs web berbeda. Jadi akan sangat membantu jika mengetahui cara membuat desain teks melengkung di Divi. Jenis desain ini berfungsi untuk membuat grafik khusus atau desain header khusus di Divi tanpa harus menggunakan editor foto. Biasanya ini melibatkan tugas html dan css yang lebih luas, tetapi dengan Divi, penguasaan CSS bukanlah suatu keharusan, karena Anda memiliki lebih banyak opsi bawaan untuk mendesain teks Anda dengan cara yang unik dan mudah.
Dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat dua templat huruf melengkung yang dapat Anda gunakan sebagai templat yang berguna untuk tujuan Anda sendiri. Paling-paling, Anda dapat menambahkan sesuatu yang baru ke kotak Anda. alat desain untuk masa depan.
Mari kita mulai.
penelitian
Berikut ini adalah ikhtisar dari desain teks melengkung yang akan kami desain dalam tutorial ini.
Unduh file yang diperlukan
Untuk memulai, Anda harus mengunduh file yang diperlukan untuk menyelesaikan tutorial ini. Anda dapat melakukan ini dengan mengklik tautan berikut.
Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret ke Divi Builder.
Ide dasar di balik pembuatan teks lengkung di Divi
Untuk membuat teks melengkung menggunakan metode dalam tutorial ini, Anda harus menambahkan setiap huruf teks Anda dalam modul teks terpisah (Anda akan ingin menggunakan font monospace untuk hasil terbaik). Berikan modul teks ketinggian yang ditentukan. Selanjutnya, Anda perlu memberi setiap modul teks posisi absolut terpusat sehingga mereka menumpuk di atas satu sama lain.
Ini penting karena kami 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 (pertimbangkan untuk menggunakan kompas di kelas matematika untuk menggambar lingkaran). Perhatikan juga bahwa tinggi setiap modul teks menentukan jari-jari lingkaran, yang juga meningkatkan keliling lingkaran dan, oleh karena itu, menambah jarak antar huruf.
Berikut adalah contoh 8 modul teks yang diputar dengan peningkatan 45 derajat untuk membuat tata letak lingkaran yang sempurna untuk teks. Saya menambahkan perbatasan putih di sekitar setiap modul sehingga Anda dapat dengan mudah melihat rotasi.
Dan, berikut adalah contoh dari modul teks yang sama yang berputar dalam peningkatan derajat 20.
Commencer
Untuk memulai, buat halaman baru di Divi. Kemudian beri judul halaman Anda dan terapkan pembuat Divi di front-end. Pilih opsi "bangun dari awal". Sekarang Anda siap untuk pergi!
Membuat desain teks berbentuk kurva
Membuat bagian dan garis
Mulailah dengan membuat bagian reguler dengan baris kolom.
Sebelum menambahkan modul kami, lanjutkan dan perbarui pengaturan bagian sebagai berikut:
- Gradien latar belakang kiri: #1e003d
- Latar belakang gradien kanan - warna: # 121212
- Jenis gradien: Radial
- Gambar latar belakang: [masukkan gambar logo kira-kira 100 piksel kali 100 piksel]
- Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
Simpan pengaturan, lalu ubah ke pengaturan untuk saluran dan perbarui yang berikut:
- Lebar selokan: 1
- Lebar: 100%
- Tinggi Min: 400px
- Tinggi: 40vw
- Tinggi maksimum: 600px
- Padding khusus: 0px tinggi, 0px bawah
Kemudian tambahkan kode CSS khusus berikut ke elemen utama kolom untuk memastikan bahwa semua modul teks akan tetap berada di tengah secara horizontal:
Kolom Utama Elemen CSS:
menampilkan fleksibel; membenarkan-senang: center;
Membuat modul teks untuk setiap huruf
Kami sekarang siap untuk menambahkan modul teks pertama kami dengan huruf pertama kami. Untuk melakukan ini, tambahkan modul teks baru ke kolom baris dan perbarui yang berikut ini:
- Isi:d (hanya hurufnya)
- Font Teks: Ubuntu Mono (font monospace apa saja bisa digunakan)
- Warna teks teks: #ffffff
- Ukuran teks: 5vw (desktop), 40px (telepon)
- Orientasi teks: tengah
- Tinggi Min: 200px
- Tinggi: 20vw
- Tinggi maksimum: 300px
Kemudian perbarui asal transformasi ke bawah. Ini akan menjadi penting dalam menentukan di mana rotasi teks terjadi. Kami ingin modul teks berputar di bagian bawahnya. Meskipun tidak perlu merotasi modul teks pertama ini, penting untuk menambahkannya di sini sehingga kita dapat memindahkan opsi ini setiap kali kita menggandakan modul teks untuk huruf tambahan.
- Asal transformasi: 100% (atau di bawah)
Kemudian tambahkan custom CSS berikut ke elemen utama untuk memberikan modul teks posisi absolut.
Membuat dan memutar modul teks lainnya
Untuk membuat sisa hurufnya, kami akan menduplikasi modul teks. Setelah kita menduplikasi modul teks, yang kita butuhkan hanyalah memperbarui huruf dan kemudian meningkatkan rotasi 45 derajat dengan setiap modul baru.
Karena modul teks akan ditumpangkan di awal, lebih baik menggunakan mode tampilan kabel untuk melakukan pembaruan ini.
Lanjutkan dan duplikat modul teks, lalu perbarui yang berikut:
- Isi: I
- Ubah sumbu rotasi: 45deg
Lanjutkan proses menduplikasi modul teks, lalu perbarui modul teks dengan huruf baru dan tingkatkan rotasi transformasi sebesar 45 derajat. Berikut adalah daftar 6 pembaruan yang tersisa untuk modul teks:
Modul teks 3
- isi:v
- Ubah sumbu rotasi: 90deg
Modul teks 4
- konten: i
- Transformasi rotasi sumbu z: 135deg
Modul teks 5
- konten: d
- Ubah rotasi sumbu z: 180deg
Modul teks 6
- konten: i
- Transformasi rotasi sumbu z: 225deg
Modul teks 7
- konten: v
- Ubah rotasi sumbu z: 270deg
Modul teks 8
- konten: i
- Ubah rotasi sumbu z: 315deg
Itu saja! Sekarang lihat hasil akhirnya.
Hasil akhir
final pikiran
Membuat desain teks melengkung di Divi adalah proses yang cukup mudah setelah Anda memahami cara kerjanya. Artikel ini akan membantu Anda memahami geometri yang terlibat dalam konfigurasi modul teks untuk berputar pada kurva. Dan setelah penyiapan selesai, selain beberapa cuplikan file CSS khusus, Anda dapat menggunakan pengaturan desain bawaan Divi untuk mendapatkan sedikit kreativitas. Semoga ini memberi Anda inspirasi untuk membuat desain teks lengkung Anda sendiri.
