Building a Real Website in Elementor V4 (Live Build Session)

[Music] [Music] [Music] [Music] Heat. Heat.

Heat. Heat.

[Music] [Music] [Music] Heat.

Heat.

Heat. Heat.

the hell. Hello everyone.

Welcome to the stream.

I hope everyone is doing good. And this

is a live stream as always and not a polish tutorial.

Uh we are going to play around with Elementor V4 again because we are slowly working up towards this moment next year

where we probably can start using it for real. So welcome everybody. Let me know

real. So welcome everybody. Let me know where you are watching from. I see

there's already a lot of people in the chat. Uh so yeah, I am excited for this

chat. Uh so yeah, I am excited for this one. Uh because you know this is what's

one. Uh because you know this is what's going to happen to Elementor and I am planning to stick to Elementor. Even though the

options around us are very interesting um these days the options are getting better and I've even been playing around with Gutenberg. Yeah, you will not

with Gutenberg. Yeah, you will not believe it. Um, but uh at this point I

believe it. Um, but uh at this point I don't think it can compete with Elementor, but it's interesting. And of

course uh we have bricks and there's there's even some other ones. But hey, Elementor is here.

ones. But hey, Elementor is here.

Elementor is improving massively. So I

hope that it will be interesting. I'm

also going to interview them soon. So

that's going to be interesting about this V4 because I have so many questions and I see that you guys also have questions and the big question I think

we all have which is what Henry said. Do you use V4 builder regular project now or are you still using the older builder and why? Yeah.

Well, honestly this stream is honestly a test but it's not a proper test, you know, but I just want to test it. Like this is the first time where I'm not just playing around. I'm actually going to

playing around. I'm actually going to try to build a page. Okay, I have a Figma design and I'm going to try to convert that into into Elementor and see

how it is. But according to Elementor's official um uh communication, you shouldn't use it and it's probably

going to take months in the same way as the container roll out did. Uh so no, it's it's not according to them. It's

not production ready, but hopefully soon we will have a moment. I just want to learn it together with you in the chat.

I hope you guys can help me in this chat as always. Will this be a start to

as always. Will this be a start to finish session?

I don't know, Donnie. Like, I'm trying.

I'm going to try. Okay, let me show you the design that we're going to build in this uh video or this uh live stream, I should say.

Um, let me switch my screen to like this.

Uh, back to live mode. Okay, now you can guys can see it. Uh, we have Lex as always. Uh, we have Maya from that's the

always. Uh, we have Maya from that's the Netherlands.

It's a beach city in the Netherlands.

There's actually quite a bit of people.

We have Venuva.

Uh, fever is an alpha, so better not use it. Yes, exactly. Mics don't work.

it. Yes, exactly. Mics don't work.

Oh, did the mics no not work in the other screen? Oh my god. Oh, wait.

other screen? Oh my god. Oh, wait.

That's a problem. Let me fix that.

Uh, now it should work. Yes, I am sorry.

That was a problem. Let me also check the other ones. This one should audio should also work. And my browser should also work. Okay, everything works right

also work. Okay, everything works right now. So, that is good. I'm sorry. I

now. So, that is good. I'm sorry. I

fixed it. The audio was gone for a little bit. Um, good design. Are you

little bit. Um, good design. Are you

going to cut everything up? Yeah, that's

the that's the the the goal.

So um we'll see. We'll see. No sound. No

we'll see. We'll see. No sound. No

sound. Yeah. Sorry. I I fixed it, guys.

I fixed it. Uh, we have uh Arshid watching from Pakistan.

Okay. Yeah, I have the chat now on my left so I can see you guys. If there's

something goes wrong, I uh I can um uh I can fix it immediately. You need to read the chat more. Yeah. Yeah, I have it now on the left. Okay. Okay. Um

Ver. Yeah. Okay. We're back. We're back,

guys.

Sorry. Sorry. Sorry. Could you repeat?

Yes. Okay. Let's repeat. Let's repeat.

Let's Let's go back to the screen. Let

me show you the design again. Okay. So

this design this design uh is a design that um people know if you have been following my web design course

then you know um because this is the design that I teach.

It's basically the end result of the course. It we're we're creating a

course. It we're we're creating a website for a bakery. It's a It's a fake client, but I I teach it with like um real client emails. So, we're going

through the whole process uh for people that want to learn more about design, about Figma. That's um yeah, that's what

about Figma. That's um yeah, that's what the course is for. Um

and uh yeah, this client wanted something creative, but nothing too crazy.

So, it's a it's a good balance of something that that is not too boring, but also not too crazy. So, it's a perfect testing testing website. Uh,

these images are all AI generated, by the way. Absolutely gorgeous.

the way. Absolutely gorgeous.

It's incredible what AI can do. A pento

grid. Then we have this uh slider over here or slider. This is a animated bar. This

or slider. This is a animated bar. This

is a slider, carousel slider. I don't

know if that's possible in V4. We'll

see. An FAQ and then a map and then uh a footer. So, yeah, as you can see, it's

footer. So, yeah, as you can see, it's not it's not like a super blocky design, right? There's like things going on,

right? There's like things going on, shape dividers.

I don't know if we can already do this kind of stuff, and I don't know if we will achieve what we will achieve in this in this uh uh live stream, but I'm

going to do my best to make something.

So, um, Dennis is already hungry and, uh, Borne, I think Bourne likes the design. So, uh, very nice. And, uh, oh,

design. So, uh, very nice. And, uh, oh, we have, uh, somebody watching from Las Vegas. All right. So, now that I have

Vegas. All right. So, now that I have repeated everything, we can get started uh, as always. But

before we can get started, we of course have to grab a drink. We're not going to start without a drink.

Uh, some people don't like it that I have music in the background. So, I

don't have music right now in the background. I'm just going to put it on

background. I'm just going to put it on for myself.

Uh, so that we can all put our own music on, but I hope you guys have a drink.

Again, this is a live stream. It's not a tutorial. We're just going to chill.

tutorial. We're just going to chill.

Okay, let me turn on my lowfi music. And

I hope you guys don't hear it. Let me

quickly check the audio.

You guys don't hear my music, right?

Just double checking.

Double checking.

You don't hear it, right?

Yeah. Yeah. Yeah. Yeah. Yeah. What AI do you use for the I think we just use Chetchip or Invado AI.

No music. Okay. Okay. Good. Good. Good.

All right. So, I'm going to fill my cup with coconut.

Coconut.

I'm in Bali, so they have like coconut everywhere. This is not pure coconut, by

everywhere. This is not pure coconut, by the way. But it's also not full with

the way. But it's also not full with sugars. It's pretty all right.

sugars. It's pretty all right.

It's so nice. I love coconut. It's like

super hydrating and healthy.

All right. My desk becomes wet from this.

I would recommend also grab a drink.

Whatever you drink, coffee, tea. I would

like to drink coffee, but it's already late. It's 8:00 p.m. for me, so I

late. It's 8:00 p.m. for me, so I shouldn't drink coffee anymore. That's

not good because it will negatively influence my sleep, and I'm trying to sleep better. So, uh, yeah. Okay. Um,

sleep better. So, uh, yeah. Okay. Um,

nope. Sounds good. Okay. So, you guys don't hear the music, huh? All right.

Dennis really wants to start. Dennis

always wants to start. Uh, okay. Born

has water and uh Bami Adela likes a design. So, yeah. Let's just go do some

design. So, yeah. Let's just go do some stuff guys together. How is the audio now?

Yeah, you still you guys don't still don't hear the music. You hear my voice.

Well great.

Uh, Mox says, "I love these live streams. I can work on vibing with your live stream." Yeah, exactly. That's what

live stream." Yeah, exactly. That's what

it is. It's a vibe. It's a good vibe.

All right, let's talk about um what Elementor has been doing, okay, for a little bit. because Elementor

has launched a page. I don't know if you've seen it, but it's pretty cool.

They have this page, discover what's what's next for the editor.

So, this is is a page that's all about V4, and you can see um what's up right now. So, right now, we should have a variables manager in

beta. Custom CSS is finally added.

beta. Custom CSS is finally added.

And what is this? Blend mode. Oh, blend

mode. That's also really cool. uh a

feature we know from Figma released.

Okay, this one we have tested in the previous live stream of course. And what

are we getting soon?

Bring your designs to life with powerful interaction controls for a seamless engaging experience. Ooh,

engaging experience. Ooh, that sounds like animations. Oh, that's

good.

I really hope you get some more advanced animation stuff. That would be so great.

animation stuff. That would be so great.

Nested tabs. Oh, okay. We don't have the tabs right now. Let's fill with multiple tabs levels. So, oh, oh, that's cool.

tabs levels. So, oh, oh, that's cool.

Multiple tabs. So, tabs in tabs nested.

Very cool. And then components. Oh,

okay. That's that comes later. We also

really need the components, of course, because for everything that has a repeating pattern but isn't um

isn't a custom post type, you will you will need components.

So for example here uh right here you can see uh this photo slider right I mean this yeah this photo slider you can do it in

two ways. You can do pick the normal

two ways. You can do pick the normal carousel or the loop carousel but the loop carousel is a little bit overkill like why would you create a whole custom post type just for a loop just for a photo slider. So then you want to use

photo slider. So then you want to use the carousel and then this shadow this this yellow shadow you want to have that on all the images and so then it's nice to create a

component um because I think that a drop shadow is not you cannot save that as a

variable and also probably not as a class maybe maybe you can I don't know but for for boxes uh you can use components for stuff like

this. Yeah, this is actually going to be

this. Yeah, this is actually going to be a custom post type. Um, but components basically for repeating stuff. So, yeah,

that is what that is.

Um, yes, it's very exciting what what they're going to release. And I hope, which is which is what they said, that after they've released all of the basics, that they're that they're going

to release more stuff uh that we have been waiting for for years, but that they couldn't really do. So, more

advanced stuff like repeaters, stuff like that.

They said in an interview somewhere that um Elementor will be able to release features a lot more uh a lot quicker with V4 because they're not so limited.

V3 was kind of like built in a not so smart way. So um yeah.

smart way. So um yeah.

All right. Uh I want to purchase Element Pro. Oh, thank you. That's very nice

Pro. Oh, thank you. That's very nice that you're thinking about me. Uh so if you go to livingwithpixels.com

and then you go to resources software recommendations.

This is the page where there's a lot of affiliate links.

It's a recommendation page but some of the links here are affiliates. So if you want to support my work and you want to buy element pro then please go over here

uh and then uh uh yeah you can buy it via there. So just resources and then

via there. So just resources and then software recommendations. All right.

software recommendations. All right.

Um yeah so the the the 3.33 is just is just out like I think today

I made a video. I mean, if Iran makes a video, you know, it's been released one day ago because Irrod is incredibly fast. I

mean, look at look at the amount of videos he makes here. One day ago, 19 hours, 13 hours. I have no idea how he does it, but um yeah, he was very happy

because uh custom CSS finally arrived, which means that we can do more crazy stuff, which is great. So um yeah uh I

have set up a website as you can see I just activating the developer edition so we have the newest features

and um then we are ready uh yeah so now we can update to 3.33 and pro probably not but that's fine

I have V4 already activated on this website so we can get started.

Have you seen hit LinkedIn? It's all

spamming my hit LinkedIn. No, I have not seen that.

Um Rena, what's your opinion about bricks v4 and bricks is yeah, it's it's very similar our shot like elementor is obviously going into the

direction of bricks. They probably have seen that that people want to become more pro. My prediction or assumption is

more pro. My prediction or assumption is that Elementor throughout the years have become more and more pro. It started out as really simple but like throughout the

years has become more and more pro and I feel like the audience have has grown with them including me. When I started out I didn't even know about dynamic content. I I didn't know anything. I

content. I I didn't know anything. I

didn't know what an archive page was. I

didn't know. Yeah, I didn't know anything. I think in the beginning there

anything. I think in the beginning there was not even like custom fonts.

Everything was me local.

It was such a different time.

So I feel like you know the the WordPress is becoming more for pros but at the same time I'm not sure because Element also has a lot of

beginner users.

Elementor has always tried to be between pros and beginners basically.

So yeah, that's um Elementor is definitely going to chase after what bricks has done. Uh many people have switched to bricks but not a lot. Uh

people some people think that bricks is super popular but it's it's it's not so popular. Um, from the data that I have

popular. Um, from the data that I have seen, it's just a few hundred thousand websites, which is still great, but nothing compared to Elementor, which is like 12 million.

So um yeah, it's hard. I don't know what's exactly going to happen because at the same time, things are becoming easier,

you know, with AI. I don't know. How

long did it take you to make the one page in Figma? Yeah, I don't know. I I

have not even uh uh counted that.

uh did take quite a bit of time, but it was a real client. So, it was not just starting out. It was like communicating

starting out. It was like communicating with a client and then waiting.

Um this one was a fake client. It was

for a course, but uh yeah. Okay. Um so,

let's quickly check out version 3.33, what they have, what we can expect. And

this is not a 3.33 video uh live stream.

Maybe I'm going to do a separate one, but I just quickly want to scroll scroll through through the the new stuff. Okay.

Uh, custom. Okay. I already know how that works. Variables manager

that works. Variables manager blend modes. Import refresh toolbar

blend modes. Import refresh toolbar layout. Oh, we have a new top bar. Ooh,

layout. Oh, we have a new top bar. Ooh,

that is nice.

Book a call here. Oh, you can even book a call with them. Uh, manage complex design system with variable manager.

Oh, nice. So now all the variables are in one place. We already had a classes manager, but now everything is here. So

your your spacing, your colors, typography. Very nice.

Oh, this is this is this is uh this is nice.

Made for clarity and scalability. Yeah.

Okay. How it works? Yeah, I understand how it works. We have custom CSS now which of course is great.

That uh was expected.

Main highlight V4 custom CSS control lightweight and predictable. Okay.

Custom CSS applied only to the selected element. Yeah, of course. Uh add custom

element. Yeah, of course. Uh add custom CSS to global classes and apply them throughout the Oh. Oh, that's

interesting. So you can apply CSS to a class, huh?

Interesting.

Create custom CSS for hover active say directly inst. Yeah. Okay. Okay. Define

directly inst. Yeah. Okay. Okay. Define

CSS rules for desktop. Yeah. Feature

autocomplete.

What? Features autocomplete. Oh, hey,

that's also cool that you can have uh it has an autocomplete feature so that it makes writing CSS easier. That's a very nice addition.

Site level custom CSS apply through the site settings continue to control global. Okay, so we still have site

