USER GUIDE: EDITOR. Drag & drop system: Content Manager Style Editor Add Elements Undo/Redo Save...

Transcription

1

2 USER GUIDE: EDITOR Drag & drop system: Content Manager Style Editor Add Elements Undo/Redo Save... 13

3 When we access Zeendo s website editor, we can see a series of options on top: User: on the top left side there s the user button, which will send you to the Websites tab of your Zeendo user panel. Add shop page: next to the user button there is a button that will allow you to add a shop page, or to edit it (when you subscribe to an Ecommerce plan). For more information on how to edit your shop page see the E-commerce user guide. Tutorial: on the top right side of the screen you ll see the button Tutorial?, with which you ll be able to visualize the video tutorial explaining how Zeendo works. Configuration: next to the tutorial button there s the configuration button, which will redirect you to the Websites tab, from where you ll be able to manage your domains. You ll be able to choose from the plans offered the one that best fits your needs ( Basic, Professional, Ecommerce ), visualize your site s statistics and use Google Analytics. Preview: Here you ll see how your website will look when it s published. Publish: Once you finish editing your website you ll be able to publish it. Click on this button and you ll be asked to choose a subdomain for your website (in case you haven t chosen it before), and then you ll get redirected to the Websites tab again, where you ll be able to manage your domain. Drag & drop system: This system allows you to click on the element you like, either from the elements on the page or from a file in your computer, and to drag and drop it wherever you d like it to appear: within your website or in the corresponding spaces of the tools menus.

4

5

6

7

8 All these formats and font types can be found in Font typography and Font size on the tab Design. - You can change the colour of the text that you are editing. - You can add a link. - Tools to modify paragraphs: text alignment and list options. - You can delete the format from the text that you re editing. - You can delete the text block created. Title Description: Titles can be used to give more visibility or importance to a given part of the text, like a header or a paragraph. Tip: They are used in the same exact way as text boxes, options will appear when you double click on them. Rule Description: The rule is a small line that you can place under texts, images, etc. Tip: When you add the rule, a menu will open automatically with which you ll be able to adjust the line width (how long you d like it to be) and the kind of line that you want (solid, dotted, intermittent, etc.). You can also choose the colour. Icon Description: With this button you can add predesigned icons to make sections on your website more dynamic and clear. There are general icons, icons for forms, currency, text edition, directions, brands, etc. Tip: When you drag this to the page, options for this element will appear like for instance the option to change its size. It can be used with forms, for instance, to indicate that a file can be downloaded, etc. Button Description: Allows to add links to other pages, send an or make a phone call. Tip: After dragging and dropping the button to the place we want it to be, a menu will appear. The button name can be entered in the space for the title. Link styles allow to show the button or only the link. Content allows you to decide whether the link will take to an internal or external page. Link type lets you choose if you want the link to be for a telephone, an , a web link or a downloadable file. Also you can choose to open the link in the same page or in a new one, and to align it to the left, right or centre of the page.

9 Form Description: Form blocks are very useful for communication with clients or to obtain information about them. Tip: When you drag this element to the page, a menu will open in which you will see the tools needed to modify the form structure. The button add new elements to the form will open in a new menu, where you will find different options to add to your form. Once the structure is completed, you can double click on the pencil icon to give the form a title, personalize the confirmation message and choose the storage options for the s received. Map Description: Maps make it easier for users who visit your website to find the physical location of your business. Tip: Drag the map and drop it where you want it to appear. A menu will open where you ll be able to write a description and add the address, city and country. Finally, you will be able to determine how close up you want it to show your location and what kind of map you prefer: map, satellite or hybrid. Box Description: A box is a rectangular form containing text. It is used to highlight whatever is placed in it. Tip: Drag the box and drop it where you want. A menu will open where you will be able to change its title and description, and to add text. You can modify the background by clicking on the button with the colour dot. Change the colour of the box and its opacity with the alpha bar. Remember that the colour of the text will be the same one as the background colour. Modify the box size too: length and width; and choose where to place it: centred, to the left or to the right. Finally, you ll be able to change the colour of the box with the colour selector and its opacity with the Alpha bar. Remember that the colour of the text will be the same as that of the background. Quote Description: Use this button to add an inspirational quote or to cite the words of someone of importance. Tip: Select this icon and drop it where you d like it to appear. A menu will open and will allow you to edit the text and author of the quote. Remember that the colour of the text will be the same as the background colour. HTML With this block you will be able to enter any element that s not among the predesigned elements: an iframe, a table, a banner, etc. You can align the code to the right, to the left or centre it.

