Cómo crear una línea de tiempo en WordPress con Elementor

Las líneas de tiempo proporcionan una forma visual de mostrar eventos, hitos o pasos en un orden cronológico. Ayudan a presentar información en un flujo lineal que facilita a los visitantes y usuarios comprender la secuencia de eventos o procesos. Usandolos, puede mostrar el viaje de su empresa, una hoja de ruta de proyecto o una historia personal con claridad.

Agregar una línea de tiempo a WordPress puede mejorar la experiencia del usuario al hacer que el contenido sea más atractivo y más fácil de seguir. Es por eso que el uso de plazos se ha convertido en una tendencia en muchos sitios web. Elementor es un complemento tan fácil de usar que puede usar para crear y agregar plazos a sus publicaciones y páginas de WordPress con un nivel extremo de personalización.

En este artículo, le mostraremos una guía paso a paso sobre cómo crear una línea de tiempo en WordPress con Elementor. Antes de eso, cubriremos algunas partes teóricas con respecto al tema de hoy.

Tipos de plazos y sus casos de uso

Hay dos tipos de plazos: horizontales y verticales. Cada uno tiene casos de uso específicos que agregan valor a un sitio web de manera diferente. Exploremoslos y sus casos de uso en la discusión a continuación.

1. Línea de tiempo vertical

Una línea de tiempo vertical muestra eventos e información de arriba a abajo, generalmente a lo largo de la izquierda o centro de la página. Es un formato amigable con el desplazamiento que funciona sin problemas en los dispositivos de escritorio y móviles. A medida que los usuarios se desplazan por la página, siguen el orden cronológico en un diseño limpio y legible.

Casos de uso para líneas de tiempo verticales:

• Historia de la empresa o viaje de crecimiento
• Reanudación o destacados de carrera
• Serie de publicaciones de blog o progresión del artículo
• Explicaciones del proceso paso a paso
• Hitos de desarrollo de productos

2. Línea de tiempo horizontal

Una línea de tiempo horizontal muestra eventos de izquierda a derecha, siguiendo un formato de desplazamiento lateral o deslizante. Por lo general, se usa donde el espacio es más ancho que alto. Este formato es mejor para líneas de tiempo más cortas o cuando desea mostrar solo algunos eventos importantes en un diseño amplio y fácil de ver.

Casos de uso para plazos horizontales:

• Proyecto de hojas de ruta o etapas de planificación
• Horario de eventos
• Campañas de marketing o lanzamientos de productos
• Presentaciones de cartera
• Plazos educativos o descripciones históricas

Cómo crear una línea de tiempo en WordPress con Elementor

Como ya se dijo, Elementor es un complemento de creador de páginas de arrastrar y soltar. Pero la triste noticia es que no incluye ningún widget para crear líneas de tiempo. Sin embargo, el complemento tiene muchos complementos por los cuales puede expandir las funcionalidades del complemento Core Elementer.

Happyaddons es uno de ellos. Viene con más de 130 widgets y más de 22 características que pueden superar muchas deficiencias de Elementer. Entonces, al instalar el complemento HappyAddons, puede habilitar más funciones de diseño en su sitio. En muchos casos, ni siquiera necesitará Elementor Pro si tiene Happyaddons.

Ahora exploremos cómo crear plazos en WordPress con Elementor y Happyaddons.

Cómo crear una línea de tiempo horizontal en WordPress

Espero que ya sepas cuál es la línea de tiempo horizontal. HappyAddons tiene un widget de línea de tiempo horizontal , que es completamente gratuito de usar. Por lo tanto, necesita que los siguientes complementos se instalen y se activen primero en su sitio web.

• Elemento
• Happyaddons

Una vez que tenga los complementos instalados y activados en su sitio, comience a seguir los pasos explicados en el tutorial a continuación.

Paso 01: cree una sección en el lienzo de elementor

Abra una publicación o página con Elementor. Cree una sección con su estructura de columna FlexBox deseada para crear una línea de tiempo.

Paso 02: Agregue el widget de línea de tiempo horizontal al lienzo

Encuentre el widget de línea de tiempo horizontal en el panel Elementor. Una vez que lo encuentre, arrastre y reduzca el widget al lienzo.

Verá que el widget de línea de tiempo horizontal se ha agregado al lienzo con un diseño predeterminado.

Paso 03: seleccione un preajuste para el widget

Un preajuste es un estilo o diseño de diseño predefinido que puede aplicar instantáneamente a un widget para una personalización rápida. Si no desea diseñar el widget desde cero, puede seleccionar un preajuste. El widget de la línea de tiempo horizontal viene con seis preajustes.

