Consume Media - Current

Chris LaFay: It's a. It's a Friday.

Lydia Rosenberg: I know.

Chris LaFay: I legitimately did not expect you to come. I was just gonna record it and be like, here it is. I. I honestly don't think you need to be here.

Dawn Audano: I'll just. I'll be able to do my. My update faster if I'm here. So I'm just going to suffer through.

Chris LaFay: I heard the noise. I was like, the waiting. Somebody's in the waiting room. Like, I wonder whose note taker this is.

Dawn Audano: It's me. It's me. I'm the note taker.

Chris LaFay: The human version of one. That sitemap tool I'm very happy with that I'm hoping will save us so many hours. A AI is just mindboggling. Like, the fact that I. I created that whole thing in like two and a half hours.

Dawn Audano: Yeah.

Chris LaFay: Is just. I. It's nuts. It's nuts. I just hope they use it. Like, I hope this actually likes them to move. Like, they.

Dawn Audano: Brandon seemed pretty. Brandon's gonna lead the effort on it. I'm not concerned, actually, at all. I didn't know. I'm like, there's 900 pages. Like, I know how long it took Cox to go through their pages and it's just like.

Chris LaFay: Yeah.

Dawn Audano: So I'm feeling good about it because.

Chris LaFay: It's a good amount of work in general. Like, no matter how we decide to divide and conquer, moving those sites in, like, that's gonna keep us busy for a while and that makes me happy. And we're also gonna make Brandon's life easier as well too.

Dawn Audano: Yeah.

Chris LaFay: Which is great. So.

Dawn Audano: Yeah, they do need to. Like, we do have other work though, that, like, we need Brandon to, like, decide it's important.

Chris LaFay: Is it the se. Like the semrush stuff that Andrew.

Dawn Audano: No, it's the. It's the family of company site stuff.

Chris LaFay: Oh, okay.

Dawn Audano: And so I'm like, what are. What, like you. He's like, there's like 40 something sites. I'm like, what are they? Because that's work that Samson can do and Samson doesn't have work right now. And so, like, I just need to figure out how to get him something.

Chris LaFay: Good morning.

Leo Falkenstein: What's up?

Michael Rosenberg: Hello.

Chris LaFay: Hello. Hello, Michael. Are you not at the doctor? So you're not at the doctor, but Lydia is. Yes, that is correct.

Michael Rosenberg: I am walking to my desk as we speak.

Chris LaFay: Very nice. Very nice. How was the. How was the shoot at the. The school yesterday or the day before?

Leo Falkenstein: We had.

Chris LaFay: We had a good time.

Leo Falkenstein: We have shot three times at two different schools this week. Private schools are becoming a little bit of a sub niche for us, which is interesting.

Chris LaFay: Interesting. Okay. The only reason I didn't. I didn't realize this because I didn't put the dots together because I'm a at the end of the day, but I had coffee with Trey Bowden. He was like, yeah, we had just. I got done with a big video shoot with the Consume guys. I'm like, what? And obviously, I know the man because he came to topgolf with Lydia, and Lydia invited him. So obviously there's that. I just am. Don't know how to tie dots together. And so I have another friend of mine who does video stuff, and he was shooting at a private school, and I asked him. I was like, did you do it with Consume? He's like, I have no idea who you're talking about. I was like, so this week was just a private school week? I guess. So.

Dawn Audano: In regards to collecting connecting dots, I just realized that I guess Michael and Lydia are married because they had the same last name. I was like, well, why would he be at the doctor?

Lydia Rosenberg: Like, that's weird. None of my co workers go to the doctor with me.

Dawn Audano: Awkward.

Michael Rosenberg: That's just how we operate around here, right?

Chris LaFay: Exactly. I went to the dentist. We're not just a team.

Lydia Rosenberg: We're a family.

Michael Rosenberg: We really made it when I was there.

Leo Falkenstein: It's actually funny you say that, because, like, a few years ago, I hadn't gone to the dentist in a while, and they, you know, they. They had to, you know, go in and do some deep cleaning. And Haley's like, I haven't heard from Leo. And Haley texted Michael. I was like, michael, have you heard from Leo?

Chris LaFay: Have you heard from him? Is he okay? Oh, man.

Leo Falkenstein: We're all one big family around here.

Michael Rosenberg: That's good.

Chris LaFay: Exactly. It's a wonderful thing. Wonderful. Oh, she. Oh, hey, look at that. Good timing. Look at that. So I'll go ahead and get us rolling with some of the very. The basics. So before we actually, like, dive into this, I'm gonna lay a little bit of groundwork here. This is the part of the process where you might want to throw things against walls, because there's going to be a learning curve there just. There always is. Right? There's going to be. There are going to be things that you're like, I wish it could do this. It doesn't do this. This other thing could have done it.

Dawn Audano: I.

Chris LaFay: There's going to be that because it's a new thing. So just putting that out there at the very beginning that there is going to be some things that when you get in there, you're going to wish was a little bit easier, wish kind of was changed up a little bit. I'm going to lean towards more consistency. You have the ability to edit things pixel by pixel, hex code by hex code, if you want to. I don't recommend doing these things, but I recommend trying to work within the confines of what you have to make things as simple for yourselves in the long run as humanly possible. So there's that, because everybody thinks this is kind of like this is the creme de la creme. It's the best prime. It is the good part. Like you get to put content the site. You get to test it out and play with it and have fun. But sometimes it's not fun. And that's okay. That's to be expected. So, with that being said, my goal for today, actually, before I start, did either of you guys watch the Loom video that I sent to Lydia? Oh, yeah, we watched it while we.

Michael Rosenberg: Were eating dinner last night. So you joined us for a meal, Chris.

Chris LaFay: Hey, there we go.

Michael Rosenberg: Just the three. Three of us in Gutenberg.

Chris LaFay: What'd you say, Leo?

Leo Falkenstein: I watched it while I was drinking a Creature Comforts last night.

Chris LaFay: Hey, there you go. I like it.