global. Okay, so we still have site settings, but of course you can also do it on an individual level. Okay,

individual level. Okay, background clipping. What is that?

background clipping. What is that?

You can even combine custom CSS with V4 background clipping. For example, set a

background clipping. For example, set a large background image on a heading.

Use a background clipping clip to text.

Oh, I see. Animate the background position with the cue. Oh, that's cool.

I think you can do like or is it just blending mode? H I think you can do like

blending mode? H I think you can do like uh an image and then a text on top of it and then use the text as a mask. I'm

thinking that's it, but I'm not exactly sure. Okay.

sure. Okay.

I'm not exactly sure.

Um, new bl you What's behind it? Yeah.

Okay. I don't know if we're going to do this, but what is that? Keep designs

intact with media import export options for website templates. See if media to cloud.

What is that?

Oh, interesting. Okay. So if you save a template, the media is also included in that with your cloud on your account.

Okay. Oh, here the new top bar. Oh, it's

more simple. Okay. Oh, the site settings are now hidden.

Makes sense because they don't want to focus on the side settings in the future so much. What is that? Padding edges.

so much. What is that? Padding edges.

My ACF image. Wait, what is this?

background placeholder. Okay. Clipping.

Oh, yeah. Yeah. Maybe this is what I meant.

My ACF image. Oh, you can even do it dynamically. Okay. So, you can have a

dynamically. Okay. So, you can have a background and then what is padding edges? Yeah, I want to test this but I

edges? Yeah, I want to test this but I think I'm going to do that in another live stream. In this live stream, I just

live stream. In this live stream, I just want to create this design again. Let me

show it again because somebody asked to show the design again. Okay, so we have this hero with some floating icons.

Then we have these uh rotated cards with actually layers which is more challenging. Okay, so we have the cards,

challenging. Okay, so we have the cards, we have shadows and then we have images on top of it but these are not we can we could export it as one but I want to test because we

have layers in V4. Okay. Background

layers. We have some absolute positioning over here. We're going to turn this one just into an SVG.

We have this one which will open a pop-up. I want to test the popup as well. I don't know if the pop-up is already a V4, but you know, we'll see.

Um, yeah, this section is quite simple.

Just some absolute positioning on these titles. I think that's going to be easy.

titles. I think that's going to be easy.

I hope actually I don't even know if absolute positioning is already there. A

slider FAQ and then two boxes. This is

all easy, right? The form I don't know if the form is already uh improved or updated, but yeah, that's the that's the design.

Um yeah, so that's it for all the updates.

Yeah, I think I just want to do this uh in another live.

Just test out this new 3.33 when it's really out because I often like to wait until it's out and not the beta. Uh so

yeah, I think that's all we needed to check.

Yeah. Okay. So now we can get started with doing some stuff.

So, let's start making a page. We're not

going to do accessibility now. Come on.

Um, Elementor already made a page. So,

let's open this. We have to export everything. Okay. I'm starting from

everything. Okay. I'm starting from zero. There's there's literally nothing

zero. There's there's literally nothing here.

So, let's see. Uh, when you start a new course. Yeah, I mean I am planning to um

course. Yeah, I mean I am planning to um refresh my whole element pro course next year. So next year when Elementor v4

year. So next year when Elementor v4 rolls out, my course is also going to be rolled out.

Could you kindly save to VOD? What is

VOD?

What does that mean?

Uh do you host your client sites on host? Yes, everything. My own websites,

host? Yes, everything. My own websites, client websites. I mean not all clients

client websites. I mean not all clients want of course Hostinger but yes these days I do everything on Hostinger.

So um that uh can I do this page with normal elementor or do I need pro version? Uh this page is not possible

version? Uh this page is not possible with the free version because there are some elements in there which are pro.

You can get pretty far with the free version but uh yeah uh yeah thank you. And Mark says, "Is it going to be next year?" Yeah, pro very probably. Very probably.

probably. Very probably.

Actually, I already know it's going to be in transition period. Okay. So, we're

going to have a time where V3 widgets will live next to V4.

Um, Mike is talking in Dutch. Please,

Mike, make sure to talk in English so everybody can see it and uh follow it.

Mike says, "What do you think of Strato?

I think is a Dutch hosting provider." I

think it's I don't like it. There's with hosting.

You should not pick local often local companies. Just pick the big global

companies. Just pick the big global players. They have they have the most

players. They have they have the most resources, the most features, the most security, the most innovation.

uh you should pick the big players and then not the big players that are not innovating again anymore.

Um you know I used to be on site ground but I think side ground hasn't innovated a lot. Hostinger is innovating a lot.

a lot. Hostinger is innovating a lot.

They are like on it. Their energy is like really really good. FD means stream basically. Okay. In Twitch language. Oh

basically. Okay. In Twitch language. Oh

okay. I just subscribed and would love to have saving. Yeah. Okay. So on

YouTube it works like this. If the

stream is over, it will automatically become uh recording. So, uh, beautiful. I'm I

uh recording. So, uh, beautiful. I'm I

don't have um uh Twitch. I don't know. I'm not a a

uh Twitch. I don't know. I'm not a a gamer, I guess. So, I didn't know that term. Uh, yeah. Good. Okay. All right. I

term. Uh, yeah. Good. Okay. All right. I

answered some questions. Dennis is

already dropping some uh some code.

I don't know what that is, Ben Dennis, but uh are you already preparing? Oh,

you took a screenshot there. Yeah, yeah,

yeah, yeah, yeah, I know, I know. Okay,

let's get started. Uh I'm I'm going to swi constantly switch, of course, between uh Elementor and uh Figma uh for the border. Yeah. Okay. Okay.

Okay. Thank you for looking forward having series on your build. Yeah. Okay.

Okay. Let's get started now. Um,

let's go to Figma.

So, what are we going to start with? Of

course, the hero.

Uh, the variables are all in here first. Yeah, this website is pretty

first. Yeah, this website is pretty crazy. There's actually two color

crazy. There's actually two color palettes, but we just need one.

Um I just want to make sure that the naming is how I want it.

Primary uh light.

Well, actually these days I do it like this.

Uh I start with light one and then no light one and then the darker the color becomes

the Hey, why is light two already? Oh.

Oh. Sha there's two colors like this.

Wait, wait, wait. This is uh secondary.

Uh this is the secondary one. Sec

primary. No, that's actually the main secondary.

secondary dark or two dark uh sack dark one sack dark two. Okay, that's what we

need. So, makes it easy to copy.

need. So, makes it easy to copy.

Um and then over here we're just going to pick light two. So, one, two, three.

And then also here, this is the number three.

So, one, two, three. Makes it a little bit easier. In my element of course, I I

bit easier. In my element of course, I I said dark, darker, darkest. But what if you have a darkest, you know?

Yeah. Uh, first global settings, right?

Yes, of course. I mean, I think I'm just going to do it at if that's an English word. I'm just going to do it as we go.

word. I'm just going to do it as we go.

I need to find the workflow, but I'm also figuring out did you use HostGator before? Yes, that's not a good one. I

before? Yes, that's not a good one. I

would have uh advised to to avoid that.

Swearing in German.

Color settings. Hi. Color setting tool name, please. Color setting tool name,

name, please. Color setting tool name, please. What do you mean tool? This is

please. What do you mean tool? This is

This is just This is just inside of Figma, this one.

What new UI? Looks quite amazing. I'm

impressed.

I always try to use lower case. Yeah,

that's that's more like how developers like to do it. Um but yeah, this is fine. I just want to keep it easy,

fine. I just want to keep it easy, right?

Okay. All right. So, um uh the colors are here. So, what do we need? Right. We

are here. So, what do we need? Right. We

have Oh, I actually use variables in here.

Okay, this is going to be a little bit hard because I have this one is quite Wait, wait, wait, wait, wait. You know

what? You know what?

I think we're not in the right project then.

Um, let me quickly check because I have multiple versions of this untitled.

Is it this one?

where the colors are a bit easier.

No.

Okay.

Yeah. Okay. So, here I've used variables. It makes it a little bit

variables. It makes it a little bit harder. So I have set up like the

harder. So I have set up like the background is this and then it's it's this color. So it makes it a little bit

this color. So it makes it a little bit harder these days. I mean variables is nice if your project becomes really big.

But now for web design I'm like I think variables in Figma is is too much. It's

too much.

So I'm simplifying my my workflow.

Bro, I absolutely love this. Thank for

doing this. If there if there's is there a way I could share my reasons project with you and get some insights. Well, um

that's not what this stream is about.

You I have a feedback show on YouTube.

It's called Miltime. You can go on my YouTube channel and then apply uh and maybe um I give feedback there. There's

a place for that and a time for that. Uh

what was the tool you made come up with a web? Forgot the name. So want to check

a web? Forgot the name. So want to check it out. Yeah, honestly like it's been

it out. Yeah, honestly like it's been like super super improved.

So it's called websiteest stealthkit.com and um I've improved this quite a bit.

So you can start with a color like this and then it gives the pallet.

This this one you mean right? This is a web tool that I made myself.

um with bold. And now I've even added a secondary palette. Yeah, I still need to

secondary palette. Yeah, I still need to make a YouTube video to give you guys an update, but you can now pick another color. So, for example,

color. So, for example, I don't know, pink, and then say that you want to use that for the accent colors or the light tones. See? So, now

you have a combination of two colors. Pretty cool, right? So,

yeah, you can definitely use this tool.

It's still free.

Um, and I have used this tool actually to make this Figma design.

So yeah.

Okay, I'm just going to um add some colors and then um uh let's get started. We have light one and light two for the backgrounds. Okay,

so what is this? This background one.

And we also have white, but there's no white. And what is light one then? Is

white. And what is light one then? Is

light one white.

Uh, light one is background one.

Sorry, this is this is a little bit annoying. Background. Oh, background one

annoying. Background. Oh, background one is just not light. It's not white. Okay.

So, white is is light is is the number one. Then we have this one and then the

one. Then we have this one and then the the two uh lights one and light two. Okay. Let's

add them. So, uh in Elementor V4.

Oh, we see the new uh the new top bar right now.

Post settings. Post. Are we in a post?

No. On a page, right?

Oh, look at that. It was over here.

Now, this one is over here. There's no

site settings anymore. Notes and

history. Okay. Plus, and the side settings are now here.

But we're not going to use the side settings. We're want to try to avoid

settings. We're want to try to avoid that.

We're just going to try to make we're just going to try to use um the variables, which we don't have to open the site settings. That is so nice.

Okay, so let's get started. Uh oh, we can also not use this. We have to drag in. That's

still a little bit of a bug or they haven't updated it. But if you start from here, it will still use the old container. So you have to start from

container. So you have to start from here basically. So you can grab a div

here basically. So you can grab a div block and then a flexbox inside of it for the box container.

And then what did I set up last time?

Um, oh yeah, I remember. So the the box container, we're going to add some padding left and right with for 5%.

But not the top and the bottom.

Yeah, we are. We're going to do we're going to use some REM and in our Figma.

Yeah, this design is pretty crazy actually. There's like no no real

actually. There's like no no real structure because it's pretty custom.

It's not that all of the sections have like five RAM at the top and five RAM at the bottom.

So yeah, I think I'm just going to freestyle it. What do we have? At least

freestyle it. What do we have? At least

maybe we can have a starting point.

What do we have here?

80. Yeah. So, five RAM.

No, it's too custom. I'm not going to do top and bottom. I'm not going to do it.

I'm just going to do it by hand. Um, so

we're just going to put 5% left and 5% right. And that is then we're going to

right. And that is then we're going to convert that to a class which we're going to call background and then uh the inner box. What is the

width of that? Yeah, so it's it's automatically full width. So the size uh in Figma in our artboard is as always

1120 which is fine. So,

we're also going to put that over here.

1120 pixels. And then it's not middle aligned.

So, we're just going to go to this one.

And then the BG. We're also going to make sure that it's middle aligned.

Layouts. Oh, this one needs to be a flex to BG. Otherwise, we cannot middle align

to BG. Otherwise, we cannot middle align it. Yeah. Okay. Now, it's middle

it. Yeah. Okay. Now, it's middle aligned. This one is 1120.

aligned. This one is 1120.

Um, which should be converted to a global class as well. Let's just also let's just call it box.

Um, yeah, we only have one box or no, we don't. Okay, we have what do we have

don't. Okay, we have what do we have here? Wait, boxed

here? Wait, boxed [Music] boxed medium. So how I'm thinking about

boxed medium. So how I'm thinking about this is that the main box here is just 1120 but then over here for example you have

a smaller width right so that then would be boxed small here we also have a smaller width so that's actually the middle one

you see this one is just an overflow.

Yeah. Uh so for this website actually then the the 1120 is the big one. This

is then the smaller the medium one and then this is the the small basically.

Okay.

So we're going to work we're going to try to work in a proper way. So I'm

going to call this box L.

That's the 1120 one. And then later we're going to add another box. Okay. So

on this background, we're going to of course add that color, but we're going to add a new class for that.

Um, wait, wait. Let me open my

wait, wait. Let me open my V4 nodes because I do have some kind of classes system in mind.

Um, let me see. I'm not You guys don't see this what I'm doing and that's that's what I want.

BG Lite one, BG Lite 2. Okay. Yeah. So,

the idea is that we're going to add a class for the background.

And then in that class, there's a color variable. Okay. Wait, do I still have

variable. Okay. Wait, do I still have the chat on? Yeah. Okay.

Um, can we check how the code on back end looks? Comparison. Yeah, we we can, but

looks? Comparison. Yeah, we we can, but I don't have a a fair comparison now.

But Jeffrey made a good video on that.

He checked it out and it's it's super clean compared to the V3. But I'm not a coder, so I don't really understand it.

I always find it hard to get. Yeah, I

mean that's what I'm going to spend probably the the the quarter one of next year I'm probably going to spend making tutorials on that. What annoys me with

element is copy and pasting sections.

What do you mean? What's the section colors?

Hi everyone, Natalia. Okay, welcome

Natalia. Um,

so, uh, yeah, we're going to add some colors now. Okay, so let's do a

colors now. Okay, so let's do a backgrounds.

And then here we're going to add a color.

I don't think we can convert it into a variable. Or can we? I think we're going

variable. Or can we? I think we're going to start out with FF FF FFF, which is white. Or should we just put it from

white. Or should we just put it from here? No, we should do it from here.

here? No, we should do it from here.

Okay. So, we're going to do light one.

That's going to be pure white. Create.

That's it. Easy.

Then in our Figma, we're going to have the other color, which is light two, which is this one.

