[FULL BUILD] Lightspeed Part 2

0:00:00
All right, everybody. Goal today is to start to build out the main landing page sections. I’m going to focus mostly on structure. So we may just leave out these graphics until we come back around on a second run. I just want to get the general structure down. And then I also want to go back to the primary template and just clean up a couple things. Like for example, I was sent to the white logo. I want to get that text in the bottom, wrapped up, maybe drop a little magnifying glass icon in the header, just little stuff to clean up. So anyway, let’s go ahead and get started on the main section. So I’m on the home page here.

0:00:47
It’s got the, it’s inheriting the primary template. Obviously, I’m going to add a section for that hero. And that’s just going to be that BG base color. And it looks like we’re just going to do a grid. We’re going to do a two column grid. And then we’re going to need a heading large text and then these bullet items. All right, so let’s do a div grid to div heading. That’s going to be a heading one. That’s going to be large text. This is going to be a rich text. All right, and on this, we’ll just do text white. And we will do probably, I wonder if we can just, yeah, look. So it looks like even spacing here. So we’ll just do owl.

0:01:40
We’ll do owl-s to start and just see if that works. This is going to be text large. And this is going to be normal bullet text. So I’m going to double click in here. And what does this say? Remember, I don’t have a dev link for this. So I have to do everything manually. Advanced multi-threaded, multi-core processing. OK, advanced multi-threaded, multi-core processing. And then this will be optimized level two quote messaging. Optimized level two quote messaging. Is that what it said? Quote messaging. Yeah, no dash between level and two, though. And then predefined and fully customizable hotkeys.

0:02:35
Predefined and fully customizable hotkeys. I think is what it was. Yeah. OK, sophisticated risk management solutions. Sophisticated risk management solutions. All right, let’s hit enter there. And we are going to have to take away the padding here. And I think that’s related to the ULLI. So let’s go to the front and just inspect that real quick. I hardly ever use these rich text modules with the URLs. So it looks like this is going to be padding inline start. I bet that’s it right there. So UL, all right, let me get this a class. How do we want to name this? Let’s do feature bullets like that.

0:03:41
All right, and then we’re going to go to style sheets and come down feature bullets UL. I think it’s padding block start. Clearly not. Let’s check that again. Padding inline start. Oh, that’s going to take us way too far out, isn’t it? OK, because that puts the text in line, but it doesn’t actually put the bullets in line. All right, let’s check this out again. So none of those have anything on it. So it’s going to be. Yeah, it’s going to end up being 20 pixels because it was 40. Yeah, and I don’t OK, let’s just do let’s just do two rem for now. I don’t know that we need the important on there.

0:04:55
All right, save. All right, let’s look at that landing page again. All right, that’s all good. I’m trying to make sure that’s not that alt font like what? Let me go there regular homepage. So we’re going to inspect this. So that’s Roboto light. That’s how Vettica. That’s Lloyd Sands, dude, they’ve got like. It’s just like a mad amount of fonts going on. Roboto bold. That’s back to Helvetica. But this is how Vettica was not in their style guide. So I don’t really know. Let me go to one of their other dev links and see what they’re using here.

0:05:50
Oh, look at that. Let me click dev here. So this is white. That’s Roboto. Yeah, it’s the condensed version. And this is the condensed version. So it looks like they’re using condensed. Well, they’re using condensed for like everything. OK, well, I guess we’re just going to have to use. Let’s just make that change up real quick, then. So we’ll go to settings, global style, fonts, and display font. Let’s do Roboto condensed, and then we’ll do Roboto condensed here. And then I guess we’ll make the accent font. I don’t know. We’ll just leave that for now.

0:06:37
It’s set in their style guide. When I set this up initially, I set this to Roboto, because that’s what it said in their style guide, their brand guide, it said it’s the main font. And then it says the Roboto condensed is like their accent font. But if you now go look at their website, and I didn’t have the DevLink before for their the initial landing page that they sent me, I got these later. These are the ones that I do have DevLink for. I got those later. Now we see that it’s like Roboto condensed for everything. So we’ll just save that. That’s fine, whatever. And we’ll come back here.

