WordPress Tutorial for Beginners: Build Any Web Page You See

[@NoMatterTheSource]

Jack, you're the best WordPress-related content on KZbin and there's a %#$^load of WordPress content on KZbin.

[@JackCao]

Thank you for your kind words! And, sorry for replying to your comment till now. Hope you are doing well! 😊

[@chagotisurendrakumar840]

excellent information, top level teaching skill, thank you very much sir.

[@pmali2249]

Hii jack, I am totally new for WordPress site design from scratch.Right now, I am a SEO analyst and focusing on WordPress page speed optimisation without using any plugin with pure coding only.

[@LMLewis]

Extremely helpful! I have used WordPress for years but hadn't yet used the new Gutenberg block editing. Feel much more confident now.

[@Earthcrosser]

You are such a dedicated and amazing Wordpress expert! I love all your videos and they’ve all been helpful. I can not thank you enough!!!! Keep them coming Jack! You deserve a million subscribers!!!

[@antonfire5237]

Top Step by Step tutos for WP.

[@GrantSpoon]

I followed you all the way and I am amazed how easy that was. Certainly no harder than Elementor. I learned so much. And the coolest thing>>> the test page I created that is 95% of what you made is scoring 100 for mobile and PC. Wow. Much appreciated Jack.

[@wd1534]

where do you get the score? I just finished the page

[@victorl.mercado5838]

I've watched several WordPress tutorials, but this one is the best, by far. Thanks for being thorough and explaining the nuances of each component.

[@craftinindia1373]

Very Very Informative

[@saleemdigital]

love all your videos salam from Baghdad.

[@swarnaswarna3416]

I am totally new in building website. I searched but yours is so appropriate for a begginer. Its so easy to understand and you have explained it very easily. I can see you have put a lot of effort in these videos. Very Very helpful. I wish you all the best. May you gain the audience attention you deserve.

[@JackCao]

Thank you for your kind comments, and I'm glad it was helpful! 😊 Feel free to ask if you have any questions.

[@IainMacGillivray]

Great stuff Jack! I'm a Beaver Builder and Themer user, but so interested in getting into Gutenberg to slim things down and speed things up!

[@seadude4869]

very nice tutorial! Definitely one of the best.

[@JackCao]

Glad you think so! Thank you!

[@salvirji4873]

That's for this wonderful and easy to learn tutorial video.

[@JackCao]

You are most welcome! Glad you found it easy 😊

[@andval256]

Excellent guide. I'd suggest lowering the background music just a little bit.

[@angel0072]

high quality content, thanks :)

[@chotikajnk5095]

Tutorial is just awesome..It is really helpful for a newbie like me! Thank you so much

[@JackCao]

You're very welcome! Glad it was helpful!

[@anuj7286]

Amazing video sir. I learned lots of things as a beginner this videos shows all the features that contains in free Kadence block. thankyou so much!

[@JackCao]

You are most welcome! Glad the video helped 😊

[@dhannyboy3085]

Great video!

[@PatriciaPaynter]

I'm so happy that your video found its way to my KZbin feed. Your approach of using just the WP editor and a plug-in to demonstrate how to re-create an existing landing page is unique and soooo relevant! I really appreciate all the effort you obviously put in to producing the video and hope that you continue along your path. Great stuff!

[@JackCao]

Glad you found it helpful! 😀 If you have any tutorial request feel free to let me know.

[@PatriciaPaynter]

@@JackCao Thanks! I'm working my way thru your instructions step-by-step, replaying the video over and over, section by section. I'll get there...eventually. Lol

[@wd1534]

@@PatriciaPaynter I finished the webpage of this tutorial doing the same :)

[@eddock2402]

Nice tutorial. I'm going into it.

[@crootasa7498]

Great tutorial, valuable content - I appreciate your sincerity and focus on delivering a high-quality website from end to end at NO cost. We need more like you around!!

[@JackCao]

Thank you! Always happy to help, and glad it was helpful!

[@victorbied1]

Very, very nicely done! I learned a ton! Thanks!

[@chinabuildingdesignshow9304]

good work , man!

[@andy.puempel]