Dawn Audano: Sorry. Before we get into it, I want to know if after launch you're also going to want to just subscribe to Chris's video series of Bloom tutorials so that you can watch them on your movie nights. We could do like a short film festival, Chris. We'll talk about it later.

Chris LaFay: Oh, there we go, Leo.

Michael Rosenberg: Plus subscription service. That'd be great.

Chris LaFay: Exactly. I. I'm told I have a wonderful voice for radio. Rent out a home theater and just put them on loop. So my goal today is there. So in. In the website, what we ended up doing for you guys, rather than just creating four or five page layouts, obviously you saw that we went ahead and just basically built out every page that we had discussed at some point. Now there's no content really on them. A lot of them were literally just copy and paste. Yeah. And what I want to do is I want to have. I'm going to walk you through a couple of things kind of verbally and let you guys ask some questions while I screen share. It's going to be a little bit duplicative from the video, which is fine and purposeful. And then I want you. We're going to each choose like a single service page because all the service pages are all the Same. And I want you to go through and make some of these kind of updates and kind of feel what it feels like so that you can get in, try a couple of the basics out. I'm going to be here, ask questions about those basics, and that should hopefully get you over some of that initial, like, hump effectively. Because in reality, there's about three or four different core principles. And if you know those, that's going to get you like 70% of the way there. The rest is just going to be your creativity on how do you want to mix and match things at the end of the day? So that is my plan. How does that sound to you guys?

Leo Falkenstein: I think that sounds good. I think from. From my perspective, like, I think this first initial build from our team is going to be the most complicated. And then from there, hopefully, it's a lot of just duplicating and simple, simple updates. But spin up a case study space page that's, you know, based off another case study page and things like that.

Chris LaFay: Bingo. Yes. And I'll show you. Making a mental note. But, Don, make sure I remember. Let me show you. Let me show you how to, like, copy and paste a page as well, too. I'll wait to that to the end. It's not hard. And we are recording this. Yes. So, awesome. Well, I am going to dive in. We're going to share the whole screen. Not that one. Not that one. This one. Awesome.

Michael Rosenberg: Great.

Chris LaFay: Expand that. I don't want to see my face. There we go. All right, so we're going to open up the animated explainers page here. And so the. The first thing I want to focus in on is the way that this. So I'm going to explain things the way that we're. Oh, this is perfect timing.

Leo Falkenstein: What's up, Lydia?

Chris LaFay: You made it just in time. Hello.

Lydia Rosenberg: Yes, hi.

Chris LaFay: Good morning. So we are quite literally just getting started. I prefaced the whole thing with you guys might want to throw things against walls during this process. And that's perfectly normal because you're learning something new. So with that being said, whenever I go and I. I'm going to explain things the way that my brain processes them. Now, your brain might process them differently, but I feel like that's easier for me to teach than it is to try to extrapolate things. So at the top of pretty much every single one of your pages is going to be this hero section. This is a. You're going to hear me talk about two different things. Custom blocks and Gutenberg blocks. There is a middle ground where there's some elements that are custom and some elements that are Gutenberg. The difference is here, custom blocks are basically you fill out a form and all the code in the design is done for you. It's all magical. It's simple, it's easy, it's done. You have to think about it. Things that are Gutenberg are more drag and droppable, page building the whole nine yards now. And then in the middle there are some that basically have some custom components like this Hero section, as well as some drag and droppable components as well too. And so that kind of gives us the best of both worlds in a few places. Those aren't common, but they do exist. So this Hero section is going to be something that you use pretty much on every single page. And when you drop in a Hero section on the right hand side, you are going to have kind of your custom, your custom pieces to this. This is where you'll get to play around a little bit. So you have different styles for it. Your primary one is going to be the background. All of your colors and your color scheme are loaded into this drop down menu. So if you want to change the background colors of things, they're all within there so you stay on brand very easily. Don't have to remember hex codes things along those lines. Then within the Hero section you have different heights and typically speaking, the tall one is where you're going to live. Obviously going full height is going to be something akin to your homepage section. Narrow is going to be something that's narrow. So tall is probably where you're going to live on most of your inside content pages. And then you have the ability to align things to the left, the middle to the right. And then when it's full height, you have the ability to move that text block vertically, top, middle and bottom. Then inside of the Hero. And this is where I like having this list view open pretty much at all times. It makes life a lot easier because literally dragging and dropping stuff within the editor, pretty much any editor in any cms, literally moving things here is kind of hard, but dragging and moving them around here is 10 times easier in my opinion. And so inside the Hero section you'll be able to drop in a header, you can drop in a paragraph. Let's say you did want to add that little eyebrow text and push enter. We're going to type in some eyebrow text. And then in this paragraph over here, under block styles you'll see eyebrow and it'll automatically will apply all the right spacing. Everything like that. Going to go ahead and delete this and then over here on your. So again, this is why looking at the list view is better. Whenever you wanted to edit this Hero section, this Hero section is going to automatically pull in whatever the featured image that you have of this page. So if you have. Go over here, page, wait. Freaking heck. What the heck? Oh, Background tab. You have your background image. You can choose how to position that image kind of within like you want to align to the top, right, top, left, bottom, etc. Or you can upload an MP4 video that will automatically play on loop and muted. Focusing a lot on this one, because this is one that you will use almost on every single page. The next thing that you're going to use pretty much on every single page is a block that is simply just called group. This is a Core Gutenberg block. It literally does what it says it does. It is a grouping of things, that's all. And a lot of times what you're going to see throughout here. And if you look at this outline, you'll see that group is kind of that. That through line between everything. So this gets into the spacing thing that Lydia, you were talking about in a handful of your tickets. So within a group, you have the ability over here, within the block settings underneath styles, to adjust your paddings and so a lot. So this is where you have the ability to customize. Now, these are. These are not pixel values. These are all. These are kind of like. It's more like an exponential growth to where 0 is obviously 0, 10 is a little bit more, 20 is a little bit more, 30 is a little bit more, kind of exponentially increases. There's a scale that with it. And so the, the default spacing that we use when we dropped a lot of these blocks on here was the 40 spacer. So what I recommend doing is building out a page, editing these things in here and deciding for that vertical spacing that you want kind of between sections, deciding which of these that you like the best, and then utilizing them as you go through and start adding in content across the board. So that way everything kind of remains consistent. Now, you're going to use other spacings here between other sections as well too, which is why you have a lot here to choose from. But this right here is the main. This concept of grouping blocks together and applying spacing to the top and bottom is something that's going to happen on every single page. The other piece with groups, that is good to know as well is if we go over here what you'll see is that the content in here, I'm going to use a phrase called content width. The content width is literally just the, the width of like the standard content. It's like that inside width, if you will. So we have some blocks that go full width which stretch far left to far right, but on the inside of those blocks they line up inside this content area here. Automatically when you have a group and you're underneath its settings, there's this checkbox that's automatically checked that says the, the stuff on the inside uses that inside width, which is how everything stays in alignment left to right down the page. That makes sense. Awesome. So that box is not checked. Let's go over here like this. Like why you should do this. Let's uncheck that box, go to save and then refresh. Now we get pushed all the way to the left hand side. Now there's paddings and stuff that you can add as well too that make it so that it's not literally touching but for things like calls to action and things like that to do have full width? Yeah, like. No, that's. Yeah, that's full width. That's all content. Actually everything in here is pretty much content width. So there's no good example of that on this page. So I'm going to go ahead and uncheck that at the group level you have some other options as well too. So you can, you can edit the background color and we do have some automations built now. It's not 100% of the time to where like the, the appropriate contrast text color is automatically chosen. Does it apply when you apply? When you write code globally like that, it's not going to be 100% accurate. So like when you go here and click on the dark, you see here, all this text here changes from changes over to white. This custom icon block does not. There's some nesting happening. So it's not going to always be 100% the case, but it's going to be very common that it does. The goal here is to reduce mental effort, right? So we tried to program those as best as we possibly could. For those sections you can also add to a group a background image. So.

