員.png "Diamond Member"){kind=avatar}
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.
![Image[1]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507102041910-image.png)
I. Entering the Blocksy Customizer
- After logging in, click the "Customizer" button at the top of the page.
![Image [2]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507102201202-image.png)
- It is recommended to switch to the "Blog Archive Page" in the preview window to view the changes in real time.
![Image [3]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507102237751-image.png)
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.
![Image [4]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507102536861-image.png)
2. Layout types
- Type 1: Conventional narrow layout with neat and centralized information.
![Image [5]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507102646517-image.png)
- Type 2: Full-width layout with background images, suitable for websites with outstanding visual style.
![Image [6]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507102717744-image.png)
3. Display elements
The following can be turned on or off:
- Title
- summaries(Excerpt)
- Breadcrumbs Navigation
![Image [7]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507102826906-image.png)
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.
![Image [8]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507102930788-image.png)
5. Background map settings
- Customized images can be uploaded as backgrounds
- Support setting image size and position
![Image [9]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507103322806-image.png)
- Enable Parallax to enhance visual dynamics.
- Add a color overlay or turn off the background image completely to a solid color style.
![Image [10]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507103241178-image.png)
6. Minimum height setting
Height of the header area can be set manually to fit different styles.
![Image [11]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507103407763-image.png)
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
![Image [12]-Blocksy theme blog archive page setup tutorial: to create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507104352391-image.png)
- Classic: traditional blog style with graphics and text
![Image [13]-Blocksy theme blog archive page setup tutorial: to create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507104418211-image.png)
- Grid: Grid Card Display
![Image [14]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507104450334-image.png)
![Image [15]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507104601214-image.png)
- Cover: card background using featured image
![Image [16]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507104515363-image.png)
There are also sub-styles under each layout (e.g. Simple, Boxed, Cover under Grid).
![Image [17]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507104705799-image.png)
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)
![Image [18]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507104855329-image.png)
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)
![Image [19]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507105034576-image.png)
IV. Pagination and page element settings
1. Sidebar control
Left side and right side can be enabled.
![Image [20]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507105208837-image.png)
2. Paging style options
Blocksy Four types of paging are supported:
- Standard pagination: with page numbers and previous/next buttons
![Image [21]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507105250868-image.png)
- Front and back buttons only: no page numbers, just toggles
![Image [22]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507105329463-image.png)
- Load More: click to load more articles
![Image [23]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507105342548-image.png)
- 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.
![Image [24]-Blocksy theme blog archive page setup tutorial: create a professional article list with scrolling display effect](http://gqxi.cn/wp-content/uploads/2025/05/20250507105549730-image.png)
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
Link to this article:http://gqxi.cn/en/53064The article is copyrighted and must be reproduced with attribution.
簡體中文 
English 
日本語 
Fran?ais 
Espa?ol 
No comments