These are the widgets included in the Controllers category:
Columns
Use the Columns widget to divide the canvas into more than 1 column.
The columns widget was explained in the Basic Widgets section of the user guide. Note: The Columns widget is the only controller that can hold other controllers.
Tabs
Use the Tabs controller widget to divide the canvas multiple tabs.
Once you drop the Tabs widget onto the canvas, three tab areas will be available for widgets. Each tab can hold any widget from the widgets toolbar and as many widgets you require. Click on the tab's name to edit it.
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.
40 Figure 24 - The Tabs Controller
Accordion
Use the Accordion controller widget to divide the canvas into multiple sections.
Once you drop the Accordion widget onto the canvas, three section areas will be available for widgets (See Figure 28). Each section can hold multiple widgets from the widgets toolbar. To add a widget, open the relevant section by clicking on it and drag and drop the widget into it.
Figure 25 - The Accordion Controller
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.
41 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.
Spotlight
Use the Spot controller widget to provide unique design to the widgets it holds.
Figure 26 -The Spotlight Controller
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).
42 Figure 27 - Example of Spotlight
43
SITE SETTINGS
Pages
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 new 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.
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
44 Figure 28 - The Page Management Screen
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 Type – Select the page type that is required for the site. o Blank Page – An empty canvas that can contain widgets. o Link – A page that is linked to an external page.
o FAQ – Enables the creation of a dedicated FAQ page in the site which includes only frequently asked questions and answers.
o 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.
o Events – Enables the creation of a dedicated Events page in the site which includes only events and their details.
45 Figure 29 - The Add Page Screen
46
Settings
Manage the Site's settings 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 Appendix A – Domain Setup.
Website Title - The page title as displayed in the browser tab/window
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).
Enable site search – Display the search field in the site (Assuming it is included in the template the site is using).
Languages
Site Languages – Displays the site's default language. Click the Add button to add additional languages to the site.
Important note: The content of the website will not be translated automatically to other languages if any are added. You will have to add the content to each added language manually.
47
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)
Statistics
Google Analytics Username – Enter the Google Analytics username. If you do not have a Google Analytics account, click the Register to Google Analytics link below the text field to create one.
For further information on how to create a Google Analytics account refer to Appendix B – Creating a Google Analytics Account.
Google Analytics Passwords – Enter the Google Analytics password.
o LOG IN – After entering the username and password in order to view the site's statistics directly from the site editor.
Account ID – Enter the Google Analytics account ID
Profile ID – Select the profile ID you would like to assign to the website.
Design
The design screen holds all the design definitions of the site. The definitions are divided into the following groups:
Themes – Select a template for the website from the template library.
48
Background and position – Set the site's background image or color, out of bound background image or color, and the site's alignment.
Custom Design – Make modifications to the site template's HTML and CSS code.
For further information regarding the Custom Design options, please refer to Appendix C – Custom Design.
Files
The Files screen allows you to upload new files to the site as well as manage the files associated with the site.
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 the preview of the image that is selected and the quota of the site in Megabytes.
File extensions that are not supported by the system (for the full list of supported extensions, see File Manager Widget section) 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: o Download – Download the file to your computer.
o Copy link – Clicking on this option will open a new screen where the full path of the file can be copied using CTRL+C.
o 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.
SEO
The SEO screen allows you to edit the SEO details for each page on the site.
The details in the SEO screen match that of the Page's 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.
49
Friendly URL – Enter a meaningful URL that will be easily understood by users and search engines for better usability and search engine optimization.
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.