🏠Homepage Layout

Personal supports customizing Homepage Layout in your publication. There are 15 settings, 3 for each section:

First section tag or title
First section layout type
First section posts count or text
Second section tag or title
Second section layout type
Second section posts count or text
Third section tag or title
Third section layout type
Third section posts count or text
Fourth section tag or title
Fourth section layout type
Fourth section posts count or text
Fifth section tag or title
Fifth section layout type
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:

None
Hero
Hero with subscribe
Hero with author
Hero with author and subscribe
Work experience
Membership
Projects
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.

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

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.

Work experience

This section displays 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

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

<div class="work-card__positions" data-aos="fade-up" style="--i: CARD NUMBER" data-aos-anchor="#work-experience-section-SECTION-NUMBER">
        <span class="work-card__position">JOB_TITLE</span>
    </div>

    <div class="work-card__experience">
        <span class="work-card__time">WORK_EXPERIENCE_TIME</span>

        <div class="work-card__accordion">
            <span class="work-card__company-name">COMPANY_NAME</span>
            <div class="work-card__accordion-btn-wrapper">
                <button class="work-card__accordion-btn"></button>
                <button class="work-card__accordion-btn"></button>
            </div>
        </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.

Change the attribute style="--i: CARD NUMBER" to start the card number at 0 (e.g., `style="--i: 0")

Change the attribute data-aos-anchor="#work-experience-section-SECTION-NUMBER" so that the section numbers start at 0 instead of 4. For example, data-aos-anchor="#work-experience-section-0" for the first section.

Membership

This section presents your publication's membership tiers cards.

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.

Posts

This section displays posts related to your selected tag.

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