dd24 Website Builder User Guide

Transcription

1 dd24 Website Builder User Guide 1

2 TABLE OF CONTENTS System Overview... 6 The Upper Toolbar... 6 The Control Toolbar... 7 The Canvas... 8 Adding and Editing Widgets... 9 Adding a Widget to the Canvas... 9 Editing a Widget in the Canvas... 9 Moving Widgets in the Canvas... 9 Controlling the Widget's Style Deleting a Widget from the Canvas The Widgets Toolbar Basic Widgets Text Picture Text & Picture Columns Contact Form Google Maps Guestbook

3 Form Manager Social Widgets AddThis Facebook Facebook Like Twitter Follow Us Media Widgets Gallery Flash YouTube RSS File Advanced Widgets Opening Hours Payment Methods Online Store and Shopping Bag HTML QR Code World Clock Calculators

4 Controller Widgets Columns Tabs Accordion Spotlight Site Settings Pages Page management Add a Page Settings General Languages Contact Info Statistics Design Files SEO Statistics Mobile Site Editor Quick Mobile Mode

5 Creative Mobile Mode Creative Mobile Mode and Page Modules Appendix A Domain Setup Transfer an Existing Domain Select a Subdomain Appendix B Creating a Google Analytics Account Appendix C Custom Design The Template Editor Screen Editing the HTML Code Editing the CSS Code Uploading Graphic Files

6 SYSTEM OVERVIEW This user guide explains how to manage and edit a Website using the dd24 site-builder solution. The following chapter provides an overview of the system s menus and panels. The Upper Toolbar The upper toolbar allows you to do the following: Help - 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 Save - Click this icon to save changes you have made to the site. Preview - Clicking this button will open a preview of the website as it is at the moment. The Preview screen also grants access to the Mobile Site Preview and to the Facebook Site Preview. Publish - The Publish button enables publishing the Website (and Mobile site if such exists), to the Internet. 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 define a domain name for the brand new site. Web/Mobile tabs - The Web/Mobile tabs indicate the site mode you are working on - whether it's the website or the mobile site. Page - The Page dropdown indicates what page you are editing at the moment. Opening the dropdown menu and selecting a different page will shift you to the selected page and enable editing it. Upgrade - Use this option to upgrade the current package to a more advanced package. 6

7 The Control Toolbar The Control Toolbar holds all the features that are available in the package you selected, as well as all the site settings. The Control Toolbar is categorized: Basic - Selecting this group of features will lay out all the Basic widgets such as Text, Image, Contact Form, Google Maps, etc. Social - Selecting this group of features will lay out all the available Social Media Widgets (AddThis, Facebook and Twitter). Media - Selecting this group of features will lay out all the Media Widgets (i.e. Galleries, Flash, YouTube and RSS). Advanced - Selecting this group of features will lay out all the widgets that are defined advanced, such as the Online Store, the HTML widget and more. Controllers - Selecting this group of features will lay out all the controller widgets (Columns, Tabs, Accordion and Spot). The Site Settings are categorized: Pages Clicking the Pages button opens the Pages Management screen, which enables the adding/deleting of pages, setting the pages' advanced options (Header and Footer codes and SEO elements) and setting the pages' order and structure (reflected in the site menu). Settings Clicking the Settings button opens the Site Settings screen, which enables the configuration of basic site settings like the business' , the site title, site style, languages, Contact Info, SEO elements and Statistics) Design Clicking the Design button opens the Design screen, from which you can make changes to the site's template and determine the site's design elements such as text styles, buttons styles, background image etc. Files Clicking the Files button 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. SEO Clicking the SEO button opens the SEO management screen, which enables editing of SEO details for each of the website's pages. Statistics Clicking the Statistics button opens the Statistics screen, from which you can view the site's statistics (Based on Google Analytics). 7

8 Figure 1 - The Controller Toolbar The Canvas The Canvas is the main editing area. Drag and drop widgets onto the canvas in order to populate the site's canvas with functionalities. 8

