Kadence Tutorial: How to Create a Magazine Style Layout in WordPress with Kadence [From Scratch!]
ฝัง
- เผยแพร่เมื่อ 2 ก.ค. 2024
- In this video, you will learn how to build a professional, clean, custom magazine layout from scratch using 100% Kadence! No magazine plugins used (though there are some great ones out there, more on that later). Using just a few Kadence blocks we are going to build out a beautiful Magazine web layout in this website build and you will learn how to use Kadence Blocks to create any kind of Magazine layout you want. This tutorial requires the Kadence Theme and Kadence Blocks Pro plugin.
I have also included a link to the demo content I used in case you want to follow along.
Dive right in, learn some new layout concepts and….Enjoy!
Grab the FREE Demo Content I’ve curated for you!:
cliftonwp.com/magtutassets
Timestamps:
0:00 How to Build a Magazine Layout in WordPress With Kadence
00:40 Overview of Magazine Layout
2:26 How to Install Kadence Theme, Kadence Blocks, Kadence Blocks Pro & Kadence Theme Pro-Addon
9:47 How to install Demo Content
16:03 How to create a magazine style header with the Kadence Theme
28:17 How to set-up your magazine website color palette
31:14 How to create your first magazine section with the Kadence Post Grid Block
48:07 Mobile Editing: How to make your first magazine section mobile responsive
53:24 How to create the Horizontal Opt-in Section
1:08:58 How to create the Trending Section
1:12:09 How to create varied post layouts with the Post Grid Block
1:24:17 How to create the main magazine sections
1:52:59 Mobile Editing: How to make the main magazine section mobile responsive
2:04:05 How to build the footer
2:24:43 Conclusion & Thank you!
🧰TOOLS I USED IN THIS TUTORIAL
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Code Snippets Plugin FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
✅ Domain & Hosting by Siteground: cliftonwp.com/host
🧰 FAVORITE WEBSITE BUILDING TOOLS
✅ Kadence Theme Pro - cliftonwp.com/kadence
✅ Kadence Blocks Pro - cliftonwp.com/kadence-blocks
✅ Kadence Conversions - Kadence Pro Bundle - cliftonwp.com/kadence
✅ Domain & Hosting by Siteground: cliftonwp.com/host
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
🏆RECOMMENDED EMAIL MARKETING PROVIDER
✅ Mailerlite: cliftonwp.com/mailerlite
🏆 BEST HOSTING COMPANY
✅ Siteground: cliftonwp.com/host
✅ WP Engine (Premium managed hosting): cliftonwp.com/wprocket
🏆 BEST PRO GUTENBERG BLOCK PLUGINS
✅ Kadence Blocks: cliftonwp.com/kadence-blocks
⭐ RECOMMENDED PRO WORDPRESS THEMES
✅ Kadence Premium Theme: cliftonwp.com/kadence
✅ Astra Pro: cliftonwp.com/astra
⭐RECOMMENDED PRO FORM PLUGINS
✅ Gravity Forms cliftonwp.com/gravityforms
✅ Fluentforms : cliftonwp.com/fluentforms
🏆 BEST SPEED PLUGIN
✅ WP Rocket: cliftonwp.com/wprocket
⭐ BEST WORDPRESS PAGE BUILDER
✅ Beaver Builder: cliftonwp.com/beaver-builder
⭐ BEST COMING SOON PLUGIN
✅ SeedProd: cliftonwp.com/seedprod
AFFILIATE DISCLOSURE
Please note that any links within this video and its description may contain affiliate links which means that if you click on one of the product links and purchase a product, I may receive a small commission. The commission does not increase the price you pay for the product and you can always purchase directly from the source. By using my affiliate link, you are supporting the work of the channel and I thank you for that.
Lastly, All of the opinions in this video are my own. I did not receive any compensation for making this video. Thank you for watching and thank you for your support!
#cliftonwp #kadence #kadencepro #kadencetutorials #kadencemagazine
![🔥[NEW TUTORIAL] How to Create Pricing Tables in WordPress with Kadence Blocks🔥](http://i.ytimg.com/vi/nGQMfAChHe0/mqdefault.jpg)
This is the best tutorial i've seen on anything. the pacing, repetition, no extraneous noise and unnecessary music. Overall a relaxing vibe and you don't skip anything. You have a real gift for teaching. Thank you for your work.
Even though some setting have changes as I write this two years from your posting date, it is still very helpful.
Wow! Thank you so much! I appreciate you kind words and appreciate you watching! Thank you! More to come!
Clifton you are the Bob Ross of WP 😂 this is so fun 😁
The CliftonWP Times is hands down my favourite newspaper even if it doesn't exist.
LOL! Thank you so much!!! Glad you like my Newspaper!
@@CliftonWP Just as Materusz says the CliftonWP Times is his favourite newspaper, for quite awhile now my favorite restaurant ever is the Clifton Cafe!!!
@@CliftonWP That's very good news from The Kadence King - your timely step by step tutorials make understanding so easy - your excellent communication skill clears a lot of confusion. I watched many Kadence tutorials on different channels and was just left frustrated. I manage to complete your restaurant tutorial and that's despite the Kadence blocks latest revision been different from the one you used so that's thanks to you.
Just completed this tutorial, making magazine site. Really appreciate your nice guide.
Thanks a lot for that very informative and helpful tutorial. You have a very kind and quiet way to explain so that even i understood the basics of building a website with wordpress. Can´t thank you enough.
Second time I watch this video. It's so useful. Thank you!
Thanks for taking the time to put that out. I imagine it took a lot of time and planning to do it. Beats my videos which involve me thrashing bikes!
You are very welcome! Happy to do it!
Clifton ... you are a rock star! Thank you so much! Another great tutorial!
Thank you Amy! I appreciate you!
Another outstanding tutorial! This was exactly what I needed. Thanks Clifton!
You are welcome!!!! Thank you!
Great job. Thank you
Clifton, I'm happy and excited to see this new video. It's going to be a few days before I have time to watch it, but I know it's going to be great...same as all your videos. Thank you so much.
Thank you so much! Enjoy it!
Well, this is something unique & premium content right there. Looking forward for more tutorials on kadence theme in the future. The way you teach & explain everything the easiest way possible deserves a round of applause. Thank you so much for this tutorial.
Thank you so much!
GREAT to see you back!!! I was crying when I was not seeing your next release. Kept checking on you daily.. Magazine layout, I love it and going to digest every bit of it. Thanks for your wonderful tutorials helping us to build our skills.
LOL! Thank you Charlie! I'm working on some great stuff for you. I appreciate you watching!
@@CliftonWP Prompt response again. You really care for your audience. My sincere thanks.
@@charliegerson7570 Thank you, Charlie, you are the best!
Another great tutorial. Thank you very much!
Thank you!
Thank You Dear, I was needed for this tutorial
Thank you and appreciate you watching!
Wow, your video is amazing. I've been avoiding watching your videos as they are so long but was attracted to this video and I honestly feel like Ive learnt SO MUCH! I really can't thank you enough.
Thank you! I appreciate you watching!
Super Cool! Well Done!
Thank you very much!
Hello, Clifton! Excellent tutorial. It may very well be the most detailed video on WP design that I've ever come across. Amazing. The home page looks great. Plus, you are very thorough in your explanations.
Thank you, Ron! I appreciate you watching and thanks again!
Awesome tutorial! 👍
Thank you Kelsey!
Great tutorial! Nice skills.
Thank you so much!
Thank you so much Clifton. That was exactly what I wanted.
Thank you and Happy to hear it! I appreciate you watching!
Another great video!
Thank you Victor!
Hi Clifton, thank you, this is the best lesson of building news website with Kadence, Kadence really should pay you for this. =)
Wow Tess! Thank you so much! Glad you like the lesson!
Great looking site, as always Clifton! I’ve got the video saved and will be watching and recreating the site in the coming week or two. Thank you for the detailed two and a half hour video!
Thank you, David! I know you'll enjoy it! more to come, my friend. Hope you are well!
@@CliftonWP Just circled back and finished this one up. As always...FUN!
@@PilatesinSacramento Glad you enjoyed it, brother!
I don't usually comment on videos. But I just wanted to say a big thanks for this video. I have come back to it several times to see how to do certain things.
A very pedagogical and helpful video. Thanks a lot!
Thank you and I appreciate you watching!
Great tutorial.
Thank you! Cheers!
Thank you very much for all this info, I have watched the full video 2 times.
It would be interesting to see how he would compose a blog entry and where he would add the ads from his point of view and perfect aesthetics. 🙏
Vibes mate. Digging the jingle too. :-)
Thank you!
Thank you, Clifton. After looking at your video I've implemented so much on my website and now it looks gorgeous! I'm looking forward to the video you mention about creating a custom category page.
That is excellent and very happy to hear that!
Can you share the website link? I am trying to design a mag site with Kadence. Thanks
Thank you for the reply. Can I see the site?
👍 Great Job - Greetings From Vienna ...
Thank you Art on Screen! I appreciate you watching!
🎉❤🎉❤ thanks a lot man
GREAT!
Thank you Dilukshi! I appreciate you watching!
Awesome tutorial. U are amazing. Still waiting for the affiliate marketing website geared towards affiliate marketers. Hope you do this soon. Thanks
Thank you and working on it! :-)
Great Video. Clearly explained step by step. Thank you Clifton!
I want to know How to attach actual Google Ads into the home page which we created. Thank you again!
Clifton! Would love your take in Kadence + FSE w/ Woo Commerce!
do more about kadence blocks and gutenburg tricks
Hey Clifton. Thank you so much for this video. I previously had the Kadence free agency theme running. Please could you explain how I change it back to default?As I can't see my header etc. I wanted to follow along fully with your guide. Thank you
Well made and well thought-out tutorial! Shutout to you...!!!
I have a confusion.... When do I adjust the margin/padding of a section and when do I adjust it in a row?
I get confused on this every time... a short tutorial explaining the difference and how to determine would be nice Clifton.
Thank you for this suggestion. A great idea for a video. You'll most likely use padding in Rows to create space around the sections inside the rows. Padding in sections creates space around the content within the section. Margins add space outside the elements. Most of the time you are applying padding and margins to sections. Just depends on your layout.
G'Day Clifton. Another great tutorial and will be using your tutorial to build out my upcoming world track and field blog.
And a question: Will you be creating a tutorial using Stackable Blocks for Gutenburg?
Thanks.
Thank you Michael, yes Stackable is on the calendar as well as a few others. :-)
Amazing tutorial - one question… on the featured image for a blog post how do I display the caption? It seems to not appear eg. I want to give a photo credit
How did you arrange the content from Google Docs, how the images were arranged so beautifully, and how the readable content was arranged
Thank you, Ahmed! I used dropbox to host the images for the tutorial. :-)
HI - This is simply awsome. Great videos. I have one question: I am transforming my WordPress based Urdu news website (RTL) from Elementor Pro to Kadence Pro. I am designing my home page. While using "Post Grid/Carousel" block of Kadence Pro, I am unable to set my featured images right aligned. Image settings only gives Top/Left alignment options but not Right. How can I align image on right side? Does Kadence theme support RTL? Thanks
Hey! And how to insert a youtube URL from ACF through dynamic content so that the player appears?
Hello, to do this, you will need to create a custom field in ACF aa URL field. Then you can use the Video Pop-up block to pull the url as a dynamic content and play the video.
how to justify text? is there any option to do so in kadence
I hope you will explain to us how to create a travel blog
Are there any examples of a travel blog you like? Post a link here.
@@CliftonWP I don't have a specific example of travel blogs
Hey there Clifton, it seems great video ahead! I was wondering, if I am building this website from free version of Kadence theme & blocks, how much am I missing?
Thank you, to replicate this website you will need Kadence Blocks Pro so you can create the post grids and loops.
I managed to do exactly the same layout with Free kadence block Posts and free kadence theme. Just added some css manually, like post background
Will the Kadence Blocks Pro plan work with this tutorial?
Thank Tom! yes it will.
You must make a course on Udemy doing a full Kadence tutorial. I'm sure you'll have a lot of students on Udemy. I'll definitely buy your course.
Thank you so much Sam! I just might do that! 🙂
I will buy too
@@MdAkashTube369 Thank you !
How did you get the categories to show up in the navigation? Mine is a drop down menu and I cannot figure out how to change it.
Thank you Heath. Go to Appearance > Menus and you can create your Primary navigation menu there using the categories. Then just make sure you add the Primary Navigation Widget in the Header Builder by going to Customizer > Header. I hope that helps.
@CliftonWP thanksl you! I've been watching this video over the last few days to get my site updated. What do you recommend putting in the sidebar? I have a right sidebar.
Did you take down the magtutaccess files? If so, can they be found somewhere else?
Thank you Adam! The assets are still there. Here is the link: cliftonwp.com/magtutassets
@@CliftonWP That worked. Thank you for the video! Have you made a video that shows you how to customize all of these posts?
Is it free theme?
Kadence has both a free version and a paid pro-addon.
@@CliftonWP This is the magazine style theme that we have created. Is this possible with the free version?
You should do a Udemy course. You do great work, you should get paid too.
Wow, thank you! I've been hearing about doing a course on Udemy. I'll look into it and go for it!
@@CliftonWP If you were to do that (create a course on Udemy), you would blow away all the others there.