PageLines Drag & Drop Framework For WordPress – A First Look

PageLines is a responsive WordPress Framework featuring drag-and-drop design options. PageLines 2.0 was released December 2011, as a successor to PlatformPro 1.x. This review is based on version 2.2.5 of the PageLines Framework.

The files of PageLines reside in the themes directory just like any other WordPress theme. Upon activation, you can use PageLines right away as blogging theme with a clean, minimal design. In order to use PageLines for other kinds of websites – like business websites or online portfolios – you need to create a static page homepage and a blog page.

Ways To Extend The PageLines

The PageLines Framework is extendable with Sections, Themes, and Plugins. A basic understanding of these options and their differences is crucial.

Sections are the main building blocks for creating websites with PageLines. Consider a section as a PageLines’ specific widget. Just like other WordPress widgets, you can drag and drop these blocks around your page layouts.

The PageLines Framework comes with 30+ Core Framework sections, located in the pagelines\section folder. Several of these sections will show up as widgetized areas on the Widgets page of your WordPress installation. Additional Sections are available through the PageLines Store – 5 for free, and 22 premium Sections.

PageLines Themes are child themes to the PageLines Framework and are installed in a separate folder, next to the framework. The PageLines theme collection contains currently 2 free (Base and Mud), and 10 premium child themes. A child theme has at least its own stylesheet and screenshot image, but generally also a custom functions.php file and even sections.

WordPress treats PageLines Plugins in the same way as other plugins. Plugins are added to the plugins directory and you can manage them through the Plugins page. Additional plugins can be downloaded from the Store – currently 6 free, and 5 premium plugins.

In addition to the above, PageLines also offers two Integrations – PageLines Vanilla and PageLines MediaWiki for a seamless integration of respectively the Vanilla forum and MediaWiki.

It is possible to download PageLines extensions from the Store on the web. However, after registering your copy of PageLines via Dashboard >> Your Account, you will be able to add extensions more comfortable through via the panel (Dashboard >> Store).

So first thing to do after installation is registering your copy of PageLines. It will not be hard to forget this, since the Your Account screen will appear as soon as you have not registered. After registration all the PageLines sections, themes and plugins are to your disposal through the PageLines Dashboard.

Next, go to the Store (Dashboard >> Store >> Sections) and activate the free PageLines Sections Plugin. This plugin installs and manages all other sections.

Three Ways to Customize a PageLines Site

To customize your website you can use the Custom Code box located at PageLines >> Site Options >> Custom Code. This is the most simple and quick way to add custom styling. These custom settings are stored in the website’s MySQL database. The downside of this procedure is that the code is not very transferable.

With earlier versions of PageLines, the preferred way to customize a site was by applying a child theme. The benefit of a child theme is that you can leapfrog the development of a website, since you do not have to start from scratch; you customize an existing theme. The disadvantage is that when you use a third party child theme, you might lose your edits when the child theme is updated by its author.

As of PageLines 2.0, the PageLines Customize plugin is the recommended approach to customizations. This free plugin emulates a child theme and saves the editable files – and therefore your customizations – in the plugin\pagelines-customize folder. With the Customize plugin, you can update the core files as well as child themes and remain your custom code.

Initially, it was my intention to use the Base child theme. Since the PageLines Customize plugin is the preferred way to customize a site, I decided to use this plugin. After installation, the Customize plugin needs to be activated at the Plugins page. Now we are ready for our exploration of the PageLines Framework.

Menus & Widgetized Areas

PageLines supports four WordPress menus:

• Primary Website Navigation – just below the header (Branding)
• Page Navigation in Footer Columns – in the Footer Columns Sidebar
• Simple Nav Section – in the Footer Template
• BrandNav Section Navigation – right aligned in the header

PageLines does not include any custom widgets. The default WordPress widgets are accessible though. The framework incorporates ten widgetized areas:

• Primary Sidebar
• Secondary Sidebar
• Tertiary Sidebar
• Universal Sidebar
• Full Width Sidebar
• Content Sidebar
• MoreFoot Left
• MoreFoot Middle
• MoreFoot Right
• Footer Columns Sidebar

You could say that PageLines does not supply any custom widgets, since it comes equipped with 30+ section that offer the functionality others put custom widgets.

PageLines Custom Post Types

Outside the panel, PageLines adds custom post types for Banners, Boxes, and Features. Each with its own categories – sets in PageLines lingo. Features are another word for slides.

Boxes are often presented in sets of three in a grid-view like the sample above – the image is positioned to the left or right next of the text, or on top of the text. Banners also display text with an image. The difference with boxes is it that banners stretch content width.