Seleccione un preajuste que desee para el widget.

Paso 04: Agregue contenido al widget de línea de tiempo horizontal

Expanda la sección de la línea de tiempo . Aquí, obtendrá opciones para agregar contenido al widget. Por defecto, obtendrá cuatro pestañas. Haga clic en cualquier pestaña para expandirlo. Esto abrirá muchos campos donde puede colocar y agregar la información deseada.

Una vez que se expande una pestaña, puede agregar fecha de evento, icono, imagen, resolución de imagen, título y descripción a la pestaña respectiva.

Puede ver que hemos agregado contenido a la sección respectiva del widget horizontal.

De la misma manera, agregue contenido a todas las pestañas de línea de tiempo. Puede ver que lo hemos hecho en la imagen adjunta a continuación.

Para agregar más pestañas al widget, haga clic en el botón + Agregar elemento en la pestaña Línea de tiempo.

Paso 05: Configurar configuraciones para el widget de línea de tiempo horizontal

Una vez que se realiza la parte del contenido, expanda la sección Configuración en la pestaña Contenido. Puede configurar la pestaña HTML Title, alineación de contenido, ocultar la flecha de contenido, habilitar la caja de luz, la velocidad de animación, el número de diapositivas para mostrar, iconos y más.

Estos son tan fáciles de configurar. Esperamos que puedas hacerlos solos tú mismo.

Paso 06: Estilice el widget de línea de tiempo horizontal

Para estilizar el widget, vaya a la pestaña de estilo en el panel Elementor.

Primero, expanda la sección de la línea de tiempo .

Obtendrá opciones para personalizar el grosor de la línea, el color de la línea, el espacio de fecha, la tipografía de la fecha, el color, el icono, el radio de borde, el tipo de borde, el ancho de la frontera, el color de fondo, etc.

Explorarlos y hacer las personalizaciones necesarias requeridas.

Puede ver que hemos hecho algunos cambios en la línea de tiempo horizontal.

Luego, expanda la sección de flechas . Desde aquí, puede personalizar los íconos de la flecha, sus posiciones, tamaños, ancho de borde, radio y más .

De la misma manera, expanda la sección de contenido de la pestaña de estilo. Puede personalizar el radio de borde, el relleno, el espacio entre el contenido, el tipo de borde, el ancho del borde, el color, la sombra, la tipografía y más del widget.

Hacer los cambios necesarios.

Paso 07: Vista previa del widget de línea de tiempo horizontal

Vaya a la página de vista previa y verifique si todo funciona bien o no. Puede ver que nuestra línea de tiempo horizontal de demostración funciona bien sin ningún problema técnico.

Cómo crear una línea de tiempo vertical en WordPress

Si bien HappyAddons le permite crear una línea de tiempo horizontal de forma gratuita, debe actualizarse a la versión premium del complemento para crear una línea de tiempo vertical. Por lo tanto, asegúrese de que los siguientes complementos estén disponibles en su sitio.

• Elemento
• Happyaddons
• Happyaddons pro

Una vez que estén disponibles en su sitio, comience a seguir el tutorial explicado a continuación.

Paso 01: arrastre y reduzca el widget de la línea de tiempo al lienzo Elementor

Escriba la línea de tiempo en el cuadro de búsqueda. Seleccione el widget de la línea de tiempo que no sea la línea de tiempo horizontal. Arrastártelo en el lienzo Elementor.

Se creará una línea de tiempo vertical en el lienzo con un diseño predeterminado.

Paso 02: seleccione un preajuste para el widget de línea de tiempo vertical

Espero que ya sepas qué es un preajuste, ya que ya lo hemos discutido anteriormente. Seleccione un preajuste si no desea diseñar la línea de tiempo vertical desde cero.

Paso 03: Agregue contenido a la línea de tiempo vertical

Expanda la sección de la línea de tiempo . Por defecto, verá dos pestañas. Expanda cualquier pestaña haciendo clic en ella como le mostramos arriba.

Espero que no necesite hablar mucho aquí. Porque puede agregar casi el mismo tipo de contenido a la línea de tiempo del verticulo que pueda hacer en el caso de la línea de tiempo horizontal.

Puede agregar un icono, cambiar el tipo de icono, definir el tiempo, establecer un título, agregar una imagen, etc., para cada sección de la línea de tiempo. Haz las cosas neertas tú mismo.

Complete Agregar contenido a la línea de tiempo. Incluso puede agregar más elementos a la línea de tiempo haciendo clic en el elemento de agregar + como se muestra arriba.

