Build A Landing Page With WordPress Using The Block Editor [Gutenberg]

Build A Landing Page With WordPress Using The Block Editor [Gutenberg]


Hi there! My name is Robert and in this video I’m gonna show you how to build a landing page with WordPress. This Landing Page is built using the new WordPress Block editor. Do you believe that? Yes, it is, and I’ve done it in under 30 minutes. All these nicely designed sections and elements
are built using the so-called Gutenberg editor and you can easily do it yourself. A step by step guide coming up, so keep watching. If you don’t know what theme to use, I recommend
Neve a super fast and featherweight theme which works great with the new WordPress Blocks
editor. Here are just a couple of things you will
get. First of all, it gives you a lot of options
to change the page layout, and secondly, you will be able to adjust the page width too. Cool! Right? I’ll show you more features Neve comes with,
so just install it for now and move to the next step. Otter Blocks comes with enhanced blocks and
many features that you won’t find in the default blocks. For example, the default heading block comes
with options to change the headings, font weight, and style, you can set a link too,
add a strikethrough if you want that, but that’s pretty much everything. One more thing you can do is to change the
heading alignment here. That’s it. I know you want more options, so with the
Advanced Heading from Otter, you can change the text color, font size, typography and
you can set shadow properties too. More about its features and settings coming
up, so stay with me. Without further ado, let’s start building
the Landing Page. Make sure you have the latest version of WordPress
and the Bloks Editor on, so you won’t face any issues during the creation process. We need to add a page, first, so go ahead
and click on Add New over here. The first field you see is the title of your
page, so add one related to what your page is about, and then move your mouse right below
the title. See the plus icon on the left? Push it to add your first block. Also, you can use the latest blocks on the
right. If you haven’t installed the Otter Blocks
plugin yet, you will see only the default Most Used blocks here, so make sure you install
and activate that plugin. While the block editor comes with many blocks
and columns by default, Otter Blocks have more to offer. It gives you the opportunity to structure
the page in sections and use different backgrounds for each section, as you can see on this page. You also have a lot more options to make each
section look exactly as you want it. Let me show you how it works. First, click on the Section block or choose
the same block over here. Select the Single Row layout this time and
then hover over it until you see the thin blue line around the Section Column and the
Section. Remember that these are elements you can configure
separately. See the difference between them in the options
panel on the right? Cool. One more thing we need to do before moving
on is to change the page settings, in the document tab over here. Don’t see the Page Settings tab on your dashboard? Make sure you install and activate Neve, the
WordPress theme mentioned earlier. For now, set the Container to Full Width,
the Customizer Setting to No sidebar and disable all components below. Enable individual Content Width and set it
to 100. If you do that, you won’t see any space on
the left or on the right side of your content when you preview the page. There is nothing you can see right now, obviously,
but we will start adding content immediately, so keep watching. Don’t worry about saving your work step by
step because is done automatically. Just to make sure you are safe to move to
the next step, click on Save Draft here. I will add a background to this section, first,
as you can see here. So, click to see the setting options for this
Section. Not the Section Column, but the Section itself. Now, go to the Style tab and set the Background
Type as an image. You can choose a simple color or gradient
too, but we will stick with the image type this time. Just upload the image you want to see here,
a quality image. A good resource where you can find free quality
images is pixabay.com, for example, but the best one will be your own photo. That is for sure. Next, click the Background Settings icon over
here. Set the Background Attachment to Scroll if
you want to see this effect, or choose Fixed to stick it with the content on scrolling. See how it looks? Great. The Background Position I choose here is the
Center Center, Background Repeat is No-repeat. and the Background Size is Cover. Next, let’s add the elements:
A logo, the “Awesome Wood Things” heading and the button below. See the plus icon when hovering over the section? Click on it and choose the image block. Upload your own logo and then adjust its settings. Align it to the center of the screen in this
drop-down, set the Image Size to Medium here and that’s it. The text element I will add next is the Advanced
Heading box. Make the Heading Color white, type whatever
you want in the field, WordPress Landing Page for example, and then align it to the center
of your screen. Now, select the Font Family in this drop-down
as Aladin if you want the same font family I used on this page. Ok? If not, feel free to select another font. Next, set the Font Size to 100 and turn on
the Shadow Properties below. If you want the same effect I have on my landing
page, click on Shadow Properties, set the Opacity to 100 and set the Blur effect to
5 or even more if you want the text to pop out. Good. Let’s add the last element this section has-
the button. Choose the Button Group block offered by Otter,
set the Number of Buttons to one, then go ahead and change the Color & Border settings. To create the same button I use on this page,
set the Color here to white, the Background color to green and then copy the color code. Set the border of the button to white and
the Border Width to two. The Border Radius I’ve used is 100 but you
can set the value you want. Align the button to the center of your screen
in this drop-down, type in your text, something like “Watch the video” or whatever else, adjust
the padding if needed here, then set the position of the icon to the right. Choose the video icon in this drop-down and
you are done. One more thing before moving to the next section
is to head over to the group settings, and in the Typography Settings set the font size
to 25. Feel free to change other things here, like
the Font Family for example. Let’s see what we have created so far. To do that, I will click on Preview over here. Well, I think the section height is too small
so I will go back to the editor and I will search for the Custom Height in the Section
Structure over here. I will set this value to 800, push Save Draft
to save the changes instantly and check out the preview again. Better, right? The button height is too small! So, here is what you need to to to adjust
it: Set the Line Height to 50 over here. Save draft and check the preview one more
time. Good! Actually, this thin white space above the
first section is something that doesn’t look so good. Can we fix it? Sure, no problem. To do that, go back to the Section settings
again and check out the Margin Top control in the Padding & Margin settings. Set this value to -10 and that’s it. We are done with the first section, so we
can move to the next one. For the Shapes & Design section, we will use
three columns and three Font Awesome Icons blocks. First, we need to add the heading that says
Shapes & Design. So, click on the plus sign here and choose
the Advanced Heading block. Type in Shapes & Design set the text alignment
to center and set the Font Size to 38, for example. Looks good, right? I wanna let you know that you can pause the
video any time you wish, and practice what you learn. Also, check the timestamps in the description
box below to jump over the steps, any time you want. Next, I will add a new section for the shapes
you see below this heading block. This time I will choose the Equal layout with
three columns, like so, then I will start adding the icons one by one. To make this process faster, I will add the
Font Awesome Icons block in the first column, I will customize it to look exactly like the
first icon on this Landing Page and then I will duplicate it. So, change the icon to “atom” in this drop-down, set the icon size to 150 and the Padding to 20. The color of the icon will be green in our
case and the border will be black. To recreate the same border you see here,
we need to set the border size to 3 and its radius to 14. The first shape is done so, click on more
options over here and duplicate the block. Click and hold your mouse over this area and
drag the block to the next column, like so. To delete the default paragraph block you
see below, type in something then click here and Remove Block. Duplicate the Font Awesome Block once again
and move it to the last column. Ok? Now, let’s customize the icons. The block in the middle will need to have
a dog shape so search for the dog icon here and click on it. Done Do the same in the last block but this time
search for the baby-carriage icon. Well done! The second section is ready and we can preview
what we have done so far. Well, the icons seem to be too far from each
other, so, go back to the block editor, hover over the section until you see the thin blue
line of it and click to see its options. Set the width of the section as wide, and
that’s it. Just preview the page again so you can be
sure everything looks as it should be. The heading is the first here too, but I want
to work a little bit faster, so I will duplicate the Shapes & Design heading block created
earlier, then I will move it down. Next, change the text to “Watch the video”,
for example, then add another section below. Single Row layout will be just fine, again. The background of this section will be a single
color, green, so head over to the style tab in the settings panel and change its color
here. To use the same color as you have for the
icons, click on that box and copy the color code you see here. Go back to the section settings and paste
the color over here. Next, set the width of the section to full
and then get rid of all paddings in the Layout settings. To finish add a video block and use the “insert
from URL” option. Paste the video link of your choice in this
field then hit enter. Make it smaller by setting the Padding Control
to 100 for the Section Column. One more thing I want to mention is to make
sure the video is aligned to the center. So far so good so we can move to the next
section. The Pricing Table section is the most time-consuming
step in this video so you can click on pause and have a good cup of coffee before moving
on. Ready? Add another section below the video and this
time uses the Template Library. The cool thing about this resource is that
you have a lot of ready-made blocks, and you can filter them out by categories in this
drop-down. Just use the Pricing Table for now and make it look like the page you saw at the beginning of the video. First, remove the heading block with the big
05 in it and then set the Margin Top for the following heading block over here. Change the font and then make some fine adjustments
so we can have the same look as you can see here. First, click on the section and change the
Padding Top here to 50 and the Padding Bottom to 80. Change the background color to white and use
the same heading block for each pricing table. You can do that by changing the Font Family
with Aladin then set the size of the font to 40 over here. Duplicate then move the block to the next
pricing table, delete the default one and so on. Next, I will show you how to change the background
color for each pricing column. Let’s start with the area behind the price. Hover over it until you see the Section Column. Click on it and change the background color
to brown. Copy the color and do the same with the thin
line above. This time you need to change the color of
the Border here. In order to have that same slightly curved
line, as you can see here, set the Border Top value to 7 and the Border Radius to 7
too. Do the same with the Push Cart pricing column
and then change the color on the pricing column in the middle. The column that stands for the Dog Shape will
have a green background, so again, go ahead and change the color here, and here. Just remember to change the values of the
Border Top and Border Radius to 7. Remove the “Per Month” text boxes then change
the text content below the prices. If you need lees text lines here, remove what you don’t use and change the text in the remained field like so. Wood Type, Shape Size, Shape Color, Safe For Kids, Fats Delivery. Remove the default blocks in the following
pricing tab and you can duplicate and drag over the text field from the left, or you
can edit them as well. It’s your choice, so use the method you prefer. I do prefer the copy-paste method because
it seems to be the fastest way. I don’t know why is giving me this empty space above the text when I paste it here but don’t worry because you can hit the backspace button on your keyboard to get rid of it. Finally, let’s change how the call to action
buttons look by default and make them look and act exactly the way you see here. Start by changing the colors. To do that, click on the first button and
head over to the Color & Border settings, here. First I will copy the brown color code from
this element then I will paste it here. As you can see, this is the text color. Next, use the same code in the Border color field, here. The only thing left to change is the background color on hover so go ahead and click on the Hover tab over here. Set the Hover Background color to the same brown used earlier. Looks great, right? The following button will be green so copy
the color code here and repeat the process from the brown button. Change the Color, Border and Hover Background. To make things faster, remove the Button Block
here and duplicate the first button created. Drag it over to the last pricing column and
you are done. There is one more thing you should do, actually,
an that is to add the icons you see on the buttons over here. It’s so easy to do it. For the first button, go to the Icon Settings
section and set the Icon Position to the left. Select the Atom icon in the Icon Picker drop-down
then moves to the next button. Select the dog icon and for the last button
select the baby-carriage icon, here. Finally, you need to change the button text
with “buy now”, for example, and you can paste the link to the product page in this field. Save your changes and you are done. The Pricing Section is finished. Curious how it looks? Let’s check it out. It looks ok but I think we can make it better. The pricing table will pop-out if we will
add a shadow effect to each column, so let’s do it and see how it works. Go back to the Block Editor and click on the
Section Column for the first pricing tab. Head over to the Style Tab in the Block settings
and go to the Border options. Enable the Box Shadow here and adjust its
settings if needed, then do the same for each pricing tab. Cool. Save the changes and check out the preview
one more time. Much better, right? What’s next? This is the last section for this Landing
Page and here is what you need to do. Use the section block one more time and then
click on Template Library. Here, select the Get In Touch template. Remove the first block because we don’t need
it on this page, and then set the top margin of the following heading block to zero or
more if you want to have some space between the heading and the top margin of the section. Next, change Font Family in the Style tab
over here and the section image you see in the background, over here. Adjust the Background Overlay opacity until
you get the best look and then click to save the changes. Now, I will show you how to create a contact
form using the WP Forms plugin. Click on Add New form over here. Choosing a simple form in the next step will
be just fine, so click to create a Simple Contact Form, here. Set the field size of each element to Large
in the Advanced Options panel and hide all the labels. For the first and last name fields, hide the
sub-labels too. Finally, add some text in the placeholder
field of each element. First Name here, Last Name here, Email here
and Message over here. If you want to change the button text, go
to the settings tab and change what you see here. You can type in Send Message, for example. Once you are done, click on Save and then
copy the shortcode you see in the embed pop-up. Go back and edit the page, then paste the
shortcode in this field. Save your changes then go ahead and preview
the page. It looks stunning, right? One more thing you should do before hitting
the publish button is to get rid of this subtitle or change the text with something like “send
us a message using the form below”. Finally, click Publish and we are done! Now you know how to build a landing page with
WordPress by using its own Block Editor. How cool is that? Use what you’ve just learned to create high
converting Landing Pages for your marketing strategy on Facebook and Google. More of that, you can use Neve, your active
WordPress theme, to create full websites for a Vet Center, Lawyers, Doctors and so on. Check it out yourself by navigating to Appearance
/ Neve Option on your dashboard. You can import and use any template with one
click, for free. Is there any question you have about WordPress
Blocks? What do you think about the new way of adding
content to your WordPress website? Leave a comment below so we can chat about
it. More about WordPress in the videos I’ve published
lately. See you in the next one.

8 thoughts on “Build A Landing Page With WordPress Using The Block Editor [Gutenberg]

  1. Step by step Landing Page:

    Step 1 – Install Neve WordPress Theme 0:35

    Step 2 – Install Otter Blocks 1:10

    Step 3 – The first section (big title) 2:04

    Step 4 – The shapes & design section 10:22

    Step 5 – The watch the video section 13:35

    Step 6 – The pricing table section 15:13

    Step 7 – The get in touch section 22:19

  2. Oh great.. lets install even more plugins just to get the functionality of a normal pagebuilder which is bundled with any premium theme anyway.

  3. The clarity of your presentation is excellent, easy to follow and, more importantly, easy to understand. Thank you for all your hard work!

Leave a Reply

Your email address will not be published. Required fields are marked *