Wix Editor: Managing Sections on Your Mobile Site

5 min read
Your site is divided into sections so that your content is displayed in a neat, organized way. They also allow you to easily arrange your pages and elements.
Manage the sections on your mobile site to ensure a neat layout, and a smooth experience for mobile visitors.
In this article, learn how to:

Hiding sections from your mobile site

You can easily hide sections from the mobile version of your site in order to tailor it to your visitors. This doesn't affect your desktop site, and you can always show the section again if you change your mind.

To hide a section:

  1. Click the section in the mobile Editor.
  2. Click the Hide icon .
A section is selected in the mobile Editor. The cursor is hovering over the 'Hide' icon.

To show a hidden section:

  1. Click the Hidden on Mobile icon  on the left side of the mobile Editor.
  2. Click Show next to the relevant section.
The 'Hidden on Mobile' panel. The cursor is hovering over the 'Show' button next to a section that has been hidden.

Rearranging sections on your mobile site

Move the sections around to streamline the order in which information is displayed on your mobile site. This is especially useful if you'd like to highlight different content on the mobile version of your site, such as a map, or your business phone number.

To rearrange sections:

  1. Click the Zoom Out icon  on the top toolbar of the Editor.
  2. Click the section, then click one of the arrows:
    • Move section down Move the selected section below the section underneath it.
    • Move section up : Move the selection section above the section on top of it.
A section is selected in the mobile Editor. The cursor is hovering over the option to move it down.

Adding scroll effects to sections

Add a cool scroll effect to your section background create an eye-catching experience for mobile visitors on your site. Depending on the background type (color, image, or video), you can choose from a range of effects to give your mobile site an extra touch.

To add a scroll effect to a section background:

  1. Click the section in your mobile Editor.
  2. Click the Animation icon .
  3. Select your chosen scroll effect.
The scroll effect panel for a section in the mobile Editor. The 'Skew' option has been selected.
You should know:
Effect options displayed depend on the section's background type. Learn more about scroll effects on your mobile site

Customizing your section's shape divider

Shape dividers are graphic shapes that you use to organize your section content. When you add a shape divider to a section on the desktop Editor, it's automatically carried over to your mobile site.
Depending on your needs, you can adjust and customize the divider, or hide it from your mobile site. This doesn't affect your desktop site, so you can create layouts that best suit the needs of your mobile visitors.

To adjust a shape divider on mobile:

  1. Double-click the section in your mobile Editor.
  2. Click the Shape Dividers icon .
  3. Select either the Top or Bottom tab (depending on where you've added the divider).
  4. Choose how you want to adjust the shape divider for your mobile site:
    • Change the shape: Choose a new shape for your section:
      • Media from Wix: Select a new option in the panel, or click More shapes to browse and select an option from the Wix catalog.
      • Use your own: Click More shapes to open the Media Manager, then select Upload Media to upload and apply your own shape to the section.
    • Customize the design: Click Customize Design to change the look of your divider on your mobile site. Learn more about customizing a shape divider for mobile
    • Remove the divider: Click None in the panel to remove a divider from the section on your mobile site.
The Customize Design panel for divders on sections in the mobile Editor. The Height setting is being adjusted.
Note:
It is not possible to add a mobile-only shape divider to a section from the Add to Mobile panel. You can only change or adjust shape dividers you have added from the desktop Editor. Learn how to add a shape divider on desktop

Did this help?

|