Step-by-step tutorial on creating product feature blocks with Bricks Builder, featuring different block styles.

Creating Product Feature Blocks with Bricks Builder

Facebook
Twitter
LinkedIn

Table of Contents

Introduction

In today’s tutorial, we’re diving into the process of designing product feature boxes using Bricks Builder for your website. These boxes are commonly seen on review sites, where they provide a visual summary or comparison of various products. Specifically, we’ll be creating a page with several product comparison boxes to compare WordPress Page Builders. Let’s get started!

Understanding Bricks Builder

What is Bricks Builder?

Bricks Builder is a versatile tool that simplifies the process of creating complex layouts and feature-rich content on websites. It operates on a drag-and-drop interface, making it accessible for users without deep coding knowledge.

Features of Bricks Builder

Bricks Builder offers extensive customization options, allowing users to personalize every aspect of their website’s design effortlessly. It supports responsive design principles, ensuring your content looks great on all devices.

Step-by-Step Guide to Designing Product Feature Blocks

Step 1: Accessing the Page

First things first, let’s navigate to the page where you’ll be adding your product display. This can be done from your WordPress dashboard by going to Pages.

Step 2: Creating or Selecting a Page

Once you’re on the Pages interface, you have the option to either create a new page or select an existing one. This flexibility allows you to integrate the product grid into your current layout or start from scratch.

Step 3: Adding a Section

To begin, add a new section to your page. This section will serve as the container for your product grid.

Step 4: Adjusting the Layout for Padding

Next, you’ll need to adjust the layout to add 20 pixels of padding on each side of the container. This padding ensures that your content isn’t cramped and has some breathing room.

Step 5: Configuring the Container

Click on the container to start adding elements inside it. The container is your primary workspace for the product grid.

Step 6: Adding Blocks within the Container

Within the container, add four blocks. These blocks will hold the following elements: Logo, List, Rating, and Price. This structure helps keep your content organized and easy to manage.

Step 7: Styling the Container

Return to the container settings, go to the “Style” tab, and then to “Layout”. Here, you’ll add another 20 pixels of padding to maintain consistent spacing.

Step 8: Setting Up the Grid Display

Navigate to the “Content” tab, click “Display,” and select “Grid.” This setting transforms your container into a grid layout, making it easier to align your elements neatly.

Understanding the Grid Template Columns

In the Grid Template Columns section, add the following code:

CSS / Copy code:

				
					repeat(4, 1fr)
				
			

This CSS function creates a grid with four equal columns, ensuring each element has equal space.

Step 9: Adding Elements to Each Column

Now, let’s add the specific elements to each column of the grid.

First Column: Logo

Add the “Logo” element to the first column. This is where your product’s logo will be displayed.

Second Column: Icon List

In the second column, add an “Icon List” element. This can be used to showcase key features or benefits of the product.

Third Column: Star Rating

Add a “Star Rating” element to the third column. Ratings help build trust and provide quick insights into the product’s quality.

Fourth Column: Price

In the fourth column, add a Basic Text or Heading element to display the price. For example:

HTML / Copy code:

				
					$29<span style="font-size: 1.5rem; font-weight: normal"> / mo</span>
				
			

This format clearly shows the pricing details.

Step: 10 Aligning Elements

Return to the first column to center-align the logo. Do the same for the elements in the second, third, and fourth columns to ensure uniform alignment.

Step 11: Customizing the Price Display

Change the Basic Text element to a Heading element for the price. This enhances visibility and emphasis on the pricing.

Step 12: Adding a Background Color

Add a background color to the section to make your product grid stand out. This helps in visually separating the product grid from other content on the page.

Step 13: Duplicating the Section for Other Products

If you have multiple products to display, duplicate the section. This keeps the layout consistent across different products.

Step 14: Adding and Customizing Buttons

Below the pricing, add a button element. Customize the button settings to fit your design preferences:

Set the button style to none.

Change the size to small.

Update the text to “Visit Website.”

Step 15: Setting Links for Buttons

For each product, add a link to the button:

Go to the button settings in the left sidebar.

Select the link type.

Choose “External URL,” and paste the link.

Repeat this for each product’s button.

Step 16: Saving and Previewing

Save your work as a draft. This allows you to preview the layout before making it live.

Ensuring Mobile Responsiveness

Check how the layout looks on both desktop and mobile devices to ensure it’s mobile-responsive. Adjust and modify the mobile version if necessary to provide a seamless experience across all devices.

Best Practices for Optimizing Product Feature Blocks

SEO Optimization Tips

Optimize your feature blocks by using relevant keywords in headings and descriptions. Ensure your content is structured logically with appropriate HTML tags.

Loading Speed Considerations

Avoid using heavy graphics or animations that could slow down page loading times. Opt for optimized images and CSS styles to enhance performance.

Conclusion

By following these steps, you’ll create an attractive, functional product display grid that enhances user experience and potentially increases conversions. The key is to ensure proper padding, alignment, and responsive design.

Check out our video tutorial for an easy way to learn!

Share on Facebook
Tweet this article
Share on LinkedIn
Email this article

More to explorer