|
FreeForm Getting Started Interactive Tour
Always Start at RobsHelp.com
FreeForm is an entirely online program. To get to it and return to it in the future do so from robshelp.com and use the link provided to Launch FreeForm that will take you to FreeForm’s Startup Page.
FreeForm’s Startup Page includes links to launch the FreeForm Builder along with a presentation of all "The Basics" for using FreeForm. It is important that read through the page as I'll just cover the highlights here:
Try it: In the Startup Page Computer Requirements section, perform the "New Window Test" to make sure your web browser will open new windows at the site. It may be necessary to adjust or temporarily turn off pop-up blocking. When you get the window to open, notice whether or not cookies are enabled. Cookies are used by FreeForm for your convenience to remember login names and passwords and are necessary for QuickSaves and AutoSaves.
Try it: In the Startup Page "Using Images (Photos, Graphics, Logos)" section do the "Practice and Test". Fill in and test a URL if you already have web hosting. If you do not have web hosting available to use for your images for now, at least, use the "Choose from EAPH. com" just to get a URL filled in for you. EAPH. com is not required for use with FreeForm but is the easiest to use with FreeForm.
Try it: In the Startup Page "Getting Started and Getting Help" section note the link to "My 7 Most Helpful Tips". Click that link to open a new window and in there you will find a link to a tool that enables picking colors off the screen. Choosing the best colors to go with your photos is often an important part of designing templates. Using a color grabber can save many hours of work trying to color coordinate content in FreeForm.
Try it: Also in the "Getting Started and Getting Help" section click on the Tutorials link. That will open a new window and take you to a page with lots of help links in three columns. In the middle column toward the bottom find the link labeled "Photo Preparation - The Big Four: Crop, Cutaway, Resample, Compress". Follow that link and read through the tutorial. Using FreeForm you are in control over the size and quality of the photos you display and using the techniques discussed there will help you prepare those photos for best results.
|
Launch Advanced Builder'B'
Up toward the top of the Startup Page find and use the Launch Advanced Builder’B’ button. Builder’B’ is the latest and greatest in a long history of improvements that have been made to FreeForm.
The Builder page will open in a new window with a set of Getting Started Suggestions. Those are reminders and announcements that go away as soon as you begin working with the Builder. You don’t need to read them now as most of what is covered there I discuss in this tour.
In FreeForm your first order of business will be to create your own custom template. Sample / Starter templates are provided. Any sample will be helpful, even if it is only remotely similar to what you have in mind, because you'll be able to see the Builder with content filled into it. While there is nothing to prevent you working immediately toward what you have in mind for your template, please let me to show you around first. We’ll be messing things up a bit and that’s okay because when we’re done you will be able to start fresh with an original sample to build your actual template.
Try it: Use the link labeled "The Library" to the right of where you see "Load Up the Builder With". In there you will find a link to the "Template Viewer". The Template Viewer opens in a new window. Use the viewer to find the number for a sample you want to load into the Builder. Then close the Viewer window and in the FreeForm "Library" page click on the folder named "Templates". Find your template number in the list and click to load it into the Builder.
|
FreeForm uses "Input Areas" you can insert or remove to arrange content
After having loaded a sample template, scroll down the Builder page and observe how it is divided up. "Global Features" has settings related to the appearance of the presentation / template as a whole. Below Global Features are a sequence of numbered and colored "Input Areas". Those input areas contain the contents of the presentation and their order in the Builder determines their location in the finished result.
There are 10 types of Input Areas available for use in the Builder. Each corresponds to a type of content you may want to display in presentations. Any Input Area type can be inserted into the Builder by use of an "Insert" bar that separates the Input Areas already in the Builder. The insert bars have a gray background and on their left is a place to fill in a quantity and to the right a variety of buttons representing each type of Input Area.
Try it: Using any Insert bar type in 2 (change the 1 to a 2) and then click on the Picture button. The Builder will reload and when the reloading is finished you will be taken to the location where you inserted the Picture Input Areas. The Input Areas will also be renumbered.
For now just remember you will always have the option when creating or using your templates to insert more Input Areas. You do not need to predict where or how many different types of Input Areas you may eventually need.
Empty Input Areas (those that you have not entered anything into) are ignored by FreeForm so having a few "in reserve" doesn’t hurt anything. However, to keep things simple for yourself and for a faster loading Builder it is a good idea to remove any you find you don’t need. Along the top of each Input Area is a "Remove" link.
Try it: Go ahead and remove one of the empty Input Areas you inserted by clicking on the Remove link. The Builder will reload to remove it from that location. Only one can be removed at a time in that fashion. To remove multiple Input Areas you may blank out entry areas in any number of Input Areas then use the button in Global Features labeled "Remove All Empty Input Areas".
|
Using Preview
Of course, where there’s input there is usually output and in FreeForm that’s the Preview page.
Try it: Click on a Preview button in any of the Input Areas and the Preview Page window will open. Although there are Preview buttons in each individual Input Area they all go to the same place, do the same thing -- open the Preview page window where the entire presentation is displayed (not just the output from the particular Input Area in which you clicked).
At the top of the Preview page you'll see the "Preview Page Menu" consisting of a list of links to do things with what you have created. Please go ahead and read through that list now so you don't get confused later with where to save your work, use it on eBay, etc. You are not, however, committed to performing any of those actions each time you visit Preview. You can close the Preview window and continue working on your presentation in the Builder. In practice, you will likely visit Preview many times to see how things look before you go on to save, use on eBay, or publish what you have created.
In the Preview page, below the Preview Menu is the actual preview of what has been created (so far) in the Builder. Clicking on any text or image content in the preview causes the Preview window closes and take you to the Input Area of the Builder that corresponds to what you clicked on. You may take advantage of that feature to home in on particular Input Areas rather than scrolling down through the Builder page to find the one you need to work with. You may disable that feature, such as for testing links, up in the instructions at the top of the Preview page.
Try it: Click on any text in the preview. That will close the Preview window and take you to an Input Area in the Builder. Change the text in that Input Areas then click on a Preview button to see that the text also changed in the preview window. That’s how FreeForm works to create a presentation / template -- you insert Input Areas where you need them, put content into and adjust settings in those Input Areas, and the result appears in Preview. When you are finished you may save what you’ve created and use the HTML FreeForm produced for you via the links in the Preview page menu.
|
Now perform a practice save from the Preview Page
No matter how much or how little time you have put into building a template or presentation it would be a shame to lose it by not having saved properly. Saving permanently from the Preview page should always be done before leaving FreeForm and before using what you have created on eBay or to publish.
Try it: To make sure you understand how to save please, for your own sake, perform a practice save with me now. You've already read in the Preview Page Menu where permanent saving is done. If you are an EAPH member you may use EAPH Save. If you use other web hosting, use Standard Save. Instructions are present in the saving pages to guide you. Take as much time as necessary to read those instructions to make sure you understand.
|
Now perform a practice load of what you saved from the Builder Page
The first step in using what you have saved on a previous occasion is to load it back into the Builder. Loading is done from the Builder page. Even I sometimes get distracted and find myself trying to load from the saving screens. So, write this down in big letters: "Load from Builder, Save from Preview". Write it on the back of your hand if you need to, but most importantly be particularly careful and concentrate on what you are doing when loading and saving. Everything else you do in FreeForm is fixable except failing to save your work or accidentally overwriting what you have saved previously.
Try it: To fully simulate how you will be loading your previously saved work in the future, return to the Builder, then exit the Builder as well (close the Builder page window). Had you not saved, your work would be gone or at least partially gone (see QuickSaves and AutoSaves below). In any case, the goal here is to pretend you are returning to use FreeForm on another day so take it one step further and also exit FreeForm entirely by closing the Startup Page window as well.
Then go to the robshelp.com home page and use the "Launch FreeForm" link to get to the Startup Page. In the Startup Page, launch the Builder again. In the Builder Page, in the "Load Up the Builder With" section, find the method you used to save (EAPH Method or Standard Method) and click the link. Find the container you saved into (in FreeForm the saves are referred to as "containers") and load it into the Builder. When the loading is complete you will see the Builder filled in with all the information that was present when you saved it from the Preview menu.
|
QuickSaves and AutoSaves
While I’m on the subject of saving and loading, now is as good a time as any to learn how QuickSaves and AutoSaves work. First and foremost these saves are not permanent and are only intended to be used for emergencies. Because you will be using FreeForm over an Internet connection they are precautions to help you avoid losing your work in progress should you lose your connection, accidentally close a window, etc. Use the saves from the Preview menu (EAPH Save or Standard Save) for permanent saving.
FreeForm's Builder'B' features an AutoSave that executes every time an Input Area is inserted or removed and with every visit to Preview.
Try it: With your sample template loaded scroll down and insert a Text Input Area. Type into it the words "practice autosave" then go to Preview. That triggers an AutoSave (but you won’t see it happening). Close the Preview window and in the Builder page, up to the right of where you see "Load Up the Builder With" click on the button labeled "Last AutoSave" and click OK. After the Builder loads scroll down to confirm your Input Area with the text you wrote in is still there.
QuickSaves are performed by you. Although there is a QuickSave button in each Input Area they all do the same thing -- temporarily save the entire Builder contents. You don’t need to press the QuickSave in every Input Area as you work, but if you press any one every 15 minutes or so you’ll be assured never to have lost more than 15 minutes of work should a problem occur.
Try it: In the same Input Area you typed in "practice autosave" type in "practice quicksave" then click the QuickSave button to the left in that Input Area. A window should open and after saving has completed a confirmation should appear within it. Read the screen in that window to understand that QuickSaves are temporary and depend on "cookies". Make sure you see in big green letters that the save was successful. Then scroll up and to the right of where you see "Load Up the Builder With" click on the button labeled "Last QuickSave" and click OK. After the Builder loads scroll down to confirm your Input Area with the text you wrote in is still there.
|
Using and reusing what you save in FreeForm
With some tools you might need to create empty templates as a separate process. With FreeForm creating a presentation automatically becomes a template with content already filled in you may replace, add to, or remove as needed. This example scenario will help you understand:
-
Let’s say you’ve created a layout in FreeForm with text and pictures for selling a Bulova watch.
-
When you saved it using Standard Save or EAPH Save from the Preview menu you assigned the name "Bulova Watch" to the container. Then you went back to the Preview menu and on from there to use the HTML for an item description on eBay.
-
On another day, or later the same day, you want to use the same basic layout except this time you are selling a Lionel model train set. You want to use the same basic layout as the Bulova watch but not everything exactly the same.
-
You'd load the "Bulova Watch" container into the Builder using Standard Method or EAPH Method. Then, in the Builder replace the photos and whatever text is necessary to sell the train set. Along the way you discover a way to slightly improve the basic template’s appearance and make some changes.
-
When finished it is important to save what you created at least until you have it safely listed on eBay, so you will go to the Preview menu and use either Standard or EAPH Save.
-
FreeForm doesn’t remember what container you loaded from and doesn’t know or care where you save the new presentation you created from it. So, in the saving pages you have the option to either overwrite the Bulova watch container or save into a new / different container. If you save the train presentation into a different container and name it "Lionel Train", the Bulova watch remains exactly as it was when you saved it originally.
As you might well imagine it is wise to save into a separate containers so you have each presentation you’ve created to use as needed in the future, but the other important thing to learn here is that loading what you have previously created into the Builder does not automatically affect what was saved. The only way to lose or change what has been previously saved is by overwriting it during the saving process.
With Standard Save you have 20 containers so eventually will need to overwrite some of them. What I suggest is to use a few containers for storing recently listed items (on eBay) -- those you would overwrite after you have safely listed those items on eBay. Keep all the rest as templates for the various types of items you plan to list in the future.
I’ve used an example that applies to selling items on eBay. If you plan to use FreeForm to create web pages or eBay About Me pages, etc. or you sell the same items over and over again you will need to save all of those permanently in FreeForm. That way if / when you need to make a revision you don’t need to build them over again from scratch. If you know now that you will need to save more than a total of 20 different presentations, web pages, etc. then it will be important to become an EAPH. com hosting member to get unlimited saving in FreeForm.
|
Using Picture Input Areas
For selling, photos are usually the essential ingredient. So, I advise when customizing a layout in FreeForm, that at least a few of the photos you will actually be using be put into the Builder first.
You should have some Picture Input Areas in your sample template. Go to one of those and notice where you may type or paste in a URL. A URL is the technical term for an Internet address and by use of URLs images (photos, graphics, logos, buttons, etc. ) are displayed in presentations. In a Picture Input Area, one way or another, a URL needs to be filled in.
Try it: If you use EAPH. com hosting you may use the "EAPH. com" link to go get the URL. If you use other hosting, you can try the other interfaces provided. It is, unfortunately, rare for those to work with most hosting services so you'll probably need to copy and paste a URL in yourself. After having pasted or typed in a URL, click anywhere outside that space so FreeForm knows you are done. If the URL works, the image will load and display in a small size to the left.
Try it: Go ahead and play with the other features of the Picture Input Areas and view what happens in Preview to learn their effects. I just want to point out that, although FreeForm's Picture Input Areas allow you to adjust display width and height, it is always best to have the image already in the desired size before using it in FreeForm. So, when it comes time to start building and using your templates in FreeForm be sure to remember to pre-size all photos before using them in FreeForm. You'll need to think ahead and perhaps create several versions of your photos depending on the size you want them to display in your presentations.
|
Using Text Input Areas
Text Input Areas are powerful tools all to themselves. While I don't advise trying, an entire presentation could be created in a single Text Input Area by use of the WYSIWYG (What You See Is What You Get) Text Editor in combination with the other features. Truth is it's usually more practical to type in "plain" text then format using the settings provided in the Text Input Area itself rather than the WYSIWYG Editor. However, when you need to format individual words, such as to italicize or underline, the WYISYWG tool is perfect for the job.
Try it: Go to a Text Input Area in the Builder and if there isn’t any text typed into it type something in then click on the WYSIWYG button. Then, in the WYSIWYG interface using your mouse position the cursor at the front of any word. While holding down the left mouse button drag across the word to select (highlight) it, then release the mouse button. Up in the editor controls find the "B", "I", and "U" buttons. Those are symbols for Bold, Italics, and Underline. Clicking on those buttons applies that formatting to the word. In almost all cases in the WYSIWYG Text Editor the first step is to select (highlight) the content you want to work with.
Up at the top right use the Save button to close the WYSIWYG window and return to the Builder. Look carefully at the contents of the Text Input Area and you'll see HTML coding mixed into it. From that point on, unless you are very experienced with HTML you'll need to always use the WYSIWYG Editor for that particular Text Input Area to make changes.
Try it: Experiment with all the rest of the Text Input Area settings going back and forth to Preview to see the changes that occur. If you want to start fresh, delete out the entire contents of the text box and type in something different.
A fundamental technique in FreeForm that beginners often miss is use of the width setting in Text Input Areas. The width setting (either percent or in pixels) provides for multiple Text Input Areas to line up with each other (give them all the same width). You may instead want to assign a pixel width to match the width of photos in a presentation. In that manner you may display a caption above or below individual photos. In general, setting a width less than the entire space available (such as 85%) adds margins to the left and right.
|
Global Features
The last thing you should experiment with here before getting down to business creating your own presentations / templates is the Global Features section. Always located above any other input areas you have inserted into the Builder, Global Features contains the settings for overall appearance.
Primarily you will use Global Features to set a background color or background wallpaper and text colors to go with them. For example, if you use a dark background you'll want to use light colored text. For backgrounds you can choose from the libraries provided or use backgrounds you have stored in your own hosting. Filling in a URL is the same procedure as with Picture Input Areas, either choose or copy and paste in the URL from your web host.
Be sure to explore and experiment with the Frame Builder as it is one of the most popular features of the Builder. The tool provides for creating layers of backgrounds that produce the effect of a frame. Think of it as placing and centering progressively smaller pieces of paper on top of each other - the edges of the larger ones peek out to frame the smaller ones. The tool can be used to create up to 12 such layers. Whatever layer is the innermost becomes the background for the center of presentation.
Try it: Click on the Frame Builder Tool button and it will open in a new window. If the template sample you are working with uses the Frame Builder you’ll see at least some of the layers filled in. Either way, click on the Samples button at the top and click OK to proceed to the samples. Load Sample 1 to see 6 layers filled in. If you enjoy being creative you’ll have a lot of fun using the Frame Builder tool so play around with it a bit to get a feel for how it works. When finished use the Save to FreeForm button and go from there to Preview to see what you’ve done.
Note: If you are experimenting with one of the Builder'B' samples it may incorporate the "Above Frames" or "Below Frames" feature. Using that feature, Input Areas at the top of the Builder can be marked to appear above the frames and those at the bottom of the Builder can be marked to show below the frames. That is something many FreeForm users have requested over the years to enable the display of headers and footers in their presentations.
Try it: Make any other kinds of changes in Global Features then go to Preview to see what results. Bear in mind that some settings for Global Features can be overridden by settings within individual Input Areas. For example, a Text Input Area can either use the Global Features text color or a different one assigned in the Text Input Area itself.
|
The other Input Areas and Advanced Features
I've included a list of each of the other types of Input Areas below for reference. I won't drag you through each of them but I do want you to see the optional features and preferences available in the FreeForm Builder:
Try it:
In the Builder scroll up to the Global Features and right above it with a gray backgound click on the "Preferences" button. That brings up a list of preferences and advanced features. They are all fairly self explanitory but may not mean much to you now. For now just remember where to find them. Particularly, under the Advanced Builder Features heading the two columns capability and the Above/Below FrameBuilder frames may be of interest to you. The Image Join and Click to Enlarge for Picture Input Areas are likely to be helpful also.
|
|
Help is Available
That’s it for the interactive tour. To start building your own actual template start over by loading a fresh sample template into the Builder and go from there. You don't need to become expert in all of FreeForm's features. Concentrate on getting all your "ingredients" into the Builder first, then feel free to write to me for help in their arrangement.
When asking for assistance be sure to perform a permanent save (EAPH or Standard Save) from the Preview menu so I can access what you have done so far. rob@robshelp.com
Title Input Areas
These are only useful for eBay sellers for experimenting with the length and content of what might be used as a title for an item on eBay. You can use them however you like but Text Input Areas are much better for actual display of text in the presentation.
Website Link Input Areas
HTML "HyperLinks" commonly referred to as simply "links" are what bind the World Wide Web together. Clicking on text or an image link transports the visitor to another location on the Web. FreeForm provides input areas to construct HTML links for you including this one designed to create a link to any web page or to an eBay "About Me" page.
Thumbnail Link Input Areas
Not much different from Website Link Input Areas, these were designed for display of small versions of a photo (thumbnail) that when clicked on displays a larger sized version of that photo in a new window.
Gallery Input Areas
If you would like to display more than a few thumbnail type links, consider using a Gallery Input Area instead. A highly organized and attractive grouping is possible using the Gallery tool. The Gallery tool is also very useful for creating a group of links, whether they be text or images, such as linking to page sections, site navigation, categories, or other items. Because there is significant effort involved in creating a Gallery they may be saved separately from any particular presentation they are used in.
Auctions Link Input Areas
This input area is only useful for eBay sellers because it provides for creating a link to the sellers other items on eBay. For any other purpose or site, one of the other link types above will do just as well.
Email Link Input Areas
HTML links may be constructed to open a visitor's emailing program and start a blank email with your email address already filled in as the "send to". Email Link Input Areas enable you to include such links within your presentations and optionally also to prefill the subject line of emails with the title of the page in which it is clicked.
Terms and Conditions Input Areas
This Input Area is largely obsolete. It dates back to before FreeForm provided as much formatting for Text Input Areas as there is today. However, if you want to use a pre-formatted section of your presentation to define terms and conditions then this is a good way to separate that section from the rest of the page.
Code Input Areas
These provide for including JavaScript and/or substantial blocks of HTML (such as shipping calculators) within descriptions. Code areas are not processed by FreeForm -- whatever is put into them is passed "as is" straight through to Preview and to the HTML results generated by FreeForm.
Two Column Controls
The sample template you are starting with may show Two Column controls in the Builder. FreeForm's Builder'B' supports two column layouts (enabled via FreeForm Features and Performance Preferences). When the two column layout capability is used then, of course, the sequential relationship between the Input Areas and the resulting presentation is altered.
Probably the most important thing to understand about columns is that Input Areas located in the left column will "stack" down the left side of the presentation and those located in the right column will stack down the right side of the presentation as shown in this diagram:
|
|