# Homepage Layout

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

1. <mark style="background-color:orange;">**First section tag or title**</mark>
2. <mark style="background-color:green;">**First section layout type**</mark>
3. <mark style="background-color:purple;">**First section posts count or text**</mark>
4. <mark style="background-color:orange;">**Second section tag or title**</mark>
5. <mark style="background-color:green;">**Second section layout type**</mark>
6. <mark style="background-color:purple;">**Second section posts count or text**</mark>
7. <mark style="background-color:orange;">**Third section tag or title**</mark>
8. <mark style="background-color:green;">**Third section layout type**</mark>
9. <mark style="background-color:purple;">**Third section posts count or text**</mark>
10. <mark style="background-color:orange;">**Fourth section tag or title**</mark>
11. <mark style="background-color:green;">**Fourth section layout type**</mark>
12. <mark style="background-color:purple;">**Fourth section posts count or text**</mark>
13. <mark style="background-color:orange;">**Fifth section tag or title**</mark>
14. <mark style="background-color:green;">**Fifth section layout type**</mark>
15. <mark style="background-color:purple;">**Fifth section posts count or text**</mark>

## <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;

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

### title

Enter the **title** for the section.

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

### **To customize:**

* Go to **Settings > Design & branding** from the admin menu
* Click **Homepage** 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 **9 options:**

1. **None**
2. **Hero**
3. **Hero with subscribe**
4. **Hero with author**
5. **Hero with author and subscribe**
6. **Work experience**
7. **Membership**
8. **Projects**
9. **Posts**

### **To customize:**

* Go to **Settings > Design & branding** from the admin menu.
* Click **Homepage** 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" Option

{% hint style="danger" %}

### Choosing the "None" Option

If you prefer not to display any posts in any of the sections, it's necessary to select the **"None"** option for that particular section's layout type. This prevents the loading of unnecessary code, thereby enhancing the website's performance.&#x20;
{% endhint %}

### Hero

This section displays **hero title** and **hero text** that you added in <mark style="background-color:orange;">**First/Second/Third/Fourth/Fifth section tag or title**</mark> and <mark style="background-color:purple;">**First/Second/Third/Fourth/Fifth section posts count or text.**</mark>

<figure><img src="/files/T4deeSS0uOrEd72GG5fz" alt=""><figcaption><p>Hero</p></figcaption></figure>

### Hero with subscribe&#x20;

This section displays **hero title** and **hero text** that you added in the <mark style="background-color:orange;">**First/Second/Third/Fourth/Fifth section title**</mark> and <mark style="background-color:purple;">**First/Second/Third/Fourth/Fifth section posts count**</mark>. Additionally, include an input field with a subscribe button.

<figure><img src="/files/Tx1yEcyBI2rUldhO6Wh3" alt=""><figcaption><p>Hero with subscribe</p></figcaption></figure>

### Hero with author

This section displays the **hero title** and **hero text** from the <mark style="background-color:orange;">**First/Second/Third/Fourth/Fifth section tag or title**</mark> and the <mark style="background-color:purple;">**First/Second/Third/Fourth/Fifth section posts count or text**</mark>. Additionally, it includes the author's name with an image.

<figure><img src="/files/N5cbkfZ1jnmpve8mT2Zz" alt=""><figcaption><p>Hero with author</p></figcaption></figure>

### Hero with author and subscribe

This section displays **hero title** and **hero text** that you added in <mark style="background-color:orange;">**First/Second/Third/Fourth/Fifth section tag or title**</mark> and <mark style="background-color:purple;">**First/Second/Third/Fourth/Fifth section posts count or text**</mark>.  It also includes the author's name, an image, and a subscription input field with a subscribe button.

<figure><img src="/files/aIBxMJW0l4ViGj0jfXUC" alt=""><figcaption><p>Hero with author and subscribe</p></figcaption></figure>

### Work experience

This section displays work experience

<figure><img src="/files/QSsyihksUvjwMdjWKbg6" alt=""><figcaption><p>Work experience</p></figcaption></figure>

#### To add work experience, you need:

* Create internal tag **#work-experience**
  * Go to **Tags** and create **new tag** with name **#work-experience**.
* Go to **Pages.** Create **New Page** and add tag **#work-experience** for this page
* In **page editor,** choose **HTML**

  <figure><img src="/files/PtdplGlcjufBOJXHAR9m" alt=""><figcaption><p>Page editor</p></figcaption></figure>
