Posts Quickstart Guide Step 6: Engage readers with Post Tools elements

Avatar
Misty Flowers

Welcome to Step 6 in the "Posts Quickstart Guide" series, giving you a "quickstart" to using posts with your Finalsite products. Now that you have configured your Post elements, add Post tools elements alongside them to provide for deeper level of engagement for your readers. 

Prerequisites

Before you start Step 6, be sure you have followed the steps in the following articles:

In this Article

What are Post Tools elements? 

The Post Tools element provides added functionality to the Post element, allowing users to Filter, Navigate, and Search through posts on a page. Visitors can make a selection on the live page to choose how they want to navigate through your posts or which posts matter the most to them. 

A good place to start is your All News page but soon you'll think of other areas where you use the Posts module and can get creative with Post Tools elements! 

Important Note

Post Tools elements can ONLY be added to interior pages alongside Post elements. They are not to be added to homepages! 

Step 1: Add page layout and Post element 

  Are you a visual learner?

Skip straight to the video tutorial!

Add page layout

Most Post elements and Post Tools elements are placed side by side or above and below each other with the use of layout. Here are a few ideas for how to customize your page layout to display these elements together:  

  • In the Page layout and appearance menu, choose the 2/3 + 1/3 layout to have them display side-by-side. The larger-width column will display either a single post format or even a grid post format, while the narrower column can house 2-3 Post Tools elements that will connect to the Post element in the larger column. 
  • Add Column Layout elements to a page to add layout to a smaller space. Use the 3 Column Layout to place three Post Tools elements just above a single / full width Post element that displays posts in a grid format.

Add a Post element

Once you've decided how to lay out your posts on the page, you are ready for what's next! If you don't have a Post element on this page yet, add one now by opening up the Element Library. Decide which format you'll choose. Forget how? (ADD LINK) Go back to Step 4 or Step 5. 

Step 2: Learn about Tags and Categories

Before moving to Step 3, take a quick trip to learn about what Tags and Categories are and how they can help your visitors find the content they're interested in. Don't forget to come back to this article and start adding them as Post Tools to your pages!

Step 3: Add Post Tools element(s) and choose format

Add Post Tools element

Once you have added your Post element, add Post Tools elements to go nearby on the same page. Open up the Element Library > Module tab and select Post Tools. 
post tools element.png

Choose format 

Post elements have different formats, and so do Post Tools elements. We love to give you plenty of options for customization!

Quick Tutorial: Add Posts Tools to a News Page

39 STEPS

1. To improve our reader's experience allowing them to filter news content, we will recreate this layout with options to filter by category, tags, and search post content. This is just an example! Use what you learn to build a page your readers will use

Step 1 image

2. We will start on this main news page. It has a post element configured in a grid format, displaying news from the school's news board.

Step 2 image

3. Toggle Compose on to enter edit mode.

Step 3 image

4. Under the post element, click Add Element.

Step 4 image

5. Click Layout

Step 5 image

6. Click Place Above

Step 6 image

7. Click 3 Column Layout

Step 7 image

8. In the left column, let's add a category filter. Click Add Element to Column.

Step 8 image

9. Click Module

Step 9 image

10. Click Post Tools

Step 10 image

11. Click the settings gear to configure the element.

Step 11 image

12. The title can be updated to help the reader. In this example, type Select a Topic:

Step 12 image

13. We have to link this element to the post element so it knows what categories to display. It will only display the categories that are used on the boards selected in the linked element. Click Choose Element

Step 13 image

14. Select Post - Grid

Step 14 image

15. Click Save.

Step 15 image

16. Next, let's add a Tag filter. Click Add Element to Column.

Step 16 image

17. Click Post Tools

Step 17 image

18. Click the settings gear to configure the element.

Step 18 image

19. Click Tag Filter

Step 19 image

20. The title can be updated to help the reader. In this example, type Select a Topic:

Step 20 image

21. We have to link this element to the post element so it knows what tags to display. It will only display the tags that are used on the boards selected in the linked element. Click Post-Grid.

Step 21 image

22. Click Save.

Step 22 image

23. Finally, let's add a search feature. Click Add Element to Column.

Step 23 image

24. Click Post Tools

Step 24 image

25. Click the settings gear to configure the element.

Step 25 image

26. Click Search

Step 26 image

27. Click to toggle the title off.

Step 27 image

28. Again, we have to link this element to the post element so it knows what content to search. Click Choose Element

Step 28 image

29. Select Post - Grid

Step 29 image

30. Click Save.

Step 30 image

31. Toggle Compose off to enter preview mode.

Step 31 image

32. Let's check our work. Click the High School category.

Step 32 image

33. Only the post with the category High School applied displays. Click All.

Step 33 image

34. Click Third Grade

Step 34 image

35. Only the post with the tag Third Grade applied displays. Click All

Step 35 image

36. Click Search

Step 36 image

37. Type sports

Step 37 image

38. Click Search

Step 38 image

39. Only posts with "sports" in the content displays. Don't forget to publish if you want to keep this improvement!

Step 39 image

** Best experienced in Full Screen (click the icon in the top right corner before you begin) **

https://www.iorad.com/player/2424414/Add-Post-Tools-to-a-News-Page

Click the settings gear in the top right corner of your Post Tools element to choose the format: Category Filter, Navigation, Search, and Tag Filter. Learn more about each one below.

post tools elements formats .png

Category Filter 

The Category Filter format allows readers to only display posts that use the selected category in the corresponding linked post element. 

category filter screenshot.png

Navigation

The Navigation format is used with a Single Post element, allowing the reader to navigate to the Next or Previous story on the board with the corresponding linked element. 

navigation element.png

Search 

The Search format offers a keyword and/or date range search to display only posts that meet the search criteria. The posts displayed in the corresponding linked post element will be searched.

post tools search format.png

Tag Filter 

The Tag Filter format will display a list of tags to allow readers to only display posts that use the selected tag in the corresponding linked post element. 

tags.png

Step 4: Link elements together

In the Post Tools element settings, expand out the Link To settings. Select the Post element that this Post Tools element will work for. 

For example: 

  • The Category Filter Tool will display the categories in the boards displayed in the Post Element.
  • The Navigation Tool will allow visitors to move through posts in the selected Post Element.
  • The Tag Filter will allow visitors to select a tag and view all of the posts with that tag. 

Best Practice: Rename your Post elements!

To avoid any confusion in the below linking together of a Post element with a Post Tools element, rename the Post element something unique and easily identifiable. Then when expanding out the Choose Element dropdown under the Link To settings, you can be assured that you are connecting the right elements together.

renamed post.png

Step 5: Don't forget to publish the page and test out in live view

Continue to manage as needed

As you add new boards and posts, you can make any adjustments to any Post elements displaying in Composer. It will be an ongoing process, but the initial setup will start you off in a great place so that your community can keep up with what's going on at school!

Next step: Grant access levels

Now that you have created a post, you are ready to consider access levels for those on your team who will be helping you create posts. Read, "Getting started Step 7: Grant access levels" for more info on Posts permissions.

 

Was this article helpful?
4 out of 7 found this helpful

Comments

0 comments

Please Sign in to leave a comment if you don't see the comment box below.