top of page
  • Miss Wix

How to Add Shape Dividers to a Wix Studio Website

Ever looked at your Wix Studio website and thought, "This could use some excitement!"? At Miss Wix, we’re here to help you enhance your website’s design with Wix Studio shape dividers—an easy way to add movement and creativity.

Web design australia website wix editor wix studio template wix editor template white label web designer Travel website with paris city skyline as shape divider affordable wix website design australia new zealand
Paris Shape Divider. Oui

What are Wix Studio shape dividers anyway?

Shape dividers are graphic elements you can place at the top or bottom of a section on your Wix Studio website. They break away from standard straight lines, adding visual interest and smoother transitions between sections. Whether you want crisp angles or flowing curves, Wix Studio has a variety of designs to choose from, allowing you to elevate your website's style.


Whether you want sharp angles, fluid shapes, or themed graphics, there are a variety of designs available to suit your Wix website. There are also lots of customisation options available, so you can personalise your layout and create eye-catching Wix website pages.


Shape dividers are perfect for connecting or creating a smooth transition between visual content and a single colored section. Using the same colour for your shape divider as your strip on your Wix website page helped the image to be merged in across the section.


Web design australia website wix editor wix studio template wix editor template white label web designer Mexican restaurant flame shape divider Small business website design affordable wix SEO website development
Red Hot Flame Shape Divider.. Spicy.

How do Wix Editor shape dividers work?

The Shape Divider feature uses optimised SVG shapes, otherwise known as vectors, that are customised and ready to be attached to either the top or the bottom of the strips on your Wix website.

Wix developed this feature with a focus on ensuring the shapes were optimised, lightweight and ready to be viewed on any screen, resolution and device. Because the shapes are SVGs, they are always seen as high resolution, including on retina screens.


Enhancing Your Website Design with Wix Studio Shape Dividers

When it comes to elevating the visual appeal of your website, incorporating a Wix Studio Shape Divider can make a significant difference. These design elements are not only aesthetically pleasing but also help in creating a seamless flow between different sections of your site.


To begin, the process is simple - start by adding a shape divider to your strip. You have the flexibility to place dividers at the top, bottom, or even both ends of your strip, allowing for a customized look and feel.


One of the standout features of using Wix Studio Shape Dividers is the diverse range of shapes available for you to choose from. Whether you prefer a classic geometric design or a more intricate pattern, there is something to suit every style. Additionally, you have the option to explore the Wix Media catalog for even more design possibilities, ensuring that your website stands out from the crowd.


For those looking to add a personal touch to their website, Wix allows you to upload your own custom shape. This level of customization enables you to align the shape divider with your branding or overall theme, creating a cohesive and professional look.


Web design australia website wix editor wix studio template wix editor template white label web designer  How to Wix Editor strip shape divider small business website design papamoa Web design australia website wix editor wix studio template wix editor template white label web designer
Wix Studio Shape Divider Button

Adding Shape Dividers to your Wix Studio Website

Here’s how you can easily add a shape divider to your Wix Studio website:

  1. In Wix Studio, click on the section you want to edit.

  2. Select the Shape Dividers option (the red arrow in the screen shot above is pointing to the button).

  3. Choose to add a divider at the top or bottom of the section.

  4. Pick from the wide selection of pre-made shapes or upload your own custom shape for a personalized touch.


Web design australia website wix editor wix studio template wix editor template white label web designer

Customizing Your Wix Studio Shape Dividers

Once added, you can customize your Wix Studio shape divider by adjusting its color, size, and position. Wix Studio allows you to easily match the divider to your branding, ensuring it seamlessly blends into your website or stands out for a bold look.

  • Colors and Opacity: Choose colors that either blend with or contrast against the section’s background. Adjust opacity for more subtlety or boldness.

  • Height and Positioning: Set how high or low the divider appears and adjust its horizontal placement to create a custom effect.

  • Flip and Invert: Wix Studio gives you control to flip or invert dividers to create a different look.


Web design australia website wix editor wix studio template wix editor template white label web designer

How To Customise a Wix Studio Shape Divider:

  1. Click the Shape Dividers icon.

  2. Select the Customize Design button at the bottom of the pop up.

  3. Choose how you want to adjust the look of your shape divider:

    • Opacity & color: Select the color you want for your divider - a colour similar or the same as your strip helps to make the transition smooth - and change the opactity to whatever you like.

    • Height: Set how high or low you want the divider to be on the strip.

    • Horizontal offset: Position your shape divider to the right or left.

    • Layer effect: Click the toggle to add a fade effect to the divider, then select a direction from the drop-down:

      • Centered

      • Fade to top

      • Fade to bottom

    • Invert: Invert the shape of the divider to display vertically.

    • Flip: Flip the divider to display horizontally on your strip.


Can I Upload Custom Wix Studio Shape Dividers?

Yes! In Wix Studio, you can upload your own custom SVG shape dividers. This is perfect for adding unique, branded elements to your site. Your SVG files should be no larger than 250KB, with a width of 1920px and a height between 50-300px. Select "More Shapes" in and then upload your SVG File.


Web design australia website wix editor wix studio template wix editor template white label web designer

Are Shape Dividers Mobile-Friendly?

Absolutely! Wix Studio automatically carries over shape dividers to mobile versions of your site. These dividers are optimized for mobile, ensuring they look great on smaller screens without compromising functionality.


Tips for Using Wix Studio Shape Dividers

  • Make sure the shapes aren't so big that they hide your content.

  • Make it a solid colour

  • Check it on mobile and tablet and customise the width and height if needed.

  • Use them together with the parallax effect in your strips.


Web design australia website wix editor wix studio template wix editor template white label web designer  Pet groomer website designer wix strip shape divider small busines website design christchurch hamilton papamoa
Happy Dogs Wix Strip Divider

Final Thoughts

Shape dividers are an easy and creative way to add a dynamic touch to your Wix Studio website. Whether you want fluid transitions or bold designs, shape dividers can help improve your site's visual appeal and user experience.


Overall, by integrating Wix Studio Shape Dividers into your website design, you can enhance the user experience, draw attention to key content, and elevate the overall aesthetics of your site. Experiment with different shapes, placements, and designs to find the perfect combination that resonates with your brand identity.


Want some help getting some extra oomph with your Wix website? Get in touch with us today!

2 views0 comments

Comments


bottom of page