Site Editor

User Guide

Copyright WebsPlanet Ltd. All rights reserved.

WebsPlanet Ltd. retains the sole proprietary rights to all information contained in this document. No part of this
document may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, including
but not limited to: electronic, mechanical, magnetic, photocopy, recording, or otherwise, in use now or in the
future, without the prior written consent of WebsPlanet Ltd.
TABLE OF CONTENTS

Logging In to the Site Editor ............................................................................................................ 7

Reseller Login .............................................................................................................................. 7

Site Owner Login ......................................................................................................................... 8

Site Owner Password Reset ..................................................................................................... 8

System Overview ............................................................................................................................ 9

The Upper Toolbar ...................................................................................................................... 9

The Canvas ................................................................................................................................ 10

The Widgets Toolbar ................................................................................................................. 10

Site Settings ............................................................................................................................... 11

Page Management ........................................................................................................................ 13

Page management .................................................................................................................... 13

Add a Page ................................................................................................................................. 15

Page Order ............................................................................................................................. 16

Create a Subpage ................................................................................................................... 16

Add Menu Item ......................................................................................................................... 17

Add Link Item ......................................................................................................................... 18

Add Parent Item..................................................................................................................... 18

Duplicating Page from a Different Language ............................................................................ 20

Settings.......................................................................................................................................... 22
 General ...................................................................................................................................... 22

Site Settings ............................................................................................................................... 23

Backup & Restore .................................................................................................................. 24

Start Over With a Different Template ................................................................................... 25

Languages .................................................................................................................................. 25

Adding a language ................................................................................................................. 25

Contact Info ............................................................................................................................... 26

Google Analytics ........................................................................................................................ 27

Facebook ................................................................................................................................... 27

Design............................................................................................................................................ 29

Files ............................................................................................................................................... 30

SEO ................................................................................................................................................ 31

Statistics ........................................................................................................................................ 32

Connecting a Personal Google Analytics Account .................................................................... 37

Editing Template Specific Content ................................................................................................ 39

Header Area .............................................................................................................................. 39

Header Image ........................................................................................................................ 40

Page Taglines ......................................................................................................................... 40

Logo ....................................................................................................................................... 41

Slide Show.............................................................................................................................. 41
 Layout .................................................................................................................................... 41

Footer ........................................................................................................................................ 41

Additional Elements .................................................................................................................. 42

Adding and Editing Widgets .......................................................................................................... 43

Adding a Widget to the Canvas ................................................................................................. 43

Editing a Widget in the Canvas ................................................................................................. 43

Moving Widgets in the Canvas .............................................................................................. 43

Controlling the Widget's Style ............................................................................................... 44

Deleting a Widget from the Canvas .......................................................................................... 44

WIDGETS ....................................................................................................................................... 46

Basic Widgets ............................................................................................................................ 46

Text ........................................................................................................................................ 46

Picture .................................................................................................................................... 46

Text & Picture ........................................................................................................................ 48

Columns ................................................................................................................................. 49

Contact Form ......................................................................................................................... 50

Google Maps .......................................................................................................................... 51

Guestbook.............................................................................................................................. 52

Form Manager ....................................................................................................................... 54

Social Widgets ........................................................................................................................... 55

 AddThis .................................................................................................................................. 55

Facebook Feed ....................................................................................................................... 56

Facebook Like ........................................................................................................................ 57

Embed .................................................................................................................................... 58

Twitter Follow Us ................................................................................................................... 59

Facebook Comments ............................................................................................................. 59

Media Widgets .......................................................................................................................... 60

Gallery .................................................................................................................................... 60

Image Slider ........................................................................................................................... 62

YouTube ................................................................................................................................. 64

File.......................................................................................................................................... 65

Flash ....................................................................................................................................... 66

Advanced Widgets..................................................................................................................... 67

Opening Hours ....................................................................................................................... 67

Payment Methods ................................................................................................................. 68

Online Store ........................................................................................................................... 69

HTML ...................................................................................................................................... 69

World Clock............................................................................................................................ 70

QR Code ................................................................................................................................. 71

Calculators ............................................................................................................................. 72
 Controllers ................................................................................................................................. 73

Columns ................................................................................................................................. 73

Tabs ........................................................................................................................................ 73

Accordion ............................................................................................................................... 74

Spot ........................................................................................................................................ 75

Grid ........................................................................................................................................ 76

Button .................................................................................................................................... 77

Line......................................................................................................................................... 78

Mobile Site Editor ......................................................................................................................... 80

Quick Mobile Mode ................................................................................................................... 80

Creative Mobile Mode .............................................................................................................. 80

Creative Mobile Mode and Page Modules................................................................................ 83

LOGGING IN TO THE SITE EDITOR

Before we begin our explanation about the Site Editor, we first need to know how to log into it.
This chapter explains how you, the reseller, will log in from the management system. We also
included the site owner login steps, so that you will be familiar with how your customers log in
to the system.

Reseller Login

To log in to the Site Editor, follow these steps:

1. Enter the administrative system with the reseller credentials.

2. From the Administrative Section panel on the left, open the Sites options and click on
Sites List.
3. Search for the website you want to edit (Enter the domain or business name in the
search field).
4. Click on the name of the site you want to manage.
5. From the Site Profile screen, click on the Manage Site button.
Site Owner Login

The site owner logs in to the Site Editor using the Editor URL provided by the reseller (unless
the reseller is using the API from his own domain to link to the system).

1. Click the Log In at the upper right corner of the screen.

2. A new window will open requesting a username and password in order to log in to the
Site Editor as a site owner

Site Owner Password Reset

If the site owner forgot the password, they can reset it by following these steps:

