Up next in 10
How To Design A Beautiful Homepage Using Kadence blocks builder in WordPress
544 views
Jan 28, 2024
The video titled "How to Design a Beautiful Homepage Using Kadence Blocks Builder in WordPress" is an instructive tutorial for WordPress users seeking to create an aesthetically pleasing and customized homepage. The video focuses on utilizing the Kadence Blocks Builder, a popular WordPress block editor, to design and structure the homepage. Viewers will be guided through the step-by-step process of leveraging the features offered by Kadence Blocks Builder to enhance the visual appeal and functionality of their homepage. By the end of the tutorial, users should have the skills and knowledge to craft a beautiful and engaging homepage tailored to their preferences using the versatile Kadence Blocks Builder in WordPress.
View Video Transcript
0:00
In this video you will learn how to design a page like this using the Cadence Blog plugin
0:05
which is a page builder which is based on Gutenberg and you can easily build a home page
0:11
like this from scratch. So let's start the video. So go to your WordPress dashboard and here click on Plugin and click on Add New
0:21
Now here search for Cadence Blocks and install this plugin and activate this
0:29
this plugin. Now go to the Pages section and here create a new page. Now let's add the title
0:39
to home and let's publish this page first. So let's take the Permalink and publish this page
0:48
Now go back to the dashboard and here go to Settings and click on Reading
0:56
Now here you have to set a static page. page as a home page. So select the home page here and click on Save Changes
1:07
Now let's refresh this page again. As you can see, the home page is added. So let's go
1:14
to the pages section and select the home page. So here click on Edit and let's first do some
1:25
basic setting here. So click on this icon and here. You have to enable the transparent header and you can disable the page title here and
1:36
leave all the settings default and let's update this. Now let's refresh this page again
1:45
As you can see the transparent header is activated and the page title is gone
1:51
So let's start the home page design. So here click on Add Block and here you have to search for Row Layout
1:59
So this is basically a container that helps you to add different sections in that container
2:05
So let me just select a two equal container from here and here you have to add the design
2:13
So let's go to the template first and we will be using this as a sample
2:20
So let me just copy this title from here and here click on the plus icon and add the
2:28
advanced heading. Now let's paste this heading. Now click on Enter. Now copy the paragraph
2:37
from here and let's paste this here. Now you have to add a button like this to just
2:46
add the button like Try for Free. So here click on the plus icon and add the
2:53
advance button. Let me just add it like Try for Free. And you can also add additional button, so click on Show More setting and click on Add
3:04
button and let's add the second button like watch video. So let me just add the name
3:13
Okay, we have added the first section and let's add the second image in the right
3:21
section. So click here and search for image. and click on Media Library
3:32
Here I have uploaded the all images in the Media Library or you can select the upload file and
3:38
upload the image from your computer. So let me just select the image
3:44
The image is added. Now let's add a padding in the top and bottom of this container
3:50
So you have to select the first row layout option and here you have to add a margin from the top
3:57
bottom. So let me just add a top margin of 120 and a bottom margin of 100. Now scroll down
4:06
and here you will see this option background setting. So let's add a background color from
4:11
here. And as you can see the background color is added. Now you can select this fast section
4:19
So just click on this icon and here click on the fast section. So it will select the fast section
4:26
Now click on this button vertical align to align middle. Now click on the second section and set the vertical align to line middle
4:37
Now close this and here click on this first heading and here you will see this option heading color
4:44
So let me just change it to white. Now let's click on the second heading and let's change the text color from here
4:54
Now click on the button and here you have to change the button styling from here
5:00
So click on the button one setting and let's change the button color
5:04
So here as you can see, the button color is green and the text is white and here added
5:10
a arrow color and the hover color. So let's do this. So let me just add the text color to white and set the background color to green
5:21
Now let's add a border color of white. Now scroll down and you can set the border radius
5:29
So I will select the border radius to 30 so that you will see a round effect
5:35
Now scroll down and you can add an icon here. So let me just add this icon
5:42
And you can set this icon size. So I will leave this as default and you can also save the icon position from left
5:54
or right, right is good. Now change the second button setting, so click on here and let's change the button like this
6:05
So click on here and let me just add the text to white and I will set the background color
6:12
to blue so that it will match the background color. I will remove the border color
6:18
So here click on white and let's make it transparent. so that the border will be gone
6:26
And here you can also set the borderral width to zero. And you don't need border radius here
6:35
Now scroll down, here you have to search for a icon. So I will search for like play
6:42
You will see this different icon. So let me select this icon
6:48
Now the button is added just like this. there is one problem when I hover over this icon there is a black background
6:57
showing in this button so let's go to this color section and here click on hover
7:04
and let's remove this background so I will select it match the background color
7:11
I will remove the border color and as you can see when I hover this the background black color is gone you can also add a link to this So here I will link to home page or I will link to sample post
7:30
So click on here and here you can add a YouTube video like this
7:36
So let me just copy a YouTube link. So when I click on this there is a video pop-up showing here
7:44
So let me just add the video link here. So, copy this link, go to the Edit page and here click on the second button
7:55
Now here you have to select the button link. So just paste this and here in the drop-down menu you have to click on the video pop-up so
8:05
that it will pop up the video window when a user click on this button
8:10
Now let's update this. Now let's preview this changes. As you can see, the text is looking odd and this button is not in the left aligned
8:22
So let's fix this. Go to Edit page and here you have to select the entire column
8:28
So you can also select from here. Click on row layout and here you have to click on this icon, Inner Content width
8:36
So let's click on theme width so that it will automatically adjust the width and let's click
8:43
on the button section. So here you can select this from here
8:50
So let's click on the advanced button here and let's click on the left align
8:56
Now let's publish this page first. Now let's refresh this page. And as you can see, this is looking quite good
9:05
You can also adjust the text size from here. So let me just go to this
9:11
Here click on the first heading and here we can change the font settings. And here you can change the font size
9:16
So let me just change the font size. And here click on the second paragraph
9:24
And here you can change the font size. So here you can add it font size like 25 or here I will select to 20
9:33
Now let's update this and let's go to the page. And here you can add a background layer to your hero section
9:41
So let's go to the edit page and here select the entire section
9:47
Now click on the background setting and here you can add a background image
9:52
So click on image and this is the background image. So let's select this
9:57
So as you can see the background image is added in this hero section
10:02
So you can also adjust the size. I will leave this default
10:06
You can also force background image in line so that it will prioritize the background
10:11
background images and load the zero section image first. So here I will leave this default
10:19
And here click on background overlay and you can add a gradient effect in this background
10:24
So just click on gradient and here you can add a different color and set the gradient style
10:31
like linear or radial. As you can see, there is a gradient effect in this home page
10:37
So you can do that by adding the color from here. So let me just this later
10:44
And here you will add a divider like this. So click on divider and here click on select divider
10:51
So let me just search for that divider. So here it is
10:56
And as you can see, the divider is added. Now the hero section is almost ready
11:01
So let's update this first and let's refresh this page again. you can see the hero section is ready and there is one problem here the watch button
11:15
background is not looking good so let's fix this so here click on the button and click on the
11:24
button to setting and let's remove the background color from here now let's update this now let's
11:31
refresh this page and as you can see the button is fixed now and you can also
11:38
change the hover background color. So change this quick, click on the hover option and let's remove the background color
11:46
Now let's update this. So when I click on the watch video button, it will load the video in this pop-up
11:53
So the hero section is almost finished. So let's check how you can add this section like this
12:00
So here I will use a feature pack section. So go to edit section and here click on the plus icon
12:07
the plus icon and let's add a row layout again and here in this case I will select
12:14
the three equal layout and here click on the first layout and here search for info
12:20
box so let me just select the info box and let's add this again and in this way
12:29
you can add the three section like this so just click on the whole section to
12:35
So click on the row layout and click on the Use Inner Theme Content
12:40
And here you can change the title. So let me just quickly change the title from here
12:50
Now let's change the icon from here. So just click on this box and scroll down and here you will see an option called Media Settings
12:59
So here you can either use icon image number. So here by the way it is set to icon
13:05
So let me just remove this icon and select icon from here
13:09
So you can select any icon from here. So click on second box and scroll down and click on media setting
13:16
And here add an icon. So you can also add like too much or search like edit
13:23
And let me just add a random icon from here. Now click on the third box and scroll down and in the media setting
13:31
Let's remove this icon first. Now I will search for like mobile
13:38
And let's add this. So we have added three sections. So you can duplicate this section
13:44
So let me just select the row layout. And here I will click on duplicate so that it will add more section and here you can edit
13:55
this layout. So let's update this. Now let's replace this page. And as you can see, this section is added
14:06
So you can also add a margin and padding in the top and bottom of this section
14:11
So let me just show you. So here click on the first row layout
14:16
And here click on padding and margin. So by default, this set to 25
14:21
So let me set it to 50. And I don't change the margin from the bottom
14:28
So let's click on the second row. layout and here let add a bottom margin of 50 now let update this now refresh this page you can see there is a margin at the top and bottom Now let add another section
14:49
So there is a section like this. So let's go to the edit page and here I will select a row layout
14:59
And here I will add a two sections in this row layout. So one is for image and this and second is for the text
15:07
So let me just select 2 by 2. select 2 by 2 and here I will add an image first
15:13
So here you click on the plus icon and search for image
15:19
Let's upload this image from here. So let me just add the image like this
15:29
Now here in this plus icon, click on the advanced heading. Let me just copy this heading
15:38
paste it here now add a paragraph and here click on enter and now paste the paragraph
15:50
Now you can also add a button like this, learn more. So let me just click on the plus icon and here click on advanced button and here I will
16:00
type learn more. Here click on the button setting. Change the button text to black, let's change the background to blue
16:13
Let's change the background, button text to white. Now let's remove the border
16:19
Here click on hover. Now let's change the hover background to green
16:25
So when I hover this button, it will show a green background in the button
16:31
Now let's remove the button border. and here in the remove the bottom border will not removing so what I can do is just remove
16:43
the opacity from here now click on this row layout and let's say top and bottom
16:51
margin from here so let me just top margin of 50 and add a bottom margin of 50 now
17:00
let's update this now let's replace this page And as you can see, this section is added but it is looking odd
17:08
So let's fix this width. So just click on the whole row layout and here click on this button and click on use theme width
17:18
Let's click on this first section. So here click on the first section and let's select to align middle
17:27
And here click on the second section. So here click on section and set it to align to middle
17:35
Now let's update this and one more thing let's align this button to left and add a border radius
17:44
So let's scroll down and here you will see an option called border ratios
17:50
So let me just set to party. Now let's update this. Now refresh this page here
18:00
Now we have added this section as you can see the first section is complete
18:05
So let's duplicate the second section from here. So here click on this plus button and let's select a row layout
18:13
And here also select two by two row layout and let me just select the theme width first
18:20
Let's add an image in the right section. So click on this and search for the image
18:25
Let's edit image from the media library. And here in this case I will select the second image
18:33
select this now add the text in the left side just copy this here click on plus
18:44
icon search for advanced heading paste this now click on enter now let's copy this
18:52
paragraph and let's paste it here now add a button so you can also add button like
19:01
this, go to slash and search for button. Now click on advanced button and let's add it like
19:09
an more. Or you can also do one thing you can copy this button from here. To select this
19:17
button and here click on copy. So let's remove this button from here. Let's click on Enter
19:25
and let's page this button. Now you have to select the whole left section from
19:31
here so click on section let's select to align to middle click on this section and set
19:39
the align to middle you can also add a background color in this section so let me just
19:46
select the whole row layout from here and let me just add a margin at the top and bottom
19:54
so i will add top margin of 50 and add a bottom margin of 50 now let's see
20:01
select the background color let's add a gray background like this now scroll down
20:10
let's add the third section in the same way click on row layout let's select the
20:16
two by two here in this case I left the image in the left section so just add the image
20:23
I will select this image and here I will select this first section
20:30
and set it to align to middle. Now click on the second section and let's click on advanced heading
20:39
Let's copy this card heading and let's paste it here. Now click on Enter
20:46
Now click on this paragraph and copy this and paste it here
20:53
Now let me just add the button. Here I will select the button
20:57
Copy this, and here I will paste the button. Now you have to select the whole section, so you just click on this and here you will click on section
21:08
or you can do this from here. Click on the whole section and let's click on align to middle
21:15
Now you can click on whole row layout and set the row width to each theme inner width
21:23
Let's update this. this page again and as you can see the section is added so let me just open this in
21:34
mobile view click on in fact and scroll down and here as you can see the first image and
21:40
the section is looking good and the second section the images is showing in the bottom so you
21:46
have to shift it to the top in the mobile view and the third section is good so you go to the edit
21:55
And here, as you can see, the left images are showing in the top and the right images are
22:01
showing in the bottom in the mobile view So just select the whole section and let click on the mobile view And here you have to select the collapse order to right to left
22:14
Now let's update this. Now let's refresh this page. Now let's take the mobile view again, scroll down and here as you can see, the images are
22:27
showing in the top although it is added in the right section. So in this way you can easily adjust the mobile view and this section is ready
22:38
Let's take how you can add this section like this. Now to add a section like this you need to add a row layout and add this section
22:49
So to do this go to the edit page and here click on row layout and click on single row layout
22:57
Now click on add block and click on Browse Off. you can add a testimonial section like this and here you can set different style of
23:06
testimonial so I will select this and here you can add a heading and you can add a paragraph
23:13
and you have to add the image like this or you can also add different style of testimonial
23:19
here so let me just add the heading here so just copy this heading from here now change it here
23:28
Now let's copy the paragraph, test it here. Let's upload the image
23:38
As you can see, the image is uploaded. Now let's copy the text
23:43
Now, let's copy the second text from here. Now you have to add a background color in this section
23:54
So before that, let's select the whole row layout. and here click on the background setting and here I will add a blue background
24:03
So you have to change the text color. Now click on this testimonial, scroll down and here you will see the option title setting
24:14
So here you can change the color to white. You can also change the font size, font height from here
24:22
Scroll down and here in the rating you can do a rating like this
24:26
I will not add the rating here so let's close down here click on content and let me just
24:32
change the content color to white now close this and click on name setting and let's
24:40
change the name setting to white now click on occupation setting and set it to
24:48
so in this way you can add a section like this now scroll down and you can also add a
24:55
a content shadow and wrapper padding but I will not do this. So now select the whole row
25:02
layout from here and here scroll down and let me just add the divider. So let's just
25:09
add a divider like this. To do this, select the divider. Here select the divider that
25:17
you want to add in the bottom. So here in this case I will add this divider and click on
25:24
top button so click on select divider and you can select any top divider from here
25:32
just select the best suitable option and this divider is looking good so let's just add a
25:42
padding and margin so that it will looks perfect in this screen so let me just add a top
25:48
padding of 80 and let me just add a bottom padding of 80
25:54
And as you can see, this section is added. Read this. Now let's refresh this page
26:03
And as you can see, this section is added. So you can use any of the divider, top and bottom divider in your home page
26:12
So let's edit this. You can also add different sections like FAQ or newsletter section in your homepage
26:19
So let me just show you how you can do that. So you don't need to build a section
26:24
like this. So you can use a design library that you get in Cadence Theme. So here you will
26:31
see different sections like you can add a contact form in this section. So let me just select
26:37
this and as you can see the contact form section is added. So in this way you can add
26:45
different sections to your home page. Here just click on design library and here as you
26:51
can see there is a FAQ section so just click on it and as you can see the FAQ section
26:59
is added in the home page suppose I want to add a newsletter section to the home
27:06
page so here I will select the design library and here in this category option
27:12
let's click on form and here click on the contact was form now I did this
27:21
this form so here I will select this contact us and change it to news letter
27:30
Now let's click on the message icon and let's delete this section
27:34
Now here in the send message I will change it to subscribe
27:40
Now here scroll down and click on the button style. Now here I will set it to full
27:47
Now click on this form and scroll down and click on the action after submit
27:51
So here you can set different email marketing tool like Mailer, Light, Flow and CRM, or you
27:58
can integrate MailChimp. But to integrate MailChimp, you need to purchase the Pro version
28:04
But if you want to integrate MailChimp in the free Cadence theme, then you have to install
28:09
the MailChimp plugin and here you will see this option to integrate MailChimp in this form
28:16
So the form is added. So let's add a background from here
28:19
So here click on background setting. Let's add the background. Click on here and let me just add a light gray background like this
28:30
Now let's update this. Now let's refresh this page. As you can see, the newsletter section is added
28:41
In this way you can design a home page from scratch and edit it according to your own need and
28:47
the needs you are working on. I hope you got the idea how to build a homepage like this using the cadence theme and
28:55
cadence block builder and you don't need to add any page builder like Elementor that
29:02
load down your website and you can easily build your home page using this Gutenberg Builder
29:07
and it will improve your page speed and make it core web vital friendly
29:13
And if this video helps then hit the like button and if you have any doubt regarding
29:17
this then you can ask me in the comment section. and you can also join our telegram community and the link will be given in the description
29:25
I will see you in the next video. Thank you