0:07:12
OK, so this is going to say light speed trader, the smarter way to trade. All right, so light speed trader, the smarter way to trade. And they’ve got, yeah, they’re doing, all right, lowercase there. So really we’re just going to add a span to this. And this is going to be text primary. So that’s the good way to do that. And then I believe we’re going to have to make all of that eat Dalek. So question is, is like are all of their headings italic always? Or is that just a sometimes thing? So it’s not italic here, not italic here. So we’re not going to be able to do that.

0:07:56
We’re just going to have to do H italic like that. Just make a little custom class and then go to typography and make that italic. OK, so that’s good. Landing page. And then ideal for traders who demand maximum control of their trading strategy. And then you can see that this is a little bit tighter on the line height. And I wonder if that’s, it looks like that’s kind of across the board. So what I’m going to do is go into manage or already insettings. Let’s go to headings. 1.25 should be good on that. Let’s check that out. So I’m going to do that.

0:08:41
I’m going to do that. 1.25 should be good on that. Let’s check that heading spacing. That looks about right. We need to go into body and make this 1.6 probably. That’ll tighten that up. Save. OK. And I don’t like having, even though they have it in their thing, I don’t like having orphans. So we’re just going to do width and probably M. Yeah, that works. OK. All right. And then we have a button in there. Yeah, get started.

0:09:15
OK. So we’re going to add a button. And that’s going to be get started. And then this is going to be button M. And really, this should just be, we should be using button Ls for this. It looks like button L. And then what I need to think about doing is making the defaults. We need to think about the defaults here. And I believe we’ve set this up. Yeah, I’ve done a lot of work in the automatic.css system. But also, my brain’s been bouncing everywhere inside the system, trying to get everything cleaned up and ready. I don’t have a lot of experience using the automatic.css system. So when it comes to work flow, I’m still learning as much as you guys are probably learning.

0:10:05
So I’m going to go check out Vars real quick and see what we can do with these buttons. So I’m going to go to Vars. And so much has changed and evolved. It’s harder to remember exactly everything that’s available. Let me zoom in on this while we take a look. All right, so I’ve got button BG. OK, button hover, button border, button border color, button padding, which we already set. So the button border color. See, this is where it’s going to get tough to set a default. We’re going to have to have our own button class for default style. To do like a button, like a custom button like that. So this is where I would go in and we’ll do like button main or something. And that’s what’ll apply the text styling, this border style down here.

0:11:08
All right, let’s try this first. So let’s do button main. And I’m hoping this will override. We’re about to find out. We’re about to find out if this breaks things. And I need to rethink how the buttons are done or if this is doable. So the first thing I’m going to do is go to typography. We are still going to hook in. So this is going to be base. Yeah, OK. See, I’m going to have to add important to be able to do that. Well, first of all, let’s go to vars and the button color. Because if we look at these, it’s always going to be dark. It’s always going to be their base color. Except like on these.

0:11:48
All right, so button color, adjust button text color, button primary text. This would be base. OK. And that clearly does not change that. OK, thank you, oxygen. Wow. All right, so buttons, it looks like are going to have to be button L. And this is kind of because I had to get rid of that button class that we were using. And so it’s created some gaps in the button system now that we’re going to have to fix. OK. So I’m going to rethink that. OK, so what I’ve done temporarily is I went in and just basically excluded this button main from the existing rule set. That way I can create a completely custom button called button main. And that’s going to solve it on this install.

0:12:43
And then what I’m going to do is go rethink how that’s done in automatic. It was all working until I had to remove. There was a conflict between, well, we used dot BTN, which I think a lot of developers probably used dot BTN classes. And so it was just going to create a bunch of conflicts with other systems. So I had to remove that and then kind of changed the way how buttons behave. And then somewhere in there, things got a little lost. So I’m going to go in and rethink the way buttons are done. But for now, I’ve just made button main be completely customizable. And so I’m just going to go ahead and style that up real quick. So our background color, I’m still going to hook into the automatic dot CSS system. We’re just going to be able to do this completely from scratch. So this is going to be our base. And then if we look at the landing page, we need that to be bold and italic. So the typography font weight, I can actually zoom back out of this now.

0:13:40
So it’s going to be 800 and it’s going to be italic. And then our font size is going to be var text L. Okay. So there is our custom button. We’re also going to add some custom spacing here. So padding is going to be, let’s do 1.5 M left and 1.5 M right. And then on top and bottom, we’ll do 1M and 1M. Typography line height is going to have to be 1.1. That’s odd that that got bigger. It’s also odd that it’s like, oh, it’s because of the italic sizing. All right. So spacing, let’s drop this down to 0.6 and 0.6. And I just want like a little bit extra on the right to make that text look centered. Because the way the italicizing happens, it almost makes it look like the text isn’t properly centered.

