Add a list of blog posts to your page

You can add a widget to any page on your website to display your blog posts in a list or grid view. Your blog cards will update as you continue to publish and edit posts! 

Check out this article to learn how to create your blog.

How to add the widget to your page

1. Open the editor page where you want to display your post listing 
2. In the left toolbar, open the Blog tab 
3. Drag and drop the Post listing widget onto your page
4. Resize your widget to your preferred size by dragging the border

Layout 

You can change the layout of your post listing in your Editing Menu. 

Card Layout

You blog card is the individual posts within the blog widget. You can choose how each blog card is displayed in the post listing: 

Horizontal: Displays the feature image horizontally aligned with the text 

Vertical: Displays the feature image vertically aligned with the text 

Overlay: displays the text on top of the feature image

Cards per row

Adjust the slider value or input how many cards you would like to display per row. 

Fixed: The # of cards per row will stay the same 

Fluid: The # of cards per row will change depending on screen size. Set the desired px width for each card and Pagecloud will automatically adjust the cards to fit.

More layout options

Space between elements: Adjust the slider value or input space between each element of your blog cards. 

Card alignment: Use the alignment arrows to align the details inside your blog cards.

Card contents: Toggle on or off the blog details you want to to display on your blog cards.

Space between cards: Adjust the slider value or input the space between each card row and column.

Settings

You can customize your widget settings in your editing menu by clicking the Settings tab.

Filters

Filters allow you to choose which blog posts you want to display in your blog listing. For example, say you have a web page for a specific product that you sell; on that page you can display only the blog posts categories that are relevant to that product. 

Step 1. How do you want your filters to behave.

Filters can be quite powerful, one of first things you need to consider is how you want them to behave. Do you want only the posts that match all your filters or do you want all the posts that match any of your filters?

Match all: Blog post must match ALL the filters to set in order to display in widget 

Match any: Blog post can match ANY of the filters in order to display in the widget.

You can add filters to only display certain types of blog posts in your listing widget. You can add multiple “Equals” or “Does not equal” filters per widget. 

Step 2. Create a filter

Choose one of the following options

• Post: Filter by post allows you to choose the title of which post(s) you want, or don’t want, to display. 
• Author: Filter by author allows you to choose which author(s) of the posts you want, or don’t want, to display 
• Categories: Filter by category allows you to choose the which post category/categories you want, or don’t want to display
• Tags: Filter by tag allows you to choose which post tag(s) you want, or don’t want, to display 
• Published year: Filter by published year allows you to choose which year(s) of posts you want, or don’t want to display

Choose a condition

• Equals: You want the post to include what the value set in the filter.
• Doesn't equal: You don't want the post to include the value set in the filter

Add the value(s)

• Add the values for the option you choose in step 1. 

Tip: You can add more than one value but if your settings are set to Match All you may end up with no results.

Sort by

You can sort your posts by title (alphabetically A-Z or Z-A) or by published date (oldest- newest, newest-oldest) 

Styling your Cards

When styling your Blog Cards, the changes you make will update for each card.

Text: Double click the text you wish to style. You can add opacity, shadow, and change font, font color, font weight, alignment etc. Learn more about working with text.

Reorder: Drag the content on the card to reorder 

Image: Double click the image to add a tint, adjust opacity, round corners, add a shadow, or add an image filter

Card background: Double click the card background to add a color background, opacity, border, shadow, round corners, gradient, and padding. 

Updating Blog Card content

To update your blog card content: 

• Go to your Blog dashboard
• Click the post you wish to update 
• Change the image, author, description, etc. in the post settings