Posts Quickstart Guide Step 5: Build and configure your News Details / DBPP

Avatar
Misty Flowers

Welcome to Step 5 in the "Posts Quickstart Guide" series, giving you a "quickstart" to using posts with your Finalsite products. Now that you have built your All News page, this article will help you build your News Details / Default Board Post Page (DBPP). 

Prerequisites

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

In this Article

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 a News Details / Default Board Post Page (DBPP)

The News Details page, Default Board Post Page (DBPP), is a dynamic page used to view a single post's content. When a reader clicks on the title of a post from a post element on any page in the site, the reader can be directed to this dynamic, templated DBPP page to read the content. 

This is a short visual showing how the DBPP works on the live end. 

dbpp live journey.gif

How can a DBPP benefit you?

Here are some benefits to having a default board post page:

  • Direct URL: Each post receives a direct URL allowing it to be used in newsletters or sent out in an email, for example. Clicking the link brings the reader to the dynamically populated DBPP to read the post content.  
  • SEO (Search Engine Optimization): Without a direct URL or content existing on a page, search engines will not pick up your post content. Now the link can be tracked in your site analytics, providing details on how many clicks this particular post receives. 
  • Share to Social Media: Configure Social Media Connections and then a DBPP allows you to share your posts to social media. 
  • Enable reader subscriptions: In the Post Element Settings > Controls, there is an option to Display alert icons giving the reader the option to subscribe to RSS feeds or subscribe to receive email alerts when a new post is published on the board. A DBPP is required in order for these subscriptions to be enabled.
  • Preview your post: Use the eyeball in the bottom right corner to preview the live version, but remember this won't be activated until you apply a DBPP to the board.  

Optional Step

If you decide to display your posts on your homepage in a popup instead of a DBPP, you can skip this article and go straight to Posts Quickstart Guide Step 6: Engage readers with Post Tools elements. (ADD LINK). Be sure, though, to consider other benefits of a DBPP including: sharing posts to Social Media and tracking your SEO traffic. You may decide later to add a DBPP when you are more settled.

Build a News Details / DBPP Default Board Post Page

1: Create or repurpose your page

  Are you a visual learner?

Skip straight to the video tutorial!

Any page on your site can be a default post page as long as it has a Single-format Post element on it. 

  1. Create a new page in Composer or open a page that might be called "News Details" or "Post Details" in your Composer page tree.

  2. Add a Post element from the Module section of the element library.

  3. Click the Post element gear to open the settings and choose Single format. 

step 1 for default board post page.gif

Quick Step-by-Step Tutorial: Create a Default Board Post Page

59 STEPS

1. Before creating a Default Board Post Page, check your site to make sure one has not already been created. If you don't have one, then this tutorial is for you!

Step 1 image

2. First, we need to add a new page. Click the three dot menu.

Step 2 image

3. Click New Page

Step 3 image

4. Title the page Details

Step 4 image

5. Click Hide from navigation elements

Step 5 image

6. Click Save

Step 6 image

7. This creates a blank page. We need to add the header, footer, and theme to the page. Toggle Compose on to enter edit mode.

Step 7 image

8. Click Edit Page Layout

Step 8 image

9. Select the Header. (You will likely only have one to select).

Step 9 image

10. Select the Footer. (You will likely only have one to select).

Step 10 image

11. Select the Theme. (You will likely only have one to select).

Step 11 image

12. Click Save

Step 12 image

13. We don't need this content element. Click Delete Element

Step 13 image

14. Click Delete

Step 14 image

15. Click Add Element to Column

Step 15 image

16. Click Module

Step 16 image

17. Click Post

Step 17 image

18. Click the settings gear to configure the element settings.

Step 18 image

19. This is a dynamic page to display the full body of the post the reader selected. Click Single

Step 19 image

20. Click to toggle the title off.

Step 20 image

21. Expand Content Filters

Step 21 image

22. Click to toggle Display posts from Board(s)

Step 22 image

23. Click Select Board

Step 23 image

24. Navigate to and select all the boards that will be displayed on this domain. Selecting these ensure the post content will be included in site searches. Click Select All

Step 24 image

25. Click Apply

Step 25 image

26. Expand Content Details

Step 26 image

27. Uncheck details that do not need to be displayed. Click Post Title

