Apakah Anda ingin mempelajari cara Memperbesar kartu profil dengan plugin pembuat halaman? Elementor ?
Dalam tutorial baru ini Elementor, kami akan menunjukkan cara menerapkan efek Zoom pada kartu profil, sambil mengungkapkan nama profil serta ikon jejaring sosialnya.
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.
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.
Ayo tambahkan widget Bagian dalam di kolom tengah. Widget Bagian Internal secara default dikonfigurasi dengan 2 kolom, mari kita hapus salah satunya. Mari konfigurasikan sisanya di panel dengan memodifikasi Kesombongan di Tinggi Min dan Tinggi minimal mari kita atur kursor ke 400.
Di tab Gaya, mari kita modifikasi Hamparan latar belakang. Klik di klasik pada jenis latar belakang, dan pilih gambar dari perpustakaan dan dalam pengaturan gambar, pilih Terpusat Terpusat pada posisi Menutupi pada Ukuran. Kegelapan pada 1 dan
Di bagian perbatasan klik % dan masuk 4 untuk semua radius tepi jalan.
Dalam jumlah kotak, atur penggeser ke 0 di Horisontal, untuk 70 di Vertikal, untuk 63 di Flou, untuk -60 di penyebar. Anda akan melihat efek bayangan yang indah di bawah gambar Anda.
Dalam bagian dalam geser Widget judul. Seperti judul masukkan Steve Jobs, di tab Style, pilih warna putih #FFFFFF. Dalam tipografi, pilih Ukuran 20.
Kemudian pilih kolom Widget Bagian Internal dan di tab Gaya, pilih jenis batas dengan mengklik Padat, semua lebar pada 1, dan warna pada #FFFFFF.
Di tab maju, ubah marginnya menjadi 15 dan margin internal aktif 20.
Sekarang masukkan ikon media sosial dengan menyeret widget Ikon Media Sosial ke bagian Internal.
Edit tautan media sosial di tab Isi dengan mengklik Setiap jejaring sosial. Jika Anda ingin menambahkan jejaring sosial lain, klik tombol Tambaheh sebuah elemen
Di Bidang Ikon, klik Perpustakaan Ikon dan di bilah pencarian ketik huruf pertama dari jejaring sosial Anda, segera setelah Anda menemukannya, pilih dan klik tombol Sisipkan.
Lalu pergi ke tab Gaya, di bagian icon, ubah warnanya menjadi personnalisé.
Baca juga panduan kami di; Bagaimana cara menambahkan pagination dengan Elementor
di Warna utama, atur transparansi ke minimum.
di Warna Sekunder, pilih warna #FFFFFF. Pada Ukuran, masukkan 20, Margin Internal pada 0.4.
Sekarang klik pada tab maju, dan di bagian positioningklik personnalisé. pada lebar khusus, memasuki 0.
Temukan juga Cara Menggunakan Color Picker dengan Elementor
di Posisi, pilih absolu, di Shift 15Pada Orientasi Vertikal choisir Basdan perubahan di 20.
Pilih lagi Bagian dalam dan di tab maju, di bagian Kustom CSS (Jika Anda tidak memiliki bagian ini, segera tingkatkan ke Elementor versi pro untuk melanjutkan)
Salin dan tempel kode berikut ke bagian ini:
/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
overflow: hidden !important;
}
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover .elementor-background-overlay{
-webkit-transform: scale(2);
transform: scale(2);
}Apriori Anda seharusnya tidak melihat banyak, tetapi jika Anda mengarahkan kursor ke gambar, Anda akan melihat zoom diterapkan pada gambar.
Sekarang salin dan tempel kode berikut setelah kode sebelumnya untuk menampilkan atau menyembunyikan elemen tertentu dari kolom:
/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .elementor-column{
opacity: 1;
}Sekarang segera setelah Anda mengarahkan kursor ke gambar, zoom berlaku untuk gambar, dan nama serta ikon jejaring sosial muncul.
Mari kita gandakan kolom ini 2 kali dan hapus 2 kolom lainnya.
Ubah gambar latar belakang Bagian Internal, serta nama dan tautan jejaring sosial.
Ini dia, Anda baru saja melakukan tugas ini dengan mudah. Pratinjau tablet dan ponsel cerdas Anda berfungsi, coba ubah margin agar sesuai dengan setiap perangkat.
Dapatkan Elementor Pro Sekarang!
Kesimpulan
Jadi ! Itu saja untuk artikel ini yang menunjukkan cara menerapkan efek Zoom pada kartu profil. 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.
...
