Wix Editor: About the Mobile Editor
Want your site to look amazing on mobile? Use the mobile editor to create a mobile view that's fully functional and professional-looking. Change the background, hide desktop content and replace it with mobile-only elements. To enhance the experience even further, you can add elements like a Back to Top button and a Quick Action bar.In this article, learn more about:
Using the mobile editor Hidden desktop elements Customizing your mobile view Adding mobile-only elements Mobile toolsImportant:Click here to see a list of compatible mobile devices and browsers.Using the mobile editorYou can access the mobile editor anytime by clicking the Mobile icon  on the top of the editor. Your mobile view is a reflection of your desktop view, which means it displays all the same elements and content. Your fonts, images and elements are automatically resized for optimal view, which gives you time to make the mobile experience truly unique.The left-side menuOn the left side of the editor, you'll find the tools you need to customize your mobile-friendly view. Add new elements, navigate between site pages, even access hidden desktop elements.Hidden desktop elementsFor your convenience, Wix automatically creates a mobile-friendly version of your site using the content from your desktop site. In this process, elements that aren't optimized for mobile are automatically hidden (e.g., hover interactions, third-party apps and more).Click the Hidden Elements icon  on the left side of the editor to see these elements. If there are additional elements you don't want to display on mobile, you can hide and unhide them as you wish.Show me howTo hide an element:
Click the element in the mobile editor. Click the Hide Element icon .To unhide an element:
Click the Hidden Elements icon  on the left of the mobile editor. Click the Show Element icon  next to the element you want to show.Learn MoreCustomizing your mobile viewThe mobile Editor gives you full creative freedom while adjusting your site to mobile. You can make small adjustments and keep the same feel, or create a different look just for mobile. The design changes you make on mobile don't affect your desktop version.Click below to learn how to:Resize your mobile textYour text size is automatically optimized for your mobile view, however, you can make it as small or as big as you need.To change the size of your text:
Select the text in the mobile Editor. Click the Scale Up or Scale Down icons .Learn MoreAdd animation to an elementAnimations are an incredible addition to mobile sites as they make the experience more dynamic and engaging. You can add animation to any element, and there's a variety of effects to choose from, including "Puff-In", and "Reveal".To add animation to an element:
Select the relevant element in the mobile editor. Click the Animation icon . Select an animation from the available options. (Optional) Click Customize to adjust the animation's settings (e.g., Power, Duration, Delay).Learn MoreCustomize your mobile menuEvery part of your menu on mobile is fully customizable. This includes the icon that visitors click to open it, the box showing the menu as well as the menu items.Mobile Menu Icon: Select the icon on your page to customize it:
Click the Design  icon to adjust the design or choose a different preset. You can design the icon differently for when the menu is Open or Closed.  Click the Settings icon  to freeze it. This pins the icon to the page so it always stays at the top.  Click Edit Menu to access and design the menu box. Mobile Menu Box: Select the menu box to customize it:
Click Change Background to choose a different background color / image for this box.  Click the Design icon  to change the overlay color and / or opacity. Click the Layout icon  to change the way your menu opens: On the right, on the left or full screen.Mobile Menu: Select the menu element to customize it:
Click Change Background to choose a different background color / image for this box. Click the Design icon  to design the Selected and Regular states of the menu. You can change the color, border, text formatting, spacing and more. Click the Layout icon  to change the way your menu opens: On the right, on the left or full screen.Want to remove elements from the menu box? Remove an element from your menu (e.g., login bar, social bar) by right-clicking it and selecting Move To. You can move it to your site's header or footer without affecting the desktop view.Learn MoreRe-order your page sectionsRe-arrange the order of the sections on your site. To get the best perspective, zoom out first so you can see more of your current page. To re-order your page sections:
Click the Zoom Out & Reorder icon  on the top bar of the mobile Editor.  Re-order the sections in one of the following ways:
    
Click and drag the relevant section to the new location on the page. Click the Move Up  and Move Down  icons next to the relevant section. Learn more  Change a page's backgroundYou can change your page's background on mobile without affecting your desktop background. Choose a different color, image or video that's better suited for mobile.To change the background:
Click the relevant page in your mobile Editor. Click the Background icon  on the left of the mobile Editor. Select a background color, image or video. 
Learn MoreAdding mobile-only elementsThe mobile Editor lets you add as many elements as you need to your mobile view. These elements are completely optimized for mobile so you don't have to worry about sizing. You can add text, images, buttons, embeds and more directly from the Add panel. Elements that you add on mobile don't appear on the desktop version of your site. Mobile-only elements are marked with an icon  so you can easily understand what appears where. Tip:Mobile-only elements cannot be pasted to the desktop Editor. You can add elements to the desktop Editor with the Add panel.Mobile toolsThe Mobile Tools panel provides useful features that increase engagement and make site navigation much easier on mobile. Add a welcome screen to greet your visitors, a Quick Action bar to drive them to action, and a Back to Top button at the bottom of long pages. For visitors who are using Chrome on Android, you can also make the browser's theme color change once they enter your site.Show me how
Access the mobile Editor. Click Mobile Tools  on the left side of the mobile Editor. Click the Add to site icon  next to the element you want to add.Prefer keeping the desktop version?You can always disable the mobile-friendly view of your site.