Blog widget settings (All Posts, Recent Posts, Blog Search, Tag Filter, Table of Contents, RSS Feed)

The Blog group of the Add panel has six widgets. All Posts and Recent Posts list the site's posts. Blog Search and Blog Tag Filter send visitors to the blog page with matching posts. Table of Contents lists the headings on the page. RSS Feed shows the newest items from this site's blog or any other feed.

To set up the blog, write posts and import posts, see Blog. Every panel here ends with Spacing and Animations & Effects, explained in Widget design panel basics and Animations and effects. Text sections (Post Title, Teaser and so on) use the standard text controls explained there.

All Posts and Recent Posts

These are the same widget with different starting settings. All Posts starts as a grid of 9 posts, 3 per row, with teasers, the blog name and a View more button. Recent Posts starts as a short list of the 3 newest posts, titles and dates only. You can change either into anything the other does.

How to add it

1. Click Add, open Blog, and drag All Posts or Recent Posts onto the page.
2. Click Edit Content to choose which posts show and what each one shows.
3. Click Edit Design for the layout and look.

Until the blog has published posts, the editor shows sample posts with a note: "Sample posts — set up the blog in the Blog panel to show real posts." (or "…your posts appear here once you write some").

Edit Content

• Filter by tag: click tags to show only posts with them. None selected shows all posts. With two tags it shows posts tagged with either. If the blog has no tags yet, add them in each post's settings under Post tags.
• Show a tag filter bar above the posts: buttons for each tag above the posts. Off by default. "All" button text defaults to "All".
• Follow the tag bar and Blog Search on this page: the widget filters itself when a visitor picks a tag or searches. On by default for All Posts, off for Recent Posts. Keep it on for the widget on the blog page.
• "Read more" text (blank hides): default "Read more" for All Posts, blank for Recent Posts.
• "View more" button text: default "View more".
• Show blog name: on for All Posts, off for Recent Posts.
• Show author and date: on by default.
• Show thumbnail images: on by default.
• Single line title: cuts long titles to one line. Off by default.

Layout

• Layout: Grid, Cards, List (image beside text), Featured first post or Carousel (sliding row). Default Grid (All Posts) or List (Recent Posts).
• Posts per row (called Posts per view for Carousel): 1 to 4, per screen size. Hidden for List. Default 3 desktop, 2 tablet, 1 phone for All Posts.
• Arrows (hidden on phones — visitors swipe) and Dots: Carousel only. Both on by default.
• Padding between posts: up to 80 px, per screen size. Default 24.
• Visible teaser lines: 0 to 8. Default 3 for All Posts, 0 for Recent Posts. 0 hides the teaser.
• Title tag: H2, H3 (default), H4 or Text.

Posts Shown

• Visible posts (called Posts in the carousel for Carousel): 1 to 30. Default 9 for All Posts, 3 for Recent Posts.
• Navigate by: View more (default for All Posts), Pages or None (default for Recent Posts). Hidden for Carousel, which slides instead.
• Button style (from the site theme): Primary (default) or Secondary, for the View more button.

Post Card

Starts closed.

• Image shape: 16:9 (default), 3:2, 4:3 or 1:1.
• Corners: 0 to 32 px. Default 12.
• Border around each post: on for All Posts, off for Recent Posts.
• Card background: none by default.
• Hover effect: Lift (default), Zoom image or None.

Blog Name, Post Title, Author & Date and Teaser

Text controls. Blog Name shows only with Show blog name on (up to 72 px). Post Title up to 48 px (default 21 bold; 17 for Recent Posts). Author & Date shows only with Show author and date on (up to 24 px, default 13 gray). Teaser shows only when teaser lines are above 0 (up to 28 px, default 15).

Blog Search

A search box. A search opens the blog page with matching posts, searching titles, descriptions and tags. It's a plain form, so it works even without scripts, and it works in every language.

How to add it

1. Drag Blog Search from Blog onto the page, for example in the header or a sidebar.
2. Click Edit Search to change the wording.
3. Make sure the All Posts widget on the blog page has Follow the tag bar and Blog Search on this page turned on. That widget shows the results.

Edit Search

• Placeholder text: default "Search posts…".
• Show a search button: on by default.
• Button text (blank = magnifier icon): blank by default.

Search Box

• Height: 32 to 72 px. Default 46.
• Corners: 0 to 36 px. Default 8.
• Background and Border color.
• Button style (from the site theme): Primary (default) or Secondary.

Text

Starts closed. Text controls up to 28 px. Default 15.

Blog Tag Filter

Every tag used on published posts, as buttons or a list. Clicking one opens the blog page showing only posts with that tag.

How to add it

1. Drag Blog Tag Filter from Blog onto the page.
2. Click Edit Tags to set the title and the All button.
3. As with Blog Search, the All Posts widget on the blog page needs Follow the tag bar and Blog Search on this page on.

All Posts can also show its own tag bar (Show a tag filter bar above the posts), so you don't always need this widget.

Edit Tags

• Title (optional): like "Topics". Blank by default.
• Show an "All" button: on by default, with its text (default "All").
• Show how many posts each tag has: off by default.

Tags

