USER GUIDE

Congratulations on getting started! Thank you for your business. We hope you enjoy creating with DMS and the results it brings.

! !

This guide will provide instructions for installation, getting started and documentation of essential DMS features. It is recommended you read it to fully leverage the capabilities of DMS. ! Please also make sure to check out DMS video tutorials as they explain everything covered in here in greater depth.
!1

! ! !
TA B L E O F CO N T E N T S
3 5
5 6 6 6

Your First Steps Dms Concepts

Why DMS? What is a DMS? WordPress CMS & PageLines DMS DMS for Coders & Developers

Essential Features
Disable DMS Editor Button (Toggle Draft/Live Mode) Add To Page Page Setup Site-wide Settings (Colors, Typography, Layout etc.) The Preview Button Developer Tools Panel The Change Tracker Button The Publish Button

7
7 8 8 9 11 11 11 11

The Drag & Drop System

Regions, Areas, Columns & Sections

12
12

Using Sections
Where Sections Get Content The Section Toolbar Individual Section Documentation Component Sections Custom (User-De!ned) Sections The WordPress Content / Post Loop Section Navigation Sections Post Type Sections Widget Enabled Sections

14
14 14 15 15 15 16 17 17 17

Extension and The Store Wrapping Up

18 19

!2

! First and foremost, congratulations! !

YOUR FIRST STEPS

If your goal is to build awesome websites faster and better, youve made a smart decision on your purchase of PageLines DMS. DMS has been crafted with you and your needs in mind, and youll be impressing your friends and colleagues in no time!

! ! ! !

Ready to get going? Ok, lets get started

Installing PageLines DMS

Before beginning the DMS installation, you must !rst have WordPress installed running on a server. Comprehensive instructions for installing and con!guring WordPress can be found on WordPress.org. OnceWordPress has been set up, we are ready to install DMS. First, download the dms.zip !le from your account area on PageLines.com. Then simply install DMS as a theme (although it is much more than that). To install a theme in WordPress, you can either: 1. Use the WordPress Native Upload Tool! This is the easier route to use. First navigate to: ! WordPress Dashboard > Appearance > Themes > Add New Theme > Upload! Then simply upload the dms.zip !le. ! 2. Use FTP to upload the theme! You can upload the unzipped dms.zip folder into your wp-content/themes/ folder inside your WordPress install.! NOTE: It is very important to make sure your install folder is named dms. (This ensures proper functionality with extensions that assume that name.)

! ! ! ! !

If DMS is installed correctly, it should be fast, responsive, and formatted cohesively. If it does not work as intended, please visit the PageLines Forums to help isolate hosting issues or other con"icts. Once installed, you can optionally import PageLines dummy data. This will help give you a head start and give you a basis for how things are created and modi!ed within DMS. Installation Troubleshooting Due to the large amount of potential hosting & software con!gurations, its hard to address installation issues here. Please see the PageLines Forum for help resolving any issues.

!3

Home & Blog Page Setup

A !rst step in most con!gurations is to set a custom home page and create a page for your sites main blog.

Create Home and Blog Pages! Create speci!c home and blog pages by navigating to Pages Add New.! Note: On the blog page you will only need to enter in a title.!

Set Home and Blog Page! Now that you have created the pages, just tell WordPress to use them appropriately. ! Go to to Admin > Settings > Reading and toggle the Front page displays to A static page. Choose the home page you just created as the "Front page", and the blog page you created as the "Posts page". Save your changes. Now the home page you created will be the front page of your website and the blog page will contain all of your posts.

!
Using DMS: Quick Start Workflow
If you want to quickly see how easy it is to get started publishing pages, the process is simple:

1. Go to any page on your website, for example, the sites blog page. 2. Apply a template to that page or just modify the default one using drag and drop. 3. Set up section options as desired using section toolbars (discussed below). 4. Hit the publish button. 5. Your changes are now live on the blog page of your site.

! ! !
"

This is the basic work "ow of DMS. For detailed instructions on each aspect, keep reading!

Next Up: The design concepts & advantages of DMS.

!4

DMS CONCEPTS

Why DMS?

! !
!

DMS is designed to solve some of the biggest problems in website design: ! How do I build a beautiful, custom, website without spending a ton of time and money learning to code, or hiring someone who can? It does this by leveraging the strengths of alternative methods for building websites. For example:! From Themes: It is designed to be plug-and-play, so you can have great design out of the box.

! !

