WDD LIVE 078: Conversion Bridge (w/ Derek) + New Website Critique + WP Townhall Site Walkthrough

Yo, what’s up, everybody?

Welcome back.

It is another episode of WDD Live, my favorite place to be on a Tuesday.

Go ahead and say hi in the chat.

And of course, you have to, if you’re an OG, you’re going to pre-like the stream, right?

Always pre-like.

So drop the likes, drop some haze in the chat.

We have a special guest today.

We have Derek from Conversion Bridge, who I will bring on in just a moment.

But let’s go ahead and say hi.

We got Anja in here, Sylvia, Justin, Eric, D123.

By the way, D123, it was good talking to you on WP Town Hall last night, D123.

And it took me like a solid five minutes because it said Derek something something or whatever, 123.

I don’t remember what it said, but I didn’t make the connection right away.

So D123, welcome.

Good to see you.

Nick Arce is here.

I’ve been eyeballing this plugin for some time.

So excited to see how it works.

Oh, good.

Excellent.

Excellent.

Let’s do this.

Who’s heard of Conversion Bridge already before today?

Has anybody?

Just drop in the chat.

Let me know if you’ve heard of it.

Justin is here.

Says OGs.

And it’s right.

OGs in the house.

Andrea, good to see you.

Okay.

There’s a little bit of a delay, so we’ll wait for these answers to come in.

We got Eric Allen in the chat.

We’ve got David Das.

We’ve got Erica.

Good to see you, Erica.

Good to see you, Suzanne.

Okay.

So a lot of no’s.

This is good.

So you’re going to get, Derek’s going to get in front of us a bunch of new people today.

I’ve been demoing Conversion Bridge on Etch.

And I think you guys are going to like this.

I think you guys are going to like this.

I did from you.

Okay, good.

I don’t even, I don’t remember the things I talk about and when I talk about them half the time.

So I can’t remember when it’s been mentioned.

But what we’re going to do for the agenda today, we’ve got Derek is going to come on.

We’re going to talk a little bit to him.

We’re going to do a demo of Conversion Bridge.

We’re going to answer your conversion analytics slash Conversion Bridge questions.

After that segment, I’m going to do, I’m going to actually give you guys the choice.

You get the choice of, do you want to do the WP Town Hall walkthrough or do you want to do the website critique?

Now we’ll do both of them, but you get to decide which order we do them in.

So be ready to vote on that.

And let me see if I can get Derek into our stream here.

I’m going to add him to the left side.

Derek, you there?

Down here.

All right.

Just, you know, a little introduction.

Tell us who you are and how you got here.

Yeah, sure.

My name is Derek Ashour.

I’ve been in the WordPress space for about 15 years now, maybe.

I started my own client business back in 2007.

So making small business websites.

And then many of us do.

We discover WordPress and start using that to build websites with.

About, what was it?

2013.

I built a plugin called Sunshine Photo Cart.

It’s just for photographers.

It allows them to create online galleries and then sell digital downloads, prints and all that kind of stuff.

Very, very niche, very specific one.

But I’ve had that one.

So it’s a full e-commerce plugin.

So it’s a pretty big one.

I have a couple other little ones through my other brand, WP Sunshine.

I have a little fun confetti plugin, which a lot of people like.

Address auto-complete one that can be used on any form plugin or WooCommerce and lots of other things.

But yeah, conversion bridge is my latest one.

As I’m one of the many people who are making that transition from doing agency client work to making products.

Seems to be the natural progression over time of what many people do, like yourself.

Excellent.

So I know for myself and probably a lot of people in the audience today, you know, analytics is important.

Conversion tracking is important.

Understanding, hey, like, all right, here’s where people came from.

Here’s what they’re doing on the site.

Here are the conversions, especially when you’re doing paid advertising and clients are like, hey, am I getting an ROI?

What exactly is the ROI?

I’m giving you this money.

Like, is it actually working?

And then we get into all the technical weeds of conversion tracking and a lot of people just give up.

They’re just like, I don’t know.

I’m going to, I’m going to hire this out or I’m going to bring somebody else in.

I can’t do this myself.

I don’t want to mess around in the, and by the way, Google analytics, I don’t know how you feel about Google analytics.

The new, the new version of, but I haven’t met anybody that actually likes it.

Let’s get your take on it real quick.

I don’t know.

What is your take on the redesign and all of that?

Yeah.

I mean, that’s one of the reasons why I created conversion bridge in the first place is because I did not like Google analytics.

When I was creating sites for clients, I could put on Google analytics.

Of course, it’s so popular because it’s free and it’s hard to beat free.

Yep.

But, but you put it, you know, in the past I’d put, you know, the UA universal analytics version up, send, you know, set that up for clients and then say, hey, this is where you can check your stats and never have to do a tutorial or a walkthrough.

They could look at it.

They never really had any questions.

They go, oh yeah, I can see it.

It made sense.

It wasn’t that it didn’t require much of a degree to, to figure it out.

Yeah.

And then now with GA four, even someone like self, who’s been making websites and looking at analytics for 20 years now, I got in there when I first saw it and was like, where the fuck is everything?

Yeah.

You know, it’s like, what do I do?

Everything requires a custom report.

Yeah.

It’s like everything requires a custom report set up.

It’s crazy.

It just was, it was bonkers.

And so that along with, you know, do I need a cookie plugin?

Do I not need a cookie plugin?

Can I do this?

And I was like, I just don’t want to deal with it.

I want to go find something else.

So I, you know, I was like, let me go find, you know, there’s the rise of alternative analytics platforms.

You know, you have plausible fathom user maven.

Um, there’s a couple others that, you know, um, you can see on the conversion bridge site, there’s actually 10 plus ones that I integrate with.

Um, and what the benefits and there’s just, it’s a back to just getting your, a simple view of your data that most small business owners need and want to actually use and can consume in a friendly way.

Um, where Google analytics is just, yeah, I mean, it’s great for your million dollar, you know, year budgets that are doing advertisers and can pay a full-time employee to set up all the reports or a full-time contractor to do that.

Yeah.

But for us building small business websites, you know, we’re building a five, 10, even $50,000, you know, dollar website.

Some of those, they don’t need.

Uh, an engineering degree to, uh, or someone who has an engineering degree to just look and understand the reports.

Yeah.

The other side of it too, especially for agencies that I ran into is, um, you, you end up with a bunch of clients on like this thing and a bunch of clients on this thing.

And then the integrations are all done differently.

It’s like, some of them are on tag manager.

Some of them are not on tag manager and that you’re just, you know, and so conversion bridge, it seems like is kind of that centralized, uh, way to just integrate.

And doesn’t matter the platform.

So you’re essentially just checking boxes.

We’ll pull it up in just a second and show everybody.

But, um, uh, so, you know, give us a little bit of the rundown before we like actually dive into the demo of how long have you been working on conversion bridge?

Like, when did you start?

Uh, like what phase would you say it’s in?

Uh, you have a, you know, what’s the customer base look like that kind of stuff?

Yeah.

Uh, I’ve been working on it since last December.

So it is a relatively new product.

Um, but I think it’s very stable right now.

Uh, it has, uh, you know, like I said, it works with 10 plus different analytics platforms, has four different ad platforms like Google ads, meta ads, Pinterest ads.

Um, so it can track conversions and all those.

Uh, and then it also integrates, you know, with 50 different WordPress plugins at the moment.

Um, and I’m always looking to, you know, if people have recommendations, I’m always looking to, to add more.

Um, but, uh, but yeah, so it’s pretty robust.

And like you described, it takes something where in the past, one thing that, one reason why I built conversion bridge was because I always needed to add analytics to every site.

Um, and I just, I didn’t want to add this, you know, header and footers plugin or, you know, Google site kit.

They just all seemed blown out of proportion, just overwhelming amount of stuff for just, I want to add a snippet of code.

Um, and so, uh, I always tried to find the most minimal way of adding analytics and stuff, but now that I also wanted to be able to add different types of platforms, um, you know, where’s the one for plausible?

Where’s this one for this platform?

Where’s this for that, for that platform?

Um, and one thing that really bothered me as well in the WordPress ecosystem is that say you got like give WP then has their Google analytics conversion tracking add on made by a another third party.

Then you get, you know, fluent forms then has their Google analytics conversion tracking that you have to pay for.

And then you get another one and you could have, you know, three main plugins that you have to pay for and then also pay for their conversion tracking add on as well.

Right.

Done by yet another third party.

And it’s like, this just keeps blowing up the budgets.

And I just, it always frustrates me.

It’s something that’s, you know, about a lot about the WordPress ecosystem.

But, um, so that was a lot of my plugins.

You’ll see is that it’s solves it for tons of different plugins.

You know, it’s not just, I’m not making just a conversion tracking for just fluent forms.

Right.

Right.

I’m making it for 50 plus different plugins.

Yeah.

And it becomes like the go-to.

And so that’s, yeah.

So like an agency who maybe if you’re doing site maintenance or you’re building new sites, it doesn’t matter what site you’re coming to them.

You can always work with the one plugin.

Yeah.

Know how it works.

Configure it.

Be done.

And out the door.

Um, you’re not having to relearn, rebuy, manage subscriptions for all these different plugins and all this kind of stuff.

And your team, your team comes in and they’re like, all right, we know our stack is conversion bridge.

And so they go in, they go to conversion bridge.

It’s not like, all right, this, this client, what did we do here?

How do we find the code?

How do we like where, you know, it’s that, that’s where the nightmare comes in.

So let’s go ahead and, uh, get the demo going.

I’m going to see if I can elevate your, your screen should be shown.

Um, so a couple of people said you’re a little quiet, but I, uh, I tried to bump your volume a little bit.

So hopefully everything’s good.

I’ll try and stand a little closer, but go ahead and get us through it.

Yeah, sure.

So, uh, this is just the homepage here, but, um, we’ll walk in here.

Um, let me get in.

Um, so when you get into a conversion bridge here in the WordPress admin, um, setting up analytics and I, and what I do in a lot of my marketing stuff, you’ll see, it says it’s a one minute setup and, and it really can be, it’s going to take a little bit longer.

Cause I got to check some boxes and talk about some things.

Um, but you can see, here’s all the different analytics platforms right now that conversion bridge works with.

So, uh, setting up something like Google analytics, it’s just a simple toggle.

You can use the default tracking, or you can even use tag manager, copy and paste your measurement ID hit save.

And you’re done.

Google analytics is set up.

Um, there’s a cut each analytics platform has unique settings based on what their features and what they offer.

Um, you know, right now I have Google analytics set to debug mode.

We might see that in here a little bit.

Um, and each analytics platform, you can actually exclude the main tracking script tag.

If you were using Google site kit or some other method of including the core tracking script.

Um, you can just tell, uh, conversion bridge, not to, not to add it.

If you, for whatever reason, wanted to use that version.

Um, and then, you know, one great thing about conversion bridge is that you can actually add as many different analytics platforms to track at the same time.

So I can enable user maven, um, um, pers, which is another good one plausible and fathom.

And I could run all five of these at the exact same time.

Um, one great thing about this is that if you’re considering switching to an alternative analytics platform, um, you can run five of these at the same time for like a week or two.

I’m not saying to do it longterm, but they’re all really minimal JavaScript.

Uh, you know, they don’t have much weight to them.

Um, so it’s not going to completely bog down your site, but they also have seven or 14 day free trials.

Run four or five of them and then compare and see which one do you think works best for your needs.

And at that same time, if you still are currently using Google analytics, you can still be tracking in Google analytics.

You’re not losing anything.

Um, so you can see how, uh, you know, you just grabbed the API key or whatever it’s called in each one of those analytics platforms, what you want.

And, um, and copy and paste that in there and you’re all set.

Some of them, um, offer the ability to, uh, share or embed your, uh, analytics.

So what that does like, for example, user maven, you can just copy and paste a little URL.

And then if I were to save this, uh, when I save this, we’ll see a little tab here that links to user maven.

And then you have your analytics right here in your WordPress admin as well.

And it looks what it’s literally just a, um, uh, here I’ll even show it to you real quick.

Um, you can see there’s, uh, Oh, there it is user maven and it’ll show up right here in your WordPress admin.

It looks just like user maven.

So it’s having user maven in your WordPress admin.

Of course you could always log into their site as well.

Um, and same thing for something like.

So you can see that their, their data is all right there.

Um, so you could do that for a client.

So then they can also easily access their analytics from one spot as well.

Cause I know some clients can be a little slow in the uptake of how that works.

So, yeah, so now we have, you know, um, five different analytics platforms set up and then down here we have the marketing platforms.

So we can just do Google ads here.

You have your, just, um, your AdWords or Google ads account.

Um, it even works with the phone conversion tracking snippet.

If you wanted, I had a client that needed that.

So I just said, Hey, let me just add that to conversion bridge.

Um, and then meta ads.

All you need is the pixel ID.

Um, so, so yeah, that’s pretty much.

So David, David says, this is gold.

All right.

So we’re off to a good start.

