🏠Homepage Layout

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

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. Moreover, a Load More button will be available under this section, excluding Slider 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 or title/Second section tag or title/Third section tag or title/Fourth section tag or title/Fifth section tag or title 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 20 options:

1. None

2. Overlay post

3. Grid post small

4. Grid post medium

5. Grid post high

6. Slider medium

7. Slider small

8. Divided slider

9. Divided slider with big pagination

10. Categories (tags) tabs

11. Categories (tags) slider

12. Primary author

13. Membership

14. Fullscreen slider

15. Big slider

16. CTA banner with text

17. CTA banner with text and button

18. CTA banner with text and image

19. CTA banner with text button and image

20. Subscribe banner with benefits

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.

Overlay post

Tagged Posts

This section displays a 4-column grid of posts related to your selected tag.

Overlay post

Grid post small

This section showcases a 4-column grid of posts related to your chosen tag.

Grid post small

Grid post medium

Below is a grid of posts related to your selected tag, presented in three columns.

Grid post medium

Grid post high

This section showcases a 4-column grid of posts related to your selected tag.

Grid post high

Slider medium

Slider showcasing posts linked to your chosen tag.

Slider medium

Slider small

Slider displaying posts related to your selected tag.

Slider small

Divided slider

Slider with a divider for displaying posts.

Divided slider

Divided slider with big pagination

Create a slider to showcase posts with dividers and large pagination controls for easy navigation, ensuring a seamless user experience.

Diveded slider with big pagination

Categories (tags) tabs

This section displays all the tags you have on the site and the post count for each tag.

Categories (tags) tabs

Categories (tags) slider

The slider showcases all tag cards, each featuring a tag image, title, and the post count.

Categories (tags) slider

Primary author

This section displays author information:

• Name

• Social Links

• Bio

• Location

• Cover Image

Primary Author

Membership

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

Fullscreen slider

Fullscreen slider displaying posts related to your selected tag.

Fullscreen slider

Big slider

Big slider displaying posts related to your selected tag.

Big slider

CTA banner

This section displays CTA Banner. In the First/Second/Third/Fourth/Fifth section tag or title setting, add the main title. In the First/Second/Third/Fourth/Fifth section posts count or text setting, add the subtitle (vertical text in the bottom left corner).

Section with CTA banner has 4 type:

1. CTA banner with text.

2. CTA banner with text and button.

3. CTA banner with text and image.

4. CTA banner with text button and image.

CTA banner with text

CTA banner with text and button

CTA banner with text and image

CTA banner with text button and image

To add additional text under the title, include the text within a <p> tag.

For example, add in First/Second/Third/Fourth/Fifth section tag or title stroke "Become a Paradigm Member Today.<p>YOUR ADDITIONAL TEXT.</p>"

Subscribe banner with benefits

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

To add animated text changes in the title:

• To add animation, simply copy this code and insert it into the First, Second, Third, Fourth, or Fifth section tag or title text.

Join Startup
<div>
    <span class="current">Word1</span>
    <span class="next">Word1</span>
    <span>Word1</span>
</div>

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>CHANGE THIS TO YOUR TEXT</p>
<ul>
    <li>
        <div>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.8333 5.83325L8.32806 13.936C8.0433 14.2434 7.58162 14.2434 7.29686 13.936L4.16663 10.5566" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
            </svg>
        </div>
        CHANGE THIS TO YOUR BENEFIT
    </li>
    <li>
        <div>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.8333 5.83325L8.32806 13.936C8.0433 14.2434 7.58162 14.2434 7.29686 13.936L4.16663 10.5566" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
            </svg>
        </div>
        CHANGE THIS TO YOUR BENEFIT
    </li>
    <li>
        <div>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.8333 5.83325L8.32806 13.936C8.0433 14.2434 7.58162 14.2434 7.29686 13.936L4.16663 10.5566" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
            </svg>
        </div>
        CHANGE THIS TO YOUR BENEFIT
    </li>
    <li>
        <div>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.8333 5.83325L8.32806 13.936C8.0433 14.2434 7.58162 14.2434 7.29686 13.936L4.16663 10.5566" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
            </svg>
        </div>
        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>
    <div>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M15.8333 5.83325L8.32806 13.936C8.0433 14.2434 7.58162 14.2434 7.29686 13.936L4.16663 10.5566" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
        </svg>
    </div>
    CHANGE THIS TO YOUR BENEFIT
</li>

To change image:

• Access the Settings > Design & branding from the admin menu.

• Click Customize

• Change Publication cover.

• Click Save

---

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, Divided Slider, Divided Slider with Pagination), the maximum number of posts that can be displayed is capped at 4 for Divided Slider with Pagination, 5 for Fullscreen, Big and Divided 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.

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