Creating a good link page in WordPress is never been easy and people always end up using some third party page builders such as Elementor or Bever, but after the release of Gutenberg Block Editor things are changing and now you can design good looking WordPress pages using Block Editor without using any third-party plugin. So let’s know about it.
In this article, we are going to build a WordPress landing page from start to finish with the help of only Gutenberg Block Editor nothing else. We will be using some advanced Gutenberg blocks such as cover, column, and so on and we will also take a look at patterns. If you are interested in learning how to add posts using Gutenberg Block Editor you can check our article 0n this topic.
What is Gutenberg Block Editor?
If you are still wondering about Gutenberg Block Editor, the Block Editor was introduced back in 2018 and since then it is a default editor of WordPress and just like most of us we have installed the Classic Editor plugin and completely forgot about Gutenberg but we can’t forget it for so long.
If you are still using Classic Editor, do know that classic editor is going away soon and you have to use a new editor and future updates of WordPress may break your website content. Wanna read more about why you should switch to Gutenberg Editor check out this article.
How to Make a Page?
Now let’s see how we can make a page using Gutenberg, but if you haven’t used Gutenberg before I highly recommend you to check this Block Editor Guide to understand how you use it. We are not focusing on basic how to add blocks and stuff how to mix merge multiple blocks and make a fairly good landing page.
1. Add New Page
Gutenberg has changed the editor but the dashboard is still the same and to add the page navigate to Pages>Add New
Now you should be seeing an almost blank white page as shown in the image above. This is how Block Editor Looks. Based on your theme this editor can look a bit different but overall it will stay the same.
2. Add Title
First, let’s add a title for our page, you can add a title for the page at the top where you can see “Add title” place holder text is written as marked in the above image too.
Since we are making a landing page I’ll name it Landing Page.
3. Create a Hero Section
First, we will create a top Hero section for our page which looks like the image shown above, we will have a cyan background, a heading, and a subheading with an action button and an image.
To make this cover we will first add a cover to our page and we will select cyan background for it.
Then we will set cover alignment to full width to cover the complete width of a page.
After that, we will delete the cover title (You can use Alt+Shift+Z to delete content).
Now let’s select image and text blocks to add image and action buttons and heading side by side.
Click on show media to right to move the image to the right and then upload or select an image from the library for it.
Now for the right section first change the paragraph into a heading and make heading an h1 heading and add your heading. Change the color of the heading as per your choice from the right sidebar. You can access the styling option from the right sidebar if you can’t see the sidebar click on the little gear icon at the top right to see it.
After that click on the plus icon and add a paragraph at the bottom of the heading. Also, change its color and font according to your preference from the sidebar.
After the paragraph, add an action button and link it to any page you want, I am changing its color to white and text color to black.
And with that our hero section is complete. Create some more content with a similar approach as a hero image and change the placement of the image or add more content in it.
4. Add Customer Testimonial
Now let’s try to make a customer testimonial section on our page. As you can see in the image above this testimonial page has a heading at the top then three columns below it and each of these columns have customer feedback, customer image, and their name, let’s see how we can make that.
Since we are adding multiple things in this section it’s good to start with a group, so add a group block first and set its alignment to full width for covering up the entire page.
Now click on the plus icon to add a block and select heading, align the heading to the center and change its text color if you want.
Now add a column block and choose three columns for adding three customer testimonial you can add more or less as per your preference but three looks good as per design need.
Now in the first column add a paragraph block and add your first customer testimonial in it. Align text to center and change its color if you want.
Now hit enter to get a new block option and add an image block below the paragraph. Choose an image from the image gallery or upload one.
Now to make the image circular select the rounded image option from the right sidebar.
After that change image size from full width to thumbnail and set height and width to 50 and 50 to make it smaller.
The next step is to align the image to the center from the quick top menu bar.
Now again add a paragraph at the bottom of the image to add the customer’s name. Add it by clicking on the plus button or hitting enter on your keyboard.
Add customer name and align the paragraph to the center and with that one column of customer testimonial is ready.
You can repeat the above process for other columns to or to save time select the column.
If you are facing trouble selecting the column from the top menu click on list view or press Shift+Alt+O to open list view. And from that list view select the column.
After selecting the column click on the three-dot button and from the list click on duplicate or directly press Ctrl+Shift+D to duplicate the column to the right. Do it once more to add all three columns.
After that select the other two empty columns and delete them by selecting delete from the three-dot menu or pressing Shift+Alt+Z.
And with that our customer testimonial section is also added to our page.
5. Add a Gallery Section
Now let’s add an image gallery for our visitors to show them our hard work or our process of making the stuff or anything which you think is needed for the gallery. Our gallery section will look like the image you can see above, it has a title and 4 images side by side.
Since we already told you how to create a group and heading we are skipping it, but do create a group and add a heading. You and also duplicate the previous block and delete the column block from it and modify the heading.
Now to add the gallery we will use a new gallery block of Gutenberg Editor, just make a new block and select gallery for it.
Now upload or select multiple images from the gallery, Block Editor will automatically create a gallery for you and arrange the images in a nice format but not necessarily in the format you want.
Since we want four images in a single row we need to change the format, to do that go to the ride sidebar and increase the number of columns in our case four since we need 4 columns and one row.
And with this, our gallery section is also completed.
Now just click on Save draft and look at the preview on desktop, tablet, and mobile and if everything looks good publish your page. And Congratulations you have made your first amazing-looking page using Gutenberg Block Editor.
Issues With Gutenberg
We have created the complete page using just Gutenberg and it is looking good so far but can this replace page builders like Elementor or Bever? The answer is no, not yet. The Block Editor has a lot of things right now but it’s missing many small things which are required. Here are the few things issues with Block Editor:
- Block Editor has very few text formatting options, you can’t even pick a different font for your text if you want.
- It has no option to set margin and padding for any block which is bad.
- Custom CSS is also not available in Gutenberg.
- Another thing that I miss the most while using Gutenberg is the hover option, there is no option to customize the block on hover.
- Since recently people have started adapting Gutenberg there are few plugins available that offer extra useful blocks.
- One of the worst things while making the page with Gutenberg is when I have created the page the page is looking fine in Gutenberg Preview but in the actual mobile device, it has some layout issue which is troubling.
There are still many things that are missing but still Gutenberg is far more capable than the old editor for page building. And I am pretty confident that you can use only Gutenberg to make pages.
Now you can design your pages without using any third-party plugin, and I believe this tutorial helped you in getting closer to using Block Editor as your main editor. We know there are a lot of things that are missing but also there are a lot of things added and developers are working to add more.
If you have any questions, doubts, and the suggestions comment section is open below do share them. And do check out our other articles on Gutenberg for getting better at it.