This is a WordPress Tutorial for Beginners who wants to learn how to build just about any web pages they see on the internet, and using just the WordPress editor, a free theme, and a free plugin.
Resources:
👉 Download Tutorial Images: https://jackcao.com/download/tasters-tutorial-images
Tools I use:
✅ Web Hosting: https://jackcao.com/best-web-hosting
✅ WordPress Theme: https://jackcao.com/best-wp-theme
✅ WordPress SiteSpeed Plugin: https://jackcao.com/best-wp-caching
🔔 Subscribe to get notified when new videos are published: https://jackcao.com/subscribe
0:00 Overview: What we are going to build
2:15 Important Concept to Understand about Web Pages
2:58 Orientation of the Tutorial
3:49 Theme and Plugin Installation
4:42 Initial Page Settings
5:57 Designing the Page Header
7:01 Adding Logo
7:58 Adding Header Navigation Menu
9:23 Change the Text Color of the Header Menu
9:26 Install Google Chrome Extension: Colorfont
10:44 Designing the Header Menu Button
12:50 Transparent and Sticky Header Menu
14:01 Page Hero Creation
14:11 Initial Settings (Font Style and Color)
14:56 Editing the Home Page
15:18 Initial Settings (Remove Title, Page Full-Width
16:13 Adding Elements to the Page (Row Layout, Background, Columns)
19:58 Paddings and Margins
22:29 Adding Featured In Icons
24:00 Product Grid
24:15 Color selection
24:39 Adding Background of the Section
25:07 Add Heading Title
25:48 Add 4 Columns for the Product Grid
26:42 Add button (Styling Trick)
28:52 Duplicate Elements (Styling Trick)
30:00 Edit Sticky Header Background Color
33:52 Testimonials Section
33:59 Adding Background
34:42 Adding/Customizing Testimonials Gutenberg Block
43:23 Accordion Section
43:37 Adding Background
43:45 Adding/Customizing Accordion
51:09 Call-to-Action Section
52:25 Designing the Page Footer
53:51 Add Logo
54:17 Add HTML Text to Widget (Without Understanding HTML Codes)
55:14 Add/Style Social Icons
56:03 Add Multiple Menus for Footer Widgets
58:16 Edit Colors of the Footer Widget Menus
59:04 Edit Footer Bar Elements (Copyright, Terms and Conditions, etc.)
1:02:40 Outro
1:03:04 Speed Performance of the Landing Page we’ve just built
1:03:20 WordPress Speed Optimization
⭐ WordPress Themes:
Kadence vs Blocksy: https://youtu.be/EjQG601ljXk
✅ About the video: The objective of this video is to give you the foundation on WordPress so that you can build any web pages you see on the internet without using any page builders, like Elementor or Beaver Builder. Page builders are the main cause of site speed, so we want to avoid them as much as possible.
🎓 Case Study: Improve Site Speed (28 to 92): https://youtu.be/INvxYNH9gKk
__________________________________________________________________________
AFFILIATE DISCLOSURE: This video and description may contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. I won’t put anything here that I haven’t verified and/or personally used myself. And, you will never pay anything more than what it cost if you buy the product directly from the source. From time to time, I may even provide you with some discount codes to help you save money.
__________________________________________________________________________
#homepage #landingpage #fastloadingpage #wordpressspeed #wordpressforbeginner #wordpress #jackcao #wordpresstraining
source
Extremely helpful! I have used WordPress for years but hadn't yet used the new Gutenberg block editing. Feel much more confident now.
Great video!
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!!!
Very, very nicely done! I learned a ton! Thanks!
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?
Thanks
Great video, thanks! I guess the hardest part is finding all the images and color schemes
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.
What do you think is the best CTA Video pluging for WordPress?
no such thing as seemx or complx or etc or intimidatingx or etc, idts
How can I create a Back to Top Button with Gutemberg?
Excellent guide. I'd suggest lowering the background music just a little bit.
Make a video on travel website from scratch.
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?
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? 🙏
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?
Thanks. Just what I have been looking for. I have been with Elementor almost from the start, and running a very small web agency (around 60 clients).
I'm not 'jumping ship' from Elementor. It's good to have Elementor as another skill. But I feel it will quickly become a secondary skill to this.
I wish I found your video a lot earlier. So that, I could have build my website using kadence block instead of elementor. Are you from Malaysia by the way?
The best WordPress tutorial I have seen so far. I love the way you show us 2 windows side by side for the before and after. I was thinking about building a website with Elementor, but you have certainly changed my mind about using the FREE Kadence block instead. Definitely subscribing to your channel for more great videos like this one. Please make an updated tutorial for the WordPress 5.8 version. Thanks.
Great tutorial. Great Enthusiasm! Nicely done, Jack. Your tutorials have motivated me to move away from Page builders. Thanks for your tips.
Where’s the mobile version? There’s the weakness of Gutenberg
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!
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!
Great Jack, Kindly tell us that how we can Download all the images png and icons etc from other websites, Thanks.
Nice tutorial. I'm going into it.
Thank you
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.
I'm impressed Jack! Tomorrow I'll try that LIVE with my #AIOP #WP Site to get rid of my current (free) CMS provider…