ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
PB101: L15 - Complete Walkthrough of Templates & Components
ฝัง
- เผยแพร่เมื่อ 16 ส.ค. 2024
- In L07 and L08 we talked a lot about DRY development practices when styling websites using classes and variables.
Where BEM classes and variables give you a single source of truth for styling elements, Templates and Components give you a single source of truth for the HTML, PHP, and Javascript of pages and elements.
Templates allow you to dynamically generate many different pages from one single source of truth while Components allow you to produce many instances of an element or group of elements without losing control over their structure or behavior.
The combination of BEM, tokenized styling, templates, and components is what separates truly scalable and maintainable sites from all others.
After watching this video, you'll know more about scalable and maintainable development practices than 95% of web designers, especially those who use page builders.
You'll also get a clear understanding of how to create templates (like header, footer, blog post, etc.), assign them to the proper areas of the website, and pull in dynamic content from WordPress and custom fields.
Lastly, you'll see where many page builders, including Bricks and Oxygen, are currently failing with regard to component-based development. If you want to help push these tools forward, upvote these feature requests:
Bricks: forum.bricksbu...
Oxygen: github.com/sof...
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner...
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
![เกิดใหม่ทั้งทีก็เป็นสไลม์ไปซะแล้ว ซีซั่น 3 - ตอนที่ 66 [ซับไทย]](http://i.ytimg.com/vi/qcaUguFlwdM/mqdefault.jpg)
Man, I am binge-watching all of these videos. I know I need to go to bed, but I can't hit the pause button.
Update: still watching. Got really mad at myself, then started laughing uncontrollably. I might need therapy.
same for me man!
I really feel sad when I'm going to bed because I want to continue watching :D
I started this course two days ago, and couldn't stop until I finished it all.
This is a gem 💎
As someone who has used and trained people to use templates from posts/custom post types, I would say you did an excellent job explaining things in under 72 minutes. I can feel your pain when you said it took a few tries (8 or so) to get this video nailed/good enough. Again, I find it can take people being exposed to it a number of times before it clicks and then they agree, there is no going back.
Watched every minute of it, even though the material was very familiar to me. I'm always looking for those golden nuggets and or reassurance I'm still current on my implementations.
Loving this series, thanks, Kevin.
🙏
I've been doing about 90% of this the way you showed, but I was stuck on the partial dynamic template until this video. Always worth the watch, even if it's just for that last 10%. Great stuff as always!
Glad it helped!
I think a good point that really is a big issue with web development in general is just what things are called. This one calls it component this one calls it template ect. In JS land everything is api based and decoupled. Wordpress is monolithic and front and back end including the DB is tightly integrated. Both do basically the same thing but the names are different. ACF is like a js world emulator. They use an options page in ACF that is another template/component situation. Lol. There’s so many confusing non-intuitive terms. Helps make the web dev world more messy. Keep up the evangelism.
You’re right
After years of learning about WordPress I have to rank you as the #1 instructor I've ever come across. I would say Design with Cracka is at #2. That is why I was *delighted* to see you have a video from him coming up on your Inner Circle. Incredible value!
Thx 🙏
I thought I knew pretty much everything there was to know about dynamic content in Bricks... but I didn't know about Partial Dynamic Templates. I didn't know you could drop a Post Content Element into a Single template and tell it to source from Bricks, thereby allowing a mix of both Bricks template content and Bricks static content - interesting stuff!
total game changer! someone showed me this a few months ago and my jaw is still on the floor! :)
I didn’t realize this either. Very cool.
Hello Kevin! I'm not sure if you're familiar with the feeling of being stuck on something and then stumbling upon a masterclass like yours, which not only provides a specific solution to the problem but also clarifies many fundamental aspects. It's an incredible feeling, so thank you for that. In my case, the partial templates were exactly what I needed.
Now, I wanted to share a comment regarding the prebuilt components. In the case of the icon box, it may seem unnecessary, but sometimes a simple accordion (as a component) is very useful, allowing clients to add and remove content directly from the editor. This way, we avoid the need for a repeater.
Saludos desde Argentina!
It's actually possible to do what you're saying with Kraft Builder, and they're also planning to create a community of components within the editor. I suggest you take a look.
Only salmons brave the rapids upstream, the rest prefer the easy path. Do not mind the number of likes Kevin. You are putting out great stuff. Thank you!
Thanks Kevin, I've never used premade elements, exactly for that reason. I really hope the page builders get your message, that would take them to another level as you say and I hope we have it available in Bricks sooner than some of the outher outstanding items on their wishlist.
I hope so too!
Kevin, thank you for you time on this. What you did in global components I tried to do in a way similar to O2 and I was told "I just didn't understand templates in WP". Well I actually do but Bricks falls short even compared to O2 in this one area. Let me say plainly though that I enjoy working in Bricks more than O2 and no plans to go back at this point.
It looks like using a quick peek at Cwickly that they are leveraging ACF to accomplish the dynamic components. It seems we should be able to emulate much of this , (but not in an immutable manner) if we use ACF or MB to connect a CPT to all the elements inside the dynamic component. I sorta do this already but this look from your point of view gave me some new ideas.
I agree (and voted) that Bricks should do this natively.
Everyone who uses Bricks PLEASE vote on this feature request.
I am just watching this and you just solved one of my major headaches which was how to build up service pages using CPTs. I had followed your blueprint and could not figure out how to build out the pages that use Bricks. And I have not finished watching the tutorial. Awesome work Kevin. You are a truly inspiring teacher.
I'm loving all this tutorial, thank you.
I love how you showed Frames component funcionality how it already contains BEM and so on and then said it contains figure tag .. but it didn't. :D
And one small flaw in 71 minutes video. Great job again.
Love this stuff. Makes a lot of sense. Appreciate the tip to never, ever, ever, ever use those prebuilt components.
Although late, sorry Kevin, but I will go through your video again, I have only one word: brilliant!
I'm with you, Bricks should differentiate between templates and components.
Thank you for your very helpful tutorials.👏
I won't be late to class today Prof. Kevin.. in fact I'm early!
This is something that has been missing from page builders for ages, and I’ve been dreaming about getting it added. Here is my ideal solution:
Components would allow you to set properties based on field types such as:
- Text
- Number
- Image
- True/False
- Another component (maybe I’m dreaming, here)
etc…
These fields would need to be type-safe, so users don’t put in a string (text) where a number should be, for example.
You should be able to:
- Set a default value for each property in the case where no value is set.
- Use these properties in:
- Fields - (eg: set {name} to “John”)
- Conditions - (eg: show element if {stars} > 3)
- Custom CSS - (eg. set border-radius: {10} em)
- PHP code blocks - (eg:
Me and you are on the same page
@@Gearyco It's funny - I had these notes written in my Notion as a todo, to post it to the Bricks builder FB group, and then I saw your video.
I have since added this to the Bricks forum post, and will likely add it to the FB group anyway to gain some traction. This would really modernise the workflow in Bricks and make it much more useful to work with. But I understand it's something that is tricky to get right.
Do you have a video creating an entire website with best practices and dynamic content, for example services with CPT on top of it?
Ive watched so many videoes, yet cannot grasp the proper process for WordPress building. I know im doing it wrong, making a lot of pages and barely utilizing posts. I want to fix that but i need to see the whole process instead of individual parts.
Breakdance has element studio which allows the backend user to create/edit/update any custom element. Which is pretty cool and useful. Good info.
Yes, but not beginner friendly. So beginners will still be stuck using prebuilt elements.
@@Gearyco That is true. It is a little advanced and still in alpha.
Very important lessons indeed. Thank you for these best practices!
Oh my dayz !! Thank you so much - ACF finally makes sense to me - Thank you!
Amazing Lecture 😀. I have a complete understanding of Components now.
Widgets such as an Icon Box were made or better said implemented to help those which don't work as a professional web developer. Some people want to nail just one website, portfolio, blog with one single purpose for a page builder. Sounds like waste? It maybe is… But I know why Bricks added this awful lot of widgets, they don't want to exclude these beginners. Fair point why I don't complain, but as K. said, don't use them if you want to have something with more control and want to keep all things flexible. Based on my over 20 years of experience in that business, I know the worst client is like the devil in the form of a squirrel telling you to change everything back and forth daily. They can't decide on what they like or even want... they're completely puzzled. Keeping things DRY and TIDY how I call it, is absolutely required to work professionally.
Kevin, this is such an important topic. Could you maybe elaborate on what changed since the time of video creation regarding dynamic components in Bricks? Did the dev team catch up already? Would it make sense to talk about it during your WDD?
Nope, we're still waiting on components.
Great job of explaining the differences between the different types of components.
Just feels so confusing the way builders make it. So hard to talk about clearly!
thank you again! hard to follow since not having frames but very explanatory
Great stuff, thanks Kevin. I'm making a transition from Divi to Bricks, and what you've shown with the "presets" warning is just what I've experienced with Divi Presets - not really working for me, and super-confusing to try and use.
Again a super session... thanx Kevin
I can't say thank you enough! So well done.
Great tutorial, thank you Kevin 😀
Being new to Bricks if I understand correctly, I can NOT add other elements to custom elements. From playing around I assume the "custom elements" are all the ones in the "General" and the "Media" categories. THIS IS TERRIBLE and DANGEROUS for sure. You just saved me a ton of time on my first build. Thank you! Thank you!!! Are all the builders like this????
Yes they’re all like that from what I’ve seen.
@@Gearyco would it be safe to say that none of your Frames use any of the custom elements? Would it also mean everything built with Frames and basic "Bricks" elements may be able to more easily migrate to another build that ACCS and Frames support? 😃
@@charliesasser correct
1:00:41 Holyyyyy shiiit. I've never built a site with premade components but I never realized that these editors would block the user from making any changes to a pre-built component once it's been inserted into a page! 😮
Crazy right!?
Great video! Thanks! 👍🏻
Amazing stuff! Thanks :)
So, is there a way to manually create dynamic components within Bricks? I was really hoping you were gonna lay that magic on us. Unless I missed it in the midst of the firehose of info!
No, it’s missing. Click the link in description to vote on the feature request.
You should design your own page builder! From the beginning I hated how bricks messed this up. You mentioned all the pain points and I can deeply relate! This lesson was really well done, thank you!
I’d love to. Maybe in 2024.
Hey Kevin. As you can see I'm working through these vids daily and loving them - and posted on previous vid. I'm still stuck with the same issue/concern though. If I'm selling sites to clients (significantly better sites using your workflows) - how do I enable them to then go forth and manage their own sites without teaching them a big chunk of what you teach in these videos. Not a criticism at all - I'm just trying to understand how this works for those clients who won't want any form of service plan etc. Is there a vid on this I can explore? Cheers from the UK!
th-cam.com/video/97hMY6upmqw/w-d-xo.htmlsi=EcQxOpSRvWPEixA4
You are the BEST! Thank You So Much!!!
Kevin, thanks for this video. I've been anxiously waiting for the next episode. Two questions (1) is there a way to turn off the native Bricks componens? I haven't used them much in the past but am now cognizant of their danger. (2) how often do you use "partial dynamic" templates? I tend to create a full dynamic template but am having a hard time imagining the use case for a partial. Thanks for this video. I'll be re-watching to take notes and get a second review of the lesson. Looking forward to PB101 #16.
You can hide the native components.
I use partial dynamic templates a lot. I don't like to fully templatize services pagse because I like for them to have some unique layouts. So I templatize part of it and let the rest be custom.
Do you have more in-depth paid courses? You're an amazing teacher blending page builders and real web development techniques. I can imagine many agencies would benefit from directing new hires to your training content where they could like... pay a small fee for each new hire onboarding training. This is an amazing 101 course, but if you had more in-depth courses on more specific development patterns for common, routine tasks I think many people would partner with you to train their team.
I have the inner circle: geary.co/inner-circle
Thank You! 🙏
Welcome!
Has the dynamic content process that was missing from Bricks at the time of this recording changed? If so, will be sure to look around the channel and Inner Circle for that new information.
What was missing? Components? It still doesn’t m have components.
Brilliant! Thanks.
In which lesson will the Parent, Absolute, and Sticky elements be covered more?
th-cam.com/video/wAvjJ3p5iSM/w-d-xo.html
Good lesson
Great information! For a site with several different hero section layouts, is it best to save them as section templates and add them to the top of each page using the Bricks template block or to create several different partial dynamic templates?
Depends on what kind of pages they’re for.
well that is hillarious ... did not think bricks has such issue
I would be curious what your thoughts are on using Bricks Library for templates and components.
Which library?
Another great lesson, thank you! 38:46 Did You build this frames/remote templates on Your own, or there is some free library where we can do same and import some of this premade templates?
It’s a product we created getframes.io
Breakdance has dynamic components that you can’t unlink. They’re called global blocks. It’s not that intuitive to use, but once you get on to it and setup ACF properly it works great. It’s too bad they messed up the launch and tried to emulate Elementor. Sofly has a pretty talented team. I get what they were trying to do. And they messed up with Oxygen LTD. I also get they’re stuck on Angular JS, and you can’t keep backwards compatibility by changing to Vue or even new version of angular. It’s hard to make a product that’s all things to all people. Breakdance is still a very good builder, with low bloat.
I don‘t understand why page builders like Bricks have prebuilt components that do not consist of basic blocks which can be mixed and matched. I think Builderius is one of the first that does this right.
I think they believe it's easier for beginners. Same reason Breakdance went this route. Less "nuts and bolts" for the user to interact with.
Could the new components feature demoed by Thomas at Bricks in the last week or two be the solution you are looking for? I must go back and look at it again to see if it’s the answer to our prayers.
Agree, with the builder I’ve been using up until recently, I mainly used the main structural elements for layout with the text, image and button components.
It’s why the Wordpress block editor has missed a trick by not offering a similar building experience we get with Bricks. It doesn’t need to be as sophisticated but it should have been engineered so that third party builders could extend its capabilities. Turn off the builder or switch to another and at least all the content and layout would remain intact to some degree.
Yes it’s the components feature we need
Thank again Kevin!. So, what are your thoughts on setting up an agency template library for templates/components that we create internally while building sites? However, since we're now using Frames it takes up the only remote templates option in Bricks, so we'd have to manually swap between Frames templates and our own URL, and that seems counter productive over maybe just exporting and importing ours and leaving Frames connected all the time. Would it make sense to put in a feature request to Bricks to add the ability to add a second or even multiple options for remote templates?
Yes, the remote templates feature needs to be expanded to support more than one remote template system.
@@Gearyco So do you have sufficient influence with them to move a Feature request towards the top of the list. Seems like it would be an easy implementation since the infrastructure is already in place.
Hint Hint. LOL.
@@basilbabaa1628 they already know it’s a top request and I’ve already mentioned it to them. But they don’t listen to me as much as people think they do.
It was said in this video that Divi does not do dynamic components, but writing custom divi builder modules in PHP + JS lets me do what you describe as missing. Is there a difference between those custom coded "modules" and dynamic components or are we just saying dynamic components should exist in a way that doesn't involve writing your own code in your theme or as a plugin?
It should exist as native builder functionality.
@@Gearyco Agreed and thanks for confirming, just wanted to make sure I wasn't missing anything. I'm in the process of switching to Bricks, so not aware of everything it can/can't do yet if you're a CS person.
I'd love to see dynamic components in Bricks. Do you know if there are any relevant ideas/issues we can vote on?
Link in description
And what is the difference between Components and Reusable parts in Oxygen? Thanks in advance.
Oxygen doesn’t have the type of components I’m referring to.
Could you make a video how to use a post type instead of using pages? I remember you've mentioned the benefits of using a post type rather than a page. When it comes to WP, I often still think way too often in pages. Maybe you can help me get this hammered into my head? ;-)
Did that a few lessons back.
@@Gearyco Oh okay, I'll take a look, might have missed this one. Thought I had seen them all yet.
Please go through how to make ACF/MB condition on template to display elements.
This isn't live. But you can ask in a WDD Live and I can show.
Another amazing stuff❤
Kevin, How are you disabling the components you don't want to use in Bricks?
Instructions are in the inner circle. Look up “bricks pro mode”
Some of the essential stuff is already on the roadmap of Bricks ;-)
Btw, how can I deactivate the free build components in Bricks Builder?
Free build components?
@@Gearyco Hi Kevin, maybe wasn't clear in my words. I mean the elements, which are prebuild in the builder menu. You mentioned, that they are mostly unnessarily and poor coded.
@@berndnestrojil4084 oh, the code is in the inner circle
@Max Ziebell @Kevin Geary Up voted at the forum. BUT.. their github is far more ideal, dev response is almost guaranteed.
Premade elements ive done this been there in Elementor. I hate this. One little change and cant do nothing:)
I once received a commission to revamp the homepage and news list (built with Elementor). Beth claimed it would only take a few clicks and an hour of work (that's all she was willing to pay for). However, as I progressed, it turned out there were ready-made elements, plugins for plugins... and I had to tinker with CSS and make too many modifications. One hour turned into five, and they only paid for one. Never again will I accept "hourly" jobs or "minor tweaks in Elementor."
Yep!!!!
If you have a 30 page site with 'hand made' icon boxes all over the place, and your client wants to add a link to them, you have to spend all day editing each one anyway, "box after box after box". Yes hand made components are more flexible but I think you overstate the case against using them.
This isn’t true in builders with true component functionality. Like Bricks 2.0.
i wish you would just build your own builder cwicly meets bricks... question, how do you turn off the prebuilt elements in bricks? question: microthemer/css hero opinion? and question, advanced themer converter ids to bem classes? its the only way I actually use bem on a quick 10 page site... or does bem even matter on a 10 page site? 10 page site might have 10-20 CPTs that I guess would actualy make it a 30 page site.
Ask these on the next WDD Live so I can answer in detail.
Kevin, could you detail what you mean by "un-linking a component"? I have watched this twice and maybe I'm missing the detail.
Also, can we not make a component like your cards example dynamic using a cpt functionality?
Where are you going to assign the custom fields? Everywhere? All posts, pages, and custom post types? And how are you organize the fields from one component versus other components? Sounds like a huge mess.
@@Gearyco Kevin, could you detail what you mean by "un-linking a component"? I have watched this twice and maybe I'm missing the detail.
Hey Kevin, love the series so far. I'm coming from learning Webflow and it's filled in a lot of gaps. I'm looking at moving to WP because I didn't want to be limited to one type of Blog Post CMS or have to use conditional visibility to achieve multiple layouts within one CMS collection. With "partial dynamic templates" generated through ACF, does WP allow me to query from different custom post types without custom code?
For example, if I have a client that wants 10 different styles of blogpost layouts, can I create these in ACF and then query them in a grid on the homepage easily? If that's chump behaviour let me know as I'm just starting out!
I'd need to see an example of the concept I suppose.
@@Gearyco essentially is there a common tag that can be added to CPTs like there is for native WP posts? That way I can add a tag and query from it to display the different fields as one set of CPT.
So a “blog” grid as you’d normally see but with many types of layouts for the individual blog posts (achieved through partial dynamic templates).
Thanks Kevin. I got little confused about the Dynamic component vs the dynamic template. Can the component type 3, Dynamic, be achieved by the full or partial Dynamic template?
Page builders make this way more confusing than it needs to be
You are right Kevin. Thanks 👍
How would I turn off prebuilt components ?
You can hide them with css. Instructions are in the inner circle but you can probably figure it out on your own as well.
th-cam.com/video/FW2D4shagBk/w-d-xo.html - Doing this will add an extra div to the main content right? Lets say I create a template for my heroes which applies to all subpages and the content below the hero is made on all the pages (services, about us, contact, etc.), on the frontend I get an extra wrapper with: and then there is the section, is that right or am I missing something?
The post content element does wrap its content, yes. It's inconsequential, though.
@@Gearyco Lovely, thank you! So its just my inner monk triggering that its not a section, but rather a div -> section.
Awesome video as always. Can’t wait for a proper component element like you just explained here. Do your really think it’s coming to bricks? Also, how do you go about deactivating bricks elements?
Yes I think they’ll have to add them to keep up with competition at minimum.
I’ll do a video on hiding bricks elements.
Yep. Building modular/component is so important. I want to make important decisions once, then reuse components and after a while we have a huge library of dynamic components. Ready to go from project to project.
Why did you choose single service template instead of section?
Not sure what you mean
I’ve rewatched the video. When you created the component for the hero section, you choose single as the template type instead of choosing section. I think I understand now.
@@filmgenius2 That was a template, not a component, I'm pretty sure. The hero was just part of a page template I was creating.
I am a bit dissapointed that you don't show how to create local components and templates and talk about them only to pitch Frames. Well, Frames are cool, but I would like to have my own components... Especially with the fact, that to get Frames one needs to get ACSS
Just right click an element on structure panel and save it as a template
@@Gearyco sorry for a stupid question, bricks is a new tool for me. Is there any difference between saving a global template or a local template? Is it just unliking global one makes it local? (but you don't unlink anything when you insert a component from frames)
Are you back to ACF or still using metabox also?
ACF now going forward
@@Gearyco😮 In a nutshell… Why the change?
@@kylebarfuss4844 bugs in metabox and ACF is finally a complete plug-in now that they have added the features that were previously missing. also better UI now
@@Gearyco would you merge old sites or keep them on MB?
@@Gearyco ACF it is.
Have you done a video (or know of a good one), that shows you how to make a template with dynamic components for a collection of pages? EG: template 1 would be for a set of category pages, template 2 would be for a set of list pages and template 3 would be for item pages.
The page builders give you options to assign templates to basic pages (single post, archive, header etc...) but I need to create a new option called List Categories, Lists, List Items and cant find any good tutorials on how to make that happen with ACF + Bricks (or Elementor).
Id also need to build new pages in the WordPress dashboard instead of adding these custom fields to existing pages.
I know thats more advanced but you dive deep so I figured Id ask! 🤍
Never mind, I found exactly what I was looking for! For anyone else who needs it: th-cam.com/video/_3BrYFesQk8/w-d-xo.html
1:0:41 SOL- "the Roman god personifying the sun." ☀- Google