Una línea de tiempo de un evento de WordPress puede ser un medios visuales muy eficaces para transmitir datos, dando a su página un toque estético e interactivo único. Una línea de tiempo es más a menudo utilizado para mostrar una secuencia de eventos, por lo que es más que adecuado para el historial de su empresa (o banda o relación), los hitos de logros personales o las fechas de lanzamiento del contenido. También puede ser útil si está creando un sitio web para un evento; podría ser una forma novedosa de mostrar su horario. Solo debe asegurarse de que el método elegido sea compatible con su plugin de gestión de eventos, en caso de que esté utilizando uno.
Hay varias formas de crear una línea de tiempo de eventos de WordPress. Nuestra primera sugerencia, como siempre, es utilizar un tema que ya tiene una función de línea de tiempo. Si está trabajando con un presupuesto o no desea cambiar su tema simplemente porque no usa una línea de tiempo, aún puede crear una línea de tiempo. Te mostraremos dos formas de hacerlo: con un bloque de Gutenberg y usando un plugin especializado.
Cómo crear una línea de tiempo de evento con un bloque de Gutenberg
Puede crear una línea de tiempo de evento utilizando el editor de Gutenberg, pero el bloque que necesita específicamente para este propósito no viene incluido; debe instalar Gutenberg Blocks - Ultimate Addons para Gutenberg. Este plugin le proporcionará una multitud de nuevos bloques con los que trabajar, uno de los cuales es el bloque de la línea de tiempo del evento, cuyo uso le mostraremos aquí. Si no sabe cómo instalar un plugin, lo tenemos cubierto.
Una vez que instale y active el plugin, puede crear una línea de tiempo en una publicación o página haciendo clic en el Signo de más para agregar un bloque y encontrar el bloque de la línea de tiempo del contenido. Será en el Bloques de plugins definitivos menú, pero la forma más fácil de encontrarlo sería utilizar la barra de búsqueda.
Ahora verá una línea de tiempo de marcador de posición. Cuando se selecciona este bloque, verá varios menús en el lado derecho. El que está abierto por defecto es Número de items. Lo aumentaremos a 6.
El siguiente es Configuración de fecha. Puede elegir si mostrar las fechas o no, utilizando el Mostrar fecha de publicación palanca. En el Fecha Submenú de formato, puede cambiar el formato de fecha. Dejaremos estos dos controles como están, pero puede configurarlos según sus preferencias. Cambiaremos nuestras fechas para seguirlas en orden cronológico. El formato de fecha en el Configuración de fecha campos es MM / DD / AAAA. En la parte inferior del menú están las configuraciones que puede usar para elegir diferentes colores y cambiar las opciones de tipografía para el texto de la fecha, pero lo dejaremos como predeterminado.
A continuación, tenemos el Diseño submenú. Estos tratan con Orientación de la propia línea de tiempo, Alineación de flechas en relación con el cuadro de eventos y cómo se acumula la línea de tiempo (Apilar), que es relevante para la capacidad de respuesta y el aspecto de la línea de tiempo en tabletas y plataformas móviles. Dejaremos los valores predeterminados.
los Espaciado El submenú contiene opciones para el comportamiento de cada cuadro de línea de tiempo. Puede modificarlos a su gusto, pero encontramos que el espacio entre las cajas está bien, por lo que no vamos a jugar con ellos. En el Elemento de la línea de tiempo submenú puede seleccionar la configuración de tipografía para los elementos de la línea de tiempo. Dejaremos el escenario principal en H4, Levante el Esquinas redondeadas ajuste a 10, haciendo que nuestras cajas parezcan más suaves, y el Relleno a 30, para alargar un poco la línea de tiempo. No cambiaremos el Bóveda o Contenido configuración, pero puede hacerlo haciendo clic en el llave icono. Estos ajustes se refieren al aspecto del texto dentro de los cuadros.
Finalmente, en el Conector submenú, puede cambiar la configuración de la línea de conexión entre los cuadros. Cambiaremos el icono a una jarra de cerveza, pero no cambiaremos la configuración de otros iconos (tamaño, tamaño del fondo, ancho del borde y ancho del conector). los Conector submenú contiene su propio submenú - Configuración de color. Usaremos esto para cambiar el color del conector a malva (# aa86a6) para cambiar el color del Línea, Frontera y Antecedentes cuando están en Atención, dejándolo gris claro en el modo Normal. Sin embargo, todos los colores de los elementos son personalizables, por lo que puede cambiarlos para que se adapten al diseño de su sitio web. No cambiaremos el Configuración de color. Este submenú contiene las opciones de color para sus cuadros y el texto en ellos. Tampoco cambiaremos ninguna de las configuraciones en el Avanzado submenú, ya que no son necesarios para esta demostración. También agregaremos algo de texto a nuestros eventos, para desarrollarlos. Simplemente puede hacer clic para editar cualquier título y descripción en cualquier cuadro.
¡Y la línea de tiempo de su evento con un bloque Gutenberg personalizado está lista!
Cómo crear una línea de tiempo de eventos usando un plugin especializado
Para esta demostración, usaremos Cool Timeline. Esta es solo una de nuestras soluciones preferidas. Si está buscando un plugin, hemos creado una lista de plugins de línea de tiempo de WordPress para que pueda elegir. Primero deberá instalar y activar el plugin Cool Timeline. Si no sabe cómo instalar y activar un plugin, también tenemos un tutorial para eso.
Una vez instalado y activado el plugin, ahora necesitaremos configurarlo. Encuentra la línea de tiempo genial Configuraciones de tu Complementos pantalla. En Configuración general, que gobierna la configuración predeterminada para todas las historias que usará Cool Timeline porque, cambiaremos el Título de la línea de tiempo a Nuestra historia, dejaremos el Etiqueta de título de título como H1, pero puede elegir títulos de H1 a H6. Estableceremos el Número de historias para mostrar al 6, mientras dejaremos el largancia de contenido a 50 palabras. También dejaremos el Descripción de historias y Orden de historias en los valores predeterminados de Corto y DESCfinalizando.
También subiremos una foto gratis como Imagen predeterminada de la línea de tiempo y deja el Pantalla leer más en si, el valor predeterminado. Entonces lo haremos Guardar cambios.
A continuación, en el Configuración de estilo pestaña, dejaremos la Contenedor de fondo en APAGADO. Elegiremos algunos colores para Antecedentes de la historia, Circulo, Línea, primero y Segundo que se ajustará mejor a nuestro tema general. No tocaremos el Estilos personalizados sección. Del mismo modo, no jugaremos con el Configuración de tipografía, que se refieren a la configuración de fuente para Titulo principal, Título de la historia y Publicar Contenido, con la opción añadida de minúscula, mayúsculasy en mayúscula (defecto) Estilo del título de la historia. Similar, Configuraciones avanzadas no nos interesan, ya que, con la versión gratuita con la que estamos trabajando, solo incluyen una descripción general de las funciones premium.
Una vez que hayamos guardado nuestra configuración, navegaremos hasta Historias de la línea de tiempo / Agregar nuevo en el menú del lado izquierdo.
Generaremos cada elemento de la historia por separado, dándole un Título, seleccionando un Cerveza icono en el Menú de iconos de historia, una fecha, usando el Selector de fechasy texto generado aleatoriamente como relleno. Repetiremos esto seis veces, creando seis historias. También puede elegir un Foto principal para cada uno de estos. Lo dejaremos claro para esta demostración.
Una vez que tenga todas sus historias alineadas en una fila, esto es lo que Historias de la línea de tiempo / Todas las historias la pantalla debería verse así.
El plugin Cool Timeline funciona mejor para las páginas. Para crear una página de historia, vaya a Páginas / Agregar nuevo usando el menú del lado izquierdo. Asegúrate de estar usando el editor clásico. Agregaremos un título a nuestra página de historia y usaremos nuestro nuevo Código corto Cool Timeline generador a Agregar código corto Cool Timeline.
Aparecerá el menú de la línea de tiempo. Dejaremos el Diseño de la línea de tiempo de forma predeterminada, establezca Fechas de la línea de tiempo a Ymd, deja el Piel de la línea de tiempo como Defecto, Seleccione SI Para el Icono de historia, selecciona el numero de historias a 6, Seleccione Ninguna para Efecto de animación de historias, Resumen para Descripción de la historiay DESCfinal para el orden de la historia. Tenga en cuenta que esta configuración anulará la General settings en las opciones de configuración del plugin. Cuando termine, haremos clic en Okay.
Esto creará un código corto donde sea que esté nuestro cursor en el campo de texto principal. Y ahora tiene una línea de tiempo llamativa para sus visitantes.
En conclusión
Ahora ya conoce dos formas de mostrar la línea de tiempo de un evento en WordPress. Útil para historias de empresas, cronogramas de logros personales, cronogramas de proyectos y similares, pero también podemos verlo utilizado como una forma novedosa de mostrar horarios de eventos o como una herramienta educativa que muestra eventos históricos o etapas de desarrollo de organismos, cualquier tema que implique progresión. La línea de tiempo de un evento es solo una herramienta de visualización de datos y, con un poco de imaginación, puede hacer muchas cosas diferentes con ella. Entonces, ya sea que esté utilizando un plugin, un bloque de Gutenberg o una función de tema, los cronogramas de eventos son una herramienta útil para conocer su camino.