5 Principles for Better Blog Post Designs (with full blog build-out in GenerateBlocks)

Рет қаралды 12,531

Күн бұрын

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 KZfaq 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

Пікірлер: 102

@TheAdminBar Жыл бұрын

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!

@alexway101 Жыл бұрын

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.

@andreadant Жыл бұрын

Ehy Kyle! as alexchet101 said, have you ever done it manually? Do you prefer plugin for a matter of saving time?

@TheAdminBar Жыл бұрын

@@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.

@sekhardas261 Жыл бұрын

@@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 🙏🙏🙏

@AdamSLowe Жыл бұрын

Fantastic video, Kyle! Full walkthroughs like these really demonstrate the thought process behind the design and show off the power of GenerateBlocks.

@TheAdminBar Жыл бұрын

Ah, thanks so much Adam ❤ I really appreciate you!

@Gearyco Жыл бұрын

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.

@TheAdminBar Жыл бұрын

Yeah, I'm totally with you. Less IS more in a lot of cases. Stick to the basics & best practices.

@ErinHewett 9 ай бұрын

I love these long-form super detailed videos. All of your videos are amazing and really helpful.

@craigettjs Жыл бұрын

Great video Kyle! Very helpful to have the detail you provide in the long-form. Would love more like this.

@jessica2123 Жыл бұрын

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!

@comartse Жыл бұрын

Appreciated this long-form presentation with all the details. Thank you!

@fardeenxyz Жыл бұрын

This is awesome!!! Thanks Kyle.

@ChrisGordonsHangout 5 ай бұрын

This was absolutely incredible. Thank you SO MUCH!

@youandainews 11 ай бұрын

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!

@jason-m Жыл бұрын

Very useful and concise, brilliantly explained 👌

@nadiap5535 11 ай бұрын

Simply the Best!

@LorinTorres 5 ай бұрын

Awesome tutorial! Thank you so much! Very helpful! 😁

@mabaone Жыл бұрын

Fantastic Kyle! I always enjoy your videos / teaching.

@TheAdminBar Жыл бұрын

Thank you so much ❤

@MikeOliverDesign Жыл бұрын

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.

@TheAdminBar Жыл бұрын

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!

@MikeOliverDesign Жыл бұрын

@@TheAdminBar Whoa hold up, let me get Flex down first 😂

@martijns.7029 Жыл бұрын

Hi Kyle, absolutely incredible! Thanks for the amount of work you put into this!

@TheAdminBar Жыл бұрын

I really appreciate that! ❤

@CharlesHutchinson Жыл бұрын

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.

@TheAdminBar Жыл бұрын

Thanks so much, Charles! I was concerned about that. I'm not sure how well hour-long videos will do on KZfaq - but it's worth trying! I'm glad it was helpful!

@379rale Жыл бұрын

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!

@simon_quinn Жыл бұрын

Excellent content Kyle 👍

@TheAdminBar Жыл бұрын

Thanks, Simon ❤ Hope you're doing well bud!

@iamYasin22 Жыл бұрын

I always enjoy your content, Kyle ❤

@TheAdminBar Жыл бұрын

Thanks so much, I really appreciate that! ❤

@rockeygamer5163 Жыл бұрын

Thank You Kyle 🤩! Really great video.

@TheAdminBar Жыл бұрын

Thanks so much, really glad you enjoyed! 🙌

@IvanOung Жыл бұрын

Damn this video is so good that I basically watched the whole thing without skipping at all! Thanks Kyle!

@TheBeeOBee 11 ай бұрын

Alright I'm officially finally adding Generate Blocks to my toolbox. Appreciate you.

@NajamNnj 10 ай бұрын

Really appreciate your efforts, Truly the #1 WP Community, Top Notch Content

@TheAdminBar 10 ай бұрын

Aw, sucks! Thank you!

@edwinpaul7157 Жыл бұрын

Great Video

@Irina-Carlos Жыл бұрын

you are the best, greets from Cancun

@markatgraf1x Жыл бұрын

Awesome content. Please keep it coming 😊

@TheAdminBar Жыл бұрын

Thanks so much! More videos already queued up!

@piratebasscaptain Жыл бұрын

Great content ! Next make a video for archive pages best practices! I enjoyed more the design ideas here! Keep the good content!

@adeel.azeemi Жыл бұрын

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?

@TheAdminBar Жыл бұрын

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/

@ecomwebtips Жыл бұрын

