Cara Memutar Teks untuk Desain Tata Letak Unik di Divi (Tutorial + Unduhan Tata Letak GRATIS)

Sebagian besar dari kita terbiasa membaca teks dari kanan ke kiri dan dari atas ke bawah. Tetapi ketika datang ke desain web, mungkin ide yang baik untuk melepaskan diri dari norma. Salah satu cara untuk melakukannya adalah dengan rotasi teks. Memutar teks di situs web Anda mungkin tampak tidak praktis, tetapi tampaknya ada tempatnya. Faktanya, orientasi teks vertikal tampaknya umum dalam desain web modern. Dan, meskipun sebagian besar memutar teks murni untuk tujuan desain, argumen dapat dibuat bahwa teks yang diputar (atau vertikal) (meskipun lebih sulit dibaca) dapat menjadi teknik yang efektif untuk menarik perhatian.

Dengan Divi Anda dapat memutar elemen apa pun di halaman Anda menggunakan opsi transformasi bawaan. Jadi dalam tutorial ini, saya akan menunjukkan cara memutar teks dengan sukses untuk membuat desain tata letak yang unik di Divi. Untuk melakukan ini, saya akan merancang tata letak tiga bagian yang menggabungkan contoh teks yang diputar.

Mari kita mulai.

Sneak Peek

Berikut ini adalah cuplikan dari seluruh tata letak yang akan kita buat dalam tutorial. Perhatikan ada contoh teks yang diputar di tiga bagian tata letak yang berbeda.

Unduh Tata Letak Lengkap dari Tutorial ini GRATIS

Untuk mendapatkan tata letak Rotated Text Designs gratis, 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 Tata Letaknya

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.

Sekarang mari kita kembali ke tutorial.

Hal-hal yang Perlu Diingat Saat Anda Memutar Teks

Arah Ke Mana Anda Harus Memutar Teks?

Jika Anda ingin memutar teks untuk tampilan vertikal, Anda mungkin tidak yakin ke arah mana untuk memutar teks. Anda dapat memutar teks berlawanan arah jarum jam sehingga teks terbaca dari bawah ke atas. Atau, Anda dapat memutar teks searah jarum jam sehingga teks terbaca dari atas ke bawah. Jika Anda bertanya-tanya mana yang lebih mudah dibaca, saya tidak yakin ada jawabannya. Anda bisa mencoba dan mendapatkan petunjuk dari orientasi judul buku di rak buku. Tetapi negara yang berbeda melakukan ini secara berbeda (standar di AS searah jarum jam, dari atas ke bawah).

Dalam tutorial ini, saya akan memutar teks berlawanan arah jarum jam dalam banyak kasus, terutama karena saya menyukai tampilannya di sisi kiri halaman (mungkin saya lebih suka memiringkan kepala ke kiri). Tapi jangan ragu untuk mencoba arah yang berbeda.

Masalah Blur

Pada beberapa browser (seperti Chrome dan Safari), teks menjadi sedikit buram saat menggunakan properti transform rotate. Untuk memperbaiki masalah ini, Anda dapat menambahkan nilai asal transformasi 51% atau 52% di sepanjang sumbu X. Ini harus memperbaiki masalah.

Bagian 1: Membangun Header dengan Teks Vertikal

Untuk bagian pertama dari tata letak ini, kita akan membuat header dengan teks vertikal. Untuk melakukan ini, kita akan memutar modul uraian menggunakan opsi transformasi.

Untuk memulai, buat bagian reguler dengan dua baris kolom.

Sebelum Anda menambahkan modul, keluarkan bantalan bagian atas dan bawah dengan memperbarui pengaturan bagian berikut:

Padding Kustom: 0px atas, 0px bawah

Selanjutnya, perbarui pengaturan Baris sebagai berikut:

• Gambar Latar Belakang: [tambahkan gambar dengan lebar minimal 1920px]
• Kolom 1 Warna Latar Belakang: #121212

• Lebar Kustom: 100%
• Lebar Talang: 1
• Samakan Tinggi Kolom: YA
• Padding Kustom (desktop): 0px atas, 0px bawah
• Padding Kustom (tablet): 40% benar
• Padding Kustom (telepon): 30% benar
• Kolom 1 Padding Kustom (desktop): 200px atas, 200px bawah
• Kolom 1 Padding Kustom (tablet): 150px atas, 150px bawah

