top of page
This site was designed with the
.com
website builder. Create your website today.Start Now

For demonstration purposes, I’ll be using one of our Wix Website Templates​.

​

This guide will only discuss tools and elements that are used or featured in our templates. For the full range of features available with Wix please view this help article.

Screenshot 2021-01-24 at 20.01.16.png

Accessing the Mobile Editor

The desktop and mobile versions represent different viewing modes of the same site; they are not separate sites. Changes to your desktop site affect your mobile-friendly site. Changes to your mobile-friendly site are not reflected on your desktop site.


To access the mobile site editor:

  1. Click the Switch to Mobile icon on the top bar of the Editor.

Screenshot 2021-01-24 at 20.04.01.png

Resizing the Header and Footer on Your Mobile Site

  1. Click the header or footer in the mobile Editor.

  2. Click and drag the stretch handle at the bottom of the header or the top of the footer to resize.

Changing the Header Scroll Effect on Your Mobile Site

Screenshot 2021-01-24 at 20.08.36.png

  1. Click the header in your mobile Editor.

  2. Click Change Header Scroll.

  3. Select an option:

    • Scrolls with site: The header is always at the top of the site and scrolls with it.

    • Freezes: The header is always at the top of the mobile screen. This effect does not work if your header is larger than half the screen size.

    • Disappears: The header disappears when you scroll down the site, but is at the top of the screen when you scroll upward.

    • Fades Out: The header slowly disappears as you scroll down the page. It reappears as you scroll upward.

Screenshot 2021-01-24 at 20.12.01.png
Screenshot 2021-01-24 at 20.12.19.png

Customising Your Mobile Menu

Customising the Menu Icon

  1. Click the mobile menu icon.

  2. Click the Design icon .

  3. Select a design. You can hover over the icons to see what they look like when your visitors click the icon. 

  4. Click Customize Design to make further changes to it.

  5. Click the Closed and Open tabs and customize the icon using the design options available.

Customising the Mobile Menu Box

Screenshot 2021-01-24 at 20.16.57.png

  1. Click the mobile menu icon.

  2. Click Edit Menu.

  3. Click the mobile menu box.

  4. Click Change Background and choose the mobile menu box background.

  5. Click the Layouts icon and select a position on your mobile site.

Customise the Mobile Menu

Screenshot 2021-01-24 at 20.21.54.png

  1. Click the mobile menu icon.

  2. Click Edit Menu.

  3. Click the mobile menu.

  4. Click the Layouts icon and select the text alignment.

  5. Click the Design icon and customise the Regular and Selected states of the menu items using the following options:

    • Fill Colour & Opacity: Select the menu colours and opacity.

      1. Drag the slider to change the opacity.

      2. Click the colour box to change the colour.

      3. Select a colour from the Colour Picker.

      4. Click X to close the Colour Picker.

    • ​Text: Format the menu text, colour and size.

    • Borders: Design your menu's borders.

      1. Drag the slider to change the opacity.

      2. Click the colour box to change the colour.

      3. Drag the slider to change the width

    • Shadow: Design a shadow for your menu.

    • Spacing: Customise the menu border spacing.

Screenshot 2021-01-24 at 20.26.50.png

Viewing Your Mobile Pages

  1. Access the mobile Editor.

  2. Click Menus & Pages on the left side of the editor.

  3. Click a page to view it.

Note: You can also use the quick access Switch Page drop-down on the top bar of the mobile Editor.

Accessing the mobile editor
Resizing the header and footer
Changin the header scroll effect
Customising the mobile menu
Viewing your mobile pages
Screenshot 2021-01-24 at 20.28.28.png

Hiding and Unhiding Pages on Your Mobile Site

  1. Click Menus & Pages on the left side of the Editor.

  2. Click the relevant page.

  3. Click the Show More icon .

  4. Click Hide on mobile or Show on mobile.

Screenshot 2021-01-24 at 20.31.37.png

Changing Your Mobile Background

  1. Click the relevant page in your mobile Editor.

  2. Click Background on the left of the mobile Editor.

  3. Select a background or background type: 

    • Colour: Select a colour to set as your background.

    • Image: Select an image as your background.

    • Video: Select a Wix or ShutterStock Video or upload your own.

Hiding and unhiding pages
Changing your mobile background

Strips and Columns on Your Mobile Site

If you have strips or columns on your desktop site, they are displayed on your mobile site slightly differently. Instead of being arranged horizontally, your columns are displayed vertically, so that they are easier to view on mobile devices.

Screenshot 2021-01-24 at 20.34.10.png
Screenshot 2021-01-24 at 20.35.43.png
Screenshot 2021-01-24 at 20.37.32.png
Screenshot 2021-01-26 at 15.54.33.png

Resize a Strip or Column

  1. Click the relevant strip or column

  2. Drag the stretch handle up or down to make the column larger or smaller.

Reorder a Strip or Column

  1. Click the relevant strip.

  2. Click the Move Up or Move Down arrow until the column is in the desired position.