0:14:39
And we’ll also go hook into our border radius here. So this will be var radius XS. And there we go. We’re also going to have to go to borders. And we’re going to do none there, I think. Yeah, let’s do, why can’t I click none? I don’t understand. Oh, it did. It accepted it. OK. Oxygen. All right. So bottom is going to be like two solid. And then this is going to be var accent. All right.

0:15:16
And then that’s definitely needs to be, let’s go back to bottom. We’re actually going to do RAM, we’ll do like 0.4. Let me see if that matches. I think so. That’s pretty much it right there. OK. All right. I think we’re there. So that’s our button main. We’ll do our hover real quick on that. So we’ll go to state hover. And I don’t have any, let’s see what it does on their website. That’s not good. Just opacity changes. Do they have any other buttons, trading equities?

0:15:51
Any other buttons anywhere? There we go. Start it. That’s not really good UX. So for right now, I’m just going to go hover background, bar, and this will be primary hover. And I don’t think our border needs to change it all on hover. Yeah, that’s fine. OK. All right. Yeah, that looks. We definitely need a lot more left and right padding. Now that I’m looking at it again, all right. So button main, back to the original. Let’s go to M and 2M, 2.1M.

0:16:31
Oh, OK. Let’s switch that to M actually helps. Save. We’ll go back and take a look. All right. That’s much, much better. Remember, this is like that. It’s yeah. OK. We’re pretty much there. All right. So the next section is, remember, we’re going to take care of this graphic a little bit later. So we need a heading. We need four columns.

0:16:55
And we need a button. And we’ll probably be able to use owl spacing in there. So I’m going to add another section. We’re going to add a heading. We’re going to add a div. And we’re going to add a button outside of the div. This is going to be button main. And what is that button going to say? Try a demo. Try a demo. All right. We’re going to do owl probably L. And then this is going to be grid four. And I’m just going to do an auto grid. Div 234.

0:17:32
OK. Let’s take a look at what we’re going to be putting in. So it’s going to be an icon. And we’ll call this an icon card centered. icon card centered. OK. So icon card. What do you icon card? And then we’ll also do icon card centered. Yeah. And I don’t know if, yeah. Let’s do that. That’s fine. OK. So on icon card, we’re going to hook into the spacing here.

0:18:14
Var space, var space s. Just for right now, I don’t actually know what this is going to be. And we’re going to add our icon, which is actually just going to be an image. And then we’re going to add our heading and our text. This is going to change to an H3 heading. But we’re probably going to give it a different size. It’s probably going to end up being typography. First of all, let’s give it a class. Let’s give all these things classes. So this is going to be icon card icon. And then this is going to be icon card heading. This is going to be icon card text, thinking, thinking, thinking, about future scalability.

0:19:21
You know, I don’t know what the rest of the site is going to. I don’t know if there’s going to be left aligned icon cards. I don’t like this is the only style of icon card. So what I might do is actually apply those to the centered version. So we’re going to go take that off. Take that off. Take that off. OK. This is going to be icon card centered and then icon. And I’m just going to copy all of this. So I don’t have to keep typing the same thing over and over again. Icon card centered icon, icon card centered heading, and icon card centered text.

0:20:03
OK. Because if we have the centered icon card, these things might need to change separate from how other icon cards need to change. So on the centered one, we’ll put a width on here. We’ll try 10 first. I don’t know. Maybe probably a little bigger. Let’s try like 14 rim. And then since this is centered, we’re going to choose icon card centered vertical center. That’s the easiest way to do that. You don’t want to do that with utility classes, because this is a custom element. So you want everything to be inside this class styling.

0:20:42
And then on this, we’re going to do a spacing. We’ll just do ends for this. And we’ll come here margin bottom. And see if it’s evenly spaced. Looks to be fairly evenly spaced. There’s a difference in the icon heights, which is making it look like it’s not evenly spaced, but it is evenly spaced. All right. So we’ll just do an M there. And it’s actually the M’s are going to apply the spacing based on the element I’m applying, the spacing 2. So like larger is going to make larger spacing. But that’s fine. So typography, I think what we want to do is bring this down a little bit to like text M. Take a look.

