It's coming!! Sweet deals to make your site prettier. Save the date for the most awaited Friday Nov 19th!!

The Blockstrap Page Builder Blocks and Theme offers a complete solution for building and customizing pages with ease. By installing the required plugin and applying the theme directly, you can create professional layouts quickly without the need for a child theme.

The toolkit comes with ready-to-use template files, including HTML and CSS, which can be imported directly into the editor. With Custom HTML blocks, these templates can be applied seamlessly, transforming your designs into fully functional block widgets in no time.

To make the process even more efficient, the Service Kit is available through the Service Page, providing block-by-block support to review, fix, and optimize your pages. Whether it’s adjusting templates, refining images, or finalizing block layouts, the Service Kit ensures your site looks polished and performs flawlessly.

You can access the full Services Kit here: Services Kit

With essential add-ons and features included, this toolkit streamlines your workflow, saves time, and helps you maintain a professional, visually consistent site effortlessly.

Step 1: Install Required Plugin and Theme

1. Install the Blockstrap Page Builder Blocks plugin.
   
   
2. After that, we will use the Blockstrap Theme directly (without a child theme).
   
   

Step 2: Prepare the Template Files

1. Download the ZIP file provided.
   
2. Extract the ZIP file first.
   
   
3. Inside the extracted folder, you will find CSS and HTML documents.
   
   

Step 3: Create a New Page Design

1. Go to the Editor.
   
   
2. Open Pages Design.
   
   
3. Click the Add Page Design button, enter the page title, and click Create Draft.
   
   

Step 4: Add Custom HTML Block

1. Insert a Custom HTML block in the editor.
   
   
2. Go back to the extracted document folder, right-click the HTML file, and choose Open with Notepad.
   
3. Copy all the HTML code.
   
   
4. Paste the copied HTML code into the Custom HTML block you added earlier.
   
   
5. Click Save and then Restore Editor.
   
6. Check the List View — the HTML will now be transformed into block widgets.
   
   

Step 5: Apply Template to Archive Page

1. Go to the Archive Page.
   
2. Add a Block Loop.
   
3. In the settings, choose Design → Template Type: Page ID, then select the template page you created earlier.
   
4. Click Save. 

Step 6: Adjust Avatar Image Shape

1. You will notice that the GD Author photo still appears square instead of round.
   
   
2. Open the extracted folder again, right-click the CSS file, and choose Open with Notepad.
   
3. Copy all the CSS code.
   
   
4. Go to Admin → Customize → Additional CSS.
   
   
5. Paste the copied CSS code there.
   
6. Click Publish.
   
7. Now, the avatar image will appear rounded.
   
   

Step 7: Apply the Same Process for the Logo

1. You can repeat the same steps used for the avatar to adjust the logo as well.
   
2. This will finalize the appearance of your Archive Item Logo.