In the 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.jpg

Web Pages

What are 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 pages, landing pages, one-page designs, advertising and information pages. In this demo we will talk about this type, web pages.

web-page-examples.jpg

Why to Use Groups (Containers)?

Groupping Elements. In the modern layouts, since the text in sections or pages is not dropped somehow, it is the common practice to combine or to group texts and graphic elements. In Nicepage HTML Website Builder Groups are usually used for that.

groupping.jpg

Using Rows. 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. If there is only one group, we recommend to use the Group instead of the Grid.

grid-container.jpg

What is the Group? In the modern websites texts are never placed by themselves. The Group is a control, which groups several elements, like headings, texts, icons, buttons, lines, and shapes.

What can you do with the Group ? The elements in the Group can be moved and modified. Since the Group is a block, it is very convenient to work with it, while building websites. You can move the Group as a single unit, or can change its dimensions.

expand.jpg

Mobile Views. The benefit of the Group is very obvious for the Responsiveness, for the Mobile Views. As for smaller screens, the Group adapts inner elements automatically to fit the screen width.

Using Group

Continer Control. In Nicepage HTML Website Builder the Group control is fully used in the pre-designed sections. As a rule, the Hero or Introduction sections and some other styles do not use the Grid. We use the Group to group elements. Groups are also used in titles in sections with the Grid.

intros.jpg

Adding Elements. Now let’s see how groups are used. Add a Group. Select Add -> Group or press the “C” hotkey. Let’s add elements. You can add text elements either via the Add menu, or by clicking the small plus at the top right corner of the selected Group . Also you can use the hotkeys which you can find in the Add menu to the right.

add-container.jpg

Reordering Elements. Select the Group. 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 Up/Down arrows, to switch the element order. Move the Icon over all other elements in the Group.

move.jpg

Expandability. 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.

expand-more-text.jpg

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

Group Customizing

Group Properties. There are several operations available for the selected Group in the Right Panel. It is very easy to add the common background under the Group elements. Enable the Fill in the Right Panel. Change the background color.

fill.jpg

Moving Elements. Move the element. Resize, if needed. Drag the element out and then drag it back into the Group. While moving in and out, you see the tooltip showing where the element is placed.

destination.jpg

Arranging Elements. Align the elements with the magnetic guides, that are very handy, as always. Also use the Auto-align in the Right Panel. Select the Group and click the Arrange buttons to align elements horizontally and vertically.

guides.jpg

Customizing Inner Spacing

Adding Paddings. It is also very easy to modify the inner space of the Group. Add horizontal padding by clicking and pulling the left orange marker to the right, and the right one - to the left.

padding.jpg

Adding Space Before. 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?

spacing.jpg

Groups and Responsive Modes

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

responsive.jpg

With this we are finishing our presentation about the Group. We do hope you have enjoyed it.

See Also

Get Started With Nicepage

In the Modern Web Design there are usually two types of pages: long-read articles and web pages. <div class="video-container"><iframe width="885" height="500" src="//www.youtube.com/embed/fzKggq5Nm0M?rel=0" frameborder="0" allowfullscreen></iframe></div> <br> 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.jpg! ##Web Pages## **What are 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 pages, landing pages, one-page designs, advertising and information pages. In this demo we will talk about this type, web pages. !web-page-examples.jpg! ##Why to Use Groups (Containers)?## **Groupping Elements**. In the modern layouts, since the text in sections or pages is not dropped somehow, it is the common practice to combine or to group texts and graphic elements. In Nicepage [HTML Website Builder](https://nicepage.com/html) Groups are usually used for that. !groupping.jpg! **Using Rows**. 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. If there is only one group, we recommend to use the Group instead of the Grid. !grid-container.jpg! **What is the Group?** In the modern websites texts are never placed by themselves. The Group is a control, which groups several elements, like headings, texts, icons, buttons, lines, and shapes. **What can you do with the Group ?** The elements in the Group can be moved and modified. Since the Group is a block, it is very convenient to work with it, while building websites. You can move the Group as a single unit, or can change its dimensions. !expand.jpg! **Mobile Views**. The benefit of the Group is very obvious for the Responsiveness, for the Mobile Views. As for smaller screens, the Group adapts inner elements automatically to fit the screen width. ##Using Group## **Continer Control**. In Nicepage [HTML Website Builder](https://nicepage.com/html) the Group control is fully used in the pre-designed sections. As a rule, the Hero or Introduction sections and some other styles do not use the Grid. We use the Group to group elements. Groups are also used in titles in sections with the Grid. !intros.jpg! **Adding Elements**. Now let’s see how groups are used. Add a Group. Select Add -> Group or press the “C” hotkey. Let’s add elements. You can add text elements either via the Add menu, or by clicking the small plus at the top right corner of the selected Group . Also you can use the hotkeys which you can find in the Add menu to the right. !add-container.jpg! **Reordering Elements**. Select the Group. 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 Up/Down arrows, to switch the element order. Move the Icon over all other elements in the Group. !move.jpg! **Expandability**. 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. !expand-more-text.jpg! You see that this element and the Group grow down automatically. The Group also grows while adding more controls. Change the Group Height and Width by pulling the markers on the Group borders. ##Group Customizing## **Group Properties**. There are several operations available for the selected Group in the Right Panel. It is very easy to add the common background under the Group elements. Enable the Fill in the Right Panel. Change the background color. !fill.jpg! **Moving Elements**. Move the element. Resize, if needed. Drag the element out and then drag it back into the Group. While moving in and out, you see the tooltip showing where the element is placed. !destination.jpg! **Arranging Elements**. Align the elements with the magnetic guides, that are very handy, as always. Also use the Auto-align in the Right Panel. Select the Group and click the Arrange buttons to align elements horizontally and vertically. !guides.jpg! ##Customizing Inner Spacing## **Adding Paddings**. It is also very easy to modify the inner space of the Group. Add horizontal padding by clicking and pulling the left orange marker to the right, and the right one - to the left. !padding.jpg! **Adding Space Before**. 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? !spacing.jpg! ##Groups and Responsive Modes## **Groups for Mobile Views**. What happens with the Group elements in the Mobile Views? Note again, the main benefit of using the Group is that, most times, you do not need to do any additional settings for the inner texts in the Responsive Modes. !responsive.jpg! With this we are finishing our presentation about the Group. We do hope you have enjoyed it. ##See Also - [Responsive Design with Nicepage](page:5249) - [Nicepage Builders](page:2364) - [Nicepage Menu](page:9801) - [Nicepage Grids](page:17389) - [Nicepage Blocks](page:18664) - [Nicepage on YouTube](https://www.youtube.com/playlist?list=PLrT1zCpaZbn5Td7n67dcjue4nba8VD9hh) - [Nicepage Video Tutorials](page:1318) ## Get Started With Nicepage - [HTML Website Builder](https://nicepage.com/html)