Welcome to Step 4 in the "Posts Quickstart Guide" series, giving you a "quickstart" to using posts with your Finalsite products. Now that you are starting to understand how this all works, it's time to build your All News page in Composer where posts can display together, giving visitors a chance to scroll and browse through your news items.
Prerequisites
Before you begin Step 4, be sure you have completed the following articles,
In this Article
- Disclaimer: Homepage vs interior page Post elements
- What is an All News page?
- Step 1: Create an All News page
- Step 2: Choose layout and configure settings
- Step 3: Link your All News page
- Next steps: Build and configure your News Details / DBPP
Disclaimer: Homepage vs interior page Post elements
Before you start building pages, it's important to understand the difference between Post elements that already exist on your homepage and those you have more freedom to add and configure on interior pages of your website.
Post elements on homepage vs interior pages
The ways you configure Post elements on the homepage are very limited compared to the wide variety of options you can adjust on interior pages.
- Homepage Post elements: Post elements may already be created for you on your homepage. They have very fixed settings that should only be adjusted according to your Site Instructions.
- Interior page Post elements: Post elements can be placed onto interior pages and customized with a wide variety of different settings to display images just the way you would like them! You can even change the format of your Post elements, but only on interior pages.
What is an All News page?
Many website homepages have a "View All News" button or link that sits nearby the news postings. This gives the reader the option to bypass clicking on one news item on the homepage to instead scroll through all of the news options. We will call this page an All News page. The All News page is where your visitors will arrive to, usually when clicking "View All News" from your homepage News spot, but also when you link to it in other areas of your site "School News".
Step 1: Create an All News page
This page may already exist in your Utilities branch or on another area of your site. The page may be called "News" or "District News."
If you can't find a page, here's how to Create a New Page in Composer.
- Hover over a Parent page until you see the 3-dot menu. Click + New Page to create a new page.
- Give your New Page a title, "All News page" or "District News" if you are creating All News pages for multiple domains (e.g. Brown Elementary News for their All News page.)
- The URL will autopopulate. Confirm and change as needed.
- Check the box next to Hide from navigation elements so that this page will not show up in your main navigation dropdowns.
- Or, you can open the 3-dot menu and select "Move to a New Parent" to move this new page out of your main navigation into your Utility branch to be more organized.
- Click Save to save your new page.
Step 2: Choose layout and configure settings
Just like any Composer page, you have fun layout options for how you can build elements around each other: Page Layout & Appearance menu and Column Layout elements.
Want to quickstart this process? If so, here is a great Quickstart option:
- Start with a page in Compose mode with no layout added; a full width column.
- Add a Post element from the Element Library onto your page.
- Hover over the element to get the element icons to appear. Click the Settings Gear to open up the Edit Post Element Settings window.
- Select Grid format. Toggle off the Element title.
- Toggle on Content Filters > Display posts from Board(s) and connect the board(s) whose posts you'd like to display here.
- Content Details: Choose which parts of your post you'd like to display on this page. To quickstart, check the boxes next to: Post Title, Publish Date, Summary, Thumbnail, Link titles to post details, and Read More link.
- Pop-up Details: Only adjust this if you want your posts to pop-up on this page instead of opening on a new page. (You'll learn more about this in the article, "Posts Quickstart Guide Step 5: Build and configure your News Details / DBPP.") To quickstart, check the boxes next to: Post Title, Publish Date, Body, Thumbnail.
- Check the box next to Controls > Display option to Load More if you have a lot of posts and want visitors to be able to load more when scrolling at the bottom of the page.
- Formatting: How many columns do you want on this page? To quickstart, start with Show 3 columns wide and Display 5 items from Most recent.
-
Link To > Pop-up or Page: If you choose to open your posts up into a pop-up, leave Popup selected. If opening a post onto a page, select Link To > Page and select the News Details page.
Important Note
If you haven't created your News Details page yet, click Save and come back to set the Link To setting after you've finished your page.
- Later you can add Post Tools elements above the grid or in a narrow side column so that visitors can search and/or filter by topic.
- Preview and Publish your page.
Step 3: Link your All News page
Now that you created your All News page, you can link to it from areas on your site where you want visitors to be able to find it. Some websites have a "View All News" or "All News" button near their News spot on their homepage that may or may not be a bit tricky to locate.
Scavenger Hunt Time!
Every element has its own Header and Footer which can be found in the Element settings gear > +Design settings. These two areas are great for adding extra text and/or buttons when you'd like them to appear more tightly nearby your element. It's a great trick but does mean it's harder to find out where to edit or update them sometimes.
Look in Container element > +Design settings? Is it there?
Look in Post element > +Design settings? Is it there?
Yes! We found it! Here's how to update the link on the "View All News" button (once you find it!)
Next steps: Build and configure your News Details / DBPP
Now that you have created and configured your All News page, you'll learn next about how a News Details page can help you display dynamic posts in a beautiful way on your website! Click to start the article, "Posts Quickstart Guide Step 5: Build and configure your News Details / DBPP."
Comments
Please Sign in to leave a comment if you don't see the comment box below.