Before 2010 the most of web pages had a height of a desktop screen. And each of those pages covered some specific topic of a website, such are: Home, Products, About Us, Contact Us and others. To go to pages, visitors usually clicked the corresponding links in the Menu.

Sections vs. Pages

What are Sections? There are still many websites, which use the traditional Navigation, although it is not very convenient, especially for the mobile devices. Generally, the modern web layouts combine several pages in one longer one. All the information is put into separate parts. The menu still may have links but to parts, not to separate pages.

section-vs-pages.jpg

Section Tag. There are parts, and so there is a need to manage them separately. Such layouts are very popular and known as One-Page Designs. Such web page parts are called Sections. Even in the HTML language, the "SECTION" special tag was introduced. Now, it is widely used in the markup of web pages with Sections.

sections.jpg

Building Websites from Sections. Since their first appearance, Sections became the main building blocks in the modern Web Design. Building web pages out of Sections is like building toy towers out of the LEGO bricks.

lego-sections.jpg

Section Types

Section Types. Add a New Website. Note the new page is created with the blank section. Add new section. You can add blank sections, blank sections with grids, premade sections or use the Section Builder.

Section Builder. In the “New Section” dialog click “Builder”. The Nicepage Intellectual Services allow generating sections from provided images and texts. You can upload images from your PC, use posts in social accounts or search online. In this demo we will use free images. In the Builder select images. Pick texts. Finally, select a design for your section. Click Done. Your new section is ready. That simple!

new-section.jpg

Premade Sections. Let’s add premade sections. Add a New Section. There are over a thousand of pre-designed sections available. All premade designs were selected based on the thorough research. The section are categorized by functions, such are: Introduction, Images and Text, About Us, Contact Us and Map, etc.

Operations with Sections

Section Navigator. Add an Introduction section. Select this design and click Done. Now add a section from the Images and Texts category. Sections in the Images and Texts category are grouped by layouts. Select this design and click Done. Very easy!

page-navigator.jpg

What you can do with Sections? First, you can change the layout, it’s very handy since, you can unlike the design you have just selected. Click the Change button in the Right Panel. Select another style, then close the list. Change the Section order in the Page Navigator to the left. Move the Introduction section up.

section-copy.jpg

Section Menu. In the Page Navigator each section has a menu with options to add, to duplicate and to delete a section. Also you can add, duplicate and delete sections in the Editor and the Panel to the Right.

Section Copy. Let’s copy the current section in the Editor. Use the Copy in the context menu, or press the CTRL + C keys, and the Paste in the context menu, or press the CTRL + V keys. Move the copied section up in the Page Navigator.

delete-section.jpg

Section Delete. To delete a section select the Delete option from the Section Menu. To delete a section, click the “Delete Section” button in the Property Panel to the right.

Section Editing

Section Background. Enable the “Fill” for the current section in the Right Panel. Change the Color to light grey. Flip the Section. Select the Introduction section. Enable the Parallax effect for the Background Image.

parallax.jpg

Section with the Grid. Select the section with the Grid. This section has the Boxed layout, it is sheet-wide.

sheet.jpg

To make this section screen-wide enable the Wide property, supported for sections with grids. Make cosmetic changes. Please also watch the video on how to use Grids in Nicepage.

One-Page Navigation

Changing Anchors. Earlier we talked about the One-Page Design. The navigation of such websites is done using the anchor links in the Menu. Change the default values in the Section Anchor property for each section.

section-anchors.jpg

Menu Editing. Edit the menu in the Header. Select the Menu in the Header. Click the Edit Menu button in the Right Menu. Modify the Caption and the Destination for the first link on the current page. Add new links and specify the destinations to other section anchors.

edit-menu.jpg

Responsive Modes

Mobile-friendliness. As a reminder, to make any section look good on all devices automatically, the content in sections should be put in containers and grids.

container-grid.jpg

Watch the demos on Containers, Grids and Responsive Web Design. Note that sections in this demo are mobile-friendly at once, all with no settings, and, certainly, with no coding.

preview.jpg

Page Preview. Click the Device Icons in the Top bar to change the View. The responsiveness is done automatically. Preview the page. You see the Parallax effect on the Introduction section. Click the links in the menu to navigate to sections.

We are done with the demo on how to use Sections in Nicepage.

Subscribe to get more information on Nicepage Website Builder:

Nicepage YouTube Channel
Nicepage Pinterest
Nicepage Facebook

