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.
Không có nhận xét nào:
Đăng nhận xét