In this article
Site Flow Overview
DarkMatter Site Flow uses a flowchart view to help you organize your website navigation, connect website pages and navigation links.
Your website has a single homepage, but it can have any number of additional pages organized by content type. For instance you might have a shopping section of your website, or a company section, or shopping cart. You may also have a link to an external website or social media page.
Your website will have different navigation areas. You may have a global main navigation that appears across all your pages. You may also have a side navigation that appears only on pages that have child or sub page navigation. Or you may have global footer navigation that appears across all your pages.
Each Navigation area in your website is tied to a Site Flow. A flow is placed into your design where your navigation appears. You can also place an individual flow item, one vertical section of your flow into a page. A flow item might be just one main page with several child pages of a larger flow.
When creating a site flow you can add page, a link, a divider, a menu button, an icon button, or a shopping cart icon. Each navigation item you add will need a name and a link. You can also add and optional css style and determine if you want the item to open in the same browser window or a new browser window.
Internal and External Page Links
Not all of your pages need to be in a site flow or your page navigation. For example, you may want to create a page for a company party and link to that page only from announcement text on your homepage or an email blast. The pages will live in the "Pages Not In Navigation" section at the bottom of Flow.
Editing Page Content
To update a page, Click on the page flow item and then Click EDIT PAGE CONTENT from the menu. This will drop you into the content section of the page editor.
Suspending a Page
To suspend a page, Click on the page flow item and then Click SUSPEND PAGE. This will hide the page in your navigation and also from the internet.
To remove a navigation item, Click any navigation item and then Click REMOVE NAVIGATION. This will remove the navigation item from your flow and website’s navigation list. You can always add a page back into a flow at anytime.
The Flow key will help you keep track of placeholder items, modified items, new pages, published, modified or suspended pages.
New Site Flow
To create a new site flow Click the green "New Site Flow" button. Then give the flow a name. I like to name navigation by the content type or where it lives in your website.
Add a Navigation Item
To add an item Drag a navigation item into any flow then set up the Navigation Display and Navigation Link. You can add a Page, Link, Divider, Menu Button, Icon Button, or Cart. Each item has a slightly different configuration.
Once you’ve added the Navigation Item you can either assign it to one of your pages or a link. Items are ordered left to right, so the item farthest left will appear first in the websites navigation. You can rearrange nav items at any time.
You can also drag any item, or new item, under a current flow item as well. This will create a child navigation item, under the parent item. You can rearrange child-nav items at any time, and the top most item will be first in the list.
Publishing Site Flow
You will have to publish the site flow in order for your changes to be reflected on your website. If you made a mistake you can revert your most current changes, but know that once you publish a flow you can’t revert back to changes made before you clicked publish.
The look of your navigation is handled by the Navigation Style sheet in the sites styles section of DarkMatter. See the knowledge base article on Editing Styles for more information.
A divider can be text or an image, and a CSS style can be applied in the advanced feature tab. Dividers are a great way to separate navigation items or groups of items. For example you may have a list of navigation items then a divider and then your shopping cart Icon.
When you add a menu button to a flow you will need to set up a Target for the menu. A target is an ID tag that tells your website which global content item to show when the user clicks on the button. You'll also set up the focus, the button size, and the toggle type.
Setting up a menu button is a more advanced update because you need to tell the menu what navigation panel to show, and off-canvas menu drawer or drop-down menu drawer. Menu buttons will come hooked up with your chosen DarkMatter framework. See the knowledge base tutorial on Menu Buttons for more information.
When you add a Cart button to a flow you need set the cart link URL. The DarkMatter default link url should be /cart. We recommend keeping with this link name.
Next, select your Cart icon from the pulldown menu.
Then set the optional Cart link name. For example Shopping Bag with a ":" or Cart with a ":" This text will appear next to your icon.
Item text and Item Text plural values are already set up for you. This label will appear before the number of items a user adds to their cart. For example, 1 Item or 5 Items.
When you add an icon button to a flow you will need to set up a Target for the menu. A target is an ID tag that tells your website which global content item to show when the user clicks on the button. You also set up the focus, icon type, and toggle type (which by default tells your menu or nav panel to close.) And in advanced options you can set a specific CSS class.
Setting up an icon button is a more advanced update. See the DarkMatter knowledge base article on Icon Buttons for more information.