So, let's just wait. Let's try to go to the variable manager. Where is it?

Huh?

Where did they put that?

Here. No. Oh, the structure is now on the right. The layers panel, which makes

the right. The layers panel, which makes more sense because it's it's by default on the right.

But where is the variable manager?

Wait, where can we get it from here? Oh,

here. Variable manager. Oh, there we go.

So now we can just go in here. Oh, here.

Color font size. Nice. Okay. Color light

too. And I'm just going to put that color in here. Oh, you cannot. Oh,

that's a that's a flaw. Oh, okay. The

hashtag should be there otherwise not going to work. You see that?

Let's pick my third color.

Plus light three. Three.

light three. Three.

The hashtag should stay otherwise not going to work. Three. Okay. So now we have three background colors.

Perfect. Let's also quickly grab my uh text color. My two text colors. We have

text color. My two text colors. We have

heading and dark too.

Uh okay. So let's also make our dark colors.

So we have something to work with.

Dark one. Just quickly copying things from the Figma.

Dark two and then dark three.

Yeah, the fact that you have to replace the that you have to place the the hashtag that's not user friendly because this is a this is one of these small things that non-coders don't know. I

mean I know this because I I understand the basics of CSS but uh yeah.

Okay. So now we have headings, we have something for body and we have something for accents.

So that's great. Let's save the changes.

I'm also quickly going to make some notes for Elementor.

uh 3.33 notes which is that um color variables

should or copying hex codes should work without using hashtag.

Okay, I'm sharing some uh notes with the element team sometimes if I think that they they should improve.

Okay. Uh, is it already stable? No, it's

not France. It's not.

I love it when you say third. It sounds

like turd. Keep up the good work, dudes.

English not my first language. Okay.

Uh, if you build a section and want to paste from another page, but you always have to paste it in and drag widgets here section.

What do you mean you have to paste it and drag widgets here section? You don't

have to. You can just click over here.

Look, you can just click and it adds it.

Oh, not in the right box. But let's open the layers panel. Put it inside the flex box.

But here you can just do it from here.

See, you don't have to drag. You can just click.

drag. You can just click.

Uh, okay. So, now we should watch out because the boxed L. Oh, wait. We can

actually put the direction on vertical because we almost always want vertical.

So, layout and then column. Yeah,

that's how I want it.

So now we have a button that is super wide by the way by default. That's

probably because of our settings here.

We probably need to align items start in this case. We have to use middle. But that's not what I want for

middle. But that's not what I want for this class. That's just what I want for

this class. That's just what I want for this local.

Yeah.

Yeah. Yeah. We're getting there. We're

getting there.

This is actually live. I thought it was just on video. Yeah, it's live. Marius,

welcome.

Hey, Key Frame Creations is here also a long-term viewer of the live stream.

Welcome back.

Um, okay. Let's copy some text from Elementor uh from uh from Figma.

And I'm of course also going to set up our um typography with variables.

Just copying some text, putting it there.

Explore our breads. Oh, and there we go.

And now, um, let's add some colors. So,

um, let's start with the background. So we

have our BG and then the idea is that we have some kind of class for the background. I think that's the nicest

background. I think that's the nicest way to work instead of just dumping it on the local level.

So I am going to add a class which is BG light 3. So background light three. And then on the background I'm

three. And then on the background I'm just going to add Oh, it's already on light one. How is that possible? Okay.

light one. How is that possible? Okay.

Uh, I'm just going to put light three. Why is it not working?

light three. Why is it not working?

Or is there also a background in here?

Oh, yeah. Okay. Unlink it. Missing

variable. Why?

We don't have to clear. Oh, just click. Hey. Hey. Unlink.

clear. Oh, just click. Hey. Hey. Unlink.

Just go away.

Missing variable.

Huh?

Why? We don't need to add the local.

Maybe we should have local delete.

Clear up. Oh, now it's working. Okay,

now it's working. BGI 3.

Okay. But now it's way too dark. What

did I do wrong?

Background two.

Background two is light two.

Light two. Oh, that's the second one.

Light two.

Okay.

So, we're just having to change it here to light two. There we go. Okay. All

right. Now, for our headings. Yeah, this

in the beginning it's always a little bit hard to set up with Elementor, but once we have all the classes in place, then it will it will get really nice.

Um but wait local light two

BG light three. No it should be called two. It's actually a second one. I made

two. It's actually a second one. I made

a mistake. Okay. Uh doesn't matter. So

now we have the uh spacing here. You can see with these dots what has been edited. That's very

nice.

So on the background we have the spacing and the alignment and then the BG. Okay.

So we should se separate all of these.

That's easier because then you have one place where you can control the whole width and all of the backgrounds. It it

will be easier. Uh okay. And now

we're going to add some colors to our text. But we of course also need some

text. But we of course also need some um classes for that. Okay.

So my idea is that we're going to do it like this. Style here heading dark

like this. Style here heading dark and then uh the color typography here

link it to dark one. You don't really see a different but now it's dark one.

And then for the body text, that's the dark body. So we want to turn that into a body dark.

And then the typography should be dark, too. Okay. So now it's it's working. It

too. Okay. So now it's it's working. It

should be working.

Let's test it quickly because I have my lovely plug-in installed, of course, here.

See 4B 2020 20 29 19 and Okay, this one starts with 25. This one starts with 4B

with 25. This one starts with 4B there. See 25 4B. So it's it's working.

there. See 25 4B. So it's it's working.

Hi Reno, long time follow. Thanks for

everything. This looks like it's heading the same direction as bricks. Yeah, just

wondering if the front will be as black.

Well, the front the front. No, I mean from what I've seen it's uh it's going to be really um it's going to be really clean.

You know what? You should you should check a video of uh of Jeffrey uh Jeffrey Lightbox, my friend.

He has made a video on this. He checked

it's a while ago.

He checked the code. Is it ready yet?

Yeah, he's also making videos on it. He

understands code more than me.

Maybe this one, but it should be it should be super clean. Okay, so here we can check it.

clean. Okay, so here we can check it.

Maybe you guys can see.

I don't know if this is this is going to be sharp enough for you guys to see. But

here, what do we have? Page content.

Um, then there's only my div which I created. This div I created this is

created. This div I created this is literally WordPress a post here. Let me

zoom in there. You see this is WordPress itself

there. You see this is WordPress itself I guess just a page. Then there's a div the first div that I created with the padding. Then the inner div. I also

padding. Then the inner div. I also

created that one.

And then immediately the heading. So

there's no nesting divs. See it's using the class name that I have set up.

and then the P and then the button. See,

it's it's it's the it's the most clean you can get. Again, I'm not a coder. I

don't fully understand this, but from what I've seen, it is this is the cleanest. From what I understand,

the cleanest. From what I understand, this is very clean. But there are developers in the chat, so let me know.

Let me know. As always,

I hope we really get BM. I don't know.

I've never used with BM before.

Still so many class from elementary itself.

Which then?

Which then?

You mean this? This

Yeah, I don't know why he needs all these classes. Uh

these classes. Uh um Dennis.

So again, I'm not a coder, okay? But

from what I've seen other developers talking about this, they they say that this is a huge improvement.

Uh, okay. Let's close this one.

okay. Let's close this one.

All right. Uh, let's add some typography, which we're also going to use variables for. So, inside of Figma, let's see what we have. We have title

one, and we have body text. Okay, this

is easier to check. Oh, it's also variable here. Fredoka and outfit. I

variable here. Fredoka and outfit. I

hope that that's a I hope that that's not a or I hope that that's a Google font. Otherwise, I'm just going to pick

font. Otherwise, I'm just going to pick another one. Fredoka and outfit for the

another one. Fredoka and outfit for the body. Okay, let's go back. Um,

body. Okay, let's go back. Um,

so for this heading, we're going to put it inside of the this class. Is that

smart? Yeah, that's smart. That's easier

because then the size can be defined by the age.

Is that smart what I'm doing? Yes.

Yes.

Yeah. Because now we're only saving it to one place. Yeah. This this is the smartest way to do it. So the heading should be Frey do. Look at that.

Fredoka.

It works. We're not going to set up the sizes here. We're going to do that

sizes here. We're going to do that somewhere different. This is just so

somewhere different. This is just so that we have one place where you can manage all of our headings because we're having a dark here. You know what? I

don't like this name. So long here. H

dark. That's it.

We don't need these long names.

That's easier. And then um for our body dark, we're going to do what was it? Outfit.

Yeah outfit.

Beautiful font. Wait, why does it look the same as the other one?

Is that the same as our Figma? Oh, yeah.

Yeah. Or not.

Am I crazy?

Wait.

font size.

Oh, yeah. It's the same. Okay. Okay.

Okay. All right. So, now the co Oh, sorry. Now the color

sorry. Now the color of the body font and the font itself is connected to body dark.

So soon later when we're going to have body light here for this section. Oh no,

this is only the heading light here. Here we're going to have to use

here. Here we're going to have to use another class which is by the way the same color as the background. So that's that's how I

the background. So that's that's how I always like to work. Oh, to make things uh easy, let's also make a class for our button. Uh but we first have to set up

button. Uh but we first have to set up the size as well.

So what is the size? It's 64. And then

for our body is probably just 16 or 18.

Okay, we starting out with 18. So that's

the body big.

Yeah. Body large and body small.

So um we're going to make another class called body large

which will have the font size of 1.25mm.

Right?

1.25mm 25mm is Oh, that's that's too much. 1.15 then or 1.2.

No 1.1 1.15 1.13 1 point. Oh, 1.12.

1 point. Oh, 1.12.

Wait, there has to be a one here. This

is 18. I'm making the calculation.

Yes.

That's body large.

We're of course going to work with RAM.

Is it because that what?

Yes. Yeah. Each one should have their own classes. I typically only use

own classes. I typically only use utility classes to modify. Yeah. Yeah.

Yeah. Exactly. Exactly.

It's going to be a puzzle, but if you done it once, you can reuse it for other sites. Yes. Exactly. You need to make

sites. Yes. Exactly. You need to make your own system, right? the button

classes section be the footer would make separate.

Yeah. Yeah. Yeah. Okay. So now uh we have the size for the body large. And

let's also do that for this one. We're

just going to make it H1. This purely

for the for the size which is going to be uh 64 / 16. That's four RAM. So 4R.

Yes.

And in this case, this body is going to be in the middle aligned. Oh, wait.

Where's the text align typography? Oh, here. Okay.

typography? Oh, here. Okay.

Um, but we have one more thing to do and that's that our heading dark is actually fat.

Uh, so we make it fat here. Bold. Wow, that's really bold.

here. Bold. Wow, that's really bold.

Let's do it like this.

Okay.

And now, oh actually this whole box should be small. It

should not be box L.

Remove. It should be boxed S.

We need a small one.

Box S should be like this. And then the width, uh, the width should be 720 pixels.

Yeah, we could do it like this. But now

we also have this problem with this text.

Yeah, for this layer, we can just do it locally. It's fine. And we can just put

locally. It's fine. And we can just put the size on.

What do I want? Yeah, I'm going to use pixels here because on a tablet I don't want it. I just want it to scale

want it. I just want it to scale proportionally. So, let's see what we

proportionally. So, let's see what we can do. 500. Yeah, that was a good

can do. 500. Yeah, that was a good guess. Okay.

guess. Okay.

All right. All right. All right. Let's

take a little break for a drink.

element and I really need to lower the specity of their default styles so we can use frameworks that have all this stuff that yeah I mean that's that's essentially why they rebuilt all of the

widgets.

So they I think this is the the the reason that now everything in a general tab

is just content and this is only for styling and then that allows you to use this these features like with V3 the styling

was all over the place some of it was part of content some of it was part of style some of it was part of advance but now it's all unified These

signs are always der from building the site. Yeah.

site. Yeah.

Yeah. Yeah. But that's never going to happen, I think. I mean, Tillwind is not made for the web.h I Okay, it is made for the web, but it's made for products

more. It's more made for products than

more. It's more made for products than it is made for the web.

This is this is literally why I made website style kit because I was so done with with all of these color palette

generators that were or for product which has way too many colors or they were for

um a graphic design. That's why this one exists. It it has just a pallet with

exists. It it has just a pallet with everything you need for the web. That's

why they have this preview over here.

Look, there's also now this uh this preview. And also here you can see an

preview. And also here you can see an FAQ how the colors look together.

This is a perfect starting point. Tree

soft, tree dark, two main.

So that's that's why I made this, you know.

I'm sorry if I missed this, but will the new class system work like something similar web flow? Yes, absolutely.

Yeah.

Which is main for Yeah. I don't know if I agree with that. I don't know if I agree with that. I think it's too many colors.

Too many. I think it's more for products.

Yeah.

Yeah. That also it's too overkill. I

think elemental is a nice balance, but yeah, whatever. We don't have to discuss

yeah, whatever. We don't have to discuss on that. That's an interesting

on that. That's an interesting discussion. Of course, just wanted to

discussion. Of course, just wanted to show why I created it that way. Uh,

okay. So, now we have everything here.

We have the body, we have the sizes.

Let's also add some top and bottom uh padding.

How much do we have?

I think if we just use 5R.

Oh, not 55. Oh, I'm messing with the margin here. 5R.

5R.

That's pretty all right. Oh, the default spacing is zero.

Do you see that? The the elements all stick to each other.

Why is that?

Do we have base values already or something? Wait, maybe we have new site

something? Wait, maybe we have new site settings?

I haven't even checked it.

Do you know good section libraries where they have the auto?

I'm gonna Valit I'm gonna launch something soon but there are uh there are current uh frameworks or uh section libraries

like Scala mentor is one that you can look for but I'm going to launch something soon which will be uh exactly that um but for now I would recommend

skeletor okay so where is the base values.

Do we have it?

Huh?

Okay.

Man setting up everything qual.

Yeah, but right now frameworks can't overwrite the default styles.

I don't know if if that's the I mean I I I think they still have to update many widgets. I don't exactly know how it

widgets. I don't exactly know how it works, but uh I don't think if there are Yeah, there's still a gap here, but it's not using that.

So, I guess it's just ignoring the site settings.

I don't know. We can just use our own gaps.

Uh let's see. and our Figma we have used 24 over here and then here 32.

So let's do the same um going to go in here and then in the local one and then the row is going to

be what did I say 24.

So that's 1.5R.

That is fine for now. Okay, let's give our button a class. We're going to, of course, do Yeah. What kind of button?

Uh, let's do button primary.

And then we're just going to add some stuff in here. Oh, we haven't set up our color, our main color from Figma.

