Build a Fast Loading Home Page from Scratch on WordPress with GeneratePress

[Full Step-by-step GeneratePress + WordPress Tutorial] How to Build a Fast Loading Home Page from scratch. With the help of GeneratePress Premium and the Ultimate Addons for Gutenberg plugins, you can now create a stylish, beautiful, and fully functional home page that Google PageSpeed Insights will love.

Plugins to Install for this Tutorial:

Resources:

Time Stamps for easy navigation:
00:00 Introduction
1:32 Concept of how Page Builders work
2:14 Demo Start
2:32 Creating Your Home Page on WordPress
4:09 Adding a Logo to Home Page
5:43 Creating Menu for your home page
6:27 Create a Blog Roll
8:55 Adding a button to the menu
11:12 Change color for the Menu Text
12:09 Section 1 - Creating the Home Page Call to Action
13:10 Remove Default Page Header on a WordPress Page
13:31 Remove Sidebar from a WordPress Page
14:10 Important Settings to create a Full Width Background
14:57 Adding Image and Text Side by Side on WordPress
16:44 Adding a Header
17:21 Creating a Stylish Button on WordPress
21:55 Section 2 - Creating a Full-width background Section with Columns on WordPress
22:13 Adding color to the full-width background
22:49 Adding columns
23:51 Adjusting the Position of an element
24:03 Adding items within the columns
25:16 Adding a Link to the Button
25:50 Adjusting the white Spaces between elements (Padding)
26:47 Adding page separators
27:48 Section 3 - Creating the 2nd Call to action
29:08 Adjusting the Margin of the Page (Covering up unnecessary Spaces between sections)
30:02 Section 4 - Creating a small section of about me
31:37 Section 5 - Creating a Section for Giveaways
34:03 Section 6 - Adjusting the Footer Area
38:26 Changing the Color of the Footer Items
39:00 Adding elements on the Footer Bar
39:48 Change Background Color of the Footer Bar
40:42 Testing the Site Speed of the Home Page

✅ About the video: This video is part of the "Start Your Personal Brand Website" video series. This series is made for people who are mentors, coaches, consultants, Artists, Fitness Trainers, or whoever needs to build a personal brand to uplift their status.

🎓 Here is the video series plan (it might change over time). When a video in this series is published on this channel, the link to the video will be included below:

Part 10: Creating a Survey Funnel

📽 I hope this video series can impact someone like you to build a personal brand and create a positive influence in people's lives. Hope you enjoy! And, please help to leave a short comment and like this video. It will really help this video to reach out to more people.

__________________________________________________________________________

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 #fastloadingpage #wordpressspeed #wordpressforbeginner #wordpress #jackcao #wordpresstraining

[queenofthehousehold]

Jack, I can’t thank you enough for this tutorial! My page speed was 21, but it is now 79! All because I was able to delete Elementor. I had no idea I could build a page with just Wordpress. Your instructions were so easy to understand! Thank you!

[wmforema]

Jack, just wanted to thank you for an excellent tutorial video! The level of detail was excellent and your pace was perfect. Thanks for putting this together, it answered my questions completely!

[GirlMeetsWealth]

Thanks so much Jack! This was such an in-depth tutorial! I'm new to WordPress and you made it easy to follow along :)

[davidadams]

Learned a lot, thank you. Been using Elementor for a while but wanted something easier to use for posts, Gutenberg seems like the right tool.

[KodyKimani]

This is brilliant thanks! I am brand new to GP and this really helped me!

[jasonduckworth]

@jackCao I just want to say thanks for this awesome tutorial!

I love Generatepress but have alway struggled with design (not being a coder).

Thanks again !

[KagelstradingDe]

Well done, Jack. thank you for this tutorial.

[oversmartblog]

Waoo... Superb This was very useful video for me.

[SyWong]

Hey Jack, thanks so much for the great tutorial. I'm on my way working on generate press. Cheers!

[peakminute]

Great tutorial. Customizing takes a lot of time, but when it's done- it's done. I need to change my theme and get rid of some plugins to speed up web loading...

[dinkar]

Thank you so much i really loved the way you Design homepage

[webjumpmedia]

Awesome vid. It will be so awesome if you do one using the generateblocks plugin next time!!!

[CoachJayCFitness]

amazing tutorial for wordpress.. keep it up sir..

[StructureFonction]

Thanks for your work ! You win one more sub. :)

[yuancao]

great! bro! after generating 40k euros per month by online shop, i try to do my frist amazon affiliate site, thannks so much this tuto, by the way we have the same family name,

[traumegaz]

l just went to your site, your links below the you tube pictures are off on my screen, just a heads up for you to fix. Im following this video now. Thanks for the information

[dinorossi]

Is there a tutorial where we can build a hybrid site between magazine style and blog with blocks ?

[monicabouteiller]

Wow! Jack, thank you very, very much for making this video. I have been researching a long time looking for a video I can really follow and understand. I'm playing this back now, taking notes and will do this on a test site first. I already have an online business but afraid I might mess it up. I'm setting up my test site now... are you promoting Generate Press theme?

[havsgurkan]

Thank you for a very instructive video! I have followed it stept by step and I am so impressed by what I have achieved. It is so cool, and my wife still doubt’s I have done it only by looking at your video😊. And, of course I used your link to buy the GP. At 11:30 you go to Customize > Colors. Your menu looks different from mine and I am not able to change Home in the main menu to stay yellow. All the rest is okay but not the Home button. The menu I get after clicking colors is Body, Header; Primary Navigation, Secondary Navigation, Off Canvas Panel and so on. I don’t get any sidebar. I just see Background Color, Text Color and so on immediately. Do you have an idea what I am doing wrong?
Kind regards, Jonas

[monicabouteiller]

Hi Jack! Thank you. I read the link you sent and used the CSS code h3 {
line-height: 1.5em;
} in the Generate Press Premium Appearance => Customize and copied into the CSS area. It didn't change anything. Maybe I put the CSS code in the wrong place? I changed the 1.5em to 1.0em and that didn't work either.