Anda mungkin pernah menjelajahi blog yang menawarkan tata letak yang memiliki teks terbalik. Umumnya desain ini digunakan pada blog jenis majalah dan efeknya cukup menarik untuk ditambahkan Divi. Dalam tutorial ini, saya sarankan Anda menemukan cara menambahkan teks terbalik di tata letak Anda di Divi.
Harus dikatakan bahwa dengan Divi, elemen apa pun di halaman Anda dapat dirotasi menggunakan opsi transformasi yang ada di dalam pembaruan 3.2. Jadi kita akan merancang tata letak tiga bagian yang menggabungkan contoh teks yang diputar.
Ikhtisar hasil akhir
Gunakan paket yang tersedia
Untuk mencapai tata letak ini, Anda harus mengunduh proyek yang disimpan dalam file ZIP. Setelah Anda mengunduhnya, yang perlu Anda lakukan hanyalah mengimpornya ke Divi Builder. Anda dapat mengunduh file ini secara langsung dengan mengklik tautan Unduh berikut.
Téléchager
Bagaimana cara menambahkan teks yang diputar ke Divi
Sebagai permulaan, kami akan membuat header dengan teks vertikal. Untuk melakukan ini, kita akan memutar modul blurb menggunakan opsi transformasi. Anda harus membuat bagian reguler dengan deretan dua kolom.
Sebelum menambahkan modul, Anda harus menghapus margin bagian dalam dan bawah bagian dengan memperbarui pengaturan bantalan internal sebagai berikut: rembossing khusus: 0px di bagian atas, 0px di bagian bawah.
Maka Anda harus mengubah parameter garis juga:
- Gambar latar: [tambahkan gambar pilihan Anda dengan lebar minimal 1920 piksel]
- Kolom 1 Warna Latar Belakang: #121212
- Lebar khusus: 100%
- Lebar selokan: 1
- Menyamakan ketinggian kolom: YA
- Padding khusus (desktop): 0px di bagian atas, 0px di bagian bawah
- Padding khusus (tablet): 40% di sebelah kanan
- Padding khusus (telepon): 30% di sebelah kanan
- Kolom 1 Padding khusus (desktop): 200px di bagian atas, 200px di bagian bawah
- Kolom 1 Padding khusus (tablet): 150px di bagian atas, 150px di bagian bawah
- Shadow of the box: seperti pada tangkapan layar
- Posisi horizontal Shadow kotak: 0px
- Posisi bayangan kotak vertikal: -100px
- Warna Bayangan: #f6454e
Tambahkan Modul Ringkasan (Blurb)
Langkah selanjutnya sekarang adalah menambahkan modul untuk header. Untuk melakukan ini, tambahkan modul ringkasan di kolom kiri pada baris yang sama.
Perbarui modul sebagai berikut:
- Judul: DESAIN BLOG
- Isi: Anda bisa menulis apa saja.
- Gunakan ikon: YA
- Ikon: hati
- Warna Ikon: # f6454e
- Ukuran Font Ikon: 32px
- Orientasi teks: tengah
- Judul Tingkat Judul: H1 (karena ini adalah judul utama halaman)
- Font Judul: Muli
- Judul Font Style: TT
- Warna Judul Teks: #ffffff
- Ukuran Judul Teks: 70px (desktop), 50px (tablet), 36px (telepon)
- Warna teks isi: #cccccc
- Spasi huruf-huruf tubuh: 4px
- Lebar: 500px
- Penyelarasan modul: pusat
Perhatikan bahwa karena kita akan memutar modul presentasi sehingga vertikal, lebar kustom 500 px akan sesuai dengan ketinggian modul presentasi vertikal. Oleh karena itu penting bahwa isi cocok dengan modul ini. Untuk contoh ini, kami menggunakan sejumlah kecil teks dan mengubah ukuran font judul pada perangkat yang berbeda sehingga teks tidak membungkus dan tidak mengganggu desain.
Cara merotasi modul
Untuk memutar modul ringkasan (dan semua modul ringkasannya). isi), perbarui opsi transformasi sebagai berikut:
- Mengubah rotasi sumbu-X: -90deg
Anda harus memasukkan nilai -90deg secara manual. Ini akan memberi Anda perataan vertikal konten dari bawah ke atas.
Tambahkan tombol vertikal
Sekarang kita akan menambahkan tombol di bagian bawah tajuk kita untuk mengingatkan pengguna untuk menggulir ke bawah halaman. Kemudian kita dapat memutar tombol menggunakan opsi transformasi, seperti yang kita lakukan untuk modul ringkasan.
Buat baris baru dengan struktur satu kolom.
Sebelum menambahkan modul tombol kami, perbarui pengaturan baris sebagai berikut:
- Warna latar belakang: #f6454e
- Lebar khusus: 100%
- Lebar selokan: 1
Kemudian, tambahkan modul tombol ke saluran dan perbarui opsi tombol berikut:
- Alignment tombol: tengah
- Gunakan gaya khusus untuk Tombol: Ya
- Ukuran teks tombol: 16px
- Warna teks tombol: #ffffff
- Lebar batas tombol: 0px
- Ruang huruf pada tombol: 9 piksel
- Berat font: ringan
- Gaya Fon: TT
- Ikon tombol: panah kanan
Rotasi dan pemosisian tombol
Untuk memutar dan mengatur posisi tombol, kami akan menggunakan kombinasi margin dan mengubah rotasi sebagai berikut:
- Margin Kustom (Desktop): -50px di atas, 50px di bawah, -50px di kiri
- Margin khusus (tablet): 0px di sebelah kiri
- Transformasi X Axis Transform: 90deg
Kali ini kenop diputar 90 derajat untuk mendapatkan tampilan vertikal dari atas ke bawah untuk teks. Ini tampaknya baik-baik saja karena kami ingin pengguna menggulir ke bawah.