0:21:27
Yeah. It’s looking like that’s going to be the way to go. It was already L. So we’re not really going to go out from there. All right. So that needs to say speed stability and facts, fast executions. Speed is up all caps, speed, nope. Stability and fast executions. I don’t even know what that means. Speed, stability, and fast executions. Cool. All right. And then we offer a fast, highly stable, customizable. We offer a fast, highly stable, customizable.

0:22:02
Ultra low latency trading solution. Ultra low latency trading solution. Regardless of the market conditions. All right. The text size looks to be like almost exactly on point, because of the way the line breaks are happening, except for these headings. I’m going to put a little more spacing in these cards. So let’s go to M on that. I think that’s better speed stability. I feel like I don’t know. Let’s go to here. Is there a similar? Because at least these are dev links. But I bet they’re not going to have, yeah.

0:22:59
They don’t have that kind of section. Maybe they do on this flow. Oh, there it is right there. So let’s click dev, come down. So if you look at this, we’ve got 18 pixels, 16 pixels. So very, very close. Right now these are about the same. 16 and 18. I think we can get away. This should likely be text s. So typography, font size, none, var, text s. And then I’m probably just going to be able to customize this on a global level to tighten those up a little bit. But that’s what we’re going to rock for right now. So this grid is going to have a gap of M.

0:24:01
And we can actually bring that spacing down now. We’ll go back to s. All right, now let’s delete this, delete this, delete this. And the easiest path is to simply duplicate. Because you’ve kind of got the structure of the way that we want it. All right, we need to center everything in this section. So I’m just going to do center all, center double dash, all better. And why light speed? Good question. All right, remember I did H italic. There you go. And cool. Competitive pricing for active traders. All right, and then this one’s going to be advanced trading features and tools.

0:24:55
And I think what you’re going to notice is they’ve probably, it looks like they’ve constrained the width of these headings, more than they’ve constrained. It’s not just the card padding that’s constraining these headings. They’ve got an extra constraint on it. So we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll, we’ll do that as well. Professional support when you need it. Cool. And let’s take a look at how that would work right now. So we’ll just come in here to max width and do this on our own. And we’ll do, like, 10 to start out. Let’s do 16.

0:25:36
That’s probably where we want to be. I’m going to do 18 just for a little extra breathing room. And I think that’s going to be good right there. Okay. Save, save our work just in case bad things happen. All right. So we’ve got try a demo. Let me look at our landing page. Let me see if that flow over here. Yeah. Look, I can export these icons. I think I don’t, I don’t use XD much. I kind of hate XD. Your work. Yada yada.

0:26:13
Yeah. Hi, dude. I’m so like in Figma lands that I do not know the best way to export. I can’t export an SVG. Adobe XD export icon. Export design assets. File, export, selected. But I’m in the browser’s the problem. So there is no file export. Half pixels, pixels, hex. Okay. Don’t know. All right. So we can find the icon clock. Guarantee we can find the exact same icon.

0:27:16
So if we take a look at this, it’s a clock with three little stripe thingies down at the bottom left. All right. Yeah, there’s a waste of time, isn’t it? I’m just going to ask them for icon exports. Let’s at least get one icon kind of in there just so we can make sure we’re looking good. From a design perspective, I’ll do clock fast. Oh, not faster fast. That’s going to give me one with these little dots or stripes. Like it’s kind of this one, but the stripes aren’t overlapping the way they are here. I’m going to save that just in case. So I’m going to use the icons overlapping, but in the middle. Same there. Yeah. All right. I’m going to count to 10.

0:28:11
One, two, three, four, five, six, seven, eight, nine, ten. All right. Didn’t find it. Moving on. SVG. The other problem with this is. Let me also do this. Let me go back to here. What if we did an icon? I just want to look at clock here. All right. Let’s just use this for now. Screw it. Just on this one. All right. So this is going to be icon card centered icon. And I’ll do. All right.

0:28:53
Okay. Nevermind. It’s going to be too much work. All right. Yeah. I don’t want to go get their color. I wish. Okay. Let’s do this. SVG. Downloads. This is still going to be so much work. Right. View source. Where are we at? View source. I don’t want to do that either. I’m just going to ask for SVG exports from them. I’ll put a black one in for now. Screw it.