Um, here’s the thing guys, you, we’re going to do a Q and a in a minute and you guys know the drill, the, the questions that you’re putting in the chat, they have to have a hashtag, hashtag Q or hashtag question, or they are going to get lost.

You can go ahead and start putting your questions in.

If you have questions as we go, they just have to have the hashtag so that we can easily find them when we get to the Q and a section.

But what you’re looking at right here is the ability to quickly and easily integrate any of these analytics platforms.

And of course, like most projects, you wouldn’t be going in and doing five different, uh, platforms.

We’re just showing you how easy and simple it is.

Right.

Um, like for many of my clients, I talked them in and convinced them to using user Maven.

They might want Google analytics as a backup.

So it’s like bang, bang, first two checked, and then it’s set up.

It’s ready to rock and roll.

Uh, and then down below you saw Google ads and things like this.

So this is the, uh, the, the start of the setup.

I’ll let you keep going, Derek.

Yeah, sure.

Um, so the next step is, uh, setting our integrations.

So you’ll see here, um, available plugin integrations.

Uh, conversion bridge will detect which plugins you have active and we’ll show them right here so that it’s nice and simple toggle.

Um, ones there’s also, as I discussed, there’s 50 plus plugins that, uh, that conversion bridge integrates with.

So they’re just listed down below.

So you can see which ones those are.

Um, but there is some things like a core WordPress.

So it does integrate with some core WordPress stuff like being able to track searches.

Uh, and you can also track logins.

You could even track registrations if you wanted to.

Um, another one, uh, with core is, um, so this is more with Gutenberg blocks, but you could track video plays if you use the Gutenberg, um, you know, video block or YouTube plays, um, audio file downloads, image clicks, even if you wanted to, I’m not sure who would want to, but I was, let me add that.

Why not?

Um, so those are some core ones and then these are some other ones.

So for example, gravity forms, WS form and WooCommerce, which we can go through here as well.

Um, so some of these are right here.

It’s just, you know, on off toggle and you’re, and you’re done.

Um, that’s all you need to do.

Some of them, like say for WS form, you enable that and these are done on a per form basis.

So you can enable it or disable it and customize it on each form.

So, uh, if we were to go to WS form and edit one of those, we just go into the actions here.

I’d add a new action.

I’ll select conversion bridge.

And then all I have to do is save and close and I’m done.

And I’ve added conversion tracking to my, to my WS form.

Um, if you wanted to, you could customize that a little bit, uh, and you’ll see this in, in the settings as well that we, in the other screen, but you could customize that label.

And what that means is how it appears in your analytics platform.

If you’re using like plausible fathom, any of those other ones, uh, you know, there’s, uh, you, you can customize how that looks in the, in the platform there.

You can set a value there as well.

And when we have Google ads enabled, Google ads integration enabled, you can set the conversion ID.

It’s an ID.

That’s really easy to grab from Google ads.

There’s a documentation article on it, on the conversion bridge website.

You just copy and paste that unique, you know, character code thing, copy and paste that in there.

And now you’re tracking both that in your analytics platform and in Google ads.

And you’re done.

So you can see how this is done in less than a minute, copy and paste your, you know, your little ID that you had for your analytics platform, couple of check boxes, and you’ve set up conversion tracking for a form.

Um, if we go back a little bit here, go back to the integrations.

Um, so that’s like WS form for WooCommerce.

Another really popular one.

Um, again, we can just track purchases so, uh, you can customize that label.

How, again, how it looks in your analytics platform.

And then again, you can do the same thing, Google ads.

So every time there’s a purchase on WooCommerce, it tracks as a Google ads, uh, conversion.

Um, you could even track individual products.

Uh, this is, it depends on your analytics platform.

This one might be needed.

Um, some of the alternative analytics platforms don’t necessarily have great e-commerce tracking.

So this is a way to, um, uh, a kind of way to get around that.

But for example, if you’re doing, if you are doing Google analytics, conversion bridge does send down to the line item, down to the price and everything into Google analytics.

So you can do some really detailed, really, uh, good reports.

So you could pull things like what is my most popular product from your Google analytics data as well, or what was the source of, um, you know, these sales or this specific product can get all kinds of great data because conversion bridge does send all the data you could ever need on every single transaction that comes through.

Um, so you can see it does all kinds of stuff, uh, in here there’s, you know, um, page builders, there’s, you know, e-commerce plugins, easy to do downloads, my own plugin, sunshine, photo cart, sure cart, WP simple pay.

So if you’re looking at the conversion bridge website and see all the available integrations that are on here again, it’s 52 and you can see all the form plugins that, that integrates with membership plugins, e-commerce ones, all that.

Uh, and of course, if anyone ever comes across and we’re like, Hey, could you do this?

I’m always happy to take a look and, uh, and see if we can get that integrated.

And then another big thing with conversion bridge is custom elements.

So if there’s not an automatic integration or you have something unique to your site, you can easily add a custom tracking event to anything.

So these are things like you could track clicks or scrolls.

So you can click and you could type, put in any CSS selector that you want, that you could, uh, narrow that down to on your site.

So you can also track, you know, do I only want this to happen on a certain page or the entire website?

And then of course the Google ads conversion ID for this particular one.

Um, same thing for scroll.

If they scroll to like, say, you know, some people want to track whether they scroll to the footer of the page or something like that.

So they did, they actually read the whole page, things like that.

You could, um, you could track that as a conversion, other things, time on page, you could track.

So you can seconds, you know, when someone’s on, on a specific page for, uh, 10 seconds, consider that a conversion or at least a special event that you want to track.

Um, you can even do JavaScript events.

Um, you know, for, uh, if there’s a, maybe you have a WordPress plugin that triggers an event when a JavaScript event, when they do something, I don’t know.

Um, but this was requested a couple of months ago.

And then of course, just any general page view.

Um, you could track that as a unique conversion event, uh, on your site and you can add unlimited number of these, as many of these things as you want to fill in any potential holes that maybe aren’t, uh, on there.

Um, of course my site auto updates in the middle of this.

Yeah, always.

Um, unfortunately.

Okay.

There we go.

It did come back pretty quick.

Um, we’ll talk about journeys here in a moment, but it does integrate with cookie plugins as well.

That’s a popular question.

So, um, there are these four, uh, cookie pop-up plugins that it does integrate with.

But the one thing to note that, um, if we look at these platforms, the only one that really needs a cookie plugin is Google analytics.

That’s one of the main benefits of all these alternative analytics platforms is that just by using them, you do not need to have a cookie notice plugin on your site.

Now, I’m not saying that there might be something else on your website that causes you to need it, but your analytics platform, if you use any of these options will not require you to, to have a, um, a cookie pop-up.

So, but if you do want it to integrate with one of these, um, you know, I follow your lead.

Basically the settings are there to follow however you feel you want this site to be set up.

So on this site, for example, if I had the compliance, um, pop-up available, everything about this would follow it.

You can also do, um, you know, disable tracking by certain roles.

Of course I have 50 plus plugins installed here.

So there’s all these different roles that are on here.

Um, and also by environment as well.

Um, and then this to help me with your, help me with support that does some console logging.

So I can see when the events are getting tracked.

Um, so one thing that conversion bridge also adds on in addition to sending data.

So conversion bridge was originally built as literally a bridge from your website to your analytics platform.

To make it easy to get across the river, to go from your website to your analytics platform.

But what it does, it also, um, adds its own, has its own records of what people are doing on your site.

So it does also have some journeys in here, what I call conversion journeys.

So if someone does, uh, in addition to sending this to your analytics platform, it will also track the user and give you information about what they did.

So you can see that say they started on this.

This is going to be a wild cause this is, you know, one of my, my things, but you can see that, you know, I visited this page multiple times, had a conversion of a custom page view.

I viewed the homepage, went to a couple of different other pages.

I added something to cart.

Cause I’m tracking that in WooCommerce.

I viewed the cart.

I began checkout and then made a purchase.

So you can see all the exact step-by-step pages and their actual journey that conversions happened on the site.

And if you were even in something like WooCommerce and we go, oops, I need to go to orders.

And I look at this order right here.

It will show that journey right here in the order as well.

So I can see, I’m looking at the details.

I can see, you know, see, uh, exactly what’s going on.

Um, there’s some like even forms.

Uh, if I go to entries and I can view this and like gravity forms, for example, Oh, this one didn’t track it, of course.

Um, but yeah, it’s, it should show that there.

Um, I’m not sure why that one didn’t.

Um, Of course there’s gotta be one bug in the demo.

Yeah.

Um, but it will, yeah, there’s always one.

Um, but you know, it, it does as best it can, uh, depending on the plugin, uh, to show it at this, uh, within the plugin itself as well, to make this really easy to view and see the data, um, wherever you can, uh, or wherever it makes sense to see it.

Other things that it does is also on the dashboard has a nice little dashboard panel.

Let’s use, get an overview of conversions.

I know, you know, there’s some analytics platforms that are analytics plugins that’ll show you your traffic.

But for me, I’m more of a person, you know, on my sites from, uh, you know, conversionbridge.wp.com.

My sunshine photocart.com.

I want to, I care about money and what’s getting, what’s transactions are actually happening.

Um, not just number of visits.

Yeah.

So I like seeing the conversions.

Um, so whenever I log in, this is my, my real important data that I like to see is, um, how my, how my conversions are actually doing.

And then you can also get this down to, I only want to see purchases.

So this is just, you know, every, and every time you come back to the dashboard, it’ll remember and re and just show you, uh, you know, your last 30 and last seven days.

And then you can also see your recent conversions here real quick.

Um, which then takes you to that, uh, conversion journey for that purchase.

And then also really important, I think is a great, uh, data to have is your top converting landing pages.

So which pages are the first page that people hit in your site and ultimately lead to a conversion.

Um, you can even see that here in the pages.

Um, you’ll see very, you know, there’s a new column here in the, uh, whenever you’re viewing pages to see this one’s has one click conversion on the bricks thing, stuff like that.

Very cool.

Yeah.

So let’s actually, uh, I’m going to go to this bricks page.

Oops.

I need to do that.

Uh, sorry.

I got, let’s switch to the bricks theme, but cause I know a lot of your users are the bricks users that I had it active, but apparently it wasn’t.

So if we go to bricks and let’s edit with bricks, I just want to demonstrate how easy it is to add conversion tracking to certain elements.

Um, so here we have a page with a button, a text link in a form.

Um, if we click on the button.

Oh, I’m sorry.

This is why it’s not working.

So one thing that we have to do is we have to enable it for bricks.

So if we go to integrations, we just have to click the toggle and now we have it available for bricks.

Nice.

So if we go to bricks, we go to the button.

There’s just one little tab, new tab here, conversion tracking.

All it is is just a little toggle.

And now we’ve enabled conversion tracking on this button.

Again, you can customize the label, give it a optional value.

These are optional.

Don’t have to do it.

And if you’re doing Google ads, you’ll see that field there.

Same exact thing for the text link.

It’s just a toggle.

Customize it.

However you want Google ads.

And then just like the form plugins, same thing.

We just need to toggle.

So before when you were in just a few seconds, I’ve enabled conversion tracking and all these elements.

Yeah.

So before when you were showing like you can define a custom selector to do convert this, this is the kind of UI for that, right?

The alternative where you can just actually physically select things and then hit the toggle.

Correct.

Yeah.

And there’s integrations with, you know, with bricks, with Beaver Builder.

There’s some core blocks, button blocks, stuff like that.

Elementor as well is also supported for similar elements like buttons, text and form elements and stuff like that.

And all those different page builders.

Excellent.

And then can we see, you know, where, so this is essentially like you described, it’s a bridge for everybody.

Because somebody was like, how does this compare to user maven?

It’s not, this isn’t an analytics platform.

It is the bridge between your site and the analytics platform.

Right.

And so these are.

And that is a big misconception.

Yeah.

So these are ways we’re sending data back to the analytics packages, which let’s just, I’ll make sure I’m accurate in what I’m saying here.

Right.

You activated five different analytics systems.

You go into this button and say, I want to track this button.

It’s not that you had to set this up in every separate analytics package.

It’s you did it once.

And all of those analytics packages are now tracking that button.

Yep.

And I can show it real quick how we’ll see data in every single one.

So I’ll refresh this.

If I, you know, I’m a button I clicked on that.

It’s just a button that goes nowhere.

And if we go into Google analytics, let’s see if this refreshes.

So I have debug view going.

Google analytics can take a few moments.

Let me, let me go to plausible.

So here we have plausible.

We have our page views.

We’ll see bricks button label.

It’s already in there.

If I’m in user maven, I’ll hit refresh here.

We have our conversion goals.

Click brick button right there.

It’s already tracked in there.

And then this is one of my, uh, ones that I really like is persh.

And we’ll see.

There it is.

Uh, events bricks, uh, button label has been clicked.

If we go into Google analytics.

Click.

There it is.

So it’s registering right there.

There’s the click, uh, in Google analytics.

Yeah.

So the idea.

Yeah.

So I, one little toggle and I had it, and this is only four of the five that I, I enabled, but, um, it would show in fathom as well.

But yeah, so one toggle and it worked for all those analytics platforms.

