Support Manual / Site Specific Help / Page How To's / Page Basics

YES!  We have a nice built in tool that allows you to choose several effects for your images to slide or animate.  Here is a quick video on setup.  Steps are also outlined below:

 First, you will want to add the "Slide Deck" frame to the page you wish to showcase your sliding images.

You can do this in 2 different ways.

a. If you already have an empty frame that you wish to use you can change the frame type, Then choose the "Slide Deck" frame type.

b. If you do not have an empty frame, you can easily add a new frame by using any one of these icons in the "page layout" on the page you wish to add the slider to.(once the new empty frame is added follow the instructions in step a. above to change the frame.)

 Once the Slide Deck frame is added you will want to configure the layout. 

These options can vary.  For example, you can 1 large image per slide(meaning 1 large image would show and then would then slide to another large image) Or you can have multiple smaller image show up on the first "slide".  And then transition to the next set of images.  You also have options to link each image somewhere.  Whether that is to a product, or a page that doesn't matter.  You also have options for text to display with your image.

Let's go over the first set of settings.

Responsive Item Size This Check box makes the images in the slide use responsive settings (set in the below boxes) Min Item Width This setting is to tell your website what the smallest width is that you want your entire slider Min Item Height This setting is to tell your website what the smallest height is that you want your entire slider Max Item Width This setting is to tell your website what the largest width is that you want your entire slider Keep Aspect Ratio This check box will use the above settings and scale your slider to keep the aspect ratios even   Transition Effect This setting controls how the slide animates.  You can select a setting and see how the effect looks on the sample boxes on the bottom of the screen (or if you have images already added then it will show the effect there.)   Columns per Page If you are using multiple images per slide this option lets you choose how many colums your slider will have   Rows per Page If you are using multiple images per slide this option lets you choose how many rows your slider will have   Spacing between Items This setting allows you to set the spacing between your images when using multiple images   Show Arrows This setting will show arrows on your slide allowing users to control which slide they see (if they wish to go forward or backward between slides)   Show Pager The Pager is a set of dots or numbers that represent how many slides there are and will allow users to select a dot to move forward or backward between slides.   Pager View This option let's you decide what style pager you wan to use   Show Controls This option let's you choose if you wish to see the pager or arrows on top of your images or on the outside of your slide.  the area at the bottom will show you a preview of these settings as you change them.   Scrolling Direction This setting let's you choose which direction the slide moves Wrap Around This setting tells the slides to slide back around to the first one after they have scrolled through to the end.   Auto Scroll This option allows you to have the image automatically slide (without a user manually clicking the arrow pager to make the slides move)  Once you change this setting you will get another option for how fast the slides will slide.

 Once those settings are set how you want them, you will now want to start adding the images and text for your slides!

When you added your slide deck it added several sample "items".  If you kept the 3 column layout then it will look very much like the images we're showing you here.  You can edit each one by mousing over the item.  when you mouse over it a couple of buttons will show up. "Edit" "move" and "delete".  See screenshot here.

Image Size/Location   Image This setting allows you add an image, by clicking the "+" sign you can then browse the already uploaded images from your image store.  If you need to upload more images you can do so once you click the plus sign and the insert image window pops up.  In that window there are options to upload more images.   Image size/ Location  This option let's you choose how big this specific image will be, and has some added options here in the drop down for "no float", "Left Float", "Right Float", and "Background".  These options indicate how the image and text lay out together.  You can try each setting to see what will work best for your needs. Image Alt/Title This is where you can specify  the Image Alt and Title text.  This is how the search engines read the image.   Text This check box will allow you to show the text editor and add text or hide it.  Once you add text to the text editor you can format it with the tools provided. (NOTE *Background color in the dropdown box only refers to how you view the text editor window and has no bearing on how the text will look on the slide)   Action on click This drop down allows you to choose something that can happen when a person clicks the image in your slide.  You can have it link to a particular page (or product) and have it show in a pop up or new window.

 Now that you have a better understanding of these settings, start playing with your slider!  Feel free to reach out to support via phone, live chat or ticket for any assistance needed! :)

Yes, the menu content area allows you to add images, text, tables, and links to your menu! :)

First go to your menu:

Edit the menu item that you wish to add content to. (Note: the content you add will show on mouse over.  For mobile it will only show on click when the menu item is linked to "none")