So we have buttons button um here primary.

Okay.

So we're going to give this primary and we're going to put that value in there with a hashtag create. There you go. And then oh here

create. There you go. And then oh here we see the new clipping feature.

What is that? content edges.

Wait a second. What is that text? Oh.

Huh.

Background. Yeah, I think this is the moment where you can have an image as a text.

Wait, wait, wait. We're not We're not going to do that right now. Um, uh,

color of the background, color of the typography is going to be light one.

There you go.

And then the typography is going to be Wait, we haven't used a variable for that.

Oh, we should have done that. Oh, we

should have done that. Oh, a

[Music] Okay. What was it again?

Okay. What was it again?

Uh, Fraoka and outfit.

So outfit for this one. And that's for the body then.

Body. Okay.

Um, and then in this case, we want to make it thick.

Yeah, that's pretty nice. Yeah, that's a that's a way to work. But then for this one, our body large, we should not put

in the the font here, but we should here. Clean that. Clean that up. Can we

here. Clean that. Clean that up. Can we

clean it up?

Where's it? Where's the style? Body

dark. Oh, sorry. It's on body dark, of course. Clean it up. And we should link

course. Clean it up. And we should link it from here. Body. Yeah, that's better.

Okay. Okay. Okay.

I messed up something. So, here. This is

how you should do it. Heading.

And then the font should be what was it?

Fredoka. Yeah.

Save.

And then the heading uh dark should not be linked to Fred Doa but to the variable heading. So then

from one place you can change all of your headings and all of your bodies.

That's the way to go. It's not working somehow.

Robboto. Oh, it did not save Fredoa.

There we go. Safe. Yes. Huh.

Go live right away. Yes, I understand.

What the hell? Okay. Oh, I thought I couldn't click the button. Sorry, I got a bit stressed.

Now we set it up correctly. Okay. Okay.

So, button. We're still editing the button. Let's add some radius in there

button. Let's add some radius in there in our website. Uh oh, we're not using full in Figma.

We're actually using what is it?

button. It's a variable or an uh sorry component here. 12. Okay, we're using

component here. 12. Okay, we're using 12. And here as well, we can just use a

12. And here as well, we can just use a variable if we want.

So, we can do like 12 and then Oh, no.

Oh, we can't. Okay, there's still no variable. Oh, sorry. Sorry. Haha. I was

variable. Oh, sorry. Sorry. Haha. I was

here. Uh, there's still no variable option available for the border radius.

So, I'm also going to make a note for Elementor.

Still no variable for the border radius.

Not a huge problem, but of course we would want that. Okay,

12. Now we are there. Let's quickly

check the chats.

Regardless, the point of it was to say it would be nice to have something like two of Bootstrap. If you have your own thing, then you got your own thing.

Yeah. Yeah, I mean, you know, I'm what I would like to what I'm going to try to build myself is like a framework system for Elementor because I I know that many

people are going to struggle with this.

I don't know if I can make it happen, but I want to create some kind of core framework for Elemental.

I hope I can make that happen.

Ivas welcome to the chats my friend. Do

you have to create a button primary offer? Yeah.

offer? Yeah.

Yeah. I mean it's not a separate class.

You can just do it inside. That's really

nice actually. I will show you. I think

we use when if we could use core framework. Yeah. I mean it depends on if

framework. Yeah. I mean it depends on if elementor is going to open the the Yeah. Yeah. If element is going to

the Yeah. Yeah. If element is going to open that API, right? That's going to be it. Hey Marine, send me a message. I

it. Hey Marine, send me a message. I

will that would be awesome. I think we should we should still build some stuff.

It always happens in this stream that we get ideas, but uh I'm not I don't have a lot of time, but next year I want to I want to spend more time on products. I'm

a little bit done like always making YouTube videos. Honestly,

YouTube videos. Honestly, I love YouTube. Okay, I love it. And

these these streams are different. This

is just chill with you.

But um yeah, I just want to say something. I

just want to say something. I'm a little bit done being just a YouTuber.

It's just an intense grind to always, you know, one video is done, go to the next one.

One video is done, go to the next one. I

really like products, you I really like what I made with the website stealth kit. I I've helped many WordPress

kit. I I've helped many WordPress companies improve their designs. So, I

think next year I want to do more products because it would be so nice if we could have a system for this that would do that automatically.

I don't know if it's that easy because as you can see it's quite a bit of steps to get a good design.

We are literally already streaming for 1 hour and I just created the hero section. Incredible. Now,

section. Incredible. Now,

okay. Um,

this is a good start. Let's try to add a a border. I mean a a section divider

a border. I mean a a section divider like this. So, this weird shape. We can

like this. So, this weird shape. We can

of course export that separately.

It's not a perfect shape. As you can see, let's see what what we can do in Elementor if there's already something built in.

Oh, by the way, sorry, Dennis. Here,

look. Hover.

Look, hover. See, it's built into the mayor. Super nice. So, we can just

mayor. Super nice. So, we can just um grab a secondary color and then just here we are in the hover right now. So, we could just add another

right now. So, we could just add another color which is primary dark.

And then oh lol hashtag this here another color here. See it's very nice very simple.

here. See it's very nice very simple.

You can even do more here. You can do like uh here transform.

I think I I tested it in the last stream. It's pretty nice.

stream. It's pretty nice.

Oh, you have to click outside of this window. That's a bit annoying here.

window. That's a bit annoying here.

That's of course a little bit too intense but the the steps are a little bit big here.

But you could do something like this.

Oh, you have to click outside.

See, that's pretty cool.

Or for example, add a background here. Box shadow. So let's

background here. Box shadow. So let's

say that you grab here this Let's just Yeah, maybe we can do it.

Blur here. Let's like 40.

Hey, go away. Yeah. Look.

Way too much. Unlink it. Yeah. Let's

just decrease the opacity.

See?

Wait. I want to put it at the bottom a little bit more.

like 10 pixels.

That's some pretty cool stuff, right?

Humans recognition. What?

What are you talking about? Good. Nice

to know. Yeah, right. Pretty cool stuff with the with the hover animations. This

is This is good. Okay. So, let's search for background section divider backdrop filters.

No, no, this is a blur.

What do we have here? No, that's not it.

Transitions. No, that's for animations.

No.

Move, skill, rotate. No,

I don't think we have it. Border maybe.

No, it's not like that.

Um, I don't see a background overlay and I also don't see the divider.

Okay, that's a problem.

So, let's go to Figma then and let's try to make an export of this, but it's a little bit big. So, let me try to grab these. Oh. H. Wait, let me

try to Yeah, like this. Can I do this?

Yes.

Good job. Thank you.

So, we're just going to make this little box right here. We're going to export that as an SVG. Let's see if that works

as well. I think so.

as well. I think so.

Uh, I made a folder here. Live here.

This one. So, hero divide. Oh, perfect.

The name is already perfect. Save.

So now, oh, we should actually add that as the top for the next section.

That's easier than trying to put it.

Yeah, that's easier. So, this is the light background. So, let's make this

light background. So, let's make this section. And then this images, we're

section. And then this images, we're going to just put it in this section at the top. Yeah. So, we need two boxes. So

the top. Yeah. So, we need two boxes. So

it will be a vertical a vertical section with two horizontals.

Uh let's just duplicate this whole thing.

Let's first go to the background light two which of course will become will be removed because we're

going to do background light. Oh, background light one,

light. Oh, background light one, which will then have the background of light one,

right? Yeah,

right? Yeah, we're doing it correctly.

Uh, overlay. Oh, here's the overlay. Oh.

Oh, so we could have done it or not. No,

it's it's actually still better to put it here. Okay. Image gradient color. I

it here. Okay. Image gradient color. I

really hope we can do SVG here, but I don't know if we're going to get a crash now.

No. No.

That uh V4 doesn't like SVG uploads.

That's not good. So, that means that we should go outside of here. Let me

quickly check the comments.

Heading to Holland next week for about a week. What's your top What's your top

week. What's your top What's your top three things must see? Oh, you're going to the Netherlands. Very nice. Where are

you going in the Netherlands?

Easy. This from the airport just outside of Amsterdam, but travel no issue. Yeah,

I mean it's close. Everything is closed.

Yeah. What can you see? What can you see in the Netherlands?

What do you like? Do you like, you know, do you like art? We have beautiful museums in Amsterdam. Like really,

really nice one. The best one, I think, is the Reichkes Museum. It's incredible.

Here you type it like this. Reichkes

Museum. This is a beautiful museum.

Okay, let's go to the back ends to turn on SVG uploads and otherwise we're going to use PNG. I want to make

this work.

Uh yeah, here see it was still off.

So now if we reload the editor, it should work.

Webp you cannot export WEBP and Figma.

That's a problem.

coffee shop. Yeah, if you like I don't know if I can say this on YouTube, but if you like coffee Amsterdam coffee shops, you can go there.

I don't know what's allowed to talk about. This is an international

about. This is an international platform. Okay, even though I'm Dutch,

platform. Okay, even though I'm Dutch, so I'm going to not say anything. Um,

welcome to editor V4. Why is that still showing up? Okay, let's now try to do a

showing up? Okay, let's now try to do a upload again. Hero divider.

upload again. Hero divider.

Yeah. Okay, now it works.

Here, look. Amazing.

Repeats. No

repeats. Hey,

that already works. Position

top center or position. Let's test this.

bottom. Yeah. Okay, this works.

So, you could also make it in white and then put it at the bottom for the other one, right? Could you do that?

right? Could you do that?

Yeah, but this is easier.

Uh, top center. Okay, this works great.

Oh I'm adding it to the to this class. Oh my god. Reno,

class. Oh my god. Reno,

this is this is a little bit hard in elemental. You have to really like

elemental. You have to really like get used to this way of working.

You're probably going to misclick a lot.

Size cover.

Oh here.

Contain cover.

Auto.

Auto. What is auto? Will it kill automatically? I hope so. Let's test it.

automatically? I hope so. Let's test it.

I'm going to publish.

See the changes.

Oh, no. Auto is absolutely not good. Uh,

where am I? Here.

Uh, the hero divider should probably contain Wait, let's zoom out here. Yeah.

probably contain then.

Yeah. See, now it kills.

Beautiful.

Can we also do clamps already? By the

way, H1, what about the size? Can we do like Yeah, we can do here. Hey.

Um, let's see if we can grab some of my codes.

Why is it not loading?

So hello Okay, let's try to copy this.

Um, looks like it works.

Let's refresh. Let's see if it works.

Yeah.

Right. Hey, look.

51 pixels.

Yeah. 64. Clamping also works now.

Great.

Um, why don't you use shape dividers?

Yeah, Stan, you just joined. stays on.

You just joined because there is no shape divider in V4.

It doesn't exist. I I checked it.

Why do you use an image shape divider native? Yeah, but it's it it's not here.

native? Yeah, but it's it it's not here.

It's not here.

I'll make a separate diff for that.

What? Why? Why would you make an extra extra diff? It doesn't matter if it

extra diff? It doesn't matter if it interferes. We can just add a little bit

interferes. We can just add a little bit more padding. Not a problem.

more padding. Not a problem.

I don't want to add an extra padding for nothing.

Wait, where's the where's that padding coming from?

That spacing. I mean, oh, here.

Here. We just do it like this.

Just add it a little bit more.

Wait, can we also change the the color of the SVG?

No.

No.

Okay.

Clamps always did work. Did this? No, it

it didn't work. It didn't work. They

just added it.

It was not part of V4.

It was uh it's it's just rolled out because I tried it it like two streams ago and it didn't work. Elementor, this

is why. Yeah. No, Muhammad, stop.

Seriously, stop. This is We're not going to get there, Mohammed. We're not going to talk about that. That's incredibly

um wrong for you to to think that everybody who works in a company agrees with their own government, first of all.

And um that's a really weird mindset because if you if if that's how you think then then

yeah then you should um you should every time that that a company has a war with with somebody

else you should you should stop using all of the products that come from that country. Come on, man. That's That's

country. Come on, man. That's That's

just It's just weird.

Um because of scaling.

Okay.

All right. Yeah. Keeps politics out of Yes, that's that's what I just wanted to say. I just wanted to push back a little

say. I just wanted to push back a little bit. So, Muhammad, don't start a

bit. So, Muhammad, don't start a discussion. We're not going to get into

discussion. We're not going to get into politics. I said what I said. I think

politics. I said what I said. I think

it's the wrong mindset that you have.

So, please consider what I said. That's

all.

Yeah. We're not going to we're not going to go there. Okay. So, um I mean if if if even my streams are going to go political, then where do we even have

peace? Come on, man.

peace? Come on, man.

What are you talking about? All my pre Yeah, I'm talking about V4. Like, of

course, like I've been teaching clamps for years uh in Elementor.

Like, I literally here, look, I literally have a clamp instructions on the Living with Pixels website. I've had

this for like two years.

This is This is We're talking about V4 here.

Um I see you use SVG for Divi. Yes,

exactly. Because there's no divider uh there's no divider in here option.

So, hello. That was not good English.

There's no divider option yet in Elementor. I'm seeing this clipping one,

Elementor. I'm seeing this clipping one, but I have to test it more. I don't know what what it is actually.

Yeah. No, we're not gonna we're not going to do that right now. I do think it's an um Okay, let's let's Can we do

that? No. No. No. Okay. Um let's set up

that? No. No. No. Okay. Um let's set up some stuff. Let's go to Figma. Let's

some stuff. Let's go to Figma. Let's

see.

Okay. I asked if they disabled it in V4.

You made it sound like it was No, no, no. That's not what I meant. That's not

no. That's not what I meant. That's not

what I meant. Um

I meant um um in V4. Yeah,

thank you, Dennis. I thought it was a vectorzed image. Thought it wasn't a ve

vectorzed image. Thought it wasn't a ve Yeah. Yeah, it's a vectorzed image. So,

Yeah. Yeah, it's a vectorzed image. So,

it's super small. It doesn't slow down your website. Okay, so we need uh yeah,

your website. Okay, so we need uh yeah, two verticals basically. Let's already start copying

basically. Let's already start copying some text.

Let's also try absolute positioning. You

know what? Let's just do this one here.

This is a this is a problematic thing probably. Oh, and also Lucy. We're going

probably. Oh, and also Lucy. We're going

to do Lucy as well. So, let's put this outside.

And if you export it like this, you're going to have a problem because it's a it's um it's a stroke look.

So you first have to outline the stroke and then it's three separate vector strokes. So then you should flatten it

strokes. So then you should flatten it and then it's one vector.

