🏠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.

Be sure that you have only one 'show-latest-posts' section on your home page!

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

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.

1 + 2 light background / 1 + 2 dark background

This section displays one large and two small posts.

1 + 2 light background

1 + 2 dark background

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 (Featured) + 2 light background

1 (Featured) + 2 dark background

1 + 3 light background / 1 + 3 dark background

This section presents one large post alongside 3 additional, smaller posts.

1 + 3 light background

1 + 3 dark background

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.

1 (Featured) + 3 light background

1 (Featured) + 3 dark background

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 featured posts light background

List with sidebar featured posts dark background

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 latest posts light background

List with sidebar latest posts dark background

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) featured posts light background

List with sidebar (with image) featured posts dark background

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.

List with sidebar (with image) latest posts light background

List with sidebar (with image) latest posts dark background

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 featured posts light background

Posts with date + sidebar featured posts dark background

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.

Posts with date + sidebar latest posts light background

Posts with date + sidebar latest posts dark background

Categories (tags) tabs light background / Categories (tags) tabs dark background

This section presents tags (categories) tabs.

Categories (tags) tabs light background

Categories (tags) tabs dark background

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:

<style>
    .CHANGE_THIS_TO_TAG_SLUG_ICON-icon:before {
        content: "";
        background-image: url(URL_TO_YOUR_IMAGE);
    }
</style>

1. Paste the URL of the image or emoji to the background-image: url(HERE).

2. Click Save

Your code inside code injection should look like this:

// With local image

<style>
    .innovation-icon:before {
        content: "";
        background-image: url('assets/images/new.png');
    }
</style>

or

// With image from web

<style>
    .innovation-icon:before {
        content: "";
        background-image: url('https://img.icons8.com/emoji/48/fire.png');
    }
</style>

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 light background

Grid 2 column dark background

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 posts light background

Grid 2 column + sidebar with featured posts dark background

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 2 column + sidebar with featured latest light background

Grid 2 column + sidebar with latest posts dark background

Grid 3 column light background / Grid 3 column dark background

This section presents 3 columns grid of posts related to your selected tag.

Grid 3 column light background

Grid 3 column dark background

Grid 4 column light background / Grid 4 column dark background

This section presents 4 columns grid of posts related to your selected tag.

Grid 4 column light background

Grid 4 column dark background

Fullscreen slider

Fullscreen slider that displays posts related to your selected tag.

Fullscreen slider

Big slider light background / Big slider dark background

Big slider that displays posts related to your selected tag.

Big slider light background

Big slider dark background

Medium slider light background / Medium slider dark background

Medium slider that displays posts related to your selected tag.

Medium slider light background

Medium slider dark background

Slider 2 posts light background / Slider 2 posts dark background

2 posts per view slider that displays posts related to your selected tag.

Slider 2 posts light background

Slider 2 posts light background

Small slider light background / Small slider dark background

Small slider that displays posts related to your selected tag.

Small slider light background

Small slider dark background

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.

Medium posts + small posts light background

Medium posts + small posts dark background

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.

Membership light background

Membership dark background

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.

Fullscreen section with cover image

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 membership 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.

Fullscreen section with defined membership 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.

Subscribe banner light background

Subscribe banner dark background

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.

Fullscreen section with author

To add emojis:

1. Go to Settings -> Code Injection from Admin Panel

2. Add the following code to the Site Header section:

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

1. 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>

1. 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>

1. Your newly added code inside Code Injection's Site Header should look similar to this:

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

1. 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.

Subscribe banner with benefits light background

Subscribe banner with benefits dark background

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

<p class="section-subscribe-banner-with-benefits__text">
    CHANGE THIS TO YOUR TEXT
</p>
<ul class="section-subscribe-banner-with-benefits__benefits">
    <li class="section-subscribe-banner-with-benefits__benefit-item">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.66316 18L4 12.3368L5.13508 11.2018L9.66316 15.7299L19.393 6L20.5281 7.13505L9.66316 18Z"
                fill="#1E1E1E" stroke="#1E1E1E" stroke-width="0.5" />
        </svg>
        CHANGE THIS TO YOUR BENEFIT
    </li>
    <li class="section-subscribe-banner-with-benefits__benefit-item">
        <svg width="24" height="24" viewBox="0 0 24 24"
            fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.66316 18L4 12.3368L5.13508 11.2018L9.66316 15.7299L19.393 6L20.5281 7.13505L9.66316 18Z"
                fill="#1E1E1E" stroke="#1E1E1E" stroke-width="0.5" />
        </svg>
        CHANGE THIS TO YOUR BENEFIT
    </li>
    <li class="section-subscribe-banner-with-benefits__benefit-item">
        <svg width="24" height="24" viewBox="0 0 24 24"
            fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.66316 18L4 12.3368L5.13508 11.2018L9.66316 15.7299L19.393 6L20.5281 7.13505L9.66316 18Z"
                fill="#1E1E1E" stroke="#1E1E1E" stroke-width="0.5" />
        </svg>
        CHANGE THIS TO YOUR BENEFIT
    </li>
    <li class="section-subscribe-banner-with-benefits__benefit-item">
        <svg width="24" height="24" viewBox="0 0 24 24"
            fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.66316 18L4 12.3368L5.13508 11.2018L9.66316 15.7299L19.393 6L20.5281 7.13505L9.66316 18Z"
                fill="#1E1E1E" stroke="#1E1E1E" stroke-width="0.5" />
        </svg>
        CHANGE THIS TO YOUR BENEFIT
    </li>
</ul>

• You can add more benefits, just copy this HTML template, change benefit text and paste it before closing </ul> tag.

<li class="section-subscribe-banner-with-benefits__benefit-item">
    <svg width="24" height="24" viewBox="0 0 24 24"
        fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M9.66316 18L4 12.3368L5.13508 11.2018L9.66316 15.7299L19.393 6L20.5281 7.13505L9.66316 18Z"
            fill="#1E1E1E" stroke="#1E1E1E" stroke-width="0.5" />
    </svg>
    CHANGE THIS TO YOUR BENEFIT
</li>

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.

This setting does not work if the section's First/Second/Third/Fourth section tag setting is set to 'show-all-posts' and 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.

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