Step 27 image

28. Click Author

Step 28 image

29. Click Publish Time

Step 29 image

30. Click Categories

Step 30 image

31. Click Summary

Step 31 image

32. Click Tags

Step 32 image

33. Click Link titles to post details

Step 33 image

34. Expand Formatting

Step 34 image

35. This option makes the page title become the post title and provides unique metadata for SEO purposes. Click to select Override Page Title and SEO Metadata

Step 35 image

36. Formatting this page is subject to your preference. A medium size thumbnail typically looks good. Click to select Medium

Step 36 image

37. Aligning the thumbnail to the left allows the post body content to wrap around it. Click to select Left

Step 37 image

38. Click Save

Step 38 image

39. By default, this page will display the most recent post created. When you navigate to this page in a live environment, it will dynamically populate with the post that was selected.

Step 39 image

40. It is possible to include additional images along with the post content, so let's configure a Resource element to display a slide show if images are attached. Click Add Element.

Step 40 image

41. Click Standard

Step 41 image

42. Click Resource

Step 42 image

43. Click the settings gear to configure the element settings.

Step 43 image

44. Typically, a grid or slideshow format works well. Let's select Slideshow

Step 44 image

45. Click to toggle the title off.

Step 45 image

46. Expand All

Step 46 image

47. We do not want to display any file details. In the Display Resource option, click to select None

Step 47 image

48. Click Description to disable this from displaying.

Step 48 image

49. Expand Controls

Step 49 image

50. Select Arrows from the User control menu.

Step 50 image

51. Click Autoplay

Step 51 image

52. Change the amount of time each slide displays to 5.

Step 52 image

53. Click Save.

Step 53 image

54. Finally, we need to link the Post element to the Resource element so it knows where to display any attached images. Click the settings gear of the Post element.

Step 54 image

55. Expand Link To

Step 55 image

56. Click Element

Step 56 image

57. From the Choose Element drop-down field, click Resource.

Step 57 image

58. Click Save

Step 58 image

59. And that's it! Keep learning in our lessons to connect this page to your post elements and post boards. And don't forget to publish your page!

Step 59 image

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

https://www.iorad.com/player/2424996/Create-a-Default-Board-Post-Page

2: Configure your element settings

  Are you a visual learner?

