How to use the Box element to build responsive websites
Visit https://nicepage.com
More articles at https://nicepage.com/doc/article/1318...
Subscribe to find more information:
/ nicepage
/ nicepagecom
/ nicepageapp
In Modern Web Design, there are usually two types of pages: long-read articles and web pages. If you read a long text, for example, news, blog post, or any other long-read content, that usually takes the whole sheet width and height, then it is an Article.
Web Pages
Unlike articles, the text in web pages never takes the whole sheet width, stretching for 50% of a sheet or even less. Such texts are used in home, landing, one-page designs, advertising, and information pages. In this demo, we will talk about this type of web page.
Why Use Box?
In modern layouts, since the text in Blocks or Pages is not dropped somehow, it is common to combine or group texts and graphic elements. The Box is usually used for that.
If there are several groups in a row, then the Grid with cells is used. 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 group.
What is the Box? On modern websites, texts are never placed by themselves. The Box is a control that groups several elements, like headings, texts, icons, buttons, lines, and shapes.
What can you do with the Box? The elements in the Box can be moved and modified. Since the Box is a block, it is very convenient to work with it while building websites. You can move the Box as a single unit or change its dimensions.
The benefit of the Box is very obvious for the Responsiveness of the Mobile Views. As for smaller screens, the Box adapts inner elements automatically to fit the screen width.
Use Boxes
In Nicepage, the Box control is fully used in the pre-designed Blocks. As a rule, the Hero or Introduction Blocks and some other styles do not use the Grid. We use the Box to group elements. Boxes are also used in titles in Blocks with the Grid.
Now let’s see how Boxes are used. Add a Box. Select Add - Box or press the “C” hotkey. Let’s add elements. 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.
Select the Box. Add Heading 2, Text, and Button. Let’s also add an Icon. Click Add - Icon, or press the “I” hotkey. In the dialog, enter “idea” into the search field. Select this Icon. To change the element order, select the element. In the element toolbar, click the Up and the Down Arrows, or press Ctrl with the Up/Down arrows to switch the element order. Move the Icon over all other elements in the Box.
To add an element after the current one, select this element, then add a new one via the Add menu. Click Add - Text - Subtitle. Modify the Subtitle. Add more text into 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 Boxes
There are several operations available for the selected Box in the Right Panel. It is very easy to add the common background under the Box elements. Enable the Fill in the Right Panel. Change the background color.
Move the element. Resize if needed. Drag the element out and then drag it back into the Box. While moving in and out, you see the tool-tip showing where the element is placed.
Align the elements with the magnetic guides, which are very handy. Also, use the Auto-align in the Right Panel. Select the Box and click the Arrange buttons to align elements horizontally and vertically.
Edit Padding
It is also very easy to modify the inner space of the Box. Add horizontal padding by clicking and pulling the left orange marker to the right and the right 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?
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.
With this, we are finishing our presentation about the Box.