That's what you should do before you export it. So now I have this

export it. So now I have this working one. So that's going to be the

working one. So that's going to be the uh heat the heat. SVG.

Okay. And then also Lucy.

Let's see. You know what? Well, I can just do it here. No, no, no. I'm going

to do it outside because then text I have to outline the text. So here as well, if you make if you just turn this into an SVG, then you're going to get a problem

because it's still a text. So you also need to outline this one. And then let's grab all of this and also flatten it. So

it's whole one vector.

SVG. There we go. Uh Lucy

arrow. SVG. Okay.

And then of course this one we want to animate.

So yeah.

Oh, I see that he has uh Okay, Muhammad is taking it positively.

First of all, thanks for the response.

All right.

All right, Muhammad. Good that you uh have considered my uh my point. False

sluggish for some reason. currently

sticking with Gutterberg but it's a bit bit yeah I have been playing around with Gutenberg Mohammed and um and uh it's interesting I'm working on a

video on my opinion about it it's interesting there's a lot of things that are possible for free so yeah and the L said yeah this V4 is is yeah

exactly what what key frame saying like it's it's is it's meant to solve all of these issues are the elements that are very slow For example, icon list widget clients website become very slow when they're

added. Yeah, very good point, Smiley.

added. Yeah, very good point, Smiley.

Uh, Smiley Jack.

Um, yeah, people say work on the caching. Is

it caching is not the problem? Yeah,

caching is not the problem. It can be a solution though. Um, but yeah, the

solution though. Um, but yeah, the that's the problem with Elementor V3 right now. the elements. It's a lot of

right now. the elements. It's a lot of code. Added extra code. So, um, yeah.

code. Added extra code. So, um, yeah.

Wait, can we export these images separately? I think there was a plugin

separately? I think there was a plugin for that.

Oh not UI Cam. I'm also working on the tutorial for that. That's why it's here.

What was that plugin? No, not like that.

Are you crazy? There was like a plugin where you could export um export images like originally

export original images. I think that was it.

PNG JPEG.

Yeah, let's try all selected layers and their children only selected layers.

Yes. Okay, let's try. No image were found. Huh?

found. Huh?

Like this then?

Yeah, now it's working. Okay, let's try images.zip.

images.zip.

Yeah, it has worked. Amazing.

So, I will show you because you guys cannot see my finder. Yeah, now it has Oh, it's huge. It's huge. But this

plugin does export the original images that you imported. So that's cool.

But these images are huge. So now let's export them.

Let's make them smaller.

And then one like this. Like one X. And

we still have some room. So we can play around with the positioning.

Yeah.

You have to accept that not everything is possible. Yeah. Exactly. Exactly.

is possible. Yeah. Exactly. Exactly.

The tricky part is you have to convince your client if you're doing pay work.

Yeah. Yeah. That's why Gutenberg is tricky right now to use because there's a lot of things which are not possible and then you have to put a lot of plugins together to make it

work and then it becomes a mess again and the whole goal the whole reason to work with Gutenberg is to reduce the mess that you have with page builders.

But the you end up with a bunch of plugins trying to work together all with different interfaces. It's it's quite of

different interfaces. It's it's quite of it's quite a mess.

What a simple dynamic product carousel took me ages to to yeah to make a clean carousel and good for free. I had oh I had to code my own but yeah yeah yeah

yeah it's the the experience is just a little bit like I don't know I don't know reappers share course and and I learned a lot now I use all tricks which

you use very nice art I'm very happy that uh you like my element pro course and next year it's going to be even better

with element pro okay so now we have these two images let's export the smaller versions of them. Let's do a JPEG. And 1x is okay

them. Let's do a JPEG. And 1x is okay because they're already 3x 500 right now, which is a little bit

bigger than the artboard. Or no. H.

Let's just do a little bit more. That's

fine.

Uh, yes, we're going to save.

Okay.

And also for these ones, this is going to be more tricky because we have these backgrounds. So now we need to use these

backgrounds. So now we need to use these layers in Elementor. So how are we going to do

in Elementor. So how are we going to do this?

You know what? I'm also going to launch that plugin. I Oh, I think I like it.

that plugin. I Oh, I think I like it.

We have to use PNG here.

Only selected layers. Export. Oh no. All

selected layers and children. Is this

going to work?

No, that's not going to work.

So, what do we have to do now?

Maybe just like this. Select all of them and then export.

Oh, come on.

It does not work.

All right. Uh oh my god, it's crashing.

Please don't crash. Okay, we're just going to do it by hand. Uh export four layers on 3x. No, that's too much. What

about one and a half PNG export? Let's

see what happens now.

Yeah perfect.

Oh, but now wait, let me guys show you what's Figma exported.

Yeah, Figma exported this.

They cut it off.

So, did I do it wrong?

Ignore overlapping layers.

Is that the trick? Uh-oh.

Oh It's going to download 19 images.

Oh lord. What's happening now?

What is happening right now?

Replace. Sure.

Oh no, now it's actually exporting with Now it's exporting with the sides. Ah,

okay. Can we just use this?

No, because I want to have an animation.

Come on. This is Element V4. We want to make something cool.

Yeah, I can just zoom in from here. You

know what? This is not a Figma video.

I can of course export them. I can

always do this, you know, just grab them like this.

Yeah, that's actually better. Let's just

do that. Wh Why Why do I make it so hard sometimes?

Export for layers. Save. Yes. Replace.

Okay.

Yeah, now we have it.

There's just one problem with this layer. That's way too big

layer. That's way too big at the bottom. So, let's export this one again.

Replace. Okay. Now, we have the Bratz.

We have the Lucy's. We have the arrow.

And now, let's just start copying some text. Oh, that's also interesting how

text. Oh, that's also interesting how we're going to do this on a on a next line break.

Okay. Now, let's go back to Elementor.

What?

Can't you just use unedited images so you can do the rest with CSS? Yes. Yes.

That what I I think I have right now. I

agree with Dennis. Use CSS gradient for the background. CSS gradient. Yeah.

the background. CSS gradient. Yeah.

Yeah. Yeah. Yeah. Yeah. We're going to do that.

There's an option for that.

Okay.

They have transparent background sky.

Yeah. Yeah. Yeah. Yeah. Yeah. Yeah.

We're going to do that. We're going to do that. Okay. So, now we need the not

do that. Okay. So, now we need the not the boxed S, we need the boxed large.

And are we also having um wait oh it's not okay. Okay okay okay. It's

just that this layer has some size on it. Yeah. Okay.

All right. Let's also copy some text from Figma.

Uh this is a body large. And then we also have a body

body large. And then we also have a body small text.

So we're going to duplicate this. And

then we're just going to put in a text.

And now inside of here, we're not going to do body large, which is 1.125 ram.

We're going to do the normal body. So

this one is going to be deleted.

And we're going to do normal body size, which is going to be one ram.

And it's going to be left align by default. Can we do that?

default. Can we do that?

We can, but it's not listening to us because we have a local center here. There we go.

here. There we go.

in this whole box. L in this case, we're going to put it on left align.

Um, oh no, I had I have to use another container now because how are we going to do this?

Uh, we need two of them. Can we do it like this? Local.

like this? Local.

Yes. But then middle. Yes. And then

inside of here, we need another box.

And actually another one.

Oh, not inside of that. But we need to duplicate this one. And then this whole layer is going to go vertical.

And then these layers are going to go in there. Can we just do it like this? Yes,

there. Can we just do it like this? Yes,

we can. This one is going to be on a column. It's a little bit messy right

column. It's a little bit messy right now. I'm fixing it, trust me. Oh, this

now. I'm fixing it, trust me. Oh, this

this this dragging stuff is kind of nice honestly.

Yeah, we get that.

Um left left.

Now our image are going to go in here.

This whole box is going to go on the top. Can we do that or are we going to

top. Can we do that or are we going to mess it up?

I think we're going to mess it up. Let's

over open over open the layers panel.

Yeah, let's just delete this stuff from here.

We need an empty one.

Um, now inside of the right box, we want to use images.

So, use the new image widget. Oh, no,

not no.

Let's drag line break with error. Sorry, we're so picky.

We're so picky.

don't want to be a know-it-all person.

Yeah, I feel that sometimes as well.

It's okay, bro. It's okay. You guys are my helpers. My best helpers, honestly.

my helpers. My best helpers, honestly.

Key key frame and Dennis, I think you guys have been the most helpful in in all the streams. So, cheers on that,

honestly.

Um image. We're going to upload some

image. We're going to upload some images. Oh, we have an upload button

images. Oh, we have an upload button now. What is that?

now. What is that?

What's the difference? Select an image.

Oh, so select goes to the media library.

And this Oh, there's a one click less.

Hey, that's good. Okay, let's upload our images.

Hey, this one goes outside.

That's interesting.

Uhoh.

Hello.

Hello. Hello.

What is happening here?

Yeah.

So now we need to use some kind of mask, right? Because these are

right? Because these are these shapes are yeah different. So we

have three 390 by 390 and then 390 by 280. So let's do two let's do 390 390.

So I hope that this works the same as in V3.

with the size and then the uh wait which one is it?

Lucy is actually first.

It's 390. 390. I think we have to put it here. 390.

here. 390.

And also the height 390. And then it's going to mess it up, of course. But then

we can do Oh, aspect ratio. It has

already has a square.

Yeah, but it doesn't matter. Of course,

we need to do object fit cover. There we

go. And then the object positioning custom here. Can we just mess around

custom here. Can we just mess around with this?

Yeah, we can. Look at that.

Lucy, go up a little bit.

Thank you, Lucy.

There you go. Lucy is doing is doing her thing. That's great.

thing. That's great.

Position. Absolute

border.

Oh, yeah. Yeah, you had the border ready. Yeah. Okay. Maybe I can also try

ready. Yeah. Okay. Maybe I can also try to use your CSS because we have the CSS now here. Huh? Where's the CM CMS? The

now here. Huh? Where's the CM CMS? The

CSS CSS C CSS.

Where the Huh?

Where is the CS S?

I think I am blind.

Okay, let's first add some borders. Uh

border radius, we're going to do 16.

Let's try to add a border ourselves.

Let's see what we can do. Oh, the color.

We don't have that color yet. That

secondary color.

Let's quickly go to Figma. Grab that

secondary color.

And let's just add that one in here. Can

we add it as a variable? Yes, we can.

secondary. Oh, it saves the color now.

That's great. Okay, save it. Border

solid. How thick is it? Probably like

fat. Like 10. And then if we do the left on zero, right? The left and the the left and the

right? The left and the the left and the top on zero.

Hey, look at that.

Let's prepare or let's compare to our Figma. Wait, I first want to have a

Figma. Wait, I first want to have a little bit of space.

Uh, one R.

Okay, let's compare to Figma.

Pretty good, right?

Hey, we just did it. We did it.

No code, no code, no CSS, just raw elementor. This is what makes me happy.

See, coconut for the win. This gives me inspiration.

Yeah, you should have coconut as well. You

know what? I'm going to refill my coconut.

That's what needs to happen here.

This is what needs to happen. We need

more coconut because coconut gives me no code powers.

Do you understand?

If you drink too much coffee, all you want to do is code.

You have too much energy. Okay? If you

have coconut, you're like, "Ah, chill.

No code.

Okay.

Element V4 will release before GT. Yeah.

Yeah, maybe. Probably.

That's a That's a funny one. Okay. So,

we did this, but hey, we're not we're not done yet. Come on. We need We need some animation because this is boring.

But we don't have components yet. So,

what do we what can we do?

Oh, we should use a class. Let's try to use a class. Can we turn this into a class? Reo, can we?

class? Reo, can we?

No. But then the sizes. Oh no. Oh no.

Let's just do it. Convert it to a class.

We're going to call this image.

Fat.

Yeah, it's pretty fat image. Come on.

Let's be honest.

Not me on my first coffee coding while you drag and drop.

for coffee man.

Do they make alcoholic coconut drink there?

Yeah, alcohol is allowed here in Bali, you know. So, um yeah, they do. They But

you know. So, um yeah, they do. They But

yeah, if you order a coconut, honestly, in Bali, it's just like you order a coconut. You don't want to like, you

coconut. You don't want to like, you know, mess around with alcohol, you know, like you order a cocktail here or a coconut. And a

coconut you just get original coconut.

Okay. You get a huge one. It only costs like well often these days I think it cost like €2.

It's cheap here. It's very cheap.

It's a lot of It's a It's a big drink, but you get fresh.

I thought you were better than that. No,

I'm not better than that.

I'm trying to reduce my my coffee. Max

should be three.

Actually, it depends on your weight. I

learned. Yeah. Yeah. Yeah. Yeah. Yeah.

Okay. So, let's do that. Add a little bit more text. And then, oh, I'm already distracted. What we were doing is we're

distracted. What we were doing is we're turning this into a class image fat. So,

that in here, we can also do image fat.

Yeah, but now we have this problem, right? So, what we should have done is

right? So, what we should have done is the positioning. Now, we can just do it

the positioning. Now, we can just do it on a local level or wait h I'm just checking in my Figma. What do

we have more? No, this is another aspect ratio. And here's also another aspect

ratio. And here's also another aspect ratio. So, what I want to do is I just

ratio. So, what I want to do is I just want to make sure that I save this as a class so that we can just reuse it everywhere. And then the height and the

everywhere. And then the height and the width are just going to be done uh per per card basically. Okay. So I

made a mistake. We're going to go in image fat. No, it's not image fat. Is

image fat. No, it's not image fat. Is

then going to be border fat.

Border fat. Yellow.

Okay.

Yeah. I don't know the names. This is I think this name is fine. Oh Sorry.

I was in element here. Border. I just

changed the name border fat yellow.

Yeah, it's fine for now. Uh, we're just going to delete the width and the height. So, let's cut that off.

height. So, let's cut that off.

And then let's just go into the local.

And then let's put it over here. There

we go. And then the object fit should be cover. I was already on cover. Oh, okay.

cover. I was already on cover. Oh, okay.

Uhoh.

No cover. Yes.

Object position. It looks fine here. So,

let's do it here. We're just going to do uh Oh, here also local 390. And then

290.

And then here, object fit cover.

Object positioning center center. Look

at that.

Is that the same as our Figma? Yeah. I

mean, pretty close. We see two people here.

Oh, no. Actually, she's out of the frame. No. Okay. Let's So, let's mess

frame. No. Okay. Let's So, let's mess this up.

Let's mess this up for good.

Oh, wait. There was still in the fat border.

There was still some values in there.

What is default? Center. Center.