9 ADDING AND EDITING WIDGETS Adding a Widget to the Canvas To add a widget to the site canvas, simply select the widget you wish to add from the Control Toolbar and drag it to the canvas (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 blue dashed square, drop it (release the left mouse button) to the canvas to edit its definitions. After you drop the widget to the canvas, its management screen will open automatically, enabling you to edit its content. 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 managing screen of a widget, hover over the widget you would like to edit. A blue 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 blue 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 design containers (such as Columns widget, spotlight controller, etc. For more information, see the Controller Widgets chapter). 9

10 Controlling the Widget's Style To customize the styling of the widget, hover over the widget you would like to design. A blue toolbar will appear. Click the widget design icon to open the design panel (See figure 5). Figure 2 - Widget Box Design 10

11 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 widget s 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 blue toolbar will appear. Click the close button to delete the widget. 11

12 THE WIDGETS TOOLBAR Following is a detailed explanation of each of the widgets included in the system. 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. (To add more than one picture, use the Gallery widget as detailed below). 12

13 Figure 3 - Picture Editor Upload File 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. Alt Enter text that best describes the image you are uploading. This text will help the file to be found by search engines. 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. Align Choose where to align the picture. Edit Link You can turn the picture into a link to a different page, website or an . Clicking the left icon (insert/edit link) will open a new screen where you can define where to link the image to. To remove an existing link, click on the right icon. 13

14 Figure 4 - Adding a Link URL Select this radio button 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. Select this radio button if you would like the picture to initiate a new message when clicked. The new message will be addressed to the address that is specified in the text field. 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 editing icon same Edit: Picture screen as seen in The Picture widget.. This will open the 14

15 Note: you can modify the picture's size by dragging out its right-bottom corner. Columns Use the Columns widget to divide the canvas into more than 1 column. Once you drop the Columns widget onto the canvas, it will divide the width of the canvas into 2 equal columns. To divide the canvas into more than 2 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 separator 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 appear. 15

16 Contact Form Use the Contact Form widget to add a pre-designed contact form. To create a customized contact form, use the Form Manager widget. 1. Select a form from the forms library (See figure 8) Figure 5 - Selecting a Contact Form 2. Select the Settings tab to modify the form's settings (See figure 9) 16

17 Figure 6 - Contact Form Details Form Name Define the form name. Description Add a description that will appear at the top of the form. Button Title Define the label you would like to appear on the form s Submit button. Recipient The account which will receive forms submitted through the site. Subject The subject of the sent to the recipient with the form details. Message The text in the received above the form data. Thank You Message The text displayed to the site visitor after submitting the form. 17

18 Use anti-spam security code (CAPTCHA) Define whether a security code mechanism will be part of the form. 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. 18

19 Figure 7 - Google Maps Widget Editor Guestbook Use the Guestbook widget to get feedback directly from the site visitors. Don't worry; you 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". 19

20 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. Allow site owner moderation in the current version this option is mandatory and cannot be changed. Figure 8 - Guestbook Widget Editor 20

21 Form Manager Use the Form Manager widget to create a customized form for the website. Figure 9 - Form Manager Editor 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 add one). Form Settings Define general information about the form: 21

22 o Form Name Define the form name. o Description Add a description about the form's purpose, will appear below the form name. o Button Text The label that will appear on the form's Send button. o Send to Mail The account which will receive forms submitted through the site. o Mail Title The subject of the sent to the recipient with the form details. o Thank You Message The text displayed to the site visitor after submitting the form. o CAPTCHA Define weather a CAPTCHA will be included in the form or not. 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. 22

23 Facebook 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 function for 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. Figure 10 - Facebook Widget Editor 23

24 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. Color Scheme Select Light/Dark color schemes. Button Title Select a button title: Like or Recommend. Show Send Show/Hide the Send to a Friend button. Show Faces Show/Hide the fans' profile pictures. Figure 11 - Facebook Like Widget Editor 24

25 Twitter Follow Us Use the Twitter Follow Us widget to add a button to the site. Enter the twitter user name and click Submit. Figure 12 - Twitter Follow Us Widget Editor 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 1 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- 25

