5 Principles for Better Blog Post Designs (with full blog build-out in GenerateBlocks)
ฝัง
- เผยแพร่เมื่อ 10 ก.ค. 2024
- When it comes to designing websites, a blog post layout is one of my favorite things to tackle. But, I’ve learned from experience it can be really tricky to get just right.
In this video, I’m going to share with you my top 5 best practices for creating a blog post template that is not only visually appealing but helps keep readers engaged.
We’ll take a look at real-life examples of both the good and the bad, and use everything we learned to create a brand new blog post layout from scratch using GenerateBlocks.
[ Video Created and Produced by Kyle Van Deusen ]
=================
Check out The WOM: theadminbar.com/wom and use the code TH-cam to get 30% off!
=================
Inquiries? Contact Kyle @ kyle@theadminbar.com
👏 COMMUNITY
Join our free community: theadminbar.com/group/
(voted best WordPress community!):
🔴 EVENTS
See past and upcoming live interviews & workshops: theadminbar.com/events/
🎁 PRODUCTS
Sell more care plans with The Website Owner's Manual: theadminbar.com/products/wom/
Write proposals in less than 15 minutes with this template: theadminbar.com/products/easy...
Fill your prospect pipeline in this 3-week challenge: theadminbar.com/products/pros...
5 Airtable templates I use to run my agency: theadminbar.com/products/agen...
📨 NEWSLETTER
Stay up-to-date with the best from in and around The Admin Bar: theadminbar.com/friday-chaser/
🤖 MISC
Visit our website: theadminbar.com
Product endorsements: theadminbar.com/products/#end...
Kyle on Twitter: / kylevandeusen
Intro - 00:00
Self-Promo - 00:31
Principle 1 Container Width - 00:49
Principle 2 Author Info - 02:01
Principle 3 Summary / ToC - 02:58
Principle 4 Related Posts - 03:52
Principle 5 Content Assets - 04:56
Start the Build! - 06:10
Figma Mockup - 06:21
Creating Our Element - 07:27
Hero Section - 08:50
Feat. Image - 14:40
Article Summary - 17:43
Post Content - 22:11
Author Box - 22:48
Related Posts - 29:49
Connecting Dynamic Data - 33:49
Author Custom Fields - 39:41
Content Assets (CSS) - 43:55
Cleanup & Responsive Settings - 51:33
Final Review: 55:53
Outro - 57:24
I only realized after 3 days of producing this video, I never showed how to do the Table of Contents 😭. It's actually super simple with this plugin: wordpress.org/plugins/table-of-contents-plus/. Install the plugin, configure it how you want (the options are great!), and then pop that shortcode into the area where we put the summary. Sorry about that!
You've done everything right initially :) I've tested many TOC plugins and get to conclusion that it's better to do it manually. With adding a Custom HTML block. A bit more time (templates can save it), but more flexibility and SEO value.
Ehy Kyle! as alexchet101 said, have you ever done it manually? Do you prefer plugin for a matter of saving time?
@@andreadant What I like about the plugin I referenced is that it (a) does it automatically, (b) gives me control as to what heading levels go into the ToC, and (c) allows me to set a threshold of how many headings need to be in an article in order for a ToC to show. It's a nice little time saver.
@@TheAdminBar Adding post excerpt in the summary section through dynamic content option is of no use because same thing is being followed when the actual content starts. It looks awkward.
Could you please show us how the meta description of a post can be linked there 🙏🙏🙏
How do you make the background color of the 1st container span the width of the entire page? Mine is contained to the container, and in the customizer if I change the container width it will span the full page, but also pushes my header/nav full width. Do you add L/R header padding to fix that or am I missing a step somewhere?
I really like these simple clean blog templates a lot. Hate it when sites try to do way too much with their blog design, making it hard to focus on the content.
Yeah, I'm totally with you. Less IS more in a lot of cases. Stick to the basics & best practices.
This long version format was really helpful! Great to see your philosophy and it feels like it helps me connect the design principles/best practices I know to actual execution. Thanks for this!
Great video Kyle! Very helpful to have the detail you provide in the long-form. Would love more like this.
I love these long-form super detailed videos. All of your videos are amazing and really helpful.
This was excellent. Long form videos work when they are packed with useful stuff. I learn more from the little mistakes people make and how they correct them, so kudos to you for including this. I'd love more long form if the topics are there! Thanks!
Fantastic video, Kyle! Full walkthroughs like these really demonstrate the thought process behind the design and show off the power of GenerateBlocks.
Ah, thanks so much Adam ❤ I really appreciate you!
Appreciated this long-form presentation with all the details. Thank you!
Wish I saw this 3 days ago, before I made the single post template. The length depends on the content of the video. This definitely deserved a thorough, step by step explanation. Thank you!
This was absolutely incredible. Thank you SO MUCH!
Fantastic Kyle! I always enjoy your videos / teaching.
Thank you so much ❤
This is awesome!!! Thanks Kyle.
Hi Kyle, absolutely incredible! Thanks for the amount of work you put into this!
I really appreciate that! ❤
Damn this video is so good that I basically watched the whole thing without skipping at all! Thanks Kyle!
Very useful and concise, brilliantly explained 👌
Really appreciate your efforts, Truly the #1 WP Community, Top Notch Content
Aw, sucks! Thank you!
Alright I'm officially finally adding Generate Blocks to my toolbox. Appreciate you.
Simply the Best!
Hey Kyle - Great video. You may be worried that it’s too long. Not at all. We consume your content because we are learning. Flex has changed the way I look at designing sites in a good way. Watching your videos really helps when learning these new’ish concepts. Thanks for taking the time to put this content together. We appreciate you.
Thanks so much, Charles! I was concerned about that. I'm not sure how well hour-long videos will do on TH-cam - but it's worth trying! I'm glad it was helpful!
Awesome tutorial! Thank you so much! Very helpful! 😁
A master class, you rock. Love how you did the author bio box without the grid, that's a great example of using flex instead.
Ahhh thanks man, you're too kind! 🙌 Yeah, I'm still trying to figure out when to use the grid block and when to use flex.
What's been REALLY interesting is now that the "inner container" isn't in the container by default anymore, you can actually write CSS Grid rules. Don't know if GB will ever consider position: grid, but for now, you can do it really easily with CSS and it makes layouts really flexible!
@@TheAdminBar Whoa hold up, let me get Flex down first 😂
I always enjoy your content, Kyle ❤
Thanks so much, I really appreciate that! ❤
Thank You Kyle 🤩! Really great video.
Thanks so much, really glad you enjoyed! 🙌
Great content ! Next make a video for archive pages best practices! I enjoyed more the design ideas here! Keep the good content!
Excellent content Kyle 👍
Thanks, Simon ❤ Hope you're doing well bud!
This is simply awesome. Quality content. You are becoming an authority on GP/GB. I need one suggestion. I'm not that comfortable with Flex in GP/GB. Not tested it yet but can we expect a more detailed explanation from you about the new Flex model of GP/GB?
Thanks so much, very kind of you!
Yeah, I think there's gonna need to be lots of guidance on flex. I did put together some resources (I'll link below) that do a great job of explaining how flexbox works. Once you understand the principles, seeing how it's done in GB is a pretty easy translation.
I'm still taking some time to figure out when I want to use flex vs. a grid block and want to have some good guidance on that before I do too much flexbox stuff (other than sprinkling it in here and here).
Here's that link: kylevandeusen.com/holy-%f0%9f%a4%ac-i-cant-believe-generateblocks-is-doing-this-%f0%9f%98%ac/
you are the best, greets from Cancun
Awesome content. Please keep it coming 😊
Thanks so much! More videos already queued up!
Wow! Jam-packed with very useful ideas I will certainly use in the future. I also am in a quandary of whether to use GP/GB or Bricks Builder for my next project. Decisions, decisions! 👍😀
Both great tools! I'd just recommend trying them both (GB has a free version and Bricks has a sandbox site) and see what feels best for you.
@@TheAdminBar I already have both tools, I am simply undecided which to employ for a particular project! May create 2 staging sites for the same project, but one using Bricks and the other Generate, and experiment to see which works best. Regarding the long form videos, I really appreciate those. A mixture of both short and long form videos would be my preference. Regardless, thank you for all the insights your channel provides. 🙂
Thanks for the video, Kyle. Very clearly communicated. I'd be into more of these. I like the way you've pulled in the excerpt as a way of outlining the post. Have there been any issues with the length of the excerpt? How many words do you use? Thanks.
Thanks
awesome video thank you, mate 🙂
Thanks! I'm glad you enjoyed it!
Great Video
Hi, thanks for the great tutorial. How to ensure that the content of the "dynamic content" block is not boring? Do you teach the client how to create posts in the block editor, or do you only allow them the classic editor, or only paragraphs using custom fields... ?
Hi there, the post light blue will not be full width, you set up this from other way or it should be done from the elements you had created. ?
I don't use GP anymore (it's a solid stack though) because I switched to Bricks. Still, watching this video, man it was worth it. Learned so many things :)
Ah that's so great to hear bud! Thank you for that!
Dear Which plugin you have used for this blog setting and how to get elements sections under appearance?
I am glad I found your video. I can't find elements on my appearance page. I don't know what to do. If you can help it would mean a lot. Thank you for the video. Great tutorial!
Excellent and instructive. What about a similar one for Home and Page? Very useful for someone like me who is new to Generate Press .
Great idea! I'll add it to my list!
Sir, in image option i don’t find any dynamic data option to add my author avatar! Is the option don’t existing now? Now, how can i add my author avatar dynamic data! 😢
The Elements screen comes with GenerateBlocks?
I really like this clean blog templates. Is there any way to combine this blog design with a sidebar?
For 'current post terms' it is not showing up as an option. I have been trying to look up online if other people have had this problem and haven't found any solutions. Have any ideas? I have followed your tutorial all the way up to 33:12 where I need to add taxonomies to the query loop.
Okay I just found out why this is happening. It is because I have Generate Blocks basic and you need Generate Blocks Pro. Bummer. I don't know if I want to pay over $50 a year just for this feature.
Great video. These longer more indepth versions are really useful.
I noticed you set the template up so that it is automatically the default style for all posts.
What if the site content required more than one post layout for different types of content? For example a food website with restaurant reviews, recepies and chef bios.
Is there a way to create a set of different post templates layouts that would allow the author to select the the most suitable layout for their content?
Yes, there are several ways you can do this. One easy way would be to set up a custom taxonomy (like "Post Layout Type") and then have different selections the user could check. You could then apply templates to each specific taxonomy option.
Great video Kyle, thank you! Is there a reason why you can't use the already available 'biographical info' in the user account instead of having to create a custom field for author bio? Just curious and trying to learn as much as I can about working with GP :-) Thanks!
I'll usually add a field just so I can have more control over it. I'll often want to use a WYSIWYG field so I can add links and text formatting (without having to write the HTML). But you could totally do it that way.
Please do more like this video
Thanks for the encouragement! 🙌
Hey, thanks for the video - super helpful... all your videos are. I am stuck on an exclude current post in the query loop. I can click on "exclude posts" but it doesn't show "exclude current posts" as an option. It just shows a bunch of my posts individually. What am I doing wrong?
update: I needed to purchase GenerateBlocks Pro. It works now.
Fantastic video, now I can make my blog more professional with this design, can you please make a video on how to design an archive page for the blog post. and show dynamicly on every page,
Thanks for the suggestion, I'll add it to my list!
Hi, can anybody tell the hex code of the background-color: var(--accent-3);
Hi Kevin, For the Author image in the Author box (and headline up top, actually) I wanted to not use the Gravatar-derrived image. However, am I right in saying that the only option under Dynamic Data for an image is the Author Avatar, and that is the Gravatar in the User Profile? I tired to add an image as another Advanced Custom Field but it turns out that under Dynamic Data you can't select Author Meta to be able to add that custom image. I wonder if I am missing something?
BTW: The reason for this was that the Gravatar image displays fuzzy for me, whereas a local (same file) displays crisp. I can't work out why. Also, if a contributing writer of mine does not have/want a Gravatar I was thinking I could upload their image to an ACF.
I've sent in a request to be able to have the custom author meta fields and I believe that will be in the next update.
Awesome - thanks kevin! Coming from an expert you, it is more likely to be looked into as a possibility!@@TheAdminBar
Excellent tutorial! @42:27 Quick Tip - Click *"Remove block if link is empty"* (under Dynamic Data) for authors who don't have a specific social entered on their User bio custom fields. Let's just use Twitter as an example 😭
Yes, that's a great tip - but in this case, it will remove that block if its empty (by default) :)
@@TheAdminBar ahh.. how is that? what's doing the magic?
@@badcatdesign Most likely it is written into GenerateBlocks' server-side code not to show any block with dynamic data on the front end if the value is empty.
I am facing one issue on mobile view the featured image remains in the same size so what to do about this?
You can edit it in the editor while previewing in mobile or write a CSS media query.
Kyle, great video as always. Unfortunately, I think it's not mobile friendly. Could you please create a video to make sure authox boxes remain mobile friendly as well. Thanks so much!
Unfortunately, there is no elements button on my screen. Do I need to install a plugin for this?
GeneratePress Premium (theme) and then enable the Elements feature
Hey, thanks so much for your videos!
I wanted to post something that I found that didnt work for me. you may have said it in the video but If so I didnt catch it.
At roughly 33:00 you are using the "query Parameters" and selecting "taxonomies" and "select terms" you select "current post terms". After much research I found that this is a Generate Blocks PRO feature. if anyone else is looking for this and cannot find it, I wanted to point out that they will not find it without PRO.
Just in case it's helpful to anyone: another solution for exempting the author image from the .blog-content-container image styles (and with the potential advantage of not having to rearrange any of the blocks) would be to just add a class to the author image block (say, "author-img") and then add that class to the custom CSS selector using the :not pseudo-class - like this: .blog-content-container img:not(.author-img)
Good call 😅 Man, you should have been in my office when I realized what I had done 😂 This was AFTER doing about 30 minutes of recording not knowing my recording software was frozen (and having to re-do ALL of it). When I realized THIS mistake, I almost just trashed this whole video 😂 . I considered trying to go back and make the appropriate fix but that would have required too much re-re-recording... So, I decided this was the easiest way to get myself out of the pickle and get this video done 😅.
Your solution is much more elegant - but my mind was obviously not thinking clearly at this point! 😂
Hi, Kyle.
I love your video and this one is very very awesome. Thanks for your best work.
So, I have a little stupid question. Often I see you to insert a "dummy text" (lorem ipsum / placeholder text) like paragraph with the shortcut ".wi1" (or a similar thing). Please, can you explain me what realize that or indicate me the video tutorial who I can watch to learn that fine trick? Thanks for all and have a nice day.
Thanks so much! I use TextExpander for that little trick. It's a program that lets you save snippets of text and create a keyboard shortcut to paste it in. So, I've saved placeholder text at various lengths and am able to paste it in quickly with that ".wi1" command for 1 paragraph or ".w2" for two paragraphs. It's not handy just for that though... I save license keys, email addresses, canned emails - all kinds of things. It's one of my favorite tools!
@@TheAdminBar Oh, very good! Thanks for your fast answer.
no breadcrumbs ? no time to read ? etc..
Depending on the size of site the breadcrumbs might or might not be necessary (and just add clutter). We did link to the tag/category and include some recommended reading at the bottom. But, if you have a large site (with lots of nested pages) then breadcrumbs might be really helpful.
Time to read is a good one - though I don't think it would be in my top 5. I can see someone making a case both for and against time to read 😅
No social sharing buttons?
I think they are a nice add, and I use them pretty regularly - but to be honest.. Unless you have a pretty popular blog, those buttons are highly unlikely to be used. It didn't feel like a "top 5" type of feature.
Kyle, keep doing what you're doing. You are a big help to the GP community. I have seen you are a member of mikeoliver-podia. You live, you learn. Thank you.
Thanks man, I appreciate that. I absolutely love Mike's community. He's a huge inspiration!