Sidebars and Widgets extend the page functionality allowing to improve the website navigation and output simple text messages, as well as complex components including banners, sliders or social media posts.

Simple Sidebar

Sidebar Support. Nicepage fully supports the freedom of adding and moving widgets. All added sidebars can have own styles. This demo consists of three parts covering different ways of using the Sidebars.

siderbar.png

Adding a Sidebar. First, we will add a simple sidebar inside the Nicepage WordPress Plugin. You can start with any theme installed for the WordPress website. Start with a Blank Page. Add a Sidebar. Click Add -> Position and Shortcode -> Position and Sidebar. Resize the Sidebar. Align the Sidebar. Center the Block Heading and the Block Content.

simple-sidebar.png

Linking the Sidebar. Switch to WordPress Admin. Select the Main Sidebar. Add the Image widget and the Custom HTML to output text. To link this sidebar to a page in the Nicepage enter the Sidebar’s name into the Sidebar Name field. Type “Main Sidebar”. Note this is the “Main Sidebar” position from the theme linked to the Nicepage web page. Click Preview.

Adding Sidebar to Templates

Blog and Post Templates. In the modern themes usually Blog and Post pages contain sidebars. In the CMS this pages are output with Blog and Post templates. We can configure a theme to output the Sidebar by default using the Nicepage for desktop. So, secondly, we will output the Sidebar into the Blog Template. Please note that for the Post Template it is done similarly.

sidebar-right.png

Exporting the Theme. Run the Nicepage for desktop. Select the Blog Template. Turn the Sidebar for the Blog page clicking the icon in the Right Panel, either the Left or the Right one. Select the Block Header and make it bold, uppercase and centered. Click Save. Click Export. In the Export dialog enter the name, we used the “nicepage_wp”, then click the Export button.

export.png

Importing the Theme. Switch to the WordPress Admin. Select Appearance -> Themes. Add a new theme. Upload theme. Install the theme, and finally, activate it.

primary-widget-area.png

Using Widgets. Click Appearance -> Widgets. For WordPress this sidebar outputs the Primary Widget Area. please note that the Sidebar content is the same one added before in the installed theme. Click “Visit Site” to preview.

Custom Sidebars

Using Sidebars. Finally, we will create a section with custom sidebars. It is common that the sidebar names, and the position list are created by the theme author. Nicepage has a collection of the preset sidebars and positions, however, this collection can be easily supplemented.

adding-sidebars.png

Working with Sidebars. In Nicepage you can add custom sidebars to the Header, Footer, before and after the content in the Blog and Post templates. Run the Nicepage for Desktop. Open the Blog template. Add a Blank section after the Header. Click the Add plus. The Blank section is selected by default. Click Done.

new-section.png

Adding the Grid. Add the Grid with 3 columns. Click Add -> Grid. Select the style with 3 columns. Click Done. Resize the Grid. Align the Grid. Clear the cells by selecting a cell and pressing the Delete key. Add the Sidebar into the first cell. Select the first cell. Click Add-> Position and Shortcode -> Position and Sidebar. Resize and align the Sidebar.

sidevar-in-cell.png

Working with Cells. Copy the first cell with the sidebar to other two cell by clicking the cell and dragging holding the CTRL key. Add Spacing. Resize the Grid, Center the Grid. Decrease the Section Height.

sidebar-name.png

Naming Sidebars. Now we will add names for the new Sidebars. Select the first Sidebar and enter “nicepage1” in the Sidebar Name field. Select the second Sidebar and enter “nicepage2” in the Sidebar Name field. Select the third Sidebar and enter “nicepage3” in the Sidebar Name field.

Exporting the Theme. Export the theme. In the Export dialog enter the “nicepage_wp2” Name. Click Export.

install-theme.png

Installing the Theme. Switch to WordPress Admin. Select Appearance -> Themes. Add a new theme. Upload theme. Install the theme, and finally, activate it. Click Appearance -> Widgets. You see that there 3 new positions with the names we have entered for the sidebars while creating the theme.

new-widgets.png

Adding Widgets. Add the Gallery widget to the “nicepage1” position, the Calendar widget to the “nicepage2” position, and Custom HTML to “nicepage3” position. Enter the titles and texts and select images. Click Save.

widget-content.png

Previewing the Page. Preview the Page. You see the widgets content output into the Custom Sidebars. That’s it!

If you have enjoyed this video, please subscribe to Nicepage channel.

Watch more Video Tutorials.