Great tutorial. Great Enthusiasm! Nicely done, Jack. Your tutorials have motivated me to move away from Page builders. Thanks for your tips.

[@wd1534]

Same. I prefer webpages like this one, not animations flying everywhere. I use only Gutenberg for now

[@aditya02041991]

I'm using Kadence. Totally satisfied with free version. Speed, easy to use, features etc. Perfect. Request you to create a light weight homepage on Kadence using Gutenberg for online courses website. Best of luck. 👍

[@JackCao]

Yeah Kadence is awesome! I love it too! I will look into the best way to build an online course website with Kadence. Thanks for the suggestion! 😄

[@JaxOn3]

Do you plan on making more gutenberg / kadence (free) guides since the wp update? It's probably just me over/under thinking, but i keep getting frustrated esp when not using transparent headers with all of the settings from the customizer and the page settings options - change some in one place and not the other etc - anyway i enjoy your content and efforts and look forward to seeing more of you guides building more complex designs - thanks!

[@JackCao]

Yup working on "magazine style" home page tutorial now.😀

[@amkelamkel8794]

Great tutorial Jack. Thank you for sharing man. Can we have the theme files for the tutorial?

[@JackCao]

Hi Amkel, thanks for your comment! What do you mean by theme files? I think the images used in the video are shared in the description of the video: jackcao.com/download/tasters-tutorial-images

[@amkelamkel8794]

@@JackCao If we can have the Theme Template for this tutorial.

[@ronarmengol1677]

Hi Jack...Amazing stuff....learned a thing or two as always

[@larryodaniel926]

Great video. Opens your eyes to the possibilities of Gutenberg.

[@JackCao]

Thank you! Hopefully you will use Gutenberg Blocks going forward.

[@charlesbailey7170]

Great video, glad I found it. I'm just getting started in WordPress and I couldn't see how you turn a general WP site into a modern looking site. This will be a great help.

[@JackCao]

Glad it was helpful! 😉

[@MarketingSavvyRockstars]

Thank you

[@codexdude2248]

That's what I'm looking for, thanks

[@JackCao]

Glad I could help!

[@kksuccesstraining]

Great Video. Takes time but it is worth it. The skills gained by following along are worth thousands of dollars. Imagine the charges in all these Boot camps. Here you get it for free. Not free really because I had to follow along with my laptop for 1 hr. God bless you man for your teaching gift.

[@JackCao]

Thank you and god bless you too! I am glad the video helped.

[@JacobSmith-vi7xy]

Awesome Content🔥! By inspired your video I Just Installed the kadance theme and Block Builder. Would like to watch more video with kadance. Much Appreciated 😍

[@cindybrewty9013]

Thanks so much for your amazing videos Jack. I had zero knowledge of Wordpress before I started watching your videos. Love them - especially the Kadence related ones. I have watched this particular video maybe 5 or 6 times and built & rebuilt the same tasters club site 3 times now & feel like I have learned a ton of stuff. Would really appreciate if you could do a video on optimising for mobile because with this tasters club site the accordion section & 2nd last section the text does not wrap around in the mobile view. I plan on getting the Kadence pro so, maybe there is some plugin I can use for that. Thank you again.

[@JackCao]

I should have optimized for mobile for this tutorial. But anyway, it is all about playing around with the padding and margin. In the Kadence Row Layout, there are responsive view and layouts. Check this part from another tutorial, I hope you will get some insights on mobile optimization: kzbin.info/www/bejne/fXfWk5VqjKprpZI

[@wd1534]

I did the exact same webpage, you can optimize it for tablet and mobile in Kadence for free, no need the pro version for that.

[@arieonoDelaVega]

Thanks

[@mountainman4135]

Great video, thanks! I guess the hardest part is finding all the images and color schemes

[@JackCao]

For color schemes try: coolors.co/ Its what I always use. 😊

[@mountainman4135]

@@JackCao Great suggestion, thanks!

[@wd1534]

@@mountainman4135 Jack provided a link to download all the images of the website, it works fine

[@JanisMcAdoo]