1. Click the Forgot your password? link at the bottom of the log in screen.
2. A new screen will open allowing the site owner to reset their password.
3. The site owner will be required to insert the email address that was used during the
original registration process of the site and click Reset Password.
4. An email with a resetting password link will be sent to their email address.
5. Clicking on the link will lead the site owner to a new password creation screen.
SYSTEM OVERVIEW

This user guide explains how to manage and edit a Website using the WebsPlanet Site Editor.
The following chapter provides an overview of the platform.

The Upper Toolbar

The upper toolbar holds the following features (From right to left):

Publish - The Publish button makes the Website available for online viewing. Upon the
first publish request, a pop up message will appear to enable you to change the site's
address. This option will lead you to the Domain Settings screen that enables you to
purchase a domain name for the new site.
Help (? Button) - Click this icon to access the Online Help Center. The Help Center is
categorized into groups of actions and flows to help you find the best answer to your
question as quickly as possible.
Save - Click this icon to save changes you have made to the site. These changes will not
be visible in the online site until you publish.
Preview - Clicking this button will open a preview screen that can show the site in any
device size Desktop, Tablet Horizontal, Tablet Vertical, Mobile Horizontal and Mobile
Vertical. There is also an option to preview the Facebook site and install the Facebook
application from the preview screen.
Notifications Alerts the user of actions they can take (upgrade package, publish, etc.)
Logout - Use this option to log out of the system when you are finished working on it.
Upgrade For DIY accounts, lets site owners upgrade the current package to a more
advanced package.
Layout Selection The layout dropdown allows the user to change the layout type of
the current page.
 Page Selection - The Page dropdown indicates what page you are editing at the
moment. Opening the dropdown list and selecting a different page will direct you to the
selected page.
Web/Mobile tabs - The Web/Mobile tabs indicate the site mode you are working on -
whether it's the desktop website or the mobile site.

The Canvas

The Canvas is the main editing area. Drag and drop widgets onto the canvas in order to
populate the site's content area with content and functionalities.

In the Canvas area you can edit widgets, change placement and manage the content of the site.

You can also edit template specific content such as the Header Area, Footer content, etc.

The Widgets Toolbar

The Toolbar holds all the widgets that are available in the package you selected.

Basic - Holds all the Basic widgets such as Text, Image, Contact Form,
Google Maps, etc.
Social - Holds all the available Social Media Widgets (AddThis, Facebook
and Twitter).
Media - Holds all the Media Widgets (i.e. Galleries, Flash and YouTube).
Advanced - Holds all the widgets that are defined advanced, such as
the Online Store, the HTML widget and more.
Controllers - Holds all the controller widgets (Columns, Tabs, Accordion
and Spot).
Site Settings

The Site Settings are handled in eight different sections:

Pages add/delete pages, reorder them and configure advanced

settings for each page (Header and Footer codes and SEO elements).
Settings Enables the configuration of basic site settings like the
business' email, the site title, languages, Contact Info, SEO elements and
Statistics).
Design Make changes to the site's template and determine the site's
design elements such as text, buttons, background, etc.
Files Opens the File Management screen, which enables the uploading
of files from the computer to the website that can later be used or
downloaded from the site.
Blog Edit and configure your Blog. This menu item will only appear
when the Blog add-on is enabled in the Site Profile screen.
SEO Enables editing of SEO details for each of the website's pages.
Statistics View site statistics (via Google Analytics).
Permissions This section is only available when managing the site as a
reseller. Clicking the permissions button (displayed as a lock) opens the
Permissions Management screen, where the reseller can set permissions for each
element in the editor for the site owner.
PAGE MANAGEMENT

From the Page Management screen you can add/delete pages, set the menu structure and edit
page definitions.

Page management

Hide Page ( ) Use this option to hide the page from the site menu.
The page can still be accessed using a link to it from within the site.
Edit Click the Edit link to start inserting content to the page.
Duplicate Use this option to duplicate an existing page. The new duplicated page will
contain all the content of the original page.
Delete ( ) Click the Delete button to remove a page from the website.
Advanced Settings Use this option to set the advanced settings of a specific page.
o Open to Search Engines Mark this option to allow search engines to scan the page
and add its content to boost the site's SEO.
o Page Template This option becomes available when a custom design template is
defined for the site. For more information, see the Template Assembler user guide.
o Title The page title as displayed in the browser tab/window.
o Description Enter text that will appear below the page title in search engines or
directories.
o Keywords Enter the most important themes of the page, separated by commas.
o Friendly URL Enter a meaningful URL that will be easily understood by users and
search engines for better usability and search engine optimization.
o Head Code Enables adding additional code to the page's HTML <head> tag.
o Footer Code Enables adding additional code that will be appended at the bottom
of the page's HTML code.
Add a Page

To add a new page to the site, click the Add Page button located at the top left corner of the
Page Management screen. An Add Page screen will appear with the following options:

Page Name Enter a name for the new page as it will appear in the site's menu.
Page Layout / Pre-define Pages Select the page type that is required for the site.
Blank Page An empty canvas that can contain widgets.
Two Columns a blank page which is divided into two equally sized columns.
Right Sidebar a blank page which is divided into a large left column and a small right
column.
Left Sidebar a blank page which is divided into a small left column and a large right
column.
Two Sidebars a blank page which is divided into small left and right columns parted by
a large center column.
 Blog Add a blog page to your site. To learn all about creating a blog, please refer to
