Tailor Element: Posts

Use Tailor to customize how posts are embedded and displayed on any page of your site.

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.  

  1. Drag the Posts element onto the page or post you’re editing
  2. Click on the element you just dragged; a blue outline should appear
  3. Click Edit in the top right corner of the element
  4. In the panel that appears on the right side of your screen, select your post settings; check the settings guide below for help
  5. 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.

Editing the Posts element: The left tab, General, includes layout settings; the right tab, Query, allows you to choose a subset of posts to display.

General tab

Set how your posts will look as a group.

Layout 

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.

  1. Full featured list
  2. Thumbnail list
  3. Grid
  4. Carousel

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.

Database to collect research on cancer mutations

Database to collect research on cancer mutations

School of Medicine researchers developed an online “knowledgebase” intended to gather and organize the vast body of knowledge known as cancer genomics. The hope is that clinicians can better identify mutations in tumors and targeted drugs.

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.

Running on solar power

Running on solar power
As a student, senior Deko Ricketts explored new technologies to make solar power safer and more efficient. He is among many who launched businesses and developed technologies while earning a degree.

Microbiome researcher Jeffrey Gordon wins Copley Medal

Microbiome researcher Jeffrey Gordon wins Copley Medal
Gordon is honored for his studies of human gut microbial communities which have led to a fundamental shift in the way scientists understand the relationship between microbes, health and disease. His discoveries have shed new light on, among other things, the origins of two pressing global health problems: obesity and childhood malnutrition.

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

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
  • Category
  • Date
  • Excerpt
  • 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.

Example

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

Pagination

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.

 

Query tab

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.

Ordering

Recommended: Order by date, descending. Lists most recently published posts first. 

Other options: By author, title, number of comments; ascending

Offset

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.

 

Related tutorials