Thanks for the awesome video. Gave me alot of confidence in switching from Divi to Kadence. I could see alot of the similarities. Still have to figure out how to change the width of row layouts that are within a row layout. That is easier to do in Divi. But, I can't wait to try it out.

[@wd1534]

So you don't recommend to buy Divi?

[@GrantonTheFly]

Loving these tutorials. Don't seem to remember you talking about child themes with Kadence?

[@postino1996]

Jack, this is awesome, thank you so much!! I cannot figure out how to increase the spacing between the menu items with the Kadence customizer. Does that need to be done thru custom CSS classes? Also, you show how you can duplicate the row layout, but can you duplicate a section in the row layout?

[@matthiasklein9861]

I'm impressed Jack! Tomorrow I'll try that LIVE with my #AIOP #WP Site to get rid of my current (free) CMS provider...

[@wd1534]

Hi Matt. Have you done?

[@veibes8796]

Trying to get off from divi. This helps me a lot man. Thank you Jack! And keep going with this good Channel. And keep up with Gutenberg tutorials pls :D

[@JackCao]

Glad that helped! And thank you! If you have any suggestions for a tutorial feel free to let me know 😀

[@veibes8796]

@@JackCao Hey Jack! Definetly want a GeneratePress Tutorial :D Since GeneratePress is a good Overall Theme for Websites and Stores. A Great Tutorial like this, just with GeneratePress would be AWESOME 😀 Just Subscribed and hit the BELL yo!

[@wd1534]

@@veibes8796 Can you use Kadence blocks with GeneratePress theme?

[@tomm1677]

Wow, I'm glad I found your channel and this video as I am moving sites from Elementor and BB to Gutenberg. My question, yes you get better sites speeds but is building sites slow in GB then say Elementor? If you were an expert in both are they equally efficient? Thanks!

[@JackCao]

Yes they are. I am provision in both Elementor and Gutenberg and both have a learning curve but once you got the hang of it, they are equally efficient. It is all about getting familiar with the platform.

[@simonkerridge]

Good tutorial, Jack. If I may make a respectful suggestion; I believe you could have saved some time and effort by using some of the Kadence theme features. Specifically, setting the colours (such as default text colour and the page background). Also, the Kadence theme has some great colour palette features that especially work well when one also uses Kadence Blocks. This would mean you have to do less work configuring colours in the individual blocks. I certainly agree with you that Gutenberg blocks and themes such as Kadence are the future and produce more efficient websites than those created with page builders.

[@JackCao]

Great suggestion Simon! The color palettes are definitely useful and will make the process much easier. Thank you for pointing that out. I'll start to use color palettes in future tutorials. 😊

[@wd1534]

Very good advice, thank you Simon!

[@msaqiib]

Great Jack, Kindly tell us that how we can Download all the images png and icons etc from other websites, Thanks.

[@allan-6604]

Scrap with httrack

[@xiujulan9503]

Great tutorial, follow your vedio , I setup my first website , But why I can't see the "row layout" at 17:12 when I edit the home page . I use the same theme - kadence .

[@wd1534]

Click the + button or add a block then type "row" if you can't see it. It's the most important block. You will see it

[@MoroccanFurniture]

Hey Jack, Great tutorial. How more difficult it is to create the same page using Generate press? Im looking for the fastest speed possible but i understand that Generate press is more for code savvy . Any chance you can build this same website using Generate press? Thank you for your efforts. I did a lot of research on youtube and your tutorials are the most helpful, straight to the point and definitely of greater value.

[@JackCao]

The same page can be built with Generatepress, just that the header and footer will be a little challenging (The logo and menu section and the those menus at the bottom). Other than that, the process of creating the middle part (everything created with the WordPress Editor) is going to be the same. I have created another video that uses Generatepress (though not related to Taster's Club), but I think it is a good tutorial on Generatepress. I think that if you want the speed, without the headaches of coding and stuff, you should go with the Kadence theme. I have done a full comparison video: kzbin.info/www/bejne/bXqveqKartigsMU It shows that Kadence is not far behind in terms of speed. But, Kadence is leap and bound ahead of Generatepress when it comes to the features and functionality. Anyway, feel free to send me a request to build up any page you see on the internet. My email address is [e-mail]

[@sagar9808116522]

yop are a gem bro !! I wish you Great Future and my wishes works -;)