Lydia Rosenberg: Hey Chris, Sorry, just real question on the color. Sorry, I just wanted to ask. I know we had a little like a list of some questions and one of them was just where does that lodge live? And not that it's wrong or anything like that, but if we ever wanted to update that sort of code that you mentioned, like hey, when it's this color background change to this color font, and if we wanted to update that in the future, are you able to show us where that is and is that something that we can change?

Chris LaFay: So those are all written in css, so that would not be as easy for you guys to change because how familiar are you with the concept of like CSS classes?

Lydia Rosenberg: I'm gonna let. Michael. Michael, what'd you say?

Chris LaFay: I said very, very. So when, when background colors are applied in WordPress's code, there's like, there's default CSS classes created. So like, when you have a new color in the color palette, let's call it primary, there's a CSS class that's created called has primary background color. The code that we wrote basically went through all the colors in the color palette and basically said, find me the best opposite color. And so when that CSS class of has primary background color is applied Most in. In WordPress, by default, all it does is apply background color, whatever that color name is. We also wrote code that applies the text color as well. So there's basically, there's these like, probably 15 lines of CSS code that takes that background color CSS class and then apply that text color to it. It's not. It's programmatic in the sense of it is programmed in, but it's not editable in the back end because there's basically like a script running, not actively running, but has ran to kind of output all of those things that make sense.

Michael Rosenberg: Yes. And if we wanted to see where that custom CSS lives,.

Chris LaFay: It's in the main dot. So your CSS is technically written with scss, which is uncompiled CSS, and then that gets compiled into the main.css file. If you edit main.css without updating the pre. Like the pre compiled code. If we were to go back in there and edit something and then that gets compiled into main.css, your changes will be overwritten. So if you wanted to write custom CSS code, your best bet is to write your own CSS in like the, the. Like the admin. The admin editor. There's a, There's a section back here somewhere. I haven't had to use it in a while. In this, in this backend appearance section, there is a place to add in additional css. It should be in styles somewhere.

Leo Falkenstein: Layout.

Chris LaFay: No. Anyway, it's somewhere back in here. I'll define where it is. They moved it, but that's where we were also.

Lydia Rosenberg: Just wondering like, if we in the future wanted to add a color or things like that does that. We just don't want, you know, if we want to change any of that. Just how. How possible it is.

Chris LaFay: Yes. So in your. In your styles, underneath colors here, you have a custom color palette.

Lydia Rosenberg: Okay.

Chris LaFay: And you can add colors in here. And that will then add it. Now, it will not dynamically add the opposite colors, but you will then have more colors inside of your color palette.

Lydia Rosenberg: Okay. Okay, great. I think that it helped. Michael, did that answer your. I know that was originally your question from yesterday, so.

Leo Falkenstein: Yeah.

Chris LaFay: Awesome.

Lydia Rosenberg: Thanks, Chris. Sorry for interrupting, but.

Chris LaFay: No, no, no. You appreciate it.

Michael Rosenberg: Good.

Chris LaFay: That's the whole point of this. I actually go head back and save this. So you're talking about groups. We talked about paddings on groups and things along those lines. Where. Let's hear. So we have that. That saved. Oh, backgrounds and textures. So this is. I want to. I kind of wanted to walk through a little bit of. Kind of where. Where your design creativity can kind of bubble up to. And this will take a little bit of time to figure out. But look at this, like, testimonial section here. Let's go over here to this page. Let's go to testimonials. So, as you'll see, this is just a standard group of blocks. And this is where like, your. Your works with. You're working with, like, background colors and transparent PNG files can come in to. To play here a lot. So at this group level, we have a background color of dark black. Right. And one of the textures that we created, I forgot if we created it or if one of your team members created. But it was this, like, grid texture. Right. So we uploaded that grid texture, which is just a transparent PNG file of a grid with like, a black gradient sitting on top of it as well. And this is the type of stuff that I would love to see you guys work on over time. Because if you had at your disposal four or five different textures that were PNG files, setting the background color of a group and then setting a transparent PNG file as that texture that goes on top of that, that's going to drastically increase the different options that you have at your disposal.

