Docs

How to Get Started with PageLines

[edit] Please Note

These docs are now deprecated, we have a new Support area located here

(Difference between revisions)
 
(134 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
[[Category:New Page]]
+
[[Category:New Page]] {{#ev:youtubehd|KrqsYNqXpNA|600|PLET-1.2: PageLines Essential Training How to get Started with PageLines}}
−
Thank you for purchasing the PageLines 2.0 Framework. At PageLines, your satisfaction is our number one priority. Here is a brief guide that will help you get started.
+
−
==Get your logo on your site==
+
−
[[File:Custom-Header-front-end.png‎|200px|thumb|right|alt=Custom Header Image|Custom Header Image]]
+
−
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.<br /> <br />
+
  
−
===To upload your custom logo===
+
Welcome to PageLines!
−
<br /> [[File:Custom-Header-Image.png‎|200px|thumb|right|alt=Custom Header Image|Custom Header Image]]
+
 
−
From your WordPress Administration Panel.
+
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 will configure a brand new installation of PageLines to have an "outer space" look & feel. However feel free to use your own settings & creativity as you read along.
−
# Select the PageLines panel, then Settings.
+
 
−
# Select the "Website Setup" tab.  
+
===Please Note===
−
# Under the "Custom Header Image" section, click "Upload Image."
+
This guide is starting out assuming you have already done the following tasks:
−
#* Browse your computer & select the image you want uploaded.
+
# Installed WordPress
−
#* Supports '''.png''', '''.jpg''', & '''.gif'''
+
# Set a static page as your "Home" page
−
# Click "Save Options."  
+
# Installed & Activated PageLines
−
If you already uploaded a custom image to your server, simply type the full URL of the image & click "Save Options."
+
 
 +
If you need help with any of these things, check out the [[Before You Get Started with PageLines]] guide first.
 +
 
 +
Now that we've got that out of the way, it's time to get started with PageLines!
  
 
==Pick your default Layout==
 
==Pick your default Layout==
−
Next 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.<br / >
+
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.<br / >
 
[[File:Default-Layout-Mode.png‎|200px|thumb|right|alt=Default Layout Mode|Default Layout Mode]]
 
[[File:Default-Layout-Mode.png‎|200px|thumb|right|alt=Default Layout Mode|Default Layout Mode]]
 
<br />
 
<br />
Line 23: Line 22:
 
# Select the "PageLines" panel, then "Settings"
 
# Select the "PageLines" panel, then "Settings"
 
# Select the "Layout Editor" tab
 
# Select the "Layout Editor" tab
−
# Under "Default Layout Mode," select a Default Layout
+
# Go to the "Default Layout Mode." Change the layout from a single right sidebar single <em>left</em> sidebar
 +
# Now go to the "Layout Dimensions Editor." Click on the "left sidebar" layout
 +
# Change the "Content Area" width to 960px & the sidebar (SB1) to 300px
 +
#* This is done by dragging the blue edges of the layout windows to the desired width
 
# Click "Save Options"
 
# Click "Save Options"
−
* You can also change the Layout Dimensions & Layout Handling. Refer to [http://www.pagelines.com/wiki/index.php?title=Use_the_Layout_Editor this tutorial] for more detailed information about the Layout Editor
+
* You can also change the Layout Handling. Refer to [http://www.pagelines.com/wiki/How_to_Use_the_Layout_Editor_Settings this tutorial] for more detailed information about the Layout Editor
 +
[[file:Layout.png|725px|frame|Layout]]
 +
==Setup Your Custom Logo (Branding/Header Image)==
 +
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.<br />
 +
===To upload your custom logo===
 +
[[File:Upload-Custom-Logo.png‎|200px|thumb|right|alt=Upload Custom Logo|Upload Custom Logo]]
 +
From your WordPress Administration Panel:
 +
# Select the PageLines panel, then Settings
 +
# Select the "Website Setup" tab
 +
# 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 '''Header-Image.png''' that is included in [http://api.pagelines.com/Resources/resources.zip resources.zip]
 +
# 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/ Text Color==
 +
The background of you site can be configured using Color Control. A more detailed tutorial on using Color Control can be found [http://www.pagelines.com/wiki/index.php?title=Use_Color_Control here,] but for now, lets change a few settings.<br /><br />
 +
[[File:Setup-Background.png‎|200px|thumb|right|alt=Background Image/Color|Background Image/Color]]
 +
From your WordPress Administration Panel:
 +
# Select the "PageLines" panel, then "Settings"
 +
# Select the "Color Control" tab.
 +
# Under "Basic Layout Colors" & Page Text Colors", enter the hex color number for the following items:
 +
## Content Background - Change from '''blank''' (transparent) to '''#000000'''
 +
## Primary Text - Change from #000000 (black) to #ffffff (white)
 +
## Text Headers - Change from #000000 (black) to #ffffff (white)
 +
# Under the "Site Background Image" section, click "Upload Image"
 +
#* Browse your computer & select the image you want to upload
 +
#* You can use '''.png''', '''.jpg''', or '''.gif'''
 +
#* If you do not have a custom background yet, select '''Background.png''' that is included in [http://api.pagelines.com/Resources/resources.zip resources.zip]
 +
# Click "Save Options"
 +
[[file:Header&BackgroundImage.png|725px|frame|Header & Background Image]]
 +
==Using Custom Code==
 +
Knowledge of [[Glossary#CSS|CSS]] isn't required to be able to use the PageLines Framework. However if you have some knowledge of it, you can do some pretty neat things. PageLines has a lot of great options for customizing your site. However we don't want make an option for absolutely everything. This is because doing so would potentially lead to having ''thousands'' of options for you to sort through. Obviously, this would severely over-complicate the Framework. To compensate we've made it extremely easy to add your own custom code. Click on [http://www.pagelines.com/wiki/How_to_Add_Customization How to Add Customization] for more information.
 +
===Insert Custom CSS===
 +
I like having the black Content Background on this page, but I don't like that it covers up so much of my site's background image. I can use a CSS rule to give the Content Background a slight transparency so we can still see the background image underneath.
 +
[[File:Custom-CSS.png‎|200px|thumb|right|alt=Custom CSS|Custom CSS]]
 +
From your WordPress Administration Panel:
 +
<ol>
 +
<li>Select the "PageLines" panel, then "Settings"</li>
 +
<li>Select the "Custom Code" tab</li>
 +
<li>Under "Custom CSS Rules," enter the following css:</li><SPAN style="background-color: #ffff00">page .content {background: rgba(0, 0, 0, .6);}</span>
 +
<li>Click "Save Options"</li>
 +
</ol>
 +
 
 +
==Header And Footer Options==
 +
[[File:HideSearchAndRSS.png‎|200px|thumb|right|alt=Hide the Search Field & Blog RSS Icon|Hide the Search Field & Blog RSS Icon]]
 +
You can easily click or unclick "checkboxes" to hide or show different elements on your site. For example:
  
−
==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.
 
−
<br /><br />
 
−
[[File:Create-Home-Page.png‎|200px|thumb|right|alt=Create Home Page|Create Home Page]]
 
 
From your WordPress Administration Panel:
 
From your WordPress Administration Panel:
−
# Select the "Pages" panel, then "Add New"
+
# Select the PageLines panel, then Settings
−
# Title this page "Home" (or whatever you want)
+
# Select the "Header And Footer" tab
−
# For now you can keep this page's template set at "Default Template"
+
# Check the "Hide Search Field?" box
−
# Click "Publish"
+
# Uncheck the "Display the Blog RSS icon and link?" box
−
'''Repeat these steps a second time to make your Blog page, only this time title your page "Blog"'''
+
# Click "Save Options
−
<br /> <br />
+
[[file:CustomCSS.png|725px|frame|Custom CSS]]
−
Now that you've created a separate Home page & Blog page, You need to need to tell WordPress to treat each page as such.
+
==Add Sections to a Page==
−
[[File:Assign-Front-&-Posts-page.png‎|200px|thumb|right|alt=Assign Front & Posts Page|Assign Front & Posts Page]]
+
This is where the true beauty of the PageLines Framework comes into play. You can customize any page by adding, removing, & rearranging [[Glossary#Sections|Sections]] that will display whatever content you choose. Let's start by adding some [[Glossary#Features Section|Features]] & [[Glossary#Boxes Section|Boxes.]]<br />
−
<br />
+
 
 +
===Add Features===
 +
[[File:Add-Features.png‎|200px|thumb|right|alt=Add Features|Add Features]]
 
From your WordPress Administration Panel:
 
From your WordPress Administration Panel:
−
# Select the "Settings" panel, then "Reading"
+
# Select the "PageLines" panel, then "Templates"
−
# Under "Front page displays," select "A static page"
+
# Select the "Content Area" and make sure you have the <br /><span style="padding:0.4em 7px;border-radius:6px;background-color:#5aa0f0;color:#ffffff">Template | Default</span> selected as well
−
# Assign "Front page:" to "Home" & "Posts page:" to "Blog"
+
#* This is because the "Template | Default" is what was assigned when we created the "Home" page in the [[Before You Get Started with PageLines]] doc
−
# Click "Save Changes"
+
# Drag the "Features" section from the "Available / Disabled Sections" over to the "Active Sections"
 +
# For this example, lets also remove the "Comments" section
 +
# The Section Order will save automatically
 +
 
 +
===Add Boxes===
 +
[[File:Add-Boxes.png‎|200px|thumb|right|alt=Add Boxes|Add Boxes]]
 +
# Select the "Morefoot" Template Area
 +
# Drag the "Boxes" section from the "Available / Disabled Sections" over to the "Active Sections"
 +
# The Section Order will save automatically
 +
[[file:AddSections.png|725px|frame|Add Features & Boxes]]
 +
<div class="clear"></div>
 +
 
 +
===Configure the Sections===
 +
Now you should see some default Features & Boxes on your page. To find out more on how to add your own custom Features & Boxes, check out the following Tutorials:
 +
* [[How to Use the Features Section#Add_New_Feature|How to Use the Features Section]]
 +
* [[How to Use the Boxes Section]]
 +
 
 +
For this example, I setup my page to show some "Space" related Features & Boxes
 +
[[file:ConfigureSections.png|725px|frame|Configure the Sections]]
 +
 
 +
==The PageLines Store==
 +
The Last thing I want to show you is how to download & install a section from the PageLines Store. In this example, we will be placing a free section called "Twitter Profile into the Sidebar." This section will visitors to view the three most recent updates from a Twitter account.
 +
 
 +
===Install Twitter Profile===
 +
[[File:Install-Twitter-Profile.png‎|200px|thumb|right|alt=Install Twitter Profile|Install Twitter Profile]]
 +
From your WordPress Administration Panel:
 +
 
 +
# Select the "PageLines" panel, then "Store"
 +
# Select the "Sections" tab, then "Add Sections"
 +
#* If you haven't already, you will first need to install & activate the "PageLines Sections" plugin
 +
# Select the "Top Free" tab
 +
# Locate the "Twitter Profile" section and click "Install"
 +
# Under the "Added" tab, you will find your newly installed section
 +
# If not already, click "Activate"
 +
===Place Twitter Profile in your sidebar===
 +
[[File:Place-Twitter-in-Sidebar.png‎|200px|thumb|right|alt=Place Twitter in Sidebar|Place Twitter in Sidebar]]
 +
Now you will need to tell PageLines where you want the Twitter Profile section to appear on your site.
  
−
==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.<br />
 
−
[[File:Add-Sections.png‎|200px|thumb|right|alt=Add Sections|Add Sections]]
 
−
<br />
 
 
From your WordPress Administration Panel:
 
From your WordPress Administration Panel:
 
# Select the "PageLines" panel, then "Templates"
 
# Select the "PageLines" panel, then "Templates"
−
# Under "Page Templates," make sure you have the "Default Page" Template selected
+
# Select the "SB1" (sidebar) Template Area
−
#* This is because the "Default Template" is what was assigned when we created the "Home" page
+
# Drag the "Twitter Profile" section from the "Available / Disabled Sections" over to the "Active Sections"
−
# Drag the "Boxes" section & the "Features" section from the "Available / Disabled Sections" over to the "Active Sections"
+
# For this example, lets also remove the "Comments" section
 
# The Section Order will save automatically
 
# The Section Order will save automatically
  
−
==Customize the page with the meta settings==
+
===Clone a Section===
−
==Customize your blog==
+
[[File:Clone-Twitter-Profile.png‎|200px|thumb|right|alt=Clone Twitter Profile|Clone Twitter Profile]]
−
==Use extend==
+
 
−
==How to get support==
+
Sometimes we may want to have the same section displayed more than once on a page. With PageLines, it's very easy to duplicate a section
−
==Have FUN!==
+
# Click "Options"
 +
# Click "Clone"
 +
#* Now you will see that a "Twitter Profile #2" has appeared
 +
# The Section Options will save automatically
 +
 
 +
[[file:ActvateTwitterProfile.png|725px|frame|Activate Twitter Profile]]
 +
 
 +
===Configure Twitter Profile===
 +
You will now see placeholders for the two sections. This is because You still need to specify a Twitter Username for these two sections. This is done in the PageLines Meta Settings. You can either click on the placeholder link & skip to step 4, or:
 +
 
 +
[[File:Configure-Twitter-Profile.png‎|200px|thumb|right|alt=Configure Twitter Profile|Configure Twitter Profile]]
 +
From your WordPress Administration Panel:
 +
 
 +
# Select the "Pages" panel, then "All Pages"
 +
# Click to edit the "Home" page
 +
# On the "Meta Panel," click the "Twitter Profile" tab
 +
# Enter a Twitter username
 +
#* In this example, I'm going to choose "PageLines"
 +
# Do the same thing for the clone
 +
#* For the clone, I'm choosing "WordPress"
 +
# Click "Save Options"
 +
[[file:ConfigureTwitterProfile.png|725px|frame|Configure Twitter Profile]]
 +
 
 +
==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 checkout our other docs as we dive deeper into the PageLines framework.
 +
[[file:BeforeAndAfter.png|725px|frame|Before & After]]

Latest revision as of 23:04, 23 February 2012


Welcome to 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 will configure a brand new installation of PageLines to have an "outer space" look & feel. However feel free to use your own settings & creativity as you read along.

Contents

Please Note

This guide is starting out assuming you have already done the following tasks:

  1. Installed WordPress
  2. Set a static page as your "Home" page
  3. Installed & Activated PageLines

If you need help with any of these things, check out the Before You Get Started with PageLines guide first.

Now that we've got that out of the way, it's time to get started with PageLines!

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
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 sidebar (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 Handling. Refer to this tutorial for more detailed information about the Layout Editor
Layout

Setup Your Custom Logo (Branding/Header Image)

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.

Upload Custom Logo
Upload Custom 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 Header-Image.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/ Text 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
Background Image/Color

From your WordPress Administration Panel:

  1. Select the "PageLines" panel, then "Settings"
  2. Select the "Color Control" tab.
  3. Under "Basic Layout Colors" & Page Text Colors", enter the hex color number for the following items:
    1. Content Background - Change from blank (transparent) to #000000
    2. Primary Text - Change from #000000 (black) to #ffffff (white)
    3. Text Headers - Change from #000000 (black) to #ffffff (white)
  4. Under the "Site Background Image" section, click "Upload Image"
    • Browse your computer & select the image you want to upload
    • You can use .png, .jpg, or .gif
    • If you do not have a custom background yet, select Background.png that is included in resources.zip
  5. Click "Save Options"
Header & Background Image

Using Custom Code

Knowledge of CSS isn't required to be able to use the PageLines Framework. However if you have some knowledge of it, you can do some pretty neat things. PageLines has a lot of great options for customizing your site. However we don't want make an option for absolutely everything. This is because doing so would potentially lead to having thousands of options for you to sort through. Obviously, this would severely over-complicate the Framework. To compensate we've made it extremely easy to add your own custom code. Click on How to Add Customization for more information.

Insert Custom CSS

I like having the black Content Background on this page, but I don't like that it covers up so much of my site's background image. I can use a CSS rule to give the Content Background a slight transparency so we can still see the background image underneath.

Custom CSS
Custom CSS

From your WordPress Administration Panel:

  1. Select the "PageLines" panel, then "Settings"
  2. Select the "Custom Code" tab
  3. Under "Custom CSS Rules," enter the following css:
    4. page .content {background: rgba(0, 0, 0, .6);}
  4. Click "Save Options"

Header And Footer Options

Hide the Search Field & Blog RSS Icon
Hide the Search Field & Blog RSS Icon

You can easily click or unclick "checkboxes" to hide or show different elements on your site. For example:

From your WordPress Administration Panel:

  1. Select the PageLines panel, then Settings
  2. Select the "Header And Footer" tab
  3. Check the "Hide Search Field?" box
  4. Uncheck the "Display the Blog RSS icon and link?" box
  5. Click "Save Options
Custom CSS

Add 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 Features & Boxes.

Add Features

Add Features
Add Features

From your WordPress Administration Panel:

  1. Select the "PageLines" panel, then "Templates"
  2. Select the "Content Area" and make sure you have the
    Template | Default selected as well
  3. Drag the "Features" section from the "Available / Disabled Sections" over to the "Active Sections"
  4. For this example, lets also remove the "Comments" section
  5. The Section Order will save automatically

Add Boxes

Add Boxes
Add Boxes
  1. Select the "Morefoot" Template Area
  2. Drag the "Boxes" section from the "Available / Disabled Sections" over to the "Active Sections"
  3. The Section Order will save automatically
Add Features & Boxes

Configure the Sections

Now you should see some default Features & Boxes on your page. To find out more on how to add your own custom Features & Boxes, check out the following Tutorials:

For this example, I setup my page to show some "Space" related Features & Boxes

Configure the Sections

The PageLines Store

The Last thing I want to show you is how to download & install a section from the PageLines Store. In this example, we will be placing a free section called "Twitter Profile into the Sidebar." This section will visitors to view the three most recent updates from a Twitter account.

Install Twitter Profile

Install Twitter Profile
Install Twitter Profile

From your WordPress Administration Panel:

  1. Select the "PageLines" panel, then "Store"
  2. Select the "Sections" tab, then "Add Sections"
    • If you haven't already, you will first need to install & activate the "PageLines Sections" plugin
  3. Select the "Top Free" tab
  4. Locate the "Twitter Profile" section and click "Install"
  5. Under the "Added" tab, you will find your newly installed section
  6. If not already, click "Activate"

Place Twitter Profile in your sidebar

Place Twitter in Sidebar
Place Twitter in Sidebar

Now you will need to tell PageLines where you want the Twitter Profile section to appear on your site.

From your WordPress Administration Panel:

  1. Select the "PageLines" panel, then "Templates"
  2. Select the "SB1" (sidebar) Template Area
  3. Drag the "Twitter Profile" section from the "Available / Disabled Sections" over to the "Active Sections"
  4. For this example, lets also remove the "Comments" section
  5. The Section Order will save automatically

Clone a Section

Clone Twitter Profile
Clone Twitter Profile

Sometimes we may want to have the same section displayed more than once on a page. With PageLines, it's very easy to duplicate a section

  1. Click "Options"
  2. Click "Clone"
    • Now you will see that a "Twitter Profile #2" has appeared
  3. The Section Options will save automatically
Activate Twitter Profile

Configure Twitter Profile

You will now see placeholders for the two sections. This is because You still need to specify a Twitter Username for these two sections. This is done in the PageLines Meta Settings. You can either click on the placeholder link & skip to step 4, or:

Configure Twitter Profile
Configure Twitter Profile

From your WordPress Administration Panel:

  1. Select the "Pages" panel, then "All Pages"
  2. Click to edit the "Home" page
  3. On the "Meta Panel," click the "Twitter Profile" tab
  4. Enter a Twitter username
    • In this example, I'm going to choose "PageLines"
  5. Do the same thing for the clone
    • For the clone, I'm choosing "WordPress"
  6. Click "Save Options"
Configure Twitter Profile

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 checkout our other docs as we dive deeper into the PageLines framework.

Before & After
Retrieved from "http://www.pagelines.com/wiki/index.php?title=How_to_Get_Started_with_PageLines&oldid=4506"