How to Add and Customize Blog Posts on Your Website

这 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. 转至 添加元素 → Scroll to 博客。
3. Select 帖子 和 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:点击 Add Text Element。
2. 选择 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:

• 选择 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

• 转至 设置 to modify:
• 填充和边距 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 和 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。