How to Add and Customize Blog Posts on Your Website

The Posts element allows you to display blog posts on any page, whether it's a dedicated blog page or a static homepage. This guide will show you how to add posts, customize their layout, and optimize their display.

1. Adding the Posts Element

Step 1: Insert the Posts Element

1. Open your website builder.
2. Go to Add Elements → Scroll to Blog.
3. Select Posts and drag and drop it onto your page.

The element automatically populates with your latest blog posts, including featured images.

2. Configuring the Posts Layout

Step 2: Adjust Columns and Rows

1. Click on the Posts element to access the settings.
2. Set the number of columns (e.g., 1, 2, or 3 per row).
3. Adjust the rows to control how many posts are visible.
4. Customize the spacing between posts for a cleaner layout.

3. Customizing Post Content

Step 3: Modify Post Elements

• Featured Image: Click the image to change or remove it.
• Title: Editable within each post or directly from the settings.

1. Date Display:Click on Add Text Element.
2. Select the server icon and choose Publish Date.
3. Align it as needed (left, center, or right).
4. Read More Button:Ensure it's linked to the Post URL for navigation.
5. Adjust the button style (color, size, font).

4. Filtering and Sorting Posts

Step 4: Apply Filters

Under Filter Options, you can:

• Choose a specific source (e.g., latest posts, category-based).
• Include or exclude specific posts.
• Use an offset to skip certain posts (e.g., skip the first 2 posts).

Under Order Direction, set posts to display:

• Newest to Oldest (default).
• Oldest to Newest (for chronological order).

5. Styling the Posts Section

Step 5: Adjust Styling & Spacing

• Go to Settings to modify:
• Padding and Margins for spacing around the section.
• Font Styles and Colors for post titles, descriptions, and dates.
• Background and Border Effects to enhance design.

6. Optimizing for Mobile & Tablet

Step 6: Ensure Responsive Design

• Switch to Tablet View and Mobile View.
• Adjust columns per row to maintain readability (e.g., 1 post per row on mobile).
• Resize images and text for a balanced layout.

Why Use the Posts Element?

• Showcase Recent Articles – Keep content fresh and engaging.
• Boost SEO – More indexed pages improve search rankings.
• Improve Navigation – Users easily discover related content.
• Enhance Readability – Customizable layouts for a better user experience.

With these steps, you can seamlessly add, customize, and style blog posts to fit your website design, keeping your content dynamic and engaging.