Drag & drop system: ................................................................................................................... 2
1. Content Manager .................................................................................................................... 3
2. Style Editor .............................................................................................................................. 5
3. Add Elements .......................................................................................................................... 6
4. Undo/Redo ............................................................................................................................ 13
5. Save ...................................................................................................................................... 13

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

1.
Clicking on the button shown above
MANAGER .
, a tag will open to the left: the CONTENT
The content manager will allow you to add or delete pages, put them in order or edit their
SEO options.
If you move the cursor over the menu pages, the following will appear:

The first icon is a page.
When clicking on the cog pencil Clic kit to access the editor and start modifying that button you will be able to configure the page’s options and SEO:
- Page Settings: you can name the page as you want it to appear on your website’s menu, change its slug and decide which page you want to make your home page.
- SEO Settings: you can change the title of the page, add its description and the meta keywords needed for SEO optimization.
The next icon ( two pages , one above the page. If you click on it, you will be able to other ) allows you to clone the selected configure the options mentioned above
(remember to change them so that they have a different name and SEO configuration).
Finally, you will be able to delete the page selected by clicking on the bin
If you click on the button, a menu like the one below will appear from where you will be able to choose what page you’d like to add.
Since the pages are completely customizable, if you’d like to add an option that’s not in the menu, you can add any page and then edit it according to your needs.
As you can see, there are two different sections: menu pages and “ other pages ”. Other pages are internal pages that aren’t shown in the website’s menu. To add a page to the website’s menu, just drag that page to the menu pages section above.

2.
You can enter the style editor clicking on the brush
- Site size.
- Colour schemes.
- Backgrounds.
- Font typography.
- Font size. icon to change the following:
Site size
You can change the size of your website reducing its pixels.
Standard size is 1200 px.
Colour schemes:
You can modify the current theme by clicking on the colours box.
Click on each colour and modify them as you wish:
- First colour : background.
- Second colour : menu and footer. buttons.
- Third colour : text and highlighted text .
- Fourth colour : secondary background, titles and
- Fifth colour : lines.
Backgrounds:
You can change your website’s background clicking on ‘site background’.
If you click on ‘site background image’ you’ll be able to upload a new image by dragging and dropping it or clicking to browse from your files.
You can also select the image’s position, if you want it to repeat and what size you want it to have.
Font typography:
Here you can modify your website’s titles, texts and menus font.
Font size:
Here you can modify the size of the different fonts in your website:
- H1 : Titles
- H2 : Subtitles
- H3 : Text that’s slightly larger than average
- P : Paragraphs
- Nav : menu
- Caption : Captions
- Highlight : Highlighted text
- Quote : Quotations

3.
All the different options to add elements to your site can be found in
“ Add elements ” is divided in four categories: the section
3.1. Content
3.2. Images
3.3. Structure
3.4. Social
We recommend you to add structures first to your site and then elements. If you do it the other way round, you won’t be able to add structures after the elements.
3.1. CONTENT
Spacer
Description: The spacer, as its name shows, allows to add spaces between the different elements.
Tip: When you drop this element, its toolbar will open automatically and you’ll be able to adjust the size of the space. You won’t be able to see the space size until you stop at a given value.
Text
Description: Text blocks are just text boxes that you can place anywhere in your website. They are used whenever you need to add text which isn’t a title.
Tip: Predetermined text will appear automatically where you drop the text box. If you click on it twice, a set of tools will appear which will allow you to modify the text characteristics.
- You can move the menu and place it wherever you like.
- You can modify the text font:
Size of the font: h1 : Very big text or titles h2 : Slightly smaller text than the titles or subtitles h3 : Slightly bigger text than normal text p : Paragraphs pre : Predesigned style
Bold
Italics

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 t he 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 e-mail 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 e-mail, 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.
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 e-mails 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 righ t. 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.
3.2. IMAGES

Add single images, a gallery or a video using this block.
Image
Description: Place an image wherever you like.
Tip: Drag and drop this image block. A grey line will appear automatically and a box with the image of a camera will appear. You can drag images and drop them there, or click on it to search from your files.
Other options
- Strech image to the container: The image will automatically adjust to the container where it is. If this option is not selected, the full image will be shown, although it is possible that size with respect to the original file varies.
- Open in lightbox: This option opens the image in a larger size when clicked upon.
You can change the image at any time selecting the icon.
- Link to the image: You can add an external link to the image that will redirect whoever clicks on it to another section, take them to an external website, or allow them to download a file. Just fill in the options shown in the different tabs to configure it.
Image information
In this section you can add a title and a description to the image. Click on the information button to edit them. You can also choose the ‘caption’ option if you’d like the title and description to appear over the image. Remember to click on the icon to save the changes.
Gallery
This block allows you to add several images at the same time and create an image gallery on your web page. When you drag and drop the ‘ Gallery ’ block, the following box will appear from where you will be able to choose the type of gallery you prefer: “ Grid ” , “ Stacked ”, “ Slider ”, “ Slider + ”.
Gallery settings
Once the style of the presentation is selected, drag images to the camera picture and drop them there, or click on it to search files from your computer.
Settings of each image in the gallery
You can edit the settings of each image, like title, links and description, clicking on the settings button that appears when you place the mouse over the image.
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 to have the same size. This option is your images reco mmended 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 you want to see. one
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.
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.
3.3. 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.
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.
3.4. 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 4 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.
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 dropdown 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.
This option allows you to undo or redo the latest changes on your website.
This option allows you to undo or redo the latest changes on your website.