Posts

Dengan Posts Widget anda dapat menampilkan daftar jenis postingan apa pun, termasuk jenis postingan khusus, dalam berbagai tata letak dan cara. Widget praktis ini dapat digunakan untuk menampilkan postingan dari kategori tertentu atau taksonomi lain, postingan terbaru, dan banyak lagi. Mari kita bahas pengaturan untuk widget post.

Content

Layout Skins

Sebelum membahas keseluruhan pengaturan, kita perlu memilih Skin. Skin merupakan template tampilan post yang ditampilkan. Skin yang berbeda akan memiliki struktur yang berbeda. Sampai dokumentasi ini dibuat, Elementor menyediakan tiga posts skin yaitu Classic, Cards, dan Full Content. Mari kita bahas apa saja isi pengaturan masing masing skin.

Classic Skin

1. Columns: Tentukan kolom post yang ditampilkan
2. Posts Per Page: Tentukan post yang ditampilkan dalam satu halaman
3. Image Position: Tentukan posisi gambar post
4. Masonry: Aktifkan untuk membuat post mengisi ruang kosong sehingga pada post bagian bawah seolah tidak rapi
5. Image Size: Tentukan ukuran gambar
6. Image Ratio: Atur ukuran rasio gambar
7. Image Width: Atur lebar gambar
8. Title: Tampilkan atau sembunyikan judul post
9. Title HTML Tag: Tentukan HTML Tag untuk judul post (pengaturan ini akan berpengaruh pada SEO website)
10. Excerpt: Tampilkan atau sembunyikan excerpt post
11. Excerpt Length: Tentukan jumlah kata excerpt yang ditampilkan
12. Apply to custom Excerpt: Aktifkan atau non-aktifkan custom excerpt
13. Meta Data: Tentukan meta data yang ditampilkan
14. Separator Between: Tentukan pemisah antar meta data
15. Read More: Tampilkan atau sembunyikan button “Read More”
16. Read More Text: Tentukan isi teks button “Read More” atau baca selengkapnya
17. Automatically align buttons: Saat diaktifkan, ini secara otomatis akan menyelaraskan tombol Baca Selengkapnya ke bagian bawah pembungkus. Ini berguna bila judul postingan melebihi satu baris
18. Open in new window: Alihkan jika Anda ingin postingan dibuka di tab baru

Cards Skin

1. Columns: Tentukan kolom post yang ditampilkan
2. Posts Per Page: Tentukan post yang ditampilkan dalam satu halaman
3. Show Image: Tampilkan atau sembunyikan gambar
4. Masonry: Aktifkan untuk membuat post mengisi ruang kosong sehingga pada post bagian bawah seolah tidak rapi
5. Image Size: Tentukan ukuran gambar
6. Image Ratio: Atur ukuran rasio gambar
7. Title: Tampilkan atau sembunyikan judul post
8. Title HTML Tag: Tentukan HTML Tag untuk judul post (pengaturan ini akan berpengaruh pada SEO website)
9. Excerpt: Tampilkan atau sembunyikan excerpt post
10. Excerpt Length: Tentukan jumlah kata excerpt yang ditampilkan
11. Apply to custom Excerpt: Aktifkan atau non-aktifkan custom excerpt
12. Meta Data: Tentukan meta data yang ditampilkan
13. Separator Between: Tentukan pemisah antar meta data
14. Read More: Tampilkan atau sembunyikan button “Read More”
15. Read More Text: Tentukan isi teks button “Read More” atau baca selengkapnya
16. Automatically align buttons: Saat diaktifkan, ini secara otomatis akan menyelaraskan tombol Baca Selengkapnya ke bagian bawah pembungkus. Ini berguna bila judul postingan melebihi satu baris
17. Open in new window: Alihkan jika Anda ingin postingan dibuka di tab baru
18. Badge: Menampilkan atau menyembunyikan Badge. Lencana memungkinkan Anda menampilkan kategori, tag, atau taksonomi lainnya di dalam card
19. Badge Taxonomy: Tentukan taksonomi yang akan ditampilkan
20. Avatar: Tampilkan atau sembunyikan foto author

Full Content

1. Posts Per Page: Tentukan post yang ditampilkan dalam satu halaman
2. Rows Gap: Tentukan jarak antar kolom post
3. Show Thumbnail: Tampilkan atau sembunyikan thumbnail post
4. Title: Tampilkan atau sembunyikan judul post
5. Title HTML Tag: Tentukan HTML Tag untuk judul post (pengaturan ini akan berpengaruh pada SEO website)
6. Meta Data: Tentukan meta data yang ditampilkan
7. Separator Between: Tentukan pemisah antar meta data
8. Open in new window: Alihkan jika Anda ingin postingan dibuka di tab baru

Query

Source: Pilih sumber dari mana widget akan menampilkan konten. Pilihannya mencakup Posts, Pages, Custom Posts, Seleksi Manual, Query saat ini, dan Related atau postingan terkait. Bergantung pada sumber mana yang Anda pilih untuk Query, Anda akan diberikan opsi yang memungkinkan Anda memfilter hasilnya.

Include

1. Include By: Ketentuan atau Penulis, lalu gunakan Pencarian dan Pilih untuk memilih mana yang akan digunakan. Ketentuan mencakup semua item dalam taksonomi. Taksonomi yang tersedia adalah: kategori, tag, format, dan taksonomi khusus.
2. Date: Tentukan rentang waktu filtering item
3. Order By: Tentukan urutan posts akan ditampilkan
4. Order: Tentukan urutan posts akan ditampilkan dari awal atau akhir
5. Ignore Sticky Posts: Aktifkan untuk mengabaikan posts dengan status sticky
6. Query ID: Beri ID untuk Query