Oh, Lucy. Yeah, Lucy still looks fine.

Uh no also cover. Yeah, cover is fine, right? And

cover. Yeah, cover is fine, right? And

then in here we should put cover custom and then put the I or Oh, no, the X.

There you go. Oh no, now the the size is messed up.

How are we going to do this? Can we do skill?

Uhoh.

Open my laptop to do some work. Now I'm

have That's the thing with live streams that it's addicting. Muhammad, honestly,

respect for you because I was a little bit annoyed and I think you saw it in the way I responded. So, respect for you that you are uh that you're still here.

a you're not mad because many people get defensive especially about politics but yeah I just want to keep the the the vibes positive but I wanted to respond I

I don't think it's fair you know so I'm happy that you're still here uh I'm making a custom site for client who doesn't use it's like self-contained WordPress but WordPress or PHP but build

a page builder keen to see what is yes of course of course share a link two hours in the stream, but on a second monitor. Oh, you're also working. Yeah,

monitor. Oh, you're also working. Yeah,

that's cool. That's all what that's what this is about. We're just working and vibing. Okay, but Okay, listen, guys. I

vibing. Okay, but Okay, listen, guys. I

have a problem.

Or wait, maybe I can do like center left.

Center right? No, center left.

Why is she so Why is she making such a problem?

Why is she so dramatic? Oh, she's

literally not in the photo. Here, look.

So, I am doing my best.

I did the best I can.

Okay. So, now we're going to do absolute positioning because we're going to add some things.

We're going to do this one, this one, and of course, this one.

This one maybe I want to do with margin.

Let's try negative margin over here.

Also the base values. We still don't have base values.

Still no base values.

Editing window. There's still so many things missing guys from uh Elementor.

It's not production ready.

We know has left the center. Yeah. Okay.

Uh uh uh uh uh uh uh I think I'm just going to push it with spacing.

Uh what if we do minus 80?

Oh, no, no, no, no. Unlink it first.

minus 5R.

That did not work. Minus. Yes,

there we go. See,

we don't need absolute positioning right here.

And the photo should be just under her chest.

And then over here min -4 R right

or wait on the left maybe - 4 R no 5 R then oh

here just like this.

Yeah this is exactly like our Figma. Oh

I love this here. Look at that. Look at

the details. Come on. Look at this breath and the way it's over her body.

Her arm showing just a little bit.

Yeah. And now look at Elementor.

Perfect. Okay. A little bit up. Little

bit up.

Okay. It's 10.5. Look at that.

Perfection. I just did it. Let's also

test the responsiveness.

And also the gap is bigger on Figma.

Actually, the gap between these sections is Oh, auto. Oh,

where's my grit? Oh, this is six. So,

there should be How much is that?

Um, how much is that? How much is that?

Like five R. Let's try five R.

Um, so we're going to put five R here in the middle on the right spacing padding.

Unlink this.

What the hell? Why is it not unlinking?

Uh, here. 5R. No, come on. I said unlink here. There you go.

here. There you go.

Okay, now we're going to do absolute positioning.

Um, so that means we're going to add another image in here at the top. Oh no. Oh my goodness. What

did I do?

Here. Let's just drag it easier.

Yes. Uh oh.

What the hell?

Okay, let's first select the image.

Lucy Arrow.

Oh, we have new people in the chat. We

have Mick from Sydney. Nash is asking, "How do you find your class?" Yeah,

share your tips, guys. Share your tips.

Share your tips. Oh, it's somewhere in the m Wait, where is my image?

Oh, it needs to be in this flex box here. This is the Lucy arrow.

And that one has to be on absolutes.

Where's the absolute?

Oh, here. Positioning probably. Yeah,

here. Absolute. There you go.

So, now we can just play around with this for our Oh, here. like this. There we

go. Easy, easy.

Uh oh.

One R.

Oh wait.

How dust There we go. 5.5.

Look at that. Think I just did it.

Okay, I think I did it. And now we're also going to do that here. And we Yeah.

How are we going to do this one? Guys, I

need your help with this one. How am I going to break after the Hey there?

How are we going to do that without messing up responsive?

We can of course always put a put a BR.

Oh actually now that padding is a bit too much.

Oh, this corner should be wider somehow.

Oh, it's an H1. Hey, that's why this should be an H2.

Should be smaller.

It's 48.

Okay, I hope you guys have an answer. In

the meantime, uh, this one should not be in H1.

Remove. It should be in H2.

size. Um, no, not size. Topography

clamp. There you go. Now it works. Okay.

And then we're also going to put in this same image here at the top,

which we will select from the SVG.

And then we're going to do the same stuff. Positioning absolute.

stuff. Positioning absolute.

Then it will be in this corner. That's

fine. Yeah. How are we going to do this guys with the with the be with the break living on pixels is mean that everything is pixel perfectly as I see here.

Think you should limit messages in the chat. Some people are overusing it.

chat. Some people are overusing it.

That's fine. It's not too busy.

I think you have to adjust the font size. Yeah. Yeah. Okay. I just did that.

size. Yeah. Yeah. Okay. I just did that.

Will you save this video? Yes. It will

be automatically a real be a replay.

Veno.

Um, but I don't know how to do this without a break. It's so annoying because I

a break. It's so annoying because I don't like it. Uh oh. Look at that.

Wait, that's a problem.

Oh my goodness.

Oh. Whoa. Responsive is a mess.

How weird.

Wait, how is this box actually a vertical one?

[Music] Crazy.

Perhaps with white space.

That's crazy. Responsive one. Oh my

goodness. Why would you buy responsive so hard? I mean, this is why I did the

so hard? I mean, this is why I did the stream guys.

I wanted to test what Elementor can do.

Okay, let's try to push this text a little bit.

Spacing. We're going to use margin. No,

no, no, no, no. But we're going to we're going to do it from here. Top. Let's do

left.

Let's try two R.

Yeah, it should be above the N.

And then here one R two 2.25.

25 and then this one should be 17 two. That looks good. Okay. I really

two. That looks good. Okay. I really

hope this is responsive but I already saw it's not it's not responsive just because you have set it to absolutely. Yeah. But come on Roland

absolutely. Yeah. But come on Roland Rolanda. Thank you by the way. I haven't

Rolanda. Thank you by the way. I haven't

seen you in the chat before. But does

that mean that the whole section now is messed up?

because we have used absolute positioning. Is that why that will make

positioning. Is that why that will make me very unhappy um columns row uh for R

probably more don't make me very unhappy.

Let's test it.

But also here, see, it's just going outside of the the frame.

Why is element doing that?

What the hell?

But this text is wrapping. But oh,

because we have set up a fixed width here. We set up a here. See, it's 500

here. We set up a here. See, it's 500 pixels. It stays. Oh, interesting. It

pixels. It stays. Oh, interesting. It

stays 500 pixels. So, so where's the style origin here? Local.

That means that is then better to instead of using pixels here, we can of course try percentages.

But like did I also do that over here?

No. Okay, let's try now.

Yeah, now it's working.

Oh, so does that mean that because this one has a fixed width?

No, it doesn't.

Why does this stay so wide?

Great to see a solution live.

Yeah, thank you. Uh I was just like uh messing around with it.

Do you use a mouse or trackpad? Both. I

use both.

You guys are saying that because I'm using absolute positioning, it's it's becoming a mess.

Is that true?

Me quickly check my WhatsApp.

Okay.

Um, is that true? Should I believe you or no? Let's try to duplicate this whole

or no? Let's try to duplicate this whole section and then delete the everything that has absolute positioning because this one just has a

margin because I want to see if you guys are No, see there's nothing in this whole section

right now.

Also, not this background, right?

Backgrounds. Yeah.

See, I use a max wave of 50%. Not the base.

Use a max width of 500 pixel instead.

Not the base.

What? What? What is the B? What is the base? Wait, it just doesn't make any

base? Wait, it just doesn't make any sense. What? Okay, let me check my

sense. What? Okay, let me check my containers before I go crazy here. This

one is a row. Does it not wrap automatically?

Well, it shouldn't wrap right now.

It should only wrap. Oh, maybe here it should wrap.

Oh, wait. I understand. I already

understand. It's because of the box L.

The box L is not responsive.

Yeah. Yeah, Paul was right.

Paul, thank you.

It's probably this one. Let's try

here. This This is the problem. This is

the funny guy.

But does that mean that we can I just had a beautiful solution with responsiveness.

I was hoping Wait, let me try something. uh local.

Oh, let's see. Let's see. So, let's do a dark background.

So, how does this behave? I just want to check how it behaves.

Where did I Where did I have that?

Wait, was it this website? I just just quickly want to check.

Use whiff auto and Maxwave that will fix. Oh, Maxwave.

fix. Oh, Maxwave.

That looks complicated. Very similar to Web Flow, but it's tedious. It's

definitely ted tedious. Oh, Maxwave

would fix it. Okay. Wait, let me quickly check what I had here. Is this the page that I had? Yeah. Okay. Here I had a a better

here. I had a full solution already.

here. I had a full solution already.

Look. Look at these three here. One, two, three. It's perfect.

here. One, two, three. It's perfect.

This is what I figured out with only like super minimal CSS. But now I'm like, what did I use? Maybe I also use Mac Maxwave here.

Oh my shoulders. Wait, I want to stand up.

Sitting for too long.

See you later.

Okay.

Okay, a little stretch.

What did I use here? Here. Normal box

m with weird.

And then here on the background, what did I use? section M spacing 4% right and left but here it it does grow that's weird

huh look at this here 4% left and right I now have 5% on the background section right and then this inner box here the only

setting it has is a background color and 1260 on this one here just 11 20. Why does

not work? It's weird.

That's literally how I set it up right here. Right here. Box L.

here. Right here. Box L.

This whole background background. Actually, the background

background. Actually, the background should be called section.

But the section here also has 5% left and right.

Wait, let's try to add a background here.

Let's see if this works with this one.

Huh?

Now, am I the crazy one here?

flex row.

Maybe it doesn't work with flex.

No, it does work with flex. I have no idea what's going on here.

What are you trying to achieve for responsiveness? You typically just

responsiveness? You typically just change the flex direction of smaller bra. Yes, of course. But but the problem

bra. Yes, of course. But but the problem is okay, I will show you here. This box

is box L.

It doesn't matter whether it's flags or block or whatever. It has a Oh, now I'm messing up everything. Wait, this.

Sorry. Oh my god. Uh, this has to be flex and then box L like this. Okay, so this is a box.

The box has um Yeah, let me close everything.

It has a width of 1120. Yeah, somebody

said max width, right? Let's just test that. But I It's weird because on the

that. But I It's weird because on the other on the other website I had it I had it working.

Now it works.

Now it works. You see?

Oh, also the the break doesn't work.

Look at that. That's funny.

It doesn't work. But uh here now I have it. See, now the 5% is perfect. Now

it. See, now the 5% is perfect. Now

let's also test here. See

my image is is on on tablet. Oh no, it is actually cropping. Just of course need to adjust this layout. But it is responsive now.

So max width was the thing.

Huh?

Maybe try setting minimum width.

You said it on a page where responsiveness work, but not here. Yeah,

try with a closing bracket. Oh yeah,

with a slash. Okay. Okay.

No, break doesn't work.

I I think because it's not a the original text field was more of like an HTML field or something

or like an anx editor field more more so H why don't you use grid I don't think grid is available

and for for one row layouts flex is easier I feel like only multiple row layouts. I think uh I feel like grid is better. But this is

weird. It doesn't work on the front end.

weird. It doesn't work on the front end.

Only in the back end. I'm going to write that down for element as well. So BR

does only work in editor, not on front end.

Yeah, that's weird, huh?

Yeah. I mean, multiple row layouts, the grid is better for that. But there's no grid right now. I can show you here.

Oh, we have more options now. Inline

flex.

But, uh, okay. So now our box L is the size is max width.

What I have on the other website? I'm so

confused.

Minimum width is 30.

That's the only difference that there's a minimum width. I don't know. I have to figure that out later. For now, we have a problem. We cannot do a break here,

a problem. We cannot do a break here, which is fine.

Okay, let's uh mess around with this a little bit. Yeah, how are we going to

little bit. Yeah, how are we going to even do this? I think this layout is very hard. So, let's say that we want to

very hard. So, let's say that we want to do like a wrap, right? Then we should be able to go in here and then go to local and then here we go wrapping and then

we're going to change the order. Can we

do that already?

probably have to go here and then last.

There you go.

That's pretty good layout.

And then now we of course have to change the local sizes to something a lot smaller. For example,

250.

And then also for this one, let's do even 250 by uh 170.

And then of course these values minus three uh minus

- 5. Oh. Uh oh.

- 5. Oh. Uh oh.

Oh, I'm having to put it on left.

Yes.

Sometimes that's a little bit confusing.

It is cool. We can move outside of the frame a little bit. Oh, you know what? I

also forgot is to add animation. Yeah,

sometimes I so I'm so lost or lost distracted. I'm easily distracted here.

distracted. I'm easily distracted here.

Body fat. I wanted to do like a hover.

And then I wanted to do like um the border here. This one.

Where's my border?

Here.

Oh, it's just gone. Mixed. Mixed.

Why mixed?

Oh, yeah. Yeah. Okay. the 10 pixels. We

have it 10 pixels on the right and the bottom.

So now we can go to hover. I think

that's cool.

Oh, it's gone then. Okay, whatever. And

then we're going to do um here 10. 10. No,

10.

Or actually, let's do like three. Then

this one. Zero.

And then for the color, we're going to do also secondary.

Oh, that's Oh, it's going to grow like this. That's not what I wanted.

like this. That's not what I wanted.

That's not what I wanted at all.

I wanted to be the I wanted the the the border to to go inside.

Maybe we should like do minus then.

Where is it? Or am I crazy? No, that

doesn't work. Huh?

Element script HTML tech in the heading.

Yeah, I tried the the the the break, but it doesn't do.

Select the display block. Oh, we need to change that somehow. Okay. I read I want set content with from element sites things like for desktop 60% tablet 80%.

Well, yeah, you can you can do that. You can

do 60% on a on a desktop, but then it's very hard to get your design right if you use percentages on desktop.

Pressing shift enter. Yeah, I I did that Paul.

But uh that doesn't work because it's already uh Wait, I will show you. I'm uh I just want to make this one work.

Okay. Can we do something funny?

And can we do then uh here if we do transition? Oh. Oh, here the transition

transition? Oh. Oh, here the transition can only be on normal here. 200.

here. 200.

Look at that.

That's pretty fun.

