Wix Editor: Adding and Customizing Boxes on Your Mobile Site

4 min read
Boxes help to frame, organize and structure the content on your mobile site. Refine the boxes carried over from your desktop version, and customize the ones you add from the mobile editor.
When you add boxes from the mobile editor, you can fully customize their borders, shadows, colors, and spacing. When editing boxes carried over from your desktop site, you can only edit their animations or hide them.

Learn more about customizing boxes:

Not sure if it's a mobile or desktop element?
Mobile-only elements display a Mobile icon  when you click them.

Boxes carried over from your desktop version

Adding boxes to the desktop version of your site automatically adds them to your mobile site. You can add an animation or hide the box.
Note:
Hover interactions are not available on mobile.

To customize boxes carried over from desktop:

  1. Click the box in your mobile editor.
  2. Choose how to customize your box:
    • Add an animation: 
      1. Click the Animation icon .
      2. Select the animation you want to apply to your box.
      3. (Optional) Click Customize to further adjust your animation's settings.
    • Hide the box:
      1. Click the Hide Element icon  to hide the box from your mobile site.
Tip:
To unhide an element, click the Hidden on Mobile icon undefined on the left of the Mobile Editor. Then, click Show next to the relevant element to display it on your mobile site.

Boxes added from the mobile editor

Add a container box directly to your mobile site. Choose from a range of preset designs for your box and customize its color(s), border(s), corners, shadows and spacing.

To add and customize mobile-only boxes:

  1. Click the Add to Mobile icon  on the left.
  2. Click Box.
  3. Click the box you want to add to your site.
  4. Click the Design icon .
  5. Click Customize Design and edit your box.

Did this help?

|