Tutorial Elementor Indonesia : Post Widget (Pro)

Dengan Elementor post widget ini, kamu bisa menampilkan postingan blog mu berdasarkan taksonomi tertentu dan mengatur tata letak serta tampilannya.

 Baca juga:

Share:

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

Saya pikir Post Widget ini adalah widget paling penting dari fitur Elementor Pro. Kenapa? Karena benar-benar membuat looks dari website kita rapi & modern.

Dengan Elementor post widget ini, kamu bisa menampilkan postingan blog mu berdasarkan taksonomi tertentu dan tentu saja mengatur tata letak serta tampilannya. Saat ini, ada 3 skin (variasi tampilan post) yang disediakan Elementor: Classic, Cards & Full Content. Silakan klik di Konten halaman untuk langsung lompat ke bagian yang kamu mau ya!

Konten Halaman

Classic Skin

Classic skin adalah pilihan skin pertama dari Elementor Post Widget yang juga merupakan pilihan default. Saya pribadi juga paling suka skin ini sih. Berikut tampilan basic tanpa mengubah apapun dari mode classic skin ini:

Classic Skin

Dari gambar bisa dilihat bahwa warna title, dan read more akan mengikuti settingan warna hyperlink (yang bisa kita atur pada site settings). Yang tentu saja baik warna, font, size, space, column dan sebagainya bisa kita ubah tanpa harus mengatur ulang site settingnya. Dalam versi yang sudah dimodif sedikit, sebenarnya tampilan klasik ini bisa juga kita buat menyerupai tampilan card.

Pada website saya ini saya menggunakan classic skin yang sudah dimodifikasi. Caranya cukup mudah, hanya dengan menambah border dan mengatur jarak serta warna agar menyesuaikan dengan tone warna website ini. Jika kamu suka, kamu juga bisa menambahkan shadow.

Tampilan classic skin pada web vriske.com

Card Skin

Pilihan Elementor Post Widget selanjutnya adalah card skin. Seperti yang telah sempat saya singgung sebelumnya, card skin ini ya membuat tampilan list postingan seperti “card” (kartu). Berikut tampilannya:

Card Skin Elementor

Seperti yang bisa kita lihat : sama seperti classic skin, title dan read more akan berwarna seperti hyperlink dan pada image by default akan ada gradient overlay, dan kalau diperhatikan terlihat shadow pada card. Perbedaan paling menonjol adalah adanya avatar penulis dan badge label pada card. Opsi gradient overlay dan avatar ini tidak ada pada skin Classic.

Full Content

Full Content Skin merupakan pilihan ketiga dari skin yang tersedia yang memungkinkan kita untuk menampilkan list postingan dalam bentuk full post.

Full Content Skin

Post Widget Settings

Dalam Post Widget ini terdapat 3 tab utama yaitu : Content, Style dan Advance. Antar skin terdapat sedikit perbedaan terutama untuk bagian Content dan Style.

Content

Layout

Cara baca tabel:

Lihat pada desktop untuk tampilan tabel lebih baik.

Setting Keterangan Classic Cards Full Content
Setting Keterangan Classic Cards Full Content

 

Setting Keterangan Classic Cards Full Content
Skin Memilih skin yang diinginkan (Classic/Cards/Full Content)
Column Mengatur jumlah kolom yang akan ditampilkan (1-6 kolom)
Post per Page Menampilkan jumlah postingan yang akan ditampilkan
Show Image Menampilkan atau menyembunyikan featured image
Show Thumbnail Menampilkan atau menyembunyikan featured image
Image Position Menentukan posisi featured image (atas/kiri/kanan/none)
Masonry Slider on/off untuk pilihan menampilkan post secara masonry (tidak ada gap).
Image Size Mengatur ukuran image, mulai dari thumbnail sampai full
Image Ratio Mengatur rasio tampilan gambar
Image Width Mengatur lebih presisi lebar ukuran gambar
Title Memilih untuk menampilkan/menyembunyikan judul
Title HTML Tag Memilih HTML tag untuk digunakan. Mulai dari H1-H6, div, span atau p
Excerpt Memilih untuk menampilkan/menyembunyikan excerpt (cuplikan teks)
Excerpt Length Menentukan jumlah kata untuk menentukan panjang excerpt
Meta Data Memilih meta data untuk ditampilkan. Opsi meta data yang tersedia: author, date, time dan comments
Separator Between Menentukan pembatas antar metadata yang digunakan
Read More Menampilkan/menyembunyikan pilihan ‘Read More’
Read More Text Mengubah teks ‘Read More’ sesuai keinginan
Badge Menampilkan/menyembunyikan badge. Badge bisa menampilkan kategori, tag, atau taksonomi lain.
Avatar Menampilkan/menyembunyikan avatar penulis.

