# Homepage Layout **Digital Nomad** 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** ## First/Second/Third/Fourth/Fifth section tag or title 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**'. ### tag Enter the **slug** of the **tag** whose posts you want to show in this section.

### title Enter the **title** for the section.

### show-latest-posts By entering '**show-latest-posts**' in this setting, the section will display 12 posts in order of their publication date. However, exceptions apply: Slider sections will have amount of posts that you entered in **First/Second/Third/Fourth/Fifth section posts count or text** setting, and sections named as '1 + 2' or '1 + 3' will have a fixed number of posts. Moreover, a **Load More** button will be available under this section, excluding Slider sections and '1 + 2' etc sections. {% hint style="danger" %} Be sure that you have **only one 'show-latest-posts' section** on your home page! {% endhint %} ### **show-featured-posts** 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. ### **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**'. *** ## First/**Second/Third/Fourth/Fifth** section layout type This setting is responsible for the appearance of posts in the section. It has **54 options:** 1. **None** 2. **1 + 2 light background** 3. **1 + 2 dark background** 4. **1 (Featured) + 2 light background** 5. **1 (Featured) + 2 dark background** 6. **1 + 3 light background** 7. **1 + 3 dark background** 8. **1 (Featured) + 3 light background** 9. **1 (Featured) + 3 dark background** 10. **List with sidebar featured posts light background** 11. **List with sidebar featured posts dark background** 12. **List with sidebar latest posts light background** 13. **List with sidebar latest posts dark background** 14. **List with sidebar (with image) featured posts light background** 15. **List with sidebar (with image) featured posts dark background** 16. **List with sidebar (with image) latest posts light background** 17. **List with sidebar (with image) latest posts dark background** 18. **Posts with date + sidebar featured posts light background** 19. **Posts with date + sidebar featured posts dark background** 20. **Posts with date + sidebar latest posts light background** 21. **Posts with date + sidebar latest posts dark background** 22. **Categories (tags) tabs light background** 23. **Categories (tags) tabs dark background** 24. **Grid 2 column light background** 25. **Grid 2 column dark background** 26. **Grid 2 column + sidebar with featured posts light background** 27. **Grid 2 column + sidebar with featured posts dark background** 28. **Grid 2 column + sidebar with latest posts light background** 29. **Grid 2 column + sidebar with latest posts dark background** 30. **Grid 3 column light background** 31. **Grid 3 column dark background** 32. **Grid 4 column light background** 33. **Grid 4 column dark background** 34. **Fullscreen slider** 35. **Big slider light background** 36. **Big slider dark background** 37. **Medium slider light background** 38. **Medium slider dark background** 39. **Slider 2 posts light background** 40. **Slider 2 posts dark background** 41. **Small slider light background** 42. **Small slider dark background** 43. **Medium posts + small posts light background** 44. **Medium posts + small posts dark background** 45. **Membership light background** 46. **Membership dark background** 47. **Fullscreen section with cover image** 48. **Fullscreen section with membership slider** 49. **Fullscreen section with defined membership tier** 50. **Subscribe banner light background** 51. **Subscribe banner dark background** 52. **Fullscreen section with author** 53. **Author name with image and bio light background** 54. **Author name with image and bio dark background** 55. **Subscribe banner with benefits light background** 56. **Subscribe banner with benefits dark background** ### **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. {% endhint %} ### 1 + 2 light background / **1 + 2 dark background** This section displays one large and two small posts.

### 1 (Featured) + 2 light background / 1 (Featured) + 2 dark background This section presents one large featured post alongside two additional, smaller posts related to your selected tag.

### 1 + 3 light background / 1 + 3 dark background This section presents one large post alongside 3 additional, smaller posts.

### 1 (Featured) + 3 light background / 1 (Featured) + 3 dark background This section presents one large featured post alongside 3 additional, smaller posts related to your selected tag.

### List with sidebar featured posts light background / List with sidebar featured posts dark background This section presents list of posts related to your selected tag and sidebar with featured posts on the right.

### List with sidebar latest posts light background / List with sidebar latest posts dark background This section presents list of posts related to your selected tag and sidebar with latest posts on the right.

### List with sidebar (with image) featured posts light background / List with sidebar (with image) featured posts dark background This section presents list of posts related to your selected tag and sidebar that includes CTA widget with image and featured posts.

