🏠Homepage Layout

Personal 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'.

show-latest-posts

By entering 'show-latest-posts' in this setting, the section will display 4 posts in order of their publication date.

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.

tag

Enter the slug of the tag whose posts you want to show in this section.

title

Enter the title for the section.

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

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.

Hero

This section displays hero title and hero 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.

Hero

Hero with subscribe

This section displays hero title and hero text that you added in the First/Second/Third/Fourth/Fifth section title and First/Second/Third/Fourth/Fifth section posts count. Additionally, include an input field with a subscribe button.

Hero with subscribe

Hero with author

This section displays the hero title and hero text from the First/Second/Third/Fourth/Fifth section tag or title and the First/Second/Third/Fourth/Fifth section posts count or text. Additionally, it includes the author's name with an image.

Hero with author

Hero with author and subscribe

This section displays hero title and hero 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 includes the author's name, an image, and a subscription input field with a subscribe button.

Hero with author and subscribe

Work experience

This section displays work experience

Work experience

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

    Page editor

  • Copy this HTML template and fill the lines: "JOB_TITLE", "WORK_EXPERIENCE_TIME", "COMPANY_NAME", "WORK_EXPERIENCE_DESCRIPTION"

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

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

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

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>

Membership

This section presents your publication's membership tiers cards.

Membership section

Projects

This section presents your projects with title that you added in First/Second/Third/Fourth/Fifth section tag or title.

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.

Projects section

Posts

This section displays posts related to your selected tag.

Posts section

First/Second/Third/Fourth/Fifth section posts count or text

This setting is responsible for the number of posts displayed in the posts and projects section.

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 First/Second/Third/Fourth/Fifth section tag or title includes "show-latest-posts", then set the "First/Second/Third/Fourth/Fifth section posts count or text option to "load-more".

Posts settings
Posts section with load more button
PreviousSubscribe CTA Text and SubtextNextSetting Up

Last updated