Query

Dalam Elementor Post Widget terdapat pengaturan query yang berfungsi untuk mengatur postingan yang muncul (atau tidak muncul). Misalnya untuk page Journal, saya hanya ingin postingan dalam kategori journal saja yang muncul. Atau misalnya di home page saya ingin yang muncul hanya kategori Journal & Design saja. Tentu saja kamu bisa mengatur sesuai keinginanmu semisal kamu ingin mengatur berdasarkan postingan terbaru, related post, atau bahkan dipilih secara manual. Untuk settingan query ini, tidak ada perbedaan antara ketiga skin.

Elementor Post Widget - Query Setting

Source: Pilih sumber yang diinginkan pada pilihan source ini. Pilihan yang tersedia adalah : Post (postingan), Page (halaman), Ads, Manual selection, Current Query, Related.

Include

Include By : Pilih Term atau Author. Term adalah termin/taksonomi yang digunakan, sementara Author memilih postingan berdasarkan penulis. Taksonomi yang tersedia antara lain : kategori, tag, format, custom.

Date: Menampilkan postingan berdasarkan tanggal terbitnya. Pilihan yang tersedia antara lain : All (semua), Past Day (kemarin), Past Week (seminggu ke belakang), Past Month (sebulan ke belakang), Past Quarter (satu quarter ke belakang), Past Year (setahun ke belakang), Custom (mengatur postingan pada rentang waktu tertentu).

Order by : Mengatur tampilan berdasarkan waktu, judul titel, menu order, atau random

Order : DESC / descending(disortir dari akhir ke awal), ASC / ascending (disortir dari awal ke akhir)

Ignore Sticky Post : Kamu bisa memutuskan untuk menampilkan sticky post atau tidak. Fitur sticky post ini hanya berfungsi jika pada kolom ‘Term’ kamu tidak memilih apa-apa.

Query ID : Memberikan nama unik pada query.

 

Exclude

Exclude adalah kebalikan dari Include dimana dengan memilih exclude kita “mengecualikan” postingan tertentu sesuai pengaturannya.

Exclude By : Terdapat 4 pilihan yaitu: Current Post (Postingan Terbaru), Manual selection, Term, Author (penulis).

Avoid Duplicate: Ya atau tidak. Jika memilih Ya maka elementor akan menghindari menampilkan duplikat pos.

Offset: Digunakan untuk melewati sekian jumlah post. Misalnya jika memasukkan angka 2 pada kolom maka elementor akan men-skip/melewati 2 post

Date: Menampilkan postingan berdasarkan tanggal terbitnya. Pilihan yang tersedia antara lain : All (semua), Past Day (kemarin), Past Week (seminggu ke belakang), Past Month (sebulan ke belakang), Past Quarter (satu quarter ke belakang), Past Year (setahun ke belakang), Custom (mengatur postingan pada rentang waktu tertentu).

Order by : Mengatur tampilan berdasarkan waktu, judul titel, menu order, atau random

Order : DESC / descending(disortir dari akhir ke awal), ASC / ascending (disortir dari awal ke akhir)

Ignore Sticky Post : Kamu bisa memutuskan untuk menampilkan sticky post atau tidak. Fitur sticky post ini hanya berfungsi jika pada kolom ‘Term’ kamu tidak memilih apa-apa.

Query ID : Memberikan nama unik pada query.

Style

Pada tab ‘Style’ akan terdapat 4 section (untuk skin Classic & Card) & 3 section untuk skin Full Content (skin Full Content tidak memiliki ‘Layout’ section).

Layout (Classic & Card)

Elementor Post Widget - Layout setting pada Classic & Card Skin

Column Gap: Mengatur jarak antar kolom.

Rows Gap: Mengatur jarak antar baris.

Alignment: Mengatur penjajaran layout “isi” box/cards, apakah mau diatur rata kanan, tengah atau rata kiri.

Box & Cards

Untuk kustomisasi antara box/card dari gambar bisa dilihat tidak banyak perbedaannya.