• Bayangan Kotak: lihat tangkapan layar
• Posisi Horizontal Bayangan Kotak: 0px
• Posisi Vertikal Bayangan Kotak: -100px
• Warna Bayangan: #f6454e

Membuat Modul Blurb

Sekarang kita siap untuk menambahkan konten header kita. Untuk melakukan ini, tambahkan modul uraian ke kolom kiri baris.

Perbarui konten berikut:

• Judul: Desain Divi
• Konten: Konten Anda ada di sini.
• Gunakan Ikon: YA
• Ikon: bola lampu

• Warna Ikon: #f6454e
• Ukuran Font Ikon: 32px
• Orientasi Teks: tengah
• Judul Judul Tingkat: H1 (karena merupakan judul utama halaman)
• Judul Font: Muli
• Judul Font Gaya: TT
• Warna Teks Judul: #ffffff
• Judul Teks Ukuran: 70px (desktop), 50px (tablet), 36px (ponsel)
• Warna Teks Tubuh: #cccccc
• Spasi Huruf Isi: 4px
• Lebar: 500 piksel
• Penyelarasan Modul: tengah

Catatan Penting: Karena kita akan memutar modul blurb sehingga berdiri secara vertikal, lebar kustom 500px akan menjadi tinggi modul blurb vertikal. Jadi, penting untuk menyesuaikan konten di dalam modul ini. Untuk contoh ini, saya menggunakan sedikit teks dan mengubah ukuran font judul pada perangkat yang berbeda sehingga teks tidak pecah menjadi baris baru dan mengacaukan desain.

Memutar Modul Blurb menggunakan Transform Options

Untuk memutar modul uraian (dan semua kontennya), perbarui opsi transformasi berikut:

• Transform Putar sumbu X: -90deg

Anda harus memasukkan nilai -90deg secara manual. Ini akan memberi Anda perataan vertikal dari bawah ke atas dari konten.

Anda mungkin melihat teksnya sedikit buram jika Anda menggunakan Chrome atau Safari. Ini terkadang dapat terjadi saat menggunakan properti transform: rotate. Untuk memperbaikinya, Anda dapat sedikit menyesuaikan Transform Origin sebagai berikut:

• Transformasi sumbu Y Asal: 51%

Anda mungkin harus menyesuaikan nilai ini sedikit sampai teksnya jelas. Misalnya, 52% mungkin terlihat jelas pada beberapa desain.

Membuat Tombol Vertikal

Selanjutnya, kita akan menambahkan tombol di bagian bawah header kita untuk mengingatkan pengguna agar menggulir halaman ke bawah. Kemudian kita dapat memutar tombol menggunakan opsi transformasi seperti yang kita lakukan pada modul uraian.

Buat baris baru dengan struktur satu kolom.

Sebelum kita menambahkan modul tombol kita, perbarui pengaturan baris sebagai berikut:

• Warna Latar Belakang: #f6454e
• Lebar Kustom: 100%
• Lebar Talang: 1

Selanjutnya, tambahkan modul tombol ke baris dan perbarui opsi tombol berikut:

• Penjajaran Tombol: tengah
• Gunakan Gaya Kustom untuk Tombol: YA
• Ukuran Teks Tombol: 16px
• Warna Teks Tombol: #ffffff
• Lebar Batas Tombol: 0px
• Jarak Huruf Tombol: 9px
• Berat Font: ringan
• Gaya Huruf: TT
• Ikon Tombol: panah kanan

Memutar dan Memposisikan Tombol

Untuk memutar dan memposisikan tombol, kita akan menggunakan kombinasi margin dan transform rotate sebagai berikut:

• Margin Kustom (desktop): -50px atas, 50px bawah, -50px kiri
• Margin Kustom (tablet): 0 piksel tersisa
• Transform Putar sumbu X: 90deg

Kali ini tombol diputar 90 derajat (searah jarum jam) untuk mendapatkan tampilan vertikal dari atas ke bawah untuk teks. Ini sepertinya cocok karena kami ingin pengguna menggulir ke bawah.

