Ingin menambahkan efek titik ke kolom di Elementor?

Elementor sangat cocok untuk buat situs web, di mana penekanannya adalah pada desain. Di Elementor, Anda dapat menambahkan efek animasi untuk membuat situs web Anda lebih interaktif.

Salah satu efek animasi yang dapat Anda tambahkan ke halaman bertenaga Elementor adalah efek titik. Anda dapat menambahkan efek titik ke bagian, kolom, atau widget.

Artikel ini akan menunjukkan cara menambahkan skor ke kolom di Elementor. Omong-omong, jika Anda baru mengenal Elementor, Anda dapat merujuk ke artikel kami sebelumnya untuk mengetahuinya cara menginstal Elementor.

Bagaimana cara menambahkan efek titik ke kolom di Elementor

Di Elementor, kolom adalah elemen wajib. Di sinilah Anda dapat menambahkan widget - elemen desain sebenarnya untuk membuat halaman Anda. Seperti jenis elemen lainnya di Elementor, Anda juga dapat menyesuaikan kolom untuk membuatnya elegan.

Anda dapat menambahkan latar belakang warna solid, latar belakang gambar, bayangan, untuk efek melayang. Efek hover bawaan Elementor memungkinkan Anda menggunakan latar belakang yang berbeda, batas yang berbeda, dan bayangan jatuh yang berbeda saat menunjuk.

Untuk mulai menambahkan efek titik ke kolom di Elementor, pertama-tama klik pegangan kolom yang ingin Anda tambahkan efek titiknya untuk beralih ke panel pengaturan kolom.

tambahkan efek titik ke kolom di Elementor

Di panel pengaturan (panel di sisi kiri), buka tab Gaya dan buka bloknya Latar Belakang. Di yang terakhir, Anda dapat membuka tab AU GAMBARAN untuk mengatur latar belakang yang berbeda pada status penunjuk.

Anda dapat menggunakan latar belakang warna solid, latar belakang warna gradien, atau latar belakang gambar. Anda juga dapat mengatur durasi transisi (transisi dari status normal ke status penunjuk) di opsi Durasi transisi.

Untuk mengatur batas yang berbeda dan bayangan kotak yang berbeda pada status penunjuk, Anda dapat membuka blok Berbatasan. Klik pada tab GAMBARAN  blok itu dan atur gaya batas, ukuran batas, warna batas, radius batas, dan bayangan area untuk status penunjuk.

Menambahkan efek hover lanjutan ke kolom di Elementor

Berbeda Divi BuilderElementor tidak menggunakan transformasi CSS untuk efek hover-nya. Oleh karena itu, Anda hanya dapat menambahkan efek hover dasar. Tapi seperti Elementor (versi pro) Anda memungkinkan Anda untuk menambahkan CSS khusus, Anda dapat menggunakan CSS khusus untuk menambahkan transformasi CSS untuk menambahkan efek hover lanjutan.

Efek rollover dibuat menggunakan transformasi CSS. Untuk menambahkan transformasi CSS ke kolom, pertama buka tab Lanjutan dan buka bloknya Kustom CSS (pastikan panel pengaturan dalam mode panel pengaturan kolom). Tambahkan kode CSS berikut.

tambahkan efek titik ke kolom di Elementor

Kode :

pemilih: hover {transisi: semua .2s ease-in-out; mengubah: skala (1.1); kursor: titik; indeks-z: 1; }

Dalam transformasi CSS itu sendiri, ada 5 gaya transformasi yang dapat Anda gunakan:

  • Matriks
  • Menterjemahkan
  • Skala
  • Putar
  • Condong

Kode CSS di atas menggunakan transformasi skala. Anda cukup menggantinya dengan gaya transformasi apa pun yang Anda suka.

membaca halaman cette untuk mempelajari lebih lanjut tentang transformasi CSS.

Plugin WordPress premium tambahan lainnya 

Temukan juga lainnya plugin WordPress premium yang mengoptimalkan kinerja blog atau situs WordPress Anda.

1. Reservasi Restoran Visual

Buat sistemnya Pemesanan online dari situs web restoran atau kafe Anda, berkat plugin WordPress premium yang luar biasa ini. Dengan yang terakhir, Anda akan memiliki kemungkinan untuk membuat meja dan kursi sendiri di grid yang ditawarkan plugin ini dan membiarkan pelanggan Anda memesan yang gratis, ini adalah fitur utama dari plugin ini dan apa yang membedakannya dari plugin lain di daftar ini.Reservasi restoran visual

Menggunakan Seret & Jatuhkan, Anda dapat menyeret berbagai jenis tabel ke kisi restoran Anda dan menghitung jumlah kursi maksimum untuk setiap tabel serta jumlah tabel. Pengunjung restoran Anda bisa pilih bentuk tabel yang mereka sukai dan lokasi tabel dalam kaitannya dengan tabel lain di grid.

Di sini untukmu Plugin 5 WordPress untuk mengoptimalkan deskripsi dan label kategori

Pelanggan restoran Anda akan dengan senang hati membuat pilihan ini langsung di internet alih-alih bepergian. Dengan plugin ini mereka akan bisa mendapatkan ide tentang apa yang akan menunggu mereka hari ini.

Di antara fitur-fitur lainnya, ia menawarkan: dukungan Drag and Drop, 3 jenis sistem reservasi, penanganan yang cukup intuitif, kustomisasi tata letak lengkap, dan banyak lagi.

Download | Demo | Hébergement Web

2. MapSVG

MapSVG est l’un des plugins WordPress de création d’annuaire les plus puissants et les plus performants. Il vous permet de transformer n’importe quel fichier SVG en cartes vectorielles interactives et en cartes entièrement personnalisables. Il vous permet de créer un répertoire d’entreprises lokal, daftar pemasok, dll. Direktori wordpress plugin Mapsvg

Il propose une carte pour tous les principaux pays du monde. Ses principales fonctionnalités sont : l’édition des cartes SVG dans n’importe quel éditeur de vecteurs afin de pouvoir facilement dessiner vos propres cartes, une base de données intégrée pour afficher tout type d’objet, des outils puissants de création de formulaire, pour renseigner la base de données, l’ajout des marqueurs de géolocalisation et autres.

Baca juga artikel kami di Cara menjaga pengunjung Anda lebih lama di situs web Anda

Download| Demo | Hébergement Web

3. Revolusi Slider

Slider Revolution adalah plugin WordPress carousel yang inovatif dan responsif yang menampilkan konten Anda dengan indah. Baik itu slider atau carousel, editor visual drag and drop akan memungkinkan Anda untuk menceritakan, misalnya kisah perusahaan Anda, menyoroti produk terbaik Anda, artikel terbaik Anda, dan banyak lagi.

plugin slider wordpress responsif responsif

Temukan juga milik kami Plugin 10 WordPress untuk membuat popup dengan mudah
Fitur utamanya adalah: antarmuka pembuatan slide yang luar biasa, desain drag and drop slide, tata letak yang sepenuhnya responsif, manajemen konten multimedia yang sempurna, kinerja yang dioptimalkan, Dukungan multibahasa, dukungan pelanggan yang sangat baik, dukungan untuk layar sentuh, pembaruan gratis dan teratur, dokumentasi dan video tutorial tersedia dan banyak lagi.

Download | Demo | Hébergement Web

Sumber Daya yang Direkomendasikan

Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.

Kesimpulan

Di sini! Itu saja untuk artikel kami yang menunjukkan cara menambahkan efek titik ke kolom di Elementor. Jika sudah komentar atau saran, jangan ragu untuk memberi tahu kami di bagian yang disediakan.

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

...