Another way to represent text with an image is by applying Soapboxes. Soapboxes are basically boxes with a bigger image on top of the text. You can have up to five boxes in line, but you can only have two Soapboxes next to each other. Soapboxes are not installed by default. You can active the free Soapbox section through the Store. Soapboxes are also maintained within the Box module.

The PageLines Panel

PageLines adds a module for the PageLines panel to the WordPress menu. This panel is positioned directly under the WordPress Dashboard. The menu of the PageLines module includes five pages:

• Dashboard
• Site Options
• Page Options
• Drag & Drop
• Store

The PageLines Dashboard

The PageLines Dashboard serves a vertical menu with seven tabs, stated here in bold.

The Updates tab informs you about any available Updates, displays news from the PageLines blog and the WordPress Community, and lists updates from the Store and the latest extensions.

The Getting Started screen gives some tips to about PageLines in general, includes a video Build A Site In 10 Minutes, and informs you about the special support of some common WordPress plugins like Disques Comments, NextGen-Gallery and WP-PageNavi.

The Plus Extensions and Live Chat (still in Beta) are only relevant for PageLines Plus Members.

At the Resources you will find directions to the Documentation, the Forum and the PageLines Channel on YouTube.

We have already encountered the Your Account screen when we registered our PageLines copy.

The Import/Export screen includes a button that generates a .dat file with all your PageLines Settings. Here you can also import these settings either complete or selectively, by checking the boxes of the Template Settings, Primary Settings, Special Meta Settings, and Layout Configuration.

The PageLines Site Options

The page is also referred to as Settings. Here you configure the site wide settings, while the settings for the individual page types are configured at the Page Options Page. The Site Options menu includes nine tabs.

The Website Setup allows you to upload image files for the header, favicon, and watermark. In addition, you can enter the Twitter user, the website hash tag. The last option lets you

With the Layout Editor, you choose the desired Layout Handling; either responsive (with pixel or percentage width) or static with a pixel with. In addition, you select your preferred design more; full width (also known as stretched) or fixed width (aka boxed). Optionally, you can disable the Mobile Optimized View with a checkbox.

The Default Layout Mode and the Layout Dimensions are also set with the Layout Editor. The Default Layout can be set to one column (just the content area), two or even three columns. In the latter case, you can opt for a sidebar at each side, or have two sidebars at the same side of the content area. For each individual post and page, you have the ability to alter these settings.

The Layout Dimensions of the global width, main content area, and sidebar or sidebars are set with a slider. The max width of the site is 1340 pixels.

At the Color Control screen, you choose your color for the Body Background, Page Background, Content Background, Primary Text, Text Headers, Primary Links, and Footer Text. You can set these colors with a color picker or by entering the hexadecimal value of the desired color. If you want to upload a background image, you can do that here too.

The Typography lets you select the preferred fonts for headers, primary text, secondary font (sub titles, meta), inputs and text areas. PageLines offers 60+ fonts which you can select with a drop-down menu.

When any of these fonts is to your taste, you can add more Google Fonts or Typekit. You add individual Google Fonts with some custom CSS, or you add all Google fonts to the font system by installing the free Googlefonts plugin. Typekit fonts are activated by entering a Typekit Header Script in the appropriate text box on the Typography page.

The navigation settings of the NavClassic & BrandNav Section, social network profiles an icons are set at the Header and Footer section. Here you also select the number of desired footer columns (up to six!), and add a footer logo.

At the Blog and Posts tab, you can choose between two layouts for the blogposts:

• Magazine Layout Mode – the first two posts are displayed full width, the others in grid view
• Blog Layout Mode – all posts are displayed full width

In PageLines lingo, the full width posts are Feature Posts, and the post in grid-view clips. You can choose from four thumbnails layouts for feature posts and clips:

• left justified
• on top
• left in excerpt
• right in excerpt

Here you can also configure your preferences concerning: the metabars, thumbnail placement, the placement of the social share buttons, the text of the Continue Reading link, the excerpt length, and the placement of full post content – instead of excerpts.

The NavBar and the Fixed NavBar are configured at the NavBar tab. By default, the NavBar is positioned just below the header. The Fixed NavBar is positioned at the top of the page, but remains at the top of the screen, when scrolling down the page.

The Advanced tab serves options like Google IE Compatibility Fix, and Google Pretty Code. The Custom Code page includes text boxes for custom CSS, header scripts, and Google asynchronous analytics.

The PageLines Page Options

PageLines offer you the possibility to add the following features to the available page types:

• Banners – please refer to the custom post types above
• Boxes (and Soapboxes) – please refer to the custom post types above
• Callout – call to action area with one button
• Carousel – a scrolling picture gallery
• Features – big custom post type slider
• Hero Unit – large callout
• Highlight – another  callout area
• Masthead – call to action area with two buttons
• QuickSlider – small slider, up to 10 slides

