Maquetación de Páginas con Bloques de Gutenberg y WooCommerce

Curso de Creación de Tiendas en Línea con WooCommerce

Contenido del curso

Primeros pasos en WooCommerce

Administración de productos

Diseñando la tienda

Configurando elementos de la tienda

Cofigurando pasarela de pago

Finalizar el curso

29
Examen final del curso de WooCommerce
00:49 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:01

Maquetación de Páginas con Bloques de Gutenberg y WooCommerce

Curso de Creación de Tiendas en Línea con WooCommerce

Clase 17 de 29

Clase 17 / 29

Recursos

Diseñar una página de inicio atractiva en WooCommerce no requiere conocimientos de programación. Gracias a los bloques de Gutenberg, el editor visual nativo de WordPress, es posible agregar imágenes, productos destacados y catálogos completos con apenas unos clics. A continuación se explica paso a paso cómo construir una portada funcional que muestre tus productos de forma profesional.

¿Cómo agregar una imagen de portada con bloques nativos de WordPress?

Una vez dentro de la página de inicio que se creó previamente, el editor muestra un espacio vacío con la leyenda "empieza a escribir o teclea para elegir el siguiente bloque" [0:22]. Al hacer clic en el ícono de agregar bloque, se selecciona el bloque de imagen, que es un bloque nativo de WordPress.

Para insertar la imagen existen tres opciones:

Biblioteca de medios: seleccionar entre las imágenes ya subidas.
Insertar desde URL: traer una imagen alojada en una página externa.
Subir: cargar un archivo desde tu computadora.

Una vez cargada la imagen, el panel derecho permite ajustar su tamaño: thumbnail, medio, grande o completo [1:22]. En el caso de un banner de portada, lo ideal es dejarlo en tamaño completo. También se pueden aplicar estilos como bordes redondeados o el formato por defecto.

¿Por qué es tan importante el texto alternativo en las imágenes?

El texto alternativo cumple tres funciones fundamentales [1:42]:

Mejora el posicionamiento orgánico (SEO), porque Google lo utiliza al indexar la página.
Permite que las imágenes aparezcan en las búsquedas de Google Imágenes, generando tráfico hacia tu tienda.
Los readers que utilizan personas no videntes se apoyan en este texto para describir el contenido visual.

Completar siempre este campo es una práctica que impacta directamente en la visibilidad de tu tienda.

¿Qué diferencia hay entre actualizar y usar la vista previa?

WordPress ofrece dos formas de revisar los cambios [2:30]. Al presionar Actualizar, los cambios quedan visibles para cualquier visitante. En cambio, la vista previa muestra las modificaciones solo para quien está editando, sin que el cliente las vea. Esto resulta muy útil cuando se está diseñando y no se quiere publicar contenido a medio terminar.

¿Cómo mostrar productos de WooCommerce en la página de inicio?

Debajo de la portada se pueden agregar bloques específicos de WooCommerce. Al hacer clic en el botón de agregar nuevo bloque y buscar la sección de WooCommerce, aparecen múltiples opciones [3:12]:

Categorías y categorías destacadas.
Productos destacados.
Productos seleccionados manualmente.
Productos más vendidos.
Lista de categorías, buscador y valoraciones.

El bloque todos los productos muestra el catálogo completo, pero se puede configurar para limitar la cantidad. Por ejemplo, establecer tres columnas y una sola fila genera automáticamente un paginador que permite al usuario recorrer los productos [3:42].

Si se prefiere un control más preciso, el bloque de productos seleccionados manualmente permite buscar artículos específicos por nombre y mostrarlos juntos [4:14]. Desde el panel lateral se configura la cantidad de columnas y la visibilidad de elementos como el título, el precio, las valoraciones y el botón de agregar al carrito.

¿Qué es un producto destacado y cómo configurarlo?

El bloque de producto destacado presenta un artículo con su imagen de fondo, descripción corta y título en un formato visualmente llamativo [5:08]. Al seleccionarlo desde la sección de WooCommerce, se elige el producto deseado y el bloque se genera automáticamente.

Las opciones de personalización incluyen:

Color de fondo: para adaptar la estética al diseño del sitio.
Opacidad: controlar la transparencia de la capa sobre la imagen.
Posición de la foto: ajustar el centrado, que por defecto conviene dejar en cincuenta por ciento [5:42].

Aunque inicialmente el diseño puede verse un poco compacto, al configurar la plantilla o template se ajustarán los estilos para lograr un resultado más pulido.

Ahora que conoces estas herramientas, el reto es crear tu propia sección de ofertas en la página principal utilizando estos mismos bloques y compartir el resultado en los comentarios.