Divi: Tema WordPress terbaik sepanjang masa!

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

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:

buat kartu dengan efek portofolio

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 Elementor ini.

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.

3 kolom bagian

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

buat kartu dengan efek portofolio

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

buat kartu dengan efek portofolio

Mari kita jatuhkan widget gambar di Bagian Internal dan masukkan gambar dari perpustakaan kami. ayo pilih Utuh untuk Ukuran gambar et Pusat untuk Penyelarasan.

buat kartu dengan efek portofolio

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

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda membuat Mudah dan Gratis desain situs web atau blog apa pun dengan tampilan profesional. Berhentilah membayar banyak untuk situs web yang dapat Anda lakukan sendiri.

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.

buat kartu dengan efek portofolio

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.

buat kartu dengan efek portofolio

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.

buat kartu dengan efek portofolio

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)

Apakah Anda ingin menjual produk Anda di internet?

Unduh WooCommerce secara gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress dan dengan mudah membuat toko online Anda. Sempurna untuk pemula.

Sekarang jika Anda mengarahkan kursor ke peta kami, Anda akan memiliki animasi zoom

buat kartu dengan efek portofolio

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

Melayang di atas kolom kami sekarang kami akan melihat animasi yang indah dari konten Bagian Internal kami.

buat kartu dengan efek portofolio

Mari kita tampilkan halaman kita dalam mode tablet Kita akan melihat bahwa gambar tidak akan ditampilkan dengan benar.

buat kartu dengan efek portofolio

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 pilih Bagian Internal kami, di bagian Kontennya, ubah Tinggi minimal di 225.

buat kartu dengan efek portofolio

Mari kita juga menampilkan halaman kita dalam mode Smartphone apriori itu tidak menimbulkan masalah. Tapi, jika ada, mari kita pilih Bagian Internal kita, di bagian Kontennya, mari kita ubah Tinggi Minimumnya.

Sekarang mari kita gandakan kolom tengah kita 2 kali, lalu hapus 2 kolom kosong lainnya.

buat kartu dengan efek portofolio

Mari kita ubah Judul kolom ini lalu ubah gambar

Anda harus memiliki bagian yang luar biasa yang di sini adalah hasilnya:

buat kartu dengan efek portofolio

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.

...