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.
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.
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-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.
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
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--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.
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?
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): ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-m__84q-yRVA.html
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!
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
@@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.
@@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 }