Sidebars and Widgets extend the page functionality allowing to improve the website navigation and output simple text messages, as well as complex components including banners, sliders or social media posts. <div class="video-container"><iframe width="885" height="500" src="https://www.youtube.com/embed/9x5Q2RcgsX4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div> ##Simple Sidebar## **Sidebar Support**. Nicepage fully supports the freedom of adding and moving widgets. All added sidebars can have own styles. This demo consists of three parts covering different ways of using the Sidebars. !siderbar.png! **Adding a Sidebar**. First, we will add a simple sidebar inside the Nicepage WordPress Plugin. You can start with any theme installed for the WordPress website. Start with a Blank Page. Add a Sidebar. Click Add -> Position and Shortcode -> Position and Sidebar. Resize the Sidebar. Align the Sidebar. Center the Block Heading and the Block Content. !simple-sidebar.png! **Linking the Sidebar**. Switch to WordPress Admin. Select the Main Sidebar. Add the Image widget and the Custom HTML to output text. To link this sidebar to a page in the Nicepage enter the Sidebar’s name into the Sidebar Name field. Type “Main Sidebar”. Note this is the “Main Sidebar” position from the theme linked to the Nicepage web page. Click Preview. ##Adding Sidebar to Templates## **Blog and Post Templates**. In the modern themes usually Blog and Post pages contain sidebars. In the CMS this pages are output with Blog and Post templates. We can configure a theme to output the Sidebar by default using the Nicepage for desktop. So, secondly, we will output the Sidebar into the Blog Template. Please note that for the Post Template it is done similarly. !sidebar-right.png! **Exporting the Theme**. Run the Nicepage for desktop. Select the Blog Template. Turn the Sidebar for the Blog page clicking the icon in the Right Panel, either the Left or the Right one. Select the Block Header and make it bold, uppercase and centered. Click Save. Click Export. In the Export dialog enter the name, we used the “nicepage_wp”, then click the Export button. !export.png! **Importing the Theme**. Switch to the WordPress Admin. Select Appearance -> Themes. Add a new theme. Upload theme. Install the theme, and finally, activate it. !primary-widget-area.png! **Using Widgets**. Click Appearance -> Widgets. For WordPress this sidebar outputs the Primary Widget Area. please note that the Sidebar content is the same one added before in the installed theme. Click “Visit Site” to preview. ##Custom Sidebars## **Using Sidebars**. Finally, we will create a section with custom sidebars. It is common that the sidebar names, and the position list are created by the theme author. Nicepage has a collection of the preset sidebars and positions, however, this collection can be easily supplemented. !adding-sidebars.png! **Working with Sidebars**. In Nicepage you can add custom sidebars to the Header, Footer, before and after the content in the Blog and Post templates. Run the Nicepage for Desktop. Open the Blog template. Add a Blank section after the Header. Click the Add plus. The Blank section is selected by default. Click Done. !new-section.png! **Adding the Grid**. Add the Grid with 3 columns. Click Add -> Grid. Select the style with 3 columns. Click Done. Resize the Grid. Align the Grid. Clear the cells by selecting a cell and pressing the Delete key. Add the Sidebar into the first cell. Select the first cell. Click Add-> Position and Shortcode -> Position and Sidebar. Resize and align the Sidebar. !sidevar-in-cell.png! **Working with Cells**. Copy the first cell with the sidebar to other two cell by clicking the cell and dragging holding the CTRL key. Add Spacing. Resize the Grid, Center the Grid. Decrease the Section Height. !sidebar-name.png! **Naming Sidebars**. Now we will add names for the new Sidebars. Select the first Sidebar and enter “nicepage1” in the Sidebar Name field. Select the second Sidebar and enter “nicepage2” in the Sidebar Name field. Select the third Sidebar and enter “nicepage3” in the Sidebar Name field. **Exporting the Theme**. Export the theme. In the Export dialog enter the “nicepage_wp2” Name. Click Export. !install-theme.png! **Installing the Theme**. Switch to WordPress Admin. Select Appearance -> Themes. Add a new theme. Upload theme. Install the theme, and finally, activate it. Click Appearance -> Widgets. You see that there 3 new positions with the names we have entered for the sidebars while creating the theme. !new-widgets.png! **Adding Widgets**. Add the Gallery widget to the “nicepage1” position, the Calendar widget to the “nicepage2” position, and Custom HTML to “nicepage3” position. Enter the titles and texts and select images. Click Save. !widget-content.png! **Previewing the Page**. Preview the Page. You see the widgets content output into the Custom Sidebars. That’s it! If you have enjoyed this video, please subscribe to [Nicepage channel](https://www.youtube.com/playlist?list=PLrT1zCpaZbn5Td7n67dcjue4nba8VD9hh). Watch more [Video Tutorials](/doc/article/1318/video-tutorials).