En una entrada anterior hicimos un review por encima de todo lo que ofrecía este Divi Essential, que potencia el core de Divi añadiendo una gran cantidad de nuevos módulos, así que hoy entraremos un poco más en profundidad y vamos a analizar módulo a módulo cada uno de los elementos que nos ofrece.
Pues bien, vamos a comenzar a hablar sobre los módulos creativos de dicho plugin. Éstos módulos son muy útiles a la hora de mostrar la información de una manera creativa y eficiente aportando unas soluciones que nos facilitarán mucho la vida a la hora de crear nuestros proyectos y en esta entrada vamos a comenzar por el elemento Divi Floating Element.
Divi Floating Element
En la web de Divi Essential nos describen del siguiente módulo de esta manera: “Tener elementos flotando alrededor de la pantalla, es una característica muy emocionante para ayudar a captar la atención de sus visitantes.”
Bien nosotros diríamos tras probarlo que más que emocionante, es una opción versátil y sobretodo muy útil para mostrar información relevante de un plumazo. Por ejemplo, tenemos un header en el que quisiesemos poner varias imágenes porque se tocan diversos elementos en el proyecto de un cliente y no queremos utilizar un slider, sino que deseamos sintetizar para mostrar todo de una sola vez, sin lugar a dudas esta es la solución idónea.
A continuación os mostraremos unos ejemplos que nos dan desde Divi Next y así podremos comprender mejor las posibilidades de este sencillo módulo.
SpaceEffect
MusicFor Life
Rocket Station
Cómo configurar Divi Floating Element
Cómo podemos ver es un plugin bien sencillo, pero que nos da muchas opciones visuales, a continuación vamos a mostrar como podemos configurarlo de manera rápida con el último ejemplo que nos proporciona Divi Next.
Al hacer click en el módulo dónde aparece el cohete y el astronauta se nos abrirá el siguiente panel, en el cual veremos que cada imagen aparece como un “floating element” para configurar individualmente.
En los ajustes generales de diseño podremos tocar unas pocas cosas, como configuración global de las imágenes (cosa que para éste módulo al ser tan personalizable no lo recomendamos mucho), posibilidad de modificar el título, y te dirás ¿Porqué título?
Pues bien la respuesta la veremos clara en las capturasque vendrán después de esta, pero el módulo no solamente nos permite jugar con varias imágenes, sino que también nos permite añadir títulos, pero so lo veremos un poco más adelante.
Bien vamos a comenzar por el contenido una vez estás dentro de un elemento de éste módulo.
Hemos hecho para que se vea desde 0, como vemos tenemos dos pestañitas a activar, de las cuales solamente podemos activar una a la vez.
Si activamos “use image” podremos decidir que imagen utilizaremos, en este caso tenemos el cohete, bien seguido también nos dará la opción de añadir un alt que nos permitirá identificar el elemento una vez estemos en el panel global, como si de capas de photoshop se tratase.
Y bien si la opción que elegimos es “use text” simplemente aparecerá un input en el que podremos poner nuestro texto, en este caso es el que se muerta debajo de la ilustración del astronauta.
Configurar animación
Ahora vamos con uno de los puntos fuertes que debemos configurar correctamente para obtener los resultados deseados y son los ajustes de animación.
Como vemos, tenemos unos presets de animación en “Use default animation” dónde podremos decidir que valores utilizar, tenemos una cantidad interesante de presets de animación a utilizar.
- Effect 1: El elemento se mueve de izquierda a derecha mientras va rotando sobre sí mismo
- Effect 2: El elemento va rotando sobre sí mismo mientras va subiendo, pero luego se desplaza a los lados cuándo parece que golpea con un límite en pantalla haciendo un efecto de “frontón”
- Up Down: El elemento se mueve de arriba a abajo
- Move Left/Right: El elemento de mueve de izquierda a derecha
- Pulse: El elemento hace un efecto que simula un latido
- Left/Right: El elemento de mueve de izquierda a derecha a una velocidad diferente d emove, añadiendo algo más de movimiento
- Rotate: El elemento rota sobre sí mismo
- Personalizado: Nos permite crear nuestra propia animación
Configurar animación personalizada
Si seleccionamos personalizado, veremos como en floating effect aparecen los ajustes de animación de use default para configurarlos a nuestro gusto.
Puede parecer un poco complejo, pero es sencillo de configurar, vamos a explicaros punto a punto que toca cada elemento a configurar.
- Horizontal position: Aquí controlamos la posición horizontal del elemento
- Vertical position: Aquí controlamos la posición vertical del elemento
- Animación: Aquí controlaremos el tiempo total que tarda en hacer toda la secuencia
- Dirección del gradiente: Lo que haremos en este ajuste. es controlar la secuencia de la animación, es decir, si queremos que comience normal, que comience del final al principio
- Animation Iteration Count: Con este ajuste controlaremos la cantidad de iteraciones de la animación, si queremos un bucle infinito o si bien queremos una cantidad controlada de las mismas
- Animation Timing Effect: Aquí controlaremos el ritmo de la animación, si queremos que siga un curso líneal (que todo suceda en un mismo tiempo), si queremos que tenga más velocidad al comienzo de la misma o al final
El resto de elementos de diseño son como los de los ajustes globales del módulo Divi Floating Element, por lo que no entraremos mucho en ellos ya que son ajustes que tiene todo módulo.
En definitiva
Esperamos que esta pequeña guía os pueda ayudar a comprender mejor como funciona este módulo y con ello que podáis utilizarlo de una manera eficiente viendo todo lo que ofrece.
Si buscas un plugin para potenciar tu capacidad creativa con Divi, desde CreandoWP te recomendamos sin dudar hacerte con este plugin porque te va a permitir ir un paso más allá en los diseños y funcionalidades, si tienes quieres hacerte con él te dejamos el enlace a su web para que puedas ver todo lo que ofrece.
Próximamente iremos desgranando más módulos de este excepcional plugin y como poder sacar todo su potencial.