Exactly.

So when I, when I described earlier, when we have agency clients, very typical where it’s like, look, uh, I understand you want Google analytics on here.

Uh, we don’t use Google analytics personally.

We use user maven.

Um, we are going to install user maven, but we will have Google analytics as a backup.

Every time we try to do some sort of conversion tracking, it’s like, all right, set it up in user maven now go set it up over here and this completely eliminates that.

And that, this is just one of the fee.

I mean, you saw everything else, uh, that makes this so easy to set up, to configure, to manage.

And then keep in mind, again, you’re all agencies.

You’re all freelancers, the centralized point of management for the technical setup of all of this stuff with conversion bridge on every single client site that you’re working on so that you and your team, you know exactly where the stuff is set up.

You know exactly where the tracking is configured and coming from.

And it’s just a case by case basis of which analytics packages you want to send this data back to from conversion bridge.

Absolutely.

You nailed it.

Cool.

All right.

Um, anything else to show us before we go?

We are, there are a bunch of questions rolling in, so we can get to questions if you want.

You can show more stuff if you want.

What do you want to do?

Um, I’m just going through my notes and I think we’ve pretty much, uh, nailed it.

I think, um, yeah, it might just be general talk about pros and cons of different analytics platforms and stuff like that.

If there’s any questions around that.

Okay.

Let me, uh, I’m going to add you back.

Let’s see how I, I don’t even know how to, how to add myself anymore.

Let’s see.

Main camera.

Let’s go.

Oh, that’s my screen.

Okay.

Um, oh, solo ad left.

There we go.

Okay.

We’re back to split screen.

Um, all right.

So the first one is Eric Allen, uh, who says, will you be adding North commerce?

People are very hyped on North lately.

Uh, you requested it.

So I’ll take a look.

All right.

That’s all.

I’ll reach out to them after this and see if I can get a copy of it and, uh, and take a look.

Cool.

Cool.

Anja says in Europe, we have to ask for tracking permission first.

Will that work with conversion bridge?

Or can we use one of those blocking tools to work with conversion bridge?

Yeah.

So that is when I pointed out that it works with those cookie pop-ups, um, like compliance, uh, and those other ones.

So yeah, it absolutely, if you have one of those plugins, it’ll integrate with those.

Sweet.

Uh, I believe we already showed this.

Um, but Andre said, how does it integrate with bricks?

So we saw that the, uh, there is a native UI inside of bricks, uh, that allows you to select those elements.

Andre, if you have any, uh, if you have anything else beside what you already saw, definitely let me know.

We’ll get back to that.

Uh, Ivan says, does it offload the scripts from the main thread to a web worker like Cloudflare, uh, Zaraa or PartyTown?

No, it doesn’t do anything overly fancy.

It’s using the native tracking scripts from each of the analytics platforms and how they need it to be done.

Cool.

Uh, okay.

James says, nice looking software, uh, is Matomo on the roadmap.

Also does the Woo integration negate the need for advanced e-commerce data layer plugins like GTM for WP.

Uh, Matomo is on the list.

Their, uh, their API was by far the most complicated compared to all the other platforms.

Um, so I am still in that, you know, the plugins less than a year old.

So I’m hoping to see some interest and traction before I then dive into a couple of weeks invested in just theirs.

Um, but yeah, it absolutely is.

And, uh, it does, and conversion bridge does send detailed data to Google.

Um, so it’s the line item, it’s the skew.

It’s, um, if they use a discount code, all that advanced data does get sent into, um, Google analytics.

If you are using like a WooCommerce integration.

Cool.

Uh, so David, I’m sure you get this question a lot.

Um, so is this similar to Google tag manager?

You know, what are the differences?

Uh, how would you describe it?

Yeah, it is.

Uh, I think it goes well beyond it because of it.

It’s a way to add the core Google analytics tracking script, whether you want to use, you know, the default one or Google tag manager, you have that choice and conversion bridge, but then it also adds the 50 plus conversion tracking integrations.

Um, so that’s, that’s huge.

Yeah.

Yeah.

Um, yeah, there’s a, there’s, there’s, it’s so yes, with GTM, you can install a bunch of tracking scripts for different analytics packages, but all of the conversion tracking beyond that it’s going to be a lot of manual setup.

All of the other stuff that you have integrated is going to be a bunch of manual setup.

You’re going to have to do it for each, uh, you know, package separately a lot of times.

So it’s just, um, a lot of ease of use added centralized area.

Plus, you know, we talk a lot about magic areas here, right?

I hate when I’m on a client site working and I’m trying to do conversion setup and I’m got to constantly bounce between some third party dashboard interface, like Google tag, man.

Okay.

Let me log in.

Let me get into my container.

Let me go over, you know, it’s, it’s, you’re already in the client’s project.

So having your, all of your analytics already there, having all the conversion setup already there, just tremendous benefit to that on top of everything else that it does.

Uh, and one, one thing, one thing about, I wanted to add, I didn’t touch is for me.

I w one important thing for me is getting accurate conversion tracking and not just like with Google tag manager, a lot of times it’s just, oh, they viewed this thank you page.

And that’s about as advanced you can get.

Well, what if you wanted to do an Ajax form or something like that?

I don’t want to redirect it.

Right.

Well, that’s what con and conversion bridge really takes that account.

It works on, for example, the gravity forms integration, they allow you to do an Ajax form submission or, or a thank you page or whatever.

And it works with any of those types of ways that you have the thank you page to show.

And it also does not track, you know, sometimes they’ll be like, oh, when the submit button is clicked, a submit button doesn’t mean that it was submitted.

There could have been errors.

There could have been all these things.

And then someone actually ended up bailing on the form because maybe they’re frustrated or something.

A successful submission means that it was a conversion.

And that’s one thing that you can’t quite get if you want really, truly accurate data of conversions on your site.

That, and that’s one reason why I, I’m not a, I don’t really like tag manager because it’s just something that’s on top that can’t really be truly accurate of what’s actually happening on your site and what’s going on because every plugin does it so differently.

Excellent point.

Uh, Christian, I believe is his name.

Um, I don’t know.

I like the second half of this question.

He wants to add two Metapixels.

Uh, does it support multiple properties?

At the moment?

No, it’s not something that, um, I’ve, I’ve ever run into and making sites.

So I didn’t even consider that, but I mean, it’s something I’ll add in the look into list.

So I always ask, you know, users when they, when they request this kind of stuff, it’s like, so Christian, like, uh, let us know what you’re trying to do.

What are you trying to accomplish?

Why are there two pixels?

You know, what, what is the scenario that we’re trying to solve for here?

And then we have better context.

Um, would it be accurate to describe this as a self-hosted CDP?

What’s a CDP?

I don’t know either.

Tell us what a CDP is.

All these, all these acronyms.

Uh, let’s see, uh, as an agency, you would use, for example, GA directly.

So you can check all clients.

Would I need to log in to the site to see the data?

Not exactly.

Yeah.

So this is separate instances.

I think maybe they’re saying as an agency, can I log into one spot and see all my clients?

Yeah.

Yeah.

Yeah.

Yeah.

Yeah.

I think that’s what this question is asking.

So it is, I mean, every client has their own separate Google analytics instance.

This is not a tool to see and instantly access everyone’s Google analytics data at once.

You still have to be like, Hey, can you add me to your Google analytics account and all that kind of stuff?

Yeah.

This is the bridge from the web of sending the data from the website to Google analytics.

Do you have the Google analytics dashboard view like you had with user Maven and all that stuff?

Does that.

Type in.

They don’t have one.

Um, I know there’s, you know, some other, and, and that’s, you know, that is one thing I’ve looked at doing is so that it can show the, show the charts and all that kind of stuff.

But that, that required building custom pulling data from the API and building custom, you know, JavaScript charts and basically recreating Google analytics and right.

You know, for version one, uh, no, it doesn’t at this time.

Cause you can just go to analytics.google.com.

If you want to see all that, the detailed data in a native way.

Uh, Justin says perf matters.

We can add the GA tracking code and then perf matters hosts it locally to improve page speed.

How does adding it through conversion bridge compared to that?

Um, you’re welcome to continue to set up the analytics tracking that way.

That’s why if, uh, when I first show it was showing how to set up each analytics platform, there’s that one option to exclude tracking script.

Um, so that you can just say, yeah, this is associated with this GA property.

Um, but I’ve used a different tool that I want for performance reasons to include the core tracking that way.

And then you still have all the benefits of the conversion tracking modules.

I think that’s a great, a great point.

So you’re not forced to install the tracking code through conversion bridge.

Mm-hmm .

The tracking code just has to be there and then conversion bridge can do all the rest of the stuff. the stuff.

Correct.

Cool.

Um, okay.

How is this different from independent analytics or user?

I think we, we answered that.

So it’s not an analytics package.

It is a, uh, a bridge between the site and the analytics system.

How many HTTP requests does the conversion bridge plugin make?

Does it make any requests to WP admin admin Ajax?

Uh, it loads.

If you, uh, enable the option to track, uh, conversion journeys, which is on by default, when you install the plugin, it will add its own JavaScript file, which is a very, very small, minimal file, um, which works just like the analytics platforms, JavaScript files, which then, uh, does send a, an Ajax request to track the page view and do anything else.

Sweet.

Um, does it affect page speed?

Have you done any page speed tests on?

Um, I have not done page speed tests.

I think, I mean, I could look at the file size real quick, but I think it’s probably like eight kilobytes for the JavaScript file that conversion bridge adds.

And then each of the analytics platforms are like nominal.

I mean, minuscule.

I can do, I guarantee you, I guarantee you’ve uploaded an image that was a little bit too large that weighed more than what these JavaScript packages are adding.

Yep.

And just for, um, you know, everybody’s, uh, feel goods and, you know, warms and fuzzies.

I can, I have it on the etch site, so we can, we could, we could easily do one.

Uh, okay.

What about termageddon consent management?

We have a termageddon integration.

Um, I can certainly.

I think they use compliance though.

I think they use compliance though.

I’m not entirely sure.

I’m not sure.

I have to look.

I didn’t.

I guess I wasn’t aware that they had a pop-up, like a cookie pop-up.

They do.

But I think it’s a third, they, I think they integrate a different, yeah, like a third, it’s not their own.

It’s not their own.

Um, but yeah, these guys, like when you, when you’re asking, does it do this analytics platform?

Does it do this plugin over here?

Um, he’s got a library of 50 plus integrations, right?

So, um, all you have to do is make the request.

If you’re a user, right?

Not from the outside, but if you buy conversion bridge and you’re a user, uh, I’m sure he’s more than willing to, to integrate those things on request.

Um, okay.

We talked about Google tag manager already.

Uh, fun is funnel kit on the list to be integrated anytime soon.

Um, um, I think when I looked into that one, they have their own conversion tracking that does a lot of stuff.

So it was basically duplicating an, an option, uh, something that they’ve already made.

And, and I’m not here to, you know, I’m trying to fill holes that don’t exist at the moment first and foremost.

So.

Yeah.

Okay.

Um, let’s see.

Where’d you help us?

Ah, okay.

Can conversion bridge help us at all with AB split testing?

Not yet.

Not yet.

I mean, no, I mean, not yet.

I don’t know.

A little teaser.

All right.

Yeah.

I like it.

There’s a big bullet point with that on there.

Okay.

Uh, multiple marketing agent requires me to set up two meta pixels.

Okay.

Yep.

That’s not a question, but a good statement.

Uh, is it server side or you just try to send directly from users browser to the analytics platform?

So yeah, so it’s not doing like PHP API connections.

It’s using all the analytics platforms, default JavaScript method for tracking events.

Is there a convert kit integration?

Not yet.

People are finding these ones out there.

Yes.

Yes.

Yes.

Um, I mean, convert kit basically has their own embed forms, um, their own HTML forms.

So I think I did look into that and it was just, I’m not sure.

I, I mean, I can look at it again.

Um, if they have an official plugin and, and I can understand.

Um, but that’s also one of those things where even if on those kinds of edge cases, you can then use the, um, the, the custom events, uh, to, to add that.

Cool.

To add that integration.

And it’s not that hard.

Marcus says, any thoughts on creating a SaaS for agencies that allows you to connect multiple site installs in one place?

How many more Derek’s do we need to make this happen?

What was it?

How many more, what?

Uh, how many more of you do we need to make that happen?

He wants, he wants a SaaS dashboard for all, to manage all of his clients from one, one centralized source.

Huh?

Yeah.

I don’t know.

That’s a great question.

Does sound like a, sounds like a moneymaker, Derek.

It’s all the process, right?

We’re going to, we’re, we’re going to get there.

Um, Alexander says, I came in late.

Do I need this when I have user Maven only?

Is this specifically a need when one has other tools?

Um, you know, I guess multiple tools that they’re trying to put together.

But, um, I, I mean, I would say I’ll, I’ll just answer it for it.

Like, to me, this is a stack, uh, decision that you’re making.

It’s, it’s, if you’re an agency or a freelancer, you’re trying to put your stack together.

It’s like WS form.