0:29:31
All right. Browse. Downloads. SVG. No. It’s not in there. All right. Excellent. I don’t know what it was called. All right. Let’s just do it again. Got Lee. This is this is killing me right now. SVG. It’s timer. Icon timer. That should be easy to find, right? I don’t just do it there. Okay.

0:30:06
LP. LP. That’s a bit big. Probably going to be 10. And these actually need to be defined by height, usually. Because if you have, like you have in their design, the reason you have spacing differences is because the icons are different sides. They’re not perfectly square. So typically if you want the spacing to be congruent between all of them, you define a height on the icon, which is one of the only times you define a height on something. We’re going to try like 10. Let’s do like 7, 8, 9. I look like 10 is where we needed to be. And then just put the width on auto. All right. And let’s save. And let’s view on the front end.

0:30:51
Okay. So we need to change the scale of our type so that there’s not such a drastic difference between the type sizes. I think that’s probably going to be the best way to do it. That’s going to get this closer to this. So this text isn’t so small. There’s really only a two pixel difference between on their design, between this heading and this text. So we can play around with it and see. But I think we’re good for right now. If you look at like, it’s so hard to get scale on that. All right. Anyway, next is this low commissions for active traders. Again, we’re going to do a grid. We’re going to put the text on the right side of the grid this time. All right. So I’m going to add a section with a div.

0:31:35
And this is going to be grid two. We’ll probably do grid auto. Now, I may need to control the breakpoint better. I don’t even know. This is probably going to end up getting absolutely positioned anyway. So it probably doesn’t matter. Let’s just start with auto. Grid auto to and div and div. Now that puts the div inside the other div. Let’s just duplicate. There we go. All right. So we’re going to need heading text button. Heading text. Text.

0:32:17
Thank you. And button. Then I also make this else. Note this needs to be an h2. This needs to be an h2. All right. Cool. Yeah, we’re going to have to make some global adjustments to the typography, which is all good. We can do that in bars very easily. We’ll do that later. All right. Is this all evenly spaced? It does appear to be owl m. What do we do up here? Owl s.

0:32:43
Yeah. All right. Let’s stick to that owl s. All right. And then let’s stretch this grid. And what does that need to say? Low commissions for active traders. And then we have. Enjoy some of the lowest cost on stocks. Wow. That is a completely different font. Enjoy some of the lowest costs that we’re going to ignore that. Because there’s no reason that should be a different font. Enjoy some of the lowest costs on stocks and options trading. Enjoy some of the lowest costs on stocks and options trading.

0:33:33
And then it’s going to say professional and active traders looking to maximize their profits. Can earn volume discounted commissions. All right. All right. Perfect. And then this is going to be learn more. And this is going to be button main. And our background here is going to be our base not base dark shade dark. So we’re going to go BG shade dark. And then we’re going to go text white. And then this is going to be an H italic. And I think what we’re going to have to do is pad section S on that. Because if you look at, let me add a section below so we can see it. So there’s there’s less padding here because there’s less padding in this section. It looks like the padding, the section padding is a little bit inconsistent across the board.

0:34:57
I don’t know what we may just do. Let’s just do this because I don’t think I think those are, I think it’s equal to that. It just is less than what we’re using. So we’ll just tighten up our section padding globally. I won’t put that S on there. We can do that in bars. So if we go to text scale, da da da da da da, base space, three space scale 1.5. Space adjust section. That can go to three. See how that tightened everything up right there. And then this mobile adjust space section, we can make it like probably two. And we’ll take a look at what that looks like on mobile when we do our mobile optimizations. But right now we’re good to go. So we’re going to do gap L on this. Okay.

0:35:44
So we’ll leave that there for now. We’re going to go to the next one, which is going to be our testimonials. What are customers are saying about light speed? So we’re going to add a heading, H2, what are customers are saying about light speed? We’re going to center all. We’re going to owl L on this. And we need to add a carousel. And we need to add a little text at the bottom. So we’re going to go carousel. And then we’re going to add text, which put that inside the carousel, which we don’t want. Okay. So carousel builder text needs to be outside the carousel builder. There we go. Perfect. This is going to be interesting is I’ve never used the oxie extras carousel builder manually.

0:36:40
I almost like 99% of the time. I think 100% of the time up to this point. I’ve used it with a custom post type and a repeater. So I’m interested to see how this is going to work just building one manually. All right. So what’s that need to say? Testimonies may not be representative of the experience of their customers. Okay. May not be representative of the experience of other customers. Testimonials are no guarantee of other customers. Testimonials are no guarantee of future performance or something like that. Future performance or success. Okay. We’re going to go text s on this. And we are going to go to I don’t know.

