The Nimble Page Builder

The NimbleCMS Page Builder is where you can add, switch out, remove or edit widgets on a page within your website. You can also un-publish pages to hide them from public view, change the page’s title, description Meta Title and Meta Description, add tags, change the page design or change the access for the page.

To navigate to the Page Builder for a page on your website, login to Admin and click on Pages on the left vertical menu.

If the page has already been created, you can find it by scrolling down and clicking on its Page Title, by searching using the search bar shown below, or you can create a new page by clicking on the green NEW PAGE button.

When you select New Page, a new menu will appear with different options as to which type of page you can create.

A Blank Page will allow you to add different widgets such as content, photo galleries, forms, upcoming events and feeds, and more.
A Document Center (Page 6) will allow you to select different folders within the file manager to create a document center for users to view on the front end of the window.
A Blog (Page 6) will allow you to select from blog tags you have created to create a blog page with specific tags.
A Calendar (Page 7) will allow you to select from a list of the calendars that you have created to include certain types of events all on onre full-page calendar.
A Directory(Page 7) will allow you to select from different tags that you have created in order to include specific and granular directory tags on one large directory which includes a search functionality for first and last names, business, and category (directory listings widget does not include this).
Classifieds (Page 7) allows you to select from different classifieds tags which you have created.

Upon creating a Blank Page, fill out the Title. The URL will automatically be created for you based on the Page Title, but you also have the option to click in this box and change the URL.

If you are creating a sub-page and want an Alias, or a direct URL without the breadcrumbs of parent pages, you can click the check-box to Create Short URL and type in what you want the alias to be:

For Example:
Your page URL may end up being…
www.yourwebsite.com/about-us/apply-for-a-job

By clicking “Create Short URL” and typing in “apply” this will give the URL an alias so you can get to the same URL above but by visiting: www.yourwebsite.com/apply

**Creating a short-URL which is easy to read and remember is very useful when advertising either in print or by word-of-mouth. It’s a lot easier to say “yourwebsite.com/apply” rather than the previous one, right?**

You can add a description to the page which will help boost your Search Engine Optimization (SEO) as well as tags*.
*Adding tags to a Page currently does not affect anything, though it was put in place for the future expansion of Nimble 2.0

Your website may have different designs to choose from, if so they will appear below the “Access” portion of the Create Page pop-out.

There is also an “Advanced Options” link you can click on which will expand the Meta information portion of the Page Settings. Here you can add Meta Titles and descriptions to help boost your SEO, as well as add any code to the Header or Footer of the page. This is normally used when adding scripts like Google tracking pixels to your website. Do not add any code to your website without having requested it and knowing who supplied it. If you have any questions about adding code to the Head or Footer of your site, please send an email to Web1@networkts.com.

Once you have completed filling out the information for your new page, scroll down in the side panel and click “Create Page.”

Adding a Sub-Page

Adding sub-pages can help to keep you organized in page manager.

For example, you may have a “Services” page and offer many services which will all need their own page. By creating sub-pages for your services you can keep all pages nested within your parent “Services” page.
(Remember than navigation is built independent of page organization. This will not affect how you organize your navigation.)

To add a sub-page, go to Pages and find the page which will be the parent. Click on the menu button on the right and select “Add Sub-Page.” Here you follow the same steps in creating a page.

Adding Widgets

After creating a page, your web page will refresh to reveal your newly created page.

You will notice that the bar at the top of the page is red. This indicates that this page is currently unpublished and is unaccesible by users visiting your website, even if they know the direct URL.

You can go ahead and publish your page if you would like, but let's go ahead and add some widgets first.

Click on the "Add Widget" button on the top right in the red bar.

Upon clicking the “Add Widget” button, a pop-out will appear on the right with a list of different widgets that can be added to your new blank page.

You can add Content (text, images, embedded videos, tables, etc), banners, photo galleries, upcoming events, directory entries, forms, feeds, stock quotes, a mortgage calculator or a navigation.

All of these widgets can be easily added, removed or switched out on the page for any other type of widget.

You can also resize widgets to customize the look of your page.

It’s important to note that we recommend creating Banners, Photo Galleries, Forms and Navigations within their respective Manager (left menu) before adding them to a Page within the Page Builder.
**By creating these widgets within their Manager you will have more control over the settings and customization of that widget. Content, Upcoming Events, Directory Entries, Feeds, Stock Quotes and the Mortgage Calculator require minimal information and are easily created through the Page Builder.**

Edit Widget Options

After adding your widget, it will refresh the page and appear, by default, as twelve columnns.