People are like, well, if I just need a super basic form, do I still just, you install WS form on every project you do.

That’s it.

You install conversion bridge on every project you do.

That’s it.

You don’t have to make like one-off decisions about you just do it.

You just put it in there and everything is always the same and processes are always the same.

And when you have team members, they always know every single site.

Here’s what we do.

Here’s how we do it.

It’s something like that.

Right.

Um, but of course I’ll let Derek answer.

No, that’s, that’s exactly it.

And that’s one of the benefits is when I was doing client sites is which plugin are they going to use?

I don’t know.

And then having to get all these extra add-ons research doesn’t do it.

No, I just know conversion bridge does it.

Yep.

Okay.

They don’t do it.

I, and if they don’t do it and I have conversion bridge, I can ask Derek to see if he can do an integration is that I don’t have to deal with it, or he can help me figure out how to get, how to do this one little thing.

And I don’t have to spend three, four, five hours trying to figure out how to add conversion tracking for this one element on my site.

And I can just ask Derek as part of support to either add the integration with that specific plugin or how to do it with a custom event on my site.

Yep.

Excellent.

All right.

That brings us to the end of the questions.

Um, Derek, man, this has been absolutely fantastic.

Do you want to bring the website back up and just, or I can do it here.

It doesn’t really matter.

Um, going back to it.

Yeah, I got it.

Let me see.

Okay.

Yeah.

I got it here.

Yeah.

You can, uh, hit up conversion bridge, WP.com.

And, uh, you can find all the different integrations, the various features that are on there.

There’s a little video that walks through what I’ve done before, uh, or how to set it up and what we walked through here today.

Um, but we pretty much covered everything.

Let’s go to the, check out the pricing real quick.

Let’s talk about that.

Let’s take a look at the pricing.

Right now there is a 40% off the first year.

So you can jump on that right now.

Um, and again, this is, you know, agencies really want to use this.

So, um, there’s just one premium plugin and then it’s just based on number of sites that you might want and you can always upgrade to more sites.

Uh, the more you put it on as you need over time.

Excellent.

All right.

Well, Derek, thank you so much for coming on.

This has been fantastic.

Um, I, I, I’m pretty sure my audience understands the value of something like this.

I encourage them to go over and, uh, and get themselves at least a starter license and then start playing with it.

Uh, they’re going to see the value tremendously once they start doing that for sure.

And the biggest thing here, again, guys, remember is, um, with a plugin like this, it’s going to get more and more and more powerful as you guys make the request.

Same thing that’s happened with automatic CSS.

Same thing that’s happened with frame.

Same thing that will happen with etch, right?

So don’t look at the integrations list and go, oh, this one thing’s missing.

It’s still early stage.

And he wants to know from you what you want to, what you want prioritized, right?

If you want an integration, that’s not there.

It’s as simple as, Hey, I’m a customer, Derek.

Can I have this thing?

He’s more than willing to do it.

Okay.

So, um, let’s, let’s get started with this.

Uh, Derek, thank you so much.

Thank you so much, Kevin.

I really appreciate it.

Absolutely.

Absolutely.

And we’ll talk again very soon.

Thanks, Kevin.

Have a great day.

Bye-bye.

All right, guys, stick around.

Uh, we are going to go into segment number two.

I’m going to do a walkthrough.

Uh, well, I’m going to let you guys decide right here.

Let me go ahead and get my chat back up.

Uh, let’s go to interview.

Okay.

I can shut this part of us down here.

We can turn that off.

Okay.

Should still be streaming just fine.

Let me, let me find my chat window again, comments and reactions.

There we are.

We’re back.

Uh, is audio still good?

Video still good?

Let me know.

We’re still, we’re still going strong here.

Um, uh, let’s, let’s vote.

Okay.

We can do, we can do the, and I’ll, I’ll tell you what the, uh, critique site is.

Okay.

Um, it is called Noor.

It’s, it’s like a, it’s like a Belize, a villas thing, like a, you know, renting villas, vacationing kind of site.

Okay.

We can look at that.

We can do the critique of that, or we can go WP town hall, uh, website walkthrough.

And, and, you know, the people had some questions about how did you do this?

How did you do that?

There’s the new textures and overlays feature being used.

There’s some, you know, I tried to do things on that site that I don’t typically do.

It’s a box layout, for example.

I hardly ever do box layouts, but I did a box layout for WP Town Hall.

So we can do the walkthrough of WP Town Hall, or we can do the critique of the website.

Everybody’s saying good.

Audio’s good.

Audio’s good.

Video’s good.

Okay.

So Town Hall, Town Hall, Town Hall, Town Hall, critique, Town Hall, Town Hall, Town Hall, site critique, Town Hall, critique, walkthrough WP Town Hall.

Okay.

Looks like Town Hall is winning.

We are going to do both.

It’s okay.

We’re not going to, it’s just, we’re prioritizing which one gets done first.

All right.

So let’s just go ahead and dive into the WP Town Hall.

Let me pull it up and then we’ll get to screen sharing here.

There we go.

Okay.

Fantastic.

All right.

So if you haven’t seen the WP Town Hall site, this is the WPTownHall.show website.

There’s, there is a lot of interesting little things that we can talk about here.

Right.

So first thing, box layout.

Second thing is, and I think a lot of automatic CSS, and really, even if you’re not an automatic CSS user, you need to pay attention to some of these things.

And you’re going to understand the logic of why automatic CSS kind of works the way that it does and why it does the things that it does.

Right.

So off the bat, first major thing we have to talk about is the box layout.

And like I said, I don’t do many box layouts.

But if I go to automatic CSS and I’m going to go to layout and I’m going to go to box layout, you’re going to see exactly how this was achieved.

So if you’re wanting to do something like this, it’s very, very, very easy to achieve in automatic CSS.

You simply toggle the box layout.

You can set the device background, which is the area on this side over here and this side over here.

That’s the device background.

Right.

That’s not part of your website anymore.

I mean, kind of, I guess it technically is, but it’s not like the, where the action is happening.

Right.

Then you have your body width, which you can set.

So I’ve set a body width, which that is the width from here to there on that side.

And then you have a top margin that is optional.

I did not set one.

I just have my, it’s just going to the top of the screen.

And then if you look here, this is very interesting.

Border width is zero, one, zero, one.

Right.

So top is zero.

Right is one.

Bottom is zero.

Left is one.

You’re able to put compound values in here.

And a lot of people, like, I think the default is just zero or whatever.

And so they think it only accepts one value.

They’re like, how do I do just the left and the right?

It’s, you have to remember these things except compound values.

And then your border color.

So I’ve set a border color, which is primary dark, and then a border radius of zero.

And then I’m able to set a body shadow, which is the glow that you kind of see.

It’s like a soft glow coming off there, which uses the primary color at 30% opacity.

And we just, you have your custom box shadow.

So you can even do layered box shadows here if you want to.

So that’s how the box layout is easily achieved.

And again, a lot of people ask questions without the hashtags.

Make sure you guys have the hashtags going with your questions.

All right.

So next thing we’re going to take a look at, we have these nice little fancy, what I call split buttons, right?

And these are just a, this is literally a frames element right here.

This is a frames hero section.

This is, see, this is the thing about frames, again, that I’ll reiterate.

You can’t tell if people do the work of like, you know, actually styling them and customizing them and put some, a little bit of creativity into it.

You can’t tell that a site is done with frames or not done with frames or anything like that.

Right.

You wouldn’t say by looking, taking a glance at this.

Oh, that’s a frame site.

Like you just, you just can’t tell.

You just can’t tell.

Next thing I want to look at is the patterns behind here.

So there’s a subtle pattern in the hero section here.

It’s a subtle pattern in this section right here, patterns and borders.

And then of course, dividers come into play here as well, but I’m not using any dividers on this site.

When, when you’re designing websites, you should think about these as global elements and global styles.

And like, you want consistency in these things.

When you call for a border, the border should look like the other borders that you’ve already used.

When you call for a pattern and it’s a pattern you’re going to use on multiple different pages, it should always be the same.

And so how are you mapping these things?

Well, automatic CSS does all of this mapping for you, right?

So for example, we’re going to go to borders and dividers, borders.

You set two options, a light option and a dark option.

And then one of those options can be the primary option for your website.

So you just are essentially as you’re building going, I need my dark border.

I need my light border.

And then if you don’t even know which one the primary is, you can just say, I want my border.

Like you literally say, I just want a border here.

I want a border here.

I want a border on the top.

I want a border on the bottom.

I want a border on the left.

I want a border on the right.

I want a border all around.

I want a border block.

I want a border inline.

There’s every option available to you.

And you don’t even know if it’s supposed to be light or dark or what color it is.

It doesn’t matter.

It’s the website’s global border style.

And there’s one for light and there’s one for dark.

And this makes it very easy when you’re picking up from project to project to project to project.

Because I go to a project maybe that I worked on four months ago.

I don’t remember, are we using border dark?

Are we using border light?

Are we using, what color are we using for borders?

How do we get that border?

I don’t need to know.

I don’t need to look it up.

I don’t need to care.

When I’m making a new element that I know needs a border, I just ask for the border, right?

And so, and I get the border.

And so that’s what this does.

It establishes like a global border style.

And then the same thing now with textures, right?

So if I go to backgrounds and text, textures and overlays, I have five custom textures that I can use as backgrounds or I can use as overlays.

And I’m able to define the assets and an overlay for the asset.

I can control the size, the position, the repeating.

It has auto color relationships available with it.

And so as you’re seeing here, if I go to edit with bricks, we’ll take a look at what’s going on here.

All right.

So we’re going to grab this.

This is using overlay one.

So if I want texture one in the over, in an overlay, right?

I can even, I can have it as a background or I can have it as an overlay.

In this case, I want it as the overlay.

So I’m asking for overlay one here on this section.

I’m asking for texture two.

Texture two is where you’re using it as a background.

So here I’m using a background.

Here I’m using an overlay.

And anytime I want either this one or this one to show up, I just pop that class in and it shows up yet again.

And I just quickly go through my site with these things globally defined, which also means I can easily make global adjustments to them.

If I wanted to lighten these white dots or darken these white dots or whatever, it’s going to do that everywhere.

But you can also override any texture on a per instance basis.

Any part of the texture, the overlay for the texture, the position of the texture, the size of the texture.

You can do those one off using the locally scope variables because all of these are just applied with variables that can be overwritten at the page level, the template level, the section level, the box level.

It doesn’t matter.

Full flexibility.

So these are just came out of experimental or I should say are coming out of experimental this week.

But very, very powerful stuff.

Adds a lot of creativity options for your website.

Makes it very easy to set everything up.

We’ll take a look here at how the borders are applied as well.

So if I come down here, let’s go.

Oh, that’s a template.

Okay.

Oh, we should talk about this, right?

So this is a global template.

This is our next show component, let’s say, right?

So I’m going to go to edit template and see what we get here.

All right.

And I don’t like the template editing experience in Bricks because now I’m looking at a component with my header and footer, like oddly there.

I don’t want to see the header and the footer while I’m editing a single component.

That’s not great, right?

Let’s go into CSS.

So look how I was like, I want on the block axis.

So I want to add a border to the block axis.

And because this, I’m not using utility classes here.

I have utility classes available for the borders, but I’m using BIM.

So I can do it either way.

I can use utility classes.

I can use a variable.

And notice it’s not border light, border dark, or border primary, or border this, or I don’t care what it is.

It’s, there’s a, there’s a defined border style for the website.

And I can call it by just saying, I want my border.

I don’t need to know any details about the border.

I just know I want my border.

And so you can call it with var border.

Very, very simple.

But let’s take a look at what we’ve got going on here.

So we’ve got some dynamic data.

We’re manipulating the date output and the time output.

We’ll take a look at where this is coming from in just a second.

We have dynamic data for the show title.

Because you’re going to notice this is not a loop.

I’m not looping through anything.

There’s no CPT for shows.

And I’m looping through the shows.

And I’m pulling dynamic data from the loop or anything like that.

So where is this coming from exactly?

If we go to site info and we go to next show, we’re using options pages.

Options pages.

I’m using options pages for the subscription links for all the places you can subscribe.

This allows me to reference the subscription links in the split buttons, for example.

But I also do have a CPT for directories.

So I put in all of my directories.

And then if we look here, we just have a directory URL.

We have an icon for the directory.

And what this is going to allow us to do is to easily populate that listen page.

So if you go to listen, you’re going to get the player for the last episode.

But if you scroll down, you’re going to see all of our directories here.

This is all dynamically generated.

So if I want to add more directories, I want to remove a directory.

I want to change the link for a directory.

That can all be done from a centralized place.

And I never really have to manage this page.

This page kind of manages itself.

With these split buttons, I wanted to show one thing because some people are…

So by default, what that menu does is it centers itself on the button.

But I didn’t want it centered on the button.

Notice that it top aligns to the left edge of this button.

But notice that down here, it aligns with the bottom right edge of this button.

Okay?

So let’s take a quick look-see at this.

So I’m going to go in here.

Again, this is a frame.

