How to Pin Elements on Wix

One of the essential skills you need to master while building a website on Wix is pinning elements. When you pin elements on Wix, you make them fixed in certain positions to make sure they remain visible and accessible even if your visitors scroll down.

Pinned elements enhance user experience and navigation. It also provides aesthetic appeal to your website design. In this article, we will show you how to pin elements on Wix to create a professional website design.

How to Add Elements to Wix

First, let’s find out what Wix is and how we can add elements to it. Wix is a popular website builder offering many customisation options for your website. Here is how we can add elements to Wix.

Let’s just say we want to have a horizontal menu. So, how can I create a pinned horizontal menu item or any other element? Here is how to do that:

1. Click on the small plus icon at the left of the screen.
2. Choose Add an Element.
3. Go to Decorative. It doesn’t matter which item you pick out; Pick anything you want.

Suppose you get a vector art item, and you want to change it to a basic menu item. It’s as easy as just clicking on Change Basic Shape and searching for the item you want. There’s a list of different options for the menus that you can pick from. Go for something that would tie into your website. Once you’ve got it, you can increase its height or size.

How to Pin Elements on Wix

Now, after adding elements using Wix Editor, some elements, like headers, social media icons, and navigation menus, need to be fixed in certain positions. So, if you want to show just the logo and menu item and nothing else, you can do a couple of modifications to pin these elements on Wix.

1. The first thing to do is to identify the element you want to pin, whether the logo or the menu item.
2. To pin the menu item, you can right-click it to reveal a dropdown menu.
3. From this dropdown menu, select Pin to Screen.
4. A new pop-up window appears on your screen, allowing you to set the position of this pinned menu item. Select an area on the grid that represents a side on your screen; You can choose to keep it on the top right, bottom right, top centre, or any area.
5. You can further adjust the menu item’s position to make sure it is placed exactly where you want it to be on the screen. Using the vertical and horizontal options, drag the slider under the vertical offset to move the menu item vertically or drag the slider under the horizontal offset to move it horizontally.
6. Now, it’s time to preview your website to see how the pinned menu item looks online. You’ll notice it’s fixed in the position you selected.

The same goes for any element. If you want to pin any other element as well, just right-click it and select Pin to Screen.

How to Change the Settings of A Pinned Element

What if you want to change the layout of a pinned element? If you want to unpin the menu item from its current position and place it in another area, follow the steps below:

1. Click on the pinned menu item.
2. Click the Pinned to Screen icon.
3. Change the settings of the element. For example, you can pin it to the top left instead of the top centre.

How to Add A Lightbox Item to Your Wix Website

Now, let’s have a working pinned item. We will use a trick with the lightbox. Click on the Plus icon at the top left and then choose Add an Element. In the search bar, type lightbox, and pick whatever you want. Here is how to add a lightbox to your Wix website.

1. Once you pick an element, go ahead and delete all the sections it has; however, keep the “X”.
2. Click Change Overlay Background and drag the slider under Opacity & Colour to 0%.
3. Now, click on the lightbox and then the layout icon.
4. Choose whether you want the lightbox to be positioned to the left or right side.
5. Click on the design icon and pick the colour you want.
6. Modify the lightbox and adjust it the way you want it to be.
7. Next, close the lightbox and go back to the Editor page.
8. Click on the three-dot icon “More Actions” on the right side of the screen.
9. From the dropdown menu, choose Header Scroll Settings.
10. Choose how you want the header when your visitors click on the menu item. You can hover over each option to see how it’s going to work. You can choose: scrolls with the site, freezes, disappears, or fades out.
11. On the strip, click the Change Strip Background icon and search for a relevant photo.

How to Unpin Elements on Wix

If you no longer need any pinned element on Wix, Wix allows you to unpin it. Here are the steps:

1. Click on the pinned element.
2. Click the Pinned to Screen icon.
3. Then, click unpin this element.

Important Tips on How to Pin Elements on Wix

To enhance the user experience on Your Wix website, consider the following tips:

• Avoid pinning too many elements, as they can disrupt and overwhelm the visitors.
• Pin elements that are essential for easy navigation. Pinning elements keep essential icons and buttons always visible to users and within their reach. Pinned elements could be your website logo, menu bar, social media icons, or contact information.
• Avoid pinning large elements, as they might block large areas of your website, preventing the visitors from seeing the content.
• Ensure the pinned elements remain visible and functional across different devices, including smartphones and tablets.
• Avoid pinning elements to both sides of the page, as they might overlap when the visitors view your website on a small screen.
• If you make changes or add new elements to your Wix website, implement regular testing to ensure every element is functional.
• Always test your website on various screen sizes to ensure an optimal experience for all users.

Pin Elements on Wix and Watch Your Website Come To Life

There’s a load of different things that you can do with Wix Editor, and it’s pretty much endless. It’s a great little tool that allows you to pin elements on Wix where you want them to be. Pinning elements on Wix can take your website design to the next level. It enhances user experience and creates a user-friendly website design.

If you have any questions at all, just leave them down in the comments section below.