Apakah Anda ingin membuat tombol mengambang dengan indeks Z aktif? Elementor ?

Kami yakin Anda sudah familiar dengan tombol yang muncul di depan semua konten layar dan biasanya memiliki bentuk melingkar dan ikon di tengah. Nah, itulah tombol aksi mengambang.

Tombol tindakan mengambang dapat memicu tindakan atau mengirim Anda berlayar ke suatu tempat. Seperti pemicu email, jejaring sosial, orientasi pengunjung untuk berlangganan saluran, dan banyak lainnya.

di Elementor, ada dua metode untuk membuat tombol aksi mengambang, yaitu sebagai berikut:

  • Dengan mengatur Z-Index
  • Dengan membuat jendela popup -Popup-

Dalam tutorial ini kami hanya akan menunjukkan cara membuat tombol aksi mengambang dengan mengatur indeks Z. Dan kami akan menggunakan versi pro untuk mewujudkannya.

Tapi pertama-tama, cari tahu: Cara menginstal Elementor di WordPress

Cara Membuat Tombol Aksi Mengambang di Elementor

Anda dapat menggunakan versi gratisElementor untuk membuat tombol tindakan mengambang dengan metode ini. Namun, Anda perlu menempelkan tombol yang Anda desain di setiap halaman tempat Anda ingin tombol tersebut ditampilkan di halaman Anda situs web.

dengan Elementor Pro, Anda juga dapat mengakses fitur CSS khusus, yang akan kita gunakan dalam tutorial ini.

Buka editor Elementor Anda; Anda dapat memodifikasi konten yang ada (halaman, artikel, dll...) atau membuat yang baru. Dalam tutorial ini, kita akan memodifikasi halaman.

Pertama, buat bagian baru dengan satu kolom. Pilih widget Tombol dan seret dan lepas ke area pengeditan dari panel widget. Kemudian ubah tombolnya teks dan tautan. 

Dalam tutorial ini, kita akan menggunakan tombol sebagai pemicu untuk menekan tombol pengunjung untuk menavigasi situs jaringan elemen. Kemudian, pada opsi penjajaran, atur ke kanan et, Akhirnya, ubah ukuran dari tombol Hidup Sangat besar.

buat tombol mengambang dengan indeks Z

Seperti yang Anda lihat di GIF di atas, tombol ini tidak bergerak di bagian tersebut. Selanjutnya, kita akan membuatnya bergerak saat kita menggulir sambil menjaganya di posisi yang sama.

Buka tab maju. Dalam parameter tata letak, atur lebarnya di Inline (mobil), tentukan posisi di Tetap, mengatur orientasi horizontal pada kanan dan sesuaikan décalage seperti yang diinginkan.

buat tombol mengambang dengan indeks Z

Selanjutnya, kita akan mendefinisikan esensi dalam metode ini. Di lapangan Z-Index, masukkan nomor 9999 itu akan membuat tombol selalu di depan (mengambang).

buat tombol mengambang dengan indeks Z

Sekarang saatnya memutar tombol aksi mengambang. Selalu di bawah tab maju, akses kelas css dari blok Layout, lalu menulis rotate dalam.

Lihat juga: Elementor: Memperkenalkan Pembuat Halaman WordPress Terbaik

Setelah itu pergi ke blok Kustom CSS , lalu rekatkan kode berikut ke dalam bidang:

.rotate.rotate
{transform: rotate(90deg);}

Anda dapat melihat bahwa kenop baru saja diputar, tetapi ada celah aneh di antara sisi layar. Jadi, mari kita perbaiki dengan menyesuaikan décalage di -92

buat tombol mengambang dengan indeks Z

Akhirnya, kita akan melakukan satu sentuhan terakhir untuk tombol aksi mengambang ini. Akses blok Transformator, pilih itu GAMBARAN, mengakses opsi perubahan dan atur setiap opsi ke 7.

buat tombol mengambang dengan indeks Z

Ada beberapa opsi untuk mencapai hal tertentu di Elementor. Ketika datang ke tombol mengambang, ada dua opsi yang dapat Anda gunakan. Di sini kita hanya membahas satu metode, metode lainnya akan menjadi tutorial lain.

Baca juga: Elementor: Cara memigrasikan situs WordPress

Jika Anda ingin memiliki lebih banyak opsi gaya, membuat tombol aksi mengambang menggunakan pembuat Popup akan menjadi alternatif yang lebih baik karena Anda akan memiliki opsi untuk menyesuaikan tombol serta perilakunya, seperti waktu penutupan tombol, durasi, animasi masuk atau keluar, dll. .

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

...