If you want a split button effect like this, you simply add the frame.

Now, I wanted a lot of them.

So I took the JavaScript snippet that came with it.

You don’t want that JavaScript snippet to be like four or five of them on the same page.

I just went and put it in my footer template.

So it loads on all the pages that are going to have them anyway.

And then it works for all of them.

It works for all of them.

Right?

But it’s going to position on the class.

And I don’t know if it’s on button delta or where exactly it is.

There’s a bunch of different classes here.

Okay.

So it’s going to define it at the class.

All you have to do is take what it’s defining at the class level for its position.

And then you redefine it at the ID level for that button.

Because IDs, as you should know, always override the class styles.

So you just steal the position properties from the class and go slap them on the ID for that particular button based on where that button is located.

Right?

So this button is located in the hero right here.

I wanted to align it to the top left.

So that’s what I did at the ID level for that button.

But if you went down into our footer down here, you would see at the ID for that button, I redefined where it’s positioned.

So a lot of people get confused on like, it’s not positioned in the right place for what I need.

And if I do the class, it’s changing all of them.

You got to remember the playing between IDs and classes.

That if you want to do something globally, change it at the class.

But if you want to do something on this one off instance, all you have to do is to find the same properties with new values at the ID level.

And it’s going to take effect for that one instance of the element.

All right, let’s go back in.

So we looked at the options pages.

If you don’t know how to do those options pages, by the way, let’s just do that real quick.

ACF field groups.

And then you’re going to see next show.

And if you go in here, you’re going to see that this is an options page and you can go to options.

So I’m assigning the fields to the options page and you create the options page in this little magic area called options pages.

Very, very easy to do.

Very easy to set these things up.

And you could set it up for, I mean, I think you should set it up for almost every site you do.

For example, like you’re doing a small business client.

They’re going to have an address, right?

They’re probably going to have a phone number.

They’re going to have their social media profile links.

All those things are really, really, really good to put in options pages.

Because then whenever you need to reference them on the website, like, oh, here I am in the header.

I got to reference the phone number.

Oh, here I am in the footer.

I got to reference the address.

Oh, here I am on the contact page.

I need to reference the phone number and the address and their social media accounts.

One, you don’t have to constantly keep looking up the data.

That’s like, if you’re in chump mode, that’s chump mode.

You’re like, oh, I got to go back and look up their data.

Why are you looking up the data?

Again, like the data should already be in an options page and you can just reference the data using dynamic data tags that you don’t even have to, you know, really look for wherever you need them.

And then the benefit of that obviously is if the phone number ever changes or the address ever changes or the social media links ever change, you just go to the options page, you change it and anywhere it’s used, you don’t even need to know where it’s been used, anywhere it’s used automatically updates for you.

Really, really good for scalability and maintainability.

Okay.

Let’s see.

What else do we want to talk about?

Is there anything else interesting?

Yeah.

Of course you can ask questions about this and then we will move on.

Oh, we have automatic link for external links.

That’s a new feature and automatic CSS buttons, links, links, external links right here.

I can indicate external links.

So you see what these little arrows automatically added to any external links on the site that open in a new tab.

So if it’s set to open in a new tab, that is going to be your indicator on those.

So we got that new feature rolling in.

I think that’s pretty much all we need to talk about.

The players, this is a frames element just out of the box.

The players all come from, what is my service called that I use?

Buzzsprout.

These are just Buzzsprout embedded players.

So I’m really liking Buzzsprout.

Makes it super easy to manage your feed, manage your directories, put some nice looking players on the site.

It made it easy for me to customize the action color of the player or whatever you want to call it.

So that is all good.

Let’s see.

How old is this?

I made this very quickly a couple days ago.

Yeah.

So it’s, you know, very, very new.

Is that Kevin Geary without a hat?

That is Kevin Geary without a hat.

That is Kevin Geary without a hat.

All right.

Let’s go look at questions here.

And then we’re going to move on to our critique for today.

I just wanted to get everybody, you know, people like to see behind the scenes of, uh, how, how these websites are built.

Oh, the other thing I did do on this website is I made all these accent headings, the real headings, uh, which is a little bit opposite of what I’ve done on many other sites.

Um, but I wanted this to be, I wanted these to be, oh, look at this one.

Is this it?

No, it’s okay.

It’s in a, it’s in a group.

Um, but that’s the actual H2, which leaves this one as a paragraph, right?

Okay.

All right.

Here are our questions.

Let me get back to get through all the conversion bridge questions.

Uh, CD.

Oh, uh, James was answering this from earlier.

CDP equals customer data platform.

Um, a central repo of all your tracking data.

Okay.

All right.

Question idea.

We need to conditionally hide the next show section when the next show is post and next is not scheduled.

That is a good idea.

A good idea.

Uh, what kind of email do you recommend people use for hosting web management?

Should we use our hosting email as the hosting login to, or is that an all eggs in one basket fail?

I’m not sure.

Um, like recommend people use for hosting web management.

What kind of email do you recommend people use for hosting slash web?

Do you mean like your login email to people’s accounts?

Do you mean what email do you use for sending server emails?

I’m not quite sure.

I’m not quite sure exactly what you’re asking.

So if you can clear that up, it’s a lot of possibilities there.

Why does every audio player not have a volume control?

Uh, great question, Brendan.

Um, you’re right.

You’re right.

I, I, I, I guess they are imagining that you’re going to use your device to control the audio.

I don’t know.

Will you bring Calvin Aiken to, uh, WDD when he launches his command UI for WP?

Yeah, yeah, sure.

If he wants to, I gotta, I gotta use it and test it and stuff like that.

Uh, there’s going to be a very similar thing just to give a heads up a, uh, it’s, it’s already something we’ve been thinking about for a while.

Um, etch is going to have a command line, right?

And it’s going to, these, these command K kind of things.

Basecamp has had one for a very long time that I love.

Uh, Gutenberg actually got one not too long ago.

Um, but these like action bars or command bars, these slash command bars, of course, notion, you know, popularized this.

I think, uh, they were probably the first like one to, to really implement something like that.

Uh, yeah.

For like, you know, they, they took off, I guess, let’s say.

Um, so we’re going to have something exactly like that in etch.

For example, if you want to create new, but the, the difference is, it’s going to use etch’s native features and functionality to do a lot of that stuff.

Uh, but anything that etch doesn’t actually do like user management or whatever, you would be able to do that in etch as well.

But, uh, there’s room for multiple of these.

And if you’re an etch user, you’re probably going to use the native etch one.

But if you’re not an etch user, then you would use something like command WP.

I think that’s what it’s called.

Um, but yeah, it’s fantastic.

And, uh, we’re happy to have him on.

Uh, seems like you use the secondary headings often.

The small leading heading above the main heading.

Is there SEO benefits?

Yeah.

Uh, there is SEO benefits.

Uh, you probably need to clarify that statement, I guess.

So the benefit is often when you’re writing a, um, marketing heading like this.

Okay.

Now I use, this is actually the H1.

Um, but there are very often times where you need to write something in marketing language that is not SEO language.

Like marketing language and SEO language don’t always go together.

Sometimes they do, but they don’t always go together.

And so if you’re going to, and the marketing heading needs to be the big heading, it needs to be the thing that gets people’s attention, right?

Uh, the obvious heading on the page.

So if you’re in a situation where your big, obvious standout heading isn’t getting it done for SEO because you had to write it in a way that is more geared toward marketing than SEO, then you add the little accent heading and the little accent heading, you sneak it in as that’s the real heading.

Okay.

Because in SEO land, SEO cares more about the tag.

So if you put keywords in an H1 versus key one, uh, keywords in a paragraph, it’s going to prioritize the H1, right?

So you can’t waste a heading on marketing language if you care about SEO.

So this becomes your SEO where you can put a literal heading.

Like your, these are my keywords that I want to rank for.

And then you have your big bold heading is just a paragraph now, and you’re free to write whatever you want there.

But to everybody who is visually looking at it, it looks like the heading, right?

Uh, so that’s, that’s really the benefit of doing it that way.

And then same thing here, you know, we’re talking about like landmarks, like this is a section.

What’s the heading for the section.

This is the stream, the show section.

This is the next show section.

This is the meet the hosts section.

It’s very easy using these little accent headings.

If you put the actual heading tag on them to like give every one of these landmarks, a clear, distinct heading of like, this is what’s going on in this section.

Whereas this heading right here, you might deduce it that this is like the meet the host, but it’s not very literal, right?

It says hosted by Kevin Geary and Mark Zemansky.

Uh, but this is very literal that says, Hey, this is the section where we’re meeting the hosts.

All right.

So I think it adds a lot of clarity to your heading hierarchy.

Um, yeah.

So that’s the explanation on that.

All right, good.

Let’s do, uh, let’s do a critique.

Let’s do a critique.

I think we’re done with this.

Let me get out of, uh, the questions area here and we will bring up.

Yeah.

Roberto, you are late to the party.

My friend, you should be, should be on time.

You should be here with all of us from the beginning.

Hmm.

Okay.

Drop a like on the stream.

If you haven’t dropped a like on the stream by now, we’ve gone through conversion bridge.

We’ve had a special guest.

We’ve done a walkthrough of WP town hall.

That show.

What more do you people want?

Drop a like on the stream.

All right.

Let’s get over to this site right here.

This site was submitted in the automatic CSS community for feedback.

Uh, but I pulled it up and immediately I was like, man, you know, this, I’m really liking the vibes here.

I’m liking the vibes on this site.

There’s some creative things that have been done.

I want to just walk through it with you.

Uh, the one thing I didn’t do is I did not read the copy.

I just looked at the general UI, the design and all of that.

Right.

Uh, I haven’t really looked at UX actually.

Uh, I’ve just looked at like, is it, is it pretty?

It’s like, is it pretty?

Uh, and it was pretty.

I’ll just go through it real quick and then we’ll kind of go and talk about some of the, some of the details.

And once again, I think you have to ask yourself the question, is this an obvious automatic CSS frames website?

I don’t think a lot of people would say, oh yeah, that’s a, that was built a frames, right?

You, you wouldn’t really know.

A lot of it is built with frames.

Uh, but we’re going to talk about the workflow here because it’s kind of a mix and match.

Kind of deal.

Um, all right, let’s, yeah, let’s just go ahead and get into it.

So the first thing is we always do, we, it’s been a while since we’ve done a critique.

So we need to go over this.

We always do a no scroll test.

And when we do these critiques, we’re looking at everything that makes a website successful, not just how it looks like the, yes, there’s a box of, is it pretty?

Is it not pretty?

Right.

That is not the only box.

We are checking every box, right?

We’ll go into SEO.

We’ll go into copywriting.

We’ll go into the UX.

We’ll go into the offer.

We’ll go, we’ll do everything.

Everything that makes the site successful.

That’s what we’ll take a look at.

Starts with a no scroll test.

If you arrive and you don’t scroll around, can you figure out what is going on in the website?

So this says, come to recreate the pure you from a nor, newer, newer, I don’t know.

I don’t know how to pronounce this.

Newer villas.

Okay.

So I’m going to go into critical mode, even though I like this website.

I’m going to go into critical mode because the person who built this wants the value of the feedback.

They want to know what can be improved.

I’ll tell you right off the bat, what can be improved is it fails the no scroll test.

I don’t know where the hell this is.

I don’t know.

I get it.

It’s villas, right?

I see a phone number that appears to be a phone number.

What is this?

A latitude?

What is it?

I don’t, oh, is this, I don’t even know what that is.

I don’t know.

Is that longitude and latitude?

I don’t know what that is.

I am confused right off the bat.

So while it’s pretty, okay, the photography is good.

The place, the villa is gorgeous.

I want to go there right now.

I wish I knew where it was, right?

We got to give people pertinent information right off the bat.

So that would be the number one thing for you to improve on in this area is give some context clues.

What are we looking at?

Where is this thing located?

Okay.

And then that’s also going to help you with SEO if you’re trying to rank here.

All right.

So yes, I get it that we can look at the URL and, oh, it’s Belize, right?

You can’t, you have, in marketing, you have to make things obvious.

And then you have to, if you want to rank for villas in Belize or whatever, the text has to be on the page.

It can’t, you can’t just rely on the URL.

The text has to be on the page in a heading, right?

Let’s take a look at this.

Let’s look at the DOM.

So we do have an H1 here, nor villas, but that’s not what you’re trying to rank for, right?

That’s not what you’re not.

The only people that are going to find nor villas are people who know that that’s what it’s called.

They already know about you, right?

You want to find new people who don’t know about you yet.

So this should be like luxury villas in Belize or, you know, you got to do the SEO investigation and find out what the keywords you want to rank for are.

But you’re missing an opportunity to put those in right here, right off the bat.

Okay.

So let’s keep going down.

Love this section.

Love this section.

It’s not a traditional layout.

This is not a frames layout right here.

This is a, you know, they mixed and matched.

And this is what I’ve always said about frames is like you, when you decide to use frames on a website, you are not locked in.

Oh, I got it.

Every, every section’s got to be a frame.

I stop it.

Stop it.

