• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Crear un timeline con el editor de bloques de WordPress y un poco de CSS

Descubre en este tutorial cómo crear una línea del tiempo o timeline con el editor de bloques de WordPress y un poco de CSS.

El editor de bloques de WordPress cada vez es más potente y, si además lo combinas con estilos personalizados, puedes conseguir resultados muy vistosos.

En este tutorial vas a ver cómo crear un timeline o línea de tiempo que muestra distintos hitos, objetivos o lo que quieras.

Este es el resultado final:

resultado timeline creado editor bloques css
Resultado final del timeline

¿Te interesa? Vamos allá.

Pasos para crear un timeline con el editor de WordPress

1. Crea la estructura de bloques y añade las clases CSS

En primer lugar tienes que crear la estructura de bloques. Lo más importante en este caso son los bloques de grupo, hay uno que engloba a todos los bloques y otro que engloba el contenido.

La estructura es la siguiente:

  • 1 bloque de grupo (clase de CSS = timeline)
    • 5 bloques de grupo (clase de CSS = timeline-content)
      • 5 bloques de encabezado (H2)
      • 5 bloques de párrafo

Pero lo vas a ver aún más claro con esta captura de pantalla:

Añadir la clase timeline al grupo que engloba a todo

En el primer bloque de grupo (que es el que engloba a todo el contenido), ve al apartado de «Avanzado» y añade timeline en «Clase(s) CSS adicional(es)».

A continuación, haz lo mismo pero para los grupos que contienen el contenido (el encabezado y el párrafo), y en ese caso utiliza la clase timeline-content:

Añadir la clase timeline-content al grupo de contenido

Una vez lo hayas terminado, si quieres puedes convertirlo en un patrón directamente en el editor de bloques.

De hecho, si quieres ahorrar tiempo e importar directamente el bloque reutilizable puedes, descargar este fichero JSON e importarlo en tu instalación de WordPress.

Puedes hacerlo desde el editor de bloques, en los 3 puntos superiores de arriba a la derecha en Herramientas > Gestionar bloques reutilizables:

2. Personaliza el CSS de la línea de tiempo

Ahora solo te falta asignar los estilos para que luzca tal y como deseas.

Para ello, introduce este bloque al final de style.css:

Para ver este código y los otros 1867 snippets de esta web,
identifícate o suscríbete aquí.

Gracias a estas líneas de CSS personalizas los estilos del timeline para que se muestre como en el ejemplo.

resultado timeline creado editor bloques css
Resultado final del timeline en escritorio

También incluye los estilos para que se adapte correctamente a dispositivos móviles:

Resultado final del timeline en móvil

Obviamente, puedes modificar lo que quieras del CSS para que se ajuste a tus necesidades.

3. Personaliza los colores en el editor de bloques

La ventaja de usar el editor de bloques es que puedes modificar el color de fondo y el texto del grupo que engloba al contenido de cada hito (timeline-content) directamente.

Este es un ejemplo de las modificaciones que puedes realizar desde el editor:

Cambio de colores del timeline desde el editor

que daría este resultado:

Resultado del cambio de colores del timeline desde el editor

Conclusiones

Ahora ya sabes cómo crear una línea de tiempo usando el editor de bloques y un poco de CSS.

Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉

CSS Editor de bloques WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?