• Style: Buttons (default) or List.
• Alignment: Left (default) or Center.
• Corners: 0 to 999 px. Buttons only. Default 999 (fully rounded).
• Selected tag color.

Title and Tag Text

Both start closed. Title shows only when a title is set (up to 48 px, default 22 bold). Tag Text up to 28 px (default 14).

Table of Contents

A box of links to the headings on the page, that highlights the section being read. It's made for blog posts and post layouts, but works on any page. It lists the H2, H3 and H4 headings in the page's Text widgets. The links are real links search engines can follow.

How to add it

1. Drag Table of Contents from Blog onto the page or into a post layout.
2. Click Edit Contents to choose which headings to list.
3. If the editor shows "Sample headings — add H2 / H3 headings in Text widgets and they'll be listed here.", the page has no headings yet.

Edit Contents

• Title (blank hides it): default "Table of Contents".
• Headings to include: H2 only, H2 – H3 (default) or H2 – H4.
• Show a collapse button: on by default. Start collapsed: off by default.
• Show a reading progress bar: on by default.
• Stay on screen while scrolling (sticky): off by default.
• Scroll offset (px) — room for a fixed header: default 80. How far below the top of the screen a heading lands after a click.

Box

• Background: default white.
• Border: 0 to 6 px. Default 1.
• Border color: shows when the border is above 0.
• Corners: 0 to 32 px. Default 10.
• Padding: 0 to 48 px. Default 20.

Highlight

• Current section color: the link of the section being read.
• Progress bar color: shows with the progress bar on.

Title and Links

Both start closed. Title shows only when a title is set (up to 40 px, default 18 bold). Links up to 24 px (default 14 gray).

RSS Feed

The newest items from this site's blog or from any other site's RSS or Atom feed, with links to the originals.

This is different from Import from RSS in the Blog panel. Import copies another blog's posts into this site as drafts, once. The RSS Feed widget only shows the newest items on the page and links out to them, and keeps them up to date.

How to add it

1. Drag RSS Feed from Blog onto the page.
2. Click Edit Feed.
3. Choose This site's blog (default) or Another feed (URL) and paste the Feed URL. Click Save.

Edit Feed

• This site's blog or Another feed (URL).
• Feed URL: the link to the feed itself, often ending in /feed or /rss, not the blog page. Save stays grayed out until it starts with http:// or https://.
• Number of items: 1 to 20. Default 5.
• Show dates: on by default.
• Show images: off by default.
• "Read more" text (blank hides): default "Read more".
• Open items in a new tab: another feed only. On by default.

The live site fetches the feed on the server and checks for new items every hour, so the items are part of the page.

Layout

• Padding between posts: 0 to 60 px. Default 16.
• Divider lines between posts: on by default.
• Visible teaser lines: 0 to 8. Default 3.

Post Title and Post Text

Both start closed. Text controls: Post Title up to 40 px (default 20), Post Text up to 28 px (default 15).

Examples

• A plumber's home page: Recent Posts as a Carousel of the 6 newest posts, 3 per view.
• A blog page: All Posts in Featured first post layout with its tag bar on, and Blog Search in the header.
• A long guide: Table of Contents at the top of the post layout, sticky, with H2 – H3.
• A chamber of commerce: RSS Feed showing the newest 5 items from the town council's news feed.

Limits and what it can't do

• All Posts and Recent Posts only show this site's published posts. Up to 30 at a time.
• On a site with other languages, they list the posts in the language being viewed. See Multi-language sites.
• Blog Search and Blog Tag Filter always open the blog page. They don't filter a posts widget on another page.
• Table of Contents only finds headings in Text widgets. Headings inside other widgets aren't listed.
• RSS Feed shows up to 20 items and checks for new ones every hour. It doesn't copy posts into the blog; use Import from RSS for that.
• Zeus can add these widgets for you in the editor. See Zeus in the editor.

Who can use it

Anyone with the Mount Olympus tool. Client people need Editor to add these widgets or change their design. Widget content lets them change the settings in Edit Content, Edit Search, Edit Tags, Edit Contents and Edit Feed. Inside a blog post, the Blog permission gives full editing, these widgets included.

Troubleshooting

• The widget shows sample posts: the blog has no published posts yet. Publish a post in the Blog panel.
• Searching or clicking a tag doesn't filter the posts: on the blog page, open the All Posts widget's Edit Content and turn on Follow the tag bar and Blog Search on this page.
• Only some posts show: check Filter by tag in Edit Content and Visible posts in Posts Shown.
• No View more button: Navigate by is None, or the layout is Carousel.
• The teaser doesn't show: set Visible teaser lines above 0.
• The Table of Contents is empty on the live site: the page's Text widgets have no H2, H3 or H4 headings, or Headings to include leaves them out.
• Clicking a contents link hides the heading under the header: raise Scroll offset (px).
• "RSS Feed — use Edit Feed to add a feed URL.": no feed address yet.
• "Enter a feed URL starting with https://", "That URL isn't an RSS or Atom feed" or "The feed returned 404": check the address. Open it in a browser; it should show the feed, not the blog page.
• "Couldn't reach that feed": the other site didn't answer. Try again later.
• New posts from the other feed aren't showing: the live site checks every hour.