Site Flow Overview

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.

Flow Items

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.

Removing Navigation

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus. Praesent lectus. Vestibulum quam sapien, varius ut, blandit non, interdum in, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis faucibus accumsan odio. Curabitur convallis. Duis consequat dui nec nisi volutpat eleifend. Donec ut dolor. Morbi vel lectus in quam fringilla rhoncus. Mauris enim leo, rhoncus sed, vestibulum sit amet, cursus id, turpis. Integer aliquet, massa id lobortis convallis, tortor risus dapibus augue, vel accumsan tellus nisi eu orci. Mauris lacinia sapien quis libero. Nullam sit amet turpis elementum ligula vehicula consequat. Morbi a ipsum. Integer a nibh. In quis justo. Maecenas rhoncus aliquam lacus. Morbi quis tortor id nulla ultrices aliquet.

Flow Key

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 Made Daily. See the knowledge base article on Editing Styles for more information.

Page/Link

When you add a Page or a Link, your navigation can display as text, icon with text, text & icon, only an icon, or an image. If you choose to use and image for your navigation you will need to uploaded a raster web image, like a jpeg, png or gif, or an svg (a scalable vector graphic).

Your navigation page or link, can link to a page or any link that you add, internal or external link or even an email.

You can also apply Advanced options to you navigation item: Make a page open in a new window, add a CSS Class to a specific Navigation item or set a Target. See the knowledge base article on implementing Advanced Options for more information.

Dividers

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.

Menu Button

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 framework. See the Made Daily knowledge base article on Menu Buttons for more information.

Cart Icon

When you add a Cart button to a flow you need set the cart link URL. The 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.

Icon Button

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 Made Daily knowledge base article on Icon Buttons for more information.