Lydia Rosenberg: Yeah, for sure.

Chris LaFay: That's like. That's why these blocks look really interesting. And some of these other ones don't necessarily because we're just dealing with solid colors here. So that's one thing to just like, as a very particular example to think about, that's why you see this used quite often on the pages that we built out the next thing I want to go over that wasn't in the video.

Lydia Rosenberg: Sorry, you may, you may have answered this and I apologize. That can only be. And I may be asking this in a. In a silly way. That can only be like a still image. Correct. Like. And this back behind the client testimonials, one could we add in something that had some like a movement aspect to it, some animation, things like that.

Chris LaFay: So with this core group block, we extended that group blocks functionality to allow for a video background. So if you over here to settings, you will see underneath video background, select a video. So you would be able to add an MP4 file here as well.

Dawn Audano: Okay.

Chris LaFay: And that will also work with your. The image opacity here as well. So there is that slider underneath that style settings to dim whatever that asset is, whether it's an image, whether it's a video. It'll then dim it to basically the background color is at the very back, the video or the images in the front. And then that slider then dims that. That foreground opacity of what media type is.

Lydia Rosenberg: Cool.

Chris LaFay: Makes sense.

Lydia Rosenberg: Yeah, I could just. Yeah, I think so. Michael, does that make sense to you? That's who matters a bit more to. But that's cool because I could see some of like where we have some of this texture but like, you know, we have like our pack Ripple which is like the little circles and like very, very subtle, like some very subtle movement. Nothing, you know, but that could add some visual diversity as well to some of these blocks. So cool. Thank you. Chris.

Chris LaFay: Yes. The next thing I want to go over is how to make your lives easier page by page. So for example, this client testimonial section common block that we had on the designs, how do you save this and then reuse it later? So there's two ways to do this. So once you build out the block the way that you wanted to. I'm a big fan of renaming things. So we're going to call this client Testimonials section. Saving this like renaming. This is nothing but aesthetics. This is like layering, naming your layers in a video. Go over here to create pattern and this is where things like not diverge but split up a little bit. So you'll want to give it a name. So this is obviously this is a client testimonials that goes full width. Right. So I'm going to call this testimonials and this is where nomenclature comes in. So I'm not going to try to create this nomenclature for you, but I would I would come up with a naming convention so that you have an idea of what, what it is you're dropping on the page. So in my opinion, this is a testimonial section, this is full width and it is a. It's a starter block. You're not going to use the same testimonials over and over and over again. You can then categorize it. I'm just going to call this columns. This toggle is either synced or unsynced. If it it is by default, it is by default synced, which drives me nuts. I wish it would not be. If you mark it as synced, if you drop this block on other pages it will be 100 identical. And if you make a change, it makes a change everywhere. And if you actually see this over here on the left hand side, you see the little purple with the logo garden, that means that purple means that it is shared and that it. One edit in one place changes it in multiple places.

Lydia Rosenberg: For this we would not want. Right. Because we would want to change which testimonials we show on different pages. But we want to say we want the same foundational block.

Chris LaFay: Yes.

Lydia Rosenberg: Like, which is what we're building right now. But if we change the testimonials on homepage, we don't want it to change it on about us.

Dawn Audano: Right. Okay.

Chris LaFay: 100%.

Michael Rosenberg: Yes.

Lydia Rosenberg: Thank you. Great.

Chris LaFay: When you add this as a unsynced pattern, think of it almost like you're copying and pasting. So let's say that you change like the words client Testimonials in the header 2 tag to Bob's testimonials. That's not going to change anywhere else. So you're basically like saving this almost like a template that you just kind of copy, paste, copy paste and have very easy access to. I'm not going to actually. Would you like me to save this one?

Lydia Rosenberg: Sure, let's go ahead. Let's have it.

Chris LaFay: So we're going to delete it in.

Lydia Rosenberg: The future if we needed to.

Michael Rosenberg: Right?

Chris LaFay: You can. Exactly.

Lydia Rosenberg: Yeah, let's say that. Great.

Chris LaFay: So we have that there. So now the way that you would then go through and add this is just like you do any other block. So I'm gonna go my. The way that I add blocks is I pick whatever is above or below it because getting the little plus sign to pop up between blocks. The pain in the butt. So I'm gonna add this above this section. So I'm gonna go over here and click on add before I like typing in a slash Just because I have done this for a long time and you start typing in the name of it, push enter. And now that entire section pops up there for you exactly as is. You can edit it, do whatever you want to with it at that point.

Lydia Rosenberg: Very cool. So if you're on a different page, we add that in, we change which testimonials are being featured now, because it's not synced, they're. They're different. Cool.

Chris LaFay: So the process that I would go through with you guys, like, if I. If I was you, and I know that you're like adjusting spacings and patterns, paddings and all that jazz is important, I would hone in three or four page types, get them all right? Get all the spacing right, all the structures right, all that. Save away the different patterns, whether they should be synced or unsynced, and then go ham. And like, as if you do that, that'll rather than. I kind of view this as like looking at a soundboard. Like a soundboard. Like there's like a million different buttons all over the place. But in reality it's one row of buttons duplicated 38 times. So if you understand one row, you understand all of them. So get two or three, right, get them perfect, save away your patterns, and then the rest should be easy. Rather than trying to look at this like a 30 page thing, it's really a five page exercise duplicated. So speak. And then I want to dive into custom blocks a little bit and then duplicating pages easily. So with custom blocks, things like with your project slider and with testimonials, these are blocks that are purely done via code. So all you do is you fill out a form. So you'll see we have a projects block here on the sidebar you'll see the block settings. And these are all the different settings that you have. So, for example, we have these projects. This block was dropped in before we imported your hundreds of projects. And you can go in here, underneath the project section and add in whichever ones that you would like to see. So I'm going to go ahead and delete these. They have the videos, the whole nine yards. You can change the column count. And these are things that you probably just want to play with because all these different settings, like, I'm not going to go over every setting for every single thing. Play with them, test them out. If something doesn't work the way you expect to, let me know. But going through every setting of every custom block, I think 80% of them are probably Self explanatory.

