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.
Note: The blog feature and blog widget feature are not available on a free plan. Your blog posts will appear blank. Upgrade to a premium plan to use the blog!
How to add the widget to your page
- Open the editor page where you want to display your post listing
- In the left toolbar, open the Blog tab
- Drag and drop the Post listing widget onto your page
- Resize your widget to your preferred size by dragging the border
Tip: The blog widget functions best inside an Auto Column! Learn more about Auto Columns
You can change the layout of your post listing in your Editing Menu.
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.
Tip: For the best results using Fluid cards per row, use Auto Columns set to Full Width. Learn more about Full Width Columns!
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.
You can customize your widget settings in your editing menu by clicking the Settings tab.
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.
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