+34 650908608 contacto@creandowp.es
Seleccionar página
Mejora tus diseños con DIVI Essential

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.

 

Mejora tus diseños con DIVI Essential

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

D
Timeline main image

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.

Jan 14
E
Timeline main image

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.

Jan 14
D
Timeline main image

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.

Jan 14

Design 2

Design with Next Timeline Module

[
Timeline main image

Information Gathering

Your content goes heres.

Jan 14
[
Timeline main image

Information Gathering

Your content goes heres.

Jan 14
[
Timeline main image

Information Gathering

Your content goes heres.

Jan 14

Design 3

Design with Next Timeline Module

4
Timeline main image

Design Frame

Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.

01
5
Timeline main image

Art & Design

Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.

02
4
Timeline main image

Creative Idea

Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.

03

Design 4

Design with Next Timeline Module

4
Timeline main image

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.

Ocean Water
4
Timeline main image

Swim The Ocean

Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.

Sea Boat
4
Timeline main image

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.

Smooth Sea

Design 5

Design with Next Timeline Module

L

01

Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.

Creativity
L

02

Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.

Design
L

03

Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.

Drawing

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.

April 15, 2020

Design

Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.

June 20, 2020

Drawing

Lorem Ipsum is simply dummy text of the printing and typesetting the industry. Lorem Ipsum has been the industry's standard.

Agust 02, 2020

Design 8

Design with Next Timeline Module

N
Timeline main image

Minimal Watch & Light

Your content goes here. Edit or remove this text inline or in the module Content settings.

N
Timeline main image

Creative Lighting

Your content goes here. Edit or remove this text inline or in the module Content settings.

N
Timeline main image

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

R

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.

R

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.

R

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.

R

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

7

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.

Jan 14
7

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.

Jan 14
7

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.

Jan 14
7

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.

Jan 14

Design 11

Design with Next Timeline Module

N

21 Jan 2020

Your content goes here. Edit or remove this text inline or in the module Content settings.

M

22 Jan 2020

Your content goes here. Edit or remove this text inline or in the module Content settings.

N

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

Z

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.

Jan 14

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.

Jan 14
f

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.

Jan 14
l

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.

Jan 14

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.

Mejora tus diseños con DIVI Essential

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.

Mejora tus diseños con DIVI Essential

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. 

Mejora tus diseños con DIVI Essential

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.

 

Mejora tus diseños con DIVI Essential

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.

Mejora tus diseños con DIVI Essential
Mejora tus diseños con DIVI Essential

En identifier modificaremos la fecha lateral, y también el identificador dentro del módulo general.

Mejora tus diseños con DIVI Essential

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. 

Mejora tus diseños con DIVI Essential

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.

Mejora tus diseños con DIVI Essential

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.

Mejora tus diseños con DIVI Essential
Mejora tus diseños con DIVI Essential

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.

Mejora tus diseños con DIVI Essential
Mejora tus diseños con DIVI Essential

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.