Bricks Builder: Full Website Build Tutorial with my Bricks stack

[@california_ray]

Let me grab a cup of coffee, settle into the cozy backroom of my gallery, and open the funnel to my brain as you pour the much-needed knowledge into it. Thanks, Brendan ☕🙏

[@BrendanOConnellWP]

Love that! I take it you aren't in California if you're settling into your coffee right now? Enjoy

[@california_ray]

@@BrendanOConnellWP Currently soaking up Central European vibes in Budapest. Thanks again!

[@BrendanOConnellWP]

wonderful city, from what people tell me. Haven't been yet. Enjoy it!

[@california_ray]

​@@BrendanOConnellWP I highly recommend visiting the city, country, and region. It's my second home. Hit me up when you do; Coffee on me ☕

[@Gearyco]

Good stuff!

[@BrendanOConnellWP]

Thanks! 3.0 makes it even easier

[@daveden2]

I totally agree that we need a form of design system and library of reusable patterns to speed up our workflow

[@BrendanOConnellWP]

Helps so much!

[@caknuckler]

I realize how little I know watching you blow through this...awesome stuff

[@BrendanOConnellWP]

hopefully theres something useful in there.

[@monikadeweryha5538]

Thanks a lot! How does this ACSS Popup shows up when you click in the dynamic field on the top left side (like in 19:13 f.ex.) In my setup its just opening a scolldown with other classes.

[@BrendanOConnellWP]

right click on all the various inputs in bricks builder to bring up the ACSS Variable selection. Great for space, radius, and color variables among others! you can also right click in the class bar at the top to quickly see what utility classes you can add. also right click on the Grid columns to add grid vars. right click ACSS is the way to go!

[@monikadeweryha5538]

​@@BrendanOConnellWP Great, thank you!!

[@techiesreviews]

This shows how powerful CSS frameworks and premade sections are. They allow you to create a three-page website within 1.5 hours (that should be in the video's title, by the way). It gets me excited to do more in bricks but also to create a framework for Greenshift. Amazing stuff!

[@BrendanOConnellWP]

Really speeds it up and gives you consistency. A framework in greenshift would be nice. It might work with ACSS/CF in that you can activate plugin and enter the variable values in the builders (no right click in Greenshfit, but if you ask in ACSS community, maybe they add that functionality with more users.

[@techiesreviews]

@@BrendanOConnellWP I just saw they acss could work with Gutenberg so I wonder how the integration is like, the same for core framework

[@CowMeCow]

Very Helpful Tutorials!~ please share more vids like this~

[@BrendanOConnellWP]

More to come!

[@giachiz5510]

Cool video. V helpful. Thank you. Did not understand how you get the repeater on the solution post template to be alternated left and right since you only have one card (horizontal with two cols ) at about 1h01

[@BrendanOConnellWP]

I used a layout that has that CSS on the parent card - so I think it uses nth+1 child to change the media wrapper to -1 (so it comes first) every other one. All the template libraries have this type of layout, and I deleted all the cards but the first, so I can query loop and it alternates.

[@giachiz5510]

@@BrendanOConnellWP Ah ok, great. Thanks love this

[@JeffFinley]

Very cool, thanks for making this!

[@BrendanOConnellWP]

Thanks hope its useful

[@bob-p7x6j]

A ton to learn for a beginner, but good to see the thought process, big picture and whittle down to smaller pieces...

[@BrendanOConnellWP]

Yes, I definitely was going fast to get thru it. Hope theres useful stuff. Let me know if you've got questions.

[@tbakula92]

Great content!

[@BrendanOConnellWP]

Thanks for watching!

[@matthijsalting7514]

Probably simple, but how do you keep the wp sidebar open while editing cpt's?

[@BrendanOConnellWP]

Hmm not sure I quite understand?

[@matthijsalting7514]

4:00 , the sidebar is still showing, although you’re editing. Normally while gutenberg is open, it’s like you’re on its own page.

[@BrendanOConnellWP]

@@matthijsalting7514 Ah i think I just enabled in gutenberg. when you're in the block editor, open the settings panel and there is a toggle to 'keep side bar open'

[@MCbyGracjan]

What add-on are you using to have a “Testimonials” tab?

[@BrendanOConnellWP]

ACF (Advanced Custom Fields)

[@samjansen6510]

Did you use Advanced Themer in this? Was hard to see. Or only ACSS and frames?

[@BrendanOConnellWP]

I did use it, but not sure it was really that prevalent (might have used it to copy or clone a class here and there, can't remember.) and I use it all the time for the auto suggestion and auto complete on input fields and, most importantly the css field. this is where the time savings really start to add up. Each AT feature really does start ticking up with time savings and efficiency each time you use it. It is also hard for me to remember what ISNT in AT - that is, I use Bricks with AT every time, so it feels second nature.

[@banksoor]

Is there a continuation to this?

[@BrendanOConnellWP]

i hadnt really planned one. What else should be added do you think?

[@adamu6941]

Very interesting many thanks !!! Else i heard that advanced themer wasn't very good for databases, do you think that's true or not?

[@BrendanOConnellWP]

No Advanced Themer doesn't slow down my site. There were some bricks lag issues prior to 1.9.9 but i'ts more or less fixed it.

[@SandrasPeeps]

Learnt a lot

[@BrendanOConnellWP]

Thx for watching 😊

[@Rosie_Morville]

This is brick or an other plugin is needed?

[@BrendanOConnellWP]

I used ACSS and Frames to speed this up by at least 50%. You can build this is Bricks with no plugins of course - I do recommend a css framework, or at least defining some variables in Bricks to re-use/standardize