How to Create A One Page Website in WordPress Easily (No Page Builder)
Vložit
- čas přidán 30. 07. 2024
- In this video, we will go through How to Create A One-Page Website in WordPress Easily and Without using any Page Builder. The main focus is to help you easily build a cool looking page that includes every important information about what your website represents. Additionally, the page you've built will load super fast.
👉 Best WordPress Hosting for your One-Page Website: jackcao.com/a2hosting
👉 Download Images, Videos & Text Used in Tutorial:
✅ Tutorial Materials: jackcao.com/download/portfolio
✅ Privacy Policy: jackcao.com/download/privacy-...
✅ Cookie Policy: jackcao.com/download/cookie-p...
💖 Recommended Theme & Gutenberg Blocks (Used in this tutorial):
👉 Blocksy Theme: jackcao.com/blocksy (10% OFF: JCBLOCKSY)
👉 Stackable Blocks: jackcao.com/stackable (10% OFF: JACKCAO10)
👉 Kadence Blocks: jackcao.com/kadence-blocks (10% OFF: JCSAVE10)
🔔 Subscribe for more WordPress Related Content: jackcao.com/subscribe
More about the video: We will be using something called "Gutenberg Blocks" to create the entire page. Gutenberg Blocks are native to WordPress, so you can be assured that core updates to WordPress will have lesser impact on Gutenberg Blocks.
And do not worry because Gutenberg Blocks are not what it used to be 2 years ago.
Now, it is as easy to use and as intuitive as most page builders out there. Gutenberg Blocks had a stigma of being difficult to use and complicated, but that has since changed.
I've created a lot of tutorials on using Gutenberg Blocks and many people who had used page builders in the past said that they will not go back to page builders after learning to use Gutenberg Blocks. In this video, you will learn why as well.
Chapters (Timestamps):
00:00 Introduction
02:08 Setting Up the Website (Install Free Theme & Plugins)
05:39 Creating & Designing the Page Header
06:58 Adding Logo & Changing its position
08:08 Changing the Background Color of the Header
08:27 Adding & Designing Menu Items
14:05 Designing the Header Call-to-Action Button
15:03 Making a Transparent Header
15:32 Creating & Designing the Page Footer
16:15 Changing the Background Color of the Footer
16:20 Designing the Copyright Text
16:27 Introduction of Global Color Palettes in the Blocksy Theme
18:06 Adjusting the Layout of the Footer
18:25 Adding and Designing Footer Items
21:03 Creating & Designing the Hero Section
21:32 Hide Page Title
21:48 Adding a Call-to-action section with Video Background
25:54 Adding & Designing the Page Content
26:05 "About Me" Section
27:39 "My Services" Section
32:55 "Latest Projects" Section
35:14 "FAQ" Section with Accordion
37:26 "Contact Form" Section
41:25 Linking the Sections of the Page to the Menu Items
44:36 Optimizing the Page for Mobile Devices
48:05 Outro
__________________________________________________________________________
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.
__________________________________________________________________________
#onepagewebsite #nopagebuilder
Thanks a lot. After changing themes and fighting with settings I build draft of my website. Now many things are known for me.
Hi Jack! I purchased the Stackable license using your Black Friday link and am enjoying watching you do tutorials using it.
Please keep it up! Thank you!
Thank you so much for this Jack. definitely using the website I built along with you for my portfolio as a wordpress developer. I might also develop it using plain code for my web development portfolio. Thank again!
Thx Jack! Appreciate it😊
Jack! Thank you for putting the customer first. And a second thank you for being an excellent teacher.. I am a teacher myself, and I know a lot of hard work goes into making things simple..
As always great video!
👉👉👉 Jack, muchas gracias, ¡que excelente tutorial!
Muy claro y bien explicado. Y con información muy práctica y valiosa. Saludos desde Santiago de Chile. 😃👌👍
this video has been so helpful, thank you so much for creating it, please keep the videos coming, it has been a life saver.
Thanks for sharing. I just do it step by step and it works pretty well!
Awesome! I am glad it helped. 😊
Excellent work!
Great video, easy to understand. I have a question and maybe there is a workaround to one issue I am facing. In my footer menu I put links to Privacy Policy and Terms of Use pages, which I created on separate pages. When I click on any of these links it opens the page, but from there if I click on main menu items, it does not take me where I want, because the anchor is set up for the home page and not for Privacy Policy or Terms of Use pages. What would be the most efficient way to solve this issue.
Always delivering the best...
Thank you! 😊
Very nice job!
This is awesome. Thanks
Hey Thanks for the great content and super helpful, only thing I encounter is that the Accordion blok from stackable it was kinda weird, I was able to set it up on the backend and see the content to the drop down, but once I published it and try to see it on the live page it won't show the Description only the tittle. I try searching but didn't see anything and end it up with other plugin "responsive accordion'
Thanks again and keep up the great work!
Great video. Thanks a lot. The plugin is really great because it works simply and offers many design options. And that even in the free version. 😊👍
Thank you. Amazing
Great video. Thanks
You have a very nifty Logo Jack!
Thanks, this reduce my stress.
good video and nice layout! I think the anchors are not set correctly, because you always have to scroll up to see the headers? 44:13
Hey Jack I really appreciate this video because I use Blocksy and Stackable. Can you make a video tutorial for layouts with Guenberg and Blocksy where you show how to build cool layouts like overlapping columns and stuff like that so that our designs look more professional?
Do you have some design references so I can remake them with Gutenberg 😊
I think Kadence Blocks is a lot better than Stackable
What is the Best paid Gutenberg Block editor plugin jack? And why? Thanks
Is this still viable even after the full site editing feature of Wordpress 5.9? Thank you!
Great video...but it would be nice to see develpers building sites from the ground up without using pixels..
I love 😍 the video
Hi! Thanks for your videos, I really appreciate them.
I've two questions: how can I link the buttons "contact me" to the part "contact form"? When I press it nothing happens. How can I change the button text of the "contact form"? I can't customize it. Thanks!
How can you make the Menu Nav get an active colour when selected?
Can this be done with youtube links instead of files uploaded? My videos are taking too long to load on my site
Jack, In the Hero Section the button CONTACT is not working.
After downloading the plugin when I am activating the plugin, this error appears:
'The plugin does not have a valid header'
Bro idk my contact button not working
Have you had a chance look into whether or not it's true that google punishes one pagers? Some people say they are hard to rank.
It really depends on what keywords you are targeting. I mean if you are targeting a highly competitive keyword but your one page website do not have enough content or do not provide "better" value to Google users, then obviously your one page website will not rank better. There is no "Google Punishment" per se, but I would say that if your intention is to rank on Google, you should have a "Content-Rich" website, instead of a one-page website. One page website is more suitable for local businesses that targets specific local keywords that has little to no competition. Or it is suitable for Wedding sites to inform attendees about the happenings of the occasion. The downside to a one page website is you will only rank for limited number of keywords, and if the keywords you are ranking for are competitive, your one page website needs to have good quality content and quality links (social proof / Influencers' recommendation / Quality recommendation from Bloggers (Backlinks)). I hope this make sense. 😊
My max file size to upload videos is 2mb? How is yours 256mb?
For anyone who has this issue. you need to go into your php settings and increase the max file size.
Jack,
Stackable or Kadence Blocks are faster?
There is no difference in speed imo. Stackable Blocks work better with the Blocksy Theme, Kadence Blocks works better with the Kadence Theme. But you can use both block plugins with both themes. Gutenberg Blocks are very flexible in this sense.
@@JackCao so there is no big difference in speed and functionality if you have Kadence Themes and Kadence blocks instead of Blocksy?
@@rvoo01 No big difference (opinion), but yet to be tested and proven. Will do some imteresting tests between these themes and plugins and will share that video soon. 😊
ALL GOOD AND EVERYTHING, HOWEVER, YOU GO WAY TOO FAST WHILE EXPLAINING THINGS, AND TOO FAST WITH THE POINTIING WHERE YOU ARE GOING. I AM COMPLETELY NEW TO THIS. AND VERY FRUSTRATED AND CONFUSED. NICE VIDEO THOUGH.