# 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="https://609546565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEtsGfsW99UrVt2tgoUZE%2Fuploads%2FwXCICBlbkwzJAnMZ60tz%2Flist.jpg?alt=media&#x26;token=0dc60f40-93a3-479a-a261-b6f65cf4ef9e" alt=""><figcaption></figcaption></figure>

### **List + Sidebar**

<figure><img src="https://609546565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEtsGfsW99UrVt2tgoUZE%2Fuploads%2FAWmbbUae45C3Dy9Bz2la%2Flist-with-sidebar.jpg?alt=media&#x26;token=b6877e27-3e7f-4c11-b178-017c02bbe7af" 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="https://609546565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEtsGfsW99UrVt2tgoUZE%2Fuploads%2Fm9jod9Jl5XlisbjhVUmK%2Fgrid%20with%20tabs.jpg?alt=media&#x26;token=891abea9-62e2-4785-aa49-05cfa4327af0" 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="https://609546565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEtsGfsW99UrVt2tgoUZE%2Fuploads%2FS2Earty67b3C9fWCs77T%2Fgrid%20without%20tabs.jpg?alt=media&#x26;token=e1ecf562-ddef-4506-b5a9-7d4781bbe080" alt=""><figcaption></figcaption></figure>

### **Big Grid**

<figure><img src="https://609546565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEtsGfsW99UrVt2tgoUZE%2Fuploads%2F8GRyy3sPKIUDTXpH0GBM%2Fbig%20grid.jpg?alt=media&#x26;token=339176a0-0479-42ce-8f23-c82bb334cd82" alt=""><figcaption></figcaption></figure>

### **Medium Grid**

<figure><img src="https://609546565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEtsGfsW99UrVt2tgoUZE%2Fuploads%2FaV0mCM7H4wTymwF7808d%2Fmedium%20grid.jpg?alt=media&#x26;token=a519e951-1aee-42d6-90a6-a13901b562aa" alt=""><figcaption></figcaption></figure>

### **Small Grid**

<figure><img src="https://609546565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEtsGfsW99UrVt2tgoUZE%2Fuploads%2FcfQUk3bljDixjhxmxdqP%2Fsmall%20grid.jpg?alt=media&#x26;token=83d9df41-c993-43ee-a5cd-2d483b631a07" alt=""><figcaption></figcaption></figure>