Like get out of that mode.

Get out of that mode.

Use your, like your creativity is not limited in any way, shape, form whatsoever.

If you’re like, dude, I want to do a layout that is not a frame.

Then do the layout.

Right.

And people are like, well, now I’m doing custom work and I’m not using frames.

You’re using frames for 80% of the thing.

It doesn’t matter if you do a one section custom.

Okay.

You’re not doing all of them custom.

You’re not doing them all from scratch.

Look at the tremendous time saved in all these other areas.

Okay.

There’s no black and white.

It’s either frames or no frames.

Okay.

You do whatever needs to be done on the project that you’re working on.

So this is an example of a custom section that was built.

It’s got a really good layout.

I’m a big fan of the big text.

Just, you know, like big text, big text here.

I’m, I, I like this.

I, I’m a big fan of big text.

Um, okay.

So good imagery kind of gives you the vibe right off the bat.

I want to meet this toucan.

I want to, I, you know, this is, this is, it makes me want to go there.

And that’s what this kind of section is supposed to do.

Let’s read it.

Norvillas is a reverent, uh, nod to discuss your, all right, hold on.

Let’s just time out.

Pause.

Okay.

One other thing you got to remember with your marketing, right?

Is you, you do want to talk at like a fifth grade level, right?

You get people with, you got them tripping over big, fancy words right off.

It’s hard to digest the actual copy.

And it’s not really how you would talk about this trip to a friend, right?

Imagine you went to this villa and you get back and you had the most amazing time.

And now you’re going to tell your friend about it.

You’re not going to be like, friend, nor villas.

It’s such a reverent nod to discovery, right?

It’s, it just, that’s not how you, it’s better to do marketing.

Just how you talk to people, honestly.

Right?

So if you’re writing copy, just try to keep this in mind.

It doesn’t have to be some over the top embellishment.

Let’s find the biggest words.

Just simple.

Just give them, give them how you, how would you describe this thing to a friend, right?

Embracing life at the intersections of extraordinary.

Uh, it’s, it’s a little much as the kids say, you doing too much.

You doing too much.

Okay.

We could tone this section down.

Uh, but I like the call to action, how we can get right into exploring villas here, which is good.

Uh, so let’s go down and then that’s obviously it’s the next section as well, which is great.

Even if they don’t click on the button, I’m sure this goes to a, oh, okay.

It just brings them down there.

Oh no, no, no, no.

This is, you’re just using the same layout.

I get it.

Okay.

It’s efficiency purposes.

Um, so this is fine.

All right.

So explore our villas.

Ooh, I like this.

Perfect choices do exist.

That’s a fucking, that’s a phenomenal little subheading there.

I really liked that.

Okay.

A contemporaries and now, but now we’re back.

Now we’re back to the, um, the sophistry, right?

It’s like a contemporary enclave amidst the wilderness, uh, drawing inspiration from the untamed beauty of the Belizean jungle.

Our villains artfully fuse the thrill of the wild with the sophisticated comforts of modern living.

Um, it’s, it’s, this is, this is fine.

I think, uh, I, I don’t know.

I like if, if I was having Claude help me write copy, for example, I would tell Claude, I never use the word enclave again.

Okay.

I like, I would find these, some of these keywords.

I’d be like, don’t ever say that again.

Okay.

Let’s, let’s avoid those words.

Um, but I, I like some of this.

It just needs to be, uh, toned down a little bit.

All right.

Stay or invest Villa Onyx, I’m sorry.

Villa Onyx, uh, from 250 a night, casual elegance with a light and airy atmosphere.

I’m a little confused, uh, by this stay or invest.

Okay.

So remember I didn’t have any context.

I, I just assume we’re, we’re traveling there for like a week or something and we’re going to rent a Villa.

Uh, stay or invest.

I don’t know.

You’re short circuiting my brain.

I don’t know what these options mean.

Um, I’m just trying to rent a Villa.

I don’t know.

You’re, you’re presenting me with two things and stay.

I mean, I want to stay for a week.

I don’t know.

Or invest.

And it’s like, I’m not buying it.

Okay.

Um, I’m not sure what these things mean.

I would get rid of this immediately.

I think you’re, you’re just causing confusion right off the bat.

Uh, okay.

We’ll, we’ll look at one of the Villas in just a second.

Now look at this section right here.

Okay.

This is kind of like a divider kind of section, right?

Uh, nor offers seclusion and privacy here, easing into tranquility and lightness of being comes naturally.

Okay.

So this is kind of a, this is a, uh, uh, uh, we’re in a vibes election.

I’ve heard we’re in a vibes election.

This is like a, a, this is a vibes.

Uh, it really doesn’t offer any, uh, valuable information, right?

It’s just offering vibes.

Um, and it’s got a nice little background pattern.

And what I will say is this is a perfect use.

I don’t think they used it here because it probably wasn’t available when they were doing this.

Uh, but this is a perfect use case for the new textures and overlays feature of automatic CSS.

You would program this in as a texture.

Uh, they did it up here.

Also, it’s very light right here.

It’s kind of of a typography.

No, not a typography.

A, uh, what’s the other word?

The landscape version of that.

Uh, my brain is short circuiting.

It’s all the big words.

Uh, this would be a texture too kind of thing right here.

So you could have this texture programmed in, you could have this texture programmed in, and then you could just easily use them a bunch of these different places.

Um, okay.

So about nor, uh, meaning light radiance.

Okay.

All right.

Gotcha.

Uh, at nor villas.

Hmm.

Ah, you’re starting to, you’re just talking about yourself right off the bat, right?

Uh, if you, if you’ve watched WDD lives in the past, you know that when you write an about section, you’re really not talking about yourself.

You’re talking about what the person, the visitor, the customer cares about, um, you and what you built and the experience you provide and all of that stuff.

But you want to use like you language, right?

Um, or you could talk about people in like third person or whatever, like them or people who visit or whatever, but it’s don’t go me, me, me, me, me, us, us, us, us, us, us, us, us.

Don’t me, me, me them to death with your copy, which is this, this is, this is us.

Like we believe, we believe this, right?

Um, and you could just state these things as fact, right?

Like imagine this, imagine you just, I’m just kind of, I’m going to give you a practical editing example, right?

Imagine you just delete this part right here, or, or maybe I could just delete it for you.

Let’s just go in here.

I’m going to open this up.

Um, okay.

Okay.

All right.

So, and one thing my teacher taught me in the, one of the only things I learned in public school, because you don’t learn much in public school.

Okay.

Uh, but one of the things I do remember is when you’re writing a opinion piece, you’re writing a paper or whatever, and you’re the author and everybody knows this, you don’t have to go.

I am of the opinion.

It’s my opinion that it’s that we know you’re fucking writing it, dude.

Okay.

You’re writing it.

So we know that’s your opinion, right?

So you don’t have to say at Noor, this is our, this is what we believe, right?

Just literally say it.

Just, just say it.

True happiness comes from being rooted in it.

Just say it.

Just be very direct.

Just, and it hits harder when you, when you do that, it hits harder.

The visitor, the reader, they get to decide whether they agree with it or not, but you don’t have to, you know, it’s, it’s our opinion at Noor that, that, that, that, just that’s so indirect, right?

Just say it direct.

This is the fact.

True happiness comes from being rooted in nature.

And then when they go, you’re right, you’re fucking right about that.

Yeah, it does.

It does come from being rooted.

See, now they’re on the same page with you, right?

You don’t want to isolate yourself from them being like, well, you know, what we think, you know, other people may not agree with this, but, but what we think it, see now it’s up for debate.

You don’t want this stuff to be up for debate.

It’s sales copy.

It’s not up for debate.

We’re just going to tell you what it is, right?

So just, just tell them true happiness comes from being, it’s not up for debate.

See how that’s a stronger entry into this copy?

Very simple edit.

Just, just chop off the shit you don’t need right there at the beginning and get right to the point.

Okay.

So do a little bit of that here.

Get rid of the me, me, me, us, us, us type copy.

Just tell them what you want to tell them.

But once again, we, we, we have some decent imagery here.

I don’t know who this guy is.

I don’t know if I want this guy in my villa with me.

Maybe, maybe we choose a different picture here.

I don’t, I don’t know.

I don’t know who that is.

I don’t know if they’re staying with me or next to me or whatever.

Maybe that’s not the best photo for this, but I like the, I like the other ones.

All right.

I really like these cards.

These are fantastic.

Let’s go ahead and inspect these.

Okay.

This is, we don’t know if this was a, I don’t, I honestly don’t, I, I, I think that’s a frames card.

I honestly don’t know though.

Um, they customize the class name.

So there’s no telling at this point.

I think it is, but I don’t know.

I don’t know for sure.

I can’t be, that’s the thing.

I mean, when people customize shit, it’s like, was it?

I don’t know.

Um, that’s, what’s great.

That’s, what’s great.

It truly looks, you know, custom.

Okay.

Um, experiences that stir your soul, discover Belize.

Okay.

I really like this because this shows you, this is going to be one of the questions, you know, when I go there, what is there going to be to do?

Am I going to sit on my ass or no, I’m not going to sit on my ass.

Look at all this exciting stuff that I can do.

And we got sliders going on here.

And this is very interactive.

I can drag it.

This is great.

Uh, you even gave a little, Hey, click to zoom kind of a thing, which that, okay.

That is working.

This is great.

This is fantastic.

Authentic imagery.

It doesn’t look like stock photos.

It looks like this is some real shit.

This is good.

All right.

This is a plus on this kind of stuff.

You got a video to go with it.

You got some read more text, some quick facts.

Oh, look at this.

Absolutely fantastic execution here.

Okay.

I like it.

I like it.

Let’s go back.

So that was, uh, some of the things that we can do.

Okay.

We got a blog.

We got a blog.

This is going to be great for SEO.

Top 10 things to do and believes a local’s guide to adventure and relaxation.

This is fantastic.

I will tell you that, you know, there’s a lot of travel bloggers.

They’re just absolutely is a little bit of work to do here to finish up.

Um, absolutely crushing it with like vlogs, like travel vlogs.

Right.

And that would be something to, even if you don’t produce them yourself, um, you know, find a travel vlog that you want to promote and drop their video in here, partner with somebody, a travel vlogger.

Right.

Um, get there.

Cause video content photos are good.

It’s like, oh, okay.

Yeah.

That’s, that’s cute there.

I don’t know.

That’s probably a stock photo or like not a stock photo, but like an unsplash kind of thing.

You know, I don’t know that that was, it wasn’t taken for this site.

Um, but yeah, what I was getting at is like a photo is good.

All right.

It’s good.

But a fucking video, a travel vlog video, man, it makes you really, really, really want to go there.

Uh, and it really shows you the emotions, uh, that are within the trip and that the people are having and, um, video would be really, really, really powerful in these blog posts.

Um, okay.

Let’s, we’re going to look at the signup flow in just a minute.

This is definitely a frames footer.

A hundred percent.

Um, okay.

All right.

All good.

All good.

So far.

Let’s look at, uh, just some of the copy stuff, but like the overall flow, all of this stuff.

Really good.

So here’s one of the villas, Villa Onyx, casual elegance with a light and airy atmosphere.

You got your quick facts about it.

That’s good.

Um, I’ll just be Bev for a minute.

Why is the page in Latin?

Don’t you love when Bev asks that?

Bev always asks that question.

She doesn’t understand what placeholder text is.

Uh, placeholder text.

Absolutely.

Short circuits Bev’s brain.

Um, it’s, it’s every time I ask, I have to try not to laugh, uh, in their face.

Uh, okay.

Got some amenities stuff.

This is really good.

Step into Villa Onyx.

I like, and these are fantastic photos.

This is really well done.

Look at that pool, man.

I’m just, you can just imagine yourself right there.

Just chilling, chillaxing, as we say in the pool.

Very nice villas.

Very nice.

Good, bright photography.

Looks fantastic.

Looks, got an aerial shot.

This is, that’s a great kitchen.

Man, this is just, uh, this is fantastic.

How is this?

Are these prices real?

Where did the, I thought it was like $2.50 a night or something.

Let’s, why is the price on here though?

Shouldn’t the price be on this page?

I feel like the price should be on this page somewhere.

It should also be on the button.

You could dynamically put the price, book Villa, and then it’ll dash, you know, the nightly price or whatever.

Let’s, let’s, let’s go to book this and, oh, can we not book it?

Is that not up yet?

Is that not ready?

Okay.

Maybe we’ll go, we’ll go somewhere else and see if we can get to it from somewhere else.

Um, those can explore.

Is there a book button anywhere else?

See stores, ownership opportunities.

Oh, is this what you meant looking to invest?

Okay.

What does that say?

Unlock the potential of luxury living where turnkey elegance meets.

That just sounds like some placeholder shit.

Um, but is that what you meant up here by like stay or invest?

Yeah.

Here’s $2.50 a night right here, but I guess the booking, what?

What about up here?

Okay.

I guess booking is not set up yet.

Oh, okay.

Uh, I forgot the price on this page, but the prices will be introductory.

I’m waiting on the description from the owner.

