Demos
Support
High Five ✋ Themes

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

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

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.

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.

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

<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

PreviousBorder RadiusNextSubscribe CTA Text and Subtext

Last updated