Maquetación de Páginas con Bloques de Gutenberg y WooCommerce
Clase 17 de 29 • Curso de Creación de Tiendas en Línea con WooCommerce
Resumen
¿Cómo agregar contenido a tu página de inicio con el editor Gutenberg de WordPress?
Con el editor visual Gutenberg de WordPress, personalizar tu página de inicio es más fácil que nunca. A continuación, te mostraremos cómo añadir imágenes y productos para crear una experiencia más atractiva para tus visitantes.
¿Cómo agregar un banner de imagen en WordPress?
Para empezar, vamos a añadir un banner de imagen que capte la atención de tus visitantes desde el primer momento:
-
Acceder a tu página de inicio: Ve a la sección de "Páginas" en tu panel de WordPress, busca la página de inicio que has creado previamente y haz clic en "Editar".
-
Seleccionar el bloque de imagen: En la página vacía, elige añadir un bloque de imagen. Puedes optar por una imagen de tu biblioteca de medios, insertar desde una URL o subir una nueva.
-
Configuración de la imagen: Una vez cargada, podrás personalizar la imagen. Es esencial añadir un texto alternativo para mejorar el SEO y facilitar el acceso a personas con discapacidades visuales.
- **Texto alternativo**: Este texto es crucial. Por ejemplo, si tu imagen es sobre "Portada Platz eCommerce", usa este texto alternativo para mejorar tu posicionamiento en los motores de búsqueda.
- Visualización previa: Usa la opción de vista previa para asegurarte de que la imagen se ve como deseas sin que los cambios sean visibles para los clientes todavía.
¿Cómo mostrar tus productos destacados con WooCommerce?
Aumenta las ventas visualizando productos destacados en tu página principal. Sigue estos pasos para añadirlos:
-
Añadir una sección de productos: Vuelve a la edición de tu página y utiliza el icono de agregar bloque (+). Elige bloques de WooCommerce y selecciona la opción "Todos los productos" o "Productos destacados".
-
Configurar la visualización: Define cómo quieres que se muestren los productos:
- Número de columnas y filas.
- Filtrados por popularidad o precio.
- Opcional: Muestra u oculta botones de "Agregar al carrito" para que los clientes puedan explorar más antes de comprar.
-
Agregar productos manualmente: Si prefieres mostrar productos específicos, elige "Productos manualmente" y selecciona los de tu interés.
- **Ejemplo de selección manual**:
- Producto: "Remeras"
- Producto: "Zapatillas"
- Combo: "Combo Deportivo"
- Ajustes de producto destacado: Resalta un producto en particular seleccionando "Producto destacado" de los bloques de WooCommerce. Personaliza su apariencia adaptándola al estilo de tu sitio.
¿Cómo optimizar la apariencia de tu página de inicio?
La estética es fundamental para captar y mantener la atención de tus visitantes. Asegúrate de que la presentación de tus productos sea clara, atractiva y coherente con tu marca.
-
Usa opacidades y colores de fondo adecuados: Ajusta estos detalles para que los productos se integren de manera armoniosa en el diseño global de tu sitio.
-
Revisa la previsualización: Haz uso de la función de vista previa para afinar los detalles antes de hacerlo visible para todos.
Siguiendo estos pasos, estarás bien encaminado para crear una página de inicio impresionante que no solo atraiga a tus visitantes, sino que también impulse la interacción con tus productos. ¡Ahora es tu turno! Explora estos bloques y crea una sección de ofertas en tu página principal. Comparte tus resultados y aprende de la experiencia.