First Impressions Using Wix Studio as a Web & Graphic Designer

Hello, Wix Studio users, today I’m going to talk to you about SEO, but specifically just about headings and having the right outline of using your content. So your headings, your H1, your H2, your H3. So here’s a page that I’m working on, and I am just using this plugin in Chrome, to show you my headlines. And you can see that one of the problems is I have two H1 and there’s debate about this on a page, but let’s just say that I want to have one H1 on this page. So how do I keep it – the styling. Because this is a builder. And I chose this likely because of the styling, but I really want it to be an H2. And so there’s an easy way to do this. And so I want to show you how you can align your headings based on semantically where they should be, but keep the styling of why you chose it. All right. So if we come in to Wix Studio and you can see I have this text selected and this is what I want to be, the H1. So by default we’re mostly using Design and we’re grabbing our styles. And a lot of times people are picking their heading based on how it looks and feels on the page. And, Wix realizes this and is built for this. So if you’re coming from actual web design, where you’re in the code and you’re using CSS, maybe you’re using a CSS framework a lot of times in that you would have an H1 and H2, but you’d also have a period H1, a period h2, which gives you the class. So the look and feel of an H1, the look and feel of an H2. But you could apply it to any kind of text. That way you can have something look and feel one way, but the outline behind the scenes is still the right order. All right, so this is where, Wix has done a good job in their Wix Studio. So if I scroll down, I can actually declare what the HTML tag is. So this is the line that it looks like an H1 and is an H1. Great. If I come to this second line of text, I really want this to be an H2. It looks like it’s an H3. So that’s the style. And if I scroll down, it’s telling me that the HTML tag is an H3, but I can change the tag to an H2 without changing its look and feel. So that’s the secret. It is not, that they give you two ways where you can use the style that you have set for specific heading, so that look and feel, but you can still get your outline correct with your headings by using the HTML tag. So then if I come in, this is a repeater. It looks like an H3 through style and it is an H3. So now I have h1 h2 h3h3. So that feels right. So now I come in here and we would want this to be an H2. Looks like an H2 is an H2. All right. So I have some debating on if I actually want these projects that are just paragraphs right now. If I want them to look like an H3, or actually be an H3. So I think I am going to change them to an H3. So they’re still looking like a stylized paragraph. But in our outline for what this homepage is about, it will come up as a heading. So an H3. All right. So I have a few more of those to do. And remember it is a manual process to assign your HTML tag to text. And remember our goal is that it’s like an outline. If you go back to how you’re thinking about an outline in word, you have a one. Your H1, your heading, aim for just one of those. And then, if you have an H2, you want to have H3 under it. You don’t want to skip any in the order. Right? So if you have an H3, you want an H2 above it. All right. So we’ve gotten through our project area. All right. So now we have this American grown American made. So we know that this is a section header. So we’ll go with an H2. It looks like an H2; I scroll down. It should become an H2 here. Beautiful. And then each I think I saw that the wood pieces we love. It looks like an H3 but it is H2. So we need to align that to a three. And then but maybe not because let’s see this is a two. Maybe we just want each of our species. So right now we have them as fours. Let’s just make sure that they are fours when we scroll. Their piece okay. So we want them to be fours okay. So because this is a repeater I just change it one time. And now all of these will be changed to fours. All right beautiful. So we have all of those. Oh no. What happened to my heading here. Is it gone? Interesting. I was just trying to change it, so it should be like. I wonder if I already removed it here. Why? Why invest in hardwood? Where did it go? Let’s look in our layers. Do we still have text? There? Edit text. Why was it missing? Let’s see here. It’s not hidden. Nope. That’s not hidden. Well, that was weird. So a little tip. If you can’t see something that you think should be there, maybe a refresh would help. But if I said edit text, it showed up. All right. So that became an H2. So really we want each of our answers. So in the strong and durable, right, we would come in and we would make that. It looks like it’s a heading 4, the HTML tags at p. So we’d really want it to be an H3 in its tag. All right. So I would finish aligning all the way through my site. But let’s go ahead and preview. So that’s going to be on any page here. And then I’m going to use my extension. And you can see oh that might not have refreshed. Okay. We now have an h1 and h2 h3 of the types inside of that. Then we have another H2 “Why custom?” And then the the actual projects. And then we have h3 h2. Okay. So in our order it is showing American Grown American Made after all of this. And there. So we might want to try to switch that order. And then we have “Why invest in Hardwood? Strong and Durable.” All right. So we’re going to finish with the rest of our headings. And then we have get in touch so we can see it. This is how bots and AI are seeing our site. This is why we make sure we have our headings make sense so that it can quickly understand what this site is about. And yes. So that is helpful. And we want them to be in the right order. So if you see any flag about where you’ve skipped a level, you know, go ahead and fix it. And in Wix Studio, you now know the tips of how you can set the style to look like one. But actually be a different HTML tag. All right, so a few more things to pay attention to you. So when you’re looking at your layers, you can see what each HTML tag your text has over here. It is showing that this is an H2. So you can quickly scan and see if you need to change things with the HTML tag over on the right by looking and you can see that this is an H1. Right. Okay. So you can find things based on your layers and see what HTML tag they are. So that is a quick pro tip. All right. So one of the things that I wanted to show you that you might run into. So I have gone through and all of my headings are now aligned the correct way. However, when I come on to my page and I run any tool you want to use to look at my headlines, I find that no, hold on, I need to get this refreshed because I just fixed it and then I unfixed it to show you. And it’s still showing my fix. All right. So let’s come in here. Okay. Here we go. So the “Wood species we love” is our H3. And I want all of those wood species to be under the H3 as an H4. So they are in the wrong spot. Right. And if I scroll down I can see this is sticky. “American Grown American Made” this as an H2. “The wood species we love” is an H3. These are the H4. And it looks like, because this is in English, and we read top to bottom, left to right that the order would be correct. But the machine is seeing it incorrect. Right. So the actual technical part is coming up incorrect here. Right? These are above where they need to be. So here’s the fix. I come in to my layers and I’m in this section. All right. So I have two boxes essentially my left column and my right column. And it is set up the way I think would make sense. But the fix is simply to drag that right column up. So now my left column is below to go ahead and refresh. So it did not change my look and feel right. It just changed it in the layers. I’m going to make sure that it is. Yep okay. Because those are flex columns. And now when I refresh you can see that all of my “Wood” are listed under the “Wood species we love.” So that is correct. So again you’re going to need to look for order and sometimes move things in your layers panel in Wix Studio to get everything aligned the way that makes sense to a machine to AI, right? That is reading your site for content. All right. There you go. So if you found this helpful. Please subscribe. You will find other videos about Wix Studio as well as other builder, Squarespace, WordPress, coding by hand, Statamic and other content management systems as well as graphic design and development. So if you love working in Photoshop and Illustrator, then this channel will also have lots of videos for you. All right, so happy designing.