awesome video thank you, mate 🙂

@TheAdminBar Жыл бұрын

Thanks! I'm glad you enjoyed it!

@Ahmodkhalid 5 ай бұрын

Thanks

@simonkerridge Жыл бұрын

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! 👍😀

@TheAdminBar Жыл бұрын

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.

@simonkerridge Жыл бұрын

@@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. 🙂

@markhemmingson7578 Жыл бұрын

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.

@tigisttadesse6718 Ай бұрын

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!

@mkeyes001 Жыл бұрын

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?

@darrellvanzyl6630 Жыл бұрын

Excellent and instructive. What about a similar one for Home and Page? Very useful for someone like me who is new to Generate Press .

@TheAdminBar Жыл бұрын

Great idea! I'll add it to my list!

@powerpapaproject3724 Жыл бұрын

I really like this clean blog templates. Is there any way to combine this blog design with a sidebar?

@pesiiin Жыл бұрын

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... ?

@mubindidit230 Жыл бұрын

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 :)

@TheAdminBar Жыл бұрын

Ah that's so great to hear bud! Thank you for that!

@jeffbarnhart6441 Жыл бұрын

Please do more like this video

@TheAdminBar Жыл бұрын

Thanks for the encouragement! 🙌

@johnh4586 Жыл бұрын

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?

@TheAdminBar Жыл бұрын

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.

@piratebasscaptain Жыл бұрын

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. ?

@PaperKnowledge Ай бұрын

Dear Which plugin you have used for this blog setting and how to get elements sections under appearance?

@babersidd 3 ай бұрын

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!

@TheBeeOBee 11 ай бұрын

The Elements screen comes with GenerateBlocks?

@Fit.Fusion5 Жыл бұрын

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,

@TheAdminBar Жыл бұрын

Thanks for the suggestion, I'll add it to my list!

@OnlyPokeSongs 8 ай бұрын

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.

@Ahmodkhalid 4 ай бұрын

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! 😢

@LegitSupplementReviews Ай бұрын

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?

@LegitSupplementReviews Ай бұрын

update: I needed to purchase GenerateBlocks Pro. It works now.

@badcatdesign Жыл бұрын

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 😭

@TheAdminBar Жыл бұрын

Yes, that's a great tip - but in this case, it will remove that block if its empty (by default) :)

@badcatdesign Жыл бұрын

@@TheAdminBar ahh.. how is that? what's doing the magic?

@wesdavisdev Жыл бұрын

@@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.

@johannawerb-pieterman2857 Жыл бұрын

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!

@TheAdminBar Жыл бұрын

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.

@joyfulequestrianblog 4 ай бұрын

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.

@joyfulequestrianblog 4 ай бұрын

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.

@pintubiswas3610 Жыл бұрын

Hi, can anybody tell the hex code of the background-color: var(--accent-3);

@NajamNnj 10 ай бұрын

I am facing one issue on mobile view the featured image remains in the same size so what to do about this?

@TheAdminBar 10 ай бұрын

You can edit it in the editor while previewing in mobile or write a CSS media query.

@simon.stjohn 6 ай бұрын

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.

@TheAdminBar 6 ай бұрын

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.

@simon.stjohn 6 ай бұрын

Awesome - thanks kevin! Coming from an expert you, it is more likely to be looked into as a possibility!@@TheAdminBar

@gokhanyagc2438 2 ай бұрын

Unfortunately, there is no elements button on my screen. Do I need to install a plugin for this?

@TheAdminBar 2 ай бұрын

GeneratePress Premium (theme) and then enable the Elements feature

@VincenzoLIGUORI-panopticoncept Жыл бұрын

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.

@TheAdminBar Жыл бұрын

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!

@VincenzoLIGUORI-panopticoncept Жыл бұрын

@@TheAdminBar Oh, very good! Thanks for your fast answer.

@wesdavisdev Жыл бұрын

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)

@TheAdminBar Жыл бұрын

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! 😂

@thierry-leadway Жыл бұрын

No social sharing buttons?

@TheAdminBar Жыл бұрын

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.

@fatjay9402 Жыл бұрын

no breadcrumbs ? no time to read ? etc..

@TheAdminBar Жыл бұрын

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 😅

@hitechmod Жыл бұрын

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.

@TheAdminBar Жыл бұрын

Thanks man, I appreciate that. I absolutely love Mike's community. He's a huge inspiration!