Essential Blocks WordPress plugin is one of the best website and landing page builder plugins out there, offering a wide range of new features and components that make it suitable for designing different types of websites in different fields.
In this article, we will introduce you to the plugin and the most important components it provides. As a practical example, we will take you on a journey that explains how to use it to design our services page for a company that provides WordPress services.
What is Essential Blocks add-on?
Essential Blocks is a WordPress plugin that is a powerful page builder that works within the core WordPress Gutenberg editor , providing more than 50 different new blocks that cover most sections of the site, such as the call to action section, element cards, buttons, titles, and image galleries, through which it helps to design and customize various pages of the site and landing pages .
The plugin is easy to use, highly secure, and compatible with search engines. It does not affect the performance of the site, and allows the construction of mobile-friendly pages. It also has more than 250 ready-made designs (templates) for various sites that can be imported and modified to facilitate and speed up the process of building and customizing pages.
The plugin offers a free version and paid versions, which differ from each other in the following:
- The free version includes about 120 ready-made designs for the entire site, while the paid version includes all available designs (about 250).
- Paid versions allow access to a larger library of ready-made designs for a limited period of time that varies depending on the license you purchased.
- About 9 components are available in paid versions only, including Advanced Search, Offcanvas, Testimonial Slider, and Stacked Cards.
The free version is enough to create attractive and satisfying website pages.
How to set up Essential Blocks plugin
Essential Blocks is a WordPress page builder, so in order to use it you must have a ready-made website as we explained in the article ( How to start and prepare to create a WordPress website using website building tools ).
You can directly install the Essential Blocks plugin on your WordPress by going to the Install a New Plugin section, then entering the plugin name (Essential Blocks) in the search field, clicking on its Install Now button, then activating it by clicking on the Activate button .
A new tab will appear in the sidebar of the WordPress dashboard with the same name as the plugin ( Essential Blocks ), and through this tab you can perform a set of different actions related to the plugin, such as enabling or disabling the components that the plugin adds to the components editor, as well as activating the plugin’s integration with external services such as Google Maps and Instagram, in addition to accessing a library of ready-made templates through the Templately plugin .
In order to use the plugin components in designing the site pages, you can open any page or article in the Gutenberg editor, where you can easily insert and customize the plugin components in the same way as inserting and customizing the default editor components, that is, by dragging the component from the components section to the editing area and then adjusting the settings according to what suits you.
Components added by the add-on
The Essential Blocks plugin provides more than 50 components that help design and build various website pages, as well as its templates, in addition to the header and footer. The most important of these components are:
- Row : This component can be used to layout and organize the content that will be added to the page, as it acts as a container for Column elements that divide the page horizontally to add other components next to each other instead of below each other. Row allows you to divide any part of the page into between 1 and 6 columns as you wish, and all columns do not have to be equal width.
- Call to Action : A component that includes several elements that help to easily add a call to action section to the page, where you can write a title for the call, a description, and specify the content of the button in addition to the icon. It can be used for any call, whether it is a call to purchase a service, fill out a survey, or even book a table in a restaurant, etc.
- Button : Used to add a button to the page. It is similar to the default button component in the component editor, but has more advanced customization options, such as the ability to add an icon next to the text, specify a custom color, and a specific effect when hovering the mouse pointer.
- Advanced Heading : A component for adding advanced and professional titles to website pages. It is distinguished from the default title component in the Gutenberg editor by many additional customization options, such as the ability to display a subtitle below it, add an effect, and change the color when hovering the mouse pointer.
- Pricing Table : It is used to add pricing tables and details of the different plans you provide in your services and products, such as the hosting plans you sell, and the features of the different plans for digital products. It contains 4 ready-made templates that you can start from one of them, and provides excellent customization options that enable you to display the table in the design you want.
- Post Grid : Dedicated to displaying articles and site pages with a specific layout. There are 8 ready-made layouts, 5 of which are free. You can start with one of them and modify it. You can also customize the component from the beginning as you wish. You can customize the number of articles displayed on each page, as well as filter them by author, categories, and tags, as well as customize the elements displayed from each article, and more.
- Popup : This component is used to design pop-up windows that appear when a button is clicked, when the page loads, when exiting, etc. The content and appearance of the window can be customized exactly as you want, as you can add components to it, and you can also control its size, location, colors, etc.
- Google Maps : Allows you to add a map to the page based on the map service provided by Google. The map can be customized, such as specifying the geographic location that will be displayed, as well as the type of map (roads – satellite – etc.), and its dimensions, but this component requires a special API key for Google Maps, as you must enter your key within the extension to be able to use it.
- Icon Picker : This component is for adding an icon anywhere you want on the page, where you can choose the icon you want from the library provided by the plugin itself.
The plugin also provides many other components, such as Accordion to display FAQs in an attractive way, Countdown to display a countdown timer , Flipbox to display alternating content when hovering the mouse in a beautiful way, Advanced Tabs to create professional and beautiful tabs, Slider to build a custom slider based on images, text content and buttons, Form to display forms, and others.
Create our services page using Essential Blocks plugin
As a practical example of reviewing, testing and explaining the plugin, we will build a (Our Services) page for a company that provides WordPress services. The page will consist of 4 sections in addition to the site header and footer, where the sections will include the following content:
- Beautifully designed call to action section.
- A section that reviews the services provided by the company and a short description of each service with a picture.
- A section explaining the most important features of dealing with the company.
- A section containing frequently asked questions about the company and services.
To start creating the page, click on the ( Add New Page ) option under the ( Pages ) tab, where the components editor will open. Then fill in the title field with a title that expresses the page, such as ( Our Services ).
Here we will focus on explaining the components and options of the Essential Blocks tool for building pages, and you are supposed to know how to deal with the Gutenberg editor (the block editor) to be able to implement this explanation, so if you do not know how to use the editor, you can review the article ( Explanation of the Gutenburg block editor to add articles and pages ) first.
Step (1): Set default colors and default component options
This step is optional and not necessary, but it makes it easier for you to work on designing this page, as well as future pages (i.e. those you will create in the future), as you can set default colors to be applied to the Essential Blocks components when they are added directly to the page, and you can also specify the default settings for any of the plugin components, so when you add a new component to the page, the default settings you specified will be applied.
The most important default colors that you can adjust include text colors, button colors, title colors, link colors, and element background color. In addition, you can specify 3 colors for quick access when modifying any color on the site, and to be applied to some components to suit the visual identity. As for adjusting the default settings for the different components, you can adjust the options for all components provided by the plugin.
To set the default colors and default component options, simply click on the ( EB ) icon in the top bar of the editor, where you will see a list of colors that you can set, as well as a list of components that the plugin includes. You can click on any color or component to go to a pop-up window that allows you to set the color or options.
Note: The component defaults popup was not displaying properly, part of it was off-screen, so we changed the left property of the div element that contains the window to (35%) in the browser’s inspector to fix the issue.
Step (2): Design the call to action section
To design this part, we will use the Row component with one column to contain it, where we will add the Row component, then we will add the Advanced Heading component and below it the Call to Action component .
Next, we will make the Row component background a dark blue color that matches the visual identity we want, through the component settings —> Advanced tab —> Background section —> Background Color setting. We will also make sure to remove the backgrounds of all other components that we added through the same setting, or we will make their background color the same as the Row background color.
We will also remove the icon from the Call to Action component because we do not need it, by deactivating the ( Show Icon ) option under the General tab in the component settings, then we will adjust the fonts and their colors for all components, and this is done through the Style tab for each component, and we will also adjust the button colors from the Style tab as well, and after that we will replace the default content with the content we want.
Now we will show the title (Professional WordPress Services) with a distinctive look to attract attention, so we will select it, then we will set its background color to orange in the same way explained previously for the Row component, and after that we will set the ( Border Radius ) property that makes the edges of the element round to 50 pixels.
We can also add at the bottom 3 buttons that the visitor can click to go to a specific section on the page , so we will add a Row with 3 columns, and in the middle column we will add a Row with 3 columns as well, then we will add a Button component in each of the 3 small columns, and adjust their appearance.
Then we can add a small section that includes a set of data that attracts the customer to request a service, such as the number of sites the company has worked on, the number of customers, etc.
So we will add a Row component with 4 columns, and in each column we will put an icon ( Icon Picker ), and below it a Number Counter component that shows the number of customers or sites or the like as we need.
We will set the Row background color to suit our site, then we will choose the appropriate icons through the ( Select Icon ) setting, and then we will modify the content of the Number Counter components and their colors from the component settings (the colors are modified from the Style tab), where we put the number that will appear in the ( Ending Number ) field, and we will change the texts by removing them and writing what we want (this can be done within the editor itself).
Step (3): Create the Services Section
Now we can create the services section that the company offers. There are many ways to display the services, but we will display them in two rows, each containing 3 services, and each service will have an expressive image, a title, and a short description.
First, we start by adding a Row with one column for the entire section, and we modify its background color, then we add a title within it using the Advanced Heading component (for example, Professional WordPress Services), then we add two Row components below each other so that each component has 3 columns, thus producing 6 boxes, and in one of these boxes we place the Infobox component that includes an icon or image (you choose) in addition to a title, description, and button.
We modify the component through its settings to show an image and not an icon , hide the button (from the General tab where we disable the Show button switch ), adjust the fonts and colors, and then copy the component to the remaining six squares.
Then we add appropriate images, in addition to the titles and descriptions of the services. It is important to ensure that the images of the services have the same dimensions, i.e. it is important that the width of the images is the same for all images, and the height of the images must also be the same for all images.
Step (4): Build a section on the advantages of dealing with the company
In this section we will add a set of features that the customer will notice when dealing with the company. We will add the features in the form of two columns, and each feature will have a title, icon, and explanatory description.
So we will insert a single-column Row to contain the section and set its background color, then we will add a title for the section (Why buy our services?), then we will insert a Row component with two columns, and in each column we will put a Feature List component , which is a component dedicated to displaying feature lists provided by the Essential Blocks plugin. The shapes of the icons can be modified by setting the Icon Shape , and here we have chosen ( Rhombus ).
We want to add 8 features, four in each Feature List, instead of the default number of 3, so we will add an additional feature in each component, by clicking on the ( Add Feature ) button in the component settings on the left side of the screen, and then we will change the direction of the Feature List components to be compatible with the Arabic language, as we will display the icons on the right side by modifying the ( Icon Position ) property.
You can modify the background colors of the icons as well as the colors of the titles and descriptions to match the visual identity of the site through the Style tab in the component settings. Then you can select the appropriate icons and add feature titles and descriptions through the top Content Settings section . When you click on an element, you will be able to add content and choose the appropriate icon through the Select Icon setting .
Step (5): Add FAQ
In this section we will add the FAQ using the Accordion component, a custom component provided by the Essential Blocks plugin to display FAQs, where the question is visible, and when clicked on, the answer appears through a beautiful sliding motion.
To add questions, we inserted a Row component with one column to contain the section, then we added a title and a Row component with two columns, and in each column we added an Accordion component , and we also inserted a new item by clicking on the ( Add Accordion Item ) button so that the number of items becomes 4 in each component because we will add 8 questions.
Within the Accordion component settings in the Style tab under the Icon section, we changed the Tab Icon icon that represents an arrow to an arrow pointing in the other direction to be compatible with the Arabic language, and we also changed the Icon Position property to Left , so that the icon appears on the right side instead of the left (this is a simple error resulting from compatibility issues with the Arabic language).
Next, in the Tab section of the Style tab, we set the Title Align property to Right so that the writing in the questions is aligned to the right to be compatible with Arabic. We also set the Align property to Right in the Content section so that the writing in the answers is aligned to the right, and we added the questions and answers.
Thus, we have finished designing the (Our Services) page, and we can review the design and improve it further to ensure its quality, as you can place dividers between the sections using the Shape Divider component, and we can also add some movements to the elements to add life to the design, through the settings available in the Animation section located under the (Advanced) tab in the settings of all components. Notice how the page looks after finishing its design.
Thus, we conclude our review of the Essential Blocks component editor-compatible page builder and explain how to use it through a practical example of designing our services page. In conclusion, we would like to point out the necessity of not overusing and complicating the design with animations. The design should also be made as simple and clear as possible while maintaining attractiveness and beauty, in order to attract the attention of visitors while maintaining high performance and a satisfactory user experience.