When you enable the Description field, you will be able to edit with text, images, tables.  You can also link in there as well.

If you have any questions please feel free to visit us in support and we can answer any questions you may have.

You can upload images and files by going to "Manage Images and Files".

Next Click on the Folder you wish to upload your images to on the left or create a new folder.

Then click on "upload new files"

Next click select the files from your computer ( you can choose multiple files at a time)

Click on "open" after selecting multiple files (NOTE: you can hold down SHIFT or CTRL to select multiple files)

Next click the "Upload" button and watch the dialog box move accross your screen.

The answer to all of the above is YES!  They all use the same form.  The Feedback Form is a form you can put on your website that collects data.  You can add as many fields to the form as you like.  You can customize what type of fields there are.  You can make custom labels for the forms and more!

also please see the videos for Feedback Forms

In this answer we will be discussing:

Adding a feedback form

Identifying the different boxes that can be added and how to add them.

Removing fields from a Feedback Form

Setting the Email address where posted data goes

Checking Posted Data

How to Add a Feedback Form

Go to the page where you want to add your new form.

Click on an empty frame

Then change the frame type: (by clicking on the "frame type and info" button)

Next you will want to choose the "basic frames" under "modules".

And "Feedback Form" under "frame type"

Then Save.

That will take you to the "Frame Settings" of the feedback form.  It looks like this:

To customize the form you will want to go to the "Form Builder".  You will see that on the left hand side under the Feedback Form Frame.

You will see a Text field, Spam Submit box, and "Submit" button by default.  You can add and move the items with the buttons on the right hand side of this area.(highlighted in green in the image above)

When you mouse over a field you will have the option to edit it, remove it or move it.

Identifying the different boxes that can be added and how to add them

Go to the Form builder of your feedback form

Click the "+" to add a new control type -

These are the various options you can add to the form -

Text Box - for Fields like Name, etc.

Email Box - for Email

Reset Button - To Clear the form

Submit Button - To Submit the form

Button - To Add another Button if needed in the form

Editor - Adds a box which gives editing features like adding color, Bold, Italics to your text

Dropdown List - You can create a drop down menu using this in your form

Password Box - Used if you need users to write a password

Test Area - For fields like Comments, Suggestions, etc.

Date Box - Inserts a calender like box from which a date can be selected, useful for fields like Appointment, etc.

Radio Group - Creates an option with Radio Buttons

Rating (Drop-Down) - Inserts a drop down list with 5 to 1 as Rating

Rating (Radio) - Inserts a Radio button group to choose from 5 to 1

Check Box Group - Inserts a check box area which is configurable for values

Custom Text - Inserts a text field

Spam Submit Protection - Adds a CAPTCHA to the form for human verification

Uploadable files - Adds a field so that user can attach a file.

Removing fields from a Feedback Form

To remove any field all you need to do is scroll to the field and click on the "x" on the toolbar that appears on the top

This would delete the existing control type from the form.

Setting the Email address where posted data goes

To receive a notification everytime the form is submitted you can add the email address of your choice in the frame settings of that frame here -

You can only enter 1 email address here and if you want to receive the data on multiple email addresses then you should set up mail forwarding to the other email addresses from the email account settings.

Checking Posted Data

To view the posted data go to "Posted Data" tab -

Here you will find the list of all the forms that have been submitted. If you want you can even take an export of this data as a CSV and even delete any forms you dont want OR if any forms that have been incorrectly filled (OR SPAM)

This explains the difference between HTML view and source view in your websiteforge content tool bar.

In HTML view you can see the text and images along with all the formatting and links, just the way it will be visible on a browser to anyone visiting your website.

In Source view you can see the code with all the tags which format your text.

The major difference between Source View and HTML view is that - In Source View If you have any type of HTML coding for any script you can paste it here and it will work on your site. Whereas, if you paste it in HTML view it will just paste as text and not enable the code.

You can watch this video for more information -

http://videos.websiteforge.com/11.html?m9:post=difference-between-html-view-and-source-view-websiteforge-ecommerce-website

Thanks

Once your products are entered into the members area, you will need to create a page to display them.

Your "products" page will need to have a few different frames to work well.  And then there are some optional frames.  First we will discuss the needed frames for an e-commerce page.