* **Copy** this **HTML template** and fill the lines: "JOB\_TITLE", "WORK\_EXPERIENCE\_TIME", "COMPANY\_NAME", "WORK\_EXPERIENCE\_DESCRIPTION"

  ```html
  <div class="work-card" data-aos="fade-up" style="--i: CARD NUMBER" data-aos-anchor="#work-experience-section-SECTION-NUMBER">
      <div class="work-card__positions">
          <span class="work-card__position">JOB_TITLE</span>
      </div>

      <div class="work-card__experience">
          <div class="work-card__accordion">
              <div class="work-card__accordion-header">
                  <span class="work-card__time">WORK_EXPERIENCE_TIME</span>
                  <span class="work-card__company-name">COMPANY_NAME</span>
              </div>
              <button class="work-card__accordion-btn-wrapper" aria-label="Open work experience description">
                    <span class="work-card__accordion-btn"></span>
                    <span class="work-card__accordion-btn"></span>
              </button>
          </div>
          <p class="work-card__description">
             WORK_EXPERIENCE_DESCRIPTION
          </p>
      </div>
  </div>
  ```

{% hint style="info" %}
You can add several "JOB\_TITLE", just copy the line and change the job title.

Update the `style="--i: CARD_NUMBER"` attribute so that the card numbering starts at 0

&#x20;(e.g., `style="--i: 0"`).

Update the `data-aos-anchor="#work-experience-section-SECTION-NUMBER"`  attribute to start section numbering at 0 instead of 4. For example, the first section should use `data-aos-anchor="#work-experience-section-0"`**.**

```html
Example
<div class="work-card" data-aos="fade-up" style="--i: 0" data-aos-anchor="#work-experience-section-3">
    <div class="work-card__positions">
        <span class="work-card__position">Digital Marketing Specialist</span>
    </div>
    <div class="work-card__experience">
        <div class="work-card__accordion">
          <div class="work-card__accordion-header">
            <span class="work-card__time">2022 — Present</span>
            <span class="work-card__company-name">Creatify Digital</span>
          </div>
          <button class="work-card__accordion-btn-wrapper" aria-label="Open work experience description">
              <span class="work-card__accordion-btn"></span>
              <span class="work-card__accordion-btn"></span>
          </button>
        </div>
        <p class="work-card__description">
            I am a digital marketing specialist at Creatify Digital, where I create and implement data-driven marketing strategies to boost online presence and drive sales for clients. 
        </p>
    </div>
</div>
```

{% endhint %}

### Membership

This section presents your publication's membership tiers cards.

<figure><img src="/files/8tBKghwTZdcSL7m5AAHe" alt=""><figcaption><p>Membership section</p></figcaption></figure>

### Projects

This section presents your projects with title that you added in <mark style="background-color:orange;">**First/Second/Third/Fourth/Fifth section tag or title.**</mark>

**To add project in this section, need:**

* Create internal tag **#project**
  * Go to **Tags** and create **new tag** with name **#project.**
* Go to **Posts.** Create **New Post** and add tag **#project** for this post.

<figure><img src="/files/TH2sUvLUkcUtaVvxWbrD" alt=""><figcaption><p>Projects section</p></figcaption></figure>

### Posts

This section displays posts related to your selected tag.

<figure><img src="/files/Vkyn8BMMDJ6gruCh6zNB" alt=""><figcaption><p>Posts section</p></figcaption></figure>

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

This setting is responsible for the **number of posts** displayed in the **posts** and **projects** section.&#x20;

In the work experience and membership section, the post count or text settings are non-functional and can be left blank.

### Load more button in posts section

If the setting <mark style="background-color:orange;">First/Second/Third/Fourth/Fifth section tag or title</mark> includes "show-latest-posts", then set the "<mark style="background-color:purple;">**First/Second/Third/Fourth/Fifth section posts count or text**</mark> option to "load-more".

<figure><img src="/files/llQGtI8Dt7AvAsAcffJ8" alt=""><figcaption><p>Posts settings</p></figcaption></figure>

<figure><img src="/files/FPdNV3FR6dL26cN2MDHl" alt=""><figcaption><p>Posts section with load more button</p></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/digital-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.