0:37:27
Did I let’s see if I uploaded the new tech shade colors. So this would be shade medium. I haven’t. Okay. Let me just grab that real quick. One second. So if I go to main and text text text here’s my text section text classes all the way down. All right. And then we’re going to go into main style sheets main. Go to my text classes. There they are. Come all the way down. Good. And let’s see. Yep. Now I’ve got that as gray like a lighter gray or like it’s really medium gray.

0:38:10
It’s right in the middle. Okay. So we’re going to have to grab this carousel builder and put a little extra margin on the bottom of that. Because these dots navigation light outside of the carousel builder. And it makes things look a little closer together. I don’t know that we need that much though. Margin bottom in that’ll that’ll do. Okay. All right. So let’s figure this out. We need a testimonial that’s centered in the middle. It’s just going to be a div with text and text. Okay. So we’ll add a div. That’s all good. We’ll add text.

0:38:47
We’ll duplicate the text. And then we’re going to figure out how to style this. Okay. So this is going to be called testimonial card centered. Like that. Okay. And then we’re going to go vertical center middle. This is going to be testimonial card centered and then we’ll just do text. And then this will be the name. All right. Cool. All right. This is going to be bold. And then small. So font size.

0:39:34
Var text s. And then typography font weight 800. And that is Chris New York. Dash. Chris New York. And then his testimonial says light speed is awesome. And then he takes care of me like nowhere else. Talk to my rep multiple times a day. And he takes care of me like nowhere else. All right. Let’s drop a quote and a quote. This is going to be font size var text L. And we’re also going to do probably text light on this. Actually, no, we can just go font weight 300. And then we’re going to are I think that carousel testimonial carousel.

0:40:47
And cells. I believe we can do. All right. Number of cells. One. Or we can set a width value on the cells. But I think we do this. We’re going to see more than one cell. So I think we need to do one number of visible cells. And then this card, which I probably just need to name. We need to do some cleanup here. So it’s going to be a testimonial carousel. Card. And then rename. Testimonial carousel.

0:41:23
And then this is going to be testimonials. This is like oxygen is got to improve this. Number one, it’s always laggy when I’m trying to type in here. And number two, it’s like you can’t hit edit and just start typing. Like you can’t rename and start typing because it puts it there. And then if you click wrong, like it gets you out of it, you know. Look, I just did that and it puts section 51 back. I don’t even know what to name that section honestly. So let’s just skip that one. This is going to be Y light speed. So we’re going to rename. Y light speed. This is going to be called hero. Okay. That’s a little better.

0:42:08
Look, this one doesn’t have a name. No, that’s fun. I’m going to rename. All right, we’ll just do low commissions for now. All right, testimonial carousel. All right, so I’m just going to take this testimonial card. And we’re going to go to max width. And we’ll just hook into the system and go with M. That’s way too small. L. Probably is good to go. And we’ll go margin auto and auto. Okay. So we’re getting there. I think we’re going to need a little extra padding maybe? No, actually, I mean, it’s like.

0:42:50
All right, let’s hook into. I think I can hook into this var text. No, var. Shade. Medium. Might be shade dark. Let’s see. No, that’s actually not. Let me see if this is in here somewhere. The guy is testimonial section. So I want to see if they’re using. Here we go. I mean, this is different. Obviously, it’s got a background. All right, they’re using the midnight blue.

0:43:33
So that’s there like base, base dark, I guess. Yeah, that looks good. Okay. And then I’m going to do margin bottom here. I’m just checking. This is pretty, pretty freaking close. This needs to be italic. Pretty close. This needs to be. It’s definitely a lighter weight. Okay, so we’ll do. We’ll do text thin. And we’re going to go to, I think it was on the other screen, font weight 300. There we go.

0:44:35
Okay, safe. Let’s actually lock that class to. That’s one of those classes that’s so easy to accidentally screw with. So I’ll lock that one. And let’s also lock italic. Heading italic. We’ll lock that as well. Okay. All right. Now all I need to do really is duplicate this testimonial card. Oh, that definitely didn’t do what I wanted it to do. Okay. Hang on. See, I told you I’ve never done this manually. So let’s figure this out.

