platform pro

8/6/2019 Platform Pro

1/16

Options & Setup

Design Control

Introduction

Design Control is the framework tool provided in the PlatformPro Theme Options that allows you to quickly customize the deof your site. Design Control is where youll set your design mode and the colors you want for common elements used in ytheme.

Design control should be used to quickly set up the basic colors and look of your site, then Custom CSS should be used to reindividual graphical elements.

Design Modes

Currently there are three design modes inside of the Platform Framework. They are:

Full With Mode with Canvas Full width page area with a canvas area behind the page content. Great for use witbackground images, or when content and page areas have different background colors.

Full Width Mode Great for designs with some full width elements on the page, (e.g. PageLines.com) all elemenare full width, with a content area inside.

Fixed Width Mode A fixed width Page area with the body being shown as the site backgroundUse the Site Design Mode option to choose the type of site structure youd like to use as the framework for your design.

Background Image

Background Option

Design Control also features an optional background image option. This makes it simple to add a background images to yourIt takes three steps:

Upload Your Image


2/16

Set the repeat for the image This option controls whether or not the image is repeated in the background. If so, you want it tiled, or just repeated along an axis.

Position The Image Use percentages to position the image. A vertical of 0% corresponds to the top or your site, ahorizontal position of 0% corresponds to the left.

This option may vary slightly depending on which design mode youve selected.

In Canvas mode, the image is a applied to the page area, with the canvas on top.

In Full Width Mode, the image is applied to the page area but will show behind the content.

In Fixed Width Mode, the image is applied to the background body.

Color Control

Introduced in PlatformPro 1.2.0 is PageLColor Control. Color Control allows yoquickly set up colors for your basic elements. It is great for rapidly building unsites.

There are 5 Color Setup Areas

Basic Layout Color Set up the colors for basic layout items and page elements.

Content Text Colors and Effects Control the colors of text in your page content area.

Primary, Secondary & Tertiary Text Colors To create contrast effects throughout the theme, there are three

colors. Regarding their general grouping: Primary represent the common text color, secondary is generallysubtle text such as subtitles, and tertiary text is somewhere between.

Footer Text Colors Control the color of text and links in the footer of your site.

Primary, Secondary and Tertiary Site Element Colors Site elements are the contrast building blocks of your siteFor example, the color of the navigation on hover or when a page is selected.Settings Site Element Colors Because site elements are designed to contrast with each other, you should think abouthem as follows:

Primary Elements - Should have a slight contrast with the background of the page area. As an example, the

default colors are light gray for the element and white for the page. Secondary Elements - Should have the same hue as the primary elements and be slightly darker.

Tertiary Elements - Should have the same hue as the primary & secondary elements and be slightly darker t

the secondary ones.

Editing Content Layout

Overview

The layout editor is one of the most powerful options in the PlatformPro framework. It allows you to configure the layout of WordPress content on individual pages/posts and on your posts pages.


3/16

Using the Editor

The layout editor only effects the look of your sites content section. This is one of the most important areas of the site ahandles your WP page/post content, as well as your blog posts (on search, categories, etc).

Setting up and using the layout editor only requires a few steps.

1. Find The SettingsLogin to the WordPress admin and select the theme settings panel. Youll find these optionsunder layout editor

2. Choose The Default ModeChoose your default layout mode using the top selector on the layout editor panel

3. Drag and Drop DimensionsConfigure each layout modes dimensions using the drag and drop interface on the bottom ofthe panel

4. Change Layouts on a Per-Page BasisChoose different layouts on a per page basis using the selector option on the bottom of the anew or edit page/post tabs in the WP admin.

5. Blog Page LayoutSelect a layout for your blog (posts) page and 404 pages. Youll find this under blog and postin the theme settings panel.

Most of the blogs you see online use the default layout with the Main Column on the left, and one or two sidebars on the riThe sidebar is where you will place advertising banners, and all of the miscellaneous information widgets* for your site.

Menus & Navigation

Introduction

In all of the PageLines themes, navigation menus are managed through WordPress native menus tool. This tool allows yomanage your WordPress pages, categories, and links, with the ease of drag and drop. This doc will illustrate how menusnavigation work in PageLines themes.
http://www.pagelines.com/docs/sidebars-widgetshttp://www.pagelines.com/docs/editing-layout/attachment/layout-setuphttp://www.pagelines.com/docs/sidebars-widgets


4/16

WordPress Menus

First, there is plenty of documentation on how to create custom menus with WordPress, so there is little need to duplicate thatcontent here. To that end, Digging Into WordPress has a pretty good basic tutorial on how to get started with WordPress menu(you probably can ignore step one).

Specifically, setting up navigation in PageLines products requires two steps.