Lydia Rosenberg: Chris, quick question for you on this one. Sorry, I have lots of questions, but I. This is so helpful. So thank you for your time for doing this. So I believe on our homepage, on the project section, if we add more than three, we start to get that like the little arrows and it's kind of like a carousel. And this one I saw like, There you go. Answer my question. So you can make a carousel. Great.

Chris LaFay: Exactly. Now that carousel is not going to show up very well on the back end of WordPress. And that's actually, actually that's a good note to have the back end of WordPress when you're in editing mode, there's a lot of extra code that gets dumped in onto this editing screen. So if something doesn't look 100 right in the editor, but if it looks right on the front end, like, that's all that matters. So just kind of know that like, especially some of like the weird animation stuff and like weird like little addendums and tags and some of these things might not look right on the back end. But that's.

Lydia Rosenberg: And that's why I've seen you like, you'll have the page up and do a refresh and be like, okay, it looks good on the page. That's like when in your demo. Okay, exactly.

Chris LaFay: We have that. We have the carousel there. We have the ability to turn off the button. So one of the things was not having the View project button. So that's there as well too. And again, you can if like for example, with this section, let's say that you did have actually. Do we.

Michael Rosenberg: Do.

Chris LaFay: No. Okay, that's actually another one. Okay, never mind. That's not important. So this is basically how a lot of the custom blocks or testimonials down here is very, very similar. Desktop and mobile carousel show featured image if you decided to actually upload people's photos as featured images to their testimonial, it's already built to go ahead and plug those in. So right now they just have little dummy headshots. Oh, wrong one. Right now they have little dummy headshots which obviously don't exist. But if you decided to move forward with those, that's already there for you. So that's how a lot of custom blocks work.

Lydia Rosenberg: Sorry, I was muted for a quick thing. I was just saying I liked that and I thought that would be. It'd be kind of cool. Maybe instead of headshots we could also like upload a company logo or something like that. Yeah, like sales loft s or you know, ones that are kind of make sense and people recognize. Great.

Chris LaFay: Exactly.

Lydia Rosenberg: Thanks, Chris.

Chris LaFay: Yes. So we have gone over custom blocks, groups, paddings,.

Dawn Audano: And.

Chris LaFay: Honestly, that's really about. That's really the core of. And then like background images and textures and things like that. That's probably about 60. Oh, and then I want to show duplicating pages. So the way that I like doing this, I don't like adding plugins for plugin syncs. Yes, there are. There are plugins that are called page duplicators. They do their thing. Whatever the. I don't. That's a waste in my opinion. If you go over here to the Options tab, there is. There's an editor called Code Editor. So if you click on that, it's literally going to output the entire code of the page. Copy paste, done. And then there's a button right here that says exit code Editor. So that's the way that I like to do that. Thinking about, like in terms of patterns and saved sections, we obviously talked about saving a pattern whether it's synced or unsynced. You can, if you wanted to, if there was a set of blocks that you just always use in tandem, 1, 2, 3, 4. You can save groups of blocks together as a pattern that are unsynced. So that you could basically have half of your page built out with dropping in one thing as well, too. So when you're thinking about patterns, it doesn't just have to be one row. It could be multiple rows of things. Now, I know that sounds simplistic, but it's something that I don't think about often. And so that's something to consider as well, too, which is why nomenclature on your saved patterns is going to save your butt in the long run. So if you know how to search for stuff, all the better. And actually, speaking of nomenclature, I think this will be the last thing. You have different icon blocks and things like that. And one thing I've noted was we actually went through and took all of the icons from your brand guidelines. We named them all in similar ways and they're all uploaded into the media library. And so.

Lydia Rosenberg: Thank you.

Chris LaFay: What you'll notice. You are welcome. Now, what I should have done is I should have looked at that. I'm not going to find this. I need to go back and look at the nomenclature. But I believe they all have icon in them. Yes, they do.

Lydia Rosenberg: Awesome.

Chris LaFay: And so basically what it is, it's dash icon. This is kind of the primary name. Is dash icon. The name of the icon is to the left, and then the color palette is to the. To the right. So if you know the icon name, if you know dash icon, or if you know the palette slug, if you will, you can automatically find all of your icons right there. And that'll work with custom blocks or if you just drag an image onto a page, etc. Etc. So all of those are there for you in this type of nomenclature. Actually, let's do this. Trash, dash icon. And then now you have all four of those popping up. So, yeah, black on green, black on light green, black on white, white on green. So, any initial questions? Because I would love for you guys to go in and actually, like, try to edit those pages really quick just to play around with it. You don't have to save anything, but I want you to touch it for a minute and see if it makes sense. So before we do that, any questions?

Leo Falkenstein: Yeah, I had a question. Just generally to make our lives easier when we're building, like, you are super familiar with, you know, slash this and all the options that are slash this, slash that.

Michael Rosenberg: Totally.

Leo Falkenstein: You have, like, a cheat sheet or something you could send over that, like, is our. It looks like you do.

Michael Rosenberg: Yes.

Chris LaFay: So pretty much everything in this block library is named the same way. So if you go to the block library, you're like, I want testimonials. It's called testimonials. If you want the icon pod, like, the actual icon pods are literally just these. Right? It's not the background with the padding and all that jazz. It's just the block. They are called icon pods. Block.

Leo Falkenstein: Okay.

Chris LaFay: So this. This block library is your cheat sheet. On the flip side, a lot of the more custom blocks are used across all these pages. If, for whatever reason, you can't find what you're looking for, but you know what page it's on, the block name is literally in this. Like, it's here. It's whatever. And you could. You can copy and paste as well, too. So if you had this page open and you had this block selected, if you copy, it'll copy that block over, and you can then paste it wherever you want it to go. Awesome.