the Blog user manual.
Link A menu item that is linked to an external page. You can choose to open the link in
the same window or in a new window.
FAQ Enables the creation of a dedicated FAQ page in the site which includes only
frequently asked questions and answers.
Jobs Enables the creation of a dedicated Jobs page in the site which includes only the
open positions with their description and an "Apply for This Job" link. A CSV file of the
applications submitted through the site can be downloaded from the Module settings
screen.
Events Enables the creation of a dedicated Events page in the site which includes only
events and their details.

Important Note: The Link, FAQ, Events and Jobs pages are module pages which do not have
canvas functionality (cannot add widgets to them). All other page types (About Us, Our
Team, Portfolio, etc.) are canvas pages with pre-defined widget layout. These pages are
based on the Master Layout site that the reseller sets up. For more information, see the
Reseller User Guide.

Page Order

Change the order of the pages in the site menu, by dragging them up/down from the Left side
of the page listing.

Create a Subpage
To set a page as a subpage, simply drag it inward, under the desired parent-page.

Subpages can be set up to 4 levels (top + 3 subpages).

Add Menu Item

Use this feature to add an item to the site menu, which is not an individual sub-page:

A menu item for an external link to a different site

A parent item that holds a list of sub-pages

Add Link Item

To add a link menu item, click Add Menu Item Add link item.

Name your new menu item and insert the URL you would like that menu item to point to.

Test the link by clicking the icon.

To set the link to open in a new window, check the New Window checkbox.

Add Parent Item

Use this feature to add a static menu item which is not a page.

For example, in this site built for a fitness and health club, we would like to add a menu item to
hold all the business's offered services, each described in a dedicated page; "Fitness Classes",
"Personal Training", "Nutritional Counseling" and "Swim Team".

Click Add Menu Item Add Parent Item a new parent menu item will be added to your
page list.
Name the new parent item (in our case, we called the parent item "Our Services"), drag it to the
desired location in the page list and place the desired pages under the parent item.

