In Modern Web Design, there are usually two types of 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.

web-pages.jpg

Web Page

What are web pages

Unlike articles, the text in web pages never takes the whole sheet width, stretching 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 page.

web-page-examples.jpg

Why Groups (Containers)?

Grouping Elements

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.

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 using the Group instead of the Grid.

grid-container.jpg

What is the Group?

In 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 undeniable for the Responsiveness for the Mobile Views. As for smaller screens, the Group adjusts inner elements automatically to fit the screen width.

Using Group

Group Element

In Nicepage HTML Website Builder, the Group 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 Group to group elements. Groups are also used in titles in Blocks with the Grid.

intros.jpg

Adding Elements

Now let’s see how groups are used.

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

Let’s add Elements into the Group. 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

  1. Select the Group.
  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. 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

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

Customizing Groups

Group Properties

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

  1. Enable the Fill in the Property Panel to the right.
  2. Change the Background Color.
fill.jpg

Moving Elements

  1. Move the elements.
  2. Resize, if needed.
  3. 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 Property Panel.

  1. Select the Group and
  2. Click the Arrange buttons to align elements horizontally and vertically.
guides.jpg

Customizing Paddings

Adding Paddings

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

Add horizontal padding by clicking and pulling the left 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 in Responsive Modes

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

See Also

Get Started With Nicepage

<div class="video-container"><iframe width="885" height="500" src="//www.youtube.com/embed/fzKggq5Nm0M?rel=0" frameborder="0" allowfullscreen></iframe></div> ## In Modern Web Design, there are usually two types of 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. !web-pages.jpg! ## Web Page ### What are web pages Unlike articles, the text in web pages never takes the whole sheet width, stretching 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 page. !web-page-examples.jpg! ## Why Groups (Containers)? ### Grouping Elements 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. 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 using the Group instead of the Grid. !grid-container.jpg! ### What is the Group? In 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 undeniable for the Responsiveness for the Mobile Views. As for smaller screens, the Group adjusts inner elements automatically to fit the screen width. ## Using Group ### Group Element In Nicepage [HTML Website Builder](https://nicepage.com/html), the Group 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 Group to group elements. Groups are also used in titles in Blocks with the Grid. !intros.jpg! ### Adding Elements Now let’s see how groups are used. 1. Add a Group. 2. Select Add -> Group or 3. Press the “Alt+P” hotkey. Let’s add Elements into the Group. 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 1. Select the Group. 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. 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 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 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. ## Customizing Groups ### Group Properties There are several operations available for the selected Group in the Right Panel. It is effortless to add the common background under the Group elements. 1. Enable the Fill in the Property Panel to the right. 2. Change the Background Color. !fill.jpg! ### Moving Elements 1. Move the elements. 2. Resize, if needed. 3. 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 Property Panel. 1. Select the Group and 2. Click the Arrange buttons to align elements horizontally and vertically. !guides.jpg! ## Customizing Paddings ### Adding Paddings It is also effortless to modify the inner space of the Group. Add horizontal padding by clicking and pulling the left 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 in Responsive Modes ### 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! ## 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) ##