(function openLouie() { let louie = document.getElementById("Dropdown-Toggle-14"); louie.classList = "host-toggle w-dropdown-toggle w--open"; console.log(louie); })();

In cases where two or more elements come together, you can use the Spacer element to adjust the spacing. It is located under the Container category. You can add many elements, especially Display, Input type elements.

Adding Spacers

It comes with an automatic row/column when you drag and drop the spacer element from the Elements panel to an empty area on the screen. You can drag and drop into a row/column or panel element.

Spacer element;

  • Row > Column,
  • Panel,
  • Input (Textinput),
  • Currency,
  • Selectbox,
  • Checkbox and Switch you can add elements like.


You can add text and icons inside the spacer element. You can give role-based authorizations to the element as well as set its visibility with show/hide/conditional options.


Open the Properties panel Direction section. Choose from Horizontal or Vertical. Arranges embedded elements horizontally by default. With this selection, you can arrange the elements in the spacer horizontally or vertically.


Select the Spacer element. You can set the space value between the elements and the Size section in the Properties panel. It comes in 12px by default.


You can use the authorization options for the spacer element.


You can manage the visibility of the element. It is always visible, hidden, or you can make it appear or hide depending on a condition.


You can make additional edits by adding a spacer element to a frame, fill color, border or shadow.


You can make visual adjustments such as environmental interior spaces and sizing. Depending on the spacer size, you can align the elements in it.


You can add color or image to the spacer body.

Simplicity Meets High Performance

Free edition subscription
Keep your work
No credit card required to try