Bagian 2: Memutar Modul Teks untuk Membuat Label Diagonal

Di bagian tata letak berikutnya, kita akan membuat tiga uraian dengan modul teks yang diputar yang digunakan sebagai label. Ini adalah cara yang bagus untuk menampilkan item unggulan di halaman Anda.

Berikut cara melakukannya.

Buat bagian reguler baru dengan baris tiga kolom. Kemudian tambahkan modul uraian ke kolom pertama.

Pilih untuk menggunakan ikon bohlam alih-alih gambar default.

Kemudian perbarui modul uraian sebagai berikut:

• Warna Ikon: #f6454e
• Ukuran Font Ikon: 32px
• Padding Khusus: 3vw bawah, 3vw kiri, 3vw kanan

Selanjutnya, perbarui pengaturan baris sebagai berikut:

• Kolom 1 Warna Latar Belakang: #eeeeee
• Kolom 2 Warna Latar Belakang: #eeeeee
• Kolom 3 Warna Latar Belakang: #eeeeee
• Samakan Tinggi Kolom: YA

Langkah selanjutnya ini sangat penting ketika kita menambahkan desain label modul teks yang diputar. Kami ingin overflow modul teks disembunyikan di luar kolom. Untuk memastikan ini terjadi, kita perlu menambahkan properti “overflow: hidden” ke setiap kolom sebagai CSS khusus.

Di bawah tab lanjutan, tambahkan CSS khusus berikut:

Kolom 1 Elemen Utama CSS:

overflow: hidden;

Kolom 2 Elemen Utama CSS:

overflow: hidden;

Kolom 3 Elemen Utama CSS:

overflow: hidden;

Menambahkan dan Memutar Modul Teks sebagai Label

Selanjutnya, tambahkan modul teks tepat di atas modul uraian di kolom 1.

Perbarui Konten Teks dengan kata “Unggulan”.

Kemudian gaya modul teks sebagai berikut:

• Warna latar belakang: #f6454e
• Font Teks: Muli
• Berat Font Teks: Semi Tebal
• Warna Teks Teks: #ffffff
• Spasi Huruf Teks: 3px
• Tinggi Baris Teks: 2.5em
• Orientasi Teks: tengah

Sekarang beri modul teks lebar khusus sebagai berikut:

• Lebar: 180px
• Penyelarasan Modul: kiri

Selanjutnya, posisikan modul teks di sudut kiri atas kolom menggunakan opsi transformasi berikut:

• Transformasi Terjemahkan sumbu X: -25%
• Transformasi Terjemahkan sumbu Y: 70%

Penting untuk menggunakan nilai persentase di sini untuk membuat desain lebih responsif sehingga Anda harus memasukkannya secara manual.

Transform Putar sumbu X: -45deg

Perhatikan bahwa luapan modul teks disembunyikan di luar kolom untuk menyelesaikan desain.

Yang tersisa untuk kita lakukan adalah menyalin modul di kolom satu dan menempelkannya ke kolom 2 dan kolom 3.

Berikut adalah hasil akhirnya.

Bagian 3: Membuat Judul Vertikal untuk Konten Anda

Bagian tata letak selanjutnya ini menggunakan teknik serupa untuk memutar dan memposisikan modul teks sebagai judul vertikal untuk konten Anda. Ini adalah tata letak yang berguna untuk menampilkan hal-hal seperti layanan. Saya juga akan mendemonstrasikan cara kreatif menggunakan daftar untuk membuat heading vertikal yang sangat unik.

Berikut cara melakukannya.

Buat bagian reguler baru dengan satu baris kolom.

Kemudian salin salah satu modul uraian di baris tiga kolom pada tata letak di atas. Ini akan memberi kita awal pada desain.

Kemudian perbarui pengaturan blurb sebagai berikut:

• Penempatan Gambar/Blurb: Kiri
• Margin Kustom (desktop): tersisa 200 piksel
• Margin kustom (telepon): 0px kiri
• Padding Kustom: 100px atas, 100px bawah

Margin kiri menciptakan ruang yang kita perlukan untuk modul teks vertikal yang akan kita tambahkan.

Kemudian tambahkan perbatasan ke modul uraian sebagai berikut:

