Visit https://nicepage.com
More articles at https://nicepage.com/doc/article/1318/video-tutorials
Subscribe to find more information:
https://youtube.com/nicepage
https://pinterest.com/nicepagecom
https://facebook.com/nicepageapp
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
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.
Why to Use Containers?
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.
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.
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.
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
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.
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.
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.
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 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
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.
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 tool-tip showing where the element is placed.
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.
Customizing Inner Spacing
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.
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?
Containers and Responsive Modes
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.
With this we are finishing our presentation about the Container.