Hi everyone welcome to K2 blogging and in this video I will show you how you can design
a home page in your WordPress website using the Cadence blocks plugin
So I am personally using the Cadence theme and Cadence blocks plugin to design my WordPress
website and you can easily design any WordPress website using the Cadence blocks
So let's check how you can design a website like this. So as you can see that this website is probably built on generate a press theme but you will
recreate this using the Cadence blocks plugin. So let's check how you can do that
And first of all if you new to this channel make sure to hit the subscribe button and
if you found this video helpful then make sure to hit the like button
So let's get started. So first of all we need to go to WordPress dashboard and we need to install the Cadence
blocks plugin. So for this I will click on add new here and I can simply search for Cadence blocks
As you can see that this is the plugin Gutenberg blocks by Cadence blocks
So all you need to install and activate this plugin and after that you need to go to the
pages section here and let's create a new page here. Let me set the title here to home page or let me add it home page too
So here we need to assign the layout option here. So I will click on this option here page setting and here you can set different layout of your
page like as you can see that you can enable left side bar, right side bar or you can make
it full width. So this is a full width website. So here we will select the full width here
Now here we don't want this title home page too in this page
So we will disable the page title from here. Now here you can disable the content vertical padding so I will click on disable here
Now here you can also disable header and footer if you want but I will keep it as it is
Okay now we have set the layout let me just save the draft here
Now let me just preview it in a new tab and as you can see that this is how the home page
looks like. So as you can see that we have removed the title and set this as a full width
So let's start designing the hero section of this website. So for this we need two sections one is in the left and one is in the right side
So in the right side we can add an image like this. So what I can do is I will click on plus here and here you need to add a row layout
So you can simply search for row layout. Here you can select different options like you can set different to equal row layout
or you can left heavy so you can set the left to 66% and right section to 33% or you can
adjust the percentage from here like this. So let's keep it 60 40
Now here we need to add this heading so let me just copy the heading here
So I am demonstrating it for demo purposes so you can learn how the cadence blocks work
and how you can design your own website by following this video
So you don't need to follow exactly but if you follow this video completely you will
understand how the row layout work, how you can place images and how to make it responsive
for mobile devices. So for this just follow the video till the end
So here I will add a advanced heading here and here it is text advanced and let me paste
the text here like this. So here we need to add the second paragraph here so let's hit enter here or let me just
duplicate it here and let me paste the paragraph here. Now let's set it to text advanced let's keep it paragraph and let's select this option
here and let's increase the size a little bit. Now let's keep the line height to 2 or you can set it like 1.5 like this and here you
can set the line height in pixel em or rem. So let's keep it like that
Now here you can adjust the size here like this or you can set a custom font size here
as well. So let's keep it large here and let's select the heading and I will keep it XL extra large
Now you need to reduce the space between these two elements. So what I can do is I will go to the bottom margin here and I will set the bottom margin
to 0. So you can see that the margin between the heading and the paragraph is set to 0
So by default it is set to 20 so we need to reduce it from 20 to 10 or 0 according
to your choice. Now let me select the whole row layout here and let me preview it once
So as you can see that it is showing from the top left end
So we need to make it center align so as you can see that the logo start here and the content
ends here. So now we need to set this text in between this center align
So for this we need to select the whole row layout here and here you will see this option
huge theme content inner width. So that it will align to the center and it will not move to this left or right side
Now here you need to set it to full width. Now let me set a background color here
So this is the background color so you can choose the background color here
So here I am using the colorzilla extension to copy the color code from this website
So you can easily search for colorzilla chrome extension and you can install it in your chrome
browser or any other browser and you can easily get the hex code
So here let me set a background color here so I will paste the hex code here like this
Now as you have set a background color to dark so we need to change this color to white
like this. Now again I will select it and let us select the color to white like this
So we need to add a spacing from the top and bottom so for this we can use the padding here
So you can easily drag this padding like this or you can adjust the padding from here in
the advanced tab. So let's increase it to double excel and let's add the bottom padding to double excel
Now here we need to use an image so let me just download this image here and let me upload
this image from here. Alright the image is uploaded now we need to make this center align
So for this what I can do is I will select the whole row layout and I will click on here
and I will click on align middle and as you can see that now it is aligned to middle
So let's reduce a little bit let's keep it is in large
Ok now let's increase the size a little bit and let's increase the size to 2xl
Now it is looking quite good so let's reduce it to a little bit of 40px like this
So it is quite similar now. Now we need to add a button like this start now
So to add the button I will click on here enter click on enter and I will search for
advance button. Button advance like this. Now I will select this here and I will justify item to left and I will click on start here
like this. Now I can set it to full like this or you can set it as fixed or you can set a custom
width like this. So let's keep it as auto
Now here you can set the color so if you want a different color then you can add your color
from here so white is looking quite good. Now here we need to add a icon here so to add icon I will click on icon setting and
I will add a icon from here. So let's add an arrow icon here like this
Now you can adjust the icon size if you want like this
So let's keep it 25px. So let's increase the text size as well to 25px like this and let's click on here and
let's adjust the top padding to extra small and let's adjust the bottom padding to extra
small like this. Let's increase the right to large. Let's keep it to large like this
So it is now looking quite good. So you can adjust the button according to your website or according to your preference
Now here you can change the color to similar color like this
So I can simply drag it here and I will select it here and here I will select the button
style here let's change the background color here like this and you can change the hover
background color as well to blue. So as you can see that it is now changing its color
So this is how you can set the hero section. Alright we have set the hero section so let's make it mobile responsive as well
So what I can do is I will click on the preview button here and I will click on tablet
So we need to adjust the font size in tablet as well
So let's click on paragraph let's set the size to 24. Let's click on button and let's keep the typography to middle and let's keep the icon like this
Now let's click on general and let's reduce the size here or let's keep it as auto and
let's reduce the left and right padding from here like this and let's keep the padding
to extra small like this. So we have adjust the tablet so you can similarly adjust the mobile from here
So as you can see that the text is showing at the top and the image is showing bottom
that's because we have set this to left so it is collapsing from left to right
So if you want to add the image to the top then you can also collapse it from right to left
So I will go to mobile here and here you will see this collapse order
So let's click on reverse and as you can see that the image is now showing at the top and
if you check the desktop it is still same but if you see the mobile the collapse order
is now changed. So this is how you can swap the column between left and right
And here we need to make it center align. So what I can do is I will click on general tab and I will click on center align
So we need center align for mobile devices to look good. Now let's click on here and let's set it to align center
And as you can see that in mobile we have aligned everything in the center so it will
look good. Now let's switch to the desktop view. So we have individually changed the values in the mobile as well to center align and
the in desktop mode it is in left align. So you can easily make the adjustment in tablet, mobile and desktop
So this is how the responsive work. And let's create a different section like this as seen on
So it is completely optional. So I will show you how you can design this as well
So for this I will refresh it a little bit and as you can see that it is now looking
quite good. So we need to reduce the top margin here. So what I can do is I will select here and let's add the top margin to minus 32 like this
Now let's preview it in a new tab. So let me just refresh it and as you can see that that margin is now fixed
Now let's add the second section. So I will again add a row layout here and here as you can see that there is 1, 2, 3
4, 4 section and there is 5 section. We need to create 5 section here
So let me add 4 section first and I will show you the different approach to design it
So as you can see that we have to create 5 section here
Now we need to add the heading. So I will add the heading like this as seen on
I will copy it and I will paste it here like this
Now I need to add these images here one by one
We need to make it full width and we need to make it align center like this
So we need to increase the size a little bit and here you can also assign the row gutter
here and you can assign the column gutter if you want like this
So medium is fine and we need to change this color to white like this and here you can
reduce the size padding from here like this. Alright we can also use theme inner content width like this
Now we need to align the images to center align. So let's do that
Let's set to center align like this. So as you can see that it is now looking quite good
So we can change the color little bit like this. Alright now let's create the rest section
Some of the best from our blog. So let's copy it. Now let's click on here and click on add after
Now let's add a row layout here. I will add the single row layout
Make it full width. Use theme inner content width. And I will add a heading here and I will paste the heading like this
And I will make it center align and increase the size a little bit like this
And you can also make it like upper case or lower case like that
And you can also change its font family if you want. So let's add a system default
Let's click on 900 like this. And let's set it like font style to italic
Ok now it's looking quite good. Now we need to add the section like this
So we need to add the title of the blog post and then we need to add the images
So let me just copy the title from here like this. And I will click on add after
Or we can create a new row layout from here. So I will click on add after
Let's add a row layout. And I will add two section, two equal section
And I will make it to full width and I will use the theme inner content width
Now let's add it here. So I will click on paste like this
Now I need to add a button. So I will search for button
And I will add the advanced button here. And I will make it to left align
And I will like create blog post like this. And we can add an icon here
So let's add the icon like this. And let's keep it like that
And you can add the link here as well. And you can also select it here and you can add the link here like this
Now we need to add the image. So let me copy the image from here
And I will upload the image here in the right side. So let's upload it
And as you can see that we have added two section here and we need to adjust the typography
So let's change it to advanced setting here. And let's make it like extra large or let's keep it like 40 pixel
And let's select the paragraph. Let's change it to advanced setting. And I will set it to paragraph
Now let's keep it like medium. And let me remove it. Okay
Now it is quite close. Now we need to add the color here
And I will select the button. Change the background color here. Like this
And I will change the hover color from here. Okay. Now we have added one section
Now we can duplicate this section. So what I can do is I will click on here
Let's click on duplicate. And let's click on duplicate again. Now we need to make the image to the left side
So how we can do that? So for this I will click on here. I will click on the whole section here
And I will click on move to right. Like this. So as you can see that now the image comes in the left side
So let me select the second image here. Alright now we have added our popular post here
So we need to make it mobile responsive as well. So I will select the fast roll layout here
I will switch to the mobile here. And as you can see that the image is showing bottom and the paragraph is showing at the top
So we need to set the collapse order to reverse. So it is looking quite good
So we need to make the collapse order to reverse here as well
So it will show the images at the top. Now you can adjust the size in the mobile
So let's keep it large. Let's select it and let's keep the size to large here
Like this. And we can make this button to center line if you want or keep it left alone there is
no problem here. And we can reduce the size as well. So large is looking good
Alright now all the images are moved to the top as you can see that
Now let's check the tablet view here. And tablet will looks like this
So if you want a different style in tablet then you can also do that like this
So you can show the images at the top. Let's click on the second row layout and let's keep it like this
And I will keep it like this. So this is looks quite good in tablet
Now let's switch to the desktop view here. And as you can see that the page is looking quite good
And then you can add a latest post section here. So it will automatically fetch the latest post and show it here
So for this we can use the post block here. So I will click on here add after and I will click on add row layout
Now let's click on three equal row layout here or I can add a single row layout
Now I will click on plus here and I will search for the post block here
And I will select it here. As you can see that it is fetching the latest blog post from your blog
Now I will select the whole row layout, make it full width and I will use the theme inner
content width. Now you can select it here and you can remove the except if you want
So for this I will click on advance and I will click on disable the except like this
And you can disable the read more button like this. And you can remove the date, author levels and you can remove all meta tags like this
And you can also remove the category section if you want. And you can keep the image and the post title here as well
So as you can see that we have added the image and the title
You can also add a new heading here at the top. So I will click on here add before
Let's add the row layout and let's add the heading and let's make it align center
Now let's click on full width and set it to theme inner width
Now let's increase the font size a little bit. Now let's assign a background color here
So I will set the background color to something like this. And as you can see that the latest post section is now added
Now you can also set a divider like this if you want
So for this I will click on here and I will add a top divider here
So let's add a divider style like this and let's increase the padding here
And as you can see that we have added a divider and we have added the latest post here
So you can show number of post here. So you can either show 3 block post or 6 block post if you want
And you can also filter according to the category or tags if you want
So you can also change the layout like you can show 2 block post in a single row or you
can set 3 block post and you can also individually adjust the tablet column as well
Now let's change it to mobile here. And as you can see that it is looking quite good in mobile as well
So let's click on tablet here and tablet is showing the 3 column here
So let's select the post block here. And here you can change the tablet column to 1, 2 or 3 like this
So in tablet I will prefer to select 1 column like this
Alright let's switch to the desktop. As you can see that we have designed the home page using the Cadence Blocks plugin
So let me quickly publish this page. Now let's click on view page here
And as you can see that we have designed the same page like this using the Cadence Blocks
plugin and it is looking quite good. So you can also remove this bottom space if you want
So let's click on edit page here. And you can add a negative margin in the bottom
So let's increase the padding a little bit and let's remove the let's add a negative margin
So let's add it like minus 32. Now let's update it. Now let's view the page
As you can see that it is looking quite good and we have removed that spacing
So this is how you can build a custom landing page in your WordPress website using the Cadence
Blocks plugin. So if you have any doubt regarding this then you can ask me in the comment section
And if you want to build a home page like this in your WordPress website then I have
already created a video on how to design a home page like key to blogging
So I have made some modification till now and I have removed or I have added new elements
to the home page. But you can definitely follow that video to learn more about how the Cadence Blocks work
And if you found this video helpful then make sure to hit the like button
And if you have any doubt regarding this then you can ask me in the comment section
And I will see you in the next one. Bye-bye