10

11 Image settings In this section you can edit the information of the image: titles, links (external or to the same website). You can also choose whether you want it to open in the same page or in a new one. Procedure is the same as for each individual image. Image information: Grid You can edit the gallery s presentation options by clicking on the image button: how many images per row you want to appear and whether you want padding between images (and how big). Square thumbnails Select the square thumbnails option if you would like all your images to have the same size. This option is recommended if the images aren t edited and they don t have the same size. Image information: Slider Slider mode allows to skip images one by one, either automatically or manually. Autoplay: You can choose between having the images skipping automatically or have the user do it manually. Controls and show captions : You can also add the options controls for users to be able to skip images one by one manually, and show captions to display the image information. Pagination: This option allows you to make a presentation of images selecting them by pages in the bar that appears at the bottom of the image, as shown below: Thumbnails: This option allows you to visualize in the bottom of the image shown the other images in miniature, so that you can select which one you want to see. Loader type: This option allows to choose how you want to visualize the transition from one image to another: in a circle or in a bar. Animation type : This option allows you to choose in which way to change from one image to another, choosing from the listed options. Image information: Stacked This format stacks the images that you add in a column, adjusting them to the size of the column where they are entered.

12 Video This block allows you to add an externally hosted video to be shown directly on your website content. Note: This example uses a video from YouTube, but it is also possible to use a video from Vimeo, only the embed code (HTML) options may differ. There are two ways to add a video to your website: using the video search feature on YouTube or using the embed code (HTML). YouTube video search: Using the search bar, you can look for the name of the video in YouTube. Select the video and it will automatically appear on your website. On the information button you will find the information to embed the video using HTML code. Video options embed code (HTML): Click on the pencil button and you will see a box where you can paste the HTML code. To obtain this code, just go to the video on YouTube and select the option embed from the share tab below the video STRUCTURE Structure blocks allow you to give format to the content on your page. You can add 1 to 6 row structures and make your website more practical for your visitors. Columns To add a column structure, just drag the block and drop it where you d like it to be. Once in place, elements can be added within the different containers or columns: images, buttons, texts or it is also possible to leave them empty. The following will appear above each of the spaces on the top side of the structure: The button on the left will allow you to clone the column on which you re working: images, text or anything you placed within it will be duplicated. The middle button allows you to hide for mobile anything placed on it. Finally, the button on the right (bin) will delete the whole structure.

13 Buttons on the right side, on the other hand, affect the whole of the structure and not only one of the containers. The top button with the two cogs allows you to configure the rows. When you click on it, the following will appear: - The top part allows you to organize columns, meaning that you can drag any of them to change their position. - You can change the opacity and the colour of the structure s background. - You can also change the background of a structure by dragging an image box and adding an image from your computer. Also, if you select stretch image in container, the image will fill the background. The second button (rectangular form with arrows) will move the whole structure up or down, depending on which arrow you click. The button with the two rectangles allows you to clone the whole vertical structure. This means that an identical structure will appear below it. The grey bin button deletes the whole structure SOCIAL NETWORKS Facebook Like Enter you Facebook s page URL in the address field. This will automatically redirect it to your Facebook page like. Layout The Layout option will allow you to select how you want the like option to appear. There are 3 options to show this icon on your website s content: - Standard. - Button. - Button count. - Box count. Width: This option allows you to modify how the text appears in the standard mode and to change it according to your needs. Send: If you check the send option, your users will be able to share the link. Show faces: If you select this option, you ll see the profile pictures of those who ve liked it.

14 Google Plus Enter your Google page s URL on the address field. This will automatically redirect it to your Google+ like. The annotation option will allow you to select the icon size from one of these 3 options: - None (without annotation) - Bubble - Inline You can also choose the size of the social network button: small, medium, standard or tall. Twitter Follow A drop-down menu will appear when you add this block where you ll be able to introduce your Twitter user name and the icon size (medium or large). You can also select the counter type (vertical, horizontal or none) and the language in which you d like it to appear. 4. Undo/Redo This option allows you to undo or redo the latest changes on your website. 5. Save This option allows you to undo or redo the latest changes on your website.