top of page
Search

Mastering Sections and Strips in Wix Editor: A Step-by-Step Tutorial

Welcome to a comprehensive tutorial on using sections and strips in the Wix Editor. If you’ve ever felt restricted by the tight margin guidelines or wanted to add more dimension and creative freedom to your website design, this guide will walk you through everything you need to know to harness the power of these two essential Wix features.




Sections and strips have transformed how content is organized and displayed on Wix websites, offering flexibility and layering effects that make your site look professional and polished. Let’s dive into how to use them effectively!





Understanding Sections in Wix

Sections are the fundamental building blocks for organizing content on Wix pages. This feature was introduced within the last couple of years, and it’s been a game-changer for Wix users. Before sections were available, managing content layout was more cumbersome and less intuitive.

Sections allow you to divide your page into distinct horizontal blocks that help keep your content organized and visually separated. Each section can have its own background, layout, and content elements, making it easy to create visually appealing and structured pages.

How to Add and Customize a Section

  1. In the Wix Editor, click the option to

    add a new section

    .

  2. You can choose from premade design sections or start with a blank section to add your own elements.

  3. Once the section is added, customize the background by selecting colors, images, or even videos.

For example, when adding an image background, you can adjust the opacity to let the background color show through or choose how the image is displayed (tile, original size, scale to fill, etc.).

You can also add video backgrounds to sections, which can add a dynamic and engaging feel to your site’s design.

Working with Content Inside Sections

Once your section is set up, you’ll want to add text, buttons, and other elements. However, when positioning these elements, you might encounter a warning message like:

This happens because Wix enforces margin guidelines to ensure your content looks good on all devices by keeping it within a safe area. You might wonder why elements like your logo or menu can be outside these margins but your other content can’t.

This is where strips come into play, giving you more flexibility and control over your layout.

Introducing Strips: Layering and Layout Freedom

Strips are layers that sit on top of sections and do not replace them. They offer a fantastic way to break free from the restrictive grid lines and add creative depth to your design.

Here’s why strips are so useful:

  • You can place content anywhere on a strip without worrying about the strict margin guidelines.

  • Strips stretch across the entire width of the page by default, but you can adjust the layout to align content left, center, or right.

  • You can add columns within strips, allowing for complex layouts with multiple content areas side by side.

How to Add and Customize a Strip

  1. Delete any content that’s causing layout issues in your section.

  2. Click

    Add Strip

    and select the strip style you want.

  3. Hover over the section you want the strip to overlay and add the strip.

  4. Adjust the strip’s background to opaque or transparent depending on your design.

  5. Click

    Layout

    to change content alignment (left, center, right) or to manage columns.

For instance, if you select left alignment, your content margin moves to the left, giving you space to place text and buttons more creatively without being confined to the center grid.

Using Columns in Strips

If you want to organize content into multiple areas within a strip, you can add columns. Each column can have its own layout alignment, allowing you to create balanced, visually appealing sections with text on one side and images or buttons on the other.

To manage columns:

  • Click

    Manage Columns

    on the strip.

  • Add or delete columns as needed.

  • Adjust the width and alignment of each column for your desired layout.

Combining Sections and Strips for Stunning Visuals

One of the most powerful ways to use sections and strips together is to create layered backgrounds, such as video backgrounds with overlaying text and buttons.

Here’s how to do it:

  1. Set a video background on a section.

  2. Add a strip on top of the section with a solid or semi-transparent background.

  3. Place your text, buttons, and other elements on the strip.

This approach allows you to keep your content readable while maintaining a dynamic video background that captures visitors’ attention right away.

Tips for Using Strips in Headers

Headers often need more space and flexibility because they contain essential elements like your logo, navigation menu, cart, and login buttons. Adding a strip to your header section can provide the extra room and breathing space you need.

With strips, you can:

  • Arrange header elements more freely without worrying about strict grids.

  • Keep the layout clean and organized.

  • Ensure your header looks great on all screen sizes.

This simple trick can significantly improve the look and usability of your site’s header.

Using Section URLs for Smooth Navigation

Another handy feature of sections is the ability to name them and create unique URLs that link directly to that part of the page. This is perfect for single-page sites or when you want to direct visitors to specific content without creating multiple pages.

Here’s how to set it up:

  1. Click on a section and rename it with a descriptive name (e.g.,

    Top of Home Page

    or

    Meet the Team

    ).

  2. Set the section URL slug (this is the part of the URL that points directly to the section).

  3. Copy the section URL for use in buttons, menus, or external links.

You can link buttons directly to these section URLs by selecting the Section or Anchor option when setting up the button’s link. This creates smooth, in-page navigation that enhances user experience.

Saving and Reusing Sections

Wix also allows you to save sections you love and reuse them across different pages or projects. This is a huge timesaver if you have a particular layout or design you want to keep consistent.

To save a section:

  1. Click on the section you want to save.

  2. Click the

    More Actions

    menu (three dots).

  3. Select

    Add to Saved Sections

    .

  4. Name your saved section and click Save.

Later, when adding a new section, scroll to the bottom of the section menu to find your saved sections and drag them onto your page.

Additional Section Management Tips

Sections also make it easier to manage website content, especially if you’re building sites for clients or large projects:

  • Rearranging Sections:

    You can drag and drop sections up or down to reorder your page quickly.

  • Quick Edit:

    Enables easy content updates without opening the full editor, perfect for clients who want to make minor text changes.

  • Duplicating Sections:

    Quickly replicate a section to maintain consistent styling.

  • Layer Management:

    Easily find and manage layers within a section to organize content hierarchy.

Final Thoughts on Sections and Strips

Sections and strips together provide a powerful toolkit for designing flexible, beautiful Wix websites. They help you organize your content, add creative layering, and break free from restrictive margins. Whether you’re adding video backgrounds, customizing headers, or creating smooth navigation with section URLs, mastering these features will elevate your site design.

Remember, the creative possibilities with sections and strips are nearly limitless. Don’t be afraid to experiment with different layouts, backgrounds, and alignments to find what works best for your site’s goals and aesthetic.

If you’re building a Wix website, make sections and strips your best friends—they’ll save you time and help you create stunning pages that visitors love.

Comments

bottom of page