Over here, we just put it on zero. That's

That's funny because then you cannot grab it.

I don't know. I don't know. No, the

color is is it just should just be another Wait, wait, wait, wait. Uh here.

It should just be like this and then a darker secondary one which I may have on Figma. Do I have it?

Figma. Do I have it?

Yeah, I do have it.

Let's just add another color here.

And let's add that color.

Secondary dark.

Secondary dark two.

Yeah.

Yeah.

It's fun. It's fun.

Okay, let's try. Uh you guys said shift enter. So let's do that.

enter. So let's do that.

Yeah. See it doesn't work. I mean maybe in the in the front end. Let's try.

But I don't think so.

No.

So the only option we have is just to duplicate and then just delete the spacing. Wait.

Yeah. Or we can put it in an extra container or just some negative margin and then just like wait the spacing in

here is one ram. So then this one should go up one ram and in the negative direction. So one

and minus one R not on all the sides. Elementor.

Thank you.

There you go. Now we got it. But now

it's always break, which is fine. Yeah. Uh oh.

Uh like this.

Yeah, we have to put it somewhere else.

Huh? There's no other option.

Also here absolute 1.5.

I don't know about this guys. This is

kind of hard to get it perfect on all the devices if you're working with this kind of Let's see the responsiveness now.

Whitespace rap perhaps.

I don't know.

I already thanked you once for getting me into web development. I just wanted to say you're one of the best designers I've ever seen. A thank you, Rolando.

That's really nice to hear. Like, uh,

I'm doing my best.

Um, set the right container with images to relative.

You have to click absolute again to show them. Yeah. Yeah. Okay. I just did that.

them. Yeah. Yeah. Okay. I just did that.

So I think it now it's correct.

This one looks fine. This one looks fine. Okay.

fine. Okay.

I'm very curious to see what happens now. Let's test it. This is not easy.

now. Let's test it. This is not easy.

I'm happy that we got some challenges today already. Okay, let's let's start. I'm a

already. Okay, let's let's start. I'm a

little bit nervous, but we'll see. Oh,

the front end also.

Yeah, this works. That's a little nice interaction. The Lucy

interaction. The Lucy here, this arrow stays in its place. You

see it stays above above her head.

Look at that.

Oh, interesting. Look at that. Oh,

okay. So, this is interesting. We I

don't know if you saw it, but this text has a clamp and therefore before it hits the mobile or the tablet

breaking point, it already starts scaling down and so the heat is not over

the the N anymore. You see that?

So that's in this situation very specific situation uh you should not have clamp.

Yeah. Here you see the clamp messes it it up. But hey it does stay in place.

it up. But hey it does stay in place.

Yeah.

Pretty good. Pretty good.

Yeah.

Yeah. Yeah. It's just the clamp that messes it messes up the positioning, but you can make it perfect with absolute positioning, which is great. We

did it.

Is that hover trigger a Lucy image on purpose? Hover trigger. Yeah. Yeah, we

purpose? Hover trigger. Yeah. Yeah, we

just made that.

Or do you mean something else? Or were

were you were you somewhere else in the last half hour? Were you cheating? Yeah,

you've been cheating. I know you you've not been you've not been watching because I did create that. Yeah. Yeah.

Yeah. Yeah. Yeah.

Oh, they both have it.

Had a customer. See? See? He's cheating.

He's cheating.

Yeah. A customer call. I mean, what's more important, right? I mean, seeing me me struggle with with a border

or a customer. Come on. It's the border.

The I mean, duh.

Is this still an alpha? Yes, it's

absolutely not usable. I mean, kind of.

We're getting somewhere. Okay, let's do some stuff. Let's do some stuff. Reena,

some stuff. Let's do some stuff. Reena,

why you always Why you always talk talk talk so much? We're going to do this one. We're going to do this one.

one. We're going to do this one.

Rotation. We're going to use the same class and we're going to have a background layer. Yeah. Color here.

background layer. Yeah. Color here.

Light three.

Do we already have light three? I think

we have added that one. Now, what is this here? This is a purple one. Okay.

this here? This is a purple one. Okay.

That's just a random color. So, we're

going to add this. Add this. How wide

are these boxes? 250 width, 290 in height. Let's get started.

height. Let's get started.

Let's get started. We're going to add some boxes. Inside of boxes inside of

some boxes. Inside of boxes inside of boxes.

Actually, I don't think we need to have this as a flex. We can just have a block, I guess.

Um, okay. The background color. Not on

this one. There should not be a background color.

No. No. Uh-oh.

On the local.

Go away. Thank you.

No. Nothing here. Nothing. This one

should have a background of dark three or light three.

Um, and then they we should have a brother.

And that brother, because I still have it in my clipboard, let's just put it in here. There we go. We have a pink one.

here. There we go. We have a pink one.

And an orange one.

Uh, this one should of course be a flex on a row.

Let's make uh two duplicates.

Oh, come on. element.

This is always so annoying. They They

never fixed this. I'm disappointed,

honestly. Look at it. Look at that. Come

on.

Now I have to open the layers panel again. My life is so hard.

again. My life is so hard.

Okay.

Um, sorry. I was just joking of course but

sorry. I was just joking of course but uh uh I can you replay your struggles as many times. Okay. Okay. Good point.

many times. Okay. Okay. Good point.

That's a good comeback. My customers

won't be happy if I recorded them and replayed them.

Now you mean you never know. You never

know.

I meant CH not FR. What?

Although I'm designing my own receptionist AI screen to my calls in future. I'll have more time to view your

future. I'll have more time to view your struggles. Okay.

struggles. Okay.

Uh we're gonna add uh what are we gonna add? We have

add? We have a breath. Yeah, just a breath. And then

a breath. Yeah, just a breath. And then

the class and then the rotation. What is

the rotation? It's only two degrees.

Weird.

So, let's do a background overlay with an image. Select the image. We're going

an image. Select the image. We're going

to drop some bread in there.

It's this one.

Yes, this wasn't PNG.

So, now we have to have to mess with the scaling.

Um, cover. No, it's bigger. It's bigger than

cover. No, it's bigger. It's bigger than the cover.

Yeah, it's bigger than the cover.

And I want to have some scaling. So,

we're going to have some fun. Contain

custom.

Oh, this is a bit tricky. What are we going to do here? We can of course use use pixels, but what if we use percentages? What if

I use 80%.

Or no, 120%. Oh yeah,

120%.

Oh, that's going to distort our image.

Or can we fix that later?

120%.

No, because we're already on custom. We

cannot fix that. Okay, that's So, we have to do Yeah, we have to use our eyes now. Yeah, this is not perfect.

eyes now. Yeah, this is not perfect.

Normally, if it would be for a real client, I would I would make calculations, but also the positioning. Oh, wait. We

can do that here. Custom

center.

I know. Bottom center.

Bottom. No, top center.

Yeah. And now we're going to add some height to this container. Container.

Let's add some height at the top. Unlink

this one.

That's really annoying. You first have to put in a value in order to unlink it.

Uhoh.

Why does this happen?

You're drag and dropping issues where the boxes move. Try to click on an empty container which should open your widget menu. What? Try and click on an empty

menu. What? Try and click on an empty container which should open your widget menu.

Oh, you mean with the boxes the empty container? Yes. And open your widget

container? Yes. And open your widget menu. Yes. Then sorry to click a widget

menu. Yes. Then sorry to click a widget to edit it. Yeah, I know. But what I try I I know that. But what I tried is to just here I just tried to move this

container to over here for example at the end, but that didn't work.

Um repeat no repeat. Okay.

Center center contain and then it says cover custom height.

Yeah. But contain is too small. I want

it to be bigger.

Cover. Oh, cover is kind of fine. It's a

little bit too small, but H.

And then the positioning, I want it to be lower.

So, what if we do 50%. Yeah, that will be the middle, right? And then we can just mess around with pixels here or RAM.

Oh, and then of course, no repeats.

Why is it not a PNG?

What the hell?

Did I export it wrong? Oh my goodness. I

exported it with backgrounds. Reno,

why you do that?

Oh my goodness. So stupid.

I exported it with background. So

stupid.

Why am I so stupid sometimes?

It's still exporting a bit background.

Wait, ignore overlapping layers.

Oh, now okay. I still had that checkbox on. That's why it happened. Okay. Okay.

on. That's why it happened. Okay. Okay.

And now we're going to have also another problem because Elementor or WordPress I think doesn't like it if you select upload the image with the same name.

Oh no.

I am. Wait, I still It's still not working.

Let me export one more time.

Oh, this one. Okay.

And now it should be a PNG. Yeah. Okay.

Okay.

Element can remove back. Oh, yeah.

You're right.

Yeah, I know. Of course.

Of course. Uh, wait. And our design.

That's pretty good.

Quarter fat. There you go.

And then also in the hover, can we do like some kind of hover? Can we do something with that image background? Oh

we don't really see that image.

Yeah, but then you have to select the same image and the same settings. So

that's a bit annoying.

So you cannot really do like a grow.

I just want it to simply grow. Yeah.

Then you have to select the same image.

If you want to do this kind of crazy stuff.

Yeah. Yeah. That's a bit That's not what I wanted.

Yeah. So then I have to go back to the normal one to check the to check the image and the settings and I have to do all of that as well and then make

changes if I want to if I want to make changes to the image.

Okay, 53 and then two of this 53M uh three RAM.

Yeah, I like these kind of details, guys.

50 3R.

So that means that if we want to have it up, we move move it up. We have to do it like this.

Yeah, it's a bit of a weird animation. I

just wanted to test what will be possible.

Yeah, kind of funny. Okay, let's do a rotation on the local uh you have to make diff in the container

else you can't rotate. What? No, don't

say that Dennis.

I am going to ignore your comments because I don't want to believe that you're right.

But I'm a bit scared.

Yeah, Dennis. I found it.

Dennis. I found it.

I found it. It's in transform.

He has it. Darn.

See, it is possible.

Anything is possible if you if you keep dreaming. Okay, let's also try to Oh

dreaming. Okay, let's also try to Oh I'm not putting it on the class now.

Um, which I should be doing because I want it on all of them or on two of them.

Yeah, whatever. It's just a test. Um, I

just want to do quickly a hover here.

And then also not a filter, not a blur. Oh, we can also do blur. Interesting.

Okay, blur doesn't work.

Grayscale amount 100 pixels of grayscale. What the

hell is that even? No. Oh, backdrop

filter. Okay, wait. Uh, normal state to add transitions. No transform here. So,

add transitions. No transform here. So,

if I wanted to like here plus three for example.

Yeah, it's quite fun. But why is it not going into the direction that I want?

Or was it the Z that we had to change?

Oh, yeah. Yeah, it was the Z.

Okay. And then also a little scale.

So 1.05.

1.05.

And then also move it up for like five pixels.

Yeah, it is all possible. This is all possible. Is this Is this absolutely

possible. Is this Is this absolutely cool? Maybe

cool? Maybe it is kind of cool. You see the bread?

Is this unnecessary? Yes.

But is this the coolest breath animation you've ever seen? Absolutely.

Cover. Wait, what if we do like That is That is the most horrible breath animation we've ever seen.

No, that will mess it up. Unless I

No.

Yeah, at least we get some focus now on the breath, right? I wanted to zoom in a little bit. That would be even cooler.

little bit. That would be even cooler.

It's It's possible. But yeah, I think this is far enough.

Would you agree? This is cool enough.

So now let's change some images and then let's see if we can make this thing

responsive. I'm getting a bit tired.

responsive. I'm getting a bit tired.

So, we're going to I'm going to try to stop somewhere soon.

Uh image Bratz one, two save.

Okay, we're do we're going to try one more to see.

Uh Brad Oh, it doesn't work. I'm trying to export the image again, but I forgot to

turn on that thing again.

One, two. Yes, thank you.

uploads PNG.

This one is a bit harder because it has like a bottom that's a bit weird.

We need that color though.

Now, if you put two hashtag, it's also not going to work as we've seen.

So, if you then want to make it cool, you just Yeah, we just have to turn these numbers around, right? So, this one becomes a

around, right? So, this one becomes a three and then the hover becomes the minus.

Oh. Huh. Oh, rotate

minus three.

Oh, it changes the image. That's fun.

Oh, yeah. I think they should improve that that we can just have the same image.

Yeah.

Wow. It is really fast though.

Okay, let's test it on the front end.

Have a good one. He's going to go to the G. Okay. All right, Dennis. Yeah, I'm

G. Okay. All right, Dennis. Yeah, I'm

going to stop soon. So, I think you haven't missed a lot. Als,

welcome to the stream, M. We just

created some crazy bread animation.

Incredible. Incredible.

Uh here.

Oh, let's also just move this whole container up.

Wait, do we have spacing here on the top? Yeah, we do.

top? Yeah, we do.

Yeah, we just need to put it like this on zero. And actually this one should go

on zero. And actually this one should go even up a little bit with spacing

- one R. No, not on all the sides. Come

on. Y elementor

-1 R.

See?

Okay, let's do two.

All right, let's test it on the front.

Uhoh.

What the hell?

The animations do work though.

It's very quick. You see that? Very

quick.

What? That's weird. There's There's a different view on the front than on the back. Should I give these cards a

back. Should I give these cards a minimum height? Maybe

minimum height? Maybe let's do 200 or like Wait, let's do

Oh, 20. No, come on. Hey, don't do that.

20. No, come on. Hey, don't do that.

Auto 20R.

Okay, what if I give it 18R?

Does that translate on the front? Should

yeah it should be okay understood.

So we should give it some height these boxes otherwise it's not going to work.

Uh spacing.

So hello I need to stop. I'm getting tired. Uh

here size 18. Okay here.

So many layers also.

size height 18R. There we go. Oh, now my Okay, this is because of that image.

Yeah, of course that image is not great, but that's because of my my cut, you know. Okay. Okay. And then I want to do

know. Okay. Okay. And then I want to do one more thing which is the pace of the animation all properties. Okay. Let's do five.

all properties. Okay. Let's do five.

Or does it only work for the border?

Yeah, it does not work for the rest.

Huh?

Transitions. Can we do that? Yeah. What

if we would do this?

No, it's still fast.

Why is that not working?

Let's do rotation.

Oh, positioning then. No. Oh, yeah.

Transform.

No, that doesn't work. Why not?

So hello.

Oh.

Oh, I was checking the wrong one.

That's funny.

Here, it did work. I was just checking the wrong one. So, if we do like 500.

wrong one. So, if we do like 500.

Yeah, that's better.

Wow. Oh, this one's so fast.

