內容簡介
Zen Blogger 是一款專為 Elementor 設計的外掛，提供 Blog Carousel 和 Posts 兩個小工具，讓使用者能夠輕鬆地設計和展示部落格內容，並確保良好的可及性與效能。
【主要功能】
• 提供 Blog Carousel 和 Posts 小工具
• 支援多種佈局設計選項
• 高效能的圖片加載與佈局保留
• 自訂查詢生成器，篩選文章
• 具備無障礙功能，符合 WCAG 標準
• 支援多種分頁方式，如無限滾動
外掛標籤
開發者團隊
原文外掛簡介
Zen Blogger adds two widgets to Elementor: Blog Carousel and Posts. Both draw the same card and share the same query builder, so a layout you design once works either way.
Accessibility
Turning autoplay on adds a play/pause button — you can move it or make it appear on hover, but you cannot delete it, because moving content with no way to stop it fails WCAG 2.2.2. Arrows and the play/pause control are real buttons at a 44px target. Slides carry proper carousel semantics, keyboard control is on by default, and visitors whose system asks for reduced motion get no autoplay and instant transitions.
Performance
The carousel runs on the Swiper library Elementor already loads, so no additional slider script is added to the page. Nothing is enqueued on pages that do not use the widget. Images in the first visible row load eagerly with high fetch priority and everything after them loads lazily, and the image box reserves its aspect ratio up front so the carousel does not shift your layout while it loads. If the script never runs, the markup stays a scroll-snapping row instead of collapsing.
Query builder
Filter by post type, taxonomy (include and exclude, combined with AND or OR), author, date range, and custom field ordering. Show posts related to the post being viewed, hand-pick them, or reuse the archive’s own query. Exclude the current post, skip posts already shown by another carousel on the page, or require a featured image.
The Posts widget
Grid, masonry, list, or a feature layout where the first post spans wider. Pagination is page numbers, previous/next, a Load More button, or infinite scroll — and every one of them starts life as a real link, so the widget works with JavaScript disabled and every page stays crawlable.
When a page of results is fetched in the background:
The new result count is announced politely — “Showing 6 of 8 posts”.
The grid is marked aria-busy while it loads.
Focus moves to the first newly loaded post, so keyboard users continue from the new content. On an automatic infinite-scroll load, focus is deliberately left alone.
Infinite scroll loads a set number of pages automatically before the button must be pressed again, so the footer stays reachable.
The address bar keeps up with filters, so Back works and a filtered view can be shared.
The optional search-and-filter bar is a real form. It offers only the terms present in the posts the widget is showing, and reflects the current selection with aria-current.
Setting up a widget
Edit a page, or a Theme Builder template, with Elementor.
Search the widget panel for “Zen” and drag Blog Carousel or Posts onto the canvas.
Content -> Query picks what to show: the Source (latest posts, related to the post being viewed, hand-picked, or the current page’s own query), then post type, taxonomy include and exclude, author, date range and ordering.
Content -> Layout picks how a card looks: the Skin, and for the Posts widget the layout (grid, masonry, list or feature) and the number of columns per device.
Content -> Pagination, on the Posts widget, offers page numbers, previous/next, a Load More button, infinite scroll, or none.
Content -> Search & Filter, on the Posts widget, switches on the filter bar. Choose which taxonomies it offers, and whether to include a search box and a sort control.
Content -> Accessibility, on the carousel, controls autoplay, where the play/pause button sits and when it is visible, and whether reduced-motion settings are respected.
The Style tab has its own section for the card, image, terms, title, meta, excerpt, read more, filter bar and pagination.
Every text label the widget renders is an editable field, and every colour, font, size, spacing, border, radius and shadow is an Elementor control.
Skins
Classic — image above the text
Overlay — text over the image
Overlap — the text block lifted over the image
Side by side — image left or right
Minimal — no image
Editorial — oversized running numbers
Motion
Slide, fade, coverflow, cards and creative effects; free scroll and a continuous ticker mode; multiple rows; centred slides; dots, dynamic dots, a fraction counter, a progress bar or a draggable scrollbar.
Styling
Every colour, font, size, spacing, border, radius and shadow is an Elementor control — including hover and focus states. Nothing is hard-coded, and no colour is applied as a default you cannot switch off.
SEO and AI (GEO)
Every slide is rendered server-side as a real inside an