# Blog posts

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fo6Xf40wrgBJTbnykVQw5%2FFrame%2044116.png?alt=media&#x26;token=5b4a854e-fa91-4c75-896c-cee2228f66ed" alt=""><figcaption></figcaption></figure>

A blog acts as your brand’s direct voice to the outside world. It helps build, reaffirm, and strengthen your brand name online while attracting more traffic to your website.&#x20;

This article will show you how to add and customize your blog posts section in Sleek.

## How to add a Blog post

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click the **Add section**
2. Locate **Blog posts**
3. **Save**
   {% endhint %}

To know more about how to add a blog to your online store, see [Blogs](https://help.shopify.com/en/manual/online-store/blogs).

This article shows you how to display your blog posts on your website using **Sleek** theme.

## How to edit a Blog post

### **Section header**

Use the provided text fields to add a suitable **Heading**.

* Leave it blank if you do not want to display it

You can also change the **Heading size** to:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl
* Display md
* Display lg
* Display xl

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FcPpx6bmi0pDrMFVGvwQA%2Fimage.png?alt=media&#x26;token=25e7a92d-f2f5-441b-9397-4ceea0f873dd" alt=""><figcaption></figcaption></figure>

### Highlight text

[How to apply Highlight text to the section heading and block headings?](https://docs.foxecom.com/sleek-theme/pages-global-sections/general-settings#highlight-text)

Use the provided text fields to add a suitable **Subheading** and **Text**.

* Leave them blank if you do not want to display them

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F9WXNFt70sP1kmcphXgaF%2Fimage.png?alt=media&#x26;token=69004fbd-6a34-4da1-99de-670c5699a4a2" alt=""><figcaption></figcaption></figure>

### **Blog settings**

This section is for adding preferable blog posts. You can use the slider to adjust the **Number of blog posts to show** (between 2 and 8).

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FON6ZDkko32QeYWqR8082%2Fimage.png?alt=media&#x26;token=e57df5f4-22f1-4828-b982-9365f1b42e77" alt=""><figcaption></figcaption></figure>

### **Grid settings**

Use the slider to adjust the **Number of columns on desktop** (between 1 and 4).

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fbbx7NcIeSjJTD6dMSrxr%2Fimage.png?alt=media&#x26;token=1ae79ccf-44c3-4a0d-a02a-566c24f7aa89" alt=""><figcaption></figcaption></figure>

You can also modify the **Column gap** as Extra large/ Large/ Medium/ Small/ Extra small/ None.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FPfCvdt3vMVWc9Sp4I6an%2Fimage.png?alt=media&#x26;token=fdd8b757-9f78-47b8-b049-f9e0b484256c" alt=""><figcaption></figcaption></figure>

### **Carousel settings**

Toggle the option **Enable carousel on desktop** to display blog posts in the carousel layout.&#x20;

To use a carousel, the number of blog posts to show must be larger than the number of columns.

You can also control the position of the arrow navigation.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FskLgth7BlAUbnb3pMPvq%2Fimage.png?alt=media&#x26;token=874937ab-072f-426e-b18e-d1145f5a8c35" alt=""><figcaption></figcaption></figure>

### **Mobile layout**

You can adjust the **Number of columns on mobile** to **1 column** or **2 columns.**

If you are not into the grid layout, you can use the carousel layout by selecting the **Enable swipe on mobile**.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FB9CIhjZAPT4N0dzIVv6d%2Fimage.png?alt=media&#x26;token=791d8259-55e7-466e-bfe0-c80d978439ae" alt=""><figcaption></figcaption></figure>

### **Card settings**

Change the **Heading size** of the card to **Heading 3**/ **Heading 4**. Furthermore, you can also enable/disable the card elements if needed:

* **Show date**: Display the date that the blog is issued
* **Show excerpt**: Display a short summary of the post
* **Show button**: Lead the customers to the full blog post

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FF2cuyjDOZOFnwttODCUk%2Fimage.png?alt=media&#x26;token=8f5b04dd-468d-4da5-8395-0162464c3744" alt=""><figcaption></figcaption></figure>