To define the URL structure of the pages based on the site menu hierarchy (for
example http://example.com/top-page/sub-page), go to Settings General scroll
down and check the Hierarchical URL structure checkbox.

Duplicating Page from a Different Language

In multilingual sites, the pages management screen contains a second button which allows
adding a new page by duplicating a page from an existing language.

Clicking on the "Duplicate page from a different language" button opens a popup for adding a
new page based on a specific page from a specific language.

Important Note: The duplicated page and content will not be translated. Translation is only
provided when language variables are duplicated. For example, when a page with a Contact
Form is duplicated, the widget's labels are translated (name, address etc.).
SETTINGS

Manage the Site's settings and general information from this menu.

General
Website Address: displays the site's domain. You can change the site's domain by
clicking the Change Address button. For more information on how to change the site
domain, please refer to the Domain Setup User Guide.
Email: If a site domain has been purchased or transferred, you can set up the email
manager for it. For more information, please review the Email Setup User Guide.
Policies: Manage the site policies. This button will be available when the reseller has
activated the Policies feature. If the feature is disabled, the button will not appear on
the screen. To learn more about policies, please refer to the Policies User Guide.
Website Title: The page title as displayed in the browser tab/window.
Include in Meta Title: enabling this option will include the Website Title as part of the
Title meta tag information.
Tagline: text to insert in specific areas (defined in the template).
Favicon: upload a favicon that will appear in the address and favorites bar.
Date Style: define the format of the pages'/widgets' dates' format displayed throughout
the website.
Time Zone: select the site's time zone.
Head Code: enter HTML code that will be added to all the pages' <head> section.
Footer Code: enter additional HTML code that will be added at the bottom of all the
pages' HTML code.
Site Under Construction: mark this option if you would like to temporarily show the site
on the Internet as "Under Construction". (You will still be able to edit and preview the
site).
Show Sitemap link on your site footer: check this box to place a link to the Site Map in
the site footer. The Sitemap is enabled by default.
Enable site search: display the search field in the site (Assuming it is included in the
template the site is using).
Show breadcrumbs: display a horizontal navigation trail for site visitors. Activating this
feature will only apply when the Template contains the {BREADCRUMBS} Smart Tag.
Hierarchical URL structure: define the URL structure of the site pages to be based on
the site menu hierarchy (useful for sites which have sub-pages in the site menu).
Site Settings
Backup & Restore

Located at the bottom of the General section of Site Settings, This feature allows users to
create a backup copy of the site before making changes to it. The backup process saves a
snapshot of the site which can later be restored in case an earlier version of the site is needed.
The amount of backups allowed per site (1 to 10) is defined in the site's package. The backed up
versions do not take space in the site's quota.

Important note: The backup and restore feature does not include the site's profile
information (site name, reseller, domain and subdomain, site owners details and the site
package) and they will not be affected when a restore process is performed. This ensures
that important settings to packages, domains, etc. are not discarded in the process.

In order to perform a site Backup, follow these steps:

1. From the Settings Menu, click the Backup and Restore button.
2. Click the Create a new backup button.
3. Fill in the name of the backup and a short description. You can choose to back up the
published or the saved (unpublished) site.
4. When done, click the Create Backup button.

In order to restore an older version of the site, follow these steps:

1. From the Settings Menu, click the Backup and Restore button.
2. Click on the backup version to confirm it is the correct one.
3. Click the Restore link to return the site to that backup version.
4. Confirm that you want to restore the site clicking the "I AM SURE" button.
5. The site will be restored to the selected point and you will return to the canvas
screen.
Start Over With a Different Template

This option is only available when the reseller is working with Template Sites (rather than with
Default Sites).

When Template Sites are enabled, changing the template will also affect the content.
Therefore, the user will be prompted before making the change.

To learn more about Template Sites and Default Sites, refer to the DIY and DIFM Solutions User
Guide.

Languages
Site Languages Displays the site's default language. Click the Add button to add
additional languages to the site.
Editor Language Select the language of the site editor interface.

Adding a language

When adding a new language via the Site Settings -> Languages menu, the user is presented
with an option to duplicate the content of the site into the newly created language site.
 Important note: You can choose to copy the existing content to the new language version
but it will not be translated automatically. You will have to change the user generated
content for each added language manually.

Contact Info

Enter the site owner's or business' details, including:

Email Address (Mandatory field that is defined when site is first created).
Phone Number
Mobile Number
Fax Number
Address
City
Zip Code
Country
State (if relevant to the country)
Google Analytics

The Google Analytics tab in the Site Settings window is only accessible for DIY customers.

Connecting the Site Owner's Google Account with the Google Analytics application will enable
them to get extensive analytics for the site traffic directly in their Google Account.

Tracking ID (UA code) enter the Tracking ID for the specific Google Analytics view you
want to associate with the site tracking information.

For more information about Google Analytics, refer to the Google Analytics website.

Important Note: All information regarding statistics in the Site Editor will only be available if
the reseller has connected a Google App in the Reseller Settings. For more information
about this procedure, refer to the Reseller Settings user guide.

Facebook

If the Facebook Application is enabled in the package, you will be able to embed the site in a
Facebook page by installing the app on the Facebook account.
For more information about connecting a site to Facebook, please refer to the Creating a
Facebook Site user guide.
DESIGN

The design screen holds all the design options for the site. The options are divided into the
following groups:

Themes Only available when NOT working with Template Sites. Select a template for
the website from the template library.
Text Format the different types of site texts: define the font family, size and color.
Background Set the site's background image or color, out of bound background image
or color, and the site's alignment.
Skins Select a skin to change the color palette for the current template.
Custom Design Make modifications to the site template's HTML and CSS code.
For more information regarding Custom Design options, please refer to the Template
Builder User Guide.
Change Template only available when working with Template Sites. Select a template
site to change to design of the website.

Important note: when the reseller is using Template Sites, changing the template will
remove all changes to the content made by the user.
FILES

The Files screen allows you to upload new files to the site and manage the files already
available.

To upload a single file or multiple files, click on the Upload Files button and select the
files to upload from your computer.
The area located on the right of the screen shows a preview of the selecte file and the
quota of the site in Megabytes.
File extensions that are not supported by the system can be uploaded as a shrunk file
(with a ZIP or a RAR file extension).
Right clicking on a file from the list will offer the following options:
Download Download the file to your computer.
Copy link Clicking on this option will open a new screen where the full path of
the file can be copied using CTRL+C.
Delete Permanently delete the file from the site. If the deleted file was being
used in the site, a broken image will be displayed where the file was.

For the full list of supported extensions, see File Manager Widget section
SEO

The SEO screen allows you to edit the SEO details for each page on the site.
The details in the SEO screen correspond with those of the Pages' Advanced Settings screen
(Change in one screen will affect the other).

The SEO field details include:

Open to Search Engines Mark this option to allow search engines to scan the page and
add its content to boost the site's SEO.
Title The page title as displayed in the browser tab/window.
Description Enter text that will appear below the page title in search engines or
directories.
Keywords Enter the most important themes of the page, separated by commas.
Friendly URL Enter a meaningful URL that will be easily understood by users and
search engines for better usability and search engine optimization.

Note: any changes that will be made in the Friendly URL, will be update automatically to
the live site without pressing the Publish button

Head Code Enables adding additional code to the page's HTML <head> tag.
Footer Code Enables adding additional code that will be appended at the bottom of
the page's HTML code.
STATISTICS

The Statistics Dashboard provides valuable traffic information, collected by Google Analytics:

Visits - The number of times the site was accessed.

Page Views - The collective number of times any page was viewed. If the user returns to a page
multiple times in a single session, each visit will count as a Page View.

Unique Page Views - The number pages viewed in a single session. Even if the user returned to
a page multiple times in a single session, only one visit will be added to the count.

Page Views per Visit - The average number of pages viewed by visitors in a single session.

Date Controller Use the filter at the top of the screen to set the time span of the traffic data
displayed in the Dashboard.

The Statistics Dashboard is divided into 4 tabs:

1. Overview
2. Content Data
3. Traffic Sources
4. Geo Location
1. Overview

The Overview tab contains overall traffic information - Visits, Page Views, Unique Page Views
and Page Views per Visit, as well as a graphic display of the information.

Yellow = Visits * Blue = Page Views * Red = Unique Page Views * Green = Page Views per Visit

Hovering over points in the graph will open a pop-up, indicating the exact value at that point.
2. Content Data

The Content Data tab contains traffic data per site Page.
The Page list can be filtered according to the Page Title or path.
3. Traffic Sources

The Traffic Sources tab contains information on how visitors are reaching your site:

a. Source - The list of addresses, either search engines or websites, from-which

visitors are reaching the website.
b. Traffic by Medium - The channel through-which traffic originates; un-paid search
("organic"), paid search ("Cost per Click"), referral and so on. Direct visits are
counted in this section as "none".
c. Traffic by Keyword - Search-engine keywords which lead visitors to the website.
4. Geo Location

The Geo Location tab contains traffic data by geographic location; country or city.
Connecting a Personal Google Analytics Account

For additional traffic data, the site owner can link their personal Google Analytics account to
the site. To do so, follow these steps:

1. In the Site Owner's Google Analytics account, go to Admin - Property (select the desired
property from the drop down menu) - User Management - Tracking Info - Tracking Code.

2. Copy the UA code.

3. In the Site Editor: Go to Settings - Google Analytics
4. Paste the UA code into the Tracking ID field and hit Submit.

