Apakah Anda ingin membuat animasi melayang dengan Elementor ?
Dalam tutorial ini kita akan menggunakan sekaleng pepsi yang akan kita arahkan dan yang akan mengungkapkan deskripsi tentangnya.
Kami mengundang Anda untuk melihat video berikut untuk mendapatkan gambaran tentang apa yang ingin kami tunjukkan kepada Anda.
Masukkan satu bagian kolom lalu di sidebar pilih Tinggi minimal di Kesombongan
di tinggi minimum klik VH lalu seret penggeser ke 100. Selalu di tab Layout menetapkan 650 comme lebar.
Pilih kolom dan di sidebar di lapangan Penjajaran Vertikal memilih Lingkungan.
Di tab Gaya, ubah warna latar belakang dengan mengklik Pemilih warna dan ketik # D37636 kemudian di bagian Perbatasan, ayo ambil 20 untuk semua radius tepi jalan.
Di tab maju, matikan pengikatan bantalan dan ketik 75 untuk margin internal Haut et Bas et 25 untuk margin internal Kurang ajar et Droite.
Kemudian di kolom seret widget bagian dalam. Mari kita hapus salah satu kolom dari bagian Internal.
Di kolom bagian dalam yang tersisa, jatuhkan Widget judul dan ubah judulnya menjadi Pepsi Cinta.
Baca juga panduan kami di: Cara Membuat Kartu Efek dari Portofolio di Elementor
Kemudian, di tab Gaya, beri teks warna putih dan untuk tipografi atur ukuran di 32, yang tinggi baris di 1.2, spasi huruf di 0.5.
Dibawah Widget judul, jatuhkan Widget Editor Teks dan mengedit teks. Di tab Gaya, ubah warna teks menjadi putih dan ukuran tipografi aktif 16, yang tinggi baris di 1.5 danspasi huruf di 0.5.
Di tab maju ubah marginnya Bas di -10.
Di bagian positioning tab maju, modifikasi Lebar di personnalisé dan Kustom lebar atur yang terakhir ke 310.
Di bawah paragraf kami akan menambahkan widget tombol dengan untuk Teks Baca Selengkapnya.
Di tab Gaya beri tombol warna Putih dan warna teks atur ke Hitam.
Sekarang pilih kolom dari bagian dalam, di bagian maju tab maju matikan tautan dan klik persentase lalu atur margin Kurang ajar di 20 dan di Margin Internal tentukan dari Kurang ajar di 20.
Sekarang seret gambar-widget di atas Bagian dalam menyisipkan gambar. Kami telah memilih contoh gambar minuman yang mudah ditemukan di web.
Setelah Anda memasukkan gambar, konfigurasikan Ukuran gambar di Utuh dan penjajaran ayo klik Pusat.
Di tab maju, pergi ke bagian Posisi di Lebar memilih Daring (Otomatis)Pada Posisi memilih absolu dan Orientasi Horisontal memilih Kanan kemudian perubahan masuk -9.9 dan di perubahan dari Orientasi Vertikal masuk -105.
Pergi lebih jauh ke bawah Ubah bagian mendefinisikan mengubah ukuran di 0.5.
Sekarang pilih kolom dari Bagian dalam dan di tab maju masukkan nama kelas css teks pepsi.
Kemudian pilih bagian utama kami, buka bagian Kustom CSS dari Tab nya Maju, salin dan tempel kode berikut:
/*Hover Animation CSS*/
selector{
--transition: 0.5s;
--circle-color: #313F69;
--content-background: #D27838;
--mobile-height: 670px;
--mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
content: "";
background: var(--circle-color);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 20px;
clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
clip-path: circle(400px at center);
background: var(--content-background);
}
selector:hover .elementor-widget-image{
right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
transform: scale(1);
}
selector .pepsi-text{
opacity: 0;
visibility: hiddin;
}
selector:hover .pepsi-text{
opacity: 1;
visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
height: var(--mobile-height);
}
selector .elementor-widget-image .elementor-widget-container{
transform: scale(1);
}
selector:hover .elementor-widget-image{
right: 68px !important;
top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
margin-top: -265px !important;
}
}
REMARQUE: Jika Anda tidak memiliki bagian ini maka Anda harus pergi ke Versi Pro dari Elementor.
Sekarang jika kita ingin menghapus warna latar belakang dari teks, kita akan memilih kolom utama kita dan di tab Style menonaktifkan warna latar belakang.
Saat ini, animasi Anda akan berjalan normal di browser.
Animasi di tablet juga sepertinya sempurna
Tapi di smartphone, itu tidak ditampilkan secara normal. Mari kita selesaikan masalah ini.
Mari kita tampilkan browser
Di browser pilih Bagian (pastikan Anda masih dalam mode smartphone) dan turunkan Lebar di 320
Kemudian pilih kolom utama dan di tabnya maju, atur semua margin dalam ke 25
Di browser, pilih gambar dan di tab Gayaklik PX de Lebar dan atur ke 180.
Di tab maju du widget gambar, lanjutkan Posisi, dan pilih absoludi offset horisontal masuk 75 dan pergeseran vertikal masuk 236. Singkatnya, pastikan untuk memusatkan gambar Anda di tengah lingkaran menggunakan offset yang berbeda.
Anda sekarang dapat melihat pratinjau animasi Anda di perangkat yang berbeda.
Dapatkan Elementor Pro Sekarang!!!
Kesimpulan
Jadi ! Itu saja untuk artikel ini yang menunjukkan cara membuat animasi di hover di Elementor. Jika Anda memiliki kekhawatiran tentang bagaimana menuju ke sana, kami akan senang mendengar dari Anda di 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.
...