Before 2010 the most of web pages had a height of a desktop screen. And each of those pages covered some specific topic of a website, such are: Home, Products, About Us, Contact Us and others. To go to pages, visitors usually clicked the corresponding links in the Menu. <div class="video-container"><iframe width="885" height="500" src="//www.youtube.com/embed/Zjw5bPvFry0?rel=0" frameborder="0" allowfullscreen></iframe></div> ##Sections vs. Pages## **What are Sections?** There are still many websites, which use the traditional Navigation, although it is not very convenient, especially for the mobile devices. Generally, the modern web layouts combine several pages in one longer one. All the information is put into separate parts. The menu still may have links but to parts, not to separate pages. !section-vs-pages.jpg! **Section Tag**. There are parts, and so there is a need to manage them separately. Such layouts are very popular and known as One-Page Designs. Such web page parts are called Sections. Even in the HTML language, the "SECTION" special tag was introduced. Now, it is widely used in the markup of web pages with Sections. !sections.jpg! **Building Websites from Sections**. Since their first appearance, Sections became the main building blocks in the modern Web Design. Building web pages out of Sections is like building toy towers out of the LEGO bricks. !lego-sections.jpg! ##Section Types## **Section Types**. Add a New Website. Note the new page is created with the blank section. Add new section. You can add blank sections, blank sections with grids, premade sections or use the Section Builder. **Section Builder**. In the “New Section” dialog click “Builder”. The Nicepage Intellectual Services allow generating sections from provided images and texts. You can upload images from your PC, use posts in social accounts or search online. In this demo we will use free images. In the Builder select images. Pick texts. Finally, select a design for your section. Click Done. Your new section is ready. That simple! !new-section.jpg! **Premade Sections**. Let’s add premade sections. Add a New Section. There are over a thousand of pre-designed sections available. All premade designs were selected based on the thorough research. The section are categorized by functions, such are: Introduction, Images and Text, About Us, Contact Us and Map, etc. ##Operations with Sections## **Section Navigator**. Add an Introduction section. Select this design and click Done. Now add a section from the Images and Texts category. Sections in the Images and Texts category are grouped by layouts. Select this design and click Done. Very easy! !page-navigator.jpg! **What you can do with Sections?** First, you can change the layout, it’s very handy since, you can unlike the design you have just selected. Click the Change button in the Right Panel. Select another style, then close the list. Change the Section order in the Page Navigator to the left. Move the Introduction section up. !section-copy.jpg! **Section Menu**. In the Page Navigator each section has a menu with options to add, to duplicate and to delete a section. Also you can add, duplicate and delete sections in the Editor and the Panel to the Right. **Section Copy**. Let’s copy the current section in the Editor. Use the Copy in the context menu, or press the CTRL + C keys, and the Paste in the context menu, or press the CTRL + V keys. Move the copied section up in the Page Navigator. !delete-section.jpg! **Section Delete**. To delete a section select the Delete option from the Section Menu. To delete a section, click the “Delete Section” button in the Property Panel to the right. ##Section Editing## **Section Background**. Enable the “Fill” for the current section in the Right Panel. Change the Color to light grey. Flip the Section. Select the Introduction section. Enable the Parallax effect for the Background Image. !parallax.jpg! **Section with the Grid**. Select the section with the Grid. This section has the Boxed layout, it is sheet-wide. !sheet.jpg! To make this section screen-wide enable the Wide property, supported for sections with grids. Make cosmetic changes. Please also watch the video on how to use Grids in Nicepage. ##One-Page Navigation## **Changing Anchors**. Earlier we talked about the One-Page Design. The navigation of such websites is done using the anchor links in the Menu. Change the default values in the Section Anchor property for each section. !section-anchors.jpg! **Menu Editing**. Edit the menu in the Header. Select the Menu in the Header. Click the Edit Menu button in the Right Menu. Modify the Caption and the Destination for the first link on the current page. Add new links and specify the destinations to other section anchors. !edit-menu.jpg! ##Responsive Modes## **Mobile-friendliness**. As a reminder, to make any section look good on all devices automatically, the content in sections should be put in containers and grids. !container-grid.jpg! Watch the demos on Containers, Grids and Responsive Web Design. Note that sections in this demo are mobile-friendly at once, all with no settings, and, certainly, with no coding. !preview.jpg! **Page Preview**. Click the Device Icons in the Top bar to change the View. The responsiveness is done automatically. Preview the page. You see the Parallax effect on the Introduction section. Click the links in the menu to navigate to sections. We are done with the demo on how to use Sections in Nicepage. 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) <br>