Una de las formas más interesantes de mostrar información cronológica es con una línea de tiempo. Ya sean instrucciones paso a paso, una lista de experiencia para un currículum, una lista de proyectos para un portafolio o incluso publicaciones de blog, las líneas de tiempo pueden hacer que la información sea visualmente atractiva. Puede crear sus propias líneas de tiempo dentro de Divi Builder usando un complemento llamado Divi Timeline Module.
Divi Timeline Module , que es un complemento de terceros de Tortoise IT a través de Elegant Marketplace, agrega varios módulos nuevos (el módulo principal y tres módulos complementarios) a Divi Builder para crear dos tipos diferentes de líneas de tiempo receptivas:
- Uno en el que crea contenido para cada punto en la línea de tiempo. Cada elemento de la línea de tiempo puede tener su propio contenido, enlaces, colores, fuentes, íconos, etc.
- Uno que usa su contenido existente de páginas, publicaciones, medios o proyectos.
En esta descripción general, explicaré paso a paso la creación de ambos tipos de líneas de tiempo y luego mostraré un ejemplo de creación de una página de blog. Para esta descripción general, estoy usando imágenes gratuitas de Unsplash.com. Empecemos.
La instalación es sencilla. Simplemente cargue el complemento y actívelo como lo haría con cualquier complemento. No se requiere ninguna otra configuración.
Creación de una línea de tiempo
Hay cuatro módulos: (Publicación): Vertical , Contenido , Imagen destacada y Vertical . Aunque funcionará con diseños de varias columnas, los diseños de una sola columna funcionan mejor. Línea de tiempo – Vertical o Línea de tiempo (Publicaciones) – Vertical se utilizará dentro de las páginas. El resto se utilizará para crear un diseño.
línea de tiempo verticales
Agregue el módulo Línea de tiempo – Vertical a una fila de una sola columna.
En la Configuración general, podemos agregar un nuevo elemento de la línea de tiempo, proporcionar un título para la línea de tiempo y elegir el color de la línea de tiempo. Haga clic en Agregar nuevo elemento de la línea de tiempo para crear cada uno de los elementos de la línea de tiempo.
Al hacer clic en Agregar nuevo elemento de la línea de tiempo , se abre un editor de contenido completo con texto, medios, etiquetas, mostrar más botón, icono, color de icono, color de fondo y animación de imagen/icono. También incluye todas las configuraciones de diseño avanzado estándar , así como CSS personalizado .
Agregue tantos elementos de línea de tiempo como desee. Puede ver aquí que agregué cinco elementos y cambié el Color de la línea central a verde. Dentro de los elementos de la línea de tiempo, seleccioné íconos y colores para cada elemento.
Resultado vertical de la línea de tiempo
Aquí está la línea de tiempo rápida que hice. Tiene cinco elementos, cada uno con su propio contenido e íconos. El color que elegí para la línea también se agregó en la parte inferior de las ventanas de contenido. He agregado una imagen de fondo a la sección que contiene el módulo.
Por supuesto, al usar la Configuración de diseño avanzada, el módulo se puede diseñar para que coincida con la página, por lo que no es necesario que tenga un fondo blanco o estas fuentes.
Esta es una excelente opción para pasos numerados de instrucciones, currículum, lista de productos, cartera, etc.
Publicar línea de tiempo
También puede crear una línea de tiempo a partir de su contenido. Esto incluye publicaciones, páginas, medios o proyectos. Su funcionamiento puede ser un poco complicado, pero es fácil de crear.
Tendrás que hacer dos cosas:
- crear un diseño
- Crea la página y elige ese diseño.
Todos los módulos necesarios para crear el diseño y la página están incluidos. Vamos a crear un ejemplo usando publicaciones de blog de muestra.
Crear un diseño
Primero, crea un diseño. En el tablero, ve a Divi , Biblioteca Divi y selecciona Agregar nuevo . Asigne al diseño un nombre que tenga sentido para usted (elegí Diseño de línea de tiempo posterior). Seleccione Diseño como Tipo de plantilla . Deje Global sin marcar . Haga clic en Enviar .
El diseño que cree mostrará las publicaciones (o el tipo de publicación que elija). Piense en esto como si creara su propio módulo de blog, solo usted puede diseñar el diseño de las publicaciones. No es eso, pero ese ejemplo me ayudó a entenderlo fácilmente. Bueno, es algo así, pero no realmente. Hacia adelante.
Este diseño se crea utilizando los módulos Contenido de la línea de tiempo , Imagen destacada y Título de la publicación que se incluyen en el complemento.
Para crear el diseño, elija un diseño de dos columnas y coloque el módulo Línea de tiempo – Imagen destacada a la derecha, y los módulos Línea de tiempo – Título de la publicación y Línea de tiempo – Contenido a la izquierda. Por supuesto, es posible que desee jugar un poco con los diseños, como usar solo la imagen o el título, o colocarlos en diferentes configuraciones, pero primero construyamos el diseño normal.
Nota: estos módulos no se usan dentro de una página como la mayoría de los módulos de Divi Builder. Están destinados a ser utilizados dentro de un diseño que será llamado por el módulo Línea de tiempo (Publicaciones) – Vertical .
Este es el diseño tal como se ve en el Divi Builder. Como era de esperar, cada uno de estos módulos tiene sus propias opciones, que incluyen Configuración general , Configuración de diseño avanzado y CSS personalizado .
Estoy usando un diseño de 1/3, 2/3 pero 1/2, 1/2 también funciona. Dependerá en parte del tamaño de la imagen destacada que desee utilizar y la cantidad de contenido que desee mostrar, así como de otras configuraciones, como los tamaños de fuente.
Una vez que haya colocado sus módulos y elegido todas sus configuraciones, seleccione Actualizar a la derecha debajo de Publicar .
Veamos más de cerca cada módulo.
Módulo de imagen destacada
El módulo de imagen destacada hace exactamente lo que esperas: muestra la imagen destacada de una publicación. Incluye un cuadro desplegable donde puede elegir el tamaño de la imagen. También incluye texto alternativo, título, abrir en lightbox, enlace URL, abrir en la misma ventana o pestaña nueva, animación, eliminar el espacio debajo de la imagen, alineación, deshabilitar para dispositivos y etiqueta de administrador.
Elijo un tamaño de imagen mediano y desactivo la animación.
Módulo de título de publicación
El módulo de título de publicación le permite vincular al contenido y cambiar la etiqueta de administrador y establecer la configuración de CSS. Recomiendo dejar la configuración de Enlace a contenido establecida en Sí . Dejé el resto establecido en sus valores predeterminados.
Módulo de contenido
El módulo de contenido le permite elegir mostrar expertos o contenido y mostrar un botón Leer más . Lo configuré para mostrar un extracto y el botón leer más.
Crear la página
Cree una nueva página con Divi Builder y suelte el módulo Línea de tiempo (Publicaciones) – Vertical en un diseño de una sola columna.
Línea de tiempo (Publicaciones) Configuración del módulo vertical
Este módulo llamará al diseño que creó. Aquí tiene muchas opciones que incluyen título, diseño, color de línea central, ícono para los elementos en la línea de tiempo, mostrar números o íconos, color de ícono/número y color de fondo, animación, paginación, tipo de publicación, número de publicaciones para mostrar, desplazamiento de publicación (con qué publicación comenzar), taxonomía y etiqueta de administrador.
Para llamar al diseño que creó, selecciónelo de la lista desplegable llamada Diseño de bucle . Desplácese hacia abajo y elija Publicaciones como Tipo de publicación para mostrar las publicaciones del blog.
Una vez que haya hecho todas sus elecciones, publique la página.
Publicar resultado de la línea de tiempo
El resultado es una página de blog con mis últimas publicaciones en una línea de tiempo. Coloqué la línea de tiempo sobre una imagen de fondo (la imagen se agrega a la sección). Con este módulo los iconos son globales. Configuré la línea de tiempo en azul con un fondo de icono marrón e iconos azules. El módulo de publicación se puede diseñar aún más para que coincida con la página usando la Configuración de diseño avanzada .
Un ejemplo de blog
La línea de tiempo se puede utilizar dentro de otros diseños. Quería crear un diseño de blog que mostrara algunas publicaciones en la parte superior y luego el resto dentro de una línea de tiempo.
Creé un diseño en una sola columna con la imagen en la parte superior, el contenido en el medio y el título en la parte inferior.
Luego creé una página con un módulo Blog y el módulo Línea de tiempo (Publicaciones) – Vertical . Configuré el módulo Blog para mostrar tres publicaciones en una cuadrícula. Configuré el módulo Línea de tiempo para que tenga un desplazamiento de 3, por lo que ignorará las publicaciones que mostrará el módulo Blog y comenzará en la publicación número 4. Coloqué un módulo de Texto entre ellos con un mensaje que alerta al visitante que el contenido debajo del blog Las publicaciones siguen siendo parte del blog.
Resultado de la página de blog
Aquí está la página del blog. El resultado es un diseño limpio que guía al lector a través del contenido. Por supuesto, esto no tiene que ser solo una página de blog. Esto también podría usarse para mostrar proyectos para una página de cartera, obras de arte, servicios, etc.
Pensamientos finales
Las líneas de tiempo son excelentes elementos de diseño para mostrar datos cronológicos o numéricos. Divi Timeline Module agrega esta funcionalidad a Divi Builder, proporcionando una manera fácil de crear líneas de tiempo personalizadas o usar su contenido, como páginas, publicaciones, medios o proyectos para crear líneas de tiempo cronológicas para mostrar dentro de sus diseños.
El complemento es fácil de usar y todas las configuraciones de diseño que esperaría de cualquier módulo Divi están aquí. No lleva mucho tiempo aprender y crear los diseños y las páginas es tan rápido y simple como usar Divi Builder. Si desea agregar una línea de tiempo a su sitio web, Divi Timeline Module es una excelente opción.
También tienes otros complementos de línea de tiempo en el mercado para que puedas ver cuáles tienen las características que estás buscando.
Nos gustaría saber de usted. ¿Ha utilizado el módulo de línea de tiempo Divi? Cuéntanos tu experiencia en los comentarios.
Imagen destacada a través de Ollie The Designer / shutterstock.com