How to use Joomla Positions in Nicepage Website Builder

Visit our website: https://www.nicepage.com
Read more 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

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

Simple Sidebar

Nicepage fully supports the freedom of adding and moving positions. All added positions can have own styles. We start with adding a simple position inside the Nicepage Extension for Joomla. Start with any installed template in your Joomla website.

Start with a Blank Page. Add a Position. Click Add – Position and Shortcode – Position and Sidebar. Resize the Position. Align the Position. Enter “position-sidebar” in the Joomla Position field.

Open the Modules. Select Extension – Modules. Add a New Module. Select Custom. Enter the “Latest Updates” Title. Select the Image. Resize the Image. Enter the Text. Finally, select the “position-sidebar” position. Click Save and Close. Return to Nicepage Extension. Note this is the same position name you used in the Nicepage Extension. Click Preview.

Adding Sidebar to Templates

In the modern templates usually Blog and Post pages contain Sidebars. In a CMS these pages are output with the Blog Templates and the Post Template. Next we create a template with the Post Template containing the Sidebar in the Nicepage for Desktop.

Run Nicepage for desktop. Select the Blog Template. Turn the Sidebar for the Blog Template clicking the left icon in the Right Panel. Switch to the Right Sidebar.

Select the Block Header and make it bold, uppercase and centered. Click Export. In the Export dialog enter the name, then click the Export button.

Switch to the Joomla Admin. Select Extensions – Manage – Install. In the “Upload Package File” Tab browse for file. Select the template zip. The template is installed automatically. Click Extensions – Templates. Make the uploaded template default.

Select Extension – Modules. Please note by default the Sidebar outputs the Content from the “position-sidebar” position in Joomla. Preview the website. This is the Content from the “position-sidebar” position in Joomla.

Custom Positions

Finally, we will create a section with custom positions. It is common that the position names, are added by the template author. In Nicepage you can add custom positions to the Header, Footer, before and after a post in the Blog and Post templates.

Run the Nicepage for Desktop. Open the Blog template. Add a Blank section after the Header. Click the small plus to the left to add a section. The Blank section is selected by default. Click Done.

Add a Grid with 3 columns. Click Add – Grid. Select the 3 column style. Click Done. Resize the Grid. Align the Grid. Add Spacing. Clear the cells. Selecting a cell then press the Delete key. Add a Position to the first cell. Select the first cell. Click Add – Position and Shortcode – Position and Sidebar. Adjust the Grid.

Copy the first cell into other ones. Select the cell, the drag holding the CTRL key. Add names for the added Positions. Select Position in Cell 1. Enter “nicepage1” in the Sidebar Name field. Select Position in Cell 2. Enter “nicepage2” in the Sidebar Name field. Select Position in Cell 3. Enter “nicepage3” in the Sidebar Name field.

Export the theme. In the Export dialog enter the Name. Click Export.

Click Extensions – Modules. We will add 3 modules and assign them the new added positions. Add a New Module. Select Custom. Enter the “Business News” Title. Select the Image. Resize the Image. Enter the Text. Select the “nicepage1” position. Click Save and Close. Add a New Module. Select Custom. Enter the “Technology Trends” Title. Select the Image. Resize the Image. Enter the Text. Select the “nicepage2” position. Click Save and Close. Add a New Module. Select Custom. Enter the “Industry News” Title. Select the Image. Resize the Image. Enter the Text. Select the “nicepage3” position. Click Save and Close.

Preview the Page. You see the new section with 3 new positions above the post in the Blog.

You May Also Like