The Site Owner will now retrieve tracking information directly in their Google Analytics account.

For more information about Google Analytics, refer to the Google Analytics website.
EDITING TEMPLATE SPECIFIC CONTENT

Each template provides different elements that can be edited and managed through the Site
Editor.

This chapter explains about the different elements available in templates, and how to edit
them.

Header Area

The Header Area can hold several elements inside it.

Hover over the header image and click on "Edit Header Area" to access the editing options
screen.
Header Image

The header image can be change by clicking on the "Replace Image" button and either selecting
an image from the public gallery or uploading an image from your computer.

Clicking on "Edit Image" will open the Aviary image editor plugin integrated in the Site Editor, to
allow extensive manipulation of the image.

Page Taglines

Edit the text to be displayed in the different tagline sections available in your selected template.
Logo

Choose between the three options:

Logo Image upload an image to display as the site logo.

Logo Text edit text to display as the site logo.
No Logo don't display anything in the logo section of the Header Area.

Slide Show

Edit the Slider images, videos and display options.

For more information about editing the Slider, refer to the Slider Widget section.

Layout

Under the Layout tab you can choose to assign a different layout for the Header Area in the
current page.

You can also use the dropdown list at the top to copy an entire Header Area from another page
in your site, including all content and definitions.

Footer

The Footer holds content that is defined in Reseller Settings by default. This content can be
changed at any time.

Hover over the footer content and click on "Edit Footer" to access the editing options screen.

Use the text editor to define text to be shown in the site footer.
Adding extensions to the social links will enable them to be displayed in the site footer.
Restore reset the footer content to the original state, according to what is setup in
Reseller Settings.
Additional Elements

Templates can hold elements outside of the Header Area and Footer.

In order to edit these elements, hover over them and click on the "Edit" button.
ADDING AND EDITING WIDGETS

Adding a Widget to the Canvas

To add a widget to the site content area, simply select the widget you wish to add from the
Widgets Toolbar and drag it to where you want it to be placed (hold down the left mouse
button on the widget and drag).

As you move the widget over the canvas a blue dashed square will appear, indicating where the
widget will be located once you drop it.

Once you are satisfied with the location of the widget as indicated with the dashed blue square,
drop it (release the left mouse button) to the canvas and edit its definitions.

Editing a Widget in the Canvas

Each widget has a unique management screen that is relevant to its content and display. To
return to the management screen of a widget, hover over the widget you would like to edit. A
gray toolbar will appear. Click the edit icon to open the management screen of the widget
and edit its content.

Moving Widgets in the Canvas

To move a widget from one position to another, hover over the widget you would like to edit. A
gray toolbar will appear. Hold the left mouse button on the drag handle icon and drag to any
position in the canvas, including into or out of containers (such as Columns widget, spotlight
controller, etc. For more information, see the Controller Widgets chapter).
Controlling the Widget's Style

To customize the styling of the widget, hover over the widget you would like to design. A gray
toolbar will appear. Click the widget design icon to open the design panel.

Indents: Margin and Padding Set the margin and padding definitions of the widget.
The Margin properties define the space around the widget. The padding properties
define the space between the widget's border and the widget's content.
Background Set the background color and opacity of the widget.
Border Set the widget border's width, color and radius.
Box Shadow Set the box shadow's color, offset, blur and spread.
Text Shadow Set the text shadow's color, offset and blur.
Transformations Set the widgets scale (zoom factor) and rotation.

Deleting a Widget from the Canvas

To delete a widget from the canvas, simply hover over the widget you would like to delete. A
gray toolbar will appear. Click the delete button to delete the widget.
WIDGETS

Following is a detailed explanation of each of the widgets included in the system.

The widgets available in the Control Toolbar are the result of the package the site is based
on. If some of the widgets that are mentioned here do not appear in the Widgets Toolbar,
they can be made available by upgrading the site to a more advanced package.

Basic Widgets

These are the widgets included under the Basic category:

Text

Use the text widget to enter plain text.

The text widget is edited inline, so once you click the left-mouse button in the text field area,
the text editing toolbar will appear and provide you with standard word processing functions.

Picture

Use the Picture widget to add a single picture.

Change Picture Click this button to upload a picture you would like to present in the
site. Select pictures from your personal computer, or from the Public Gallery.
Clicking on "Edit Image" will open the Aviary image editor plugin integrated in the Site
Editor, to allow extensive manipulation of the image.
Effects select a hover effect for the picture. Selecting a hover effect will display the
title and description text only when a site visitors hovers over the picture.
Align Choose where to align the picture.
Link You can turn the picture into a link to a different page, website or an email.
Website Select this option if you want the picture to be linked to
a different page or website. Enter the relevant URL in the text
field, and mark the checkbox if you would like the link to open in a
new window.
Page Select this option to link to a page in the website.
 Email Select this option if you would like the picture to initiate a
new email message when clicked. The new email message will be
addressed to the email address that is specified in the Email text
field.
Add Link Button enabling this option will create a button for the
link instead of making the picture clickable.
Text
Title Enter a title for the picture.
Alt Enter text that best describes the image you are uploading.
This text will help the file to be found by search engines, and will
be displayed if the image fails to load properly.
Description Enter a description of the image. The description will
appear below the image, and will also help the file to be found by
search engines.

You can modify the picture's size by dragging out its right-bottom corner.

Text & Picture

Use the Text & Picture widget to insert text combined with a picture.
The text section in this widget is edited in the same manner as the plain Text widget.
To edit the picture, hover over the image icon and click the Edit Image button. This will open
the same Edit: Picture screen as seen in the Picture widget.
Columns

