Cara Mendesain Refleksi untuk Gambar dan Teks di Divi
Diterbitkan: 2019-05-19Merancang refleksi untuk gambar dan teks adalah teknik desain klasik yang dapat digunakan untuk membumbui konten halaman web. Dan, Divi memudahkan untuk membuat refleksi ini langsung dari Divi Builder tanpa harus menggunakan editor foto.
Dalam tutorial ini, saya akan menunjukkan cara mendesain refleksi untuk gambar dan teks di Divi. Kunci untuk membuat refleksi adalah dengan menggunakan opsi skala transformasi Divi untuk membuat versi cermin dari elemen tersebut. Setelah itu, Anda dapat menambahkan overlay khusus yang akan saya tunjukkan cara melakukannya dengan modul teks.
Mari kita mulai!
Sneak Peek
Berikut adalah sneak peek dari desain yang akan kita buat dalam tutorial ini.
Unduh Tata Letak Refleksi Teks dan Gambar 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 ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.
Langsung saja ke tutorialnya ya?
Berlangganan Saluran Youtube Kami
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, yang Anda butuhkan hanyalah Divi. Pastikan Tema Divi sudah terpasang dan aktif. Kami akan membuat desain kami dari awal menggunakan Divi Builder di bagian depan (pembuat visual). Anda juga memerlukan beberapa gambar tiruan untuk tutorial ini (gambar latar belakang sekitar 1920px x 600px dan gambar lain sekitar 500px x 350px).
Saat Anda siap, buka Dasbor WordPress Anda dan navigasikan ke Pages > Add New. Beri judul halaman baru Anda dan gunakan Divi Builder di bagian depan. Pilih opsi "Bangun dari Awal". Sekarang Anda siap untuk pergi!
Ide Dasar Dibalik Membuat Refleksi Gambar dan Teks di Divi
Ide dasar di balik pembuatan desain refleksi di Divi melibatkan tiga langkah:
- Buat Modul dengan Gambar atau Teks Anda
- Gandakan Modul dan Gunakan skala Transform untuk membuat gambar atau teks yang dicerminkan
- Tambahkan Gradient Overlay ke elemen cermin Menggunakan pembagi atau modul teks yang diposisikan absolut.
Teknik desain ini tidak terbatas pada modul individual. Anda sebenarnya dapat menambahkan refleksi ke seluruh baris dalam Divi menggunakan metode ini yang berguna untuk membuat desain header yang unik. Kami akan menambahkan refleksi ke baris dalam desain refleksi teks kami sedikit kemudian dalam tutorial ini. Tapi untuk sekarang mari kita mulai dengan cara membuat refleksi gambar.
Cara Membuat Refleksi Gambar
Untuk membuat refleksi gambar, mari kita mulai dengan membuat bagian reguler baru dengan satu baris kolom.
Kemudian tambahkan modul gambar ke baris.
Unggah gambar yang Anda inginkan dari galeri media ke modul gambar. Kemudian perbarui pengaturan gambar berikut:
Lebar Maks: 600px
Penyelarasan Modul: tengah
Margin Kustom: 0px bawah
Buat Gambar Cermin
Untuk membuat efek refleksi, pertama-tama kita perlu membuat duplikat cermin dari gambar langsung di bawah gambar.
Untuk melakukan ini, duplikat modul gambar. Kemudian perbarui pengaturan gambar duplikat sebagai berikut:
Opasitas: 40%
Transformasi Skala sumbu X: -100%
Properti skala transformasi adalah apa yang secara ajaib membalik gambar secara vertikal dan horizontal untuk membuat versi cermin dari gambar.
Ini menangani desain refleksi dasar. Namun, kita dapat menambahkan overlay gradien tambahan ke gambar bawah kita untuk desain refleksi yang lebih realistis.
Tambahkan Hamparan Gradien Menggunakan Modul Teks
Untuk menambahkan overlay gradien ke gambar bawah kita, kita dapat menggunakan modul teks. Kita dapat memberikan modul teks posisi absolut sehingga berada di atas gambar bawah. Kemudian kita dapat menambahkan latar belakang gradien ke modul teks. Menggunakan modul teks (bukan pembagi) akan memberi Anda opsi bonus untuk menambahkan beberapa konten di atas gambar refleksi nanti jika Anda mau.
Silakan dan buat modul teks di bawah gambar bawah.
Hapus konten default sehingga modul teks kosong.
Kemudian perbarui pengaturan modul teks sebagai berikut:
Warna Kiri Gradien Latar Belakang: rgba(255,255,255,0)
Warna Kanan Gradien Latar Belakang: #ffffff
Lebar: 100%
Tinggi: 50%
Kemudian tambahkan CSS khusus berikut ke Elemen Utama:
position: absolute !important; top: 50%;
Posisi absolut modul teks ini melapisi modul teks di bagian bawah baris.
Mari kita lihat seperti apa desainnya sejauh ini.
Menambahkan Warna Latar Belakang
Jika Anda tidak menginginkan latar belakang putih, Anda dapat bereksperimen dengan warna latar belakang lain yang menciptakan desain refleksi lebar penuh yang unik.
Untuk melakukannya, buka pengaturan baris dan perbarui yang berikut ini:
Warna Latar Belakang: #000000
Lebar: 100%:
Lebar Maks: 100%;
Padding Kustom: 0px atas, 0px bawah
Sekarang mari kita lihat hasilnya.
Menambahkan Teks ke Hamparan Modul Teks
Ingat, karena kita menggunakan modul teks sebagai overlay pada gambar bawah, kita dapat menambahkan beberapa konten jika kita mau.
Untuk melakukannya, buka pengaturan modul teks dan perbarui yang berikut ini:
Isi: “Refleksi Gambar”
Warna Teks Teks: #ffffff
Ukuran Teks Teks: 30px
Orientasi Teks: tengah
Desain Akhir
Berikut adalah desain akhir dari refleksi gambar.
Membuat Refleksi Teks di Divi
Untuk contoh berikut ini, kita akan membuat desain refleksi teks. Prosesnya sangat mirip dengan bagaimana Anda akan membuat refleksi gambar. Namun, untuk contoh ini, saya akan membuat refleksi untuk seluruh baris. Ini akan memungkinkan penggunaan untuk mencerminkan teks dan gambar latar belakang untuk desain header yang bagus.
Berikut adalah cara melakukannya.
Pertama buat bagian reguler baru dengan satu baris kolom. Kemudian tambahkan modul teks ke baris.
Perbarui konten dengan kata “Refleksi”.
Kemudian perbarui pengaturan desain sebagai berikut:
Font Teks: Oswald
Gaya Font Teks: TT
Warna Teks Teks: #333333
Ukuran Teks Teks: 10vw
Tinggi Baris Teks: .9em
Orientasi Teks: tengah
Margin Kustom: 0px bawah
Padding Kustom: 4vw atas
Perbarui pengaturan baris
Sekarang modul teks kita telah disesuaikan, saatnya memperbarui pengaturan baris.
Buka pengaturan baris dan perbarui yang berikut:
Gambar Latar Belakang: masukkan gambar latar belakang
Lebar Talang: 1
Lebar: 100%
Lebar Maks: 100%
Padding Kustom: 0px atas, 0px bawah
Berikut adalah tampilan desain sejauh ini.
Membuat Baris Teks Refleksi
Untuk membuat teks refleksi untuk desain ini, kita akan mencerminkan seluruh baris sehingga kita dapat menyertakan gambar latar belakang dalam refleksi.
Gandakan Baris dan perbarui yang berikut ini:
Transformasi Skala sumbu Y: -100%
Sekarang baris di bawah ini adalah gambar cermin dari baris di atas. Sekarang yang perlu kita lakukan adalah menambahkan overlay.
Tambahkan Hamparan Gradien Menggunakan Modul Teks
Untuk menambahkan overlay gradien ke refleksi teks baris bawah kita, kita dapat menggunakan modul teks seperti yang kita lakukan pada desain refleksi gambar pertama di atas. Seperti sebelumnya, kita dapat memberikan modul teks posisi absolut sehingga mengisi seluruh baris dan duduk di atas modul teks lainnya dengan teks refleksi kita. Kemudian kita dapat menambahkan latar belakang gradien ke overlay modul teks.
Lanjutkan dan buat modul teks baru di bawah modul teks di baris bawah.
Buka pengaturan modul teks baru dan hapus konten sehingga modul teks kosong.
Kemudian perbarui pengaturan sebagai berikut:
Warna Kiri Gradien Latar Belakang: #ffffff
Warna Kanan Gradien Latar Belakang: rgba(255,255,255,0.13)
Posisi Awal: 38%
Lebar: 100%
Tinggi: 100%
Kemudian tambahkan CSS khusus berikut ke Elemen Utama:
position: absolute !important; top: 0;
Itu dia!
Hasil Akhir
Lihat hasil akhirnya.
Berikut adalah desain yang sama tanpa gambar latar belakang.
Pikiran Akhir
Refleksi dapat terlihat sangat keren jika Anda meluangkan waktu untuk mendesainnya dengan cara yang benar. Untungnya, Divi memiliki alat untuk mewujudkannya. Ada metode lain untuk membuat refleksi CSS, tetapi sayangnya mereka cenderung kurang mendukung lintas browser. Desain dalam tutorial ini akan terlihat bagus di semua browser.
Saya telah menemukan bahwa refleksi tampak hebat di header halaman dan menampilkan gambar untuk bagian portofolio. Dan saya yakin ada banyak implementasi lain juga.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!