How to Get Started with PageLines

Revision as of 15:37, 13 February 2012

Welcome to PageLines!

If you haven't already installed PageLines this guide might be hard to use. Please checkout the How to Install PageLines Guide first.

Now that's out of the way onto getting started with PageLines!

I'm going to show you how easy it is to start building a great looking webpage use the PageLines Framework. In the following tutorial, I'm going to configure a brand new installation of PageLines to have an "outer space" look & feel, but feel free to use your own creativity as you follow along.

Pick your default Layout

First, let's decide on the layout that you want your site to have. You can choose to have just a main content area, main content with one or two side bars on the right or left, or main content in between two sidebars.

Default Layout Mode

From your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Settings"
2. Select the "Layout Editor" tab
3. Go to the "Default Layout Mode." Change the layout from a single right sidebar single left sidebar
4. Now go to the "Layout Dimensions Editor." Click on the "left sidebar" layout
5. Change the "Content Area" width to 960px & the SB1 to 300px
   • This is done by dragging the blue edges of the layout windows to the desired width
6. Click "Save Options"

• You can also change the Layout Dimensions & Layout Handling. Refer to this tutorial for more detailed information about the Layout Editor

Get your logo on your site

Your website logo is the first thing a visitor sees upon arrival, so you want it to instantly make a positive impression. PageLines Framework comes preinstalled with its own logo, however you can easily install your own logo that will really make your website yours.

To upload your custom logo

Upload Custom Logo

Header Logo

From your WordPress Administration Panel:

1. Select the PageLines panel, then Settings
2. Select the "Website Setup" tab
3. Under the "Custom Header Image" section, click "Upload Image"
   • Browse your computer & select the image you want uploaded
   • You can use .png, .jpg, or .gif
   • If you do not have a custom logo yet, select HeaderLogo.png that is included in resources.zip
4. Click "Save Options"

If you already uploaded a custom logo to your server, simply type the full URL of the image & click "Save Options."

Setup background image/color

The background of you site can be configured using Color Control. A more detailed tutorial on using Color Control can be found here, but for now, lets change a few settings.

Background Image/Color

From your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Settings"
2. Select the "Color Control" tab.
3. Under "Site Design Mode," choose "Full-Width Sections"
4. Under "Basic Layout Colors, enter the hex color number for the following items:
   1. Body Background - Change from #ffffff to #000000
   2. Content Background - Change from transparent (blank) to #ffffff
5. Under "Site Background Image,"
   1. Click "Upload Image" and select Leaf.png that is included in resources.zip
   2. Set Background Image Repeat - Tile
   3. Vertical & Horizontal Position In Percent - 0
   4. Set Background Attachment - Scroll
6. Click "Save Options"

Choose if your site is a Blog or Website and setup WP to do this

By default, WordPress is installed as a blog site. This means that your Home Page will display your blog posts. If you are building a regular website, you may not want the Home Page to contain any blog posts. Simply reassign the Home Page from a blog page to a regular page. If you still want to have a blog, you can easily move it to somewhere other than the Home Page. First we will need create a separate "Home" page and "Blog" page.

Create Home Page

From your WordPress Administration Panel:

1. Select the "Pages" panel, then "Add New"
2. Title this page "Home"
3. Enter some content for your page (Optional)
4. For now keep this page's template set at "Default Template"
5. Click "Publish"

Repeat these steps a second time to make your Blog page, only this time title your page "Blog" and leave the page completely blank. Content added in this page via editing will not show. Only dynamically created blog listings will appear

Now that you've created a separate Home page & Blog page, You need to need to tell WordPress to treat each page as such.

Assign Front & Posts Page

From your WordPress Administration Panel:

1. Select the "Settings" panel, then "Reading"
2. Under "Front page displays," select "A static page"
3. Assign "Front page:" to "Home" & "Posts page:" to "Blog"
4. Click "Save Changes"

Add some sections to a page

This is where the true beauty of the PageLines Framework comes into play. You can customize any page by adding, removing, & rearranging Sections that will display whatever content you choose. Let's start by adding some Boxes & Features to the "Home" page that we created earlier.

Add Sections

From your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Templates"
2. Under "Page Templates," make sure you have the "Default Page" Template selected
   • This is because the "Default Template" is what was assigned when we created the "Home" page
3. Drag the "Boxes" section & the "Features" section from the "Available / Disabled Sections" over to the "Active Sections"
4. The Section Order will save automatically

Customize the page with the meta settings

The great thing about the PageLines Framework is that you can customize each page to look however you want. This is primarily done through the page's Meta Settings. You can change the page's layout, control each section individually, upload a different background image, and select a Secondary Navigation Menu. Let's begin by changing some meta settings on our Home Page.

Page Meta Settings

From your WordPress Administration Panel:

1. Select the "Pages" panel, then "All Pages"
2. Click to edit the "Home" page
3. On the MetaPanel, click "Page Setup"
   1. The site's default layout has a Main Column with a single right Sidebar. Change this page's layout to show the Sidebar on the left
   2. "Individual Page Section Control" will allow you to hide (or show) all of the Sections that are currently "active" in that page's template. Let's "Hide" the Comments section.
      • Remember that the Comments section will only be hidden on this page. Any other page assigned to this template with still display the Comments until you hide them using that page's own Meta Settings
   3. Upload a different Background Image for this page. All of your other pages will still show the tiled Leaf.png. Try uploading your own image, or use HomePageBG.png that is included in resources.zip
      • Use the following settings for the image positioning:
        • Set Background Image Repeat - Do Not Repeat
        • Vertical Position In Percent - 0
        • Horizontal Position In Percent - 50
        • Set Background Attachement - Fixed
   4. Select a Secondary Navigation Menu
      • If you haven't created any custom WordPress menus yet, skip this step for now. Click (here) for our guide on WordPress menus
4. Click "Save Meta Settings"

Notice on the "PageLines Meta Settings" there are additional tabs under "Page Setup:"

• Boxes Section
• Features
• Banner Section
• Callout Meta
• Carousel Meta
• Highlight Meta

Have at it!

Now that we've shown you a little bit on how to get your website going, it's time to start building! Please feel free to checkout some of our more detailed docs for any other questions you may have.