Modern Web Design usually has two pages: long-read articles and web pages. It is an article if you read a long text, such as news, blog posts, or any other long-read content that usually takes the whole sheet width and height.

The Box is an Element that combines elements like headings, texts, icons, buttons, lines, and shapes, allowing you to add a background or border.

More video lessons

The Box's benefit in terms of Responsiveness to Mobile Views is undeniable. The Box adjusts inner elements automatically for smaller screens to fit the screen width.

Add Elements To Box

Now let’s see how Boxes are used.

  1. Add a Box.
  2. Select Add -> Box or
  3. Press the “Alt+P” hotkey.

Let’s add Elements to the Box. You can add text elements via the Add menu or by clicking the small plus at the top right corner of the selected Box. You can also use the hotkeys in the Add menu to the right.

Move Elements

  1. Select the Box.
  2. Add Heading 2, Text, and Button.

Let’s also add an Icon.

  1. Click Add -> Icon, or
  2. Press the “Alt+O” hotkey.

In the dialog, enter “idea” into the search field. Select this Icon. To change the element order, select the element. Click the Up and the Down Arrows in the element toolbar or press Ctrl with the Up/Down arrows to switch the element order.

Move the Icon over all other elements in the Box.

Add More Elements

Add an element after the current one, select this element, and then add a new one via the Add menu.

  1. Click Add-> Text -> Subtitle.
  2. Modify the Subtitle.
  3. Add more text to the text element.

You see that this element and the Box grow down automatically. The Box also grows while adding more Elements. Change the Box Height and Width by pulling the markers on the Box borders.

Customize Box

In the Property Panel, several operations are available for the selected box. Adding the common background under the Box elements is effortless.

  1. Enable the Fill in the Property Panel to the right.
  2. Change the Background Color.
  3. Move the elements.
  4. Resize, if needed.
  5. Drag the element and then drag it back into the Box.

While moving in and out, you see the tooltip showing where the element is placed.

Arrange Elements

The magnetic guides are very handy for aligning the elements. You can also use Auto-align in the Property Panel.

  1. Select the Box and
  2. Click the Arrange buttons to align elements horizontally and vertically.

Padding And Spacing

You can add horizontal padding by clicking and pulling the left marker to the right and the right one to the left. You can modify the Spacing and Alignment properties for the Box element. In the Property Panel, select a Box and see the Top, Bottom, Left, and Right Spacing.

Align Box

You can also apply the Alignment to a Box by clicking the corresponding icons at the top of the Property Panel.

Box In Responsive Modes

The main benefit of using the Box is that you do not usually need to make additional settings for the inner texts in the Responsive Modes.

Unbox In Box Options

You can now use the Unbox option, which we have added to the Box Options.

unbox-options.png

See Also

Modern Web Design usually has two pages: long-read articles and web pages. It is an article if you read a long text, such as news, blog posts, or any other long-read content that usually takes the whole sheet width and height. The Box is an Element that combines elements like headings, texts, icons, buttons, lines, and shapes, allowing you to add a background or border. ### <iframe style="width: 96%; aspect-ratio: 16 / 9;" src="https://www.youtube.com/embed/_c4MX0JZjWU" title="Box Element" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ### [More video lessons](page:1318) The Box's benefit in terms of Responsiveness to Mobile Views is undeniable. The Box adjusts inner elements automatically for smaller screens to fit the screen width. ## Add Elements To Box Now let’s see how Boxes are used. 1. Add a Box. 2. Select Add -> Box or 3. Press the “Alt+P” hotkey. Let’s add Elements to the Box. You can add text elements via the Add menu or by clicking the small plus at the top right corner of the selected Box. You can also use the hotkeys in the Add menu to the right. ### Move Elements 1. Select the Box. 2. Add Heading 2, Text, and Button. Let’s also add an Icon. 1. Click Add -> Icon, or 2. Press the “Alt+O” hotkey. In the dialog, enter “idea” into the search field. Select this Icon. To change the element order, select the element. Click the Up and the Down Arrows in the element toolbar or press Ctrl with the Up/Down arrows to switch the element order. Move the Icon over all other elements in the Box. ### Add More Elements Add an element after the current one, select this element, and then add a new one via the Add menu. 1. Click Add-> Text -> Subtitle. 2. Modify the Subtitle. 3. Add more text to the text element. You see that this element and the Box grow down automatically. The Box also grows while adding more Elements. Change the Box Height and Width by pulling the markers on the Box borders. ## Customize Box In the Property Panel, several operations are available for the selected box. Adding the common background under the Box elements is effortless. 1. Enable the Fill in the Property Panel to the right. 2. Change the Background Color. 3. Move the elements. 4. Resize, if needed. 5. Drag the element and then drag it back into the Box. While moving in and out, you see the tooltip showing where the element is placed. ### Arrange Elements The magnetic guides are very handy for aligning the elements. You can also use Auto-align in the Property Panel. 1. Select the Box and 2. Click the Arrange buttons to align elements horizontally and vertically. ### Padding And Spacing You can add horizontal padding by clicking and pulling the left marker to the right and the right one to the left. You can modify the Spacing and Alignment properties for the Box element. In the Property Panel, select a Box and see the Top, Bottom, Left, and Right Spacing. ### Align Box You can also apply the Alignment to a Box by clicking the corresponding icons at the top of the Property Panel. ## Box In Responsive Modes The main benefit of using the Box is that you do not usually need to make additional settings for the inner texts in the Responsive Modes. ## Unbox In Box Options You can now use the Unbox option, which we have added to the Box Options. !unbox-options.png! ## See Also - [Responsive Design with Nicepage](page:5249) - [How to use the Menu element](page:9801) - [How to use the Grid element](page:17389) - [How to use the Block](page:18664) ##