0:45:08
All right. Carousel content. ACF gallery custom element cell. I wonder if it needs class of cell on it. Is that what that means? Custom elements dot cell. Well, we got somewhere. But I told it one visible cell. And it’s clearly showing me two visible cells. Does this have to do with like the width that I put on this? That clearly does absolutely nothing. So number of cells visible one. Carousel behavior interaction. Nice. We’re doing absolutely nothing.

0:46:34
Okay. So, yep. I could look this up. All right. Let’s do this. Oh, okay. How about? How about? No. Let me grab my card here. Thank you. And first of all, test one of your carousels. Cell’s carousel. Is there like, how do I get padding inside this carousel? I just do it here.

0:47:27
So, testimonial carousel padding. None bar space L. Okay. That does. That’s exactly what I’m going to do. I’m going to do that correctly. All right. We need more than L, though. We need like, XL. And XL. Okay. That works. Let me grab my card here. Let’s take our width class off. Or width sizing.

0:48:00
All right. Let’s see what’s going on on the front end, too. Let’s look at the front end. I’m going to look at the front end. Let’s see what’s going on. Let’s see what’s going on. Let’s do this. Maybe it’s just screwing up what I’m seeing in the builder. Which is still a problem. I mean, because they need to be able to edit it. Yeah. Well, not really. All right. This is one of those times where it’s like, what you’re seeing is not what you’re getting.

0:48:30
So, cells, number of visible cells. So, let’s see what we get to value. Cell width. 70%. And see, I don’t know if this is going to work on a class. Let’s save this and see what we get on the front end. Okay. So, now I’m getting this, but that I’m not seeing one cell. I’m seeing like between the cells. And clearly, I have asked for no space between the cells. And I’ve asked for. Now, I’m set to a width value. So, maybe what needs to happen is, let’s try this. If I go back to 100%, so let’s just use cells 100%. Save.

0:49:26
Refresh. Now I have the one. Now what I’m going to do, and let me see if I apply. Okay. All right. I can work with this. Now, inside of that, this is a cell technically. So, inside of this cell, I’m going to put a div. And inside of that div, we’re going to call this testimonial card centered inner. And this is going to be size and spacing, max width, var width, L. Cool. That did absolutely nothing. But when we put stuff in it, hopefully it will shape up. So, I’m going to drag that in. I’m going to drag that in.

0:50:13
And this, I’m going to center all. Or just really what we’re going to do is go vertical center. And safe. Shazam. Okay. Now what I need to do is duplicate that card. So, or really, so this is going to be rename. See? You can’t rename it. Like, enter. Because I didn’t want to have to use padding on that. Because it would require a lot of padding. Then we got to worry about how responsive is that going to be. So, by putting an inner wrapper in there and just doing a max width on the inner wrapper, it avoids all these padding issues.

0:50:58
Because this is going to go down to mobile perfectly. All right. So, testimonial card is what I want to duplicate. So, I’m going to do that. Come here. Duplicate. Duplicate. So, now I have three of them. And then here’s the problem is like, can we edit them visually without this being a nightmare? So, I’m going to go to preview. And I’m hoping that in preview mode, it’s going to give me some sort of like, queue on the next one. Okay. Which one am I editing?

0:51:38
All right. This appears to be the last one. All right. This is testimonial number three. It’s easily editable in the builder. We hope. Here is some more text to make it longer. Okay. Something like that. All right. And then I really want to be able to edit this testimonial. Can I just click on it now? All right. Hey, hey. Can I go backwards?

0:52:21
Okay. What happens if I, yeah, if I click there, it goes away. I’m going to have to take a picture of this and ask oxy extras. Oh, come on. Double click. No. Okay. See, I’m editing it, but like I could edit it right here, but I can’t see it. Right. So, I’m going to have to ask oxy extras how to handle this. Or if any of you guys know how to handle this better to where this can be easily editable. It’s clearly like I’m missing something here. This is why, by the way, I always do this with custom post types and a repeater. Because you don’t have to worry about this manual nonsense. But clearly it’s working. It’s doing what it’s supposed to do.

