> For the complete documentation index, see [llms.txt](https://highfivethemes.gitbook.io/digital-user-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://highfivethemes.gitbook.io/digital-user-documentation/custom-settings/homepage-layout.md).

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