MANUAL DE USUARIO: EDITOR Sistema drag & drop... 2 1. Gestor de contenidos... 3 2. Editor de estilo... 5 3. Añadir elementos... 6 4. Deshacer/Rehacer... 13 5. Guardar... 13
Al acceder al visualizador del editor de la website de Zeendo, podemos visualizar en la parte superior una serie de opciones: Usuario: en la parte superior izquierda, se encuentre el botón usuario, en el que si haces clic, te reenvía directamente al apartado de Website de la página principal de Zeendo. Añadir página tienda: al lado del botón usuario encontrarás otro botón que te permite añadir la página de tienda o editarla (si tienes contratado un plan Ecommerce). Para más información sobre cómo editar tú página tienda, dirígete a la guía de usuario E-commerce. Tutorial: en la parte superior derecha, se encuentra el botón tutorial?, con el que puedes visualizar el vídeo tutorial explicando cómo funciona nuestra página web. Configuración: al lado del botón tutorial, se encuentra el botón configuración, en el que, si haces clic, te volverá a redigirir al apartado de Website, pero está vez podrás gestionar los dominios y crear un subdominio nuevo. Podrás comprar el plan que más se adecue a tus necesidades: Basic, Professional, Ecommerce, podrás visualizar las estadísticas de tu página web y utilizar la opción de Google Analytics. Previsualizar: Aquí podrás ver cómo sería el resultado final de tu página web. Publicar: Cuando ya hayas acabado de editar tu página web, ya podrás publicarla. Al hacer clic en este botón, deberás elegir un subdominio (si no lo has elegido antes), y te volverá a redirigir al apartado de Websites para gestionar los dominios y el subdominio. Sistema drag & drop : Con este sistema podrás hacer clic sobre el elemento que desees, bien de entre los elementos de la página o de los archivos de tu ordenador, y arrastrarlos hasta colocarlos en el lugar que desees: dentro de la web o en los espacios correspondientes dentro de los menús de herramientas.
Podrás ver los formatos de estos tipos de letras si entras en Diseño y, dentro de este apartado, en Estilo y tamaño de fuente. - Permite cambiar el color del texto que estés editando. - Permite añadir un enlace. - Herramientas para modificar el párrafo: la alineación del texto y las opciones de lista. - Permite borrar el formato que hayas estado editando. - Permite eliminar el bloque de texto creado. Título Descripción: Los títulos sirven para aportar una mayor visibilidad o importancia a una determinada parte del texto, o como cabecera de un párrafo. Tip: Funcionan exactamente igual que los cuadros de texto, al hacer doble clic aparecen las mismas opciones. Regla Descripción: La regla es una pequeña línea que puedes colocar debajo de textos, imágenes, etc. Tip: Cuando insertas la regla, automáticamente se abre un menú en el que puedes regular el ancho de la línea (cuán larga quieres que sea) y el tipo de línea que prefieras (sólida, con puntos, con guiones, etc.). Además podrás elegir el color que prefieras. Icono Descripción: Con este elemento se pueden añadir iconos prediseñados para hacer la página más dinámica y clara en cada sección. Hay iconos generales, de formulario, moneda, de edición de texto, direccionales, de marca, etc. Tip: Al arrastrar hasta la página aparecen las opciones de este elemento, como por ejemplo cambiar el tamaño del icono. Se pueden usar, por ejemplo, junto a formularios para indicar que el usuario puede bajar un archivo, etc. Botón Descripción: Permite colocar enlaces que lleven a otras páginas, enviar un email o llamar por teléfono. Tip: Al arrastrar el botón hasta el lugar en el que se quiera colocar, se abrirá un menú. En el cuadro para el título se puede colocar el nombre que se quiera dar al botón. Con estilo del enlace se podrá optar entre colocar el botón o únicamente un link directo a lo que se quiera. El contenido permite decidir si se quiere que el enlace haga referencia a una página interna o bien a una externa. Con el tipo de enlace se puede decidir si el botón enlazará con un teléfono, un mail o un link. Además se podrá insertar un archivo descargable. Por último, se podrá elegir si el link al que se va a dirigir se abrirá en la misma página o en una diferente; además de poder alinearlo a la derecha, a la izquierda o en el centro.
Formulario Descripción: El bloque formulario es muy útil para la comunicación con los clientes o para obtener información sobre ellos. Tip: Al arrastrar este elemento, se abrirá un menú en el que se mostrarán las herramientas necesarias para dar estructura al formulario. Con el botón añadir nuevos elementos al formulario se abrirá un nuevo menú en el que se encontrarán distintas opciones para añadir. Una vez completada la estructura, haciendo clic sobre el botón del lápiz se le puede dar un título, personalizar el mensaje de confirmación y elegir la opción de almacenamiento que se prefiera para los correos recibidos. Mapa Descripción: El mapa facilita que los usuarios que visiten la web creada puedan ver dónde está ubicado el negocio. Tip: Tras arrastrar el mapa hacia el lugar que se prefiera y soltarlo se abrirá un menú. Aquí se podrá escribir la dirección, la ciudad y el país; por último, será posible elegir cómo de cerca se quiere ver la ubicación y el tipo de mapa que se prefiere: mapa, híbrido o satélite. Caja Descripción: La caja es una forma rectangular que contiene texto dentro y cuya función principal es la de resaltar aquello que contiene. Tip: Arrastra la caja y suéltala en el lugar que prefieras. Una vez colocada, se abrirá la pestaña que te permitirá modificarla. Al hacer clic en el icono con la rueda se abrirá la barra de herramientas, desde donde podrás cambiar el título y la descripción de lo que escribas. Haciendo clic en el botón que contiene un punto de color podrás modificar el fondo. Podrás modificar el relleno, el largo de la caja y el ancho, y además podrás colocarla centrada, a la derecha o a la izquierda. Por último, con el selector de color podrás cambiar el color de la caja, y su opacidad con la barra alfa. Recuerda que el color del texto será el mismo que el del fondo. Cita Descripción: Utiliza este botón para añadir una frase que te inspire o mencionar las palabras de alguien importante. Tip: Selecciona este icono y arrástralo hasta donde elijas. Una vez colocado se abrirá el desplegable con las opciones donde podrás editar el texto y además colocar el autor. Recuerda que el color del texto será el mismo que el del fondo. HTML Con este bloque podrás insertar cualquier elemento que no esté entre los prediseñados: un iframe, una tabla, un banner, etc. Podrás alinear el código a la derecha, en el centro o a la izquierda.
3.2. IMÁGENES Añade imágenes sueltas, una galería o un vídeo utilizando este bloque. Imagen Descripción: Coloca una imagen en el lugar de tu website que desees. Tip: Al arrastrar y soltar el bloque de imagen aparecerá automáticamente una línea gris y se abrirá una caja con la imagen de una cámara, donde podrás arrastrar y solar las imágenes que quieras añadir, o bien hacer clic para buscar imágenes entre tus documentos. Otras opciones: - Ajustar imagen al contenedor: La imagen se ajustará automáticamente al tamaño del contenedor. Si no se selecciona esta opción, la imagen se mostrará entera, aunque es posible que su tamaño varíe con respecto al del archivo original. - Abrir en lightbox: Con esta opción la imagen se abrirá en grande al hacer clic sobre ella. Podrás cambiar la imagen en cualquier momento seleccionando el icono - Enlace a la imagen: Puedes añadirle a tu imagen un enlace externo que redirija a los usuarios que hagan clic sobre ella a una web externa, a otra sección, o que les permita descargar un archivo. Para ello solo hace falta rellenar las opciones que se muestran en las distintas pestañas. Información de la imagen: Seleccionando el lápiz que se encuentra en la parte izquierda del menú, podrás agregar un título y una descripción a la imagen. Haz clic sobre el botón de información y podrás editarla. Además podrás seleccionar en la opción leyenda dónde quieres que aparezcan el título y la descripción de la imagen. Al acabar solamente hay que hacer clic sobre el icono para guardar los cambios. Galería Este bloque te permitirá agregar varias imágenes al mismo tiempo y construir una galería de fotos en tu página. Tras arrastrar el bloque Galería a la web aparecerá el siguiente cuadro que te permitirá seleccionar el estilo de galería que prefieras: Cuadrícula, Apiladas, Transición, Transición +. Ajustes de la galería Una vez seleccionado el estilo de presentación de las imágenes, arrastra las imágenes hasta donde aparece la cámara o haz clic para buscar las imágenes entre tus documentos. Ajustes de cada imagen de la galería Puedes editar los ajustes de cada imagen como título, links y descripción de cada imagen en el botón con forma de rueda (ajustes) que aparece cada vez que pasas por encima de la imagen.
Configuración de imagen En esta sección puedes editar la información de la imagen, los títulos y los enlaces (externos o a contenido de la misma web), además de poder elegir si quieres que se abra en la misma página o en una nueva. El procedimiento es el mismo que para una imagen individual. Información de la imagen: Cuadrícula Sobre el botón en forma de lápiz podrás editar y determinar la presentación de la galería, cuántas imágenes por fila quieres que aparezcan y si deseas espacio de relleno (y de qué grosor) entre cada imagen. Miniaturas cuadradas Si deseas que todas las imágenes tengan el mismo tamaño, selecciona la opción miniaturas cuadradas. Se recomienda usar esta opción si las imágenes no están editadas y no tienen todas el mismo tamaño. Información de la imagen: Transición El modo transición te permite pasar una a una las imágenes, automáticamente o manualmente. Autoplay: puedes elegir si las imágenes se pasan automáticamente o es el usuario quien debe hacerlo. Controles y mostrar pie de página: Además puedes agregar las opciones controles para que el usuario pueda manejar el paso de fotos manualmente y mostrar pie de página para ver la información de cada foto. Paginación: Esta opción te permite hacer una presentación de fotos seleccionándolas por páginas en la barra inferior que aparece debajo de la imagen, como se muestra a continuación. Miniaturas: Esta opción te permite que visualices en la parte inferior de la imagen que se muestra las otras imágenes en miniatura, para que puedas seleccionar la que quieres ver. Tipo de cargador: Esta opción te permite elegir cómo quieres que se visualice la transición de una imagen a otra, si de forma circular o de barra. Tipo de animación: Esta opción te permite escoger de qué manera cambiar de una imagen a otra de entre las opciones de la lista. Información de la imagen: Apiladas Este formato apila las imágenes que añadas en una columna, ajustando su tamaño al ancho de la columna donde se inserten.
Video Este bloque te permitirá agregar un vídeo alojado externamente para ser mostrarlo directamente en el contenido de tu página. Nota: El ejemplo de esta guía se hace usando un vídeo de YouTube, pero también es posible hacerlo usando un vídeo de Vimeo, solo que las opciones del código de inserción (HTML) pueden ser diferentes. Hay dos formas de ingresar un vídeo en tu web: mediante búsqueda de vídeo en YouTube o usando las opciones de vídeo con inserción de código (HTML). Búsqueda de vídeo en YouTube: En la barra de búsqueda podrás encontrar el nombre del vídeo en YouTube. Selecciónalo y aparecerá automáticamente en el contenido de tu página. En el icono de información encontrarás la opción de inserción de video por código HTML. Opciones de vídeo inserción de código (HTML): En el recuadro de código de inserción podrás copiar el código HTML. Para conseguir este código basta con buscar el vídeo en YouTube y seleccionarlo en la opción insertar en la pestaña compartir este vídeo. 3.3 ESTRUCTURA Los Bloques de estructura permiten dar forma al contenido de tu página. Podrás agregar estructuras de 1 a 6 columnas y hacer que tu web sea más práctica para tus visitantes. Columnas Para agregar una estructura de columnas, simplemente hay que arrastrar el bloque hasta donde se quiera colocar y soltarlo. Una vez colocado se podrán añadir elementos dentro de los diferentes contenedores o columnas: imágenes, botones, textos o también es posible dejarlo en blanco. En la parte de arriba de la estructura aparecerá lo siguiente sobre cada uno de los espacios: Con el botón situado más a la izquierda podrás clonar la columna sobre la que estabas trabajando: imágenes, texto o cualquier cosa que hayas colocado, se duplicará. El botón del centro permite que lo que aparece en ese contenedor no se muestre en la versión móvil de tu web. Por último, con el botón de la derecha (papelera) se elimina el contenedor.
Por el contrario, los botones que aparecen en el lado derecho afectan a toda la estructura, y no solo a un contenedor concreto: El botón superior, en el que aparecen las dos ruedas, permite configurar las filas. Al hacer clic sobre él, se muestra lo siguiente: - La parte superior permite organizar las columnas, es decir, que al arrastrar cualquiera de ellas podrás cambiarlas de posición. También podrás elegir si quieres que el ancho ocupe el 100%, los bloques sin relleno o expandir el fondo. - La opacidad permite modificar el fondo de la estructura, mantenerlo del mismo color o hacerlo más claro u oscuro. - Podrás modificar también el fondo de la estructura arrastrando una imagen que tengas en tu ordenador y soltándola (drag & drop). Además, si seleccionas la opción de rellenar el fondo, la imagen se ajustará. El segundo botón, en el que se muestra un rectángulo con flechas, desplaza la estructura completa hacia arriba o hacia abajo, dependiendo de la parte del botón que se clique. El botón en el que aparecen los dos rectángulos te permite clonar la estructura completa en vertical, es decir, que toda la estructura se reproducirá exactamente igual debajo. El botón gris que contiene la papelera sirve para eliminar toda la estructura. 3.4. SOCIAL NETWORKS Facebook Like Copia la URL de tu página de Facebook en el campo dirección. Con esto redireccionarás automáticamente al me gusta de tu página en Facebook. Layout La opción Layout te permitirá seleccionar cómo quieres que aparezca la opción me gusta. Hay 3 opciones para mostrar este icono en el contenido de tu página: - Standard. - Butón. - Botón de recuento. - Caja de recuento. - Ancho: Con la opción ancho puedes modificar cómo aparece el texto mostrado en la forma estándar para ajustarlo a tus necesidades. Enviar: Si seleccionas el botón enviar aparecerá la opción de compartir el enlace. Mostrar caras: Si seleccionas esta opción podrás ver la imagen de perfil de las personas que han a me gusta.
Google Plus Copia la URL de tu página de Facebook en el campo dirección. Con esto redireccionarás automáticamente al me gusta de tu página en Google+. En anotación puedes seleccionar el tamaño del icono de entre estas 3: - Ninguno (sin anotación) - Burbuja - En línea También puedes elegir el tamaño del botón de la red social: pequeño, mediano, estándar, alto. Twitter Follow Al escoger esta opción se desplegará un menú donde tendrás que introducir el nombre de usuario de tu cuenta en Twitter. A continuación podrás elegir el tamaño del icono: mediano o grande. Por último, elige el tipo de contador: vertical, horizontal o ninguno. También podrás elegir el idioma en el que quieres que aparezca. 4. Deshacer/Rehacer Esta opción te permite deshacer o rehacer los últimos cambios de tu web. 5. Guardar Esta opción te permite guardar los cambios realizados para verlos en tiempo real.