26 heads. Add a description to each of the pictures in the text field next to it. The description will be displayed below the picture 1. Figure 13 - Gallery Widget Editor Layout Select the method in which the gallery will operate. o Static The gallery will be static, and no special effects will be added. o Lightbox Once the user clicks on a picture from the gallery, the picture will open in a lightbox in larger dimensions. o Carousel The gallery is composed of a centralized image slider, and top 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: 1 The description will not be displayed if you select the Static Gallery layout. 26

27 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. Figure 14 - Moving and deleting an image from the Gallery Widget 27

28 Flash Use the Flash widget to add a Flash runtime file (.swf) to the site. Flash is used for animated vector graphics, online game 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. Figure 15 - Flash Widget Editor 28

29 YouTube Use the YouTube widget to insert a video to the site. Search YouTube - Enter one or more keywords and click Search to find the video clip you are looking for from YouTube. Top search result will appear in the preview window on the right. YouTube URL Enter the URL of the video clip you would like to add to the site. If you don't know it, clicking on one of the search results will update this field with the URL of the video clip you have selected. 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. Figure 16 - YouTube Widget Editor 29

30 RSS Use the RSS widget to add an RSS feed to the site. RSS Feed URL Enter the address of the source that provides the feed. Amount of Items - Select the amount of items to be displayed. Transition Effect - Select how the stream will flow in the RSS block. Choose between Static, Scroll or Fade-In. Show feed title Show/Hide the feeds' title. Show feed description - Show/Hide the feeds' description. Show Images - Show/Hide the feeds' images. Limit item word counts The number of words that will be displayed in the preview of the feed. Show item date - Show/Hide the items' date. Figure 17 - RSS Widget Editor 30

31 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 file. The file extensions that are supported by the file widget are: o Image JPG, JPEG, GIF, PNG, TIF, TIFF o Sound MP3, WAV, WMA, AIF, IFF, M4A, MID, MPA,RA, OGG o Video ASF, ASX, AVI, FLV, MOV, MP4, MPG, MPEG, RM, WMV o Office Word DOC, DOCX, RTF Excel XLS, XLSX, CSV PowerPoint PPT, PPTX o PDF, SWF, ZIP, RAR, TXT Figure 18 - File Widget Editor 31

32 Advanced Widgets These are the widgets included in the Advanced category: Opening Hours Use the Opening Hours widget to update the business opening hours. Figure 19 - Opening Hours Widget Editor 32

33 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. 33

34 More Information Specify additional payment methods or any other relevant comments you would like to show below the icons of accepted methods. Online Store and Shopping Bag Use the Online Store and Shopping Bag widgets to add Ecommerce features to the site. For more information on setting up an online store, please review the Ecommerce User Guide. HTML Use the HTML widget to insert HTML code to the site. The code can anything from a Facebook share button, a YouTube embedded player, a pole or any code you want to add to the site. Simply paste the HTML code into the widget's editor and click Submit. Note: The code may not work in the editor, to view it, publish the site and visit it. 34

35 Figure 20 - HTML Widget Editor QR Code Use the QR Code widget to display a QR code in the site. 35

36 Figure 21 - QR Code Widget Editor 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. 36

37 Link 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. o Link Title Enter the text you would like to display below the QR Code image. World Clock Use the World Clock widget to display the current time in different time zones. Figure 22 - World Clock Widget Editor Location Title Enter a title that will represent the displayed time zone. Local Time Zone Select the time zone you would like to display. o Daylight Saving Mark this option if it is now daylight saving period in the time zone you have selected. Notice-this will not be changed automatically by the system when daylight time begins and ends. 37

38 Add+: Use this option to add additional time zones to display in the site. If you would like to display more than one time zone, the widget will have a dropdown menu from which the user can choose what time zone to see. If you want to display all the 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. Show Day/Night Background Image Mark this checkbox to add a background image displaying the day time (day/night) to the world clock widget. Calculators Use the Calculators widget to add various calculators to the site. Figure 23 - Calculators Selection Unit Calculator Lets site visitors convert unit measurements (meters, inches, area, length, volume, weight, etc.) Tax Calculator Lets site visitors calculate tax price and total price of purchases. 38