Leo Falkenstein: And is that where we're going to be using the slash the most is with blocks. Are there other use cases for slashes?

Chris LaFay: No, it's really only when you're dropping in blocks into the page. It's just a shortcut to type in the name of the block. So even, like, if you add after, like, for a heading, it's like a basic heading.

Leo Falkenstein: Yeah, right.

Chris LaFay: There.

Leo Falkenstein: So, so can you just press slash real quick so I can see what, what like the options are when you.

Chris LaFay: Do that after slash.

Leo Falkenstein: Okay, so.

Chris LaFay: And these are your most commonly used ones. Like it's, it's gonna, the, this list is going to change based on what you've used recently.

Leo Falkenstein: Okay.

Chris LaFay: And there are standard blocks in there, like your buttons, there's spacers, there's custom. Like the, the shared ones also show up as well too, which again is why nomenclature matters because I think long term you guys are probably going to have more saved away patterns of like groupings of blocks together so that if you know what your names are, you'll basically go on a white screen and just type in slash, slash, slash, slash, slash, and then you'll have an entire page built out.

Leo Falkenstein: But I guess my question off this is like, yeah, I know I can do slash testimonials, but like there's also slash buttons and those are like two totally different things, right? Like testimonials block and buttons as a feature. So that's my, my question is like what, what all's in there that we can play with?

Chris LaFay: So all of, so all of the. I, I, I understand your question. Hold on a second, let me. There are too many things in there and which I think is kind of actually the going to be the root of your question is there is like when you. Let me actually just show you. So let's go to delete. I'm going to add after. So I'm going to click on this. Rather than typing a slash, I'm click on the plus sign which is literally the exact same thing. And then at the bottom there's browse all. So this is a way to kind of like view the. Don't, don't try, don't try, don't try.

Leo Falkenstein: To read all the.

Chris LaFay: This is why there's, there's way too many things here. Here. Yeah, because there's a lot of just core blocks. So these are all of your custom, nifty, spiffy blocks that have actually been like developed out for you. These are mostly custom and, or that custom plus Gutenberg kind of mix everything below that, which is why they say consume media at the top. Right. Everything below this is like normal standard WordPress stuff. I would recommend basically from, from these, from like, like a core Gutenberg block standpoint. Stick with groups, columns, headings, paragraphs and buttons and images. Like they have these other things like a cover where it's an image in the background with text on the top. You have a hero section for that. Like this, like this cover block is probably not going to be formatted exactly the way that you want it to be because not every single block in the library is going to absorb every style exactly the way that you want it to. Yeah, but your headings, your paragraphs, your bulleted lists, your buttons, all of that is already rocking and rolling and ready to go. So I would use structural blocks as your baseline and then all of your custom stuff and the things we built for you within those things. Things. That's a. That's a. I don't want to over. I don't want to over index on like analyzing on that because I think it's one of those things that you have to like feel and test and mess up and play with before that actually clicks in a little bit. But like, like media and text is literally just a. Like it's a two column block that WordPress gives you where there's an image on one side and text on the other. You literally have that with columns. Like there's Even some like WordPress has some like duplicativeness inside of it too.

Leo Falkenstein: Yeah, something would be helpful and hopefully it only takes you like two minutes is to like let us know. Like just give us a cheat sheet. Like use these and avoid everything else.

Chris LaFay: That's fine. Yep, I can do that. That's easy. Cool.

Leo Falkenstein: Another question I have because I'm in the, the back end right now, just on the homepage would be just like a quick orientation of like where we should go for certain things.

Chris LaFay: A little bit more specific. Go for certain. Where should I go for certain things?

Leo Falkenstein: I was just looking at the dashboard and I see post media forms pages. Like are you on pages right now?

Chris LaFay: Like, oh, that. Okay, gotcha. Gotcha. I thought you were editing the. I thought you were editing the homepage and trying to figure out where to go. You're on the dashboard. Got it. Okay. So orientation around here. Posts, these, your blog posts. These got migrated in at probably about 95 accuracy. If you go through and click through all of them, you will see some random paragraphs like shot over to the left hand side that just happened. There was probably maybe 10 or 15 that that happened on. Not too terribly concerned about it because I know you guys weren't terribly concerned about it either. Projects. This is where we spent. This is the Excel spreadsheet done for you to do a overview of this. The only thing actually went ahead and adjusted the template to make this more dynamic for you guys. The only content that's in here is literally just the who and the goal. Everything else is programmatic.

Leo Falkenstein: Amazing.

Chris LaFay: So you have your featured image here and then on this sidebar of the project, you will see the service, the product line, the strategic goals, and then the video. Of course I picked the one that out of the all of them that were imported, there was like four that don't have video. And of course I picked the one that doesn't have a video embed in it. This is where you would copy and paste that iframe code to make that, that Wistia video embed happen.

Leo Falkenstein: So, sure, this is great. But so basically we just type in the things on the right side. Click the right things here. I basically would go here and would I duplicate a page or would I add a new project?

Chris LaFay: Or add a new project. Yep. So let's go. Let's go to one that actually is probably fully editable. There we go. Yep. So you would add a featured image because that's just. That's the default image that's used on the card. You would add your service, your product, your strategic. These are basically categories. Like things like they're actually. Literally, they are like, they use the same structure as like blog post categories. You type in the client name and then you copy and paste the iframe from Wistia. And when you do all that. Sorry, sorry. We're good. Yeah, Magic happens. And it all is right there. And like these are all dynamic. These pull whatever. I think, I think, I think it's your project line, Cinematic service line. Whatever the service line is, it pulls in pods. It pulls in three from that service line automatically. So cool.

Leo Falkenstein: So if I just pressed Add New, it says welcome to the editor. Yada yada, yada, yada, yada. Maybe we'll just look at Add New together just so we can like walk through the creation one.

