Wix Editor: Customizing Shape Dividers on Your Mobile Site

3 min read
Shape dividers are unique shapes you add to personalize the transition from one strip / section to another. Dividers you add on desktop automatically appear on your mobile site, and you can adjust them as needed.
In this article, learn more about:

How shape dividers work on mobile

As shape dividers are a desktop element, the two versions (mobile and desktop) are connected. If you do not edit the divider for mobile, changes you make on desktop are automatically applied to your mobile site. 
Once you customize a divider for your mobile site, changes you make on desktop no longer affect the mobile version. However, deleting the divider from the desktop Editor automatically deletes it from your mobile site. 
Note:
It is not possible to add mobile-only shape dividers.

Customizing dividers for your mobile site

You can customize dividers you add from the desktop Editor for mobile. Choose a new shape and effect, and adjust the color and size to complement the page's look.

To customize desktop dividers on mobile:

  1. Select your section or strip:
    • (For strips) Click the strip in your mobile Editor.
    • (For sections) Double-click the section in your mobile Editor.
  2. Click the Shape Dividers icon .
  3. Select either the Top or Bottom tab (if you have two dividers on the section or strip).
  4. Choose what you want to do with the shape divider:
    • Choose a new shape divider: Select a new divider shape.
    • Adjust the divider: Click Customize Design at the bottom of the panel to edit the divider with the options:
      • Opacity & color: Choose whatever color you want for your divider, and make it more or less visible on the strip / section.
      • Height: Set how high or low you want the divider to go on your section or strip.
      • Horizontal offset: Re-position your shape divider, moving it to the left or right. 
      • Layer effect: Click the toggle to add a fade effect to the divider, then select a direction from the drop-down:
        • Centered: The effect is visible on the entire divider.
        • Fade to top: The effect lessens towards the top of the divider.
        • Fade to bottom: The effect lessens towards the bottom of the divider.
      • Invert: Invert the shape of the divider (vertically).
      • Flip: Set the divider to display the opposite way (horizontally) on your strip / section.
      • Number of repeats: Set how many times the pattern repeats across the divider.
Note:
The available options depend on the shape you choose.
The design panel for a shape divider in the mobile Editor. The height is being adjusted.

Removing shape dividers from your mobile site

You can remove a shape divider from strips and sections if you feel it's not necessary for your mobile site. This doesn't affect your desktop site.

To delete a shape divider from mobile:

  1. Select your section or strip:
    • (For strips) Click the strip in your mobile Editor.
    • (For sections) Double-click the section in your mobile Editor.
  2. Click the Shape Dividers icon .
  3. Click the Top or Bottom tab (if you have two dividers on the strip or section).
  4. Select None in the panel. 
The shape dividerpanel in the mobile Editor. The option for 'None' has been selected.

Did this help?

|