0:53:03
It’s just not going to fulfill their need of making it easily editable. So I can use a repeater. We can do a custom post type. We can, you know, I’ll let them know. That’s probably going to be the easiest way. But if I’m doing something wrong with the carousel that makes it easier to edit, you guys let me know in the comments. I did what I know how to do so far. All right. Let’s take a look at the landing page. So now we’re going to be doing the very last section ready to get started, which is like super easy BG base and heading and button. And that is going to be button main. And that’s going to say ready to get started. And we’re going to make all of this text white.

0:53:55
We’re going to make this italic. We’re going to go owl M. Well, owl S center all. This is still going to be an H2. But I’m going to make it big. So we’ll call this CTA heading. So H CTA. And then I’m going to hook in font size. It’s going to be var text XXL. And I think that’s going to get the job done there. Okay. So how long we’ve been recording? Let me check what we got going on here. All right. We’re coming up on the hour mark.

0:54:50
There was a little bit of troubleshooting in there. But we’ve got good chunk of the structure here for the landing page done. I want to hop over to the primary template real quick. One thing I wanted to clear up was the logo down here. We’re also going to take a look at what’s gone wrong with these buttons. I changed something when I customize. I also want to take care of this very bottom area. So we’ll just figure out what’s going on with that stuff. All right. I’m back in the primary template here. We’re going to hop over and we’re going to grab docs and files white logo download. Okay. And we’re going to scroll the bottom. We’re just going to replace this real quick. I’m also going to create a folder called branding.

0:55:40
Now that my folders are showing up, we’ll drag that logo in there. And we’ll put the white logo in there with it. And we’ll hit add. Okay. All text on this is going to be light speed white logo. All right. I’m going to troubleshoot the buttons later. It happened when I was fixing to create our custom button. I was fixing some CSS. So I’m going to have to go see what happened to that. Oh, I never had a button text there. That’s fantastic. All right. So I’m going to do center all on this. And what does that need to say?

0:56:15
All right. And that’s like base. So this text. And that’s going to be shade medium. Point fixed. All right. Disclosure is privacy policy. Business continuity policy. All right. Check this out. So we’re going to have to add a div. There’s a little manual menu action down here. So we’re going to call this footer. We’re going to call this sub footer menu. And we’re going to make this horizontal middle.

0:56:48
And we’re going to drop some links in there. Text link. OK. And that is going to be disclosures. All right. And this is going to be sub footer menu link. And the color on this is going to be var. Fiddle, not freeze on me. Shade medium. The hover color is going to be var primary hover. OK. That should be good. Let’s go back to the normal version. These are all going to be uppercase. And they’re all going to be text s.

0:57:41
OK. So now we got to think about this because we need these little dividers in between. So what I’m thinking is we don’t use any margin. We just use a little bit of padding. So I’m going to go in just for now. And we’ll tighten this up in a minute. And then I’m going to duplicate this. So there’s our two. Now after. After the one we’re going to need a border. So I’m going to go to sub footer menu link after. So background color is going to be var shade medium. Shade medium. Yes.

0:58:23
OK. Size and spacing. It’s width is going to be one pixel. It’s height is going to be. I don’t know if we can do 100% when we. OK. We’re going to we’re going to figure this out. Layout is going to be absolute. The layout of the original is going to be. Relative. And the after goes to right zero. OK. That’s what we want. Yeah. That’s that’s what we want.

0:59:04
Now. All right. So after last of type. I think we can do that after last of type. Display none. Or it might be last of type after. Let’s try that sub footer. Here’s the original. Last of type after. Boom. Display none. OK. So now we’re not going to get one on the very last one. Let’s see what we need to do now. Privacy policy, business continuity policy.

0:59:53
Privacy policy. Business content. New it. Privacy policy and terms of use. Boy, all right. We’re going to grab that whole wrapper. And we’re going to go to size of space in margin bottom. None var space s. And then we’re just going to do a text s on this whole div. I’m going to use options and I bet this is at the bottom of their normal site. It is. Haste. Look at that. That looked better. What they had.

1:00:43
All this fogly broken brokenness. Now we’re now we’re rocking and rolling. OK. Save. OK. I’m shutting it off because we put in our our second hour. I’m going to investigate this for next time. And really we just have like go in, put in the assets. We got a visual asset to add here. We got a visual asset to add here. We got these icons to add. But like man, we’re we’re getting really, really close. All right. I’m going to call it a day. I’m going to call it a day.

1:01:29
OK. OK. OK. OK. OK. OK. OK. OK. OK. OK. OK. OK. OK. OK. OK.

1:01:45
OK. OK.