Mendesain highlight untuk gambar dan teks adalah teknik desain klasik yang dapat digunakan untuk membumbuinya isi dari sebuah halaman web. Selain itu, Divi memudahkan pembuatan refleksi ini langsung dari Divi Builder tanpa harus menggunakan editor foto.
Dalam tutorial ini, saya akan menunjukkan cara mendesain refleksi untuk gambar di Divi. Kunci untuk melakukan refleksi adalah menggunakan opsi transformasi Divi untuk membuat versi cermin dari suatu item. Setelah itu Anda dapat menambahkan overlay khusus yang akan saya tunjukkan kepada Anda bagaimana menggunakan modul teks.
Ayo mulai!
penelitian
Berikut ini adalah ikhtisar desain yang akan kami buat dalam tutorial ini.
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 front-end (pembuat visual). Anda juga akan 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 buka Pages> Add. Beri judul halaman baru Anda dan terapkan Divi Builder di front-end. Pilih opsi "Build from Scratch". Sekarang Anda siap untuk pergi!
Ide dasar di balik pembuatan gambar dan refleksi teks di Divi
Ide dasar untuk membuat pola refleksi di Divi mencakup tiga langkah:
- Buat modul dengan gambar atau teks Anda
- Gandakan modul dan gunakan skala transformasi untuk membuat gambar cermin atau teks
- Tambahkan overlay gradien ke elemen cermin menggunakan pembagi atau modul teks yang benar-benar diposisikan.
Teknik desain ini tidak terbatas pada modul individu. Anda sebenarnya dapat menambahkan refleksi ke seluruh baris di Divi menggunakan metode ini, yang berguna untuk membuat desain tajuk yang unik. Kami akan menambahkan refleksi ke garis desain refleksi teks kami nanti di tutorial ini. Namun untuk saat ini, mari kita mulai dengan 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.
Unduh gambar yang Anda inginkan dari perpustakaan media ke modul gambar. Kemudian perbarui pengaturan gambar berikut:
Lebar maksimum: 600px
Penyelarasan modul: pusat
Margin khusus: 0px di bagian bawah
Buat bayangan cermin
Untuk membuat efek refleksi, pertama-tama kita perlu membuat salinan duplikat gambar tepat di bawah gambar.
Untuk melakukan ini, gandakan modul gambar. Kemudian perbarui pengaturan gambar duplikat sebagai berikut:
Opacity: 40%
Skala transformasi sumbu X: -100%
Properti skala Transform adalah yang secara ajaib membalik gambar secara vertikal dan horizontal untuk membuat versi gambar yang dicerminkan.
Ini mendukung desain refleksi dasar. Namun, kami dapat menambahkan overlay gradien tambahan ke gambar kami yang lebih rendah untuk desain refleksi yang lebih realistis.
Tambahkan hamparan gradien menggunakan modul teks
Untuk menambahkan overlay gradien ke gambar bawah, kita dapat menggunakan modul teks. Kita dapat memberikan posisi absolut pada modul teks sehingga berada di atas gambar bawah. Selanjutnya, kita dapat menambahkan latar belakang gradien ke modul teks. Menggunakan modul teks (bukan pemisah) akan memberi Anda opsi tambahan untuk menambahkan isi atas gambar refleksi nanti jika diinginkan.
Lanjutkan dan buat modul teks di bawah gambar bawah.
Hapus isi secara default sehingga modul teks kosong.
Kemudian perbarui pengaturan modul teks sebagai berikut:
Warna gradien latar belakang kiri: rgba (255,255,255,0)
Warna latar kanan gradien: #ffffff
Lebar: 100%
Tinggi: 50%
Kemudian tambahkan kode CSS khusus berikut ke elemen utama:
posisi: mutlak! penting; atas: 50%;
Penempatan absolut modul teks ini menempatkan modul teks pada bagian bawah baris.
Menambahkan warna latar belakang
Jika Anda tidak ingin latar belakang putih, Anda dapat menggunakan warna latar belakang lain untuk membuat pola refleksi di seluruh lebar.
Untuk melakukan ini, buka pengaturan jalur dan perbarui yang berikut:
Warna latar: #000000
Lebar: 100%:
Lebar Maks: 100%;
Padding khusus: 0px tinggi, 0px bawah
Mari kita lihat hasilnya sekarang.
Refleksi dapat terlihat sangat keren jika Anda meluangkan waktu untuk mendesainnya dengan benar. Untungnya, Divi memiliki alat untuk berhasil. Ada metode lain untuk melakukan refleksi CSS, tetapi sayangnya metode tersebut cenderung kurang mendapat dukungan dari browser. Desain dalam tutorial ini akan terlihat bagus di semua browser.
Saya telah menemukan refleksi terlihat bagus di header halaman dan dalam menyajikan gambar untuk item portofolio. Dan saya yakin ada banyak implementasi lainnya.
Itu saja untuk tutorial ini, saya harap ini memungkinkan Anda menambahkan refleksi di situs WordPress Anda menggunakan fitur internal Divi.
