Turoriales sacados de: https://enclaveproductiva.es/genial-ly-crea-contenido-interactivo-y-visual/ y https://infosal.es/tutorial-completo-genial-ly/
TUTORIAL GENIAL.LY
¿Qué es Genial.ly?
Genial.ly es una herramienta web creada por una empresa española que ofrece un servicio de presentaciones virtuales. Vendría a ser un tipo de herramienta muy parecida a Prezi, pero con un diseño y unas prestaciones mucho más avanzadas. Además, el diseño de la herramienta es muy sencillo e intuitivo, lo que permite dominar la herramienta en muy poco tiempo.
¿Qué puedes crear con Genial.ly?
Como ves en la imagen, existen opciones para cualquier tipo de contenido que necesites crear. Se clasifican en cuatro grupos, y encontrarás plantillas completamente editables para todos los tipos de contenidos. Las opciones son:
- Presentar: Presentación, vídeo presentación, dossier y recursos didácticos.
- Interaccionar: imagen interactiva, media, juego, Quiz.
- Explicar: infografía, procesos temporales, listas, síntesis, mapas.
- Difundir: eventos, ecard, eposter, CV.
El Panel principal de Genial.ly
En el centro verás todos los tipos de creatividad que puedes hacer, tal y como vimos en la imagen al principio.A la derecha hay un menú como el que ves aquí.
Además de la opción “Crear Genial.ly”, podrás ver otras creaciones para inspirarte o bien configurar los elementos de tu marca, si tienes un plan Master o Team. Estos planes te permiten añadir tu marca de agua, logo, tipografías y colores corporativos.
como crear una imagen con Genial.ly paso a paso:
Consejo: No te preocupes si te cargas la plantilla o eliminas algún elemento por error: siempre tienes el botón de “Deshacer” en la esquina superior izquierda.
Además, en cualquier momento haciendo clic sobre “Páginas” en el menú de la izquierda, podrás añadir una página de la plantilla o en blanco. Es decir, en cualquier momento puedes echar mano del original para recuperar lo que necesites. Despues valida haciendo clic sobre “Añadir”.
El apartado “Páginas tiene otras opciones igualmente interesantes. Al hacer clic aquí se abre el menú que te permite navegar entre las diferentes páginas de tu creación. Además de añadir páginas puedes duplicar o eliminar las existentes. Aunque en el ejemplo del tutorial hemos trabajado solamente con una página, conviene que sepas algo más sobre la sección “Páginas“, para cuando quieras hacer creatividades de más de una página, tales como CV, presentaciones…
En este apartado se configura también la forma de navegación entre las páginas. Puede ser de tres tipos:
- Estándar: el usuario ha de hacer clic en las flechitas laterales para cambiar de página
- Vídeo: las páginas de la presentación se van reproduciendo en orden y en bucle. Puedes configurar la duración en pantalla de cada página.
- Microsite: el usuario no tiene flechas de navegación, se mueve por las páginas mediante la interactividad y los botones “Ir a Página X”. Esta opción es muy útil en contenidos educativos.
Escribe el título que quieras darle a tu Genial.ly en el espacio existente para ello en la parte de arriba del lienzo. Pon, por ejemplo, “Fiesta Aniversario”. Y ya podemos editar el contenido. El trabajo se va guardando automáticamente online.
Para editar el texto, haz doble clic sobre él. Cuando lo hagas, verás que se muestra el editor de texto en la barra superior
Puedes cambiar el tipo de fuente, el tamaño, el color… tienes todas las opciones de formato posibles. Haz las ediciones que quieras y cuando termines, haz clic fuera del cuadro de texto para dejar de seleccionarlo.
En este caso he escrito “Estamos de aniversario” y he reducido el tamaño de la letra para que encaje en el espacio disponible.
El botón “Texto” en la columna de la izquierda sirve para añadir más elementos de texto, si quisieras. Las opciones son: Título 1, 2 y 3, párrafo y listas ordenadas y desordenadas. Haz clic ahí cuando quieras añadir nuevos cuadros de texto.
En este caso he añadido un Título 2 y he escrito “¿Te apuntas a la fiesta?” Lo he puesto del mismo color de los demás elementos amarillos que hay en la plantilla. Aquí puedes leer como hago para conocer el código de cualquier color que se vea en la pantalla con la extensión Color Pick Eyedropper. Y para modificar el color de texto, haz clic en el cuadradito que muestra el color en el menú superior.
En la imagen a continuación verás donde se hacen estas ediciones. Ten en cuenta que para ver el editor de texto tienes que tener un elemento de texto seleccionado.
Como añadir, editar, reorganizar y eliminar elementos:
La plantilla original es para hacer una invitación de cumpleaños, pero he decidido “tunearla” un poco para que sirva a mis propósitos de invitación a fiesta de empresa.
1- Eliminar elementos:
Primero he eliminado las ilustraciones relacionadas con “cumpleaños”, solamente he dejado las que sugieran “fiesta”. Así que he eliminado los dibujos de regalos, la corbata…
Para eliminar un elemento, simplemente haz clic sobre él y después sobre el icono de papelera, que está en la esquina superior izquierda.
Consejo: si mantienes la tecla CONTROL pulsada, podrás seleccionar varios elementos al mismo tiempo. Después, al hacer clic en papelera se eliminarán todos a la vez.
2- Reorganizar elementos:
Reorganiza los elementos para que no se vean huecos vacíos. Si apoyas el cursor sobre un elemento y mantienes pulsado el botón derecho del ratón, podrás arrastrarlo por el lienzo para situarlo donde prefieras.
3- Añadir un botón interactivo:
He decidido agrupar toda la información sobre la fiesta en un solo botón interactivo. Para añadir un elemento interactivo, haz clic en “Elementos Interactivos” en el menú de la izquierda: Encontrarás una amplia selección de botones, marcadores e iconos de Redes Sociales. Ahí es donde he encontrado la “i” de información que se ve en la imagen del ejemplo.
Nota: puedes hacer interactivo cualquier elemento que añadas. Fíjate que al seleccionar cualquier elemento del lienzo, se ven sobre él dos botones: son para activar la interactividad y la animación. Más adelante, en el apartado “aplicar interactividad” detallaré como hacerlo.
4- Editar un elemento: modificar color, tamaño…
Para editar el elemento, selecciónalo haciendo clic sobre él. Yo lo he hecho un poco más pequeño (tirando de las esquinas con el ratón) y le he cambiado el color para que hiciese juego con otros elementos de la foto. Para modificar el color de un elemento, solo tienes que hacer clic en el cuadradito que muestra el color del icono en el menú superior, igual que con el texto.
Elige el color que prefieras haciendo clic sobre él. También puedes introducir el código hexadecimal del color como he explicado para el texto, o los valores RGBA.
Nota: Ten en cuenta que no todos los elementos ofrecen la posibilidad de editar el color. Existen algunas ilustraciones que tienen colores fijos. Si al hacer clic sobre el elemento no ves el cuadradito del color en la parte de arriba del lienzo, la edición del color no estaría disponible para ese elemento.
Entre los “Elementos Interactivos”, además de botones, marcadores e iconos de Redes Sociales hay otra opción: Elárea invisible. He decidido utilizarla en la imagen del ejemplo porque me parece una opción muy útil. Sirve para hacer que una zona de la imagen sea interactiva sin mostrar ningún marcador.
En este caso he hecho interactiva la zona inferior de la tarjeta y, al pasar el ratón sobre ella se puede ver la frase “Te esperamos”. Ahora verás como añadir interactividad a un elemento.
Aplicar interactividad
Selecciona el elemento y haz clic en el botón “Interactividad” que aparecerá sobre él.
Verás que tienes cuatro opciones:
- Etiqueta, que es adecuada para añadir poco contenido. Aparecerá cuando el usuario pase el ratón o el dedo sobre el contenido
- Ventana. Es más grande que la etiqueta y permite añadir más contenido. Será visible solamente cuando el usuario haga clic sobre el icono que la contiene.
Tanto la etiqueta como la ventana contienen igualmente un editor que te permite modificar el tipo de letra, el tamaño, el color… También puedes añadir contenido multimedia, tablas, emoticonos… incluso editar el código HTML.
- Ir a Página: para conectar con otra página dentro del mismo Genial.ly. Si solo tienes una página, esta opción aparecerá desactivada.
- Enlace: Te permite añadir una URL y cuando el usuario haga clic sobre el elemento, la página se abrirá en una nueva pestaña.
¿Te das cuenta de lo útil que es la interactividad? Permite mostrar mucha más información en otra capa. Puedes incluir uno o más iconos interactivos en tus imágenes para enlazar a tu blog, a tus Redes Sociales, a otras páginas web… sea cual sea el objetivo de tu Genial.ly le sacarás partido.
Yo he escrito toda la información sobre la fiesta en una ventana. He utilizado el editor para aumentar el tamaño de las letras, y cambiarles el color por otro mucho más llamativo.
Escribe lo que quieras en tu etiqueta y a continuación haz clic en “Guardar”.
La información se mostrará cuando el usuario haga clic sobre el elemento.
Como añadir animación al elemento:
Si has elegido un elemento interactivo no necesitarías hacer nada: los elementos interactivos ya son animados, incorporan animación en su diseño. Es decir, se mueven en la pantalla.
La animación se puede configurar haciendo clic sobre cualquier elemento y después sobre el icono 
La plantilla original venía con animaciones en las botellas de champán, en los textos, las copas y en otros elementos. A mí me saturan un poco las animaciones, así que he eliminado todas, excepto la del botón interactivo: quiero que destaque como llamada a la acción, y para eso será el único elemento animado. Y le he cambiado la configuración de la animación por otra que me gustaba más.
Te explicaré como configurar las animaciones. Para empezar, veamos las diferentes opciones de animación.
Hay tres configuraciones principales: Animación, dirección y efecto.
Animación es para configurar en qué momento quieres que se vea el efecto animado: cuando el elemento entra en pantalla, de forma continua mientras está en pantalla, cuando se le pasa el ratón por encima o cuando sale de pantalla. Si haces clic en cada una de esas pestañas “Entrada”, “Salida”, “Continuo” y “Ratón encima” verás la configuración “Dirección” y los diferentes tipos de efecto disponibles.
Dirección es hacia donde quieres que se mueva el elemento cuando empieza la animación.
Y efecto la forma en que quieres que se mueva.
¡Haz pruebas! apoyando el cursor sobre las opciones, el elemento se moverá para que puedas previsualizar los diferentes efectos.
Ojo, la animación “ratón encima” no resulta sencilla de activar desde el móvil. Piensa en qué dispositivo consumirán los usuarios tu contenido.
En este caso he ido haciendo clic sobre las 4 pestañas y marcando “Ninguno” en todas ellas para eliminar la animación de todos los elementos.
La configuración del elemento “i” ha sido en la pestaña “Continuo”, la opción “Pulso”.
Haz tu selección con los efectos que prefieras y, cuando termines, vuelve a hacer clic sobre el botón animación o sobre el lienzo para cerrar la pestaña lateral.
En cualquier momento puedes revisar qué tal ha quedado tu Genial.ly haciendo clic en “Vista Previa” en el menú superior. Pero has de hacerlo siempre antes de compartir tu Genial.ly para comprobar si la animación y la interactividad funcionan, y para detectar cualquier error.
¿Qué tal ha quedado, todo bien? ¡Pues a compartirlo! Veamos como se hace:
Como compartir o descargar tu Genial.ly:
Puedes compartir tu Genial.ly en tu red social favorita, a través del enlace o bien embebiéndola en tu sitio web. Haz clic en el icono “Compartir” arriba a la derecha y verás 4 pestañas: Enlace, Insertar, Enviar y Redes Sociales.
- En la pestaña ENLACE: se muestra la URL para dirigir al usuario a tu creatividad. Se mostrará en una página social. La página exclusiva es una opción “Premium”.
- INSERTAR: Se muestra el código para insertar tu creatividad en un sitio web como IFRAME o SCRIPT.
- ENVIAR: Puedes introducir varias direcciones de email y tus contactos recibirán un correo con un botón que les mostrará tu creatividad. ¡Pruébalo! el diseño del email es chulísimo.
- REDES SOCIALES: Verás los iconos de varias redes. Haciendo clic sobre cualquiera de ellos podrás compartir cómodamente tu Genial.ly.
Arriba a la derecha encuentras el botón “Descargar”. Es una opción Premium, solo disponible en los planes de pago. Te permite obtener el archivo con tu creatividad de diferentes formas:
Puedes compartir tu Genial.ly en tu red social favorita, a través del enlace o bien embebiéndola en tu sitio web. Haz clic en el icono “Compartir” arriba a la derecha y verás 4 pestañas: Enlace, Insertar, Enviar y Redes Sociales.
- En la pestaña ENLACE: se muestra la URL para dirigir al usuario a tu creatividad. Se mostrará en una página social. La página exclusiva es una opción “Premium”.
- INSERTAR: Se muestra el código para insertar tu creatividad en un sitio web como IFRAME o SCRIPT.
- ENVIAR: Puedes introducir varias direcciones de email y tus contactos recibirán un correo con un botón que les mostrará tu creatividad. ¡Pruébalo! el diseño del email es chulísimo.
- REDES SOCIALES: Verás los iconos de varias redes. Haciendo clic sobre cualquiera de ellos podrás compartir cómodamente tu Genial.ly.
Arriba a la derecha encuentras el botón “Descargar”. Es una opción Premium, solo disponible en los planes de pago. Te permite obtener el archivo con tu creatividad de diferentes formas:
ucho más sobre Genial.ly
-
Ahora ya conoces las principales funciones de la herramienta: como añadir, editar y eliminar recursos y texto, y como configurar interactividad y animación. ¡Pero la Genial.ly tiene muchas más posibilidades!
¿Qué tal si probamos a diseñar una imagen desde cero, empezando con un lienzo en blanco? Así vemos todas las posibilidades de configuración 🙂
Ahora ya conoces las principales funciones de la herramienta: como añadir, editar y eliminar recursos y texto, y como configurar interactividad y animación. ¡Pero la Genial.ly tiene muchas más posibilidades!
¿Qué tal si probamos a diseñar una imagen desde cero, empezando con un lienzo en blanco? Así vemos todas las posibilidades de configuración 🙂
Elegir el fondo
-
El botón “Fondos” del menú de la izquierda da paso a un sub-menú con un montón de posibilidades. Dentro del plan gratis podrás elegir entre varios diseños de fondos disponibles, subir una imagen de tu PC para utilizarla como fondo, poner un fondo de color liso, elegir una foto de la galería Genial.ly o acceder directamente a Pixabay. ¡Es muy cómodo! Además, con un plan Premium podrás crear y guardar tus propios fondos.
Te sugiero que pruebes diferentes fondos para ver cuál queda mejor.
En este apartado puedes configurar el “Tamaño del lienzo“. Puedes elegir las dimensiones que quieras. Genial.ly permite definir tamaños diferentes de páginas dentro de la misma creación. Ten en cuenta que el archivo que descargues al final tendrá unas dimensiones del doble de lo que establezcas ahí. Así que si quieres una imagen de 500 px X 500px, indica 250×250.
OJO: En versiones previas de la herramienta se podían configurar tamaños diferentes en cada página. ¡Ahora ya no es posible! Si quieres imágenes de diferentes tamaños, tendrás que hacer una creatividad nueva por cada tamaño que necesites.
El botón “Fondos” del menú de la izquierda da paso a un sub-menú con un montón de posibilidades. Dentro del plan gratis podrás elegir entre varios diseños de fondos disponibles, subir una imagen de tu PC para utilizarla como fondo, poner un fondo de color liso, elegir una foto de la galería Genial.ly o acceder directamente a Pixabay. ¡Es muy cómodo! Además, con un plan Premium podrás crear y guardar tus propios fondos.
Te sugiero que pruebes diferentes fondos para ver cuál queda mejor.
En este apartado puedes configurar el “Tamaño del lienzo“. Puedes elegir las dimensiones que quieras. Genial.ly permite definir tamaños diferentes de páginas dentro de la misma creación. Ten en cuenta que el archivo que descargues al final tendrá unas dimensiones del doble de lo que establezcas ahí. Así que si quieres una imagen de 500 px X 500px, indica 250×250.
OJO: En versiones previas de la herramienta se podían configurar tamaños diferentes en cada página. ¡Ahora ya no es posible! Si quieres imágenes de diferentes tamaños, tendrás que hacer una creatividad nueva por cada tamaño que necesites.
Añadir una imagen, vídeo o audio:
-
Puedes enriquecer tu creación añadiendo contenido multimedia. Haz clic en “Media” en el menú lateral para ver las posibilidades.
Las opciones para añadir imágenes son: desde tu PC, con una URL, elegir una de la galería de Genial.ly o acceder directamente a Pixabay o Giphy.
Para añadir archivos de vídeo o de audio, necesitas hacerlo a través de un proveedor exterior, pegando la URL. Se está trabajando en otras opciones para subir este tipo de contenidos.
Puedes enriquecer tu creación añadiendo contenido multimedia. Haz clic en “Media” en el menú lateral para ver las posibilidades.
Las opciones para añadir imágenes son: desde tu PC, con una URL, elegir una de la galería de Genial.ly o acceder directamente a Pixabay o Giphy.
Para añadir archivos de vídeo o de audio, necesitas hacerlo a través de un proveedor exterior, pegando la URL. Se está trabajando en otras opciones para subir este tipo de contenidos.
Añadir ilustraciones, iconos, escenarios…
-
Te propongo que investigues el apartado “Recursos”, también del menú lateral. Verás las siguientes opciones
Mapas, formas, ilustraciones, escenarios… ¡Hay recursos para ilustrar cualquier cosa! Además existe un buscador para filtrar las búsquedas con palabras clave, aunque para mí es una de las áreas de mejora de la herramienta.
Te propongo que investigues el apartado “Recursos”, también del menú lateral. Verás las siguientes opciones
Mapas, formas, ilustraciones, escenarios… ¡Hay recursos para ilustrar cualquier cosa! Además existe un buscador para filtrar las búsquedas con palabras clave, aunque para mí es una de las áreas de mejora de la herramienta.
Descubre como manejar la profundidad:
-
Aunque tú ves el lienzo en dos dimensiones, piensa que cada vez que añades un elemento, añades una nueva capa que se superpone a la anterior. Así se va configurando el Genial.ly según vas añadiendo elementos: los primeros que añades quedan al fondo y los últimos cada vez más al frente.
A veces conviene modificar esto. Imagina que pones un elemento grande que te tapa otros más pequeños que añadiste primero.
El icono “Ordenar”
te permite organizar la profundidad de los elementos. Para ello has de seleccionar primero un elemento, después hacer clic en “Ordenar” y elegir si lo quieres poner más al fondo o más al frente:

