User-Guide:Page-Integration
From PageLime Documentation
Contents |
Integrating a Site or Page
Before starting make sure you have followed all the steps outlined in the Getting Started
Step 1
Make sure you are on the Main Screen (to be sure you can click the PageLime logo in the upper left corner)
Step 2
Now click the blue "Edit Site" button. This will load up the default page for the currently selected website, as defined in the "Site Home Page URL"
Step 3
When your web page loads click the "Edit Code" button in the Page Editor navigation bar. This will load up the HTML source of the currently selected page.
- Note: To view other pages you can navigate by your sitemap or using your internal navigation. If you are unsure about this please read the Navigate My Site document.
Step 4
This will now bring up the code for the page you are currently viewing. The code is pulled directly from the FTP source file, so all script and function calls for online languages are included in here as well.
Step 5
To define editable content you need to first locate the content you would like to make editable.
- Currently you can make the following elements editable: DIV, IMG, A, H1, H2, H3
When you want to make an element editable you need to make sure it has both a unique ID for this page, and the Editable CSS Class Name that you defined in the Adding a Site document.
Examples
The following is a proper example of making a DIV editable:
- <div id="myText" class="cms-editable">Some text!</div>
The following is a proper example of making a A editable:
- <a href="about.php" id="myLink" class="cms-editable">About Page</a>
The following is a proper example of making a IMG editable:
- <img id="myImage" class="cms-editable" src="someImage.jpg" />
The following is a proper example of making a H1 editable:
- <H1 id="myTitle" class="cms-editable">Home Page</H1>
Step 6
Once you have completed code integration for this page click the "Upload Page" button.
You have now integrated the PageLime CMS. If everything was done properly, you will now see lovely lime "Click to Edit" callouts above the elements you made editable. You can use the sites internal navigation or the Sitemap to browse to other pages in the website you would like to integrate with PageLime.
This concludes the Integration:Page-Integration Section.
To learn about editing content with PageLime please move to the section Editing Content