Hide a Strip or Column

  1. Click the relevant strip or column

  2. Click the Hide Element icon.

Change the Spacing of Columns

  1. Click the relevant strip.

  2. Click the Layouts icon .

  3. Drag the Column Spacing slider to increase or decrease the gap between the columns, or enter a value.

  4. Drag the Top & Bottom Padding slider to increase or decrease the space between the top and bottom of the strip, or enter a value. 

Strips and columns
Screenshot 2021-01-26 at 15.59.18.png
Screenshot 2021-01-26 at 16.01.55.png

Hiding & Unhiding Elements

Hiding an Element

  1. Click the element in the mobile Editor.

  2. Click the Hide Element icon.

Tip: You can also hide an element by pressing Delete on your keyboard.

Unhiding an Element

  1. Click Hidden Elements on the left side of the mobile Editor.

  2. Click the Show Element icon on the right of the relevant element.

Hiding and unhiding elements
Screenshot 2021-01-26 at 16.05.59.png

Adding a Back to Top Button

  1. Click the Mobile Tools icon on the left side of the mobile Editor.

  2. Click Back to Top Button.

  3. Click Change Icon to start customising your button.

Adding a back to top button
Screenshot 2021-01-26 at 16.15.26.png

Customising the Back to Top Button on Your Mobile Site

  1. Click your Back to Top Button in the mobile Editor.

  2. Click Change Icon.

  3. Select a preset icon or click the Add icon to choose from 1000’s of vector art images or upload your own.

  4. Click Customise Design to make further changes.

Screenshot 2021-01-26 at 16.17.13.png
Screenshot 2021-01-26 at 16.18.59.png
Screenshot 2021-01-26 at 16.20.54.png

Editing Text in the Mobile Editor

Changing the Size of Your Text

  1. Click the text in the mobile Editor.

  2. Click the Scale Up or Scale Down icons 

Changing the Colour of the Text

  1. Click the text in the mobile Editor.

  2. Click the Settings icon.

  3. Click the colour picker next to Colour to choose the colour of your text.

Changing the Text Alignment

  1. Click the text in the mobile Editor.

  2. Click the Settings icon .

  3. Select an Alignment option:

    • Left alignment: The text is aligned to the left side of the text box.

    • Centre alignment: The text is centred in the middle of the text box.

    • Right alignment: The text is aligned to the right side of the text box.

    • Justified: This stretches your text across the width of the text box.

Screenshot 2021-01-26 at 16.22.56.png

Changing the Layout of Your Mobile Social Bar

  1. Click the Social Bar in the mobile Editor.

  2. Click the Layouts icon.

  3. Drag the slider under Icon size to increase or decrease the size of the icons.

  4. Drag the slider under Spacing to increase or decrease the spacing between the icons.

  5. Select a layout under How does the bar look? 

    1. Horizontal: The Social Bar is displayed horizontally.

    2. Vertical: The Social Bar is displayed vertically.

Screenshot 2021-01-26 at 16.25.37.png
Screenshot 2021-01-26 at 16.26.41.png

Editing Your Lightbox

  1. Click Menus & Pages on the left side of the Editor.

  2. Click Lightboxes.

  3. Click the relevant lightbox.

  4. Edit your lighbox:

  5. Click the Settings icon to update your lightbox page settings.

    • The Settings icon is only visible if in the Lightbox Settings in your desktop Editor you clicked Yes under Automatically display lightbox on pages. 

    • Click the elements in your lightbox to customize, resize or hide them on your mobile site.

    • Click outside the lightbox to access the overlay, and then click the Settings icon to show or hide the overlay on your mobile site. 

    • Click the 'X' icon to edit it using the available options.

    • Click the 'Close button' to edit it using the available options.

Screenshot 2021-01-26 at 16.32.15.png
Screenshot 2021-01-26 at 16.35.24.png
Screenshot 2021-01-26 at 16.37.33.png

Customising Slideshows

Slideshow Size

  1. Click the slideshow in the mobile Editor. 

  2. Click and drag the stretch handle to adjust the height and width. 

Slideshow Settings

  1. Click the slideshow in the mobile Editor. 

  2. Click the Settings icon. 

    • Toggle autoplay on or off. 

    • Apply a transition effect.

    • Choose to hide or show content outside of the frame. 

Slideshow Layout

  1. Click the slideshow in the mobile Editor. 

  2. Click the Layouts icon.

    • Click the Show navigation arrows toggle on or off and drag the slider to adjust the size and offset. 

    • Click the Slide Buttons toggle on or off and drag the slider to adjust the size, offset and spacing.

​Note: Updating the order of the slides from the desktop Editor does not automatically update them for your mobile site. You can update the order of the slides for your mobile site by heading to the mobile Editor and hiding and then showing the slideshow.
Hiding and showing the slideshow resets the design. We recommend getting the slides into the correct order before adjusting the design.

Customising the back to top button
Editing text in the mobile editor
Changing the layout of the social bar
Editing your lightbox
Customising Slideshows
Reorder a strip or column
Hiding a strip or column
bottom of page