Use Tailor to customize how posts are embedded and displayed on any page of your site.
This tutorial explains how to add Posts as a Tailor element. If you’ve never used Tailor before, read the intro tutorial first.
You can use Tailor to embed posts on any page of your site. Unlike the default posts page (which lists all posts with no format options), Tailor allows you to choose the layout (list or grid), the fields shown (author, date, excerpt, thumbnail, etc.), the number of posts and more. You can also include other content on the page, in addition to the embedded posts.
Another advantage of using Tailor to embed posts is that you can include posts on multiple pages of your site, adjusting the settings for each page’s purpose and content. For example, you might embed posts on these three pages:
- Homepage: Grid with one row of three posts, showing your most recent stories
- News page: List of all posts with thumbnails and pagination turned on
- Topic-specific page: Carousel with six posts categorized by that topic
How to embed posts on a page
To add posts as an element in Tailor, you’ll need to create at least one post first.
To create a list of posts by category, you must have at least one post tagged with that category. Then, it may take 24 hours before the category is available for selection.
- Drag the Posts element onto the page or post you’re editing
- Click on the element you just dragged; a blue outline should appear
- Click Edit in the top right corner of the element
- In the panel that appears on the right side of your screen, select your post settings; check the settings guide below for help
- When you’re done, click the blue Apply button at the bottom right of the panel
Settings guide: Tailor Posts element
The Posts editing panel, which appears on the right side of the screen after step 3 above, has two tabs that control how posts will be listed on the page.
The General tab includes display settings, such as the layout, which post fields to show and the maximum number of posts. The Query tab allows you to select which posts to show, such as a certain category, and in what order.
Set how your posts will look as a group.
The four layout options allow you to select how your posts are listed as a collective unit. Keep scrolling to see descriptions and examples of each.
- Full featured list
- Thumbnail list
If you select Grid or Carousel, you’ll also choose how many posts to show per row.
For Grid view, try 2 or 3 per row; for Carousel try 1 or 2.
Layout 1. Full featured list
Best for sites that have great featured images on all their posts, or the one(s) they plan to feature.
Layout 2. Thumbnail list
Recommended for sites that have a featured image for every post. Easier to scan multiple stories than full featured list layout.
Layout 3. Grid view
Display posts as a grid, either with fixed row heights (default), or with staggered post heights based on the content (masonry).
The masonry option, shown below, can be toggled on after you select Grid layout. Masonry alignment fills in gaps and may appear more dynamic than the default grid; however, the default alignment is easier to scan and read. Choose the option that best suits your content.
Layout 4. Carousel view
Also known as a slider or slideshow, a carousel layout allows you to display a specified number of posts per slide.
Site visitors have the option to interact with the carousel and must click an arrow to view additional posts.
Display fields control what information is shown with each post’s snippet – the preview of a post shown before a visitor clicks on it to read the full post. They include:
- Author – Username of the person who added the post to your website
- Comment number (# of comments)
By default, all of the display fields will show. To remove a display field, click the x to the left of its label.
Post A: All Display Fields are present. Since none were deleted, all show in the post preview.
Since there are no comments, no comment number appears. If there were comments, the tally would appear under the excerpt.
Post B: The Author, category, date and comment number fields were deleted from the display fields, leaving only the Excerpt and Thumbnail fields, plus the title, which always shows.
Posts per page
Choose how many posts you want to show within the Tailor element, or block.
If you’re creating a page that’s mostly or all posts, like a news page, go for the maximum number possible (12).
By default, pagination is turned off. It’s best to leave it that way unless you’re creating a page that’s mostly news with minimal content, like an introduction, at the top.
When pagination is on, and a site visitor clicks to see the next page, the entire page will refresh and take the site visitor to the top of the “next” page.
Pagination is not recommended when inserting the Posts elements onto a page with lots of other content. If you’ve included one or more stories in the body of a page and want to invite site visitors to view more stories, include a link or button to your news page or blog.
After you’ve decided how things will look using the General tab, click on the Query tab to decide which posts to display and in what order.
Categories and tags
You can limit what posts show in a list by using Categories and Tags.
To create a list of posts by category or tag, you must have at least one post assigned to that category or tag. Additionally, it may take 24 hours before the category is available for selection.
Example: You create a post and categorize it as “Awards.” Then, you go to add a Posts element to a page. In the Query tab under Categories, you type in “Awards” but no such category is found. Wait up to 24 hours and check back. Now you should see an option to select “Awards” from the dropdown.
Recommended: Order by date, descending. Lists most recently published posts first.
Other options: By author, title, number of comments; ascending
Setting an offset greater than 0 tells Tailor to “skip” a certain number of posts in the element, relative to the ordering selected.
Example: Order by date, descending with an offset of 1 will display your posts from newest to oldest but won’t show the newest one.
Why would you do that? Say you place two Posts elements on a page, with the first showing only your most recent post as a full featured list, and the second showing the rest of your posts as a grid. To avoid a duplicate post between the two elements, you’d set an offset of 1 for the second element.