ฝัง
- เผยแพร่เมื่อ 2 ก.ค. 2024
- In this Gutenberg Blocks Tutorial, I will show you how to create a Magazine Website from Scratch using the Kadence Pro theme and Kadence Blocks Pro. Get your Kadence Membership (with the latest discount):
👉 Get Kadence Pro Theme: jackcao.com/kadence
👉 Get Kadence Blocks Pro: jackcao.com/kadence-blocks
🔨 My Recommended WordPress Tools:
✅ Web Hosting (for Speed): jackcao.com/siteground
✅ Best WordPress Theme: jackcao.com/kadence
✅ Best Speed Optimization Tool: jackcao.com/wprocket
🔔 Subscribe for more WordPress Related Content: jackcao.com/subscribe
❤ Resources mentioned in video:
✅ Magazine Site Images Download: jackcao.com/download/magazine...
✅ Kadence Color Palette: kadence-theme.com/knowledge-b...
⌚ Chapters (Time Stamps):
0:00 Introduction
1:06 Blueprint of the Magazine Style Website
2:17 Part 1 of 7 - Settings
2:25 WordPress Theme Installation
2:56 Adding Necessary Plugins
4:40 Adding Post Content, categories, and Featured Image
4:52 Create Categories
5:13 Add Content
6:42 Kadence Theme Color Palette
8:29 Create a Home Page for the Magazine Style Website
9:47 Activating Kadence Blocks Pro Elements
10:19 Part 2 of 7 - Header
10:39 Add Logo to a WordPress Page
11:06 Changing the Size of the Logo
11:11 Alignment of Header Elements for Kadence Theme
11:30 Creating Menu Items
12:46 Change Background Color of the Header for Kadence Theme
14:23 Add Icons to Menu Items
16:15 Part 3 of 7 - Page Hero - Creating an Image Grid
33:24 Part 4 of 7 - Adding Page Elements
33:44 Edit Page Settings
34:31 Page Carousel (Top Stories)
42:10 Catergory Section with Post Snippets (Photography & Travel)
51:48 Latest Stories
56:23 Part 5 of 7 - Sticky Sidebar
1:01:50 Part 6 of 7 - Below Content
1:02:14 Category Tabs
1:08:56 Side Bar Post Snippets
1:10:55 Part 7 of 7 - Footer
1:11:06 Adding Hooked Elements for Footer
1:15:05 Kadence Theme Customizer for Footer
1:15:28 Changing Background Color of Footer
1:17:05 Adding Hooked Elements to Footer using Widgets
1:17:47 Add Search Bar to Footer
1:18:08 Add Social Icons to Footer
1:18:59 Amend Copyright Footer Text
📽 More Helpful Videos:
✅ 11 Gutenberg Block Plugins: • Top 11 Gutenberg Block...
✅ Will Multiple Gutenberg Blocks Slow Down WordPress Site: • Will Multiple Gutenber...
✅ Site Speed Case Study: • Case Study: Speed Up W...
✅ Build a Fast Loading Home Page: • Build a Fast Loading H...
✅ Improve Site Speed (9 tips): • How to Speed Up Your W...
✅ Build a Lead Capture Page with Gutenberg Blocks: • How to Create a Lead C...
__________________________________________________________________________
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.
__________________________________________________________________________
#magazinesite #kadencemagazine #kadenceblocks #kadencetemplate #kadenceblockspro #kadencetheme #kadencewptheme #kadencewp #kadenceblockstutorial #wordpress #jackcao #wpblocks #wordpressblocks #gutenberg #gutenbergblocks
Learned a LOT doing this. Thank you Jack
Thanks a lot Jack, the tutorial is still the best reference at 2022 of how to create magazine website.
Thanks Jack. This is a very helpful video. Gave me lot of ideas about building my own blog site
Merci beaucoup Jack, le tutoriel est toujours la meilleure
Thanks Boss, Finally the video I have been waiting for so long is here. Getting into the video right away. Thank you again! 🙏
My pleasure! Hope it helped! 😊
Great and useful video. A big thank you for it.
Duuuude! Great job and tutorial. I went with more of a New York Times look, but your video helped out a lot. Thank you!
Finally! Thank you for this!
Hope it helped 😊
Thank you for this great video 😊
Really liking this channel. I watch a few WordPress related channels, especially those focusing on Gutenberg and Kadence.
Your focus seems to be similar to mine in that page speed is what you look for most, along with ease of use.
I've been hoping to see a magazine template in the Kadence starter templates but following this video I don't need to wait any longer.
Glad to see my focus aligned with yours, Gary!
Another brilliant video, Jack. No one better!
Thanks Dr. James! Looking at your site now 😀
Jack Cao 🤗
Thank you for a great video!- just what I was looking for. I will be following you and appreciate any information and resources regarding Kadence theme and blocks.
Thank you! I have done about 6 tutorials up to now, and will continue to add to the list. You can find all the tutorials here: th-cam.com/play/PLaWK8UfrNqw3605EvDefj4b697LbP_UiG.html
Excellent tutorial 👌
Glad you think so! 🙂
aha! exactly what I have been looking for. Thank you!
Glad I could help! 😊
greatly granted to us thanks a lot for your effort and appreciate al lot. good days. ✔👍🌹
Excellent video!
Thank you!
Great video again. I really appreciate your work and effort. I personally started with DIVI but having no idea at that time about the wordpress basics. My recommendation to everybody: whatever you do ... get the basics first ... ;-) So I moved to Astra in combination with Gutenberg and combined that with the free Kadence blocks. But having a look at the Kadence theme it did not look too bad so for my current project I went for the combination of the Kadence theme with the Kadence blocks. First ... with the free versions but for some weeks now with the Kadence Pro version. Your current Kadence video really gave my knowledge an extra boost so I would love to see more in depth videos like that in future to be able to use more of the advanced features that Kadence offers. Thanks again ... Cheers!
Have you checked this out: th-cam.com/video/W1zJo7M21wk/w-d-xo.html
Finally got round to fully watching this. Great work again Jack, it really is making learning this theme and blocks super quick :) Something I would love to see on a full site build like this, speed tests after each section or page is done, would that be something you could do? We seem to hit page speed insight issues sometimes with combinations of elements, particularly if setting a row background to an image with elements then over the top. That said, I'm wondering if some parts we should be doing as hooked above the fold?
I clicked like before I even started hehe
Finally the video that I was waiting for! I don't think there is a better tutorial out there about Kadence them and using it for building a blog site. Just one question - you didn't show the post page and how to customize that! Can you also make a short video on how to make a beautiful yet practical post section design using Kadence? I don't like their default look. Thanks in advance! :-)
By post section, do you mean a "Post Category page - where all the post under the same category will appear?"
Best option is Blocksy + Kadence Blocks + PostX.
Hi Jack, Thanks for all your tutorials. These are lifesavers. I have a query, black background vs white background, which loads faster in a webpage?
Makes absolutely no difference. Haha! 😊
Great video again Jack! Love them all. Just a question: when exactly do you use the customizer and when the Kadence tools. Is there a basic rule?
The theme customizer will control the header section (Menu, Logo, etc), the footer section, the sidebar, and the padding and margin for the content area (but not the elements of the page). Basically, anything that you can't control through the page itself will be controlled by the Theme customizer. Does this help?
Thx Jack, very helpful (again). I work with Kadence now and my Pagespeed score increased from 22 to 78 on mobile (just without further optimizing). Top!
Great tut. Thumbs Up. From about 17:00 to 28:00, why did you start with an image overlay block on left, and then were able to use paragraph blocks instead on the right to duplicate the appearance/settings? Why weren't they image overlay blocks too?
He copied and pasted the style from the left section .. no need to do any style changes on the small images on the right
Thanks Jack! I am curious to know what the speed test looks like on a site like this though.
Currently, it is not ideal. It is hanging around 60 to 70 ish. I've talked about this in another video, whenever a page is drawing information from the server, in this case, the Post Grid/Carousel block, it will usually slows down a site. th-cam.com/video/VU5VS0Po4h4/w-d-xo.html
I will do another video to show you how to optimize a site like this. 😊
@@JackCao Awesome, thanks! You quietly have the best Wordpress speed optimization channel on TH-cam.
There free magazine blocks there but few free layouts, but there are many plugins and themes supports Elementor for free but it gets hits on page speed metrics.
Hey bro can you create that with generate press and Gutenberg or add ons of Gutenberg
great video ! can you share the pagespeed score for this setup please.
Currently it stands between 60 to 70. This is due to the Post Grid/Carousel drawing information from the server, which requires a little more javascript to load. So, this page requires optimization which I will do another video on it. 🙂
Hi sir, I have a problem with hyperlinks in generate press. The links are visible only while editing. It is not visible on preview and real site.
You mentioned that page speed is impacted by the use of post carousel block. Is it the number of times you use it for a magazine type site or the fact that are above the fold?
All my regular websites have a latest blog posts section towards the bottom of the page and I've not had any issue with speed.
What would be the alternative if you want a fast magazine theme? Would you somehow replace some of the carousel sections with a static section?
If you use carousell blocks, it is inevitable that they load javascripts, and this adds to the total loading time. The placement of your carousell (above or below the fold) plays little role to improve the site speed.
What would help is have a way (or a plugin) that minify javascripts, defer and delay the javascript loading. I recommend: jackcao.com/wprocket as they are the best at this.
As a general practice, I would focus on the above the fold content. I'll only serve the most basic but relevant content that users want to see, and most of the time, carousells can be avoided on mobile.
PAID :) ARRRHHHHHH
You saying this bcoz u don't know about him. I think You just watched this video only . Don't comment unless you know about that person. This is not good.
Thank you for defending me, I really appreciate it! Honestly, I didn't take this as offensive, I think Kevin has good intentions 😉
Thanks!! Can you please update the site speed and performance?
Currently, it is at 60 to 70 ish. Whenever a page is drawing information from the server, in this case, the Post Carousel and Grid, it will usually slow down the site. I will do another video to optimize the site speed soon. 🙂
Love this tutorial, certainly got me interested in Kadence. However I have Astra (due to price). Do you think Astra can be adapted for the creation of a site with same functionality as this Kadence site?
A theme has limitations. You can only control the header, footer, sidebars (if any), and the spaces that goes around the pages and posts. It cannot help you on the design elements of the page. So, I would say, the same can be achieved with Astra, if you use "Kadence Blocks Pro" because Kadence Blocks provides you with the elements to style your page.
@@JackCao thanks so much for your input. Ended up switching back to Kadence pro in the end. Keep up the amazing work you do!
@@pdbooch You are most welcome!
Jack, when you fast-forward, what was your background music? Who is a singer?
Here's the full music, enjoy! 😊 th-cam.com/video/BE_93QsrsT8/w-d-xo.html
for a site that's like a major publication with multiple writers, would you recommend publishpress or kadence? Happy to buy with your affiliate link!
I would recommend publishpress to manage writers as it is built for that, and you can add a Gutenberg block plugin called postx to create the magazine layouts.
@@JackCao Thanks! I need to find a VA who can help me with my site... let me know if you know anyone who's familiar with PublishPress :-)
Gill here- sent you messages
I'm reading the Gutenberg does look good on mobile. Your thoughts?
That was probably a couple of years ago. Now, Gutenberg is mobile focused. You will usually have options to style Gutenberg Blocks in different devices.
@@JackCao I noticed that I wrote my question wrong but you still understood what I meant. Ok I feel good about using Gutenberg now for mobile. Was watching another channel & the author suggested we watch your video about Blocksy vs Kadence speed. Thought that was nice if him to refer you. Thanks for your expert opinions, makes all the difference & saves me so much time of trial & error on my own. I know you spend hours & money to do these analysis videos.
Hi all, I would like to install Kadence Theme or Kadence Plugins but I can not do either of them, they asked me to upgrade the business plan to have these features, how I can install these free? I followed the steps here but can not make it.
That shouldnt be unless your web host is stopping you. Are you using a free website?
Thank you very much for your reply, I am a newbie in this topic
Can we make template with kadence theme if yes will there be a video
A template to be used on any page you want on your site? Of course you can! I will do a tutorial on that soon. 😀
@@JackCao Thanks sir ❤️
How about a video using the Kadence free theme and free plugins ! Using pro is not wanted for a beginner.
Actually I have a tutorial that uses only the free Kadence Theme and Blocks: th-cam.com/video/HZkpG-tfHPA/w-d-xo.html
Hope this helps! 😊
So you have to spend $250 for Kadence Pro to do magazine sites.
You can do this with free resources too, I have done one
Jack! Hey, have you thought of copying your Kadence Blocks and selling them? It's faster for me if you can copy your blocks and sell us viewers the copy. Sell it via WooCommerce. I have the Kadence Pro Blocks anyway. This provides you with some passive income in addition to your affiliate sales.