# Homepage Layout

**Hype** supports customizing **Homepage Layout** in your publication. There are **15 settings**, **3** for each section:

1. **First section tag or title**
2. **First section layout type**
3. **First section posts count or text**
4. **Second section tag or title**
5. **Second section layout type**
6. **Second section posts count or text**
7. **Third section tag or title**
8. **Third section layout type**
9. **Third section posts count or text**
10. **Fourth section tag or title**
11. **Fourth section layout type**
12. **Fourth section posts count or text**
13. **Fifth section tag or title**
14. **Fifth section layout type**
15. **Fifth section posts count or text**

## <mark style="background-color:orange;">First/Second/Third/Fourth/Fifth section tag or title</mark>

This setting specifies the **tag** that filters which posts are displayed in this section, or defines the section's **title**. It also has 2 additional options -  '**show-latest-posts**' and '**show-featured-posts**'.

<mark style="background-color:blue;">**show-latest-posts**</mark>

By entering '**show-latest-posts**' in this setting, the section will display 4 posts in order of their publication date.

{% hint style="danger" %}
Be sure that you have **only one 'show-latest-posts' section** on your home page!
{% endhint %}

<mark style="background-color:blue;">**show-featured-posts**</mark>

If you enter '**show-featured-posts**' in this setting, the section will display only **featured** posts without filtering them by tag. You can choose how many posts to show with [**First/Second/Third/Fourth/Fifth section posts count or text**](#first-second-third-fourth-fifth-section-posts-count-or-text) setting.

### tag

Enter the **slug** of the **tag** whose posts you want to show in this section.&#x20;

### title

Enter the **title** for the section.

### **To customize:**

* Go to **Settings > Design & branding** from the admin menu
* Click **Theme** in the **Design** settings sidebar on the right
* Find **First section tag/Second section tag/Third section tag/Fourth section tag/Fifth section tag** menu items
* Enter the **tag slug** to display posts in the first, second, third, fourth or fifth section. Alternatively, enter **title** or '**show-featured-posts**' or '**show-latest-posts**'.

***

This setting is responsible for the appearance of posts in the section. It has **18 options:**

1. **None**
2. **List**
3. **List + Sidebar with Featured Posts**
4. **List + Sidebar with Latest Posts**
5. **List + Sidebar with Advertisement**
6. **List + Sidebar with Widget**
7. **List + Sidebar with Widget and Advertisement**
8. **List + Sidebar with Latest Posts and Widget**
9. **List + Sidebar with Featured Posts and Widget**
10. **List + Sidebar with Latest Posts and Advertisement**
11. **List + Sidebar with Featured Posts and Advertisement**
12. **List + Sidebar with Latest Posts and Advertisement and Widget**
13. **List + Sidebar with Featured Posts and Advertisement and Widget**
14. **Grid with tabs**
15. **Grid without tabs**
16. **Big Grid**
17. **Medium Grid**
18. **Small Grid**

### **To customize:**

* Go to **Settings > Design & branding** from the admin menu.
* Click **Theme** in the **Design** settings sidebar on the right.
* Find **First section layout type/Second section layout type/Third section layout type/Fourth section layout type/Fifth section layout type** menu items.
* **Choose** your preferred layout type for each section.

### **None**

### List

<figure><img src="/files/VJTsSRqFgJvnpnG2TNd6" alt=""><figcaption></figcaption></figure>

### **List + Sidebar**

<figure><img src="/files/AUmiKoT01VmNiuv4uvcI" alt=""><figcaption></figcaption></figure>

**Sidebar Options:**

* with Advertisement
* with Widget
* with Widget and Advertisement
* with Latest Posts
* with Featured Posts
* with Latest Posts and Widget
* with Featured Posts and Widget
* with Latest Posts and Advertisement
* with Featured Posts and Advertisement
* with Latest Posts and Advertisement and Widget
* with Featured Posts and Advertisement and Widget

### **Grid with tabs**

<figure><img src="/files/XE6sGRlqMUti98IwahTU" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
In this section, you can enable post loading by clicking the "Load More" button. To activate this feature, simply enter "load-more" in the "Section Posts Count" setting.
{% endhint %}

### **Grid without tabs**

<figure><img src="/files/VClFWXRLwJxTNLkpB8Xc" alt=""><figcaption></figcaption></figure>

### **Big Grid**

<figure><img src="/files/Wy77O0w23VDa2saWSX4z" alt=""><figcaption></figcaption></figure>

### **Medium Grid**

<figure><img src="/files/CEg5gFlgi9BQOPKVxALq" alt=""><figcaption></figcaption></figure>

### **Small Grid**

<figure><img src="/files/kXFcCGCYBGUltU7m6hOl" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://highfivethemes.gitbook.io/hype-user-documentation/custom-settings/homepage-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.