Exclude

1. Exclude By: Tentukan tipe taksonomi yang tidak ditampilkan
2. Avoid Duplicates: Aktifkan untuk mencegah post ganda
3. Offset: Tentukan post yang akan di skip untuk ditampilkan
4. Date: Tentukan tanggal post yang ditampilkan
5. Order By: Tentukan urutan post menurut beberapa kondisi
6. Order: Tentukan urutan posts akan ditampilkan dari awal atau akhir
7. Ignore Sticky Posts: Aktifkan untuk mengabaikan posts dengan status sticky
8. Query ID: Beri ID untuk Query

Pagination

Pagination berfungsi untuk membagi dan menandai halaman post. Pada pengaturan pagination content, anda bisa memilih jenis pagination sesuai kebutuhan anda. Pilihannya meliputi Numbers, Previous/Next, Numbers + Previous/Next, Load on Click, Infinite Scroll.

Masing- masing pilihan pagination memiliki pengaturan yang berbeda, mari bahas jenis pagination ini satu persatu.

Numbers

1. Page Limit: Tentukan batas jumlah halaman yang ditampilkan
2. Shorten: Aktifkan untuk meringkas tampilan
3. Alignment: Tentukan posisi nomor halaman
4. Individual Pagination: Untuk beberapa Widget Postingan di halaman yang sama, aktifkan ini untuk mengontrol penomoran halaman masing-masing widget secara individual. Catatan: Ini mempengaruhi struktur URL halaman.

Previous / Next

1. Page Limit: Tentukan batas jumlah halaman yang ditampilkan
2. Previous Label: Masukkan teks untuk tombol ke halaman sebelumnya
3. Next Label: Masukkan teks untuk tombol ke halaman selanjutnya
4. Alignment: Tentukan posisi nomor halaman
5. Individual Pagination: Untuk beberapa Widget Postingan di halaman yang sama, aktifkan ini untuk mengontrol penomoran halaman masing-masing widget secara individual. Catatan: Ini mempengaruhi struktur URL halaman.

Number + Previous/Next

1. Page Limit: Tentukan batas jumlah halaman yang ditampilkan
2. Shorten: Aktifkan untuk meringkas tampilan
3. Previous Label: Masukkan teks untuk tombol ke halaman sebelumnya
4. Next Label: Masukkan teks untuk tombol ke halaman selanjutnya
5. Alignment: Tentukan posisi nomor halaman
6. Individual Pagination: Untuk beberapa Widget Postingan di halaman yang sama, aktifkan ini untuk mengontrol penomoran halaman masing-masing widget secara individual. Catatan: Ini mempengaruhi struktur URL halaman.

Load on Click

1. Spinner: Pilih untuk menampilkan pemutar pemuatan dengan mencentang ikon
2. Button Text: Tentukan teks untuk tombol muat lebih banyak post
3. Alignment (Button): Tentukan posisi tombol muat lebih banyak post
4. Icon: Beri icon pada tombol muat lebih banyak post
5. Icon Spacing: Tentukan jarak antara icon dan teks dalam button
6. Button ID: Beri ID untuk button
7. Alignment (no more posts message): Tentukan posisi teks ketika semua post sudah ditampilkan
8. Custom Messages: Aktifkan untuk memberi pesan custom ketika semua post sudah ditampilkan

Infinite Scroll

1. Spinner: Pilih untuk menampilkan pemutar pemuatan dengan mencentang ikon
2. Alignment (no more posts message): Tentukan posisi teks ketika semua post sudah ditampilkan
3. Custom Messages: Aktifkan untuk memberi pesan custom ketika semua post sudah ditampilkan

Style

Layout

1. Columns Gap: Tentukan jarak antar kolom
2. Rows Gap: Tentukan jarak antar baris
3. Alignment: Tentukan struktur posisi posts

Box

1. Border Width: Tentukan lebar border box posts
2. Border Radius: Tentukan ukuran sudut border box posts
3. Padding: Tentukan padding dalam box posts
4. Content padding: Tentukan padding konten dalam box posts
5. Normal: Pengaturan tampilan ketika mode normal
6. Hover: Pengaturan tampilan ketika mode hover
7. Box Shadow: Beri efek bayangan pada box posts
8. Background Color: Tentukan warna background box posts
9. Border Color: Tentukan warna border box posts

Image

1. Border Radius: Tentukan ukuran sudut border image
2. Spacing: Tentukan jarakan antara gambar dan judul post
3. Normal: Pengaturan tampilan ketika mode normal
4. Hover: Pengaturan tampilan ketika mode hover
5. CSS Filters: Tentukan filter CSS untuk gambar

Content

Title

1. Color: Tentukan warna teks judul post
2. Typography: Atur tipografi judul post
3. Text Stroke: Tentukan ketebalan judul post
4. Spacing: Atur jarak antara judul post dan metadata

Meta

1. Color: Tentukan warna teks metadata post
2. Separator Color: Pilih warna untuk pemisah antar metadata
3. Typography: Atur tipografi metadata
4. Spacing: Atur jarak antara metadata dan excerpt post

Excerpt

1. Color: Tentukan warna excerpt
2. Typography: Atur tipografi excerpt
3. Spacing: Tentukan jarak antara excerpt dan read more (baca selengkapnya)

Read More

1. Color: Tentukan warna teks read more
2. Typography: Atur tipografi read more
3. Spacing: Tentukan jarak antara read more dan post dibawahnya

Pagination

1. Typography: Tentukan tipografi teks ketika post sudah ditampilkan semua
2. Color: Tentukan warna teks ketika post sudah ditampilkan semua
3. Spinner Color: Tentukan warna icon pemuatan post
4. Spacing: Tentukan jarak penanda halaman post