Apakah Anda ingin mempelajari cara membuat kartu dengan efek portofolio? Dalam tutorial baru ini kami akan menunjukkan cara melakukannya dengan Elementor.
Jika Anda tidak tahu apa yang ingin kami bicarakan hari ini, kami mengundang Anda untuk menonton video berikut:
Kalau begitu mari kita kembali ke mengapa kita ada di sini.
Untuk menyelesaikan tutorial ini, Anda perlu versi Pro dari Elementor, karena kami akan menggunakan kode CSS khusus yang hanya didukung oleh versi iniElementor.
Baca juga: Cara menampilkan teks di atas gambar dengan Elementor
Mari kita buat bagian baru dengan struktur 3 kolom, lalu di panel, mari kita definisikan Kesombongan di Tinggi Mindan kemudian Tinggi minimal ayo klik VH dan atur penggeser ke 100.
Mari kita pilih kolom tengah, dan letakkan di kolom ini Widget Bagian Internal. Widget Bagian Internal dikonfigurasi dengan 2 kolom secara default. Di bawah 2 kolom, lepaskan widget Judul dengan judul restoran, Pilih H4 untuk tag HTML, dan Pusat untuk keselarasan.
Di tab maju dari widget Judul, Ayo masuk 30 untuk Batas atas
Mari kita sekali lagi memilih Bagian Internal kita. Di panel, mari kita ubah Kesombongan di Tinggi Min dan Tinggi minimal mari kita atur kursor ke 380. Lalu, mari kita hapus kolom kanan atau kiri dari bagian Internal
Mari kita jatuhkan widget gambar di Bagian Internal dan masukkan gambar dari perpustakaan kami. ayo pilih Utuh untuk Ukuran gambar et Pusat untuk Penyelarasan.
NB: Jika Anda ingin memiliki halaman lengkap seperti milik kami, kami mengundang Anda untuk mengambil halaman dengan bantuan ekstensi Chrome GoFullPage tetapi Anda juga dapat menggunakan yang lain.
Temukan juga: Cara membuat galeri gambar dengan Elementor
Kemudian di Tab Gaya, klik PX de Lebar, mari atur penggeser ke 260 et les sinar perbatasan di 10
Selanjutnya mari kita modifikasi Box Shadow dengan mengubah Blur menjadi 40 dan Diffuse menjadi -10.
Di tab Lanjutan, di bagian positioning, Pilih absolu untuk Posisi, Orientasi Horisontal di Kurang ajar, yang décalage di 0, L 'Orientasi Vertikal di Bas.
Mari kita duplikat widget Gambar kita dua kali. Mau tidak mau mereka semua akan ditumpangkan. Mari kita buka Navigator agar kita bisa mengakses widget lain yang disembunyikan oleh yang pertama.
Mari kita ganti gambar Widget kedua dan di Tab-nya maju, mari kita modifikasi mereka margin bawah et Kurang ajar dengan memasukkan 30 untuk setiap. Anda sekarang akan melihat sedikit lag,
Lakukan hal yang sama untuk Widget Gambar ketiga, tetapi terapkan margin 60 untuk margin Bawah dan Kiri. Anda sekarang harus memiliki gambaran umum dari semua 3 widget Gambar.
Mari kita pilih widget Bagian Internal kami, buka Tab-nya maju dan di bagian Kustom CSS, salin dan tempel cuplikan kode berikut:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}(Jika Anda tidak memiliki bagian ini maka Anda tidak memiliki versi Pro, jika Anda ingin melanjutkan, Anda perlu meningkatkan versi Anda)
Sekarang jika Anda mengarahkan kursor ke peta kami, Anda akan memiliki animasi zoom
Mari kita pilih Widget Gambar pertama kita (yang terendah) dan di Tab-nya maju, ayo ambil gambar depan untuk kelas CSS.
Untuk Widget Gambar kedua, mari kita ketik gambar tengah untuk Kelas CSS.
Untuk Widget Gambar ketiga, mari kita ketik gambar terakhir untuk Kelas CSS.
Lihat juga: Cara Membuat Galeri Gambar Tab dengan Elementor
Mengarahkan kursor ke kolom kita sekarang kita akan melihat animasi yang luar biasa isi dari Bagian Internal kami.
Mari kita tampilkan halaman kita dalam mode tablet Kita akan melihat bahwa gambar tidak akan ditampilkan dengan benar.
Pilih widget Gambar pertama, di tab Style-nya, mari ubah lebarnya dengan mengklik PC lalu masukkan 150 sebagai lebarnya. Mari kita lakukan hal yang sama dengan 2 widget Gambar lainnya.
Mari kita pilih Bagian Internal kita, di bagiannya Isi, mari kita modifikasi Tinggi minimal di 225.
Mari kita tampilkan juga halaman kita dalam mode Smartphone, secara apriori tidak menimbulkan masalah apa pun. Tapi, jika ada, mari pilih Bagian Internal kita, di bagiannya Isi, mari kita ubah Tinggi Minimum.
Sekarang mari kita gandakan kolom tengah kita 2 kali, lalu hapus 2 kolom kosong lainnya.
Mari kita ubah Judul kolom ini lalu ubah gambar
Anda harus memiliki bagian yang luar biasa yang di sini adalah hasilnya:
Ini dia, Anda baru saja melakukan tugas ini dengan mudah.
Dapatkan Elementor Pro Sekarang!
Kesimpulan
Itu ada ! Itu saja untuk artikel ini yang menunjukkan cara membuat kartu dengan efek portofolio. Jika Anda memiliki kekhawatiran tentang cara menuju ke sana, beri tahu kami di dalam komentar.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