### List with sidebar (with image) latest posts light background / List with sidebar (with image) latest posts dark background This section presents list of posts related to your selected tag and sidebar that includes CTA widget with image and latest posts.

### Posts with date + sidebar featured posts light background / Posts with date + sidebar featured posts dark background This section presents list of posts with 'date' square related to your selected tag and sidebar that includes CTA widget and featured posts.

### Posts with date + sidebar latest posts light background / Posts with date + sidebar latest posts dark background This section presents list of posts with 'date' square related to your selected tag and sidebar that includes CTA widget and latest posts.

### Categories (tags) tabs light background / Categories (tags) tabs dark background This section presents tags (categories) tabs.

**Categories (tags) tabs section with emojis**

#### To add emoji (or any image) to category (tag) tab: 1. Check the category (tag) slug. You can do that in **Tags** settings in the admin panel. 2. Combine the slug with `-icon` to build a CSS class. For example, if the slug is 'innovation', the CSS class will be `.innovation-icon`. 3. Go to **Settings -> Code Injection** from Admin Panel 4. Add the following code in the **Site Header** section: ```html ``` 4. Paste the URL of the image or emoji to the `background-image: url(`**`HERE`**`)`. 5. Click **Save** **Your code inside code injection should look like this:** {% code title="// With local image" %} ```html ``` {% endcode %} or {% code title="// With image from web" %} ```html ``` {% endcode %} ### Grid 2 column light background / Grid 2 column dark background This section presents 2 columns grid of posts related to your selected tag.

### Grid 2 column + sidebar with featured posts light background / Grid 2 column + sidebar with featured posts dark background This section presents 2 columns grid of posts related to your selected tag and sidebar that includes CTA widget and featured posts.

### Grid 2 column + sidebar with featured latest light background / Grid 2 column + sidebar with latest posts dark background This section presents 2 columns grid of posts related to your selected tag and sidebar that includes CTA widget and latest posts.

### Grid 3 column light background / Grid 3 column dark background This section presents 3 columns grid of posts related to your selected tag.

### Grid 4 column light background / Grid 4 column dark background This section presents 4 columns grid of posts related to your selected tag.

### Fullscreen slider Fullscreen slider that displays posts related to your selected tag.

### Big slider light background / Big slider dark background Big slider that displays posts related to your selected tag.

### Medium slider light background / Medium slider dark background Medium slider that displays posts related to your selected tag.

### Slider 2 posts light background / Slider 2 posts dark background 2 posts per view slider that displays posts related to your selected tag.

### Small slider light background / Small slider dark background Small slider that displays posts related to your selected tag.

### Medium posts + small posts light background / Medium posts + small posts dark background This section presents 2 large and 2 small posts related to your selected tag.

### Membership light background / Membership dark background This section presents your publication's membership tiers cards with title and text that you added in **First/Second/Third/Fourth/Fifth section tag or title** and **First/Second/Third/Fourth/Fifth section posts count or text**.

### Fullscreen section with cover image This section displays your publication cover image with **title** and **text** that you added in **First/Second/Third/Fourth/Fifth section tag or title** and **First/Second/Third/Fourth/Fifth section posts count or text**. It also has a **button** that redirects to the membership page or Portal plans page, depending on your [**preference**](https://highfivethemes.gitbook.io/digital-nomad-user-documentation/membership/setting-up).

### Fullscreen section with membership slider This section displays your publication cover image with **title** and **text** that you added in **First/Second/Third/Fourth/Fifth section tag or title** and **First/Second/Third/Fourth/Fifth section posts count or text**. It also has a **membership tiers slider.**

### **Fullscreen section with defined membership tier** **This section displays:** 1. **Post** which **slug** you added in the **First/Second/Third/Fourth/Fifth section tag or title**. If you **don't add the post slug**, the section will show the **latest featured post**. If your publication doesn't have any featured posts, the section will display the **latest post**. 2. **Membership Tier Card** with tier which **title** you added in the **First/Second/Third/Fourth/Fifth section posts count or text**. If you **don't add the title**, section will display **last tier**.

### Subscribe banner light background / Subscribe banner dark background This section displays subscribe banner with your **publication cover image**, **title** and **text** that you added in **First/Second/Third/Fourth/Fifth section tag or title** and **First/Second/Third/Fourth/Fifth section posts count or text**.