1. Product list frame
   
2. Cart (either mini cart or full cart)

Here is how you can add these frames to your new product page.

For information on adding more frames go here

First, change your frame type:

See the options for the Frame types HERE:

The other recommended frame types for this page are:

1. Category List
2. Item reviews
3. Full Text Search box

The remaining frame types are optional.

Here is what a page looks like in the members area, with a product list frame, Full text search frame, and a Mini shopping cart.

now that your page has the basics you can save, and preview page to see if it lays out as you like.

The Product page is the page where multiple products will be listed.  The product details page, is a seperate page all together.  That page will show more details about the selected product.  That page can also have a customized layout.

You can customize your layout using the layout builder.  For more information on the layout builder see these links:

Layout Builder Manual Answer

Layout Builder Videos

Here are some sites that use websiteforge and have different types of Product List & Search Results Page Layouts:
http://www.discoverfabric.com/

http://www.fullhousewholesale.com/

http://www.shopbakersnook.com/

Here are some examples of customized Product Details Page Layouts:

http://www.shopbakersnook.com/m5/6152--star-trek-themed-birthday-cake-kit.html

http://www.fullhousewholesale.com/m5/10498--oziumspray-8oz-citrus-scent-6ct.html

http://www.discoverfabric.com/m5/STBCMR15%20Brown--matte-buttons-brown-2-pkg-card-1-5-inch-riley-blake.html

The Layout Builder is quite flexible, which allows you to customize your website's own unique product layout.  For specific assistance on creating a layout please feel free to contact support.

Here are some ways to get around in your members area:

Here is a video on Members area Navigation

The left hand pane will get you around the members area.  This is the panel that I'm referring to:

There are several ways to getting around that will make your job easier.  First let's explain a few things.

