If you are following my WordPress tutorials to build your website from scratch, then you should know that from this point on, we will be using more and more of the features offered in the GeneratePress WordPress theme we previously installed. As well as the website builder plugin we installed, i.e., GenerateBlocks.
Before we move on to actually building the site, therefore, it will be good to get a basic understanding of these tools.
This tutorial is not obligatory. If you want to just get going with your website set-up, you can skip to the next section, and follow the step-by-step guides I will give you in the next tutorials.
Having said this, I do encourage you to spend a few minutes to read this part so that you can understand better what we’re doing in the website building process and why/when we use certain features of the tools.
Understanding these will also help you tailor your website in your own unique way if you wish to.
What are Elements in GeneratePress
GeneratePress Elements are features that you can build in one place, and then apply across your website, or to specific Pages or Posts.
For example, you can use elements to
- add a Call-to-Action box that is automatically featured in all Posts within a specific category,
- make a footer that you apply to Pages but not Posts,
- build a header for all Pages.
- And much more
The four GeneratePress elements offered are:
- Header
- Hook
- Layout
- Block
Here is the official GeneratePress site Elements Overview, and below is an explainer video from their YouTube channel.
When do you use each element in your WordPress site?
The 4 Elements offered in GeneratePress have different use scenarios. Here’s a brief description of each Element.
Header
The Header element is used to add a Header (aka Hero Header) to any Post in a specific category, and any or all Pages.
You can automatically insert the post title, post author and taxonomy into the header for each individual Post. You can also make each Post’s featured image display as a background image for that specific post’s header
Hook
Hook element is used torun a script, execute PHP or display the content of a shortcode outside of the Post content area.
Layout
Layout element is used to show or hide different page elements on a Post by Post basis.
Example; display sidebars on most blog Posts, but not on a specific Post. Show or hide the sidebar or footer on certain Pages. Even content width and certain specific page elements can be displayed differently from one Page to the next.
Block
The Block element is the most important and useful element.
It integrates the GenerateBlocks plugin with your GeneratePress theme and allows you to build a tailored and unique layout and hook that layout into your site.
For instance, you could build a call-to-action box and then hook that CTA below the content area on all Posts in a specific category. You can set the GeneratePress Block Elements to appear anywhere on your site using hooks.
Here’s a good article that explains more about GeneratePress Elements.
Creating a Template Element in GeneratePress
The idea behind creating template Elements, is that these will be features that will be replicated across our website on various Posts and Pages we publish.
Therefore we won’t have to create these features from scratch every time we need to use them. Instead we create one template for each feature, and these are automatically inserted in every Post or Page where we decide we want them through the ‘Display Rules‘ settings.
A Post or Page can have 3, 4 or 5 different Elements that are featured in it.
Reason for the different Elements is that for each Element we create we need to choose where this will be shown on our website.
In more technical terms we choose where each Element will be hooked. For example, before the content, after the content, on the side bar, etc.
All the Elements we create are saved in a separate section of our WP dashboard, just like our Posts and Pages are saved in a different section and listed there.
The elements we create will be listed under Appearance > Elements.
So, for the sake of example, if you are browsing through your website and notice something you need to adjust on a post, you have to identify if the adjustment is needed for the Element or within the post content itself.
If it’s on the Element then you need to go in the elements section and edit that. If it’s in the content of the post then you have to go to the Posts section and edit there.
GeneratePress Display Rules
What the 4 GeneratePress Elements have in common is the Display Rules.
Display Rules are the GeneratePress settings which allow you to control and define beforehand where a particular element you create will show on your website.
For instance, you could create a Header element, then via the Display Rules Location tab choose ‘All Posts’. Which means that the Header you created is shown on all the Posts you publish, but not on any pages.
What is GenerateBlocks?
GenerateBlocks is a WYSIWYG (What You See Is What You Get) editor that allows non-techies to build great looking layouts for their WP sites without needing code.
What makes GenerateBlocks different from other page builders is that it integrates its blocks into the regular WordPress interface. So much so, that you barely realize when you’re using the GenerateBlocks blocks and when you’re using the regular WordPress blocks.
Hint: GenerateBlocks blocks are colored blue to distinguish them. This is important because they offer much more customization options than do the default WordPress blocks.
The WordPress default Gutenberg Editor is already set as a very basic page builder, that uses different blocks available from the left-side column. With GenerateBlocks however you get 4 additional blocks that are added on the left-side column of the Gutenberg Editor.
These four blocks can give you much more flexibility and allow you to create amazing pages and posts on your website.
You will know the difference between the default WP blocks and the 4 GenerateBlocks because the latter’s icons are colored blue.
We like to use the GeneratePress theme, combined with GenerateBlocks, because they integrate seamlessly. Having said this, GenerateBlocks works well with any WordPress theme, so feel free to use any Theme you want, as it will work just fine.
The Free Version Of GenerateBlocks offers 4 blocks (container, grid block, headline block, button) which help add a lot of customization options.
Here’s a short description of the four blocks.
Container Block
The container block is a section of the page where you can place or add elements from the GenerateBlocks suite, or from any other plugin that works with Gutenberg blocks.
For example, inside the GenerateBlocks container, you can add Thrive blocks, from Thrive Architect Plugin.
The container block also allows you to save any individual containers you create as reusable blocks.
Grid Block
The grid block is an upgraded container block that lets you create more complex layouts.
When you insert a grid block, you’ll choose a layout that allows you to work with multiple parallel containers.
Headline Block
This block replaces the Heading block in the default WordPress Gutenberg editor. It doesn’t do much except for adding a few more customization options to your Headlines.
Buttons Block
Use this to create more engaging Call-to-Action (CTA) buttons. With this block you can create different shapes to your buttons, as well as colors, shadows and so on.
GenerateBlocks Customization
For each of the 4 blocks mentioned above you have advanced block options and customization settings.
Get Inspired and Practice with GeneratePress
As we go through the next few tutorials you will start familiarizing yourself with both the elements and the blocks and the many different layouts they will allow you to create.
In order to get used to working with GeneratePress Elements and GenerateBlocks you will need to put in some practice.
I therefore suggest you spend some time creating pages and experimenting with various designs and elements. Anything you create which you don’t like can always be deleted.
The GeneratePress YouTube channel has plenty of examples, where you can follow how they build various pages from scratch.
The more examples you see, the more inspired you’ll get. However, don’t just watch these videos. Try and implement what you see on these videos to your website to get some practice under your belt.
Here’s a list of some good videos where they create pages from scratch:
- https://www.youtube.com/watch?v=gEuMXGHIa08&t=94s
- https://www.youtube.com/watch?v=moyDerusGo4&t=860s
- https://www.youtube.com/watch?v=Pwt26vMFu2Q&t=28s
- https://www.youtube.com/watch?v=-rs0E_rIFtk&t=19s
- https://www.youtube.com/watch?v=fVUekTSF1fg
In the next tutorial we will start using GeneratePress elements and GenerateBlocks to build our first template for our website which will be the Hero Header.