Use the Columns widget to divide the content area into more than one column.
Once you drop the Columns widget onto the canvas, it will divide the width of the canvas into
two equal columns. To divide the canvas into more than two columns, simply select the number
of columns you want from the options displayed in the upper-left corner.

The width of each column can be controlled by dragging the border to the right/left.

The borders that separate the columns appear only when you are in editing mode. In the
published site they will not be visible.
Contact Form

Use the Contact Form widget to add a contact form from a set of templates.

1. Select a form from the form type list.

2. Select the Settings tab to modify the form's settings.

Form Name Define the form name. This will be displayed as the form button label in
the mobile version of the site.
Email Subject The subject of the email sent to the recipient with the form details.
Description Add a description that will appear at the top of the form.
Thank You Message The text displayed to the site visitor after submitting the form.
Recipient Email The email account which will receive forms submitted through the
site.
Button Title Define the label you would like to appear on the forms Submit button.
Email Message The text in the received email above the form data.
 Add HTML to thank you message Use this field to add a conversion tracking code and
collect valuable information about your sites activity. Place a JavaScript/HTML code to
the Thank You message, which appears whenever a form is submitted.
Use anti-spam security code (CAPTCHA) Define whether a security code mechanism
will be part of the form.
Submissions Export a list of the form submissions you received in CSV format.

To create a customized contact form, use the Form Manager widget.

Google Maps

Use the Google Maps widget to display an address or location upon a map.

Enter the address you would like to display in the Location field, and click Add. The location will
then appear under the Locations section (below the map), the map area will be updated and
the address you entered will be pinned on the map.

You can display more than one location by going through the same process again. To remove an
address from the map, simply remove it from the Locations list.
Guestbook

Use the Guestbook widget to get feedback directly from the site visitors.

Don't worry - the site owner can moderate the Guestbook feedback, preventing
inappropriate comments from being displayed in the site.
Free text area Enter the text that will appear when site visitors click the "Sign our
guestbook link".
Number of posts to display Define the amount of posts displayed in the site. The posts
displayed will be the most recent posts.
Show time stamp in post Mark this checkbox to display the posts' creation time and
date.
Form Manager

Use the Form Manager widget to create a customized form.

Add Field Select the fields you would like to add to compose the form.
Field Settings - For each field you add to the form, you can define the following:
o The field's label.
o Whether it's a mandatory field or not.
o Predefined Value (If you would like to set one).
Form Settings Define general information about the form:
Form Name set the form name.
Description Add a short description that will appear below the form name.
Button Text The label that will appear on the form's Send button.
Send to Mail The email account which will receive submitted forms.
Mail Title The subject of the email sent to the recipient with the form details.
Thank You Message The text displayed to a site visitor after submitting the form.
Use anti-spam security code (CAPTCHA) Define whether a security code mechanism
will be part of the form.
 Add HTML to thank you message Use this field to add a conversion tracking code and
collect valuable information about your sites activity. Place a JavaScript/HTML code to
the Thank You message, which appears whenever a form is submitted.
Submissions Export a list of the form submissions you received in CSV format.

Social Widgets

These are the widgets included under the Social category:

AddThis

Use the AddThis widget to add the ability to share the content via multiple social platforms in a
row.

Select the radio button of the layout you would like to add to the site and click submit.
Facebook Feed

Use the Facebook widget to insert a Like button that leads to the Facebook business page.
This functionality is designated for Facebook Business Pages and does not support personal
profiles.

Facebook Page Address Enter the full URL of the Facebook page you would like to
display. This field is mandatory.
Color Scheme Select Light/Dark color schemes.
Show Faces Show/Hide the fans' profile pictures.
Show Stream Show/Hide the Facebook Page content.
Show Header Display the "Find Us on Facebook" header when either faces or streams
are displayed.
Facebook Like

Use the Facebook Like widget to add Facebook's social buttons (like/recommend/share) to the
site.

Layout Select between Standard and Button Count. Standard will display the
Like/Recommended button while the Button Count will display the button along with a
counter that shows how many people have already Liked/Recommended the page.
Button Title Select a button title: Like or Recommend.
Include Share Button Show/Hide the Share button.
Show Faces Show/Hide the fans' profile pictures.
Embed

Use the Embed widget to add external social network plugins to the site.

Click on the link of your selected social network and follow the instructions provided.
You will be given an embed code. Copy and paste it in the text area instead of "Paste code
here".

Click Submit to embed the social network service into the site.
Twitter Follow Us

Use the Twitter Follow Us widget to add a "Follow Us on Twitter" button to the site.

Enter the twitter user name and click Submit.

Facebook Comments

Use the Facebook Comments widget to add a comments sectiong to the site.
 Facebook Application ID adding an application ID will allow moderation of the
comments through the Facebook moderation tool.
Color Scheme Select Light/Dark color schemes.
Number of Posts define the amount of posts the display.

If an app was linked to the widget, the app administrator will be able to moderate comments
and manage rules and restrictions for comments through
https://developers.facebook.com/tools/comments.

Media Widgets

These are the widgets included under the Media category:

Gallery

Use the Gallery widget to add a gallery of pictures to the website.

Upload Files Click this button to upload the pictures you would like to present in the
gallery. Select pictures from your personal computer or from the public gallery.
Select more than one picture by holding the Ctrl button while you click.
Pictures preview - After submitting the new pictures, they will be displayed on the right
of the gallery editor. To change the order of the pictures, use the up/down arrow-heads.
Add a description to each of the pictures in the text field next to it.
The description will be displayed below each picture.
 Layout Select the method in which the gallery will operate.
