Edit Content

How do I use a Box to group elements together and control its padding?

How do I use a Box to group elements together and control its padding?

1
Drag the Box element into the page area where you want to group content.
Screenshot for step 1
2
In the settings panel, open Color to set a background: – Click on the color swatch inside Background Color. – Use the color picker or move the sliders to adjust hue, saturation, and brightness.
Screenshot for step 2
3
You can also use the Eyedropper to select any color from the page, and apply it as the Box background to make it match or complement other elements on your design.
Screenshot for step 3
4
Switch to the Dark Mode tab if you want to set a background color for dark mode, then select and adjust in the same way.
Screenshot for step 4
5
To replace the solid color with a media background, clickSelect Image to open the media library. Choose the file you want, and it will be applied as the Box background.
Screenshot for step 5
6
Scroll to the Padding settings. – Adjust the values for top, bottom, left, and right using the arrows or by typing numbers directly. – Padding controls the inner spacing of the Box, keeping elements away from the edges for better readability.
Screenshot for step 6
7
Enter an Anchor ID if you want to create a link that jumps directly to this Box.
Screenshot for step 7
8
Enable Flex Display in the Box settings to arrange multiple elements inside.
Screenshot for step 8
9
Use Flex Settings to control layout: – Flex Direction (Row or Column) changes whether elements sit side by side or stack vertically. – Align Items adjusts vertical alignment when using a column layout. – Justify Content controls horizontal spacing when using a row layout.
Screenshot for step 9
10
Set Flex Wrap to No Wrap (keep elements on one line) or Wrap (allow them to flow onto a new line), then preview and save your changes.
Screenshot for step 10