Loncat ke Konten Utama

Cara Menampilkan Tata Letak dengan Teks Terbalik pada Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Anda mungkin meramban blog yang menawarkan tata letak dengan teks yang tumpah. Secara umum, desain ini digunakan di blog jenis majalah dan itu efek yang cukup menarik yang dapat ditambahkan ke Divi. Dalam tutorial ini, saya mengusulkan Anda untuk menemukan cara menambahkan teks terbalik di tata letak Anda di Divi.

Harus dikatakan bahwa dengan Divi, dimungkinkan untuk memutar elemen apa pun dari halaman Anda dengan menggunakan opsi transformasi yang terintegrasi dalam pembaruan 3.2. Karena itu kami akan merancang tata letak tiga bagian yang menggabungkan contoh teks yang diputar.

Ikhtisar hasil akhir

Gunakan paket yang tersedia

Untuk membuat tata letak ini, Anda harus mengunduh proyek tersimpan sebagai file ZIP. Setelah mengunduhnya, Anda hanya perlu mengimpornya di 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.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Maka Anda harus mengubah parameter garis juga:

  • Gambar latar belakang: [tambahkan gambar pilihan Anda setidaknya 1920 piksel lebar]
  • 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 screenshot
  • Posisi Bayangan Horisontal kotak: 0px
  • Posisi vertikal bayangan kotak: -100px
  • Warna Bayangan: #f6454e

Tambahkan Modul Ringkasan (Blurb)

Langkah selanjutnya 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
  • Konten: Anda dapat menulis apa pun.
  • Gunakan ikon: YES
  • Ikon: hati

  • Warna ikon: #f6454e
  • Ukuran font ikon: 32px
  • Orientasi teks: tengah
  • Judul Level 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. Karena itu penting bahwa konten diintegrasikan ke dalam 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.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Cara merotasi modul

Untuk memutar modul ringkasan (dan semua isinya), perbarui opsi transformasi sebagai berikut:

  • Mengubah rotasi sumbu-X: -90deg

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

Tambahkan tombol vertikal

Sekarang, kami akan menambahkan tombol di bagian bawah tajuk kami 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 parameter garis sebagai berikut:

  • Warna latar belakang: #f6454e
  • Lebar khusus: 100%
  • Lebar selokan: 1

Kemudian, tambahkan modul tombol ke saluran dan perbarui opsi tombol berikut:

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [GRATIS]

  • 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, tombol diputar derajat 90 untuk mendapatkan tampilan vertikal dari atas ke bawah untuk teks. Ini sepertinya ok karena kami ingin pengguna menggulir ke bawah.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
9 saham
saham9
menciak
Register