Te aconsejo que juegues con esta opción hasta manejarla bien, porque puede aportar mucho a tus creatividades.
Aunque tú ves el lienzo en dos dimensiones, piensa que cada vez que añades un elemento, añades una nueva capa que se superpone a la anterior. Así se va configurando el Genial.ly según vas añadiendo elementos: los primeros que añades quedan al fondo y los últimos cada vez más al frente.
A veces conviene modificar esto. Imagina que pones un elemento grande que te tapa otros más pequeños que añadiste primero.
El icono “Ordenar” te permite organizar la profundidad de los elementos. Para ello has de seleccionar primero un elemento, después hacer clic en “Ordenar” y elegir si lo quieres poner más al fondo o más al frente:
te permite organizar la profundidad de los elementos. Para ello has de seleccionar primero un elemento, después hacer clic en “Ordenar” y elegir si lo quieres poner más al fondo o más al frente:
Te aconsejo que juegues con esta opción hasta manejarla bien, porque puede aportar mucho a tus creatividades.
Utiliza el modo Diseñador:
-
Una de las mejores características de Genial.ly para mí es esta: la posibilidad de especificar en valores numéricos la posición de los elementos. ¿Sabes por qué? Porque para conseguir un acabado profesional, muchas veces hay que alinear elementos de forma precisa, y la mayoría de las herramientas solamente permiten hacerlo “a ojo”. Sobre todo si hablamos de herramientas gratis.
Genial.ly permite, incluso con la versión gratuita, editar el tamaño, posición y grado de rotación de cada elemento con valores matemáticos. Encuentras la opción haciendo clic sobre el icono de “Configuración”
de la esquina superior derecha y sobre la opción “Mesa de Trabajo”. Activa el “Modo Diseñador” y cierra la ventana. Verás esto sobre tu lienzo:
Si seleccionas cualquier elemento, verás sus dimensiones en píxeles (alto y ancho), su posición en coordenadas (X e Y) y la rotación en grados.
Para alinear una columna de elementos, todos tienen que tener el mismo valor en “Posición X”. Para alinearlos en fila, el mismo valor en “Posición Y”. No te puedes hacer una idea de la cantidad de tiempo que me ha ahorrado esta característica: ¡es tan difícil hacerlo a ojo!
Una de las mejores características de Genial.ly para mí es esta: la posibilidad de especificar en valores numéricos la posición de los elementos. ¿Sabes por qué? Porque para conseguir un acabado profesional, muchas veces hay que alinear elementos de forma precisa, y la mayoría de las herramientas solamente permiten hacerlo “a ojo”. Sobre todo si hablamos de herramientas gratis.
Genial.ly permite, incluso con la versión gratuita, editar el tamaño, posición y grado de rotación de cada elemento con valores matemáticos. Encuentras la opción haciendo clic sobre el icono de “Configuración” de la esquina superior derecha y sobre la opción “Mesa de Trabajo”. Activa el “Modo Diseñador” y cierra la ventana. Verás esto sobre tu lienzo:
de la esquina superior derecha y sobre la opción “Mesa de Trabajo”. Activa el “Modo Diseñador” y cierra la ventana. Verás esto sobre tu lienzo:

