web_timeline Shortcode
El shortcode web_timeline presenta una secuencia ordenada de hitos. Las tarjetas alternan alrededor de un eje central en pantallas más grandes y se apilan por debajo de 768px. Para la creación visual en Gutenberg, usa Timeline y Timeline item.
Los atributos que siguen coinciden con los controles actuales del Page Builder y con la salida pública. Usa la sintaxis en bruto solo para contenido revisado que no pueda mantenerse mediante los controles visuales.
Uso
[web_timeline items="%5B%7B%22title%22%3A%22Launch%22%2C%22description%22%3A%22Our%20first%20release.%22%2C%22date%22%3A%222026%22%7D%5D"]items es un array JSON codificado en URL, normalmente gestionado por los controles de elementos repetibles del Page Builder. El ejemplo se decodifica como [{"title":"Launch","description":"Our first release.","date":"2026"}]. Un shortcode vacío no crea ninguna tarjeta de hito. Se conserva el orden de los elementos.
Atributos
| Atributo | Predeterminado | Valores aceptados | Propósito |
|---|---|---|---|
id |
Vacío | ID HTML único | Destino opcional de enlace directo en el contenedor. |
additional_classes |
Vacío | Clases CSS separadas por espacios | Helpers existentes del contenedor. |
title_wrapper_color |
15 |
Ranura de paleta 1–15, o vacío | Fondo del título. |
title_text_color |
11 |
Ranura de paleta 1–15, o vacío | Texto del título. |
description_wrapper_color |
13 |
Ranura de paleta 1–15, o vacío | Fondo de la descripción. |
description_text_color |
11 |
Ranura de paleta 1–15, o vacío | Texto de la descripción. |
date_wrapper_color |
13 |
Ranura de paleta 1–15, o vacío | Fondo de la fecha. |
date_text_color |
11 |
Ranura de paleta 1–15, o vacío | Texto de la fecha. |
items |
Vacío | Array JSON codificado en URL | Registros de elementos ordenados que se describen abajo. |
Los colores eliminados omiten la clase correspondiente text-main-N o bg-main-N. No generan estilos inline. Este shortcode no expone un atributo independiente de visibilidad por dispositivo.
Campos de elemento
| Campo | Predeterminado | Propósito |
|---|---|---|
title |
Vacío | Título del hito; se permite formato inline seguro. |
description |
Vacío | Descripción con énfasis inline y enlaces. |
date |
Vacío | Etiqueta de texto libre visible, como Primavera de 2026. |
additional_classes |
Vacío | Helpers existentes en el li de este elemento. |
title_tag |
h3 |
Nivel de título semántico: h2, h3, h4, h5 o h6. El tamaño visual sigue siendo H3. |
date_time |
Vacío | Fecha de calendario YYYY-MM-DD válida opcional. Añade un elemento time alrededor de una etiqueta visible no vacía, sin cambiar el orden de los elementos. |
El contenido permite marcado inline pasivo en lugar de scripts, contenido incrustado o controladores de eventos. Las etiquetas de fecha usan párrafos con apariencia H4, no elementos de encabezado. Los metadatos de calendario no válidos se omiten sin eliminar su etiqueta visible.
Personalizar la hoja de estilos
Ve a Settings → POM Theme → Advanced → Custom CSS, expande Shortcode CSS assets y abre Timeline. La comparación muestra el CSS legible generado por el tema actual junto a la fuente editable. Guardar crea un reemplazo optimizado por sitio para la hoja de estilos web-timeline existente; revertir restaura el activo timeline.min.css actual.
El reemplazo cambia solo el CSS. No cambia el web_timeline, el análisis de elementos, títulos, descripciones, fechas, clases de paleta, IDs ni condiciones de solicitud. Dirige el .web-timeline > ul > li a la geometría del elemento, el .content > .h3 a los títulos y el .date > .h4 a las etiquetas, de modo que la hoja de estilos admita todos los niveles de título semánticos y las fechas en párrafos. Mantén los selectores de contenido anidado limitados a sus hijos previstos. Las páginas sin contenido de Timeline no cargan ninguna hoja de estilos de Timeline, y el módulo no tiene JavaScript dedicado.
Verificación
Comprueba el web_timeline con al menos tres elementos para que queden representados tanto los diseños impares como los pares. Revisa el eje central, el orden de los elementos, la tarjeta de contenido, el punto, la fecha, las clases de paleta, el id, el additional_classes y las clases por elemento. Después de editar la hoja de estilos, confirma que una página que contenga el shortcode use el CSS gestionado mientras que una página sin él siga sin cargar ningún activo de Timeline.