The process is very straight forward.

1. Create a new menu (under Appearance > Menus)

2. Attach it to the appropriate PageLines theme location

By using these menus, you can manipulate the order and changparent and children pages independently. You can also choose a variety of navigation items such as specific categories, paposts, and even custom items.

Drop Down Navigation

To use drop down navigation, first make sure the option for thactivated under settings > header and nav.

Drop Down navigation in PageLines themes, uses the hierarchy you create inWordPress menu area. This is achieved when you drag a menu item to the rigthe top level menu items.

Sub Navigation

To use sub navigation, make sure this option is activated under settings > headernav.

Sub navigation in PageLines themes uses the natural page hierarchy you create wadding or editing pages. You create this hierarchy when you select parent pages (onon Pages > add new).

Sidebars & Widgets

Widgets

Widgets are predefined boxes of content that you can place in sidebar areas on your site. These are set up under AppearanWidgets in the WordPress admin.
http://digwp.com/2010/08/using-menus-in-wordpress-3-0/http://digwp.com/2010/08/using-menus-in-wordpress-3-0/


5/16

Widget Areas

There are several different widget areas in the PageLines themes. These widget areas are placed in different parts of the theThe following will go over each widget area in detail.

Sidebars in the PlatformPro Framework

Using Widgetized Sidebar Sections

In PlatformPro, sidebars are managed through drag and drop sections (each widgetized sidebar is a section).

This changes the capability of sidebars and makes them much more flexible. For example, you can place several sidebars in sidebar1 template-area and hide and show them using section control.

With Base Child theme 1.0.4 we added a section (Base Sidebar) that shows you how to add an unlimited number of drag/dwidgetized sidebar areas using custom sections.

Sidebars In Standard PageLines WordPress Themes

iBlogPro4, WhiteHousePro3, StationPro3, EcoPro

Main SidebarThis is the widget area that appears in your sidebar by default. Drag and drop any number of widgets into this areyou need.

Secondary Sidebar

The Secondary Sidebar widget area is intended as a replacement for the Main Sidebar on selected pages. For example, if ylike a specific set of widgets only to replace the Main Sidebar widgets on certain pages, you would use this sidebar. For the pyoud like to set to use the Secondary Sidebar, mark this in the Page Options in the Page Editor.

Content Sidebar & Full-Width Bottom Sidebar

The Content Sidebar resides in the page content area of your site. This sidebar is empty by default. If you add widgets to

widget area, widgets will be appended to the content section of your page. The Full-Width Bottom Sidebar is essentially the showever, it clears both the content and the main sidebar.Screenshot of PlatformPro using the content and fullwidth sidebars.

Morefoot Sidebars

The Morefoot footer (also called widgetized footer sidebars) area is comprised of three different widget areas: footer_footer_middle, footer_right. Each widget area is meant to only hold one widget. Drag and drop widgets into these contaiThey look like this and appear just above the main footer:
http://www.pagelines.com/docs/wp-content/uploads/2010/11/content_sidebar.jpghttp://www.pagelines.com/docs/wp-content/uploads/2010/11/content_sidebar.jpghttp://www.pagelines.com/docs/wp-content/uploads/2010/11/content_sidebar.jpghttp://www.pagelines.com/docs/wp-content/uploads/2010/04/widgets-648x236.jpghttp://www.pagelines.com/docs/wp-content/uploads/2010/11/content_sidebar.jpg


6/16

The Footer Widget Area (5-columns)

