Blocksy Blog Archive Page Complete Customization Guide (with Header Area, Card Layout, Pagination Animation, etc.)

Blocksy headlineBlog Archive PageA wealth of customization options are provided, including a top header area, article card layout, pagination styles, scrolling animations, and more. Whether you are a novice website builder or a developer with design needs, you can find the right presentation from these settings.

This article will take you step-by-step through the blog archive page setup options offered by Blocksy to help you create a more aesthetically pleasing and functional blog homepage.

I. Entering the Blocksy Customizer

• After logging in, click the "Customizer" button at the top of the page.

• It is recommended to switch to the "Blog Archive Page" in the preview window to view the changes in real time.

Second, set the blog page title area (Hero Section)

Go to the Blog Posts area to customize the overall style of your blog posts.

1. Enabling/disabling the title area

A switch can be used to control whether the title area is displayed or not.

2. Layout types

• Type 1: Conventional narrow layout with neat and centralized information.

• Type 2: Full-width layout with background images, suitable for websites with outstanding visual style.

3. Display elements

The following can be turned on or off:

• Title
• summaries(Excerpt)
• Breadcrumbs Navigation

It supports to show or hide individually, and also supports font, alignment, background image and other style settings.

4. Alignment settings

Horizontal and vertical position of the content in the title area can be adjusted.

5. Background map settings

• Customized images can be uploaded as backgrounds
• Support setting image size and position

• Enable Parallax to enhance visual dynamics.
• Add a color overlay or turn off the background image completely to a solid color style.

6. Minimum height setting

Height of the header area can be set manually to fit different styles.

Third, set the blog card layout (Blog Cards)

Go to the Blog Structure area and customize theblog (loanword)The presentation of the article.

1. Choose a card layout style

Blocksy The following five layouts are offered:

• Simple: wide cards arranged vertically

• Classic: traditional blog style with graphics and text

• Grid: Grid Card Display

• Gutenbergcopy WordPress Default Style

• Cover: card background using featured image

There are also sub-styles under each layout (e.g. Simple, Boxed, Cover under Grid).

2. Card element control

Feel free to choose to show or hide the following:

• caption
• Featured Image
• summaries
• Read more button
• Posting information (e.g., time, author, category)

Support drag-and-drop sorting, custom arrangement structure.

3. Styles and spacing

Settable:

• Spacing between cards (Gap)
• Inside Margins per Card (Padding)
• Content alignment (left/center/right)

IV. Pagination and page element settings

1. Sidebar control

Left side and right side can be enabled.

2. Paging style options

Blocksy Four types of paging are supported:

• Standard pagination: with page numbers and previous/next buttons

• Front and back buttons only: no page numbers, just toggles

• Load More: click to load more articles

• Infinite Scroll: automatically loads the next page of content without refreshing the page

For blog sites that want to improve the efficiency of their content viewing.

V. Scrolling animation: the card reveals its effect

Blocksy Provide "Cards Reveal Effect" option, when enabled, it can realize the dynamic emergence of article cards in the scrolling process, and improve the overall sense of dynamism and modernity.

VI. Style and design customization (Design Tab)

Each area has a separate style panel included:

• Font settings: title, description, buttons, etc.
• Color control: text color, background color, overlay color
• Border shading: enhances three-dimensionality
• Gradients and patterns: for visually rich background areas

VII. Summary

Blocksy Provides multi-dimensional and modular customization options for blog archive pages. From visual design to structural layout, from pagination methods to animated interactions, all of which can be quickly tweaked with a graphical interface, these options help users create blog pages that are on-brand, smooth to read and visually appealing. To further enhance the experience, you can also explore Blocksy Pro The template replacement function for higher freedom of content control.

Recent Updates

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off