Feeds & Tags

Published on 03/23/2021
Help Article Intro To Leiout
Jason Hoover
Leiout Developer
Katy Wellington
UX/UI Designer

In this Leiout tutorial you will learn how to create a feed that can be placed on different pages throughout a Trolley Web website.


Feeds can be used for a lot of different things. Here are some examples:

  • On the Akimbo layout, a feed is used to display different services that are provided.
  • On the Congregation template a feed is used to show recent sermons or blog posts.
  • In the Lifestyle template a feed is used to show related lifestyle blog posts in the sidebar of a blog post.
Creating a Feed

To add a feed to a page in the builder mode, you will need to add a new section with only one column in it to the page. Like a plugin, you will specify the number of columns in the feed template but the feed itself sits in a single column. Next you will drag the feed element into the column. One you have placed the feed element onto your page, you can either choose from a feed that has already been created or you can make a new feed. In order to create an entirely new feed you will have to navigate away from the builder mode and go back to the admin dashboard. You can build or find all of the feeds that have already been created by going to templates → feeds

To create a feed, start by choosing Add Feed Template. Next you give it a name and a description. In this tutorial we are building a blog post feed that shows the three most recent blog posts. 

Screen Shot 2021-03-22 at 12.40.24 PM.png

When you create a new feed it comes pre-populated with a default layout. This can be replaced with new HTML specific to the feed that you want to build.  

In a feed you build out the block (a block can be thought of like a plugin slide: check out the plugin tutorial to learn more about this).

For the blog post feed we start by building out the HTML for the block. This is the structure of the individual items or in this case, blog posts, displayed in the feed. 

Feed Block HTML

Just like a plugin you have variables to work with like the image and title variables. The way this works in the feed is that these variables are populated by what you place in the publish wizard for the page (check out our video on publishing if this sounds unfamiliar to you). 

Screen Shot 2021-03-22 at 12.43.19 PM.png
Feed Wrapper HTML

The feed wrapper HTML defines what surrounds the feed blocks. In the case of this feed, there are search, pagination, and filter features. 

The "feed empty" tab in the feed layout determines what the feed element will display if there are no blocks available. In this case it reads, "No recent blog posts."

To style this feed, bootstrap classes were added in the html such as col-md-4. Other styles were defined in a Blog Posts SASS file for this template. Remember, we placed the styles here because they are specific to this template. If we clone this template for a client’s website, you will make any further changes in the global css.

Now that we have created the feed template, we can return to our builder and place the blog post feed on the page. 

Setting up the Feed on a Page

If you click the cog on the feed template you will notice two important features that we will work with to set up our blog post feed: appending a tag and feed settings

If you open the feed settings you will see that you first choose the template you want to use (in this example you would use the blog post template). You then have the following formatting options.

  • Results limit: How many of the blog posts you want this feed to show. 
  • Description limit: How much of the description is displayed. Ellipses will indicate a longer description.
  • Excluding the current page: helpful if you are placing this feed on a blog post, say for related blog posts. The feed will not show the blog page that is currently being read. 
  • Default filter: you can choose, oldest, newest, random, alphabetical order.
Screen Shot 2021-03-22 at 12.48.05 PM.png

Next, for the feed to show any of the blog pages, you will need to append the tag, "blog" to it. This tells the feed to display any pages that have the tag “blog” appended to them. This tag was appended to each blog page during the publishing process. 

Screen Shot 2021-03-22 at 12.47.55 PM.png

Once this is completed, your blog post feed will be all set to go! Hopefully this tutorial has been helpful in understanding how to build feed templates and place them throughout a Trolley Web website. 

Related Articles

Publishing a Page

In this Leiout tutorial you will learn how to publish a page. Dive into the publishing wizard feature of the lei out builder. Learn how to append tags to a page, set the facebook and google preview, preview a page, view the live version of a page an...

23, Mar 2021
Help Article Intro To Leiout
Intro to the Builder

Let's learn about the Leiout Builder mode. Add containers, drag and drop elements, and change settings. These are the basic building blocks of building out a website. These flexible tools will allow you to create now, and change things up later.

22, Mar 2021
Help Article Intro To Leiout
Hyperlinks and Anchorlinks

In this Leiout tutorial, you will learn how to create hyperlinks and anchor links out of different page elements. You will also learn what happens to the elements when they are linked.

23, Mar 2021
Help Article Intro To Leiout

Let's learn how to create buttons in Leiout. Learn to add buttons, and customize their format through the Leiout button form. These are part of the basic building blocks of building out a website. These flexible tools will allow you to create now, a...

23, Mar 2021
Help Article Intro To Leiout