# Template: Blog Posts

{% hint style="info" %}
**Template -> Blog posts**
{% endhint %}

Select the **Blog** created in admin first.

## Layout <a href="#layout" id="layout"></a>

**Top spacing**

Top spacing can be changed to **Small**, **Medium,** and **Normal**. The value for each option on the desktop and mobile can be specified in pixels by adjusting the Section top spacing settings under Theme settings -> Layout. If you do not need space, choose **None**.

**Width**

Change the content **Width** from the **Default** to **Boxed** or **Wide**.

{% hint style="info" %}
The Wide option works for screens with 1440px width and more.
{% endhint %}

**Number of columns**

Set the **Number of columns** to display **1-6** articles in a horizontal row on a desktop. By default, a single blog post will be displayed in each row on mobile.

**Heading alignment**

Align the heading to either the **left** or **center**.

**Sidebar**

You can position the sidebar module on the **Left**, **Right**, or **None** it altogether if unnecessary.

{% tabs %}
{% tab title="Left" %}
Here's how the layout looks with 3 columns and the sidebar positioned on the left.

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2F6lF9sSDaxC0UbBeqnoro%2Fblogs_sb_left.png?alt=media&#x26;token=1a5ff539-a811-4630-9829-5de28cc4ce95" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Right" %}
Here's how the layout looks with 1 column and the sidebar positioned on the right.

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FeZOcX4beuyLdADeXqVUD%2Fblogs_sb_right.png?alt=media&#x26;token=46dc7ea9-d449-4c06-b086-1812c528b318" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="None" %}
Here's how the layout looks with 4 column and without the sidebar

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2F2zPJbK0mQSiYotg2nCVW%2Fblogs_sb_none.png?alt=media&#x26;token=4cddb77c-b5ed-41c3-837c-8a43ffe551ac" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Sidebar elements must be added using blocks
{% endhint %}

**Image hover effect**

Available options for these button types include:

* Basic theme settings
* Disable
* Zoom in #1
* Zoom in and rotate
* Zoom in #2
* Zoom out #1
* Zoom out #2
* Slide
* Shine

***

## Posts

**Blog posts**

Set the number of articles in the **Blog posts** section, ranging from 1 to 16.

**Image ratio**

The option allows you to adjust the width-to-height proportion of an image. The Wokiee theme provides seven options to fit your image to the desired size: **Auto**, **Portrait (3:4)**, **Landscape (4:3)**, **Square (1:1)**, **Round (1:1)**, **Social Story (9:16)**, and **Widescreen (16:9)**.

**Alignment**

You can set the blog titles to align either **Left** or **Center**.

**Heading size**

You can set the sizes either **Large, Medium** or **Small**.

**Show featured image**

Enable the option in order to display an image for each article. Assign pictures to the blog articles in your Shopify admin.

**Truncate post heading**

This option enables you to shorten the titles of blog posts.

**Underline on hover**

Tick the option to underline the titles of articles on mouse hover.

**Show tags**

This option enables showing the tags of blog posts.

**Show date**

This option enables showing the publication date of blog posts.

**Show author**

Enable the option to display an author.

**Show button**

Enable the option to display a button.

**Show comment count**

Enable the option to display a comment count.

**Excerpt**

Available in variants: Hide, Show, Show truncated content.
