The Gridbox Design System. Chapter 4: 160 Brand New Page Blocks

Brand New Page Blocks

It’s time to introduce you the final, 4th chapter of the Gridbox Design System update series. We have prepared for you an incredible update. Ladies and Gentlemen, Joomla website builder Gridbox 2.4.3 has received a huge package of 160 brand new page blocks.

160 Brand New Page Blocks - Joomla Website Builder Gridbox

During the last three months we analyzed hundreds of sites and landing pages, highlighted the most frequently encountered page blocks, as a result, we have created 160 Page Blocks across 14 Categories.

Page Blocks are an indispensable assistant, which should be used in a website building process. Using page blocks, you can greatly speed up the process of prototyping and page building.

In today's blog post, we want to present you the results of our work, as well as to share our experiences, explain you how to use Page Blocks, and in what order they must be placed to create an effective web pages.

This post will be useful to everyone. After reading the post you will look at sites in a completely different way and will understand the anatomy of an effective web pages.

Anatomy of An Effective Webpage

As a result of our research, we conclude that an effective page should consist of 6 main sections.

The Anatomy of An Effective Webpage - Joomla Website Builder Gridbox

Also, we want to note, that a scheme is not an axiom, the order of sections and categories can vary depending on a type of your site.

Intro Page Blocks

Based on the above 6 sections and different types of websites, we identified 14 categories. Next, we will describe in details each section and category, and also present the created page blocks.

The goal of the intro blocks is present your business offer to the visitor.

Cover Blocks

The first thing that a user sees when visits your site is the Cover screen. The purpose of the "Cover" screen is to show the main website offer to your visitor and interest him to stay on the site. The main website offer should be short, clear and pass the essence of your business offer. Available “Cover” blocks you can see below:

Cover page blocks - Joomla website builder Gridbox

About Blocks

The purpose of the "About Us" section is to provide information about your company and your services. Usually, the "About Us" section includes a small description consisting of a few sentences, in which can be included additional images.

There is no reason to post all information about your company in the "About Us" section. We recommend to add a "Read More" button with a link to a page "About Us" where you can fully tell about your company, your team, your rewards, etc. Available “About Us” blocks you can see below:

About us page blocks - Joomla website builder Gridbox


In the "Services" section, you need clearly formulate and show the services that provides by your company. Services should be described by short sentences. If necessary, you can add a "Read More" button with a link to an individual page with the service where you can provide more detailed information about a particular service. Available "Services" blocks you can see below:

Services page blocks - Joomla website builder Gridbox

Details Page Blocks

In the section “Details”, you need to show your proposal in more detail.


The "Description" blocks allow to describe your offer in more details. Most of the created blocks are combined with pictures, so you can create a more interesting description of your service or product. Available “Description” blocks you can see below:

Description page blocks - Joomla website builder Gridbox


Usually, the steps are used to explain how a particular service or product works. 

Steps page blocks - Joomla website builder Gridbox


If you are building a website or a landing page for a conference or a master class, the "Schedule" blocks will be indispensable helpers with which you can add a schedule to the page.

Schedule page blocks - Joomla website builder Gridbox

Benefits Page Blocks

In the "Benefits" section, you should answer the next questions:

  • Why is your product or service better than your competitor's product or services?
  • What makes your product interesting and unique?
  • Why should a visitor choose your product or services?


We created 18 different variations of "Features" with which you can show all the best and unique aspects of your product or service. 

Features page blocks - Joomla website builder Gridbox

Pricing Page Blocks

For convenience, we decided to divide pricing blocks into 2 categories: pricing table and pricing list.

Pricing Table

We created 18 different variations of "Features" with which you can show all the best and unique aspects of your product or service. 

Pricing table page blocks - Joomla website builder Gridbox

Pricing List

The Pricing List is a perfect choice for restaurants, beauty salons, barbershops, etc. With the help of "Pricing List", you can display the price of services in a very convenient format.

Pricing list page blocks - Joomla website builder Gridbox

Customer Trust

The presence of "Trust" blocks has an important role in decision making. But how to get customer trust if he visited a page for the first time? With help of "Trust" blocks!


Displaying feedback from real users is the most popular way of getting customer trust. We would like to pay your attention to a very important thing. Maybe you just started your business and you do not have reviews yet, and it's absolutely normal! It's not normal to use fake reviews.

