Perlu membuat peta hex dengan efek hover melalui yang kuat Halaman Builder Elementor ? Jika demikian, cari tahu di artikel ini cara menuju ke sana.
Jika Anda ingin memiliki gambaran umum tentang apa yang akan kita bicarakan dalam tutorial ini, kami mengundang Anda untuk menonton video berikut:
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 panduan kami di: Cara Menambahkan Breadcrumb ke Situs Web dengan Elementor
Mari buat bagian baru dengan struktur untuk 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 Internal – Bagian Dalam – di kolom tengah. Widget ini secara default dikonfigurasi dengan 2 kolom, mari kita hapus salah satunya. Mari kita konfigurasikan Kesombongan di Tinggi Min dan Tinggi minimal mari kita definisikan geser ke 400.
Di tab Gaya, mari atur gambar latar belakang dengan memilih gambar dari perpustakaan Anda, lalu atur posisinya ke Unggul Terpusat, Ulangi pada Tidak berulang dan Ukuran pada Menutupi.
di Hamparan latar belakangklik terdegradasi untuk Jenis latar belakang, pilih dan ubah warna utama pada #2299EF dan lokasi di 20, maka warna sekunder pada #1917SM dan lokasi di 50, sudut pada 140 dan opacity aktif 0.85
Kemudian tambahkan Widget Judul diBagian Dalam dan sebagai Judul, Beri Nama, lalu di tab Style widget Judul, ubah warnanya menjadi #FFFFFF. Kemudian tambahkan Widget Editor Teks, dan di tab Gaya Tengahkan teks dan ubah warnanya menjadi #FFFFFF.
Lihat juga: Cara Menambahkan Gambar ke Widget Tabel Harga dengan Elementor
Pilih lagi Bagian dalam, buka tab Maju, di bagian Margin Internal, memasuki +25 2 2
Pilih Bagian Dalam lagi dan buka tab Lanjutan dan di bagian CSS Kustom, salin dan tempel kode berikut:
/*Traçage Hexagone*/
selector{
clip-path: polygon(0 25%, 50% 0, 100% 25%, 99% 75%, 50% 100%, 0 75%);
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
}
Selanjutnya, mari tambahkan cuplikan kode kedua di bawah ini ke yang sebelumnya:
/*CSS pour Afficher/Masquer la Superposition du dégradé*/
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
opacity: 0 !important;
}
selector:hover .elementor-background-overlay{
opacity: 0.85 !important;
}
/*CSS pour Afficher/Masquer l'élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.8s !important;
transition: all 0.8s !important;
}
selector:hover .elementor-column{
opacity: 1;
}
Kemudian mari kita juga menempelkan cuplikan di bawah ini.
/*CSS d'effet de transition avec ombre*/
selector:hover{
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
.hexa-mom::before{
content: '';
position: absolute;
bottom: -70px !important;
width: 100%;
color: #fff;
height: 60px;
border-radius: 50%;
background: -webkit-radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
background: radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
display: block;
-webkit-transition: all 0.8s !important;
transition: all 0.8s !important;
z-index: 999;
}
.hexa-mom:hover::before{
opacity: 1 !important;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
Lalu mari kita pilih kolom tengah dan di tab maju, memasuki hexa-ibu di lapangan kelas CSS.
Mari kita gandakan kolom ini 2 kali dan hapus 2 kolom lainnya.
Mari kita ubah gambar latar belakang widget lainnya Bagian Dalam, Judul dan isi editor teks dan juga warna gradien Background Overlay. Anda akan mendapatkan hasil seperti ini:
Di sini Anda baru saja menyelesaikan 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 kepada Anda cara membuat peta hex dengan efek. 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.
...