[@ZeeshanAli-hx6ep]

great content, hi my question is about where you get images and how to edit and use them in wp? can you make a video on it, please.?

[@JackCao]

Hi Zeeshan, you can get the images here: jackcao.com/download/tasters-tutorial-images I just did a right click on the web page and "view source" and then I "Control + F" to find ".jpg" and ".png". They will have all the image links there :)

[@msmaldiviano]

Thanks for the great video. I'm using kadence theme, but I couldn't figured out how enable sidebar of pages and posts. Also, why you need custom link in menu?

[@JackCao]

Custom Link: That's because I do not have a page ready to be linked yet. That's why I created a custom link that links to "#", so when some one clicks on the link, nothing happens. On your WordPress dashboard, go to appearance >> customize, and it will bring you to the theme customizer. Then, under "Blog Post", select "Single Post Layout", and scroll to "Default post layout", and you will find a layout that comes with a sidebar. Hope this helps.

[@msmaldiviano]

@@JackCaothanks for the reply😊 It helped. But it doesn't look very good.

[@JackCao]

You need to customize the design of your menu in the Header.

[@wd1534]

@@msmaldiviano if I can see your webpage, maybe I can help.

[@fatjay9402]

I disliked it for hating on page builders :P but thanks good video :)

[@pauldelagrave698]

With blocks now allowing you design pretty much anything, would you recommend using a block layout for your footer or should we still resort to using widgets in our footers.

[@JackCao]

For Footers, I would still recommend using the Theme options as they are optimized for it.

[@shrotkatewa]

Thanks Jack for the awesome video as usual! I know this is one of your earlier videos but it is still so amazing! Quick question - I purchased the Kadence theme after watching several of your videos (based on your recommendation and the link). I now wanted to add a hero image just the way you've done it in this video but I want to make it scrolling image (3-4 images) with some text on it that also scrolls along with the image. Any idea how to do that? Seems like it is not currently possible to do this in Kadence. Any help will be very much appreciated! Thanks!

[@JackCao]

I think what you are looking for is a slider (Advanced Gallery - from Kadence Blocks). However, I dont recommend using it at the top of the page because it will slow down your site.

[@shrotkatewa]

@@JackCao I tried that and I was having some issue with it. Can't remember exactly what. Nevertheless, will give it a try again. You make a good point of it slowing down the website! I guess I'll ditch the scrolling images idea altogether! Any suggestions on where I can get inspiration for website layout and design? Thanks for the prompt response!

[@JackCao]

@@shrotkatewa Check this site: uizard.io/ They show you templates, and you can even draw a layout on a piece of paper and it will turn that into a webpage for your reference. Quite an interesting tool. Otherwise, you can use the Kadence templates provided here: kadence-theme.com/starter-templates/

[@DavidMaciasPhoto]

Hey Jack, love your very detailed tutorials, incredible. I am stuck though, I've followed your every step and I can't see the + when I click on the layer for the buttons, I'm stuck there to add more content, why is the + not showing up on my interface? Thanks for the help.

[@JackCao]

My guess is the plus is blended to the black background. Try clicking around the wordpress editor and see where your cursor lands. The plus is usually on the far right of the layer you have selected.

[@DavidMaciasPhoto]

@@JackCao Jack, thanks for the prompt reply, you are awesome. I figured it out, there was a line underneath the buttons, as soon as I removed it I was able to see the + and I continued the rest of the tutorial. THANK YOU!

[@DavidMaciasPhoto]

@@JackCao One more question Jack, do you think it's worth buying the pro Kadence features?

[@craftinindia1373]

Hi Jack. I have these issues: There are 2 Products, 1 Template with no focus keyword set. 2) There are 12 Pages published posts where the primary focus keyword does not appear in the post title.. 3) Some Opengraph meta tags are missing. 4) The size of the HTML document is 54 Kb, over the average of 33 Kb and our recommendation of 50 Kb.. Can you refer any of your video to fix these issues?

[@manumartinezkcxu]