Paso 04: Configurar configuraciones para el widget de línea de tiempo vertical

Expanda la sección Configuración . Puede configurar si se debe mostrar la fecha, la hora, la flecha de contenido y el árbol de desplazamiento . También puede cambiar la etiqueta de título, la alineación del cuadro de iconos, la alineación del árbol y el color de fondo .

Haz la configuración neertas tú mismo. Pero para nosotros, la alineación predeterminada se ve bien. Entonces, nos quedaremos para el tutorial.

Paso 05: Estilice el widget de línea de tiempo vertical

Ven a la pestaña de estilo en el panel Elementer. Puede personalizar todo tipo de contenido y elementos visuales en el widget de esta pestaña.

Primero, expanda el cuadro de contenido . Puede personalizar la tipografía, el color, el color de la flecha, el tipo de fondo, el tipo de borde y el ancho de borde desde aquí. Haz esto.

De la misma manera, expanda la sección de cuadros de icono . Puede cambiar el ancho, la altura, el espacio de la caja y otras opciones relacionadas con los iconos del widget desde aquí. Si está satisfecho con la estilización predeterminada, no toque nada.

Estilice el título del widget si se siente necesario. Puedes ver que hemos cambiado nuestra tipografía.

De la misma manera, personalice la apariencia de la hora y la fecha . Hemos cambiado su color, peso y tipografía.

Finalmente, expanda la sección del botón . Puede estilizar su color de fondo, tipografía de copia y otros .

Paso 06: Vista previa del widget de línea de tiempo vertical

Venga a la página de vista previa y verifique si la línea de tiempo del verticulo funciona bien o no. Hazlo desplazando el widget. Esperamos que funcione bien por su parte como nuestro.

Por lo tanto, puede crear diferentes tipos de secciones de línea de tiempo en su sitio web para presentar maravillosamente varios contenidos.

Cosas que puedes hacer más con Happyaddons

HappyAddons es honestamente un complemento integral. Seguro que te enamorarás de este complemento justo después de usarlo por una vez. Eche un vistazo a las siguientes cosas que puede hacer con el complemento.

a. Use un constructor de temas gratuito

Elementor también tiene un constructor de temas. Pero está reservado solo para los usuarios premium. Pero en el caso de Happyaddons, es completamente gratuito de usar. Usando el generador de temas HappyAddons, puede crear encabezados, pies de página, plantillas de publicaciones de blog y páginas de archivo. Verifique cómo crear una plantilla de publicación de blog con HappyAddons gratis.

b. WooCommerce amigable para

HappyAddons viene con nueve poderosos widgets amigables para el WooCommerce para mejorar su sitio de comercio electrónico. Esos widgets son la cuadrícula de productos, el carrusel de productos, la red de categoría de productos, el carrusel de categoría de productos, el producto único, el mini carro, el carrito, el pago y la barra de envío.

do. Paste de copia de dominio cruzado

Con esta función, puede copiar directamente los mismos widgets, secciones y páginas de un sitio web a otro dominio. Esto puede ahorrarle un tiempo valioso ya que no siempre tiene que comenzar desde cero. El siguiente video explica la característica de copia de copia de dominio del complemento.

d. Diseñar contenido creativo

Con sus widgets como la imagen rondado, el enlace animado, el factor divertido, el grupo de pila de imágenes, la pila de fotos, el botón creativo, el desplazamiento del texto y el icono de Lord, puede crear contenido creativo atractivo para enganchar a los usuarios.

mi. Mostrar información estadística

A diferencia de muchos otros complementos de elementos, este complemento ofrece varios widgets de gráficos por los cuales puede mostrar información estadística y crear publicaciones y páginas infográficas. Aprenda a crear una página infografía con Elementor.

Además de todo esto, hay muchas más cosas que puede hacer con el complemento Happyaddons.

¡Pensamientos finales!

Crear plazos no es algo obligatorio para todos los sitios web. Pero pueden ser necesarios, ya que podrían ser una opción ideal para mostrar cierta información y contenido. Entonces, cada vez que sienta la necesidad de crear una línea de tiempo, esperamos que esta publicación de tutorial llegue a su uso.

Si le ha encantado esta publicación, le solicitamos que nos haga saber a través del cuadro de comentarios a continuación. Además, si tiene alguna consulta con respecto al complemento Happyaddons, puede dejar un mensaje en el cuadro de chat. Nuestro agente de soporte en vivo vendrá a responderle lo antes posible.

Gracias por estar con nosotros hasta el final. Te deseamos un feliz día por delante.