MCHN Article Editor

Summary

The article editor is a drag and drop UI building feature that can be used to create web pages, templates, and blogs. 

Creating an Article

To create an article follow the sets below.

1. Log in, on the left hand nav bar choose Content → Articles → All Articles

2. On the top right hand side of the page, select the “New Article” button.

3. Enter in the title and URL and choose a Article type to start from.

4. Click confirm and you will be presented with an option to go to the article you just created. 

Article Editor Features

Blocks

Blocks are the building blocks of your editor. They are located on the right hand side bar and are denoted by the icon box + sign. Blocks can be dragged and dropped onto the editor canvas and modified as the user would like. The blocks are separated into seven categories based on their functionality:

• Extra: special blocks that allow you to complete special actions not normally possible in the editor (like custom javascript)

• Typography: associated with the text elements in the editor. 

• Buttons: link button elements that can be used to link pages or perform various UI actions. 

• Layout: The core building blocks of your page. Gives you a grid system to work with to make your pages mobile. As well as standard fixed and fluid containers. 

• Icons: material icon sets, we support both material-icons and material-symbols-outlined. Custom icons can be added by changing the text content of the icon element. 

• Media: image and video blocks, as well as a customizable slideshow block. 

• Ecommerce: special blocks setup to help you manager your store. 

Style Manager

The style manager is denoted by the paint brush icon on the right hand side bar. It allows users to customize the CSS (style, colour, and layout) for your web page. It also allows you to add custom css classes to your elements if you want to use your own CSS or Javascript.

Trait Manager

The trait manager is donated by the single gear icon on the right hand sidebar. The trait manager allows you to edit some of attributes associated with an HTML element. This can be useful if you want to link a button to another page or add a custom ID/title. 

DOM Tree View

The DOM (Document Object Model) Tree view is denoted by the diamond with a v below it on the right hand side bar. It allows you to see exactly where in the DOM a specific element is. This can be very useful if you import a page with elements that are hidden or do not have any height. It also enables you to give the elements custom tags which can be useful for identify sections. 

Settings

The settings feature is denoted by the 3 gears on the right hand side bar. It allows for customization of the different features available in the article editor. Below is a list of them all.

• Author: name of the author of the article.

• Title: Title of the article.

• URL: URL of the article

• Header Image: header image to show if enabled. 

Advanced Settings

• Approved: The article is available to all users. 

• Advertisements: Displays advertisements if available. 

• Show Author: Displays the authors name on the top of the article. 

• Breads Crumbs: Shows a breadcrumb path to the home page. 

• Comments: Shows comments.

• Exit Intent: The article will display the exit intent if setup.

• Full Width: Makes the article fluid (good for responsive site layouts)

• Hidden: Not available to users. 

• Show Header Image: Displays the header image on the article. 

• Searchable: Enables searching on the article. 

• Sidebar: Displays the aside to users. 

• Site Footer: Show or hide the footer

• Site Header: Show or hide the header

• Site Nav: Show or hide nav bar. 

• Social Buttons: display social icon buttons 

• Title: Display the title of the article on page. 

• Welcome Mat: Show the welcome intent when a user lands on the page 

Versions

The versions link is located on top toolbar of the editor and is located to the left of the PUBLISH button. This will provide you with an all encompassing history of your article. You can revert back to any version at any time without losing any of your data. 

Publishing 

When making changes to your existing sites or webpages it’s always good practice to review your changes before you make them live to your users. We have given this functionality by providing you with two buttons, the SAVE and PUBLISH button. Using the SAVE button on an article will update the article without your users being able to see it. This gives you the change to review the changes and once your happy with your solution you can hit the PUBLISH button to make them live.