Tutorial Elementor Indonesia : Image Box Widget

Tutorial Elementor Indonesia Image Box Widget

 Baca juga:

Elementor Image Box Widget adalah widget dimana kita dapat menampilkan kotak/card yang terdiri dari gambar+judul+teks. Biasanya digunakan untuk mempromosikan fitur/post tertentu.

Elementor Image Box Widget ini ga harus nge-link ke postingan kamu ya. Kamu bisa taro link apapun termasuk keluar website di pengaturannya. Terdapat 3 style tergantung dari posisi imagenya, di kiri / atas / kanan.

Tampilan Image Box Widget

Image Box Widget Settings

Content

Hanya ada 1 section pada tab ‘Content’ kali ini yaitu : Image Box. Di sini kita dapat memilih gambar yang akan digunakan, menulis judul & deskripsi, meletakkan link, dan mengatur posisi gambar terhadap judul & deskripsi.

Image Box

Choose Image : Pilih gambar yang akan ditampilkan.

Image Size: Memilih ukuran tampilan gambar. Gambar dapat diatur dalam ukuran thumbnail, full atau custom sesuai selera.

Title & Description: Menambahkan judul pada box pertama dan deskripsi pada box kedua.

Link: Meletakkan tautan (link) ketika pengunjung mengklik image box.

Image Position: Mengatur posisi gambar terhadap judul & deskripsi. Apakah gambar diletakkan di sisi kiri, atas atau kanan.

Title HTML Tag: Mengatur HTML Tag untuk judul, mulai dari H1-H6, div, span atau paragraf.

Image Box Widget Style : Image
Image Box Widget Style : Content

Style

Terdapat 2 section pada tab ‘Style’ yaitu : Image & Content.

Image

Spacing: Mengatur jarak antara image dan judul.

Width: Mengatur skala gambar dari 0-100%

Border Radius : Mengatur radius lengkung pada gambar

Hover Animation: Menampilkan efek animasi ketika di-hover.

CSS Filters: Pengaturan style tampilan gambar dengan menambah filter CSS untuk Blur, Brightness, Contrast, Saturation dan Hue.

Opacity: Mengatur transparansi gambar.

Transition Duration: Mengatur waktu transisi.


Content

Alignment: Mengatur penjajaran teks, apakah mau diatur rata kanan, tengah, kiri, atau rata kanan-kiri.

Vertical Alignment: Mengatur posisi konten di atas, di tengah atau bawah pada box.

Title 

Spacing:  Mengatur jarak antara judul & deskripsi.

Color: Mengatur warna judul.

Typography: Mengatur tipografi judul.

Description

Color: Mengatur warna deskripsi.

Typography: Mengatur tipografi deskripsi

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Salam hangat,

vike sig

Vriske Rusniko

Suka dengan konten ini? Yuk, bantu donasi untuk pemeliharaan situs ini melalui trakteer.com | donate via paypal

Tinggalkan Balasan

elementor_logo_gradient-01

Download gratis sekarang!