39 Calorie Calculator Lets the site visitor 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 Lets the site visitor calculate the number of payments and monthly payment for a loan. Pregnancy Calculator Lets the site visitor calculate when the baby was conceived, when he is expected and the current fetal age. Controller Widgets 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. Note: The height of each tab is defined based on the widgets it contains. 39

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. 40

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). 41

42 Figure 27 - Example of Spotlight 42

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 of the page's HTML code. 43

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. 44

45 Figure 29 - The Add Page Screen 45

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. Editor Language Select the language of the site editor interface. 46

47 Contact Info Enter the site owner's or business' details, including: 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. Text Format the different types of site texts define the font family, size and color. 47

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. Keywords Enter the most important themes of the page, separated by commas. 48

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. Statistics View the site's statistics as they appear in the Google Analytics dashboard. Figure 30 - The Statistics Screen This option will be available only if you have entered the Google Analytics account details as explained in the Site Settings Statistics section. 49

50 MOBILE SITE EDITOR The sites are built 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 scaffold being responsive, most widgets will render differently on smartphones, assuming Mobile is included in the site's 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. Quick Mobile Mode In Quick mobile mode, which is the default setting for any new site in the system; the mobile site is generated based on the Website. The user cannot change the look and feel of the mobile site, nor can they change or add to the site s content (widgets, menu items etc.) in the mobile editor. Changes can only be done to the Website, 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 mobile site has to be separated from the desktop version. In order to do so, the user has to switch to Creative Mobile working mode by clicking on the Switch to Creative mode button at the top of the mobile canvas: Figure 31 - Changing to Creative Mode 50

51 The first time the site is switched to creative mode, the site editor will let the user choose from two starting points: Edit with current content Build it from scratch Figure 32 - Choosing the Creative Mode Option After choosing the starting point, the mobile editor in creative mode 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: 51

52 Figure 33 - Switching Back to Quick Mode Upon switching to Quick Mode, the mobile site will once again reflect the current desktop site, however, the creative version of the site will be saved and the user will be able to switch back to the creative site without losing any of the dedicated content and layout: Figure 34 - Switching Back to Creative Mode 52

53 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: In addition, design controllers behave differently on the mobile site (both on creative and quick modes): Accordion: basic functionality doesn t change Tabs: changes to an accordion Spotlight: basic functionality doesn t change 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. Creative Mobile Mode and Page Modules Module pages obey different rules than widgets on canvas pages. Modules will always be linked to the same content repository regardless of whether the user works in quick or creative mobile mode. 53

54 The site editor offers the following module pages: FAQ, Events, Jobs and Links 2. 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 on the mobile tab and subsequently creating the same module page on the main (desktop) tab, the desktop page will display the content already created while working in the mobile tab. *** For further assistance, please contact the dd24 support team *** 2 The links page type will be deprecated in the coming website builder version. 54

55 APPENDIX A DOMAIN SETUP The domain setup offers the following options: Transferring an existing domain to the site. Changing the subdomain extension. To start the with the domain setup, go to the settings menu and click the Change address button. Transfer an Existing Domain Before trying to transfer a domain name, make sure the A-Records of the domain are pointing to the system's IP address. Detailed instructions on how to do this can be found by clicking the View Instructions link, located next to the Validate Domain button. 1. To transfer an existing domain address, select the relevant radio button. 2. Insert the domain you would like to transfer. 3. Click the Validate Domain button. This will check that the domain is indeed directed to the system. 4. Once the validation is confirmed, click Continue to complete the process and to have the domain linked to the site. Figure 35 - Transferring an Existing Domain 55

56 Select a Subdomain You can use a subdomain by selecting the relevant radio button, entering the desired subdomain and clicking Continue to complete the process. Figure 36 - Changing Subdomain 56