From WYSIWYG Editors: It is built to be customizable with inline options and drag and drop editing. This means you don't have to code or deal with technical operations to edit and maintain your site. Through this approach, DMS will allow you to: Build websites faster, with less frustration. Craft better looking websites, with more functionality. Build websites with less technical knowledge and overhead. Evolve your site design through extension. Manage a site without technical hassle (No FTP, deployment, editing code & !lesystems)."
!5

What is a DMS?
DMS stands for Design Management System and it was created to allow you to professionally manage your site design with drag & drop and little to no coding.

! ! !

To do this, DMS leverages a framework for pre-built modules of code called sections. Some examples of a section might be a feature slider or a carousel. These sections load all of their required functionality on demand, so the DMS system also enhances site organization and performance. Sections can be dragged around your pages with almost 100% "exibility. They are then con!gured using section speci!c settings. Youll !nd lots more on using sections in the following sections of this guide. If youd like to add new sections to your site, PageLines provides a special store available at www.pagelines.com/shop for you to purchase sections that you can upload to your site. This means your site can grow and evolve organically, something themes or editors cant do.

! WordPress CMS & PageLines DMS ! ! ! DMS for Coders & Developers ! ! !

DMS uses WordPress CMS (Content Management System) to help manage all content and media. It also uses WordPress to leverage the thousands of functional plugins built for it. This allows DMS to focus on the end customer interaction with the design, and help you make a better website.

If you know how to code with CSS, HTML, PHP and JQuery, DMS was built for you as well. The design patterns in DMS are state of the art and created to help you organize code and stay modular, and the APIs wont get in your way. There are 100s of hooks and !lters added to give you ultimate customization "exibility. And Its easy to build custom sections using a very straight forward structure (in PHP). More information on developing custom sections, plugins and themes can be found at www.pagelines.com/developers."

Next Up: Essential Features & Functional Concepts

!6

E S S E N T I A L F E AT U R E S
Basics
Front End Editing DMS editing is done primarily on the front end view of your website. This allows direct manipulation of your website and a more intuitive work"ow.

! ! ! ! ! !

To see DMS tools, you must be logged in as an admin, and DMS must be activated. If it isnt activated and you are an admin, then there should be an activation button on the bottom left of your screen. Draft Mode Vs. Live Mode Once your site is launched, DMS will need to be edited while your site is concurrently shown to users. In order to accommodate this ( to make sure you arent showing edits to your visitors ), weve added two site modes: draft and live. ! Draft - The site you see while editing with DMS is the draft version. This version is only visible while logged in as and admin, with DMS activated. This allows you to make mistakes and roll back changes.! Live - This is the version of the site your visitors see. The draft version of pages is published live when you hit the publish button. As an admin, you can see this version by deactivating the DMS editor.

The DMS Toolbar

! ! !

If you are logged in to WordPress as a site administrator you will !nd most of DMS tools within a toolbar on the bottom of your sites front end. Here you will !nd most settings outside the standard drag and drop system (discussed below). Here is a summary of the tools (from left to right):

Disable DMS Editor Button (Toggle Draft/Live Mode)

This button allows you to disable all DMS functionality including drag and drop and the toolbar. This is useful because this allows you to see DMS exactly as your sites visitors do, while still logged in as an admin.

!7

Add To Page
This button opens the primary panel for adding NEW sections to pages and post types within DMS. Within this panel youll see thumbs for all available sections on a speci!c page. To add them simply click and drag from the panel to the page and the section will be placed.

!
!

Once added to the page, some sections require the loading of scripts and will require a page refresh. Others may load right away.
Adding A Section To Page Section Info (Full vs Content Width) Disabled Sections

To add a section to a page simply drag its thumbnail straight into the area where you need it.

! ! !
!

Click on a section thumb to get more information and tools for the section. You can also select between full width and content width versions of the section to add to the page.

Some sections will be dimmed on pages where they arent available. For example a 404 error will only be available for use on the 404 page. Comments are not available on the blog listing page, etc..

Page Setup
In this panel you can con!gure page templates. You can either load an existing template on your page, or save your current page settings and con!guration as a new template.You can also get information about the current page as well as tools for management and interacting with it.
Loading A Template Saving New Template Page Info

! !

Use this interface to load page templates on the current page. It will load that template, as well as its settings on the current page. To unlock the template click the unlock button on the template region bar.

Save this current page and its settings as a reusable template.

This tab o#ers valuable customization info such as the page template, handling mode and ID.

!8

Site-wide Settings (Colors, Typography, Layout etc.)

