# Homepage Layout

**Newsroom** 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 12 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** 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**'.

***

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

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

1. **None**
2. **Grid + Sidebar with Slider with Featured Posts**
3. **Grid + Sidebar with Slider with Latest Posts**
4. **Grid + Sidebar with Slider with Post on Slug**
5. **Grid + Sidebar with Post on Slug**
6. **Grid + Sidebar with Advertisement Image**
7. **Grid + Sidebar with Slider with Featured Posts and Advertisement Image**
8. **Grid + Sidebar with Slider with Latest Posts and Advertisement Image**
9. **Grid + Sidebar with Slider with Post on Slug and Advertisement Image**
10. **Grid + Sidebar with Post on Slug and Advertisement Image**
11. **Grid + Sidebar with Slider with Featured Posts and Post on Slug**
12. **Grid + Sidebar with Slider with Latest Posts and Post on Slug**
13. **Grid + Sidebar with Slider with Featured Posts, Post on Slug and Advertisement Image**
14. **Grid + Sidebar with Slider with Latest Posts, Post on Slug and Advertisement Image**
15. **Grid without Sidebar**
16. **Big Grid**
17. **Medium Grid**
18. **Grid (4 columns)**
19. **Grid (3 columns)**

***

### **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.

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

For each of the five available sections (First, Second, Third, Fourth, Fifth), you can specify:

#### **Сount**

Limit the number of posts displayed in a given section. Enter a number (e.g., `5`) to define how many posts will appear in this block.

{% hint style="info" %}
This setting does not apply to layouts such as **"Big Grid"** or **"Medium Grid"**, as these layouts are designed to display a fixed number of posts and do not support dynamic configuration of the post count per section. For layouts with a **sidebar**, the behavior of this setting changes. In these cases, this setting specifies the tag that filters which posts are displayed in sidebar.
{% endhint %}

{% hint style="info" %}
For the "**Grid without Sidebar**" layout, this setting accepts a special value `load-more` for the section, which enables dynamic "Load More" pagination instead of a static post grid.
{% endhint %}

#### **Tag**&#x20;

For layouts that include a sidebar, this setting group is repurposed to manage the sidebar content. You can use a tag to filter which specific posts appear in the sidebar widget.

### **Grid with Sidebar**

<div><figure><img src="https://300213222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbWKLFzFhl9NJDGRQ49Bh%2Fuploads%2FyriLbOmSJvC4hjVANsCo%2Fnewsroom.highfivethemes.com_%20(3).png?alt=media&#x26;token=bdad9667-264e-4fa8-8514-9e251cd13968" alt=""><figcaption></figcaption></figure> <figure><img src="https://300213222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbWKLFzFhl9NJDGRQ49Bh%2Fuploads%2FP4E4WyBFr2jzVdd1Nxal%2Fnewsroom.highfivethemes.com_%20(11).png?alt=media&#x26;token=c047f9ec-a710-4ee9-8e61-cee7dc8dd175" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}

#### **How to Add a Link to an Advertisement Banner**

**Implementation Steps:**

1. **Replace the placeholder URL** in the script with your desired destination link.
2. **Paste the JavaScript code** into **Settings → Advanced → Code Injection → Site Footer**.

<pre class="language-javascript"><code class="lang-javascript">const advBanner = document.querySelector('.advertisement')

if (advBanner){
  const linkElement = document.createElement('a');
  linkElement.href = '<a data-footnote-ref href="#user-content-fn-1">https://highfivethemes.com</a>';
  linkElement.classList.add('advertisement', 'advertisement--hover');

  while (advBanner.firstChild) {
    linkElement.appendChild(advBanner.firstChild);
  }

  advBanner.parentNode.replaceChild(linkElement, advBanner);
}
</code></pre>

{% endhint %}

### **Grid without Sidebar**

<figure><img src="https://300213222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbWKLFzFhl9NJDGRQ49Bh%2Fuploads%2F6DzhrBGjcJe0Y92qtW7V%2Fnewsroom.highfivethemes.com_%20(4).png?alt=media&#x26;token=cb7cec78-a3be-421b-acf9-0564a589103c" alt=""><figcaption></figcaption></figure>

### **Big Grid**

<figure><img src="https://300213222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbWKLFzFhl9NJDGRQ49Bh%2Fuploads%2Fg6vBFpl99sRrdE7hEkSU%2Fnewsroom.highfivethemes.com_%20(5).png?alt=media&#x26;token=0cbc2474-493a-4344-ba04-06138d449b41" alt=""><figcaption></figcaption></figure>

### **Grid (3 columns)**

<figure><img src="https://300213222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbWKLFzFhl9NJDGRQ49Bh%2Fuploads%2FgJgVIjK5BgaxHI6oleMc%2Fnewsroom.highfivethemes.com_%20(6).png?alt=media&#x26;token=d65117e5-a77a-4eb9-92a7-b4dbb42bf4c7" alt=""><figcaption></figcaption></figure>

### **Grid (4 columns)**

<figure><img src="https://300213222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbWKLFzFhl9NJDGRQ49Bh%2Fuploads%2FriV6YYzWmBJwvCHHiSxv%2Fnewsroom.highfivethemes.com_%20(7).png?alt=media&#x26;token=a57f8620-d71d-448a-aa68-4153dcb2c173" alt=""><figcaption></figcaption></figure>

### **Big Grid**

<figure><img src="https://300213222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbWKLFzFhl9NJDGRQ49Bh%2Fuploads%2F6wGuFuW3tpWGQp7EBdG8%2Fnewsroom.highfivethemes.com_%20(8).png?alt=media&#x26;token=095d755a-d095-44aa-96f7-558731118a62" alt=""><figcaption></figcaption></figure>

### **Medium Grid**

<figure><img src="https://300213222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbWKLFzFhl9NJDGRQ49Bh%2Fuploads%2FKxNVUPfVrhIIPxwR4Pj2%2Fnewsroom.highfivethemes.com_%20(9).png?alt=media&#x26;token=60fe58d9-4626-4d42-bf93-9471e0c740c4" alt=""><figcaption></figcaption></figure>

[^1]: CHANGE LINK