Loncat ke Konten Utama

Cara membuat refleksi gambar di Divi

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]

Desain refleksi untuk gambar dan teks adalah teknik desain klasik yang dapat digunakan untuk meningkatkan konten halaman web. Selain itu, Divi membuatnya mudah untuk membuat refleksi ini langsung dari Divi Builder tanpa harus menggunakan editor foto.

dalam hal ini Tutoriel, Saya akan menunjukkan kepada Anda bagaimana merancang refleksi untuk gambar di Divi. Kunci untuk refleksi adalah menggunakan opsi transformasi Divi untuk membuat versi mirror dari suatu elemen. Setelah itu, Anda dapat menambahkan overlay khusus yang akan saya tunjukkan kepada Anda bagaimana menggunakannya dengan modul teks.

Ayo mulai!

penelitian

Berikut ini adalah ikhtisar desain yang akan kami buat dalam tutorial ini.

Apa yang Anda butuhkan untuk memulai

Sebagai permulaan, yang Anda butuhkan adalah Divi. Pastikan tema Divi terinstal dan aktif. Kami akan membuat desain kami dari awal menggunakan Divi Builder di front-end (konstruktor visual). Anda juga akan memerlukan beberapa gambar tiruan untuk tutorial ini (gambar latar tentang 1920px x 600px dan gambar lain tentang 500px x 350px).

Saat Anda siap, buka dasbor WordPress Anda dan pergi ke Halaman> Tambah. Berikan judul ke halaman baru Anda dan gunakan Divi Builder di front-end. Pilih opsi "Bangun dari Awal". Sekarang Anda siap berangkat!

Ide dasar di balik membuat refleksi gambar dan teks di Divi

Gagasan dasar untuk menciptakan pola berpikir dalam Divi terdiri dari tiga langkah:

  1. Buat modul dengan gambar atau teks Anda
  2. Gandakan modul dan gunakan skala transformasi untuk membuat gambar atau teks cermin
  3. Tambahkan overlay gradien ke elemen cermin menggunakan pembagi atau modul teks penentuan posisi absolut.

Teknik desain ini tidak terbatas pada modul individual. Anda sebenarnya dapat menambahkan refleksi ke seluruh baris di Divi menggunakan metode ini, yang berguna untuk membuat desain header yang unik. Kami akan menambahkan refleksi ke garis desain refleksi teks kami nanti dalam tutorial ini. Tetapi untuk sekarang, mari kita mulai dengan membuat refleksi gambar.

Cara membuat refleksi gambar

Untuk membuat refleksi gambar, mari kita mulai dengan membuat bagian reguler baru dengan baris kolom.

Kemudian tambahkan modul gambar ke baris.

Divi: Tema WordPress terbaik sepanjang masa!

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

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 gambar cermin

Untuk membuat efek refleksi, pertama-tama kita harus membuat salinan duplikat gambar langsung di bawah gambar.

Untuk melakukan ini, duplikat modul gambar. Kemudian perbarui parameter dari gambar duplikat sebagai berikut:

Opacity: 40%
Sumbu X dari skala transformasi: -100%

Properti Transform skala adalah apa yang secara ajaib membalik gambar secara vertikal dan horizontal untuk membuat versi cermin dari gambar.

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 overlay gradien menggunakan modul teks

Untuk menambahkan overlay gradien ke gambar yang lebih rendah, kita dapat menggunakan modul teks. Kita dapat memberikan modul teks posisi absolut sehingga berada di atas gambar bawah. Kemudian kita bisa menambahkan latar belakang gradien ke modul teks. Menggunakan modul teks (bukan pemisah) akan memberi Anda opsi tambahan untuk menambahkan konten di atas gambar refleksi nanti jika Anda mau.

Silakan dan buat modul teks di bawah gambar bawah.

Buat Toko Online Anda dengan mudah

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

Hapus konten default sehingga modul teks kosong.

Divi Reflections untuk teks dan gambar

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: absolut! 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 mewujudkannya. Ada metode lain untuk melakukan refleksi CSS, tetapi sayangnya, mereka cenderung kurang mendapat dukungan dari browser. Gambar-gambar dalam tutorial ini akan terlihat bagus di semua browser.

Saya menemukan bahwa refleksi terlihat bagus di header halaman dan dalam presentasi gambar untuk item portofolio. Dan saya yakin ada banyak implementasi lainnya.

Itu saja untuk tutorial ini, saya harap ini akan memungkinkan Anda untuk menambahkan refleksi pada situs WordPress Anda dengan menggunakan fitur internal Divi.

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
1 saham
saham1
menciak
Register
Ada apa