Static The gallery will be static, and no special effects will be added.
Lightbox Once the user clicks on a picture from the gallery, the picture will open in
a lightbox in larger dimensions.
Carousel The gallery is composed of a centralized image slider, and a thumbnail
strip that can be toggled on and off.

The following options will only be displayed if you have selected the Static or Lightbox layout:

Thumbnail Select between "Fit image to thumbnail" (fit them into the gallery's cells)
and "Fill Thumbnail" (keep the images in their original size).
Thumbnail Ratio - Define the width-height ratio of the thumbnail images displayed in
the gallery.
Columns, Rows and Border Choose the number of columns and Rows in the gallery
and the thickness of the borders that separate the cells.
The following will be displayed only if you have selected the Carousel layout:

Color Scheme Select between Light/Dark color schemes.

Auto Play Define whether the image carousel should play automatically when page is
loaded.

To remove a picture form the gallery, simply click the Delete link next to it.

Image Slider

Use the Image Slider widget to add a transitioning gallery of pictures to the website.
Add Image / Add Video Click this button to upload images and videos you would like
to present in the gallery. Select files from your personal computer or from the public
gallery.
Select more than one picture by holding the Ctrl button while you click.
Edit configure the different options for each slide in the slider widget.
the text that will be displayed with the slide.
- assign a link to the slide.
- change the file for the selected slide.
- crop the image.
- edit the image with the Aviary tool.
 Layout Select a pre-defined skin for the overlay content of the slider.
Color Choose between a White a Black color palette for the overlay.
Show Arrows choose whether or not to display the pagination arrows in the slider.
Show Bullets choose whether or not to display the pagination selectors in the slider.
Auto Play choose whether or not the slider will scroll independently.
Transition Effect select your preferred transition effect.
Transition Duration Select your preferred transition effect duration.
Slide Duration Select your preferred slide duration.
Resize Slides select whether you want to resize slide to fit the container dimensions,
or to leave the assets in their full size.
Adaptive Height select whether you want the slider height to change according to the
displayed slide or not.

YouTube

Use the YouTube widget to insert a video to the site.

 Search YouTube use the search option to find the desired video. Clicking on the video
name will add the URL to the YouTube URL field.
YouTube URL Enter the URL of the video clip you would like to add to the site.
Description Enter a description of the video clip you have added. The description will
be displayed below the video clip.
Auto Play Define whether the video clip will be played automatically.
Loop Define if the video clip will be played repeatedly once started.
Lightbox Define whether the video will be opened in a lightbox.
Suggested Videos choose whether or not to show suggested videos in the widget
when the video ends.

File

Use the File widget to upload files that can later be downloaded from the site by site visitors.

Upload File Click this button to upload the file you would like to present on the site.
 Description Enter a description of the file. It will appear next to the file icon.
Download link text Enter the text for the download link.
Align Choose where to align the widget.
The file extensions that are supported by the file widget are:
Image JPG, JPEG, GIF, PNG, TIF, TIFF
Sound MP3, WAV, WMA, AIF, IFF, M4A, MID, MPA,RA, OGG
Video ASF, ASX, AVI, FLV, MOV, MP4, MPG, MPEG, RM, WMV
Office
Word DOC, DOCX, RTF
Excel XLS, XLSX, CSV
PowerPoint PPT, PPTX
PDF, SWF, ZIP, RAR, TXT

Flash

Use the Flash widget to add a Flash runtime file (.swf) to the site.

Flash is used for animated vector graphics, online games and programs.

Upload File Click this button to upload the flash file from your personal computer.
 Alt Enter text that best describes the file you are uploading. This text will help the file
be found by search engines.
Align Choose where to align the flash file.

Advanced Widgets

These are the widgets included in the Advanced category:

Opening Hours

Use the Opening Hours widget to update the business opening hours.

Time Format Select between 12 or 24 hours format.

 Always Open Mark this option if the business is open 24/7.
Opening Hours Select the day or days range and the hours during which the business
is open on these days. Click the "Add+" button to add more rows to the Opening Hours
table.
More Information Add additional information that you would like to display below the
opening hours.

Payment Methods

Use the Payment Methods widget to display the type of payment methods accepted by the
business.

Select the payment methods the business accepts by clicking on the icon with the
mouse. Click again to remove it from the list.
More Information Specify additional payment methods or any other relevant
information you would like to show below the icons.
Online Store

Use the Online Store widget to add Ecommerce features to the site.

For more information on setting up an online store, please review the Online Store User
Guide.

HTML

Use the HTML widget to insert HTML code to the site in a specified location.
The code can contain any kind of elements.

Simply write or paste the HTML code into the widget's editor and click Submit.

The code may not work in the Site Editor. To view it, click on the preview button.
World Clock

Use the World Clock widget to display the current time in different time zones.

Location Title Enter a title that will represent the displayed time zone.
Local Time Zone Select the time zone you would like to display.
Daylight Saving Mark this option if it is now daylight savings period in the time zone
you have selected.
Add - Use this option to add additional time zones to display in the world clock widget.
Show Day/Night Background Image Enable this option to add a background image
displaying the day time (day/night) to the world clock widget.

If you want to display several time zones in the site at once (instead of selecting one time
zone at a time from the drop down menu) you can simply add another World Clock widget
to the site.

Daylight savings time will not be changed automatically by the system.

QR Code

Use the QR Code widget to display a QR code in the site.

Fill in the fields you would like to display. Make sure to un-check the fields that you don't want
to display.

Select whether you would like to display the QR Code as a link or as an image.

Image The QR Code will be displayed as an image in the site.

Link to lightbox Only a link will be displayed in the site. Once the user clicks on it, an
image of the QR Code will be displayed in a lightbox.
 Link Text Enter the text you would like to display below the QR Code image.

Calculators

Use the Calculators widget to add various pre-defined calculators to the site.

Unit Calculator convert unit measurements (meters, inches, area, length, volume,
weight, etc.)
Tax Calculator calculate tax price and total price of purchases.
Calorie Calculator calculate their recommended daily calorie intake based on Age,
Gender, Height (in foot or cm), Weight (in Kg or Lbs.) and Activeness information.
Mortgage Calculator calculate the number of payments and monthly payment for a
loan.
Pregnancy Calculator - calculate when the baby was conceived, when he is expected
and the current fetal age.
Controllers

These are the widgets included in the Controllers category:

Columns

The columns widget is explained in the Basic Widgets section of the user guide.

Tabs

Use the Tabs controller widget to divide the canvas into multiple sections using a tab
pagination.
Once you drop the Tabs widget onto the canvas, three tab areas will be available for widgets.
Each tab can hold multiple widgets from the widgets toolbar.

To rename a section, click on the section's name and change the content of the text field.
To add more tabs, click on the button, located on the top left corner of the widget toolbar.
To remove a tab, click on the X button, located next to the tab name.

Note: The height of each tab is defined based on the widgets it contains.
Accordion

Use the Accordion controller widget to divide the canvas into multiple sections using an
accordion style animation.

Once you drop the Accordion widget onto the canvas, three section areas will be available for
widgets. Each section can hold multiple widgets from the widgets toolbar.
To add a widget, open the relevant section by clicking on the title and drag and drop the widget
into it.

To rename a section, click on the section's name and change the content of the text field.
To add more sections, click on the button, located on the top left corner of the widget.
To remove a section, click on the X button, located at the top right corner of the section.

By default, only the first section of the Accordion is opened when the published site is loaded in
the browser.

Note: The height of each section is defined based on the widgets it contains.
Spot

Use the Spot controller widget to provide unique design to all the widgets it holds.

The spot is a single design container, allowing multiple widgets to share its design area.
 Example - Each spot contains a title (text widget) and content (text, picture or text and
picture widgets).

Grid

The Grid is a container-type widget which adds that extra responsiveness you wished to achieve
for your site. Drag and drop the Grid widget to the Canvas, choose the number of columns you
wish to use (2,3,4,6 or 12), and place content widgets into the cells.
Button

Use the Button widget as a link to a page in the website, an external URL, or to an email
address.
 Text define the text and style for the button.
Links define which type of link to assign to the button, and where the link should
redirect.
Dimensions configure sizes for the button and the button borders.
Colors define color options for the button and button text.
Box Shadow configure the shadows for the button.
Text Shadow configure shadows for the button text.
Advanced for advanced users. Allows you to add additional CSS definitions, or to
assign a CSS class name to the button, which can be associated to in the template code.

Line

Use the Line widget to differentiate between sections in the website.

Dimensions configure sizes for the line.
Colors define color options for the line.
Shadow configure the shadows for the line.
MOBILE SITE EDITOR

Sites built with Eclipse are generated using a responsive framework. In practical terms, all our
websites will look great on any device without further effort.

Moreover, in addition to the site HTML skeleton being responsive, most widgets will render
differently on smartphones, assuming a Mobile Application is included in the package. For
example, a Contact Us widget will display a contact form when rendered on a desktop, but on a
smartphone, the same widget will be transformed into a button, which will expand into a
mobile friendly contact form with a single finger tap.

In addition, certain Controllers behave differently on the mobile site (both on creative and
quick modes):

Tabs - changes to an accordion.

Column divider - The widgets which were inside a column divider in desktop mode are
displayed one under the other in all mobile modes. Moreover, the columns widget will
not be available in the editor in mobile mode.

Quick Mobile Mode

When a site is created, the Mobile Editor starts off in Quick mobile mode.

This means that the mobile site is generated automatically based on the desktop site. The user
cannot change the look and feel of the mobile site, nor can they change or add to the sites
content (widgets, menu items etc.). Changes can only be done to the desktop site, causing the
mobile site to change accordingly.

Creative Mobile Mode

In order to separate the mobile version of the site from the desktop version, the user has to
switch to Creative Mode in the Mobile Editor by clicking on the Switch to Creative mode
button:
The first time the site is switched to creative mode, the user will be asked to choose between
two starting points:

Edit with current content

Build it from scratch

After choosing the starting point, the Mobile Editor will allow the user to add/remove pages,
change the position of existing widgets or delete them altogether, to add new widgets to the
mobile canvas, etc.
It is possible to switch back to Quick Mobile mode at any time, simply by clicking on the Switch
to quick mode button.

Upon switching back to Quick Mode, the mobile site will once again reflect the current state of
the desktop site. However, the creative version of the site will be saved and the user will be
able to switch back to Creative Mode without losing any of the dedicated content and layout.

When trying to perform a creative task in quick mobile mode (e.g. dragging and dropping
widgets, deleting a page, etc.), an error message will indicate that it is only possible to perform
these actions in Creative mode.
Creative Mobile Mode and Page Modules

Module pages behave differently than widgets on standard pages. Modules will always be
linked to the same content repository regardless of whether the user works in Quick or Creative
Mode.

Moreover, even if the module page was created after separating the desktop site from the
mobile site, creating a mobile module page will display the content of the desktop module
page.

Similarly, when creating a new module page for the first time in the mobile version of the site
and subsequently creating the same module page on the main (desktop) version, the desktop
page will display the content already created while working in mobile.

Note: any changes that will be made in the Module pages, will be update automatically
to the live site without pressing the Publish button