### Fullscreen section with author This section displays your publication cover image with **title** and **text** that you added in **First/Second/Third/Fourth/Fifth section tag or title** and **First/Second/Third/Fourth/Fifth section posts count or text**. It also has a **button** that redirects to the membership page or Portal plans page, depending on your [**preference**](https://highfivethemes.gitbook.io/digital-nomad-user-documentation/membership/setting-up).

#### To add emojis: 1. Go to **Settings -> Code Injection** from Admin Panel 2. Add the following code to the **Site Header** section: ```html ``` 3. Your newly added code inside **Code Injection's** **Site Header** should look similar to this:

<style>
  fs-section-with-author__subsctract:before {
    content: "";
    background-image: url('assets/images/love-hand.png');
  }
  
  .fs-section-with-author__subsctract:after {
    content: "";
    background-image: url('https://img.icons8.com/emoji/48/fire.png');
  }
</style>

4. Click **Save** #### To add emoji in the end of the title: 1. Go to **Settings -> Code Injection** from Admin Panel 2. Add the following code to the **Site Header** section:

<style>
    .fs-section-with-author__title:after {
        content: "";
        background-image: url('PASTE_URL_TO_IMAGE_HERE');
    }
</style>

3. Your newly added code inside **Code Injection's** **Site Header** should look similar to this: ```html ``` 4. Click **Save** ### Author name with image and bio light background / Author name with image and bio dark background This section displays **author's** **name** that you added in **First/Second/Third/Fourth/Fifth section tag or title** and **First/Second/Third/Fourth/Fifth section posts count or text**, with **author's profile image** in the center, and **author's bio** under it. Additionally, this section features two buttons: **Join Community** and **Free Newsletter**, which direct users to the membership plans page and the subscription page, respectively.

**Author name with image and bio light background**

**Author name with image and bio dark background**

### Subscribe banner with benefits light background / Subscribe banner with benefits dark background This section displays **membership** **banner** with title that you add in corresponding **First/Second/Third/Fourth/Fifth section tag or title** setting and text with list of membership benefits that you add in corresponding **First/Second/Third/Fourth/Fifth section posts count or text** setting.

#### To add text and list of benefits: * **Copy** this HTML template, **change text** and **benefits**, and **insert** it inside corresponding **First/Second/Third/Fourth/Fifth section posts count or text** setting ```html ``` * You can add more benefits, just **copy** this HTML template, **change** **benefit** **text** and **paste** it before **closing** **`` tag.** ```html ``` #### To change image: * To update the banner image, navigate to the `theme/assets/images` **folder** and replace `banner-img.png` with your new banner image. Ensure the new image retains the name. ## **First/Second/Third/Fourth/Fifth section posts count or text** This setting is responsible for the **number of posts** displayed in the section. ### Slider Layouts Posts Limit For sections utilizing a 'slider' layout (**Fullscreen**, **Big**, **Medium**, **Small Slider**), the **maximum number of posts** that can be displayed is capped at **5** for **Fullscreen**, **Big** and **Medium** sliders and **7** for the **Small** slider. This is to ensure optimal loading times and maintain the visual integrity of the slider presentation. Please note, setting a posts count higher than 5 for these layouts will result in only the first **5** posts being displayed. ### Fixed Posts Count for Specific Layouts For sections adopting **'1 + 2'**, **'1 + 3'**, etc., layouts, the number of posts that can be displayed is **fixed**. These layouts are designed to present posts in a specific arrangement that does not allow for customization of the posts count beyond their default settings. This ensures a consistent and visually appealing presentation across the platform. {% hint style="warning" %} This setting does not work if the section's [**First/Second/Third/Fourth section tag**](#first-second-third-fourth-section-tag) **setting** is set to '**show-all-posts**' and [**First/Second/Third/Fourth section layout type**](#first-second-third-fourth-section-layout-type) **setting** is set to **"List with sidebar featured posts" or "List with sidebar latest posts" or "Grid 2 column", "Grid 2 column + sidebar with featured posts" or "Grid 2 column + sidebar with latest posts" or "Grid 3 column" or "Grid 4 column"** because of how **Ghost CMS** pagination works. In such cases, **12** posts will be shown. {% endhint %} ### **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 posts count** menu items * **Enter** your preferred number of posts for each section