Wix: Show/Hide/Switch element visibility across mobile/desktop (eg: banner ads)

The Wix website creator and editor is great for building a website in a visual way without coding and support for many drag and drop layouts and components that do not require graphic design or coding skills, after a basic layout is built, this automatically creates a mobile view with all the design elements added a page.

In most cases the mobile layout requires some "tweaks", these are usually size and positioning adjustments to suit mobile devices.

The mobile editor view has a very handy option to Hide elements on the mobile layout, this does not delete anything, only hides the elements. This is a great feature to strip down the mobile view into the most important items. Note: anything that is adjusted or hidden on the mobile editor view does not effect the Desktop design or layout.

Unfortunately the ability to hide elements is only available on the mobile layout and there is no way to hide items on the desktop layout or have similar elements switched for mobile and desktop displays.

Same Wix page on Desktop & Mobile

Underneath the surface of the Wix editor, is a power development platform called Corvid, this allows additional or custom coding to add functionality and can be used to build custom functionality, interactions and complete data driven web applications.

We are going to dig a little deeper to enable the ability to hide/show or switch elements between views, this solution has been simplified to enable this on your site quickly, even if you have very limited knowledge of Wix.

We are going to only scratch the surface into corvid by enabling "DevMode" and dropping in come code snippets . Once this is done, Showing/Hiding and effectively switching elements on the page will be controlled by changing the "id" value of the elements. The code we will use has 2 parts, these are 2 code snippets, or scripts (JavaScript code) that we will copy and paste into Wix.

1) Enable Dev Mode: On the top menu, click Dev Mode, then click Turn o Dev Mode

A code panel will now be displayed on the left hand side of the page.

2) Add Code snippets Click on the Code Files icon on the left to open the code files area, this is where custom code is added.

Then click 'Add a new File', enter filename so we create a new .js file called: wixElementVisibilitySwitcher.js (note the file extension .js) so we have:

This create a new with some default code, this is located at the bottom of the page: (note, ensure the new files is selected to ensure the correct code is displayed) We now want to replace this default code, with the first code snippet. The latest version of the wixElementVisibilitySwitcher.js code snippet is available here: https://github.com/brightertools/WixElementVisibilitySwitcher/blob/main/wixElementVisibilitySwitcher.js

(The code is held within GitHub, this is a code repository system to store code and is the industry standard for storing open-source code, linking to GitHub ensures the latest version will be used)

Remove all the existing code and paste all the this code into the wixElementVisibilitySwitcher.js file, to look something like this:

This new wixElementVisibilitySwitcher.js code file does all the work to locate and show/hide elements, we will now add the code that triggers this code each time a page loads. This code will be added to an existing file. Click the Page Code icon on the left hand code area:

In our example we can see code files for the HOME page (a code file will automatically be created for each page), we can also see a file called masterPage.js The page files will run for each page and the masterPage.js file will run for all pages within the site. We will be adding code to the masterPage.js file

If you have not modified the existing masterPage.js you can simply replace the default code with the following code snippet:

import {switchElementVisibility} from 'public/wixElementVisibilitySwitcher.js'
 
$w.onReady(function () {	
   switchElementVisibility();
});

(note: if you have previously modified your code, we are primarily interested in importing our new JavaScript file and adding switchElementVisibility(); to the page onReady event )

At this point, all the code has been added. We will now need to 'configure' elements to show and hide as required.

3) Configuring Element to show/hide

The code we have added will will look for elements on the page, specifically looking for id values that contain 'DesktopContent', 'TabletContent' or 'MobileContent' (case sensitive) within any part of the id. All other elements will not be effected.

For example: a Strip element with the name: HeroStrip1DesktopContentTabletContent will only be displayed on Desktop and Tablet views or a Strip element with the name: HeroStrip2MobileContent will only be displayed on Mobile views

4) Collapsed Content The area on the page that takes up the space on hidden items will be 'collapsed' by default. To prevent this, you can place also add 'NoCollapse' to the id of the element. This is useful if switched elements are stacked on top of each other in the editor.

For example: a Strip element with the name: HeroStrip1DesktopContentTabletContentNoCollapse will only be displayed on Desktop and Tablet views and will not collapse the area that it would have taken up on the page.

Conclusion

This code will allow showing and hiding elements that make sense for design and layouts on different screen from mobile to desktop, and can be used for switching content for example large and small banner ads (Google AdSense, Amazon Associate banners etc)

If you do not wish to see the Dev Mode tools these can now be switched off, anything, added in Dev Mode will continue to run.

If you have any questions, or issues with the code, please submit an issue on Github here. The latest version of the instructions and code will always be available here.