Bloques de Gutenberg para tu página de inicio

Crear páginas en WordPress con el editor Gutenberg te permite armar la estructura visual de tu sitio sin tocar código, usando bloques que organizan textos, imágenes, columnas y espaciadores. Si estás construyendo tu página de inicio, dominar estos bloques es lo que marca la diferencia entre un sitio genérico y uno con identidad.

¿Cómo se diferencia una página de una entrada en WordPress?

Las páginas y las entradas comparten el mismo editor, pero cumplen roles distintos dentro del sitio. Las entradas alimentan tu blog; las páginas sostienen el contenido permanente como inicio, contacto o tienda.

Dentro del panel de administración, en la sección Páginas, vas a encontrar una página por defecto: Política de Privacidad. No la borres. Es un template que conviene editar más tarde porque cumple un rol legal importante para tu sitio.

Al darle clic a Agregar página, el editor te ofrece plantillas predefinidas, pero también podés empezar desde cero. Igual que en las entradas, podés sumar una imagen destacada y un título principal.

¿Qué bloques de Gutenberg conviene usar en una página de inicio?

Gutenberg trabaja con bloques modulares y cada elemento de tu página es uno. La clave está en saber cuál usar y cómo combinarlos.

Para insertar cualquier bloque rápido, escribís el carácter slash (/) y aparece el menú flotante. Estos son los bloques que vas a usar más en una home:

• Encabezado, con niveles que van de H2 a H6 según la jerarquía del contenido.
• Párrafo, el bloque por defecto para textos corridos.
• Imagen, con opción de reemplazo si la resolución no te convence.
• Espaciador, para separar elementos visualmente.
• Columnas, para distribuir contenido en layouts proporcionales.
• Botones, con enlaces configurables.

¿Cómo cambio el nivel de un encabezado en Gutenberg? Insertás un bloque de encabezado con /encabezado y en la barra de opciones seleccionás el nivel deseado: H2, H3, H4, etc. Por defecto aparece como H2.

¿Cómo agrego espacio entre bloques sin que WordPress lo ignore?

Un detalle que suele frustrar a quien arranca: si das varios Enter para separar elementos, WordPress no lo interpreta al publicar [03:00]. La solución está en el bloque espaciador.

Lo encontrás dando clic al botón de agregar bloque, scrolleando hasta Ver todos y buscando espaciador. Lo arrastrás al lugar exacto donde querés el espacio y, al hacer clic, se despliega un menú para definir la altura en píxeles. Por ejemplo, 50 píxeles entre una imagen y el siguiente título [03:30].

¿Cómo reemplazo una imagen de baja resolución sin perder el bloque?

Si cargaste una imagen y al ampliarla notás que la resolución es baja, no necesitás borrar el bloque. Le das al botón Reemplazar y subís la versión en mejor calidad [02:18]. El bloque conserva su posición y mientras se carga podés seguir editando otras secciones.

¿Cómo organizar contenido en columnas con Gutenberg?

Cuando una sección combina texto largo con elementos compactos como botones, las columnas te dan jerarquía visual. En el caso de una sección de productos, podés usar la configuración de dos tercios y un tercio: dos tercios para la descripción y un tercio para el botón de acción.

Los pasos son simples:

1. Buscás el bloque columnas y lo arrastrás a la sección.
2. Elegís la proporción dos tercios, un tercio.
3. Pegás el párrafo de descripción en la columna ancha.
4. En la columna angosta, escribís botones y agregás el texto, por ejemplo Tienda.

¿Cómo le agrego un enlace a un botón en Gutenberg? En la configuración del botón, abrís la pestaña Avanzado y buscás la sección link. Ahí pegás la URL de destino. Si la página aún no existe, podés usar un símbolo numeral (#) como placeholder.

Ese numeral funciona como enlace temporal: redirige a la misma página en la que estás, evitando errores mientras terminás de configurar el resto del sitio [04:50].

¿Qué sigue después de armar la página de inicio?

La home es solo el comienzo. Gutenberg ofrece muchos más bloques, desde galerías hasta widgets sociales, y vale la pena explorarlos para encontrar los que mejor se adapten a tu proyecto.

El siguiente paso lógico es trabajar las categorías y etiquetas, dos herramientas que organizan y optimizan la navegación del sitio. Si encontrás algún bloque interesante mientras experimentás con tu página, contalo en los comentarios.