in this video you will learn how to design a page like this using the
cadence block plugin which is a page builder which is based on Gutenberg and
you can easily build a home page 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. now here search for cadence blocks and install this plugin and activate this plugin. now go to the pages section
and here create a new page. now let's add the title to home and let's publish this
page first. so let's take the permalink and publish this page. now go back to the
dashboard and here go to settings and click on reading. now here you have to
set a static page as a home page. so select the home page here and click on
save changes. now let's refresh this page again. as you can see the home page is added. so let's
go to the pages section and select the home page. so here click on edit
and let's first do some 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 leave all the settings default and let's update this. now let's refresh this page again. as you can see the transparent header is
activated and the page title is gone. so let's start the home page design. so here
click on add block and here you have to search for row layout. so this is
basically a container that helps you to add different section in that container
so let me just select a two equal container from here and here you have to
add the design. so let's go to the template first and we will be using this
as a sample. so let me just copy this title from here and here click on the
plus icon and add the advanced heading. now let's paste this heading. now click on
enter. now copy the paragraph from here and let's paste this here. now you have
to add a button like this. so just add the button like try for free. so here
click on the plus icon and add the advanced 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 button and let's add the second button like watch
video. so let me just add the name. okay we have added the first section and let's
add the second image in the right section. so click here and search for image
and click on media library. here I have uploaded all images in the media
library or you can select the upload file and upload the image from your
computer. so let me just select the image. the image is added. now let's add a
padding in the top and bottom of this container. so here you have to select the
first row layout option and here you have to add a margin from the top and
bottom. so let me just add a top margin of 120 and a bottom margin of 100. now
scroll down and here you will see this option background setting. so let's add a
background color from here. now you can see the background color is added. now
you can select this first section. so just click on this icon and here click
on the first section. so it will select the first section. now click on this
button vertical align to align middle. now click on the second section and set
the vertical align to align middle. now close this and here click on this first
heading and here you will see this option heading color. 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. now click on the button and here you have to change the
button styling from here. so click on the button one setting and let's change the
button color. so here as you can see the button color is green and the text is
white and here added the 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. now
let's add a border color of white. now scroll down and you can set the border
radius. so I will select the border radius to 30. so that you will see a round
effect. now scroll down and you can add an icon here. so let me just add this icon
and you can set this icon size. so I will leave this as default and you can also
shift the icon position from left or right. right is good. now change the
second button setting. so click on here and let's change the button like this. so
click on here and let me just add the text to white and I will set the
background color to blue. so that it will match the background color. now I will
remove the border color. so here click on white and let's make it transparent. so
that the border will be gone and here you can also set the border width to 0
and you don't need border radius here. now scroll down. here you have to search
for a icon. so I will search for like play. you will see this different icon. so
let me select this icon. now the button is added just like this. but there is one
problem. when I hover over this icon there is a black background going in
this button. so let's go to this color section and here click on hover and let's
remove this background. so I will select it match the background color. 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. so click on here and here you can add a
YouTube video like this. so let me just copy a YouTube link. so when I click on
this there is a video pop-up showing here. 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. 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
that it will pop up the video window when a user click on this button. 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 align. so let's fix this. go to
edit page and here you have to select the entire column. so you can also select
from here. click on row layout and here you have to click on this icon inner
content width. so let's click on theme width so that it will automatically
adjust the width and let's click on the button section. so here you can select
this from here. so let's click on the advanced button here and let's click on
the left align. now let's publish this page first. now let's refresh this page
and as you can see this is looking quite good. you can also adjust the text
size from here. so let me just go to this. here click on the fast heading and here
you can change the font size. so let me just change the font size
and here click on the second paragraph and here you can change the font size. so
here you can edit font size like 25 or here I will select to 20. now let's
update this and let's go to the page and here you can add a background layer to
your hero section. so let's go to the edit page and here select the entire
section. now click on the background setting and here you can add a
background image. so click on image and this is the background image. so let's
select this. so as you can see the background image is added in this hero
section. we can also adjust the size. I will leave this default. you can also
force background image inline so that it will prioritize the background images
and load the hero section image first. so here I will leave this default and here
click on background overlay and you can add a gradient effect in this background
so just click on gradient and here you can add a different color and set the
gradient style like linear or radial. as you can see there is a gradient effect
in this home page. so you can do that by adding the color from here. so let me
just this later and here you will add a divider like this. so click on divider
and here click on select divider. so let me just search for that divider. so here
it is and as you can see the divider is added. now the hero section is almost
ready. so let's update this first and let's refresh this page again
as you can see the hero section is ready and there is one problem here. the watch
button background is not looking good. so let's fix this. so here click on the
button and click on the button to setting and let's remove the background
color from here. now let's update this. now let's refresh this page and as you
can see the button is fixed now. you can also change the hover background color
change this quick. click on the hover option and let's remove the background
color. now let's update this. so when I click on the watch video button it will
load the video in this pop-up. so the hero section is almost finished. so let's
check how you can add this section like this. so here I will use a feature pack
section. so go to edit section and here click on the plus icon and let's add a
row layout again and here in this case I will select the three equal layout and
here click on the first layout and here search for info box. so let me just
select the info box and let's add this again. and in this way you can add the three section like this. so just click on the
whole section. so click on the row layout and click on the use inner theme content
and here you can change the title. so let me just quickly change the title from here
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 setting. so here you can either use
icon image number. so here by default it is set to icon. so let me just remove
this icon and select the icon from here. so you can select any icon from here. so
click on second box and scroll down and click on media setting and here add a
icon. so you can also add like image or search like edit and let me just add a
random icon from here. now click on the third box and scroll down and in the
media setting let's remove this icon first. now I will search for like mobile
and let's add this. so we have added three section. so you can duplicate this
section. 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 this layout. so let's update this. now let's replace this page
and as you can see this section is added. so you can also add a margin and padding
in the top and bottom of this section. so let me just show you. so here click on
the first row layout and here click on padding and margin. so by default it is set to
25. so let me set it to 50. now don't change the margin from the bottom. so
let's click on the second row layout and here let's add a bottom margin of 50. now
let's update this. now refresh this page. as you can see there is a margin at the
top and bottom. now let's add another section. so there is a section like this
so let's go to the edit page and here I will select a row layout and here I will
add a two section in this row layout. so one is for image and this and second is
for the text. so let me just select 2 by 2 and here I will add an image first. so
here in the click on the plus icon and search for image. and let's upload this
image from here. so let me just add the image like this
now here in this plus icon click on the advanced heading. let me just copy this
heading and paste it here. now add a paragraph and here click on enter. now
paste the paragraph. 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
type learn more. here click on the button setting. change the button text to black
let's change the background to blue. let's change the background button text
to white. now let's remove the border. here click on hover. now let's change the
hover background to green. so when I hover this button it will show a green
background in the button. now let's remove the button border. and here in the remove the button border. it will not remove. so what I can do is just
remove the opacity from here. now click on this row layout and let's set top and
bottom margin from here. so let me just top margin of 50 and add a bottom
margin of 50. now let's update this. now let's replace this page. and as you can
see this section is added but it is looking odd. 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. let's click on this first section. so here click on the first section and let's select to align middle. here click
on the second section. so here click on section and set it to align to middle
now let's update this. and one more thing let's align this button to left and add
a border radius. so let's scroll down and here you will see an option called
border radius. so let me just set to 30. now let's update this
now refresh this page here. now we have added this section. as you can see the
first section is complete. so let's duplicate the second section from here
so here click on this plus button and let's select a row layout. here also
select 2 by 2 row layout. and let me just select the theme width first. let's add
an image in the right section. so click on this and search for the image. let's
edit image from the media library. and here in this case we'll select the
second image. let's select this. now add the text in the left side
just copy this. here click on plus icon. search for advanced heading. paste this. now click on enter. now let's copy this paragraph. let's
paste it here. now add a button. so you can also add
button like this. put slash and search for button. now click on advanced button
let's add it like before. or you can also do one thing. you can copy this button
from here. to select this button and here click on copy. so let's remove this
button from here. let's click on enter. and let's paste this button. now you have
to select the whole left section from here. so click on section. let's select to
align to middle. click on this section and set the align to middle. you can also
add a background color in this section. so let me just select the whole row
layout from here. and let me just add a margin at the top and bottom. so I will
add top margin of 50 and add a bottom margin of 50. now let's select the
background color. let's add a gray background like this. now scroll down and let's add the third section. in the same way click on row
layout. let's select the 2 by 2. here in this case I will select the image in the
left section. so just add the image. I will select this image. and here I will
select this first section. set it to align to middle. now click on the second
section. let's click on advanced heading. let's copy this heading. let's paste it
here. now click on enter. now click on this paragraph. copy this and paste it
here. now let me just add the button. here I will select the button. copy this
here I will paste the button. now you have to select the whole section. so just
click on this and here you will click on section or you can do this from here
click on the whole section. let's click on align to middle. now you can click on
whole row layout and set the row width to 15 inner width
let's update this. paste this page again. and as you can see the key section is added. so let me just open this in
mobile view. click on inspect. let's scroll down and here as you can see the
first image and the section is looking good and the second section the images
is showing in the bottom. so we have to shift it to the top in the mobile view
and the third section is good. so you can go to the edit section and here as
you can see the left images are showing in the top and the right images are
showing in the bottom in the mobile view. so just select the whole section. let's
click on the mobile view and here you have to select the collapse order to
right to left. 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 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
let's see 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. so to do this go to the
edit page and here click on row layout and click on single row layout. now click
on add block and click on browse all. here you can add a testimonial section
like this and here you can set different style of testimonial. so I will select
this here you can add a heading and you can add a paragraph and you have to add
the image like this. you can also add different style of testimonial here. so
let me just add the heading here. so just copy this heading from here. now change
it here. now let's copy the paragraph. paste it here. let's upload the image
now you can see the image is uploaded. now let's copy the text
now copy the second text from here. now you have to add a background color in this section. 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. so you have to change the text color. now click on
this testimonial. scroll down and here you will see the option title setting
so here you can change the color to white. you can also change the font size
font height from here. scroll down and here in the rating you can do a rating
like this. so I will not add the rating here. so let's close down. here click on
content and let me just change the content color to white. now close this and click on name setting. let's change the name setting to white
now click on occupation setting and set it to. in this way you can add a section like this. now scroll down and you can also
add a content shadow and wrapper padding but I will not do this. now select the
whole row layout from here and here scroll down. let me just add the divider
so let's just add a divider like this. to do this select the divider
here select the divider that you want to add in the bottom. so here in this case I
will add this divider and click on top button. so click on select divider and
you can select any top divider from here. so just select the best suitable option
and this divider is looking good. so let's just add a padding and margin so
that it will looks perfect in this screen. so let me just add a top padding
of 80 and let me just add a bottom padding of 80. and as you can see the
section is added. now let's refresh this page. 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. so let's edit this. you can also add different
section like FAQ or newsletter section in your home page. so let me just show you
how you can do that. so you don't need to build a section like this. so you can use
a design library that you get in cadence theme. so here you will see different
section like you can add a contact form in this section. so let me just select this
and as you can see the contact form section is added. so in this way you can
add different section to your home page. here just click on design library and
here as you can see there is a FAQ section. so just click on it
and as you can see the FAQ section is added in the home page
suppose I want to add a newsletter section to the home page. so here I will
select the design library and here in this category option let's click on form
and here click on the contact us form. now I did this form. so here I will
select this contact us and change it to newsletter. now let's click on the message icon and let's delete this section. now here in
the send message I will change it to subscribe. now here scroll down and click on the button style. now here I will set it to
full. now click on this form and scroll down and click on the action after
submit. so here you can set different email marketing tool like mailer
CRM or you can integrate MailChimp. but to integrate MailChimp you need to
purchase the pro version. but if you want to integrate MailChimp in the free
cadence theme then you have to install the MailChimp plugin and here you will
see this option to integrate MailChimp in this form. so the form is added. so
let's add a background from here. so here click on background setting and let's add
the background. click on here and let me just add a light gray background like
this. now let's update this. now let's refresh this page. as you can see the newsletter section is added. so in this way you can design a
homepage from scratch and edit it according to your own need and the needs
you are working on. I hope you got the idea how to build a homepage like this
using the cadence theme and cadence block builder and you don't need to add
any page builder like Elementor that slow down your website and you can
easily build your homepage using this Gutenberg builder and it will improve
your page speed and make it Core Web Vital friendly. and if this video helps
hit the like button and if you have any doubt regarding 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. I will see you in the next video. thank you