• Lebar Perbatasan: 2px
• Warna Perbatasan: #eeeeee

Membuat Modul Teks

Dengan konten uraian di tempat, kita sekarang dapat menambahkan modul teks kita. Buat modul teks baru lalu letakkan tepat di atas modul uraian.

Setelah itu, tambahkan html berikut di kotak konten (pastikan tab teks dipilih):

<ol>
  <li><h5>Design</h5>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
    </ul>
  </li>
</ol>

Ini adalah html yang menggunakan daftar berurutan (ol), tag h5, dan daftar tidak berurutan (ul). Ini memungkinkan kami untuk menyesuaikan setiap item daftar dan h5 secara terpisah menggunakan opsi desain bawaan Divi dalam modul teks.

Teknik ini dapat digunakan untuk membuat beberapa desain daftar yang menakjubkan.

Selanjutnya, lompat ke tab desain dan perbarui yang berikut:

• Font Daftar Tidak Berurutan: Muli
• Berat Font Daftar Tidak Terurut: Ringan
• Ukuran Teks Daftar Tidak Terurut: 15px
• Tipe Gaya Daftar Tidak Terurut: Tidak Ada
• Indentasi Item Daftar Tidak Terurut: 0,01px

• Font Daftar yang Dipesan: Abril Fatface
• Warna Teks Daftar yang Dipesan:
• Ukuran Teks Daftar yang Dipesan: 40px
• Jarak Huruf Daftar yang Diurutkan: 4px
• Tinggi Baris Daftar yang Dipesan: 1.3em
• Tipe Gaya Daftar yang Diurutkan: Desimal Leading Zero

• Judul 5 font: Muli
• Judul 5 Berat Font: ultra ringan
• Judul 5 Gaya Font: TT
• Judul 5 Ukuran Teks: 62px

Mengukur, Memutar, dan Memosisikan Modul Teks

Sekarang setelah kita memiliki desain teks, mari kita berikan lebar khusus. Ingatlah bahwa lebar modul akan menjadi tinggi modul setelah kita memutarnya untuk ditampilkan secara vertikal.

• Lebar Kustom: 300px
• Penyelarasan Modul: kiri

Untuk memutar teks, perbarui yang berikut ini:

• Transform Putar sumbu X: -90deg (desktop), 0deg (ponsel)

Kita perlu mengatur ulang rotasi kembali ke 0 derajat untuk tampilan ponsel.

Selanjutnya perbarui opsi Transform Translate:

• Transformasi Terjemahkan sumbu X: -10% (desktop), 0% (ponsel)
• Transformasi Terjemahkan sumbu Y: 50% (desktop), 0% (ponsel)

Pengaturan transformasi menyesuaikan posisi modul teks sedikit. Tapi, untuk mendapatkan spasi yang benar, kita perlu mengganti spasi negatif yang ditinggalkan oleh modul teks di atas modul uraian. Untuk melakukan ini, kita perlu menambahkan beberapa margin bawah negatif ke modul teks sebagai berikut:

• Margin Kustom (desktop): -150px bawah
• Margin Kustom (telepon): 0px bawah

Gandakan Bagian dan Perbarui Nomor Mulai Daftar yang Dipesan

Untuk membuat lebih banyak bagian dari tata letak ini, Anda dapat menduplikasi bagian tersebut. Nomor daftar yang dipesan akan tetap "1". Untuk mengubahnya, Anda perlu mengganti tag opening order list (ol) dengan yang berikut:

<ol start="2">

Ini akan memungkinkan daftar untuk memulai dengan nomor 2, bukan 1.

Itu dia. Kita semua sudah selesai!

Desain Akhir Tata Letak dengan Desain Teks Berputar

Desktop

Tablet dan Telepon

Pikiran Akhir

Mengetahui cara memutar teks (atau konten apa pun sebenarnya) di Divi adalah cara yang bagus untuk menarik perhatian ke konten Anda. Plus, jika Anda melakukannya dengan benar, itu benar-benar dapat membuat desainnya menonjol. Saya harap tutorial ini memicu beberapa inspirasi tentang bagaimana Anda dapat menerapkan rotasi teks untuk desain yang lebih indah.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!