Testimonials page blocks - Joomla website builder Gridbox


The team is another great tool to get trust. Displaying a photo of your team members with links to social networks can significantly grow the trust.

Team page blocks - Joomla website builder Gridbox


Numerals always accent the attention of visitors. Usually, counters are used to display the company's attainments, for example: "We work in 20 countries," "More than 1,000 downloads", "1,000 successfully completed projects," etc.

Counters page blocks - Joomla website builder Gridbox


FAQ section is an integral part of a good product presentation for most websites. The section with frequently asked questions helps not only to save time but also build relationships with customers. Customers who can see your attempts to be transparent about addressing queries will consider your business trustworthy.

FAQ page blocks - Joomla website builder Gridbox


The purpose of any site is to stimulate some actions - order a service, fill out a questionnaire, leave an E-mail, etc. Generally, the blocks of conversion are placed at the bottom of the site and have an expressed design to attract attention.

Call to Action

Available “Call To Action” blocks you can see below:

Call to action page blocks - Joomla website builder Gridbox

Key Features of New Page Blocks

Wide Range

As we noted earlier, we analyzed a large number of sites and realize the most used blocks in a modern web design. Multipurpose solution for different types of sites. Gridbox Page Blocks are ready for a new challenge!

Adaptive Styles

All Page Blocks are created with Gridbox Color Variables and Typography Inheritance System. Therefore after adding a Page Block to the page it perfectly adapted to the style of your site and inherit the existing website color palette and fonts.

No Pre-Installed Pictures

Yes, that's right, the absence of pre-installed images is an advantage! The fact is that absolutely every image has its own color palette, which ultimately leads to a visual incompatibility of the existing site design and added block. Therefore, in order to achieve maximum adaptability, in a new page blocks, we used blank images.


Page blocks have a minimum number of pre-installed styles. Therefore, you will be very easy and quick to customize the style of the page block to fit your website design. Also, don't forget about the possibility of using Gridbox Presets, with which the style of elements can be changed to fit your website design in a matter of seconds.


New page blocks are perfectly adapted for mobile devices, therefore you don't need to spend your time on adapting the page block for each mobile device resolution, everything is already done!

Installing Page Blocks

The process of installing page blocks is the same as in the previous versions. You need to open the page blocks panel in the editor, click on any thumbnail and enter your Username и Password.

Page blocks installation - Joomla website builder Gridbox

After successful authentication, page blocks will begin downloading and installing. Note, Page Blocks you need to install only once!

In the Joomla website builder Gridbox 2.4.3 we changed the storage of the page blocks thumbnails. Now all thumbnails are uploaded to your site, as a result, it's a plus to editor speed optimization.

New Demo Editor

During the last 4 updates, the Gridbox Items have been received new default styles. So we completely updated the demo editor, and of course, there you can try new page blocks.

The brand new demo editor - Joomla website builder Gridbox


After reading this post, you should have a clear understanding how to use Page Blocks and in what order they must be placed. With this knowledge, you will be able to easily create stunning web pages on the basis of the available 160 page blocks.

The Brand new page blocks - it’s a brand new experience. Tight interaction of theme settings with page blocks create the integrity of the theming in Gridbox.

Thus, we can say that the task to create a single design system in the Joomla Website Builder Gridbox completed successfully! Website Typography, Color Palette, Presets and today's Brand New Page Blocks are united in one chain and are interconnected with each other creating a single integrated system which is called Gridbox Design System.

New updates, new plugins, new features await you in the near future, 'cause we continue to work hard on improving the Gridbox! By the way, time to start building new awesome themes for the Gridbox! New themes will be based on the Gridbox Design System. That's mean, configuring theme to fit your brand colors and style will be much faster and easier!

If you have some questions, suggestions or you want to share your experiences in developing web pages, feel free to write in the comments below. We will be happy to read your feedback!


2.4.3 — 23.05.2018

  • 160 Brand New Page Blocks
  • Standard Joomla Update System
  • Issue with plugin Tabs inside Mega Menu
  • Issue with cursor pointer in Gridbox Plugin "Image"

Leave a comment

Share with your friends

Newsroom on your favourite platforms