Chris LaFay: Yeah, let's just make sure. This would be Classic City testimonials. And then the only content that's on here are the two headings like the who and the goal. So I would type in a heading, who Chris Rocks Goal, Make Chris Dollar Bills. So under the project settings here, you would set your. Your featured image. So this would be whatever the. Like the image that would pop up in that card. What service line is this? This is testimonials product line, Thought leadership. You can type into these boxes. I'm just clicking things as I just don't know all of them off offhand. And then brand awareness. And so the client would be Classic City. And then the video embed. I don't have A video to paste in here, but that's where that would be. And then it defaults to the featured image when you don't have a video there.

Michael Rosenberg: Nice.

Chris LaFay: And then it populates videos from the testimonial section.

Lydia Rosenberg: Chris, would you recommend creating a new page like this or is there a. Is there any benefit of duplicating from like an existing page and making edits for projects?

Chris LaFay: These will take you five minutes to do. So. No, there's no reason to. There's no reason to duplicate these.

Lydia Rosenberg: Okay.

Michael Rosenberg: I have one question about the. The goal slash product line tags.

Leo Falkenstein: Like where did those live?

Michael Rosenberg: Because I know I think when we imported we had duplicates of some that want to add a typo and yes. Want to make sure that we can audit those.

Chris LaFay: It's right there. So quite literally the same as like if you go to post and you go to categories and tags, it's the same thing right here. So you'll just have this taxonomic, this list of services, products, great, etc. And this works exactly like posts as well too. So if you're like I need to change multiple. You can check the boxes, go to bulk actions, edit and then you can add services and stuff like that. This, this is all. This is all standard core WordPress. Cool.

Leo Falkenstein: No, that's very helpful. So projects easy posts, we just start typing stuff in there for blogs. Like you really just blog in there, use header, add images, yada yada yada y.

Chris LaFay: Cool.

Leo Falkenstein: And then pages is like where you just were making a services page.

Chris LaFay: Oh yeah. All we did all that we just worked on just like for majority of this was within pages and so and all for the most part all your pages should be in existence in some way shape or form. I'm sure there will be some like that you'll want to create and add new. Actually one note, with page CRE page creation and editing, get into the. I don't know if you guys did this on your old side, but get into the habit of putting like putting children pages underneath parent pages. Don't leave them all loose leaf kind of at the root. And the way that you add a parent page is when you're underneath this settings panel. If you go over here to parent, it says none. You can then type whatever page you want that to be as the parent so that you start having good page organization on the back end of your site. And that way your URL structures will be good too. So if you're adding a new product line you would then obviously this is the products page. I can't type in products on this one. But if I wanted this to go underneath the learn now, the URL would be consume.comlearn products.

Leo Falkenstein: So do you have any best practices for, like, how many pages is too many, especially with video, if that's going to affect site speed or anything like that?

Chris LaFay: In terms of pages. In terms of, like, pages on your.

Leo Falkenstein: Site overall, I was thinking more, I guess. Yes. Like podcast projects and blogs and stuff like that.

Chris LaFay: I mean, with. If you had an actual SEO strategy that you were implementing, I would tell you to lean into whatever that is. The core answer to question is, it doesn't matter. I'm more. I would be more concerned about not loading up your website with 10 megabyte image files on a. Like, think it, think it. Don't think about it from a macro level. Think about it from a micro level. Like, it's more about the page, not the quantity of. If that makes sense.

Leo Falkenstein: Very helpful. Yes. And then will there be any other portions of this that we should be spending time in this. And I'll.

Chris LaFay: I'm gonna go over testimonials really quick. Testimonials work exactly the same as projects. There's just less data. So if you click on edit, it's literally just a form. That's all. And then you have the. The testimonial photo over here as well, too, that if you do decide to upload them, you can do that by default. They're. They should be squares because if you do decide to use the testimonial photos, they will be in circles. So circles equal, square. If you put a rectangle on there, they might get their head chopped off.

Lydia Rosenberg: Gonna look a little funky.

Chris LaFay: Exactly. Later down the road. What we can do is we can technically tie testimonials to projects as well, too, dynamically. So, like, if there was the. If you wanted to increase, like, the interconnectivity between, like, blog posts and projects and testimonials and service lines and stuff like that, like, that could all eventually be pulled together because we have all of these things separated. It's not a today thing, but it could be a future thing. That's. That's really about it. Any questions? Like, I saw that you were editing the homepage.

Leo Falkenstein: I'm tinkering.

Chris LaFay: You're tinkering, huh? Yeah, I think.

Michael Rosenberg: I think my biggest question, because this is such a unique block, is the stackable block.

Leo Falkenstein: Like, I've already.

Chris LaFay: Let me go over that one. That. That is a fun one. It's very unique.

Michael Rosenberg: I'm trying to figure out I'm sure they're like, I've already seen. I can treat it like a. It's basically two column layout. You can add modules within each column. Usual, usual. Set minimum height, padding. I guess my biggest question is like, I know we had a bunch of feedback about like where things stick when you're scrolling. Is that something we're able to change or is that in the code?

Chris LaFay: So the stackable nature is all in the code. So I'm going to, so I'm going to dive in. Let me actually I'm going to. I'm going to dive in pretty deep here for a second. So let me, let me do. Let me, let me, let me get to a place here that. Okay, so now I think going a little bit technical might make things a little bit clearer. So I'm going and adding a block to the bottom of this page. I'm not going to permanently save this. I'll delete this when I'm done. So the, the block called stackable, all it is is a grouping of other blocks. It's a container, it's a vessel, if you will. That's it. So I have stackable here and you can add blocks inside of this, which is the whole point. And so actually it's been a second since I've. I need to go back here and edit this really quick. Can I take over? Are you gonna lose any. Are you gonna lose. Okay.

Michael Rosenberg: No, no, you're good.