This panel is where you set all site-wide design settings in DMS. In this panel youll !nd options for layout, typography, social media, colors and more.

Color & BG

Setting your site colors and background is easy. For colors you have background/base color, text color and link color. These colors are used in various ways throughout the site.

To set a background image simply upload it. You can set to cover background, repeat or simply place it on background. Setting typography is straightforward. Simply select the font you want, and a preview will show up. Refresh page and you should see the font applied to your DMS draft.

Typography

To add extra fonts from Google Fonts use the special extra fonts option.

Search & Local

PageLines has several social and local options that are used universally throughout the site. For example, your site hashtag (e.g. #pagelines).

Layout & Nav

You can select to use a layout that is defined by pixel width or a percentage of the window width. DMS also offers a boxed mode that places all content inside of the content width area.

Set primary navigation and secondary navigation fallbacks here for use in the mobile menu pop out and else where. DMS also has an advanced importing and exporting system. With it you can export your current site design, including templates and settings.

Import/Export

! !

On import you can select if you want to import settings or templates or both. This makes your DMS design portable.

!
!9

Custom LESS/CSS/JS
PageLines also o#ers a Live LESS customization interface for DMS, located on your sites front end.

This tool allows you to add custom LESS/CSS rules and preview them live.

Custom LESS/CSS Tips!

The Custom LESS tool was built for use with the Chrome Web Inspector;! This allows you to inspect elements you want to customize as youre customizing them. Super convenient.! To Live Preview, simply hold command (or control) while hitting the enter key.! The site should auto magically update with your latest styles. ! Use Nesting and Tabbing! The customization interface can handle tabbing and nesting of styles, one of the advantages of LESS (over CSS).! A Note on User Customization Issues! It is possible that you unintentionally create a Javascript error or CSS/LESS error via your customizations. If this happens, you may lose the ability to edit using DMS and !x the issue. For this reason, weve provided a special fallback interface in the WP admin under PageLines. !10

! ! !

! ! ! ! ! ! !

The Preview Button

(Keyboard Shortcut: alt + a) Toggling this button simply removes all the DMS editing tools from the front end of the site (except the toolbar). This allows you to accurately preview how your site/page will look once you hit the publish button. To toggle this functionality quickly hit the alt+a button.

Developer Tools Panel

If you have developer mode activated, this panel will show performance information and developer only features. See developer documentation for more info.

The Change Tracker Button

The change tracker button is a visual way of keeping tracks of changes that have been made while in draft mode. There are three types of changes that are tracked:! Local/Page Changes - Pages made only to the current page Post Type Changes - Changes that e#ect an entire post type, for example blog posts, products etc. Global Changes - Changes that e#ect the entire site. For example, changes to header, footer, !xed regions or site settings.

All these changes can be rolled back to their last published version by using the popup when clicking on the change tracker. On publish all changes are cleared out and the indicator turns green.

The Publish Button

(Keyboard Shortcut: alt + s) When in draft mode all changes to site/pages need to be published live. This allows you to actively edit a site, without fear of breaking the site for visitors. Watch the change indicator button to tell if you need to hit the publish button or not.

! "

Next Up: Understanding DMS Drag & Drop

!11

THE DRAG & DROP SYSTEM

PageLines DMS has a state-of-the-art javascript driven drag & drop system. ! Using this system correctly will speed up your work"ow and get you better results. In order to maximize your results, its important to understand the components and basis for their use.

! Regions, Areas, Columns & Sections ! !

The structure of DMS pages consists of 4 basic components: regions, areas, columns & sections. Here is a summary of each component along with how they are meant to be used:! Regions! Static areas of the website that are always present across all pages (although may change from page to page) In DMS, these are: header, footer, template, and !xed.! ! Using Regions: Any type of area/canvas section can be dragged into or added to a region. Content sections can then be added to these.!

Area (Canvas) Sections! These are sections that are always the full window width of your site. They can be stand alone or they can allow sections to be nested inside. Canvas sections are full width but allow you to drop sections inside of them.! ! Using Area Sections: Area sections are controlled via a popup toolbar on the top-left of each. Use this to con!gure them as well as organize their order with drag and drop.!

! !
!

Content Sections! Sections that are nested within the content width of your site. ! Using Content Sections: To drag and drop these sections, simply hover over them, click and drag. You can move them to any canvas area on the page. They are controlled by a hover activated toolbar.!

Column Sections! A special case of the content sections that allow you to nest sections inside. This is necessary for certain types of column layouts. For example a blog with a sidebar. ! Using Column Sections: To add a new column section, use the add new panel. To con!gure, use the green toolbar that appears when you hover over them. To drag and drop, simply drag the green bar into place.

!12

The Grid System

DMS is based on a 12 column grid system. This grid system is applied within the content width of the site and is the basis for how content sections are laid out. The system is percentage based, meaning each column is 1/12 the total content width.

! !

The grid system supports o#sets and elements widths from 1 to 12 because of this grid. Each content section supports o#sets and width adjustments in its toolbar, which appears on hover. They also allow you to force to new row, which forces the section to the next row in the layout despite the widths of the other sections in the row.

Unlocking Custom Templates & Sections

Although discussed elsewhere in this guide, custom template & sections are an important part of DMS. They help streamline work"ow by allow you to duplicate your work quickly.

! ! ! !

Once templates or custom sections are applied, they will appear locked. This means that the entire template areas will be tied to the original template and any changes to the locked templates will be applied wherever they are throughout your site. To unlock a template, click the template region bar at top where it says ( [Template Name] ( Unlock ) ). This will show a popup and ask for a con!rmation. Once unlocked, template changes will apply to the current page only. To unlock a section, click the lock icon on the toolbar (at top, right of section). The same con!rmation will pop up and ask. Once unlocked, the section will be unique to the current page or template (if its within a locked template).

"
Next Up: Using & con!guring the various section types.
!13

! ! !

USING SECTIONS

Where Sections Get Content

Within DMS there are a few ways in which sections get their information. Every section uses di#erent techniques for sourcing information based on what they are trying to achieve. Sections can get their content from the following places:! From the CMS ! Some sections, e.g. the content/loop section, or the author section, get their information from the CMS. WordPress adds this information to a page and the sections simply grabs it and outputs it. This means that some sections will appear very di#erent from page to page. ! From Direct Editing! Section settings can be set simply by hitting the edit button associated every sections. These settings are speci!c to the particular section being edited. ! From A Template or Custom Section! When you save a custom template or section, the settings for all applicable sections are saved with the template and moved around with it.! From Global or Post Type Wide Settings! Some sections use settings that are set globally or speci!c to an entire post type. For example, your site hashtag, business address or link color.

! ! !

! ! ! ! !

The Section Toolbar

Each section in DMS has a toolbar with all the tools you need to control it and con!gure its settings. The full-width sections toolbar is located in the top, right corner of the section. For content width sections, its a full width bar at the top that shows on hover. Editing To edit a sections settings, just hit the pencil edit button and the toolbar will pop up with its applicable settings. Each sections settings are di#erent, but you should just be able to add your text or select your desired format and the section will be con!gured. Saving & Previewing Section Settings ! When editing, the settings save to your site draft whenever you change focus from the setting to something else. So there is no need to use the publish button until you want to make changes live. Some settings allow synced previewing in real time, while others require a page refresh to see. Youll notice the icon describing this next to each option label in the drawer.

!14

Cloning Cloning is de!ned as simply duplicating the section and its current settings into a new section. This operation can save you setup time and makes setting complicated layouts quick and easy.

! ! ! ! ! ! ! !

Deleting Sections can be deleted by hitting the delete button. Be careful though as this will delete sections con!guration and settings permanently.

Section Types & Usage

Individual Section Documentation
Setup and con!guration instructions for each individual section can be found on that sections overview page or within its options (inline). Most sections are straightforward and con!gured in a similar way. If you have issues, please visit the forum and well point you in the right direction.

Component Sections
(Examples: Masthead, Highlight, iBox) Component sections generally only use settings from the section options. They are straightforward. Set the settings using the edit button and any documentation will be inline in options.

Custom (User-De!ned) Sections

To make it easy and granular to reproduce work from page to page, DMS has a custom section system built in. This system allows you to save a full width canvas section (any full width section) as a custom (user-de!ned) section. The sections can then be added to pages using the add to page panel and simple drag and drop like any other section.
Saving New Custom Section Adding Custom Section to Page Unlocking Custom Section

Save a new custom section by hitting the Save As Section button on the full width section toolbar.

Drag custom sections to a page using the Add to Page panel and dragging the thumb.

Custom sections will be linked to the original. To break the link, hit the lock icon and it will become stand alone editable.

!
!15

The WordPress Content / Post Loop Section

! ! ! !

The most important section within DMS is the WordPress Content or PostLoop section. This is because this section section handles most WordPress driven content throughout your site. It is designed to be dynamic from page to page and worth looking at in detail. Here are a few things the content section handles:
Page Type Example
Description

On Blog, Category, Archive or Similar

On these pages, WordPress delivers several posts to the content section. These are listed.

If a specific post format is used, the format of that post will be rendered.

With Advanced WP Plugins (WooCommerce, bbPress, BuddyPress, etc..)

These plugins all have specific pages associated with their output.

The content sections grabs and presents the output from these plugins. This is how DMS supports drag and drop functionality even with plugins that use their own templates and system.

On Pages

On standard single pages and posts the content section outputs the content from the WordPress page/post editor. This applies to custom post types as well.

On Posts

Post pages list the posts content but have the added post author information and media (when using post formats)

!
!16

Navigation Sections
(Examples: Navi, Navbar) Navigation sections use menus created using WPs native menu creation tool. Make sure to create your menus there, then select them for use with the section.

! !

Note on Navi Megamenu The Navi section has a special megamenu functionality. To use this assign a class of megamenu to the top level navigation element and its sub menus will be transformed into a full width megamenu.
Adding The Class MegaMenu Appearance

! ! ! !

Post Type Sections

(Examples: Docker, Masonic, Flipper) Several sections within DMS leverage WordPress custom post types. (These are post types that are created by a plugin.) To appropriately use these sections, you most likely need to install a plugin for creating new post types (unless you want to use a default WP post type). There are several free plugins on WordPress.org available to accomplish this. Once youve added the post type and created some posts for it, then all you will need to do is select the post type in the options for the section and the content will populate.
Setting Up Custom Posts Post Appearance In Section (example)

Widget Enabled Sections

(Examples: Widgetizer, Columnizer) Widget enabled sections use WordPress widget system and sidebars to show their output. To use them, youll have to install a plugin for creating new sidebars (search on WordPress.org/plugins) and select this sidebar for use with the section.

!17

! !

E X T E N S I O N A N D T H E S TO R E

One very powerful aspect of DMS is that the drag & drop system is designed to be extended with new functionality. There are three types of extensions that are readily added to DMS: ! Sections - The drag and drop system is based on drag and drop sections. New sections can easily be created and added to DMS using the standard WP plugin system.! Plugins - DMS speci!c plugins that add functionality or elements are also easily added. We have built a comprehensive hook/!lter system into DMS that allows plugins to easily add and remove code from core.! Themes - Themes are the look and feel of a website, and are especially important when getting started with a new site. We have spent a large amount of time working on a drag and drop theming system and DMS has been built with out of the box design in mind.

! !

The Store

! !
"

PageLines has built a store for DMS and DMS themes that you can access at pagelines.com/shop. Here, you can !nd both free and premium sections, plugins and themes to add functionality to your site and speed up your work "ow. The store is continually updating and is incredibly organic. Please visit it and check it regularly.

Next Up: Wrapping up & miscellaneous tips/tricks

!18

! ! ! ! !

WRAPPING UP

Special Supported Plugins

DMS currently includes special support for a few plugins you may add. If you are looking to add additional functionality in any of these categories, we recommend you use the following: 1. Contact Forms: Contact Form 7 2. eCommerce: WooCommerce

How To Update
There are a couple ways to update to the latest version of DMS. 1. Use PageLines Automatic Updater! PageLines has built automated updating into DMS. To update DMS using this functionality, youll need to install the PageLines Updater Plugin and once installed, you may need to enter in your product license key.! After youre set up, youll get noti!cations right from your WordPress admin and it will take care of any updates for you.! 2. Use FTP.! To update via FTP you will need to download the latest dms.zip from your account area at PageLines and unzip it on your computer. Now upload all the !les you unzipped to the dms folder inside your WordPress themes folder making sure to overwrite the old !les.

Dummy Data
PageLines has a dummy data !le available for download at docs.pagelines.com if youd like to duplicate the functionality and content of the demo website.

You can import this into your setup by going to "Tools" > "Import" in your admin panel, choosing "WordPress" and browsing for the !le. There is also a video tutorial showing the process if you're a visual learner."

!19

! ! ! ! ! ! !

!
And Finally

!
Thank You For Being A Customer!
We sincerely appreciate your support.
Please visit www.pagelines.com to stay up to date or give us your feedback.

! ! ! ! ! ! ! ! ! !

Support & Troubleshooting

Need help? Please visit the forum and well take care of you. http://forum.pagelines.com

!20