How to Align Your Wix Website for a Professional and User-Friendly Design
WIX HACKS: How to use Rulers, Gridlines and Snap To Objects to improve your Wix website layout.
In this video, you'll learn how to use Wix's design tools to align and organise elements on your website, including rulers, gridlines, and snap to objects. We'll walk you through the process of creating guidelines with rulers, using gridlines to keep your content within boundaries, and snapping objects into place for a more polished look. Whether you're new to Wix or an experienced user, these tips will help you take your website layout to the next level.
Visit www.wixhacks.com for more.
--
Transcript:
Have you ever wondered or wished for a way to be able to align everything nicely and neatly on your website? Then I've got a good hack for you today. If you go into your editor and go to the top right hand corner where it says Tools, click on this and you will see they've got Rulers, Gridlines and Snap To Objects. Make sure all three of these are ticked.
You can see your rulers appear on the top of the site and on the right hand side. Gridlines are the boundaries/ margins of your website and I'll show you how that works.
Then you've got Snap To Objects, which I will show you in a minute.
So let's talk about the Rulers. Now the Rulers are there to help you to create Guidelines that you can use to align things with. So the very first thing that I do when I'm designing a website is I put a line over here. So click anywhere on the Ruler itself, and a blue line will pop up. This is not visible on your live site. Don't worry, it's just a Guideline. And you can either drag it to the midpoint of the website or you can type in here the number of pixels. So that's 490. And that's the halfway point. Because the full website is 980 pixels across.
If you want to delete one, click on it and there's a little button that pops up. Click on that to delete it. This is the midpoint of your website. If you've got any text that you want to align to the middle point, just drag it and you'll see that when it is in alignment, it turns magenta. That means it's in the right place.Let's move this 'book a call button' - now it's right in the correct place.
It also works if you've got a lot of other things that you want to align. If I want to align text further down the page with this image over here. I'll click over here... I drag my guideline to where I need it to go. Okay, so that's how the Guidelines and the Rulers work.
Now let's talk about the Grid. As you can see, there's a dotted line down the left of the page and on the right of the page. And everything on your website that's important needs to be within those guidelines. So yes, in this case, the picture goes a little bit over but that's okay because the page will expand and contract a bit, depending on what size screen you're viewing it on. As long as the text is not over that dotted line, you'll be okay. So for example, if this text falls outside of those boundaries, you can see it goes grey and that means it will be cut off on some screens. So just centralise everything and make sure none of your text goes over these boundaries. These boundary lines are also found at the top of the website and the bottom of the website.
Let me show you the bottom. Okay, so this is the bottom of the website and this is your footer. It's going to be the same on each page. Once again, make sure everything inside the footer is within this box. You can't have your logo or any of the text sitting outside the box because then it won't be seen on each page. The same goes for your header at the top of the page.
For more tips and hacks, visit www.wixhacks.com
