Fantastic video! Very well explained and at just the right pace. My site looks blog & archive pages look so much better after implementing most of these changes. Only thing missing here is that it would have been nice to learn how to link the entire card as a link to the post as opposed to still having to click on either the title/image. You earned a sub from me and I look forward to watching some of your other content.
Can we please get this css that you've used here. I'm also using generepress at the moment and I would love to have this design on my site. Mind blowing thanks
A wonderful tutorial. Thank you very much. An interesting thing happened when I applied the {height:100%; grid-template-rows: auto 1fr auto auto} The last item on the row was taller than the previous ones as if it had a padding-bottom value
I'd have to see it to figure out what's going on. You code might require some modification for different websites depending on your theme and other global styles.
Man ... This is so so so damn helpful.....Thank you...... Also to suggest ideas for future videos......How about if you customise this card design even further where you are displaying multiple elements facing each other like in holiday package websites...so much information organized in limited space....that would be awesome to see.....
Unfortunately you can't pull in a post image as a background using CSS. The best method would be to edit the loop template. If you're using GeneratePress, it's now much easier thanks to the block element: ruclips.net/video/-ZTQP_KA2xE/видео.html You could also possibly hack it together with CSS by setting the outer container for each post card to {postion: relative} and then set the post image to { position: absolute; top:0; left: 0; right: 0; bottom: 0; } And use z-index to pull it behind the rest of the card content.
Hi Matt, I'm running into an issue where my archive articles are already in a column of their own: and the grid that I create using your tutorial treats the entire large column as 1 "article" in the grid. Any tips on how to break them up?
It's tough without seeing your front-end markup, but I'd suggest setting your UL element to display:grid instead of the UL's parent. Basically you want the container for each article to be a grid item, and the immediate parent (presumably the UL) to be the grid container
Great video mate! These are the kind of videos I was looking for sooo long.... I watched your other videos about animated button they were great... One question though... You showed us how to register the button with the code... I was wondering is there a way to create some animated buttons and save it as presets... Also, i would request you to make a video showing how to decorate the text links site wide and also save them as presets so next time if I want I can simply select that specific design... 🙂
All the animation is just CSS that gets loaded on the front-end. So register your custom button, target your animation rules to the button's CSS selector and you should be good to go. As far as links, I did a video on it already: ruclips.net/video/RoSBDHrXjZc/видео.html I haven't done the follow-up yet with more advanced animations because the video didn't get many views. Hopefully I'll get to in in the next couple months.
@@BuildThatWebsite thanks for this great video! When trying to remove the empty box at the beginning of the grid in the Astra theme, the section that needs to be remove is simply called '::before'. I tried '.ast-row::before {grid-column: 1/-1;} and this worked perfectly using the Inspect tool in Chrome, but didn't work when I applied it to the custom CSS in the theme. Does anything stand out about what I could be doing wrong here?
When I run astra I don't see a :before pseudo-element attached the .ast-row selector. You're on the right track though, the .ast-row div is the one you want to use as the grid parent. But to delete the pseudo-element you can try this code: .archive .ast-row:before {content: none }
I loved the tutorial and subscribed to your LOL channel. I have a question, is it possible to make the entire card clickable? Only the image and the text will direct you to the post, but is it possible that the full body of the card would direct you to the post just like the image and the text? Greetings in Advance
There are two ways to do that: 1 - Edit the loop template using php to add an tag around your card. 2 - Use CSS pseudo-element to stretch the link the fill size of the card (easiest option for most people) You can see a demo of the psuedo-element technique in this video (linked to the correct timestamp): ruclips.net/video/m__84q-yRVA/видео.html
Please, more tricks, thanks to your video, I am not beginning to understand much how to work with the code inspector, and element classes, for me this is a problem. I'm also interested in learning how to add ready-made templates such as a custom menu, custom header and footer ...
Thanks for the suggestion. Can tell me more about the ready-made templates? Are these block templates? From a page builder like Elementor? What theme are you using?
But... just forgot one thingy: Make the titles the same height (often a client request actually) I bet it can be doen off of the onfo you provided, just saying Keep m coming!
@@BuildThatWebsite Brother I highly recommend to start a series on how you can make generate press more beautiful without elementer, or heavy codes. Right After watching your videos, I signup for WEB DEV course Btw. Thanks a lot.
Fantastic video! Very well explained and at just the right pace.
My site looks blog & archive pages look so much better after implementing most of these changes.
Only thing missing here is that it would have been nice to learn how to link the entire card as a link to the post as opposed to still having to click on either the title/image.
You earned a sub from me and I look forward to watching some of your other content.
Wow! A cut above so many other tutorials! Bravo and thank you so much. I'll be coming back 👍🙏
Awesome, glad you enjoyed it!
Great content. Will have to work on my site, searching for such a solution for quite some time. Thanks for sharing this.
Great job. Thanks a lot for your efforts🌹🌹🌹
You are a great Guy and a great WordPress blogger 👌
Awesome tutorial! Thank you so so much, you are a legend!
there. is grid block in core Wordpress now. Can you do a tutorial for it ?
please make a more videos css in wordpress.
Will do!
Can we please get this css that you've used here. I'm also using generepress at the moment and I would love to have this design on my site. Mind blowing thanks
Thanks for the reminder. I was going to find a spot to share CSS code on my site, but I've added the CSS to the video description in the meantime.
BROTHER IT IS NOT WORKING ON MY Genratepress Theme please Guide me and Heading is above on Feature image.
What's not working? Just the order of the heading vs image? That's controlled in the theme settings under 'blog' layout
@@BuildThatWebsite Thanks for the reply. I do not have premium generate press them it has limited options in blog layout.
In the Blog option, The heading is Shown on top, and below it is showing the Feature image. How can I adjust the heading below the feature image ?
A wonderful tutorial. Thank you very much. An interesting thing happened when I applied the {height:100%; grid-template-rows: auto 1fr auto auto} The last item on the row was taller than the previous ones as if it had a padding-bottom value
I'd have to see it to figure out what's going on. You code might require some modification for different websites depending on your theme and other global styles.
Man ... This is so so so damn helpful.....Thank you...... Also to suggest ideas for future videos......How about if you customise this card design even further where you are displaying multiple elements facing each other like in holiday package websites...so much information organized in limited space....that would be awesome to see.....
I think I know what you mean, but could you share a website that has a good example
@@BuildThatWebsiteif you go to sotc.in & search for holidays especially on mobile those cards could be fun to design....
Unfortunately you can't pull in a post image as a background using CSS. The best method would be to edit the loop template. If you're using GeneratePress, it's now much easier thanks to the block element: ruclips.net/video/-ZTQP_KA2xE/видео.html
You could also possibly hack it together with CSS by setting the outer container for each post card to {postion: relative} and then set the post image to { position: absolute; top:0; left: 0; right: 0; bottom: 0; } And use z-index to pull it behind the rest of the card content.
Plz make a video on astra grid layout
You mean the blog module of Astra Pro?
@@BuildThatWebsite how can I make grid layout in a astra free theme with css
You can adapt the CSS from this video, you just need to change the classnames to match the correct elements in Astra.
@@BuildThatWebsite I try this but didn't work
Thanks for this one, Matt.
Are you still planning to do that whole website or blog design from scratch?
Yes definitely. It's a really hard video to make so it's going to take longer than most of my videos. Hopefully it'll be released this month.
No worries, take your time. 💪
Hi Matt, I'm running into an issue where my archive articles are already in a column of their own:
and the grid that I create using your tutorial treats the entire large column as 1 "article" in the grid. Any tips on how to break them up?
It's tough without seeing your front-end markup, but I'd suggest setting your UL element to display:grid instead of the UL's parent.
Basically you want the container for each article to be a grid item, and the immediate parent (presumably the UL) to be the grid container
It worked! Thanks
Magical
Great video mate!
These are the kind of videos I was looking for sooo long....
I watched your other videos about animated button they were great...
One question though... You showed us how to register the button with the code... I was wondering is there a way to create some animated buttons and save it as presets...
Also, i would request you to make a video showing how to decorate the text links site wide and also save them as presets so next time if I want I can simply select that specific design... 🙂
All the animation is just CSS that gets loaded on the front-end. So register your custom button, target your animation rules to the button's CSS selector and you should be good to go.
As far as links, I did a video on it already:
ruclips.net/video/RoSBDHrXjZc/видео.html
I haven't done the follow-up yet with more advanced animations because the video didn't get many views. Hopefully I'll get to in in the next couple months.
How to create single post list like Backlinko site in generate press
I'm not sure what you mean exactly. Where on Backlinko can I see it?
@@BuildThatWebsite I want same header element which was using backlinko
Can you share an imgur screenshot of what you talking about?
Very Helpfull
do not work for astra theme.
why?
The html structure and classnames are different. You can use the exact same CSS (or similar) but you need to change the selectors.
@@BuildThatWebsite thanks for this great video! When trying to remove the empty box at the beginning of the grid in the Astra theme, the section that needs to be remove is simply called '::before'. I tried '.ast-row::before {grid-column: 1/-1;} and this worked perfectly using the Inspect tool in Chrome, but didn't work when I applied it to the custom CSS in the theme. Does anything stand out about what I could be doing wrong here?
When I run astra I don't see a :before pseudo-element attached the .ast-row selector. You're on the right track though, the .ast-row div is the one you want to use as the grid parent.
But to delete the pseudo-element you can try this code:
.archive .ast-row:before {content: none }
Also, do you have any idea how I can add Infinite Scroll to any website? If the theme doesn't support it natively.
You can add it with a plugin like this: wordpress.org/plugins/ajax-load-more/
Thanks! 😊
I loved the tutorial and subscribed to your LOL channel. I have a question, is it possible to make the entire card clickable? Only the image and the text will direct you to the post, but is it possible that the full body of the card would direct you to the post just like the image and the text?
Greetings in Advance
There are two ways to do that:
1 - Edit the loop template using php to add an tag around your card.
2 - Use CSS pseudo-element to stretch the link the fill size of the card (easiest option for most people)
You can see a demo of the psuedo-element technique in this video (linked to the correct timestamp):
ruclips.net/video/m__84q-yRVA/видео.html
Please, more tricks, thanks to your video, I am not beginning to understand much how to work with the code inspector, and element classes, for me this is a problem. I'm also interested in learning how to add ready-made templates such as a custom menu, custom header and footer ...
Thanks for the suggestion. Can tell me more about the ready-made templates? Are these block templates? From a page builder like Elementor? What theme are you using?
Grid verson thmes pleass
You can use the same card design with the GP official grid layout
But... just forgot one thingy: Make the titles the same height (often a client request actually)
I bet it can be doen off of the onfo you provided, just saying
Keep m coming!
Yeah, I would use flex-grow: 1 for the title element, so it will expand to fill any available space in the card.
Oh Brother I feel like kissing you
You're very welcome Reyansh. Glad I could help! Good luck with your website 😎
@@BuildThatWebsite Brother I highly recommend to start a series on how you can make generate press more beautiful without elementer, or heavy codes. Right After watching your videos, I signup for WEB DEV course Btw. Thanks a lot.