1. you can have multiple websites under 1 login (as seen in the screenshot above)
2. to access anything for a specific site, you will need to click the "+" next to the domain that you are trying to edit. (In the screenshot above, I have the manual.websiteforge.com domain expanded)
3. There are very similar areas under "Modules" and "Pages".  Be sure when you are looking for a particular area that you are aware of where you are looking (for example under the "modules" area, there is an "ECommerce" area.  There is also an "ECommerce" area under "Pages".  They do 2 different things.
4. Modules: this area will control the settings and data in a module. (for example if you have an ECommerce module, this area under "modules" will be where you can add, update and edit the products on your site)
5. Pages: this area controls the layout and content of the pages seen on your website (For example if you have an ECommerce Module, you can adjust the look and layout of your products on the page your products are shown.  You can also add new pages and content to any page of your site in the "Pages" area.

Some of the ways to get around easier are:

1. The search at the top of the Left pane in the members area:

2. The Bookmarks area:

3. The Page list area

All of these area's will be helpful for you to locate a page quickly.  This is very useful when you have hundreds of pages.

If a rep  in tech support gives you an answer that includes a link that looks like this: videos.websiteforge.com > Pages > Ad Module Pages > Ad Module Layout 1 (38.html) > Area A (Main) > Page Layout

Here is how you find that area. 

Expand each area that is in the list. See the steps highlighted below:

Page groups are groups for the pages on your site.  Its an easy way for you to locate a certain type of page.  (you can organize your pages into any group structure you want)

And only you will see this structure in your members area.  The structure will not reflect how your site is viewed at all.

let's take a look at some examples of page groups and how to add them.

The red highlighted area are some examples of page groups.  By default you will have a page group for EACH  module that you have.  Because there are corresponding pages for those modules.

In this example I've added the page group "Active Site Pages".  The rest of the page groups are there by default and cannot be removed.  Because I like to make clones of my pages, I keep the clones de-activated in the "Default group".  And then I can easily find the pages I use on this site under the "Active Site Pages" Page group.  Since this site doesn't have a complicated structure that is all I needed for it.  But you can create page groups for all kinds of scenarios.  Like if you have restricted pages for certain users, you can have a page group for each users group.  This will not grant access to those groups, but will make the pages easier to locate when you are needing to make a change to those user pages.

Let's take a look at how to add a page group:

Go to YourSite.com > Page List, and then next to the "add group" button enter the name you wish to use for your new page group.  Then click the "add group " button.

Once the new group is added you can start creating pages for that group or move existing pages to the new group.  Here is how you can do that.

In the Page Settings of an existing page (or on the settings page when adding a new page) you can select the new group.

There are several ways to link in our system, this answer will show you how.

First you should know that you can link text or images.

And they can link to many things.  They can link to:

1. Products
2. Categories
3. AD's
4. External URL's
5. Aliases
6. Pages
7. You can create a link that will automatically Email someone.(it will open a mail program and have the sender's address already filled out)
8. Link to a page Anchor
9. File
10. Special Link

Products:

To link to a product you will either create text, highlight it and click the link button.  Or if you have an image you will select the image, and then click the "Insert link" button. 
Once you click on "insert Link" the "Insert Link"  box pops up you will choose "module Item".  Then in the "module" Drop down list choose your ecommerce module. 
Then you can search for the product you wish to link to.  once you find the product click it and choose "ok".  Your text or image is now linked to a product.

Categories:

 Return to top

To link to a Category you will either create text, highlight it and click the link button.  Or if you have an image you will select the image, and then click the "Insert link" button. 
Once you click on "insert Link" the "Insert Link" box pops up you will choose "module Category".  Then in the "module" Drop down list choose your ecommerce module. 
Next choose the Category you wish to link to.  Then choose "ok".  Your text or image is now linked to a Category.

AD's:

Return to Top

To link to an AD you will either create text, highlight it and click the link button.  Or if you have an image you will select the image, and then click the "Insert link" button. 
Once you click on "insert Link" the "Insert Link" box pops up you will choose "Module Item".  Then in the "module" Drop down list choose your AD module. 
Next choose the AD you wish to link to.  Then choose "ok".  Your text or image is now linked to an AD.

External URL's:

Return to Top

To link to an External URL you will either create text, highlight it and click the link button.  Or if you have an image you will select the image, and then click the "Insert link" button. 
Once you click on "insert Link" the "Insert Link" box pops up you will choose "Other".  Then choose "Link to an URL", and enter the URL you wish to link to.  Please include the "HTTP://" or "HTTPS://"   Then choose "ok".  Your text or image is now linked to an External URL.

Aliases:

Return to Top

To link to an Alias you will either create text, highlight it and click the link button.  Or if you have an image you will select the image, and then click the "Insert link" button.  You will also need to have your aliases already created to be able to link to them.  (For more information about how to create aliases and what they are see these videos)
Once you click on "insert Link" the "Insert Link" box pops up you will choose "Site Page".  Then Expand the "Page Aliases" group, Next choose the Alias you wish to link to by clicking on the alias, then click "OK".

Pages:

Return to Top

To link to an Page you will either create text, highlight it and click the link button.  Or if you have an image you will select the image, and then click the "Insert link" button.  You will also need to have your pages already created to be able to link to them.
Once you click on "insert Link" the "Insert Link" box pops up you will choose "Site Page".  Then Expand the Page group that contains the page you wish to link to, Next choose the Page you wish to link to by clicking on the Page name, then click "OK".

Mail To:

Return to Top

To link to an E-Mail address you will either create text, highlight it and click the link button.  Or if you have an image you will select the image, and then click the "Insert link" button. 
Once you click on "insert Link" the "Insert Link" box pops up you will choose "Other".  Then choose "Link to an Email Address", and enter the Email address you wish to receive emails from.  Then choose "ok".  Your text or image is now linked to an Email Address.

Page Anchor:

Return to Top

To link to a Page Anchor you will either create text, highlight it and click the link button.  Or if you have an image you will select the image, and then click the "Insert link" button. 
Once you click on "insert Link" the "Insert Link" box pops up you will choose "Other".  You will need to have created the anchor first before you can Link to it.  To create an Anchor you will need to switch to Source view.  Then add the code:<p>Anchored Text<a name="anchor"></a></p> The "Anchored Text" is the text that users will see.  and the "<a name="anchor"><a/>" is what you are naming that anchor.  Each anchor you create on your page will need a unique name.

see screenshot:

This is what the Anchor will look like next to the anchored text:

NOTE: YOU WILL NOT SEE THE LITTLE ANCHOR ICON ON THE LIVE SITE OR IN PREVIEW.  THIS IS SIMPLY A VISUAL REFERENCE TO LET YOU KNOW WHERE THE ANCHOR IS.

Once you have created the Anchor next to the text where you want to direct users to.  You will want to select the text you want to link to the anchor and click on the "Insert Link" icon.

Click on "Other", Then click "link to an URL".  And enter the name of the anchor that you specified earlier.  In this example it is #anchor. (The # sybol tells the system that you are linking to an anchor)  Then click OK.

You now have a page anchor and text that links to the page anchor.

File:

Return to Top

To link to an File you will either create text, highlight it and click the link button.  Or if you have an image you will select the image, and then click the "Insert link" button. 
Once you click on "insert Link" the "Insert Link" box pops up you will choose "File".  Then you can either select an already uploaded file and click "OK", or click on "upload a new file", browse for the file, upload it.  then click the file name and click "OK".

Special Links:

Return to Top

You can make links that will: "Add to favorites", "Send this page to a friend", "Go to previous Page". 

You will either create text, highlight it and click the link button.  Or if you have an image you will select the image, and then click the "Insert link" button. 
Once you click on "insert Link" the "Insert Link" box pops up you will choose "Other".  Then choose "Special Link", and choose which option you would like to link with.  Depending on the option chosen, you will have added options to specify details for that option.

Then choose "ok".  Your text or image is now linked to an a special link.

There are several ways to do this.  See links below on more detailed info.

1. Manage Images and Files area
   1. Standard Uploader
   2. Java Uploader
2. FTP
3. YouTube Embedd Code video
   
4. YouTube instructions

Here is a list of file extensions that are supported when you have the "new Video player" enabled on your site:

the following video file types are converted into the "mp4" video format:
'asf', 'asx', 'wmv', 'wm', 'wvx', 'wmx', 'mov', 'qt', 'm4v', 'm4p', 'mpeg', 'mpe', 'mpg', 'm1v', 'm2v', 'flv', 'f4v', 'f4p', 'avi', '3gpp', '3gp', '3gp2', '3g2', 'rv', 'rm', 'ivf', 'vob', 'divx', 'xvid', '264', 'h264', 'mp4v', 'mkv'.

And the following audio file types are converted into the "mp3" audio format:
'f4a', 'f4b', 'm4a', 'm4b', 'm4p', 'mp2', 'mpa', 'm3u', 'ogg', 'flac', 'ape', 'ra', 'ram', 'aif', 'aiff', 'aifc', 'au', 'snd', 'wav', 'wma', 'wax', 'mid', 'midi', 'rmi', 'mka', 'aac', 'adts', 'dts', 'wv', 'wvc'.

To enable the "new video player" on your site please contact support and ask them to enable it for your site.

NOTE: Our server has limit setting set to 51 MB at a time(files larger than that will not upload with the regular uploader).  However the Java Uplaoder splits files to small pieces when uploading to the server, then puts them back together.  please use the Java uplaoder or FTP for large files

Here you will find a breakdown of all of the content Toolbar icons.  The Toolbar looks slightly different in Internet Explorer then it does in Firefox.  This example will break down the Internet Explorer Content Toolbar.

(Click Here for Firefox content toolbar breakdown)

This is the definition breakdown of the content toolbar in the editor.

The Facebook Widget allows you to add different Facebook integrations into your website. 

To add the Facebook Widget to your page you will first need to add the frame to your page.

Select "basic frames".

Once you select the module from the first drop down you will want to choose the frame type for that module.

In Frame Types, you will need to select "Facebook Widget".

Here are the different features of the widget:

The Like button lets users share pages from your site back to their Facebook profile with one click.

see screenshot:

The Send button allows your users to easily send your content to their friends.

See screenshot:

The Follow button allows people to subscribe to other Facebook users directly from your site. (This used to be called the Subscribe Button.)

See screenshot:

The Comments plugin lets users comment on any piece of content on your site.

See Screenshot:

The Activity Feed plugin shows users what their friends are doing on your site through likes and comments.

See screenshot:

The Recommendations plugin gives users personalized suggestions for pages on your site they might like.

See Screenshot:

The Like Box enables users to like your Facebook Page and view its stream directly from your website.

See screenshot:

The Facepile plugin displays the Facebook profile pictures of users who have liked your page or have signed up for your site.

See Screenshot:

You can Change a frame type at any time.  **Caution you can lose data in a frame when changing frame types**

This Answer will cover different frame types and will link to how to use them.

When you're frame is selected you will see a small "i" icon.

see screenshot:

When clicking on this icon you will have options on changing your frame to a frame type other than what it is currently set to.

Once you click the "i" icon you will see two drop downs.  The list of what is in the drop downs will depend on the website package you have.

Under the "module" drop down there can be:

• Basic

• AD
• Advanced Gallery
• Blog
• Ecommerce
• Membership
• Store Locator

See screenshot:

**NOTE: In this example there are multiple membership modules.   THIS IS IMPORTANT. When you are selecting something like a login panel, it does matter which membership module you choose.  Each Membership module will need a login panel on the site in order for it to be used.

Once you select the module from the first drop down you will want to choose the frame type for that module.

Under the "Basic Frames" module there are these Frame types:

Return to Top

see screenshot:

Under the "AD" Module there are these frame types:

Return to Top

For all videos pertaining to the AD module click here

See Screenshot:

Under the "Advanced Gallery" Module there are these frame types:

Return to Top

For a list of videos pertaining to the advanced gallery module click here

Under the "Blog" Module there are these frame types:
For a list of videos pertaining to the Blog Module click here

see screenshot:

Return to Top

Under the "Ecommerce" Module there are these frame types:
for a list of videos pertaining to the E-commerce module click here

See screenshot:

Return to Top

Under the "Membership" Module there are these frame types:
for a list of videos pertaining to the E-commerce module click here

See screenshot:

Return to Top

Under the "Store Locator" Module there are these frame types:
for a list of videos pertaining to the E-commerce module click here

See screenshot:

Return to Top

This answer will show you how to add a new page.

See video instructions on this here

When you are in your Websiteforge Members area, and expand your domain name on the left panel you will see a list of items, among that list you will see "pages".  If you expand "Pages" you will see a blue link for "Add page".

See Screenshot:

Next you will be taken to the "page Settings" screen that looks like this:

• You can choose your page group here.  (more on page groups here)
• Choose whether the page is active or not. (NOTE: pages that are not active cannot be previewed)
• Next is your "Page name".  This is the name you will see in your page list.  It is for your personal reference.  and is a required field.
• Next is your "page Title" this is the name that will show on the browser tab of your page, and can optionally be shown on the page in the next step. This is also a required field
• Next is the option to show the title on the page or not.
• Next if you have multiple designs for your site you can choose which design you want to apply to this page.  Also you can choose to have "No Design" and make your new page without a specific template applied.
• Next is the option to add a Site Menu item, by default adds this new page to the site menu with the "Page Name" that you gave it above.  If you wish to add your site menu link to this page later you can choose "Do not add" in the drop down list and add it at any time later in the "Site Menu" area.  Or you can change the name of the Site menu link in the next step.
• Next this is the name that will show on your site menu. Click here to see more info on adding a site menu item later
  
• Next if you wish to have this page acccessed by a single username and password you can specify it here.  (If you want to have members access the page please see how to set that up here)

• Next is "Restricted Access" this is what you check if you wish to make this page accessible to members in a group.  (For more details on setting this up click here)
• Next is "Secure Page".  This is used to secure certain pages on your site.  Your merchant or Pci compliance provider may require certain pages to be secured.  This is what you check to secure them. (NOTE: by default your checkout pages are already secured)
• Next is "Copy Protection".  This will not allow users to copy content from your page.  But use this carefully, when this option is checked it will make the page virtually invisible to crawlers and will affect your Search engine ranking for this page
• This next area is for creating a pop up box dimensions and selecting an already created page for your pop up.  (NOTE: Be aware most browsers now enable pop up blockers and your site visitors may not see your pop up message.)
•  "use for full text search" is for the search box called "full text search" if you want this page to be searched when that box is being used then you would want to check this box
• "Page logo for FB" you can add a logo here that when this page is pasted to facebook it will use that logo for this page.

Here you will find a breakdown of all of the content Toolbar icons.  The Toolbar looks slightly different in Internet Explorer then it does in Firefox.  This example will break down the Firefox Content Toolbar.  In Firefox you will only THIS toolbar on the "page layout" screen. 

(Click Here for Internet Explorer content toolbar breakdown)