Okay.

Uh, so Roberto is here in the chat, which is good.

Okay.

Um, is there, is there any booking yet, Roberto?

I guess that whole flow is not, is it, what is it going to be a WS form?

Is it going to be, what, what, what are you going to use for the booking process here?

Um, oh, that’s a frames layout right there.

It’s a beautiful one.

It’s a gorgeous one.

I love this one.

Love this one.

That’s a frames layout right there.

Okay.

Yeah.

Really, uh, it’s just clean, clean and easy.

Okay.

Okay.

He’s working on the, uh, signup flow now.

No worries.

No worries.

Okay.

Well, um, I, I think, uh, you know, we could, we could take a peek at mobile here, but I think we’ve gone through enough of this at this point.

Mm-hmm.

Pretty clean.

Pretty clean.

Frames does most of this, you know, mobile optimization out of the box.

There’s usually just like a little bit of cleanup to do here and there based on how things were, were customized.

Oh, you even got some filters and facets on this page.

I didn’t even see those at first glance.

Yeah.

I guess these are, maybe these are bricks native and these bricks native facets.

Pretty cool.

Pretty cool.

Okay.

All right.

Let’s go into, uh, let’s go Q and a, and you guys can do Q and a on anything now.

It’s open, open season for Q and a, uh, you can ask about anything.

It could be about this project.

It can be about analytics and conversion bridge.

It can be, um, I like this contact page.

I think that’s a frame as well.

Good stuff.

Um, I’m going to go check our questions queue.

Otherwise, you know, we will, uh, we’ll wrap this up, but I do want to see if anybody does have any questions, we will get to those.

Are those corners properly made getting the color of the background below or are they made manually?

Uh, I’m guessing they’re made with a clip path.

If you look very carefully, I can see the, it looks to me like I can see the background pattern slightly above inside of this cut.

Uh, I’ll, I’ll inspect it in just a second, but visually it’s gonna be hard to tell there.

All right.

Well, let’s inspect it and see.

All right.

Let’s pull this up here.

And I, I always need to remember to put this on the side when I’m streaming to do this.

Okay.

So we have, yeah, there, I already see a class for it.

Clip path, straight bottom, left corner.

Um, this, so this would be a, maybe a thing we could talk about with regard to BIM.

This would be a little bit, probably not, not BIM unless.

Yeah.

Okay.

So it is a clip path right there.

See that?

So now is this proper BIM?

I would say not, right?

Um, calling it clip path is fine, whatever.

I mean, it’s whatever you want to call it, but the double underscore signifies that this is a child element of something, right?

Uh, and it’s not.

And so I don’t, you don’t need the double underscore here.

You don’t need what, what I would, what I would do is describe what this is.

So the word clip path doesn’t actually tell you what’s happening.

It tells us that something is being clipped, but it doesn’t tell us what, why, where, how, like anything like that.

Right.

Um, so I would, I would just call this corner, right?

So I would just call it corner.

And then if you need a corner, bottom left corner, top, right corner, top left corner, whatever, then those would be modifiers.

And then you could potentially combine them together with however it’s, it’s done.

Obviously they’re all going to have different coordinates, right?

I would probably also map these coordinates to variables so that they can be changed on the fly in individual certain situations.

Right.

Um, so that would be a way to improve this.

And then you could use modifier classes or you may not even need modifier classes, just depending.

Uh, actually you would.

Yeah.

Yeah.

The, the way that I would probably do it is, um, if we went to code pen like this, now you have to decide how often you’re going to use these things.

How much do you really want to, how much do you really want to over engineer this stuff?

Right.

Uh, but I would, I would do something like corner, right?

And then you’re going to have your, your clip path and let’s just steal his for a second.

So we’ll just steal this polygon.

Uh, let’s go back to code pen here.

There’s your polygon there.

Um, and so what you would have now, this would also make this far more user friendly because I’ll ask you a question about this clip path right now.

This, this polygon clip path.

If I gave you a pop quiz and said, what’s that value right there do?

You’d be like, no, I don’t fucking know.

I have no idea.

I, you know, not many people, um, you know, maybe rain man or whatever could look at this and be like, oh, I know exactly what that’s doing.

Right.

Um, it is, it is for most people, I don’t think you would know right off the bat, but if these were variabilized, right, let’s go to clippy, uh, as an example.

So what, what was he using a polygon, right?

So if you choose the polygon, pop, pop, pop, pop, pop, polygon, where is there a pop?

Am I missing the polygon?

Polygon, polygon, polygon.

Okay.

It doesn’t, oh, there’s a custom polygon right here.

Um, yeah.

So that’s, that’s even more complicated.

Let’s do a, uh, a Pentagon just for, as an example.

So here’s a value 50% right here.

And that is, okay.

So this corner right here is being controlled by that far end value.

Now you would want to name these for your corner block.

Right.

Um, and if we’re doing a corner, I just grabbed one.

I’m just going to use what we’re doing now to do this.

Uh, that would actually come down there and that would come up.

So this is basically what he did.

Right.

Okay.

And so you’re going to name all of these corner dots and you’re going to name them with, with, uh, custom properties.

So if we go back to here, uh, you would have this one and I’m just going to make them up because I’m not going to take the time to actually map them, but you might be like top left, uh, one and then top left two.

Um, because there’s two, uh, if we, if we go look at it, right.

Uh, or this would be bottom.

So bottom one, bottom two, or find some way to describe that better than one and two.

All right.

But you get what we’re trying to do here.

We’re trying to use like plain language to identify what these things are.

And then these would be like top, right, top, right, or top, you know, bottom, right, bottom, right, whatever.

And then what you would do, so you would essentially have these and you could even give them default values like 0%.

Does it, they could have defaults.

And then what you would do is say, all right, if I want the corner, right, all you would have to do is come in and redefine the variables, right?

So top left one is going to go to 0%.

And then you can actually do it like without having to constantly reference something like clippy or, or, or play around with the values.

Like, all right, which thing am I controlling now?

Like it’s actually described here.

So you know exactly what you’re doing in order to make the changes that you need to make to the polygon for a right corner or, and this would of course be like bottom, right, or something like that.

And now notice that we’re using dashes instead of the underscores.

Why?

Because the double dash signifies that I’m modifying the corner clip path.

I’m modifying the corner class.

It’s not a child element or anything like that.

This signifies a child element.

We’re not using children elements.

We’re modifying the original class.

And that’s where you want to use double dashes instead of double underscores.

Okay.

So hopefully all of that made a little bit of sense, uh, as to how I would probably approach it just to make it more user-friendly, more scalable, more maintainable, easier to modify things like that.

Okay.

Um, what are the most underrated features of ACSS?

I’m using it since some months, but I think very low level, only color spaces, grid classes, some other stuff.

Yeah.

Really good question.

Uh, we can’t really do it in a super concise answer.

There’s, there’s about 20 plus, like not little features, like 20 plus very powerful things that ACSS does that no other framework does.

Um, and they’re very, very, very helpful.

Um, I mean, we, we could go, I mean, the list is like, is like endless, right?

Uh, with how we handle auto grids, the content grid feature, header height offsets, uh, just thing after thing, after thing, after thing, after thing.

Um, that that’s just not anywhere else.

Uh, we take a very unique approach.

We, we think about solving actual real world problems that people run into.

Uh, the textures and overlays feature was, was one of them.

It’s like, I constantly on projects.

I’m like, all right, I need a background texture here.

I need an overlay texture here.

I got to go write a bunch of custom CSS for it.

I would rather already have that as just a thing where it’s like, all right, that’s part of ACSS.

I can just go define it and then I can hit save and then I can manage it all from one place and then I can use it however I want to use it.

And I don’t have to reference old code and bring code from one site to another site.

And it’s that kind of stuff.

We’re always looking for like, and because I build real sites, right?

I built the WP town hall.

I could just have a team member build that, right?

I want to keep doing this work so that I can keep using my own framework and my own builder.

I’m going to be building, rebuilding these things with etch eventually, right?

Because I want to see where are the headaches in the process?

Where is the hurdles in the process?

How can we solve these challenges?

And then we solve them with ACSS.

And then with etch, we’re going to be solving a lot of those kinds of things with etch as well.

Okay.

Please add clip path and ACSS like you did with the textures.

We need this.

Yeah.

So that’s a good example, right?

Now you could have, now it’s a thinking through it process.

Okay.

How would it be implemented in something like ACSS?

Because a clip path is a very custom thing and you would use it for very different purposes and different contexts.

And you could even have presets for them.

Like you could have image-based clip path presets.

Like I want to turn my image, this image right here.

I want to turn that into a star.

Or I want some fancy abstract thing.

But then it’s like, okay, if you’re not going to use a preset, we need a way to define a custom clip path.

Maybe name a custom clip path.

But then how are we going to control the points of it?

There’s going to be a lot of thinking that has to go into it.

These things are not easy to implement necessarily.

Textures and overlays, fairly straightforward, but still, you know, took me days to flesh out the initial organization of it all.

One unique thing of textures and overlays that I’ve never seen anywhere else is you can use the same texture either way and in different ways, right?

So if you go to textures and overlays, you have this one and I didn’t name it.

I just use texture one, overlay one.

You can give it a custom name if you want.

This is that swirl kind of pattern back here.

You can use it as a background or you could use it as an overlay on like an image or on a separate background.

So if I put a background image back there and still wanted to use the swirls as an overlay on that back, I could still do that.

So it combines background and overlays functionality into one management area.

And then you just choose how you want to use the texture.

That’s why I called it textures, right?

Because you could use a texture as a background.

You could use a texture as an overlay.

You could use them as both at the same time.

And then we’re using a, this texture overlay right here.

And you’re going to see additional overlay layer right here.

We actually used a border image hack, like a, I don’t know if I’d call it a hack.

It’s just, it’s not a common technique.

It’s a very rare technique that you would see, but it allows us to sneak in an extra overlay.

So like your, your texture can have an overlay, but when you use it as an overlay, your overlay can actually have an overlay, which is, you know, phenomenal.

And doesn’t use pseudo elements to do it.

It’s, it’s great.

So it adds a lot of flexibility that’s not normally there.

And that’s just kind of how we think through these kinds of features.

And they, they end up being very, very, very automatic color relationships.

Ain’t nobody fucking got that.

Ain’t nobody got automatic color relationships.

Nobody, nobody not happening, not happening.

Um, so this, this kind of stuff, and not to mention that when you do your textures and overlays, you can map them to the auto color relationships.

Um, right here, color relationship.

You can map it to the auto color relationships.

And that’s like, if you have a light section and you want it to be dark, you make it dark.

And then automatically all of your headings, text links, buttons change to the scheme for a dark section or an ultra dark section, which is all programmable by you very easily.

Right.

Uh, backgrounds and text, dark relationships.

Here’s where you set.

All right.

When I make a section ultra dark, here’s what I want my text color to be.

Here’s what I want my heading color to be.

Here’s where I link what I want my link color to be.

And here’s what I want my button style to be.

Notice you don’t have to remap all of the button properties.

All of our buttons have styles, right?

If you go to buttons, they’re named, right?

So primary, and then you have a primary dark, a primary light, a primary outline, a primary dark outline.

And you could just call those in various places in various ways.

Like when you’re customizing forms.

Now you go to forms, global and submit button, use the global submit button styles.

Right.

Um, but if I go to light and I go to global and submit, there’s where I’m defining it.

And if I want the primary outline version, I can just tack on the button outline to it.

Just like I’m using utility classes, right?

Or say, nah, I really want my secondary button there.

Oh no, I really want my secondary light button there.

And you’re just calling it by name rather than having to redefine all the properties over and over and over again.

Um, really, really, really powerful.

This stuff does not, it’s not existing anywhere else.

And I, and again, I could go down the list, just thing after thing, after thing, after thing, I added them up.

There’s literally like 20 plus things.

Uh, and like I just showed you very powerful things you would use all the time, right?

Global border styling, global divider styles.

Uh, let me, let me show you this real quick.

Okay.

This is the kind of shit because I run into these situations all the time and I’m like, yeah, I need a fucking solution for that.

Cause that’s really annoying to have to do that manually every single time I need it to happen.

Um, I was going to do this actually as the next ACSS one-on-one.

So I think it’s already set up right here.

Let’s, let’s drop into this, uh, little install.

Cause I think this stuff’s all very fun too.

Um, but it, it also goes to show you the usefulness of this.

Uh, so let’s go into here.

I think it’s set up.

Yeah.

Okay.

So I was going to, this is a pattern.

All right.

Overlay one right there.

I’m using that little pattern as a little overlay just on all these boxes.

Uh, just so I could have some visual, you know, interest in my, uh, little representation here.

Right.

But, but check this out right here.

Um, I’m going to, I want a divider.

I want dividers between all these elements in this group.

You see this group, this is a group of four blocks and I want dividers between all of those things.

And I want the dividers to use my site’s global divider style.

And I want the dividers to have perfect spacing.

And I, I want a lot of things, right.

And I don’t want extra dividers.

I don’t want an extra divider on the end.

