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 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. Containers 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 Container instead of the Grid.

grid-container.jpg

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

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

expand.jpg

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

Using Containers

Continer Control. In Nicepage the Container 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 Container to group elements. Containers are also used in titles in sections with the Grid.

intros.jpg

Adding Elements. Now let’s see how containers are used. Add a Container. Select Add -> Container 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 Container. Also you can use the hotkeys which you can find in the Add menu to the right.

add-container.jpg

Reordering Elements. Select the Container. 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 Container.

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 Container grow down automatically. The Containers also grows while adding more controls. Change the Container Height and Width by pulling the markers on the Container borders.

Container Customizing

Container Properties. There are several operations available for the selected container in the Right Panel. It is very easy to add the common background under the Container 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 Container. 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 Container 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 Container. 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

For the Responsive Modes

Containers for Mobile Views. What happens with the Container elements in the Mobile Views? Note again, the main benefit of using the Container 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 Container. We do hope you have enjoyed it.

Subscribe to get more information on Nicepage Website Builder:

Nicepage YouTube Channel
Nicepage Pinterest
Nicepage Facebook

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 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. Containers 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 Container instead of the Grid. !grid-container.jpg! **What is the Container?** In the modern websites texts are never placed by themselves. The Container is a control, which groups several elements, like headings, texts, icons, buttons, lines, and shapes. **What can you do with the Container?** The elements in the Container can be moved and modified. Since the Container is a block, it is very convenient to work with it, while building websites. You can move the Container as a single unit, or can change its dimensions. !expand.jpg! **Mobile Views**. The benefit of the Container is very obvious for the Responsiveness, for the Mobile Views. As for smaller screens, the Container adapts inner elements automatically to fit the screen width. ##Using Containers## **Continer Control**. In Nicepage the Container 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 Container to group elements. Containers are also used in titles in sections with the Grid. !intros.jpg! **Adding Elements**. Now let’s see how containers are used. Add a Container. Select Add -> Container 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 Container. Also you can use the hotkeys which you can find in the Add menu to the right. !add-container.jpg! **Reordering Elements**. Select the Container. 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 Container. !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 Container grow down automatically. The Containers also grows while adding more controls. Change the Container Height and Width by pulling the markers on the Container borders. ##Container Customizing## **Container Properties**. There are several operations available for the selected container in the Right Panel. It is very easy to add the common background under the Container 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 Container. 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 Container 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 Container. 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! ##For the Responsive Modes## **Containers for Mobile Views**. What happens with the Container elements in the Mobile Views? Note again, the main benefit of using the Container 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 Container. We do hope you have enjoyed it. Subscribe to get more information on Nicepage Website Builder: [Nicepage YouTube Channel](http://youtube.com/nicepage) [Nicepage Pinterest](http://pinterest.com/nicepagecom) [Nicepage Facebook](http://facebook.com/nicepageapp)