New users evaluating Pinegrow for building their first website face a steep learning curve.
This tutorial walks thru building a very simple 2 page website in plain html with default styling. It is intended to build a familiarity with the operation of Pinegrow while producing a foundational experience with a limited set of html elements.
The Quick Start Guide is in three parts:
- Building a simple webpage from scratch
- Using Master Page to create a second page and how to modify content
- Creating the navigation links to move between the pages
- A working copy of the evaluation version or Pro version of Pinegrow
- Understanding of the Pinegrow interface (menus, display area, tool panel names)
Quick Start Guide
Create the first page
Start Pinegrow (PG)
New page or project
Plain HTML, new
Open a folder
Make New Folder, type in “QSguide”, OK
The project folder will contain all the files needed for your website
Use CTRL-2 for a small webpage view 768px wide
Drag these four elements and drop them onto the white display area
- Header (for name of website, logo)
- Nav (for links to other pages)
- Main (for content for this page)
- Footer (for about info)
- in the Tree panel, all sections will be shown nested under the Body element
- in the Display area, placeholders give each a height of 100 pixels
notice PG will save the file new.html in the current project folder QSguide
You have now created your first webpage project in PG and if you look in the project folder you will see the page and a new folder called css where all the webpage styling will be saved.
Right-click on the folder name, choose
- Add new folder from the menu
Type in the name “images”, OK
Add an image file of your choosing to the images folder and name it “logo”
Add some content to the page
Drag H1, but this time drop it inside the header element
- the header element has changed height to accommodate the size of H1 element
- the H1 element is nested under the header in the Tree panel
- you can edit the text by double clicking on it
Drag Image, but this time before dropping it, hover over different areas of the page and watch for the orange dotted outline in the Tree panel to indicate where it will be inserted.
Drop the image after the H1, but at the same indenture, not nested under it.
- a placeholder image has been inserted into the tree and appears under the H1
- you can drag the elements directly into the Tree panel to ensure the element is going to be inserted into the proper place.
- you can drag these and rearrange them later inside the Tree panel.
- you can right-click on the image, or on the image element in the Tree panel and select
Propertiesto change the source url of the image.
Choose the Source url and change it to the logo image file saved in the images folder
- the header element again adjusts in height to accommodate both the H1 and the logo
- in the Tree panel, you can drag the H1 or the logo to rearrange the order they appear on the page.
Drag ul, and be sure to drop it into the Nav section by looking at the Tree panel
Drag li, and be sure to drop it indentured under the ul by looking at the Tree panel
Drag Anchor, and drop it under the li
Href, type in “#”
Label, type in “HOME”
notice the link appears as underlined blue text but because it is set to point somewhere on the current page (using the href id #), it will not go anywhere
Tree panel click on the li (list item) to highlight it in the tree
Duplicate from the floating tool bar (just under the trash bin)
Change the Label to “Page2” from the Properties panel
notice that you can add as many links as you have web pages in the website
the default styling can be changed using CSS later
Drag H2 and place it in the Main section
Drag p and place it under the H2 at the same indenture level
Drag Anchor and place it under the p but indentured [Append]
Change the Label to “outside link”
Change Href to an outside website, such as http://duckduckgo.com
- this is where to place all the content that you want to present in your HOME webpage
- the Anchor appears inline with the text of the paragraph rather than on a new line like everything else so far
- you can edit the text of the p element and place text after the Anchor to have the link flow with your content
Drag p and place it under the Footer element
Duplicate 2 more times
- here you can write an About section that tells the visitor about your website, maybe has contact information or an email link
- visitors will often come here if they can’t find what they are looking for in the Nav section