Tutorial Elementor Indonesia : Post Widget (Pro)

elementor_a

 Baca juga:

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:

Elementor Classic Skin Post

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 adalah merupakan pilihan ketiga dari skin yang tersedia yang memungkinkan kita untuk menampilkan list postingan dalam bentuk full post.

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

SettingKeteranganClassicCardsFull Content
SkinMemilih skin yang diinginkan (Classic/Cards/Full Content)
ColumnMengatur jumlah kolom yang akan ditampilkan (1-6 kolom)
Post per PageMenampilkan jumlah postingan yang akan ditampilkan
Show ImageMenampilkan atau menyembunyikan featured image
Show ThumbnailMenampilkan atau menyembunyikan featured image
Image PositionMenentukan posisi featured image (atas/kiri/kanan/none)
MasonrySlider on/off untuk pilihan menampilkan post secara masonry (tidak ada gap).
Image SizeMengatur ukuran image, mulai dari thumbnail sampai full
Image RatioMengatur rasio tampilan gambar
Image WidthMengatur lebih presisi lebar ukuran gambar
TitleMemilih untuk menampilkan/menyembunyikan judul
Title HTML TagMemilih HTML tag untuk digunakan. Mulai dari H1-H6, div, span atau p
ExcerptMemilih untuk menampilkan/menyembunyikan excerpt (cuplikan teks)
Excerpt LengthMenentukan jumlah kata untuk menentukan panjang excerpt
Meta DataMemilih meta data untuk ditampilkan. Opsi meta data yang tersedia: author, date, time dan comments
Separator BetweenMenentukan pembatas antar metadata yang digunakan
Read MoreMenampilkan/menyembunyikan pilihan ‘Read More’
Read More TextMengubah teks ‘Read More’ sesuai keinginan
BadgeMenampilkan/menyembunyikan badge. Badge bisa menampilkan kategori, tag, atau taksonomi lain.
AvatarMenampilkan/menyembunyikan avatar penulis.

Query

Dalam Elementor Post Widget terdapat pengaturan query 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.

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

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.

Style: Box pada Classic & Full Content Skin
Style: Card pada Card Skin

Box & Cards

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

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.

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.

Settingan ‘Image’ pada skin Classic & Full Content

Image

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.

Image : Cards 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’)

Settingan ‘Content’ pada skin Classic & Cards
Settingan ‘Content’ pada skin Full Content

Content

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.

Full Content Skin

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

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!