How to Add and Customize Blog Posts on Your Website

De 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. Ga naar Elementen toevoegen → Scroll to Blog.
3. Select Berichten En 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:Klik op Add Text Element.
2. Selecteer de 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:

• Kies een 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

• Ga naar Instellingen to modify:
• Opvulling en marges 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 En 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.