This means that your widget will span the full width of the page.

In order to resize widgets to customize the layout of your page, click on the widget that you want to resize.

A blue toolbar will pop-up over that widget. These icons, in order, are:

Edit - Edit the widget.
Resize - Change the column width.
Swap Widget - Swap out widget.
Delete - Delete widget from page.

Resizing Widgets

In order to resize the widget, click on the resize icons (arrows pointing outward diagonally). A dashed border will appear around the widget.
Click on the right or left side and drag it in to decrease the size of the widget. As you drag the box to be smaller or larger it will display the number of columns the widget is occupying.

After dragging and dropping the width of the widget, your widget will resize to occupy its new space. The widgets’ widths must equal 12 or less, it is in best practice to work in equal sums of 12 (ex: 6/6, 4/4/4, 8/4, 9/3)

Next, add your second widget that you want to appear next to your first. Once the page refreshes and your new widget shows below the one you just resized, you can follow the same steps to resize this widget. It needs to occupy whatever space of 12 columns is left over from the first widget. After you resize, refresh your page and the widget will automatically move next to its counterpart. If your widget does not move next to the first one, it means that the sizing is wrong.

Click to resize the widget and check the number of columns it is occupying. If this is off by even 1 column, they will not stack next to each other. If you decide that you want the smaller widget to appear first, simply click, drag and drop the widget before the wider one.

Creating a Document Center Page

A Document Center page allows you to make folders within your File Manager accessible through the user-side of your website.

After you create a folder in your File Manager and populate it with files you want to share, you can create your Document Center Page.

Go to Pages -> Add New and select “Document Center.”

In the next popout, it will ask you to choose a folder you want to share. Let’s say we want to create a Document Center for the folder titled “Documents” (pictured left), we would click on “Documents” and then click “Use this folder.”

After that, it will prompt you to fill out the general page information and then click “Create Page” at the bottom of the pop-out.

Creating a Calendar Page

To create a full-page calendar, click “Add New” in Pages, then select “Calendar.”

You’ll then be shown a list of different Calendar/categories you’ve created to choose from. Whichever categories you select are the ones that will appear on this calendar page.

You can edit these calendar settings in the future by going to Pages, clicking on the calendar page, then in the Calendar Page Builder/Editor, click on the gear icon in the top right and “Calendar Settings.”

There you will be able to select or deselect Calendars categories that appear on that page.

Creating a Blog

A Blog is a great way to post news articles and updates to your website. A Blog allows users to search by keyword, category and date. The Blog page shows a thumbnail (if provided) and an excerpt of the blog article along with a Title.

To create a Blog page, you need to first create a blog entry and create tags for the blog. You can create one tag such as “blog” or “news,” or you can create multiple different tags and categorize your entries based on their content. Remember that in the future as new blog tags are created you will need to go back and update the settings of the blog page in order to include those entries on that blog page.

Creating a Directory

Creating a Directory is the same steps as a Calendar or Blog. Simply select the tags which you’ve already created in order to determine which tags will show on this page. You must first create tags within that widget’s Manager.

You can also add more tags to this Directory page in the future, simply go to Pages à (Directory Page) à click on the gear icon in the top right and select “Directory Settings” to update which tags are included on this page.

You can also set a Cover Photo which is what will appear as the first page when this Directory is downloaded as a PDF.

Creating a Classifieds

Creating Classifieds is the same steps as a Directory, Calendar or Blog. Simply select the tags which you’ve already created in order to determine which tags will show on this page. You must first create tags within that widget’s Manager.

You can also add more tags to this Classifieds page in the future, simply go to Pages -> (Classifieds Page) -> click on the gear icon in the top right and select “Classifieds Settings” to update which tags are included on this page.

Take a Page Offline

You may have a need to take a page offline temporarily, if so there’s no need to delete, simply go to Pages and click on the Page you want to take offline. In the top right click on the gear icon and select “Take Offline.”

This will un-publish the page so that it is not visible on the website. You will be able to view the page as long as you are logged in, but once you log out the page will no longer be visible on the website and you will see the website as a general user/visitor.

To publish the page, simply login, go to Pages and in the list you can find the page and click on the green publish button.

Additional Features

Desktop, Tablet, and Mobile Viewers

You may notice three icons at the top of your Page Builder: desktop, tablet and mobile icons.

Clicking these will display the page in desktop, tablet or mobile size so that you can preview what your page will look like on differently sized devices.

"Go To Live"

If in Page Builder and you want to view the page on which you’re working on the live version of the website, you can click on the gear icon and select “Go to live” which will open that page within a new tab.