Yeah. 500 all properties on the local.

That's nice. Yeah.

Very cool. Very cool.

Okay, let's test it now on the front end.

Now the rotation is not good anymore because it's it now goes straight. It

becomes straight which is a bit boring but it does work.

How's the responsiveness?

[Music] they just become super super small which kind of works for this design honestly.

But of course we don't want that. So

let's do that as the last thing.

Um yeah, this one's still fine. But then

here I of course want to have this one should wrap

Reverse wrap. What is that?

Reverse wrap. What is that?

Okay. Wrap. Nah. No. No. No. That's too

big. That's too big. Yeah. This one

should be uh What can we do here?

Yeah, we cannot do 50%. That will not work.

That will not work.

Uh probably.

Now see, so we have to do a trick now.

My old trick, which is 40%.

And then grow.

Here we have to put it on grow.

Uh positional spacing grow.

Yeah, this still works.

So, let's duplicate it again.

Why does that not work?

I duplicated the first two.

Okay, whatever. I'm just going to put this one as well.

Oh. Oh, key frames saying 2x2. Yeah. 100 VH.

2x2. Yeah. 100 VH.

Oh, they overlap a little even Z index.

So, they overlap a little. Yeah, I don't want them to overlap, but VH I haven't tried that one. So, let's try that over here. Maybe you're right. Uh

here. Maybe you're right. Uh

size.

Oh, maximum width. What about that? Will

that automatically let them grow?

But that should not happen because this one is on rap.

Huh?

This one is wrapping, but it's not.

Even though these two are clearly 40%.

Here 40% and 40. And then this one is max. Oh,

and 40. And then this one is max. Oh,

it's max. So, if we also put this one on 40, then it will wrap. No, also not. How

does the wrapping work?

Okay. Okay. Let's try the VH like like um key frame is saying 50 VH.

Okay. And also on the other one 50 VH.

No.

What about 40?

40. It doesn't wrap. It doesn't rep.

What the hell?

It doesn't wrap.

So my trick is the only one that But why is it only for these two then?

Oh, reverse rap is just in reverse view width. Oh.

view width. Oh.

Oh, view height. I did. Oh my god. So

stupid.

View whiff.

Stupid. So stupid. View whiff. It

doesn't work. But maybe if these first two I also put on view with few whiff.

View with.

But maybe because they're on grow.

That's why.

Yeah. No. But it's still not good.

The last one, uh, last one is 40. They're all 40 width right now, but they don't wrap for some reason.

Even though this one is clearly on wrap here, row flex row wrap. It doesn't It doesn't wrap.

See what I mean? It's weird, huh?

This is a flex box. This is not.

But doesn't matter.

Yeah, with grow it does work.

But it just weird. Is this a mistake from Elementor?

What's the column cap? Yeah, that's a good question, Tommy. That's a very good question.

Uh, yeah, nothing. I will just put it on zero now.

See, it's just default. But it it doesn't work. This should not happen.

doesn't work. This should not happen.

Look here.

40% 40% And maybe I'm thinking the old way of element, but I think that this is how flexbox work.

30. Okay, sure. Let's write 30 then. 33

actually. That's the most minimum value you should do for two column.

No.

These ones are percentage and they have grow on.

Let's unlink to grow.

Yeah, these ones don't have grow.

Okay, now everything is on 33%.

33%.

Now it's even more weird.

Oh, 33 does actually put them on one row. Oh, so maybe just 50 then. Maybe we

row. Oh, so maybe just 50 then. Maybe we

don't have to do this weird trick.

Uh-oh, not this much.

Oh, maybe we don't have to do this weird trick anymore.

Oh, look at that. It just works with the gap. Wait.

gap. Wait.

Oh, no, it doesn't.

Okay, the grow doesn't work. But the gap works. So now we could just cheat

works. So now we could just cheat basically.

We can just go in here and just do like one, two, three, four, five. Let's just do five. 45.

five. Let's just do five. 45.

This is a way to solve it.

If somebody has a better solution, let me know. But I have tried for quite some

me know. But I have tried for quite some time now.

And on mobile the order. Let's try if we can do that. So this one should be number three.

Can we do the order?

Flex size order here. What if we do three or two?

Yeah, then we should pick all of them probably. Oh, here. This one should be

probably. Oh, here. This one should be the order should be at the end.

Yeah, that works. Okay, cool.

Yeah, that's cool. I changed the order.

Yeah cool.

Let's test it.

Perfect. Absolutely beautiful.

It works.

It's cool. We have different kind of animations.

Yeah. I mean, of course, I always wanted to go further than this, but we figured out quite a bit of stuff in this live stream.

Pretty cool. I just need more live streams in order to finish this website.

But it's a good practice.

Okay, let's check my Figma. Yeah. Okay.

I'll need this these icons then.

Let's quickly copy this one. Put it in here.

Absolute positioning.

I think if we just put this image, let me just quickly try. I just want to quickly try.

I think it's working now. Yeah. Yeah.

Yeah. We got it. We got it. Uh here we got this one which is just going to flatten.

Uh oh. No, no, no. First outline the stroke.

Why is this a component? That's weird.

Doesn't have to be a component at all.

Yeah, this one should be outline the stroke. Then this whole thing should be

stroke. Then this whole thing should be flattened.

Export SVG.

Uh what is it actually? I think it's a tomato.

I have two here. So, let's try know where is it? Oh, it's here, of course. Uploads.

course. Uploads.

Let's try the tomato. I just want to see how it behaves next to a text if it's floating. I'm not going to do all the

floating. I'm not going to do all the icons anymore because I'm tired. Just

want to see with absolute positioning.

Maybe we don't even have to do absolute.

Maybe we can also mess around with margin. But let's see. Let's see. Uh,

margin. But let's see. Let's see. Uh,

let's do Oh, not auto. Let's do min -4 R.

Oh, actually it's for R then, of course.

So, uh R.

So, let's say we're going to put it Here does it stay in its place?

Yeah. Here of course we have different values. So here you have 8 and minus 6.

values. So here you have 8 and minus 6.

8 and minus.

Does it grow with us? Zero.

Oh, it just stays at the top. Oh, that's

nice. Okay, now it stays at the exact edge of the of the of the box because in absolute positioning um people don't know. They they think

it's just an uh place it anywhere, but it's actually looking at the first container it's in to define where the absolute positioning should start. So in

this case, we're looking at the inner flex box, which is responsive already.

So now the left is just zero. You see?

No, no, no. Here, zero. And then the top it just pushes it down a little bit here. This one of course

here. This one of course also has to have a different value.

No, we maybe with this one we can also use percentages here.

Am I crazy?

What do we put like one 0 five minus? Yes.

five minus? Yes.

Minus 0 6.

This should work.

Yeah. And then here, of course, you don't have enough space for all of the icons.

So, this is where things become a bit too hard. I think I'm just going to put

too hard. I think I'm just going to put 50% here.

No.

Yeah. 50.

No. No. That's not great. Here. Like

this.

And this weird tomato.

Just going to push it to the side.

I don't know what's going to happen now.

I'm very curious what this what this is going to do.

Oh, okay. Let's see. Let's see.

Okay. Okay.

Is looking for the closest rel relative pair. Yeah, that's a better way to say

pair. Yeah, that's a better way to say it. Thank you, Paul.

it. Thank you, Paul.

That's that's the correct technical way to say it. Look at this one. Okay. Close

here. This one. Let's refresh.

Okay. Okay. The tomato stays in place even right now. It comes closer in the tablet.

What was that?

And now it goes to mobile.

Perfect. It never touches the sides.

Gorgeous.

really really clean.

Really really clean. I am very happy.

This has been a great experiment. What

do you guys think?

As always, for the people that are still watching, thank you for being here. I know these streams are not short, but I cannot really make them shorter. It takes time

to learn this kind of stuff, right? It

takes time, but it's fun. We're

learning. We're helping each other.

So, thank you again. This is the result.

We started here.

We almost got the hero and the introduction part, the welcome part.

Yeah, Elementor is going to have the the tabs soon. So maybe we can just continue

tabs soon. So maybe we can just continue with this project later. And we also don't have a grid yet. So I don't know how we're going to do this one. We have

to mess around with flexbox ourselves if we want to do this.

So okay, Marius likes the long live streams. He doesn't mind this one. I think we can also make this

this one. I think we can also make this one. We can use gap or maybe some CSS

one. We can use gap or maybe some CSS and this one probably cannot probably just have to do V3. Then we

could try to finish this website. This

this is easy. This bottom

we can try to finish this website but we it will have to be V3.

And I honestly want to want to make a few projects that are fully V4. So maybe

I'm just going to use this project and wait until we can add things to it.

Maybe that's fun. We can do things together.

Yeah.

Okay. Let's see some some last questions before I go.

Curious if you notice which it would it to be technically possible to sort of clamp absolute values between device sizes so it smoothly moves from the spots to spot. Yeah. What do you mean

Tommy? Are you talking about the

Tommy? Are you talking about the absolute positioning?

Because if you're talking about absolute positioning, then you can work with percentages. Percentages scale according

percentages. Percentages scale according to the to the screen width, right?

If you're talking about padding, then the answer is yes.

Um so what I mean is that here for example, if you have here where is the top and

bottom padding here?

Yeah, where is it? Okay, it's local.

So here you can also just use a a clamp value in here if you want.

So you can start out with a big value. Actually,

I think it will just work fine if you just do it like this.

Honestly, I hope that this is what you mean. But

yeah, it starts with four RAM and it goes down to three.

So, this will probably work. We can test it out here. Look. Look.

here. Look. Look.

Why does my screenshot feature not work anymore?

Okay, maybe because I'm recording with you guys.

But uh here, can I inspect? This is what you mean, right, Tommy? Or no,

you answered my question. Oh, already.

Okay. But yeah, it is technically also possible to uh do uh absolute positioning sorry spacing

with clamp which is actually pretty cool. So I just want to see it myself

cool. So I just want to see it myself now. Here. What is this?

now. Here. What is this?

Padding block start.

That's widget spacing. Max width

padding block start here. Four. Yeah,

here the clamp. Oh, this is stripe through. So, I don't know. Let's just

through. So, I don't know. Let's just

use our own eyes.

Looks like it's becoming shorter, but I'm not exactly sure. I haven't tested it yet with Elementor. I just know clamping is possible to all uh padding is also possible to clamp. Okay.

Long are good. Watching you work while I work is fun, but you need to get a better chat system. Okay.

What is wrong with the chat system, guys?

Do you have any discount codes for lat Latin America, Mexico? Uh, yes. I don't

know if Mexico is in the list, but we do have regional discount codes. We are

actually building a form right now that you can apply to if you want to learn, if you want to jump into the element course or the web design course. Um

um right now you have to email courses livingwithpixels.com and then my assistant will um help you.

So that is oh here that is courses at livingwithpixels.com

here this email you have to email and say like hey I am this and this I watched in the live stream do you have a discount go from Mexico we probably have

for Mexico I'm not exactly sure but uh yeah Just email that one. All right.

Uh, do you want my code snippet to have clamp generator which shows up in element? I mean, please I will always

element? I mean, please I will always like to test. I'm I think we need some kind of something like this for element uh v4. You miss out on questions

uh v4. You miss out on questions sometimes. If he sends word one message,

sometimes. If he sends word one message, you read one without context. Yeah, but

that's that's also because I'm just like trying to focus on my own thing. And

then also trying to focus on the chat and sometimes when I switch from window the chat disappears and I have to open it again and I'm trying to manage multiple things at the same time. So I

don't think you guys should ex how would I say this? Yeah, I think I

think you guys shouldn't should not expect to respond to every single comment because otherwise I cannot really focus on my work if that makes sense.

I think it makes sense. The web design one. I'm more of a bricks builder

one. I'm more of a bricks builder person. I like how clean the code. Okay.

person. I like how clean the code. Okay.

Yeah. Yeah. I mean, if you want to learn uh web design, if you think I'm a I'm a good designer and a good teacher, then yeah, just go to the website

livingwithpixel.com. Here are the

livingwithpixel.com. Here are the courses web design course. You can also go over here and then you can check out all the

information. I spent a lot of time on

information. I spent a lot of time on this page by the way.

It's pretty cool animation here. It

finally works again. It was broken before.

I also use some animation here.

This one is pretty cool here. Look, I

worked pretty long on this one to give you all some inspiration and what it feels like working in Figma.

Everything comes together. That's what I wanted to create here.

I think this is gap probably. Yeah, I

think I used Gap here. And then also some 3D rotate effect with uh vectors. And then this is just an elementtor widget or from Kroger

block. I think it's pretty cool.

block. I think it's pretty cool.

And then this is just basic element.

This this block was so hard to make responsive. Oh my goodness. Incredibly

responsive. Oh my goodness. Incredibly

hard.

And then this is just a regular I think FAQ.

I think a little bit smoother. I'm very

happy with this page. I mean come on guys, this page is really good. And then

the reviews over here and then the footer.

So yeah, that's uh the Figma design course. It's

more like a web design course.

Why did you change the name living on pixels to board? That's a that's a story. I made a video on that on that

story. I made a video on that on that topic. Uh it's uh it's it's because I'm

topic. Uh it's uh it's it's because I'm more than living with pixels. Uh

basically, you know, like I said in the beginning of this stream, I also wanted to go into products. I have sometimes I have client work. I am not the brand.

Living with pixels is everybody who wants to be part of this community. Um

um it's a community for visual people, no coders that want to deliver great work and

yeah, you can you can join that and I'm the leader of the community. So the Reno Dour, that's my name, right? I'm the

leader of the community, but it's it's still it's still the same thing. that I

am not the brand like no person is a brand personal brand sure I'm I am the person uh for for rid of the board personal brand but it's not a brand right so I

separated these to make it more clear what is the community what are what are the what is the brand of the courses h of the products

and who am I I'm the leader of that brand okay uh and in the future I'm going to have more products very probably So yeah, that's that.

Uh having it accessible on your site means we're having suggestions. Yeah.

Yeah. Yeah. I'm trying to keep the chat always like uh you know active and uh trying.

Um we're all living with pixels if you want it or not. Exactly.

I'm still happy with the name though, even though we're now using RAM and percentages. Okay. Um that's it. Thank

percentages. Okay. Um that's it. Thank

you guys for the support, for the trust.

If you uh are deciding to jump into the course, of course, thank you even more if you or if you decide to support me by using my affiliate links. That's also

always appreciated.

Um for now, this was great. Thank you

again and I will see you in the next stream.

[Music] [Music] [Music]