Skip straight to the video tutorial!

  1. Toggle OFF the element title.
  2. Content Filters > Display posts from Board(s): Which boards will be displayed in this element? Only one main board or a few others that have separate posts to include too (e.g. holidays, athletics posts). Select those boards. Choose every board whose posts may be clicked on to lead to this page. The selected boards should mirror the selected boards on any page bringing the visitor to this page.
  3. Content Details: What content will display in this Single Post element? To quickstart, check the boxes next to: Post Title, Publish Date, Body, Thumbnail (unless you have images in the Post Body, and Read More link.
  4. Under Formatting select the box next to Override Page Title and SEO Metadata. This will replace the page title with the post title.
  5. Save the element.

What will happen when I check the box next to Override Page Title and SEO Metadata?

  • the following fields on the Page Settings > SEO tab will be overridden:
    • the Page Title and SEO Title will be replaced dynamically with the Post Title.
    • the SEO Description will be replaced by the Post Summary.
    • the Open Graph Image will be replaced by the Post Thumbnail.

    override page settings.png

step 2 default board post page.gif

Quick Tutorial: Create a Default Board Post Page (skip to Step 20)

Click ahead to Step 20 to learn how to configure the Post element settings.

59 STEPS

1. Before creating a Default Board Post Page, check your site to make sure one has not already been created. If you don't have one, then this tutorial is for you!

Step 1 image

2. First, we need to add a new page. Click the three dot menu.

Step 2 image

3. Click New Page

Step 3 image

4. Title the page Details

Step 4 image

5. Click Hide from navigation elements

Step 5 image

6. Click Save

Step 6 image

7. This creates a blank page. We need to add the header, footer, and theme to the page. Toggle Compose on to enter edit mode.

Step 7 image

8. Click Edit Page Layout

Step 8 image

9. Select the Header. (You will likely only have one to select).

Step 9 image

10. Select the Footer. (You will likely only have one to select).

Step 10 image

11. Select the Theme. (You will likely only have one to select).

Step 11 image

12. Click Save

Step 12 image

13. We don't need this content element. Click Delete Element

Step 13 image

14. Click Delete

Step 14 image

15. Click Add Element to Column

Step 15 image

16. Click Module

Step 16 image

17. Click Post

Step 17 image

18. Click the settings gear to configure the element settings.

Step 18 image

19. This is a dynamic page to display the full body of the post the reader selected. Click Single

Step 19 image

20. Click to toggle the title off.

Step 20 image

21. Expand Content Filters

Step 21 image

22. Click to toggle Display posts from Board(s)

Step 22 image

23. Click Select Board

Step 23 image

24. Navigate to and select all the boards that will be displayed on this domain. Selecting these ensure the post content will be included in site searches. Click Select All

Step 24 image

25. Click Apply

Step 25 image

26. Expand Content Details

Step 26 image

27. Uncheck details that do not need to be displayed. Click Post Title

Step 27 image

28. Click Author

Step 28 image

29. Click Publish Time

Step 29 image

30. Click Categories

Step 30 image

31. Click Summary

Step 31 image

32. Click Tags

Step 32 image

33. Click Link titles to post details

Step 33 image

34. Expand Formatting

Step 34 image

35. This option makes the page title become the post title and provides unique metadata for SEO purposes. Click to select Override Page Title and SEO Metadata

Step 35 image

36. Formatting this page is subject to your preference. A medium size thumbnail typically looks good. Click to select Medium

Step 36 image

37. Aligning the thumbnail to the left allows the post body content to wrap around it. Click to select Left

Step 37 image

38. Click Save

Step 38 image

39. By default, this page will display the most recent post created. When you navigate to this page in a live environment, it will dynamically populate with the post that was selected.

Step 39 image

40. It is possible to include additional images along with the post content, so let's configure a Resource element to display a slide show if images are attached. Click Add Element.

Step 40 image

41. Click Standard

Step 41 image

42. Click Resource

Step 42 image

43. Click the settings gear to configure the element settings.

Step 43 image

44. Typically, a grid or slideshow format works well. Let's select Slideshow

Step 44 image

45. Click to toggle the title off.

Step 45 image

46. Expand All

Step 46 image

47. We do not want to display any file details. In the Display Resource option, click to select None

Step 47 image

48. Click Description to disable this from displaying.

Step 48 image

49. Expand Controls

Step 49 image

50. Select Arrows from the User control menu.

Step 50 image

51. Click Autoplay

Step 51 image

52. Change the amount of time each slide displays to 5.

Step 52 image

53. Click Save.

Step 53 image

54. Finally, we need to link the Post element to the Resource element so it knows where to display any attached images. Click the settings gear of the Post element.

Step 54 image

55. Expand Link To

Step 55 image

56. Click Element

Step 56 image

57. From the Choose Element drop-down field, click Resource.

Step 57 image

58. Click Save

Step 58 image

59. And that's it! Keep learning in our lessons to connect this page to your post elements and post boards. And don't forget to publish your page!

Step 59 image

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

https://www.iorad.com/player/2424996/Create-a-Default-Board-Post-Page

3: Configure your page settings
  1. Open the page settings to be sure the Page Name is toggled ON. 
  2. Check the boxes to Hide this Page from Navigation (and or internal/external search) in your page settings.

  3. Publish your page.

step 3 default board post page.gif

4: Configure your board settings

Once your Post page is complete, you can set it as the Default Board Post Page on each individual board.

  1. Navigate to the Boards tab in Posts
  2. Choose a folder whose boards you'd like to manage and whose posts you'd like to display on your News Details / DBPP page.

  3. Hover over the board, click on the three-dot Action Menu, and open up Settings.

  4. Choose the page you just created in the window that pops up, next to Default Board Post Page.

Step 4 default board post page.gif

5: Preview post on your new DBPP!

Once this page is set, you’ll see the blue "i" / info circle when creating a post.

  1. Hover over the blue circle to confirm that your default board post page had been connected and receive a reminder to make your URL slug unique for this post.
  2. Click on the link icon to see and copy the full URL.
  3. Paste the URL into a new browser tab to confirm that the post appears as you want it to on your new default board post page. 

step 5 default board post page.gif

Was this article helpful?
0 out of 3 found this helpful

Comments

0 comments

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