Elementor Post Widget - Box setting pada Classic Skin

Box (Classic & Full Content Skin)

Border Width : Mengatur ketebalan border postingan.

Border Radius: Mengatur radius lengkung pada sudut-sudut box.

Padding : Mengatur jarak antara border dan isi box.

Content Padding: Pengaturan tambahan untuk mengatur jarak hanya kontennya saja (tidak termasuk image). 

Normal/Hover: Klik tab ‘Normal’ untuk mengatur settingan pada Normal state, klik ‘Hover’ untuk mengatur settingan pada Hover state.

Box Shadow: Kustomisasi shadow (bayangan) pada box.

Background Color: Memilih warna untuk dijadikan background box.

Border Color: Memilih warna border.

Elementor Post Widget - Card setting pada Card Skin

Card

Pada section Card ini, umumnya mirip dengan Classic/Full content, beberapa di antaranya hanya pindah posisi (seperti background color, border color yang berada di bagian atas sementara pada Classic/Full Content ada di bagian bawah.

Horizontal Padding : Mengatur jarak isi card dengan ujung kanan-kiri card.

Vertical Padding : Mengatur jarak isi card dengan ujung atas-bawah card.

Box Shadow : Berbeda dengan Classic/Full Content Skin dimana pada Classic/Full Content kita bisa mengkostumisasi bayangannya, settingan pada skin Card bersifat default, kita hanya diberi opsi menggunakan/tidak menggunakan shadow tanpa bisa mengkostumisasi shadow-nya.

Hover Effect: Menampilkan / menyembunyikan efek gradient pada featured image.

Meta Border Color: Mengatur warna pembatas pada meta info.

Image

Elementor Post Widget - Image setting pada Classic Skin

Image : Classic & Full Content Skin

Border Radius : Mengatur radius lengkung pada sudut-sudut gambar.

Spacing: Mengatur jarak antara gambar dengan konten.

Normal/Hover: Klik tab ‘Normal’ untuk mengatur settingan pada Normal state, klik ‘Hover’ untuk mengatur settingan pada Hover state.

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

Elementor Post Widget - Image setting pada Card Skin

Image : Card Skin

Badge

Badge Position: Mengatur posisi label di kiri atas atau kanan atas.

Background Color: Mengatur warna label.

Text Color: Mengatur warna tulisan label.

Border Radius: Mengatur radius lengkung pada label.

Size: Mengatur ukuran label.

Margin: Mengatur jarak antara label dengan bagian atas dan tepi card.

Typography: Mengatur tipografi tulisan pada label (pemilihan font, kapitalisasi, ketebalan, dekorasi, dll)

Avatar

Size: Mengatur ukuran avatar (Opsi ini muncul apabila pada settingan tab Content toggle button menunjukkan ‘Show’)

Content

Elementor Post Widget - Content setting pada Classic & CardSkin

Classic & Card Skin

Title

Color: Mengatur warna pada judul.

Typography: Mengatur tipografi tulisan pada judul (pemilihan font, kapitalisasi, ketebalan, dekorasi, dll).

Spacing: Mengatur jarak antara judul dan konten.

Meta

Color: Mengatur warna meta text.

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

Typography: Mengatur tipografi tulisan pada meta info (pemilihan font, kapitalisasi, ketebalan, dekorasi, dll).

Spacing:  Mengatur jarak antar meta info.

Excerpt

Excerpt adalah bagian yang memuat cuplikan isi tulisan.

Color: Mengatur warna tulisan excerpt.

Typography: Mengatur tipografi tulisan pada excerpt (pemilihan font, kapitalisasi, ketebalan, dekorasi, dll).

Spacing: Mengatur jarak antara excerpt dan ‘read more’.

Read More

Color: Mengatur warna tulisan ‘Read more’.

Typography: Mengatur tipografi tulisan ‘Read More’ (pemilihan font, kapitalisasi, ketebalan, dekorasi, dll).

Spacing: Mengatur jarak antara ‘read more’ dan bagian bawah box/card.

Elementor Post Widget - Content setting pada Full-Content Skin

Full Content Skin

Sebenarnya mirip saja, namun pada skin Full Content tidak terdapat settingan untuk excerpt & read more (ya namanya juga full content).

Salam hangat,

vike sig

Vriske Rusniko

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

Download Elementor gratis!

Tinggalkan Balasan