New Northern Village Admin Interface

May 1, 2018

Use appropriate technologyThe Northern Village Website Publisher is a simple and efficient way to keep your website up to date.

Its main features include:

  • Simplicity - edit a page using the click of a button. Make your changes, click Save and you are done!
  • Seamless integration - when you add, move, rename or delete a page, that change is automatically applied to the entire site (e.g the menus, titles, etc.).
  • Adaptability - you never have to worry about software upgrades!

Still, we want to be better. As part of our commitment to providing more easily updated websites, we have undertaken an upgrade of the Admin interface, which will make maintaining your website even easier.

In this upgrade, our priorities were to:

  • Streamline the functions performed in the Admin interface to save you time
  • Enhance your ability to easily maintain a customized website
  • Make the interface responsive, so it works on mobile and all accessibility devices
  • Improve the Developer interface
  • Continue to ensure you never have to do software maintenance

Our main goal remains to help you update your website(s) quickly and easily.

The new Admin Inteface for the Northern Village Website Publisher is currently in beta. If you want to try it and don't mind letting us know about the hiccups that are still there, we can get you going on it. We have been using it for some time, and it is saving us significant time. Get in touch.

More efficient admin functions

The Admin interface has been reorganized to simplify access to the most used functions. Now, when you select Admin, the Page interface is the landing page. Additionally, the Page interface now contains substantially more information and functionality.

Admin screen functions

From here, you can easily access the most used functions, featuring:  

  1. Cleaner, modern design. Site and theme functions are out of the way
  2. Easily change the Page Type with one click
  3. Make the page visible or invisible
  4. Create new subpages as usual
  5. Select the page type / visibility for subpages from the same screen
  6. Easier reordering of subpages. Click and hold anywhere in box to move.
  7. Edit / Delete / Move / Rename page functions front and centre
  8. Improved Move function interface

By placing more functions on the main Admin page, everyday tasks are now quicker and easier!  

Expanded ability to customize a website

There are three main tools that work together to be able to easily customize a website: Page Types, Modules and Page Data.

Page Types - Blog, Blog Post, Calendar, Calendar Event, Columns, Faq, Faq Post, Landing Page, One Long Page, Shopify Sdk, SitemapPage Types

Page Types allows you to select a pre-formatted template for any page of your site. Using this tool, one is easily able to change from a “Default Page” to a “Blog”, an “FAQ” or “Employee Profile” Page Type. Built into the Northern Village Website Publisher are a range of commonly used Page Types, that can be easily customized to suit your needs. Creation of new Page Types is simple and straightforward. Perhaps the most used custom Page Type is called “One Long Page”.

The Page Type ‘One Long Page’ facilitates the building of a page with many components or sections. Each subpage created under this Page Type becomes a section of the page. These subpages are customizable using Modules, and makes adding a carousel, columns, embedded forms, teasers, etc., uncomplicated and simple.

Page Types within the software are standard templates and are shown in the image to the right.

 

 

Modules

Modules enable further customization of standard pages. By adding a module to a page you can add a Carousel, Image Gallery, or an Embed Code to any page. Similar to Page Types, Modules can be customized, or new ones created as required.

Our modules are most effective when used on the One Long Page Type, as their full functionality is highlighted when used in conjunction with each other. In the One Long Page Type, there are a host of functions that can be added through the Modules. As an example, have a look at the Page Admin for the home page of the Three Bears Furniture website below:

Admin modules

The above page can be viewed at:

        http://www.threebearscustomfurniture.com/

The sections on that page are as follows:

 

Introducing Page Data!

The Northern Village Website Publisher expands possible customization opportunities with the availability of Page Data. An example of these possible customizations can be found in the Three Bears example staff page (http://www.threebearscustomfurniture.com/about-us/staff). 

Website software is generally provided in two styles: you can have freedom to layout things wherever you want, or you can have databases that work well for listings. Page Data integration provides the best of both worlds. You can have the free form of a website, but you can also add structured information on parts of the page, and have the results displayed in a well-designed manner.

Page Data can be added to any Page Type, and it appears in a "Data" tab in the Admin interface.

The following example is for the Staff page for the Three Bears Furniture Co

Staff Web verison

*The asterisk'd items have been entered as Page Data.

The following image shows the how the fields are populated in the Admin interface, to be displayed in the well-designed format shown above.

Staff Admin

The Admin screen shows:

  1. Page Data is being applied to the Staff member Page Type
  2. The 'Data' tab will appear on every page using the Staff member page type. Select this tab to view the fillable page data fields
  3. The data entered into the Page Data fields will be well-formatted on your webpage – you don’t have to worry about HTML coding

An example of using page data to create uniform elements across multiple pages is the “Beer” pages that Northern Village created for Wellington Brewery. The brewery wanted to display unique information for each beer it sells to an increasingly sophisticated beer market. This includes ABV, OG, colour, etc. The Page Data is displayed in a chart format, which makes it very easy for Wellington staff to add new products to their listings. View the beer listing.

Other applications include multi-lingual sites. For multi-lingual sites, there is a Page Type “Language”. The Language Page Type has the following fields:

  • "Home" Translation (translation of Home ie. Accueil in French, or Mājas Lapa in Latvian)
  • "More" Translation (translation of “More” to be used on the Blog Page)

See rorqual.com as an example.

See how Page Data can be created in the Developer Interface section below.

Improved Developer Interface

The Developer Interface has been substantially improved to make it easy for developers to code all parts of the website from a web interface. Additionally, the structure of the coding environment has been improved for clarity and ease of use.

Developer interface

The features of our new and improved Developer Interface include:

  1. The ability to have multiple files open at once, so one can easily code or edit multiple files concurrently
  2. Use the ‘includes’ command tool to insert snippets of code that are used throughout multiple Page Types and Module files (e.g. the top navigation menu, side menu, footer, etc.,)
  3. Customize Page Types and Page Modules to tailor website as required, so end users can easily choose how to customize their page(s)
  4. Add Page Data to any Page Type
  5. Customize your site with Javascript and CSS
  6. Drag images to add to system images
  7. Easily save any page by pressing Ctrl-S

Page Data in Developer Interface

Page Data is an integral part of a Page Type, making it easy for end uses to update their website.

Page Data Developer Interface

  1. Page Data can be added to any Page Type. Edit a Page Type to expose its Page Data.
  2. Each instance of Page Data appears on the right part of the screen. This is the Page Data used in the Three Bears Staff example
  3. Add the Page Data to the Liquid code with the format {{ page.data.<page-data-key> }}
  4. Add New Page Date. Field types are Input, Text Area, Date and Checkbox.

No upgrades ever

To continue our commitment to ‘no upgrades ever’, all existing websites will continue to work as built, while newly created sites will take advantage of all the new capabilities.