Using the Wix Harmony Editor

Adding and customizing elements

Wix Harmony Editor: Adding and Customizing Boxes

Boxes are versatile building blocks, perfect for creating structured layouts and adding style to your site. Use boxes to group related content, such as images, text, or buttons, to keep your pages organized and visually appealing.

Whether you choose a ready-made design or customize a box from scratch, you have the flexibility to make the element match your vision.

Adding a box

Choose a box that works for your content and style goals. You can start with a blank box for a minimal look or use one of the many pre-designed options.

To add a box:

Go to your editor.
Click + Add at the top left of the editor.
Select Elements.
Click the Box icon
on the left.
Drag a box onto your page.

A screenshot of the box options in the Add panel.

Customizing a box

Once you add a box, you can transform its design to fit right in with your site. Adjust backgrounds, borders, corners, and shadows or fine-tune the spacing and layout to help your content stand out.

To customize a box:

Go to your editor.
Click the relevant box in the editor.
Choose what you want to customize:

Change the box background

Click Replace Background on the action bar.
Choose a color, a gradient, an image or a video for your background.
(Optional) Click the Opacity icon
and use the options to further adjust the background:
- Opacity: Drag the slider to make the background more or less visible.
- Apply glass effect: Enable the toggle to apply a glass effect, and use the slider to adjust its intensity.

Customize the box design

Click the All design options icon
on the action bar.
Design the box:
- Borders
  : Define the borders of your box so it stands out, choosing a color, width and style. Click the Edit individual borders icon
  to design each side of the border separately.
- Corners
  : Make the corners of your box more square or round by dragging the slider under Radius. Click the Edit individual corners icon
  to design each corner separately.
- Shadow
  : Apply inner and outer shadow to give the box an interesting 3D effect, setting the position, blurriness, color and more.

A screenshot of the design options for a box.

Attaching elements to a box

Boxes help keep your site neat and organized by letting you group elements together. When you drag elements (e.g. text, images, buttons) into a box, everything moves together. This keeps your pages tidy and ensures everything stays right where you want it as you move and rearrange your page.

Note:

An element must be smaller than the box in order to be attached to it.

To attach an element to a box:

Go to your editor.
Click the relevant element in the editor.
Drag it to its desired position in the container and drop it when you see Attach to Container.

A screenshot of the Attach to Container option.

FAQs

Click a question below to learn more about boxes.

I attached an element to the box but can't see the element. What happened?

When attaching elements to a box, the layers of the editor may cause them to be hidden behind the box. You might need to move your box backward and your elements forward for them to appear on the box.

Learn how to view and select overlapping elements.

Can I detach an element that is currently attached to the box?

Yes, simply drag and drop it outside of the box.

Need A Professional Website?
Contact Us Today!

I'm a paragraph. I'm connected