Si seleccionas cualquier elemento, verás sus dimensiones en píxeles (alto y ancho), su posición en coordenadas (X e Y) y la rotación en grados.
Para alinear una columna de elementos, todos tienen que tener el mismo valor en “Posición X”. Para alinearlos en fila, el mismo valor en “Posición Y”. No te puedes hacer una idea de la cantidad de tiempo que me ha ahorrado esta característica: ¡es tan difícil hacerlo a ojo!
Juega con la transparencia de los elementos:
-
Puedes hacerlo con los fondos, con las imágenes y con casi todos los recursos e ilustraciones. Cuando la opción está disponible verás este botón en el menú superior a la izquierda:

¡Trastea con esto también para ganar práctica! Conseguirás efectos de “filtro” muy atractivos.
Puedes hacerlo con los fondos, con las imágenes y con casi todos los recursos e ilustraciones. Cuando la opción está disponible verás este botón en el menú superior a la izquierda:

¡Trastea con esto también para ganar práctica! Conseguirás efectos de “filtro” muy atractivos.
Edita las imágenes que añades a tu Genial.ly
-
Cuando seleccionas una imagen se activan los botones de “Máscaras” y “Recortar”.
Así, además de modificar la transparencia de la imagen como hemos visto, puedes recortarla como prefieras o mostrarla a través de una máscara. ¡Prueba las diferentes opciones! Hagas lo que hagas, es “reversible”. Puedes recuperar la apariencia original de la imagen haciendo clic en “Ninguno”.
Cuando seleccionas una imagen se activan los botones de “Máscaras” y “Recortar”.
Así, además de modificar la transparencia de la imagen como hemos visto, puedes recortarla como prefieras o mostrarla a través de una máscara. ¡Prueba las diferentes opciones! Hagas lo que hagas, es “reversible”. Puedes recuperar la apariencia original de la imagen haciendo clic en “Ninguno”.
Inserta contenido externo:
-
Este icono del menú lateral te permite insertar código o pegar un enlace de un proveedor externo. Puedes insertar un tuit, una publicación tuya en cualquier red social, un mapa de Google, un código de Amazon… ¡Lo que se te ocurra! Estos son los proveedores aceptados.
Este icono del menú lateral te permite insertar código o pegar un enlace de un proveedor externo. Puedes insertar un tuit, una publicación tuya en cualquier red social, un mapa de Google, un código de Amazon… ¡Lo que se te ocurra! Estos son los proveedores aceptados.
