Summary

  • Overview
  • Video Lesson
  • About Web Page
  • About Box Element
  • Why Use Box
  • Start With Box
    • Add Elements To Box
    • Move Elements
    • Add More Elements
  • Customize Box
    • Arrange Elements
    • Edit Padding And Spacing
    • Align Box
  • Box In Responsive Modes

Overview

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

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

Video Lesson

See Also

More video lessons

Web Page

Unlike articles, the text on web pages never takes the whole sheet width, stretching 50% of a sheet or even less. Such texts are used in homes, landings, one-page designs, advertising, and information pages.

About Box Element

Combining texts and graphic elements is expected since the text in Blocks or pages is not dropped. The Box is usually used in Nicepage HTML Website Builder.

grid-box.jpg

The Grid with cells is used if there are several Boxes in a row. Watch the demo on the Responsive Modes to see how to use grids. We recommend using the Box instead of the Grid if there is only one Box.

Why Use Box

On modern websites, texts are never placed by themselves. The Box is a control that combines several elements, like headings, texts, icons, buttons, lines, and shapes.

The elements in the Box can be moved and modified. Since the Box is a block, working with it while building websites is very convenient. You can move the Box as a single unit or change its dimensions.

The benefit of the Box is undeniable for the Responsiveness of Mobile Views. As for smaller screens, the Box adjusts inner elements automatically to fit the screen width.

Start With Box

In Nicepage HTML Website Builder, the Box control is fully used in the pre-designed Blocks. As a rule, the Hero or Introduction Blocks and other styles do not use the Grid. We use Box-to-Box elements. Boxes are also used in titles in Blocks with the Grid.

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. Also, you can use the hotkeys, which you can find 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, 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 controls. Change the Box Height and Width by pulling the markers on the Box borders.

Customize Box

There are several operations available for the selected Box in the Property Panel. It is effortless to add the common background under the Box elements.

  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

Align the elements with the magnetic guides that are very handy, as always. Also, use Auto-align in the Property Panel.

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

Edit Padding And Spacing

It is also effortless to modify the inner space of the Box.

Add horizontal padding by clicking and pulling the left marker to the right and the right one - to the left.

Add spacing between elements. Click and pull the orange marker at the top of the text element. You see that all Elements placed below the current one are also moved. Isn’t that nice?

You can modify the Spacing and Alignment properties for the Box element. Select a Box and see the Top, Bottom, Left, and Right Spacing in the Property Panel.

Align Box

Also, you can apply the Alignment to a Box by clicking the corresponding icons at the top of the Property Panel.

Box In Responsive Modes

What happens with the Box elements in the Mobile Views? Note again, the main benefit of using the Box is that, most times, you do not need to do any additional settings for the inner texts in the Responsive Modes.

See Also

## Summary - Overview - Video Lesson - About Web Page - About Box Element - Why Use Box - Start With Box - Add Elements To Box - Move Elements - Add More Elements - Customize Box - Arrange Elements - Edit Padding And Spacing - Align Box - Box In Responsive Modes ## Overview Modern Web Design usually has two pages: long-read articles and web pages. If you read a long text, such as news, blog post, or any other long-read content that usually takes the whole sheet width and height, it is an Article. The Box is an Element control that combines elements like headings, texts, icons, buttons, lines, and shapes, allowing you to add a background or border. ## Video Lesson ## <iframe width="600" height="340" src="https://www.youtube.com/embed/_c4MX0JZjWU" title="Nicepage Lesson: Box Element" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ### See Also [More video lessons](page:1318) ## Web Page Unlike articles, the text on web pages never takes the whole sheet width, stretching 50% of a sheet or even less. Such texts are used in homes, landings, one-page designs, advertising, and information pages. ## About Box Element Combining texts and graphic elements is expected since the text in Blocks or pages is not dropped. The Box is usually used in Nicepage [HTML Website Builder](https://nicepage.com/html). !grid-box.jpg! The Grid with cells is used if there are several Boxes in a row. Watch the demo on the Responsive Modes to see how to use grids. We recommend using the Box instead of the Grid if there is only one Box. ## Why Use Box On modern websites, texts are never placed by themselves. The Box is a control that combines several elements, like headings, texts, icons, buttons, lines, and shapes. The elements in the Box can be moved and modified. Since the Box is a block, working with it while building websites is very convenient. You can move the Box as a single unit or change its dimensions. The benefit of the Box is undeniable for the Responsiveness of Mobile Views. As for smaller screens, the Box adjusts inner elements automatically to fit the screen width. ## Start With Box In Nicepage [HTML Website Builder](https://nicepage.com/html), the Box control is fully used in the pre-designed Blocks. As a rule, the Hero or Introduction Blocks and other styles do not use the Grid. We use Box-to-Box elements. Boxes are also used in titles in Blocks with the Grid. ### 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. Also, you can use the hotkeys, which you can find 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, 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 controls. Change the Box Height and Width by pulling the markers on the Box borders. ## Customize Box There are several operations available for the selected Box in the Property Panel. It is effortless to add the common background under the Box elements. 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 Align the elements with the magnetic guides that are very handy, as always. Also, use Auto-align in the Property Panel. 1. Select the Box and 2. Click the Arrange buttons to align elements horizontally and vertically. ### Edit Padding And Spacing It is also effortless to modify the inner space of the Box. Add horizontal padding by clicking and pulling the left marker to the right and the right one - to the left. Add spacing between elements. Click and pull the orange marker at the top of the text element. You see that all Elements placed below the current one are also moved. Isn’t that nice? You can modify the Spacing and Alignment properties for the Box element. Select a Box and see the Top, Bottom, Left, and Right Spacing in the Property Panel. ### Align Box Also, you can apply the Alignment to a Box by clicking the corresponding icons at the top of the Property Panel. ## Box In Responsive Modes What happens with the Box elements in the Mobile Views? Note again, the main benefit of using the Box is that, most times, you do not need to do any additional settings for the inner texts in the Responsive Modes. ## 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) ##