Seguimos con nuestro repaso de los módulos de Divi Essential, hace poco 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 Timeline.
Divi Timeline
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.
Design 1
Design with Next Timeline Module
Information Gathering
Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here. Edit or remove this text inline or in the module Content settings.
Planning
Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here. Edit or remove this text inline or in the module Content settings.
Development
Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here. Edit or remove this text inline or in the module Content settings.
Design 2
Design with Next Timeline Module
Information Gathering
Your content goes heres.
Information Gathering
Your content goes heres.
Information Gathering
Your content goes heres.
Design 3
Design with Next Timeline Module
Design Frame
Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.
Art & Design
Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.
Creative Idea
Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.
Design 4
Design with Next Timeline Module
The ocean is calling
Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.
Swim The Ocean
Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.
The Beach is Calling
Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.
Design 5
Design with Next Timeline Module
01
Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.
02
Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.
03
Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.
Design 6
Design with Next Timeline Module
Information Gathering
Your content goes here.
Information Gathering
Your content goes heres.
Information Gathering
Your content goes heres.
Information Gathering
Your content goes heres.
Design 7
Design with Next Timeline Module
Creativity
Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.
Design
Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.
Drawing
Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.
Design 8
Design with Next Timeline Module
Minimal Watch & Light
Your content goes here. Edit or remove this text inline or in the module Content settings.
Creative Lighting
Your content goes here. Edit or remove this text inline or in the module Content settings.
Minimal Flower
Your content goes here. Edit or remove this text inline or in the module Content settings.
Design 9
Design with Next Timeline Module
Natural Demand
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module.
Natural Demand
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module.
Real Feel
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module.
Perfect Balance
Your content goes here. Edit or remove this text inline or in the Content settings. You can also style every aspect of this content in the module.
Design 10
Design with Next Timeline Module
Information Gathering
Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here. Edit or remove this text inline or in the module Content settings.
Planning
Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here. Edit or remove this text inline or in the module Content settings.
Development
Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here. Edit or remove this text inline or in the module Content settings.
Testing and Delivery
Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here. Edit or remove this text inline or in the module Content settings.
Design 11
Design with Next Timeline Module
21 Jan 2020
Your content goes here. Edit or remove this text inline or in the module Content settings.
22 Jan 2020
Your content goes here. Edit or remove this text inline or in the module Content settings.
11 Nov 2020
Your content goes here. Edit or remove this text inline or in the module Content settings.
12 Nov 2020
Your content goes here. Edit or remove this text inline or in the module Content settings.
Design 12
Design with Next Timeline Module
UI/UX Design
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply.
Web Design
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply.
Digital Marketing
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply.
Web Development
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply.
Cómo configurar Divi Timeline
Es un módulo sencillo, pero que es necesario conocer un poco para sacárle el máximo provecho posible ya que como todo, ya que hay algún tipo de contenido a editar que no es el típico.
Aquí tenemos los ajustes generales, como vemos tenemos 4 opciones con el nombre de Jan 14, bien el nombre es la fecha que podremos modicar más adelante o bien poner por ejemplo “Día 1”, o el texto que nos apetezca, esto hará de identificador para saber que contenido modificaremos más adelante y también nos dará la opción de poder darle ese aspecto de timeline.
Por lo demás tal como se puede ver no hay muchas más opciones generales.
En los ajustes generales de diseño podremos bastantes elementos, aunque recomendamos solamente tocar unas pocas como “Timeline Bar” y “Otros ajustes” ya que son opciones de diseño que solamente encontraremos en el apartado general , a no ser que queramos dar un estilo homogéneo a todo el módulo.
En la sección de “otros ajustes” encontraremos 3 opciones:
– Controlar el tamaño del icono.
– Si queremos utilizar o no un triangulo.
– El color de ese triangulo.
Este último nos lo permitirá modificar según el dispositivo en el que se vea la web.
Es una opción básica, añadimos un color sólido o un gradiente a la barra del timeline, pero también nos da las diferentes opciones de media query o de hover para hacerlo más dinámico.
Ahora vamos a ver que nos ofrecen los puntos específicos del timeline. Aquí nos vamos a tener que remangar un poco más, bien como vemos las opciones son bastante claras, nos permite bastantes cosas en el apartado, añadir un título, contenido, una imagen, el alt de la imagen utilizar iconos, modificar el identificador y añadir un botón con un enlace.
Son bastantes cosas para un simple apartado por lo que podemos sacarle mucho jugo para poder añadir una gran cantidad de información de una manera dinámica y sobretodo visualmente atractiva para el usuario.
En identifier modificaremos la fecha lateral, y también el identificador dentro del módulo general.
Con esto ya sabemos todas las opciones de contenido que ofrece este módulo, ahora iremos a darle forma viendo que podemos modificar en cada parte exclusiva del mismo ya que otras opciones son generales en todos los módulos de Divi como por ejemplo el título.
Con el apartado que más vamos a jugar en con Timeline, podremos modificar el background, bordes y sombras de la caja que contendrá el punto específico.
En identifier las opciones son bastante sencillas, desde tipografía, peso de la fuente, estilo de la misma, alineamiento, color, tamaño, borde de la caja y sombras tanto del texto como de la caja.
En la pestaña de icono podremos modificar unos poco parámetros que darán forma al círculo de la barra, la posición del icono, el color del mismo, el background, el redondeo (si queremos que sea redondo o cuadrado), configuración de los bordes y la sombra de la caja del icono.
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.