The footer content can be changed in two ways. If you like the content placed in the default footer you can simply replace portion in the theme options. The Footer Logo, the more statement, and the terms statement are changed in the Footer Options panel. The other two columnspecific menu locations that can be assigned with custom menus using WP3.0. (Ifdo not specify the default value will be used, in Platform this is Pages and RePosts ( Latest).

If you are looking for a more fine-tuned and custom footer you can do so u

widgets, however, you must replace all five columns with five new widgets to getfill out appropriately. In other words you cant use the Footer Logo option oCopyright Statement option and also place a widget via the widgets panel because is no way for the theme to assume or detect which column you are trying to repwith the widget.

You can add widgets to the footer by dragging and dropping widgets into the FoSidebars (5-column) section. The footer widgets looks like this:

Why are widgets appearing in my sidebars even though my widget containers are empty?

Each widget area will display a default widget or widgets when left empty (so you know what is active).

To turn off this feature, check the option to Hide Widget Areas When Empty in the Theme Settings > Sidebar Optionspanel.
http://www.pagelines.com/docs/wp-content/uploads/2010/04/Screen-shot-2010-09-17-at-3.18.24-PM.jpeghttp://www.pagelines.com/docs/wp-content/uploads/2010/04/Screen-shot-2010-09-17-at-3.25.05-PM.jpeghttp://www.pagelines.com/docs/wp-content/uploads/2010/04/morefoot.jpg


7/16

Templates & Sections

Template Setup

Overview

Template setup is probably the most important part of your sites design and youll probably have to experiment with some ooptions before you find the look you want.

This interface allows you to control the total look and feel of your templates, e.g. your post pages, page templates, etc Not only thallows you to do this using drag & drop AND best web developpractices! How about that?

That said, this is really easy, but you need to understand a couple keyconcepts first. Namely:

1. Template & Page Types i.e. your blog (posts)page, or the templates you select when creatingpages

2. Template Areas The different areas in each template, i.e. the header area, or the content

area3. Drag and Drop Sections Pieces of web design you can place in your template areas.

Templates and Page Types

Templates and page types consist of the different types of pages that are recognized by WordPress. These include:

1. Page Templates These are created by the theme, and selected when you create new pagesinside of WordPress

2. Page Types WordPress is designed to support a number of different page types. Someexamples of these include your blog page, your single post page, 404 pages, etc

Template Areas
http://www.pagelines.com/docs/sections-templateshttp://www.pagelines.com/docs/sections-templates


8/16

Each of the page templates, and page types consist of several template areas. Please look overdoc on how template areaswork.

Template areas behave differently depending on which one youre using. Here is a summary:

Header, Footer, Morefoot, Sidebar1, Sidebar2, Sidebar Wrap arGlobal Template Areas. They are present on all pages of your site. O

place sections here that you want on all or most pages.

Page Templates These are the templates that will show up (between you header and footeelements) depending on which page template you choose. Or if a user is viewing a blog post your posts pages.

Text Content Area This is the area where your WordPress text is placed, inside the maincolumn of your content section. Platform currently allows you to set up three configs for ton: pages, single posts, and on posts pages.

FYI Just to the right of the template area title is a graphic with a blue stripe across the top of it. The blue stripe shows whapart of the template page youre working on. It changes when you edit a different area.

What Are Sections?

The first step in using this interface is to select a template area. Each template area can have its own set of sections.

Sections are drag and drop pieces of web design that can be moved around your site. They are a lot like widgets, only they hamore complex tasks like JavaScript, CSS loading, options, etc

Your theme comes pre-installed with tons of sections; you can also add your own using the child theme.

Setting Up Templates

Once you understand what sections and template areas are, the rest is pretty easy.

Just follow these steps:

1. Visit the settings panel in the admin and navigate to template editor

2. Select the template area you want to configure (using select input)

3. Drag sections or move sections as desired (configure sections through global & meta options)

4. (Your new layout should be saved through AJAX)

5. View the page templates by selecting that template when creating a new page.

6. View the new config for single posts pages, and your blog pages simply by visiting them.

7. For additional page by page control, use section control to selectively hide or show sections

More on Section Control

Section Control is a tool for hiding and showing individual sections on a page to page basis.

This allows you to show and hide individual widget areas on each page, giving you complete control of sections and where are viewed.
http://www.pagelines.com/docs/sections-templateshttp://www.pagelines.com/docs/sections-templateshttp://www.pagelines.com/docs/template-setup/attachment/templateareas-globalhttp://www.pagelines.com/docs/sections-templates


9/16

Template Areas

Introduction

Sections and template-areas are the key to drag-and-drop control in platform. They allow you complete creative freedo

placing and customizing professional web design in your site.While sections and templates are extremely easy to use, some concepts may be new to people, so please spend some timunderstand how they interact. Once you do, youll be creating awesome websites in a snap.

Template Areas

Understanding drag and drop starts with understanding how templates work inside the framework.

There are two levels of structure to the templates

1. Parent Areas Header, Footer, The Templates, and Morefoot Area

2. Content Areas Posts Page Content Area (e.g. blog and category pages), Single Post ContentArea (viewing a post), and Page Content Area (content on page templates)

Parent Template AreasParent template areas are shown on all pages, although the templates area shows different content based on the page tempselected.

The structure for the parent areas looks like this:

Content Area

WordPress Content, Sidebars, etc

A special section is used with parent templates to handle the WordPress content.


10/16

This section is called content area, and this section contains:

Sidebar 1 Area

Sidebar 2 Area

Sidebar Wrap

Text Content Area In this area you can set up different sections based on the page type.

Again the text-content area is special as different sections are shown based on your settings in the admin panel. Currently,can have different section lists based on if the page is a posts page, a single post page or a regular page type.

The structure for the content section works like this:

PageLines Boxes


11/16

Introduction

Boxes and soapboxes are two different sections inside of PageLines Platform, that are used to display boxes in your site.

Both of these section use the box post-type set up in the WordPress admin, they just display differently.

In this doc well go over the differences, and talk about the settings for these two sections.

PageLines Boxes

PageLines boxes are a great way to display information on your site. They consist of a number of horizontally aligned bothat can have icons and other media associated with them.

The process of setting up boxes only requires three steps:

1. Place the boxes section on one or more templates using the template builder.

2. Build Set up any number of boxes using the box post type. Youll find this through your WordPress admin menu (leside)

3. Control Control where boxes show up using box-sets and section control. On each page you set up, you can choosewhich set of boxes you want to show, you can also choose to show/hide the entire box section on a page-by-page basiusing the section control option.

Here is a graphic depicting howBox posts, box-sets andpage templates interact.

Boxes Vs. Soapboxes

Boxes and soapboxes are basically two different ways of displaying bon your site. They both use potentially the same box elements set up in admin.

Boxes

Allow for up to five placed per row


12/16

Can have an icon on left or on top

Different size icons can potentially cause boxes to not line up horizontally

Soapboxes

Two-per-row

Has settings for links placed underneath

Icon is placed on top as an image

Stage area is set, so all soapboxes are lined-up horizontally

Features

Introduction

The PageLines feature-slider is one of the most dynamic and useful pieces of all its themes. This tutorial will teach you house it; as well as some tips and tricks on how to customize it to its fullest.

Features in Platform

Although using the feature-slider is really easy, if you are new to PageLines, the function of it may be a little confusing.

The process for getting a fully functional slider only requires three steps:

1. Setup Features and Feature Settings. Using the special feature post types and settings panels.

2. Place Features in a Template Area. You use page templates and drag-and-drop to place it.


13/16

3. Control Which Pages Show the Features. You use feature-sets and Section Control to do this.

Here is a graphic that shows you how the various feature elements interact..

Settings

There are tons of settings and most documentation for them is inline with the options themselves. Youll find them in places: in theme settings, on individual pages, and on feature posts themselves.

Number of features There is a control that allows you to control the total number of features. Default is 10.

Controlling Feature Order

To control the order of any post type (features, banners, or boxes) you need to install the Post Types Order plugin. It will ayou drag and drop control over their order

Advanced

The PageLines feature section is based on the Cycle plugin for Jquery. So theoretically, anything that this plugin can dofeatures can do as well.

If you are interested in extending the feature, or requesting additional settings, please review theJquery Cycle website first.
http://wordpress.org/extend/plugins/post-types-order/http://jquery.malsup.com/cycle/http://jquery.malsup.com/cycle/http://wordpress.org/extend/plugins/post-types-order/http://jquery.malsup.com/cycle/


14/16

PageLines Banners

Introduction

Banners are a great way to show content on your site. Specifically, they are inspired by a highly effective way of giving protours.

The purpose of this document is to give you a good understanding of how to use the banner section inside of the Platformframework.

How Banners work

To create the content for the sections in Platform, they use content from special post-types in WordPress. You can find thesetup areas in WordPress menu in the admin.

To set up Banners you only need to do three things:

Create New Banners Build an unlimited number of banners using special post types (on left in admin).

Create Banner Sets & Control Viewing Used to control which posts show on different pages, use section controhide or show on a page-by-page basis.

Arrange Banners Arrange the order that the posts appear using the awesome post types order plugin.


15/16

Here is a graphic showing how the various element interact:

Other Sections

Introduction

There are tons of sections already for Platform and more being developed.

This page will cover the settings and considerations of sections not covered with their own page.

Carousel Section

The carousel section has three modes:

1. Post Thumbnail Mode This mode pulls in the featured image thumbnails from recent posts in your blog.


16/16

2. FlickrRSS Mode Flickr mode uses the FlickrRSS plugin to bring in images from your Flickr account or a Flickr community.

3. NextGen Gallery Mode Uses images from a Gallery created using the NextGen Gallery plugin for WP.

Troubleshooting My Carousel Isnt WorkingOccasionally people have problems getting their carousel working.Carousel problems are usually related to:

Plugin and Javascript Conflicts Please deactivate all plugins to debug

Image Dimension Conflicts If the widths of your images are greater than the space provided for them an error willcreated. To fix: change the number of carousel items to a lower number.

Carousel Not Filled The carousel will create an error if the images its provided (for example from a gallery) dontfully populate the width of the carousel. Add more images to fix.

Callout Section

The callout section is set up underneath Template Setup in the administrative panelCallout has four options: image, text and link. Use the drag and drop interface to place this section throughout the site.We recommend using the callout section as a call-to-action for whatever action you want your users to take. This coulsubscribing to your blog, or purchasing your product.

platform pro

Documents