Elementor Pro

Tutorial Elementor Indonesia : Spacer Widget

Elementor spacer widget adalah widget gratis yang memungkinkan kita membuat spasi dimanapun yang kita mau dalam post/page website.



Elementor spacer widget adalah widget gratis dari Elementor dimana kita dapat membuat spasi dimanapun yang kita mau dalam post/page website.

Dalam versi settingan yang lebih Advance, widget ini juga bisa digunakan sebagai image placement sekaligus membuat basic shape seperti kotak, lingkaran dan ellips.

Spacer Widget Settings

Elementor Spacer Widget

Spacer

Hanya ada 1 settingan pada tab ‘Content’ kali ini yaitu : Spacer. Di sini kita dapat mengatur seberapa spasi yang ingin kita buat. Spasi bisa dibuat dalam ukuran px,vh, dan em.

Tips & Trick Tambahan

Kita juga dapat “mengakali” spacer widget ini sebagai placement untuk gambar. Namun, tidak seperti image widget yang umum kita gunakan, menggunakan spacer sebagai placement gambar membutuhkan utak-atik settingan di tab ‘Advanced’ karena tinggi gambar akan menyesuaikan dengan tinggi spacer sehingga secara default gambar akan ter-crop. Jadi kita harus mengetik ukuran pixel yang sesuai dengan tinggi gambar yang mau kita tampilkan.

Sementara dengan menggunakan image widget, widget secara otomatis akan menampilkan gambar dalam proporsi optimum. 

Berikut adalah contoh placement image dengan spacer 50px (default setting):

Berikut adalah contoh placement image dengan spacer 400px yang sudah “diakalin” sedikit settingnya.

Pengaturan untuk menampilkan image pada spacer widget

Untuk menampilkan gambar secara penuh dengan menggunakan spacer widget :

  1. Klik tab Advanced
  2. Klik ‘Background’ section
  3. Klik tombol bergambar kuas
  4. Masukkan gambar/pilih dari gallery
  5. Ganti Size menjadi ‘Cover’.

Kelebihan dibandingkan Image Widget

Meskipun sepintas terlihat lebih ribet daripada menggunakan image widget (dan memang lebih ribet sih…), cara ini juga memiliki kelebihan tersendiri.

Dengan menggunakan spacer widget sebagai placement image, kita bisa menampilkan 2 gambar yang berbeda antara normal dan hover state. Seperti contoh foto bunga melati di atas ketika di-hover akan berubah menjadi foto ikan. Cara ini justru sulit dilakukan dengan image widget biasa.

Kita juga bisa membuat custom divider yang responsive seperti di bawah ini. Dan karena dia responsive maka ukurannya otomatis akan menyesuaikan ke ukuran layar.

Demikian penjelasan tentang Spacer Widget pada Elementor. Semoga membantu 🙂

Tinggalkan Balasan