> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/agile-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/agile-theme/other-pages/blogs/page-template-sections/blog-posts.md).

# Blog posts

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2F4u4xt8wmnQNQq5aEaKb6%2Fimage.png?alt=media&amp;token=d844b734-bcf6-4135-85af-695ccb6dce5b" alt=""><figcaption></figcaption></figure>

## How to add a Blog posts section?

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), open the template selector.
2. Select **Blogs**, then **Default blog.**
3. On the left-sidebar, add **Blog posts.**
4. Make necessary changes > **Save.**
   {% endhint %}

## How to customize your Blog posts section

### General Settings

<table data-full-width="false"><thead><tr><th width="167">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Section width</td><td><p></p><p>3 options for container</p><ul><li>Stretch width: span the section width regardless of screen size.</li><li>Fix width: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li>Expand full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td>Alignment</td><td><p>3 options for the heading and tags list</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Heading</td><td>Title of the sections</td></tr><tr><td>Show tags list</td><td>Displaying a list of blog tags</td></tr></tbody></table>

### Blog post settings

<table data-full-width="false"><thead><tr><th width="170">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image ratio</td><td><p>The image ratio for the featured images of the blog posts:</p><ul><li><strong>Adapt to image</strong> - Uses the aspect ratio of the images. This prevents the images from being cropped.</li><li><strong>Portrait</strong> - Crops the images to use a 3:4 ratio.</li><li><strong>Square</strong> - Crops the images to use a 1:1 ratio</li><li><strong>Landscape</strong> - Crops the images to use a 4:3 ratio</li></ul></td></tr><tr><td>Maximum items to show</td><td>Limit the display of the number of posts. Minimum: 2. Maximum: 24</td></tr><tr><td>Items per row on desktop</td><td>Number of columns to display on desktop computers. Minimum: 2. Maximum: 4.</td></tr><tr><td>Column gap</td><td><p>4 options for column gap</p><ul><li>Small</li><li>No gap</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Show category</td><td>Display blog categories</td></tr><tr><td>Show date</td><td>Display post creation date</td></tr><tr><td>Show author</td><td>Display post author</td></tr><tr><td>Show excerpts</td><td>Display a short post excerpt</td></tr><tr><td>Show tags</td><td>Displaying a list of blog posts tags</td></tr></tbody></table>

#### **Pagination**

{% tabs %}
{% tab title="Default" %}

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FDCbazFm5YSYrlTRHi9Fv%2Fimage.png?alt=media&amp;token=bf6e8354-19a6-4268-a926-43ed527f4029" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Load more" %}

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FkZUUkJoqPF5maq4jS10v%2Fimage.png?alt=media&amp;token=bba87e69-e87c-4c91-abff-6ea39c2249a8" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Infinit srcolling" %}

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2F8uYTmw8JiWBXjCSHs68m%2Fimage.png?alt=media&amp;token=3686c836-1d9f-4627-bef1-72ffde512ca0" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Section padding

* **Top padding:** Customize the top margin of the section
* **Bottom padding:** Customize the bottom margin of the section