Within the Page Options, you define the default settings for these features. At the Site Defaults tab you enter the settings affecting all page type. For each of the individual page types you have the ability to adjust these default settings, or disable them all together.

The available page types – also referred to as Special Pages – are:

• Blog Page
• Archive Page
• Category Page
• Search Defaults
• Tag Listing
• Author Posts
• 404 Page

PageLines Drag & Drop Layout

The Drag & Drop menu is also referred to as the Template Setup. PageLines comes with six page templates – Default, and Templates 1 to 5. The Drag & Drop page of the panel, is where you assemble these six page templates and the earlier mentioned Special Pages. Assembling templates and pages is done by drag-and-drop.

Every PageLines page contains four components:

• Header
• Page Template
• MoreFoot
• Footer

Each of these components is fully widgetized. It is up to you to decide to use these components or not. However, you cannot change the content of the Header, MoreFoot, and Footer on certain pages, since the contents of these three components is defined site wide.

You can decide to display or to hide these components, on specific pages, but you cannot alter them for a specific page.

The elements of the Page Template component can be separately configured for each individual page template or special page. The Page Template is also fully widgetized and includes up to four elements:

• Content Area
• Sidebar 1
• Sidebar 2
• Wrap

The Content Area is the template part that displays the content from posts or pages, either as an index pages or as a singular page.

When you refer back to the widgetized areas, you will not find a Sidebar 1 or 2. It is up to you to assign one of the available sidebars – Primary, Secondary, Tertiary or Universal – to Sidebar 1 and 2 on a specific Page Template. This gives you a lot of options with regard to alternate sidebar arrangements.

The Wrap is a widget area on top of, or beneath, the sidebar or sidebars. The position of the Wrap is set at Site Options >> Website Setup.

The major question is of course, where to drop which widgets or features – like boxes, and callouts? When you want to content of a widget or feature is displayed site wide, drop into the Header, the MoreFoot, or the Footer.

In case you want to bring the contents of a feature or a widget only to the attention of your visitors on specific page, add them to the Page Template or the Sidebars.

Plans and Pricing

Of the WordPress Frameworks reviewed so far, I found PageLines the most confusing one. First of all, it offers a lot of options. In addition, you can achieve comparable results with more than one feature. For example, there are Callouts, Hero Units, Highlights and Mastheads that offer more or less the same possibilities.

Another reason, why I found PageLines confusing is that the documentation is not complete. That was a shock to me. From a free, open source piece of software, I can accept that the documentation contains blanks and pages under construction. But from one of the top priced premium frameworks?

A third reason why the documentation was confusing is that the name conventions have changed for a part with the upgrade from PlatformPro 1.x to PageLines 2.x.

Although it is possible to build complex page structures simply by drag-and-drop, the color control and typography options through the graphical user interface are a limited. Not to mention margins and paddings. This implies that there is a reasonable change that will end up adding CSS manually.

Does this make PageLines a bad framework? No definitely not. But be prepared for a slightly longer learning curve. To qoute Larry Wall, the founder of the Perl programming language; “Learn it once, use it many times”.

PageLines offers several plans. All come with a 30-Day Money Back guarantee. First there are two types of licenses:

• $197 Profession/Personal Edition
• $ 397 Developer/Business Edition

The main difference is that you are allowed to use the latter also for client projects. In both cased, you get only one year of forum support and updates.

With a Developer/Business license, you also have access to developer resources & beta releases, and you get the PageLines Vanilla and PageLines MediaWiki integrations for free as a bonus.

While browsing the Store on the web, I noticed that premium sections sell from $7 to $20. And I have seen prices for premium plugins in a range from $5 to $25. Especially premium child themes are too expensive to my taste – a single child theme has a price tag of $50.

Only part of these extensions is creations by PageLines. The other child themes, plugins and extensions are from third-party developers.

Next to the two above mentioned Framework Only licenses, PageLines also offers two memberships:

• Standard Plus – one time $197 for the Profession/Personal Edition, plus $15 monthly
• Developer Plus – one time $397 for the Developer/Business Edition, plus $19 monthly

The monthly fee entitles you to forum support and software updates, plus Live chat and free access to all PageLines built extensions –  extensions built by third-party developers are not included. As a Developer Plus member, you also get access to Developer only extensions.

In other words, when you are a developer and you want to stay current, PageLines will cost you $397 + (12 * $19) = $625 in the first year, and $228 in the following years.

At the moment you can save 100 or even 200 bucks; the Professional/Personal Edition is on sale for $97 and the Developer/Business Edition for $197 – check the Pricing page.