1
Drag the Box element into the page area where you want to group content.
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.
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.
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.
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.
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.
7
Enter an Anchor ID if you want to create a link that jumps directly to this Box.
8
Enable Flex Display in the Box settings to arrange multiple elements inside.
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.
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.