HOW TO: Design a Split Screen Menu in Wix Without Code
How to
Design a Split Menu on Wix
(without code)
On this blog, we talk a lot about branding every form of communication. Today, we have a simple upgrade to brand your site menu and give your users a more custom experience. This “glow up” is specific to our Wix site clients, but I’ve included some options for squarespace and wordpress at the end.
Wix has made so many custom options that require paid plugins on other platforms available for FREE on their platform. In my opinion, they’re advancements in design and SEO tools are quickly making them my preferred platform for clients. This tutorial is a prime example.
STEP 1: Add Lightbox
To add a split screen menu, login to wix as you would normally. When the editor window opens, click the plus sign to add an element. Add a lightbox and style as desired. Wix has a step-by-step tutorial you can follow here.
STEP 2: customize your design
Wix gives you tools to adjust the colors, fonts, spacing and more in your lightbox. To make this lightbox branded, I added a logo, background image and styled the menu with branded fonts. I often add a secondary icon or badge after the menu with social links and a brief brand message at the end. It’s a simple design that adds a luxe feel all without any custom coding!
STEP 3: Mobile styling
Wix also has a separate editor for your mobile view where you can add additional elements you only want on the mobile view, or hide elements you only want on the desktop view. I love this feature because I can swap out the logo for a centered alignment or remove the description if it’s too long.
Step 4: Set Your Trigger
To use your lightbox, you’ll need to set a trigger. In this case, I used an icon similar to a hamburger menu so this lightbox will pop up when that icon is selected. That’s it!
Are you not on wix but want a similar design for your site? We often design in Squarespace and Wordpress and have found some paid, third-party providers you can utilize to achieve this same look.
Squarespace SOLUTION
With the changes in Squarespace over the last two years, I’d likely opt for a third-party plugin to achieve this look. Unfortunately, that means this solution will only work for business plans on Squarespace. The best solution I’ve seen to achieve this same look is from SquareStylist here.
WORDPRESS SOLUTION
Want to spice up your menu, but don’t use wix? For Wordpress, I typically use Beaver Builder with Beaver Themer for Headers. To achieve this same look, I’d create a saved row with two columns and house the menu in column 1 and the image in column 2. To achieve the overlay, pop out, I’d use a module called, modal pop up box from Powerpack. This is also a fantastic module for delayed subscription boxes in case you’re looking for one.