I don’t want an extra divider in the beginning.

I just want dividers between all of the things.

Now, what a chump would do, a chump would come in and they’d be like, is there a divider element in here that I can, all right.

And we’ve talked about, you don’t use divider elements.

This is not, this is not 1997.

Okay.

We don’t use divider elements anymore.

We do this programmatically because you don’t want to manage man.

And then when you move something around or you like delete an element, now you got two dividers for no element.

And it’s like, what, what are we doing?

What are we doing?

Right.

You want to do this programmatically.

And so I just was like, I would like a shortcut to do this automatically.

I don’t, I don’t want to have to do this manually every single time.

So you got to know how to do the pseudo elements.

You got to know how to do the spacing on the pseudo elements.

You got an, or, or you could just come in and say, I just want to divide her between all of them and then we’re going to have to figure out what’s going on with this little pattern deal here.

Let’s go.

Let’s take the pattern off for a second.

Cause I think the pattern is, and this is why you, this is why you use these things in real life.

Cause you’re like, oh, okay.

When patterns are there, there’s clearly an issue.

Let’s take the patterns off for a second.

Then we can diagnose what’s going on with our actual patterns.

Okay.

So let’s refresh, go down.

See, I have a divider between all of those.

Just, I was like, I want a divider on all these things, uh, between all of these things.

So divider all gets me a divider between all of the elements of the thing.

Now I can go to a single thing and be like divider top.

And it’ll put a divider between the top or the bottom.

Let’s, let’s see how that might work on something like this.

So I say like divider bottom, right?

And I put a divider.

I can have the divider on the bottom.

You can control your gaps.

You can do whatever you want to do here.

Now this is a globally controlled style.

If I go to automatic CSS, I go to, uh, borders and dividers and I go to dividers.

I now can sit here and go, all right, how do I want to style all of my dividers?

So whenever I add dividers, I want them to look the exact same way.

How do I style them?

I can control the, the thickness of it, right?

I can control whether it’s solid or dotted or dashed or whatever I want it to be.

I can choose the gap that’s going to be there between elements.

I can have like borders, a dark divider and a light divider.

And then I can choose which one is the default.

Okay.

So that’s, that’s what’s going on here.

Here’s my dark one, which is just default black trans 20, but I can make this primary or whatever.

And then I do a light one.

And then down here, whether this is dark or light determines which one is going to be the primary.

And this is what allows you to just call up a divider without even caring whether it’s light or dark.

You just, what’s the primary divider style of the website.

I can pull that in right here.

So little situations like that, which also, by the way, are mapped to recipes.

So let’s say this was a BIM class, like my BIM divider area.

Right.

I just threw a random class on there and you’re like, ah, I don’t want to use divider all because it’s a utility class.

And I, and I’m going to use this, my BIM divider area thing, lots and lots and lots of places.

And so I need to really just do this with custom CSS.

But even when you have to do a custom CSS, you’re not alone.

Right.

Because you can just come in here and say divider all.

And look at this.

It expands that.

There they are again.

There they are again.

And there’s all the code for them right there.

And you can customize that.

Well, you don’t even have to customize the, they’re still using the global divider style, but you can customize the gap spacing and all of that.

And now your, your divider all kind of effect is mapped to a custom class.

Just like that.

Just like that.

So you’re not forced into using utility classes because we have recipes and so many things that you can do with the utility class can also be done with a recipe.

And so if you need to use custom classes, you’re not left in the cold.

Right.

So this is going to be the next part of ACSS 101.

It’s the next lesson that I’m planning on doing there.

But that’s just another example.

And we could just go on.

Just recipes in general, the existence of recipes.

We came up with that.

We came up with recipes, right?

Nobody else had recipes.

We did recipes.

So, and it’s just on.

When I say it goes on and on.

I mean, we could be here for hours just showing these things that do not exist anywhere else.

And when you run into these challenges over and over and over on projects and automatic CSS just continues to be like, oh, we got a solution for that.

Oh, we got a solution for that too.

Oh, we got a solution for that too.

You’re like, thank you.

Thank you.

And then you end up working on a project without it.

Because you, you know, you get a little like, you get a little spoiled.

And then you’re like, maybe I don’t need this, you know, this extra infrastructure.

Maybe I’ll just go back to doing things without it.

Right.

And then you try.

I invite people to do that.

Like, hey, yeah.

Go, go try.

Go try.

Because you want to jump off a bridge face first, five minutes into the project.

You’re like, fuck this.

I’m going back to ACSS.

There’s no way.

There’s no way.

I’m not moving forward with all of these things in my toolbox.

Right.

That’s just the natural conclusion that people come to.

So see, Manny says, didn’t know about the dividers.

Will that work in a grid too?

Adding dividers horizontal.

No, because horizontal is not a divider.

It’s just a visual effect.

And it’s, it can’t be done the same way.

Now, I did show a grid technique.

Maybe I should look at implementing that as a utility class or something like that.

Using the global divider.

It’s a possibility, Manny.

Okay.

I’m not going to write it off.

It is a possibility, Manny.

We could, we could do a grid kind of accent grid kind of technique thing.

That could be a thing.

It could be a thing.

It’s not used very often.

Right.

So, you know, dividers between elements used very often.

Borders on things.

Just saying, hey, I want a border on the top.

I want a border on the bottom.

I want a border inline.

I want a border block.

I want a whatever.

That’s, that’s used very, very commonly.

So we’ve got all that kind of stuff.

Yeah.

Yeah, yeah, yeah.

Mm-hmm.

I’m, I’m curious.

Did I mark this texture as a backgrounds and text textures?

Because I was going to show you real quick.

Enable.

Oh, it is enabled as an, as an overlay.

Let’s just take a look at this real quick.

As an example.

Because you could do this on images.

As long as the image is wrapped in a figure tag, which this one is not.

Let’s wrap that in a figure tag.

And let’s just say overlay one and see what we get.

You know, when we’re, when we’re live streaming, you’re unlikely to get it.

Let’s see.

Oh, it’s, it’s there.

It’s just behind it.

Oh, no, wait.

Hold on.

It’s hard to see.

All right.

Let me get, let me go to backgrounds and text.

This is, like I said, coming out of experimental this week.

So we’ll see if there’s any issues here.

I’m going to put it as one.

No, it must be behind it.

There must be something else going on there.

Take a look at that.

All right.

Let’s, we, we have to wrap up because it’s 1252.

Eight minutes.

I’m doing a last call.

We always do a last call for questions.

So you can get these in last minute.

I’m going to go back to the chat while those last calls come in.

From now on, I’ll just search the ACSS docs before I start making my own things.

Yeah.

Yeah, yeah, yeah.

Seriously.

There’s been a recipe too.

I just made my own custom snippet for divider all last week.

Yeah.

Yeah, yeah, yeah.

Concentral Gradius is another one.

Concentral Gradius.

Let’s, let’s look at that real quick.

Cause somebody just mentioned that in the comments.

So let’s say you have, you need a box inside.

Here, here it is.

It’s set up right here for this.

So this image uses the default radius on the website, right?

We want this to be a concentric radius.

So your outer thing has to be the concentric radius.

I’m going to do this on a media wrapper and assume you’re going to do this to all of your media wrappers.

Like this is how you want all of your media to look.

So you’re going to assign this to a custom class.

So you can say at concentric radius.

Okay.

And that is going to immediately expand out into what you need.

And it’s going to set your padding in this box for you.

Notice it says padding, because if you don’t know how concentric radius is calculated, it’s calculated.

It takes the base radius.

It looks at the padding amount.

And then essentially does this calculation right here.

So the radius plus the padding divided by two is the formula for concentric radius.

Now it looks like what I would want to do is set the overflow also to hidden on this, or you could set it to clip or whatever, but just by expanding that recipe, just saying, all right, concentric radius, I’m expanding the recipe.

Now let’s go look at this on the front end.

And we have a concentric radius effect, which is a smaller interior radius and a larger exterior radius based on the proper math formula for concentric radius.

And now people are like, well, I want more padding in the box, Kevin.

How do I get more padding in the box?

Hey, no problem.

Go look at the formula, not even the formula.

Just go look right here.

There’s a token sitting there called padding.

And you’re like, all right, I want L.

I want XL.

And look how it recalculates the radius when you change the padding value.

And you don’t have to think about any of this.

You just say, I want, I’m going to do it again for you.

Here you are in your media wrapper and you go, I want a concentric radius.

How the hell do I get it?

Okay.

Well, you could write all that CSS you just saw a second ago, or you can just say concentric radius.

And hit semicolon and it expands it out.

And now you have a concentric radius and you have a little variable right here where you can go, I want that to be L padding, or I want that to be XL padding, or I want that to be XXL padding, or I want it to be section space XXL padding.

I mean, we could go, we could go nuts with this, right?

You could, you could do whatever you want here.

But that’s, you know, again, recipes, ain’t nobody got it.

Ain’t nobody had it.

We had it.

Um, and, and why do we create recipes to solve the problem of, okay, well, that’s great that there’s a utility class for it, but I’m using custom classes.

I don’t want to use utility classes for some of these things.

I want them mapped to my own custom classes.

Okay.

Just expand a recipe out.

And there you go.

We also have mix-ins.

Ain’t nobody else doing mix-ins.

I mean, the idea I’ve shown this before, the idea that you can just go call up a custom button style on a, on a bricks facet using the include button mix-in and just name the style a button that you want and voila, there it is.

Right?

Guys, when I say there’s a fucking laundry list of things, like we could just go for hours down the laundry list of things.

And people are like, well, I only do the basic stuff.

Uh, it, this is why we’re doing so many videos.

This is why ACSS 101 exists.

I just spent a bunch of time going back through, uh, documentation.

Someone gave me a long list.

They’re like, Kevin, these docs aren’t finished.

Sunday, I sat down, bang, bang, bang, bang, bang.

Knocked out all those docs.

Right?

So docs are, are detailed.

They’re there for you.

Um, you can also, by the way, there’s a cheat sheet in the dashboard right here.

You just go to cheat sheet.

Here’s all your utility classes.

Here’s all your variables.

Here’s all your recipes.

Okay.

It’s all sectioned out.

You can search for whatever you want.

Okay.

Um, so if you’re ever like, is there a thing for that?

Well, just type it in search.

Let’s see what you find out inside of the cheat sheet.

Very well could come up.

And then you know exactly what you need to do.

I’m also going to add a section here for mix-ins because that’s going to be important as well.

Understanding what those mix-ins are.

Now that we have, uh, SAS capabilities in automatic CSS.

Um, yeah.

It’s just, uh, there, there is, it’s, it is, um, you know, wherever another framework is, ACSS is like way the fuck up there somewhere.

Um, and people who say otherwise, they just don’t know.

They just don’t, they just, they, they’re not user.

They’re not a real user.

They don’t know.

They, they just think we’re talking out our ass.

No, no.

There’s a literal laundry list.

Um, and it’s not little things.

It’s not little things.

It’s like major, major things that are saving hours and hours and hours of time and making this stuff consistent across all of your projects.

So, all right, there’s my weekly, my weekly pitch.

Uh, Brendan says, are, uh, there are color partials as recipes too.

Yes, there are.

Yeah.

There’s little mini recipes, little mini mix-ins, little, uh, there’s a lot of really super helpful stuff.

Is it possible to have an animated gradient as the overlay texture with the new feature in ACSS?

Uh, I’m trying to think of how those are done off the top of my head.

Um, let me look at, let’s go to CodePen real quick.

Go to animated gradient.

Let’s just see the technique that, uh, there’s one on a button.

Uh, okay.

Let’s, let’s take a look at this real quick.

Hmm.

Oh, dude.

I hate when people write CSS like this.

Dog water.

Absolute dog.

Um, yeah, you could, you could for sure.

Cause this is all you’re going to use right here.

And then the animation stuff is just going to be defined separately.

So yeah, you would just, you would add your keyframes, uh, for the animation and you would, the question would be calling the animation into the gradient, calling the animation into the gradient.

Let me think about this for a second.

I’d have to play around with it.

I’d have to play around with it.

It may need one extra setting to be able to call the animation into the gradient.

Yeah.

Let me, let me, let me play with that.

Let me play with that.

Because if, if, if there is an extra, maybe one extra input needed, I can add that easily.

And then it would, it would unlock that capability for you for sure.

Uh-huh.

Okay.

Let me make a, uh, let me go into linear real quick.

Um, okay.

So we need, uh, animation, animation property for textures.

Okay.

Perfect.

All right.

Um, okay.

Great.

Fantastic.

All right.

All right.

I got to get out of here.

It’s one o’clock on the nose.

Time to go.

Uh, I got stuff to do.

I’m busy.

This was an action pack WDD live.

If you got value out of this, go ahead and give us a thumbs up.

Um, remember that nothing in the chat will be seen after the fact.

So if it’s super important to you, put it in the comments section of this video.

I’ll be back next Tuesday with another WDD live.

Thank you for your support.

Thank you for tuning in.

I love you guys.

And I’ll see you again very, very soon.

Peace.

Peace.

Thank you.

Thank you.