57 APPENDIX B CREATING A GOOGLE ANALYTICS ACCOUNT Once you have clicked the Register to Google Analytics link, the Google Analytics sign-up screen will open in a new tab. Click the button to start the process. After creating an account, you will have to create another profile with a filter that will enable you to manage more than 50 domains under the account. 1. On the main screen, Click on "Add a new Profile". 2. Under "Choose Website Profile Type", select "Add a Profile for an existing domain". 3. In Profile Name, insert "crossdomain". 4. Select the country and time zone, and click Finish. Now that you have created another profile, you will need to define a filter. 1. From the main screen, click on the Analytics Settings (in the upper left corner). 2. Click Filter Manager. 3. Click Add Filter. The Create New Filter page appears. 4. Enter a crossdomain as Filter Name for this filter. 5. From the Filter Type drop-down list, select Custom Filter. 6. From the drop down list, select the Advanced radio button. 7. Fill in the subsequent fields exactly as shown in figure

58 Figure 37 - Setting up Analytics 8. Under the Apply Filter to Website Profiles section, select Cross Domain Profile and click Add. Then "Save Changes" to apply the filter. For an explanation of the different reports available in Google Analytics, please read their support document: 58

59 APPENDIX C CUSTOM DESIGN By clicking on Custom Design you will be led to the custom design control panel from where you can manage the site's templates and create new ones. Figure 38 - Custom Design Screen Current Template Indicates the current template the site is using. To edit or duplicate it click the relevant link next to the name of the template. My Templates From this section you can see and manage all the templates you have already created for the site. 59

60 o Activate To activate a different template, click the Activate link next to the template you would like to use. o Delete To delete one of the templates click the Delete link. (An active template cannot be deleted, so make sure to activate a different template before trying to delete an active one). o Edit To make changes to an existing template, click the Edit link next to the template you wish to edit. o Duplicate In case you would like to create another theme and not overwrite an existing template-use the Duplicate link. Since the platform's original templates cannot be edited, by clicking Edit next to an original template a "Create New Template" message will pop-up, asking you to enter a name for the new template. The new created template will be identical to the original but the new template will be editable. The Template Editor Screen Each template is comprised of HTML code, CSS code and graphic files. From the template editor screen you can control all the template elements. On the left-hand side select which element you would like to edit. The code in the template editor area will update according the selection. 60

61 Figure 39 - Custom Design Editor Editing the HTML Code The HTML code defines the template's layout. The HTML code of the homepage and the internal pages are edited separately to allow different layouts for the homepage and the internal pages. Clicking the Add New button will open a new page template that can be used to create a new page layout for a specific page or pages. To allocate a page to the new page layout, see the Page Management section. 61

62 Under the Edit HTML section, select the page you would like to edit (homepage, default or add a new internal page), and start making the changes to the HTML code. To insert Smart Tags open the Smart Tags tab and select the tag you would like to insert. When you're done editing the HTML code don't forget to click Save to save your changes. Editing the CSS Code The CSS code controls the style of the layouts. The CSS section is divided into 3 code sheets: Grid: In this section-enter CSS properties that will affect the style of the page layout. E.g. {float:_}, {margin:_}, {padding:_} etc'. Theme: In this section-enter CSS properties that will affect the style of the page color scheme. E.g. {background-image:_}, {color:_}, {font-style:_} etc'. Menu: In this section-enter CSS code that will affect the style of the template's menu. Uploading Graphic Files The Graphic Files section is divided into 3 corresponding panels: Grid: Upload graphic files that you would like to use for the template's grid. Theme: Upload graphic files that you would like to use for the theme of the template. Menu: Upload graphic files that you would like to use for the template's menu. The valid graphic files are all image files, flash, JS, CSS, txt, and XML. The size limitation is 2MB per file. Once a file is uploaded, it is added to the main area and displayed in the preview window. In addition, a path is created and displayed below the preview image. In order to use a file in the template's HTML or CSS code, simply copy the file's path as displayed under the preview image and paste it in the relevant place in your code. 62