Cara Membuat Efek Gulir Teks Slashing di Divi
Diterbitkan: 2020-05-11Membuat Efek Teks Slashing adalah cara yang menyenangkan untuk menghidupkan konten Anda. Idenya adalah untuk memberikan ilusi bahwa teks terpotong menjadi dua dan pecah saat pengguna menggulir halaman ke bawah. Dalam tutorial ini, kami akan menunjukkan betapa mudahnya membuat desain ini di Divi!
Mari kita mulai.
Sneak Peek
Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.
Unduh Tata Letaknya GRATIS
Untuk mendapatkan desain dari tutorial ini, 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 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.
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 bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.
Klik tombol Impor.
Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.
Kemudian klik tombol impor.
Setelah selesai, tata letak bagian akan tersedia di Divi Builder.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda perlu melakukan hal berikut:
- Jika belum, instal dan aktifkan Tema Divi.
- Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
- Pilih opsi "Bangun Dari Awal".
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Bagian 1: Merancang Bagian
Di bagian pertama ini, kita akan mendesain latar belakang bagian untuk tata letak bagian kita.
Warna latar belakang
Untuk memulai, tambahkan warna latar belakang ke bagian default sebagai berikut:
- Warna Kiri Latar Belakang Gradien: #29c4a9
- Warna Kanan Latar Belakang Gradien: #2b87da
Pembagi
Di bawah tab desain, tambahkan pembagi atas sebagai berikut:
- Gaya Pembagi Atas: lihat tangkapan layar
- Pembagi Warna: putih
- Pembagi Balik: vertikal
Jarak
Untuk membantu menguji efek gulir untuk desain, mari tambahkan beberapa margin sementara ke bagian atas dan bawah bagian. Kami selalu dapat menghapusnya saat menambahkan bagian ke halaman lain. Kita juga perlu menambahkan jumlah padding yang sama ke atas dan bawah.
- Margin: 80vh atas, 80vh bawah
- Padding: 200px atas, 200px bawah
Bayangan Kotak untuk Ruang Bawah Ekstra
Untuk mendapatkan beberapa warna/ruang desain tambahan di bagian bawah bagian tanpa mengorbankan ruang sebenarnya dari bagian tersebut, kita dapat menambahkan bayangan kotak sebagai berikut:
- Bayangan Kotak: lihat tangkapan layar
- Posisi Horizontal Bayangan Kotak: 0px
- Posisi Vertikal Bayangan Kotak: 100px
- Warna Bayangan: #2b87da
Visibilitas Tersembunyi
Kemudian atur overflow ke hidden sehingga efek scroll kita tidak terlihat saat bergerak di luar bagian.
- Luapan Horisontal: Tersembunyi
- Overflow Vertikal: Tersembunyi
Bagian 2: Membuat Efek Teks Tebasan
Di bagian selanjutnya ini, kita akan membuat efek teks slashing. Kita akan menumpuk dua baris di atas satu sama lain, masing-masing dengan modul teks yang menyimpan konten teks yang sama. Kemudian dengan menggunakan margin negatif, kita akan mendorong teks bagian atas ke bawah, menyembunyikan bagian bawah teks. Kemudian kita akan menggunakan margin negatif untuk mendorong teks bagian bawah ke atas, menyembunyikan bagian atas teks. Setelah selesai, kita dapat memindahkan baris/kolom atas menggunakan efek scroll untuk membuat ilusi teks yang sedang dipotong.
Tambahkan Baris untuk Bagian Atas Teks
Pertama, mari tambahkan baris satu kolom.
Kemudian perbarui pengaturan baris sebagai berikut:
- Lebar Talang: 1
- Padding: 0px atas, 0px bawah
Visibilitas Kolom Tersembunyi
Selanjutnya, buka pengaturan kolom dan perbarui overflow menjadi tersembunyi:
- Luapan Horisontal: Tersembunyi
- Overflow Vertikal: Tersembunyi
Tambahkan Modul Teks
Di kolom tambahkan modul teks baru.
Konten Teks
Di area isi konten, tambahkan kata "Slash".
Desain Teks
Lompat ke tab desain dan perbarui gaya teks sebagai berikut:
- Font Teks: B612 Mono
- Berat Font Teks: Tebal
- Gaya Font Teks: TT
- Warna Teks Teks: #ffffff
- Teks Ukuran Teks: 150px (desktop), 100px (tablet), 60px (ponsel)
- Spasi Surat Teks: 0.1em
- Perataan Teks: tengah
Margin Teks
Di sini kita perlu memastikan dan menambahkan margin bawah yang persis setengah ukuran teks.
- Margin: -75px bawah (desktop), -50px (tablet), -30px (ponsel)
Tambahkan Baris untuk Bagian Bawah Teks
Baris Duplikat
Satu baris pertama dengan teks ada di tempatnya, duplikat seluruh baris untuk membuat baris bawah.
Perbarui Margin Modul Teks
Kemudian perbarui margin modul teks di baris duplikat dengan margin atas negatif alih-alih margin bawah untuk menyembunyikan bagian atas teks.
- Margin: -75px atas (desktop), -50px atas (tablet), -30px atas (ponsel)
Tambahkan Efek Gulir ke Kolom Baris Atas
Selanjutnya, kita siap untuk menambahkan efek scroll ke kolom di baris paling atas. Kami tidak dapat menambahkan efek gulir ke modul teks karena teks akan menjadi tersembunyi karena nilai tersembunyi luapan kolom yang menyembunyikan bagian bawah teks.
Buka pengaturan kolom untuk baris atas dan perbarui yang berikut:
Di bawah tab gerakan vertikal…
- Aktifkan Gerakan Vertikal: YA
- Offset Awal: 0 (pada 0%)
- Offset Tengah: 0 (pada 50%)
- Offset Akhir: -.02 (pada 75%)
Di bawah tab Gerakan Horizontal…
- Aktifkan Gerakan Horizontal: YA
- Offset Awal: 0 (pada 0%)
- Offset Tengah: 0 (pada 50%)
- Offset Akhir: 0,2 (pada 75%)
Di bawah tab Rotasi…
- Aktifkan Rotasi: YA
- Rotasi Mulai: 0 (pada 0%)
- Rotasi Pertengahan: 0 (pada 50%)
- Rotasi Akhir: 1 derajat (pada 75%)
Sekarang efek teks pemotongan kami selesai!
Bagian 3: Membuat Pembagi Bergerak
Dengan selesainya efek teks garis miring, kami dapat menambahkan elemen tambahan yang menyenangkan – pembagi terbang kecil yang memotong teks! Untuk membuat ini, kita akan menggunakan modul pembagi yang bergerak di tengah halaman bagian di tempat yang tepat untuk modul teks.
Berikut cara melakukannya.
Menambahkan baris
Tambahkan baris satu kolom di bawah baris kedua.
Tambahkan Modul Pembagi
Di kolom, tambahkan modul pembagi baru.
Latar Belakang Pembagi
Kemudian pilih TIDAK untuk menunjukkan pembagi. Sebagai gantinya, berikan pembagi warna latar belakang sebagai berikut:
- Warna Latar Belakang Gradien Kiri: transparan
- Warna Kanan Gradien Latar Belakang: #29c4a9
Transformasi Skala
Kemudian perbarui ketinggian dan pindahkan ke kiri menggunakan opsi ubah terjemahan.
- Tinggi: 4px
- Transformasi Terjemahkan X Sumbu: -100%
Efek Gulir
Sekarang tambahkan efek gulir untuk memindahkan pembagi ke kanan.
Di bawah tab gerakan horizontal…
- Aktifkan Gerakan Horizontal: YA
- Offset Awal: -18 (pada 25%)
- Offset Tengah: 0 (pada 50%)
- Offset Akhir: 13 (pada 75%)
Pengaturan Baris
Untuk memastikan pembagi “memotong” di tengah teks, kita perlu memperbarui pengaturan baris sebagai berikut:
- Lebar: 100%
- Lebar Maks: 100%
- Padding: 0px atas, 0px bawah
- Posisi: Absolut
- Lokasi: kiri tengah
- Indeks Z: 9
Sekarang pembagi akan bergerak dari kiri ke kanan memotong bagian tengah teks.
Bagian 4: Menambahkan Teks Tubuh
Untuk bagian terakhir ini, kita akan menambahkan blok teks untuk melengkapi tata letak.
Menambahkan baris
Tambahkan baris satu kolom baru di bawah baris dengan pembagi.
Tambahkan Modul Teks
Kemudian tambahkan modul teks baru ke baris.
Konten Teks
Kemudian rekatkan HTML berikut ke area tubuh:
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p> <a href=""> | Learn More ></a>
Desain Teks
Di bawah tab desain, perbarui yang berikut ini:
- Warna Teks Teks: #ffffff
- Warna Teks Tautan: #121212
- Ukuran Teks Tautan: 20px
Pengaturan Baris
Buka pengaturan untuk baris induk dan perbarui yang berikut:
- Lebar Talang: 1
- Lebar Maks: 400px
- Posisi: Absolut
- Lokasi: tengah bawah
- Offset Vertikal: 20px (desktop dan tablet), -25px (ponsel)
Hasil Akhir
Berikut adalah hasil akhirnya.
Pikiran Akhir
Untuk desain ini, penting untuk menjaga teks pada satu baris di semua perangkat sehingga Anda terbatas pada jumlah teks yang akan dipotong. Tapi, teknik efek slashing scroll ini bisa diterapkan lebih dari sekedar teks. Anda juga dapat dengan mudah memotong gambar!
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!