How To Make Impossible Layouts With CSS Grid For WordPress
Вставка
- Опубліковано 27 вер 2024
- I had a breakthrough in understanding how to leverage the full power of CSS Grid, and I share everything in this video, so you too can start creating impossible layouts for WordPress.
Test For Yourself: app.zipwp.com/...
CHECK OUT MY PRODUCTS
🟡 ZipWP (AI Website Builder) -- www.wpcrafter....
🟡 SureCart (Ecommerce) -- www.wpcrafter....
🟡 SureMembers (Membership) -- www.wpcrafter....
🟡 SureTriggers (Automation) --
🟡 Presto Player (Video & Courses) -- www.wpcrafter....
🟡 LatePoint (Booking) -- www.wpcrafter....
🟡 CartFlows (Sales Funnels) -- www.wpcrafter....
RECOMMENDED STACK OF TOOLS (BEST OF THE BEST)
🟡 Astra (Theme) -- www.wpcrafter.... (SAVE 10% Coupon WPCRAFTER)
🟡 Spectra (Page Builder) -- www.wpcrafter....
🟡 Hostinger (Good Hosting) -- www.wpcrafter.... (SAVE 75%)
🟡 Cloudways (Premium Hosting) -- www.wpcrafter.... (SAVE 20% Coupon WPCRAFTER)
CONTACT WPCRAFTER
☑ Website -- www.wpcrafter.com
☑ Facebook Group -- / wpcrafter
☑ Twitter -- / wpcrafter
☑ Twitter -- / adampreiser
All of the opinions expressed in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if there is a referral program available, please assume that you are clicking on a referral link. - Навчання та стиль
![[FIRST LOOK] 2 New AI Website Builders For WordPress](http://i.ytimg.com/vi/F5DK3mfHzVM/mqdefault.jpg)
I love your videos... Haven't done WordPress in going on 4 years now and yet I still watch them when you put them up. I love the way you explain everything
Thank you Anthony. Means a lot!
Loved the way you explained the whole concept.
Thanks Adam, perfectly explained! 🙏
Glad it was helpful!
I love the way Adam explains concepts so easily
Thanks, I really try to make these technical concepts easy to understand.
Love it. Makes perfect sense. Thanks for sharing. Would really like to see how you make this work on mobile. Maybe another video on that? Also just started using Spectra Pro recently and it’s so easy to use.
Your website design is impressive! I'm curious about how you learned the design concepts you've applied here. Could you share your approach or any resources you found helpful?
CSS Grid is perfect for full page layout, including header, main content, sidebar, footer. Unfortunately Gutenberg project forces us to use Flexbox for block themes layouts, wich limits us in many degrees. There need to be a selector in the future WordPress editions allowing to choose CSS Grid or Flexbox for block themes (FSE themes).
Well done Adam. Very helpfull.
BTW off-topic, I sent through a Sure Cart Payment gateway integration enquiry this AM. If you see that I would be happy.
what screenshot tool are you using that allows you to do easy and nice markups?
Tried the link. Doesn’t seem to work in mobile. I’m assuming I will need separate grids for Tablet and Phone to have the effect on there?
Small question, before watching the rest: The Gutenberg Grid is pretty easy to handle and has this functionality too. You just have to figure out your row/colum requirements.
None of the core gutenburg blocks should be used becasue they don't offer even the most basic mobile responsive options. So you have zero control over how it will look on a tablet or mobile, where half your website traffic comes from.
@@WPCrafter wow, yeah I see the problem. (Still don't understand why Wordpress isn't adding control over breakpoints.) Should really test more.
How i activate that? I dont have it in my wordpresss? Thanks
As explained in the earlier part of the video, this is from Spectra and it's a pre-release. It will be released this upcoming week. But you can try it now with the link in the description.
@@WPCrafter Thank you ❤
Which Screenshot Tool is that?
That one was SnagIt. It's on my recording computer but on my normal computer I use CleanShot.
How can I fix this issue plz help mee
Hello, please how do i stop my wordpress blog from displaying the old theme after changing it to a new one.
It only displays the new theme when I'm logged into my dashboard.
Sounds like something is wrong with your hosting. It may just be a caching issue.
That is cool
i dunno why i dun have GRID feature. i follow exactly what u teach.
What building tool are you using? Most don't have them.
@@WPCrafter Spectra v2.18. hope can send u screenshot
Old design and new design mix
Is this possible in Kadence ?
Kadence doesn't offer CSS Grid, most of the block packages don't. A member in the WPCrafter Facebook group mentioned that they had asked Kadence about CSS Grid, and they replied that they are not working on it.
Actually Adam, the Kadence Row Layout block does support CSS Grid properties for over a year now. Sections use flex layout and technically, Rows can use grid.
Just not a grid map.
@@Line49Design I think without the ability to create grid layouts like shown in this video, what's really the point or benefit? If it does not allow you to create a grid with a unique pattern, the point of the video, can you really say they have CSS Grid as how people understand it?
@@Line49Design …ca. you point me to a video tutorial explaining the Kadence row grid properties ?
@@WPCrafter Yes, they have incorporated CSS Grid in their own fully legitimate way, as of Kadence Blocks 3.0, a year ago. Their implementation is sufficient enough to make it worth my input on your response to the Kadence user above.
My comment does not detract from the point of your video, nor am I saying that Kadence is doing the same thing as Brainstorm, as you already understand. Brainstorm is doing lots of great things, and we can all understand why you're way more involved with them than you were with Kadence. I'm just here to clarify that the statement "Kadence doesn't offer CSS Grid, most of the block packages don't" isn't the ideal response to Tom here. I'll follow up with him directly.
First!!!
Do you have a tutorial on creating containers/elements that overlap?
can this not be done in Elementor?
Oh yes, Elementor offers CSS Grid, but without the options. So it's a bit more tricky and some coding knowledge is required unfortunately.
Sir namaste I have a news website but I import a readymade design to my website then I change a paid theme but when I reset the website the old design not remove in my website
Hi Adam. Excellent video and very very informative!
What do you think about Advanced Columns Pro, which released its version with Fluid grid mode? They mentioned that their plugin " leverages the power of CSS Grid and allows for the creation of fixed column layouts, as well as dynamically generated fluid grids that automatically adapt to various sizes."
I am aware of it and I did try it a few weeks back. I forget my impression of it. I did find it funny yesterday someone pointing out that they don't use WordPress for their own website. That is a bit concerning to me personally, because I have seen enough products come and go, which is why I am very selective about what I make a video on.
Plz sir help meee
Really good work!!
Hello Sir, Would you tell me about the design. Your design of the website top-notch. Would you consider to tell me how may I learn design concept like you. Please give me instruction. It will be really helpful for me.