Chris LaFay: I actually haven't had to touch this block in a while and I want to make sure that I am telling you correctly before I. This is window. This is the window style. Yeah. Okay. Awesome. Okay. So from a technical perspective, you can literally put anything inside of this and they will stack. Now will they look great? Probably not, but you could. So one of the things I'm actually going to do is I'm actually going to. And I realize this in this moment that I have not done this. I'm going to. That's interesting. I'm going to edit page. So what I'm going to do is I'm going to add in a copy this. Well, let me copy this. That's not correct. Correct. Add. Oh, group. That's why. Okay, well, let me do it now. Give me one second. I will, I will. I promise you I'll make this simpler. Hold on a second. This is not the way that it was working before. Please hold while your call is being connected. This is what we're going to do instead. Actually going to back up. We're going to go back Here, this is what we're going to do. Not synced. This will be simpler. Okay. All right, so I went ahead and saved a pattern with the stackable windows already partially created the homepage one basically. So we're going to go here and we're going to go stackable and we're going to go stackable windows. That's going to load all this stuff in for you. The way that this technically works is that inside of it is a group is just groups again groups. You live and die by groups in here. And there is one particular style that's added underneath the settings of a block that's called window style. And if you toggle window style on, that's what gets you this window here. So it adds in the, the top navigation, it adds in the little buttons, it adds in the core padding, etc. Etc. Inside of the window it's literally just any, it's anything you want. So the, the padding is. And all that are all default. So like this top and bottom, all that's default. This is the content of. It's just literally a columns block. So if you wanted to get rid of the columns and let's just say you wanted to add before and we're going to type in paragraph text over and over and over and over and over again. Delete that columns save. This is the animated explainer refresh. You can do that. I do recommend doing column because you're probably going to see some things that act a little bit funky, but it's just a group at the end of the day. So if you wanted to switch the, the arrangement, if you wanted to put on this one here, if you wanted to move the right hand column over here to the left hand column, you can do those things. If you wanted to change this bulleted list to something else. So like you could do all of that stuff within that window and then at the group level of the window is where you change your background color just like you would in any other group. And so those borders are all just a predefined color. So like the circles, the borders around it, it's all written in code to where it's all that one, like I think it's light gray or something like that. So as long as you don't pick that color for the background, everything works just fine. So then you can then go in here and then duplicate these out, create, add more, etc. So if you wanted, you know, set of four windows, you wanted five, you could do that. I wouldn't really. I From a user experience perspective, I probably wouldn't do more than four. Like four is a good amount to stack, but everything is automated. So if you wanted to get rid of the fourth one, delete that one and only have three, that's fine. If you wanted them all to be the same background color, you could do that as well too. Also, a random note about the check boxes with the lists. These are standard bulleted lists. If you click at the. The parent list level that contains all of them and go to the block settings, you will see the green check option for the style. And that's in a few place like the, the alternate. The. The eyebrow text above paragraphs and stuff like that. There's a few things like that that use core Gutenberg blocks, but they just have a custom style attribute to them.

Michael Rosenberg: So if we, if we wanted to adjust like where the windows stick on the scroll, that's not.

Chris LaFay: That's all. That's all programmatic. Yeah, that's all programmatic.

Michael Rosenberg: Could we provide some feedback on that and get some tweaks or just tinker with it in the code or.

Chris LaFay: I would, I would recommend consistency because these have to be responsive across a lot of devices and a lot of different window sizes. So I would recommend consistency here.

Michael Rosenberg: Well, I think our issue is, I think we provided feedback on like where the last one you'll see, like when we wanted the last window to stop in the same stack, like stop there, basically.

Chris LaFay: Gotcha. Okay. Make a note of that. These, these are weird. And so as you're going through like, that is programmatic. So don't let that stop you from edit, like adding content into these blocks. Sure. Yeah. Now there are some where it's like, hey, if you would rather have like anything, anything that's custom done, like this one change changes it across the board. If it's something in Gutenberg, it's probably more of a manual thing. That's a good, that's actually a good, like general, like piece of knowledge to have. If it's a programmatic block where you're just editing fields, one change, one code change can change a lot of things. If you're dragging and dropping stuff in Gutenberg and you're making changes within Gutenberg, that's typically section by section or page by page. Other questions?

Lydia Rosenberg: None for me at this time. I know we have a leadership meeting in two in two minutes. And so I just want to say thank you so much for your time. For both of you, dawn for joining as well. And this has been so helpful and we're really excited to kind of, like, you know, like. Yeah. Start tinkering a little bit, Start putting in some of those little elements that we talked about, like those little sort of graphic elements, things like that, see how it works. So you've given us so much information and help and all of this, and so we just. We really appreciate it. Thank you, Chris.

Chris LaFay: And I do apologize. It's taken two weeks to do this. Between the sickness and everything. I.

Lydia Rosenberg: It's fine.

Chris LaFay: This is kind of. We've been here for about a week and a half now, and I feel terrible about that.

Lydia Rosenberg: Please don't. Please don't. Please don't. Because our team has been like. We had three shoots this week. Like, we. It's been crazy, too. So I think it was just a, you know, perfect storm, all the things going on. But we're just glad that you're feeling better.

Dawn Audano: Yes.

Chris LaFay: My recommendation for leaving feedback is going to be very similar to the last time. Play around with it, mess with it. We made a backup of the site before this meeting, so if you completely bomb it, that's okay. We can roll back to this morning. So my recommendation is play with it. Tinker, Tinker, Tinker, Tinker. And when you. When you come across the same thing a couple of times, make a mental note of it. Basically, don't spam the marker thing, because if you spam the marker thing, we're.

Dawn Audano: Are.

Chris LaFay: We're not going to know what's right and what's wrong. And so go through with it, test it out, find inconsistencies, let us know. And then in a few days, once you've had a chance to play around with it for a little while, give us some consolidated feedback, and then we can go through and do all those in one fell swoop, rather than trying to manage a lot of noise from a lot of different angles, that will give us the best ability to help you guys out efficiently. So. That sound good?

Leo Falkenstein: Sounds awesome.

Lydia Rosenberg: Thank you. We appreciate you both.

Chris LaFay: Have fun.

Lydia Rosenberg: All right, bye, all.

Chris LaFay: Yay.

Michael Rosenberg: Bye.