What do you think is the best CTA Video pluging for Wordpress?

[@keywordniches2207]

how did you get all the images at once in a zip file?is there a fast way to do so?

[@jeromevaleska506]

Hi jack, my woocomerce website currently uses themify themes and themify builder, it feels a bit heavy, and I want to change to Kadence themes and use Kadence block, but I don't know how and I'm afraid the website will be messy, can you help me make a video tutorial please? 🙏

[@JackCao]

Tricky! Would you mind if I help you out on a staging environment? I will create the tutorial based on your site. Please send me an email [e-mail]

[@wd1534]

Just make a clone of your website and try on it

[@mikecheongx]

thanks os much! I did it half way and got this error "Updating failed. The response is not a valid JSON response." not sure why?

[@wd1534]

I've just finished it and it works perfectly. Just restart from zero with a new install

[@EbonyWhitee]

Hi Jack, I searched Kadence and Blocksy and neither of them showed up. I found other fast WP themes for 2022 and none of those showed up either. What's the deal with that?

[@wd1534]

Go to the WP dashboard, appearence, themes. Click "add" then "kadence" in the field form on the right. You will see Kadence Theme appears. Then go to plugin and add "Kadence Blocks" if you want to follow this tutorial. I've just finished it and made the entire landing page!

[@EbonyWhitee]

@@wd1534 Thank you so much! I’ll go back through the tutorial when I get a chance.

[@AlisonRicardo]

How can I create a Back to Top Button with Gutemberg?

[@JackCao]

That's a theme feature. Kadence has it in the theme settings.

[@wiltonyu4951]

can I use kadence block only without using the kadence theme?

[@JackCao]

Of course you can.

[@wd1534]

Kadence blocks works with other themes?

[@Anishchanda]

Make a video on travel website from scratch.

[@JackCao]

Any web page for me to reference and build from scratch? Send me an email [e-mail]

[@manishjaisinghani4941]

Wow... I cant imagine I watched 1-hour long tutorial video... I would like to know is how do I disable the right-click option for my website.

[@JackCao]

Maybe you can check this out: seoneurons.com/how-to-disable-right-click-wp-with-without-plugin/ Or you can install a plugin to do that. Hope this helps :)

[@manishjaisinghani4941]

@@JackCao not able to find the video of optimization and speed test of the same project I.e. taster club

[@JackCao]

@@manishjaisinghani4941 Oh I didn't optimize for this site. All I needed was just to install the WP Rocket plugin, and the speed went to 90+. So, I thought there is no point in optimizing this site.

[@manishjaisinghani4941]

@@JackCao it is showing 7 on Google pagespeed insight

[@JackCao]

@@manishjaisinghani4941 You mean now? I am actually using this domain for something else now. When I tested this page when doing this tutorial, it was showing 70+. I initially intended to create a separate video to optimize the page, but I realize there is nothing much to talk about because I installed wp rocket and flip the switch on all the optimization features, and it went 90+. So, I didn't create a new video optimizing this page.

[@kaleemabbasi2489]

What about mobile responsiveness. I am facing issues in mobile and tablet responsiveness.

[@JackCao]

Sorry I missed the Mobile optimization. Maybe you can check out this video, I did some mobile optimization, maybe it will help: kzbin.info/www/bejne/o4e1f3iEireti8U

[@junglestar]

Where’s the mobile version? There’s the weakness of Gutenberg

[@JackCao]

That's not a weakness, it is just that I forgot to create that portion for mobile optimization in the video. All of the other tutorials I did after this has a section for mobile optimization. Such as this: kzbin.info/www/bejne/fXfWk5VqjKprpZI & this: kzbin.info/www/bejne/lanFoa2KqM-cfLs

[@tyserie9057]

Fucking legend!

[@zes7215]

no such thing as seemx or complx or etc or intimidatingx or etc, idts

[@purpleday4379]

The more I try Gutenberg the more I love Elementor. Plus this video is strictly amateur hour, you barely knew what you were doing. You should practice your tutorials before you record them.

[@wd1534]

I did the exact same landing page with Gutenberg and this great tutorial and just sold it $600. :)