Cómo crear páginas responsivas de categorías de productos con Elementor

Elementor es un potente constructor de páginas de WordPress que facilita la creación de diseños de página personalizados mediante un editor de arrastrar y soltar. En el caso de las tiendas WooCommerce, crear una página de categoría de producto atractiva y adaptable puede mejorar enormemente la experiencia del usuario y aumentar las oportunidades de venta. En este artículo, te explicaremos paso a paso cómo crear páginas de categorías de productos adaptativas con Elementor para que tus páginas se muestren perfectamente tanto en dispositivos móviles como de escritorio.

Primer paso:Instalación y activación de Elementor y su versión Pro

Para empezar a crear páginas personalizadas de categorías de productos de WooCommerce, necesitas instalar Elementor y su versión Pro. Aunque la versión gratuita de Elementor es potente y requiere Versión Propara desbloquear WooCommerce y funciones avanzadas.

Paso 2: Crear una nueva página y añadir una plantilla de categoría de producto

1. Página nuevaEn el panel de control de WordPress, vaya a Páginas > Añadir nueva página.
2. Nombrar la páginaNombre de la página, por ejemplo "Clasificación de los productos"u otro nombre apropiado y, a continuación, haga clic en el botón Edición con Elementor Botón.

3. Seleccione una plantillaUna vez que esté en el editor de Elementor, haga clic en el botón Ajustes (icono de engranaje)Selección diseño de página para "Lienzo Elementor" para asegurarse de que la página se construye desde cero.

Paso 3: Añadir módulo de categoría de producto

1. Añadir título de categoríaarrastrando y soltando Rúbrica añada un título de página como "Nuestras categorías de productos". Las fuentes, tamaños y alineaciones pueden modificarse en el panel izquierdo para adaptarlos al estilo de su sitio.

2. Insertar Widget de Categoría de Producto WooCommerceElementor Pro ofrece Clasificación de los productos Widgets. Buscar "Clasificación de los productos"y arrástralo y suéltalo en la página. Este widget mostrará dinámicamente todas las categorías de productos que hayas creado en WooCommerce.

3. Visualización personalizada de categorías de productos::
   • En el panel izquierdo, puede seleccionar las categorías que desea mostrar y establecer la forma en que se ordenan las categorías (porNombre, actualización más reciente(etc.).
   • Elija el número de columnas y filas que desea mostrar para garantizar un diseño ordenado tanto en ordenadores de sobremesa como en dispositivos móviles.
   • Personalice las opciones de tamaño de la miniatura, estilo del título de la categoría y visualización del precio.

Paso 4: Configurar el diseño adaptable

Para asegurarte de que tus páginas de categorías de productos se muestran correctamente en todos los dispositivos, Elementor ofrece potentes herramientas de diseño adaptativo.

1. Cambiar al modo sensibleEn la parte inferior del editor de Elementor, seleccione el botón Escritorio, tableta, móvil para previsualizar y personalizar.

2. Ajustar la configuración de estilo::
   • En el modo de dispositivo móvil, asegúrese de que sus categorías se muestran en una o dos columnas, en lugar de tres o cuatro en el escritorio.
   • Cambie el tamaño de los títulos, el texto y las imágenes para que los usuarios puedan leer y navegar fácilmente por las categorías de productos.
3. Ocultar elementos innecesariosAlgunos elementos pueden no ser adecuados para su visualización en dispositivos móviles. Opcionalmente, puede ocultar widgets o elementos específicos y mostrarlos solo en dispositivos de escritorio o móviles.

Paso 5: Añadir filtros personalizados y funciones de búsqueda

Para mejorar aún más la experiencia del usuario, añada filtros de productos personalizados y funciones de búsqueda a sus páginas de categorías de productos.

1. hacer uso de Filtro de productos WooCommerce por WBW plug-in (componente de software)Instala y activa el plugin WooCommerce Product Filter, luego usa Elementor para establecer el término de búsqueda tal vez (máquina) filtro Los widgets se arrastran a las páginas de categorías de productos para ayudar a los usuarios a encontrar más rápidamente los productos que necesitan.

2. Configurar filtros personalizadosFiltros personalizados: las opciones de filtros personalizados del complemento permiten a los usuarios filtrar los productos por precio, marca, color, etc. La apariencia de estos filtros también se puede personalizar para alinearse con el diseño de la página.

Sexto paso:Añadir términos de llamada (CTA)y otras mejoras

En la parte inferior de la página de categorías de productos, añada un texto llamativo Término de llamada (CTA) Widgets como "Comprar ahora"o"Ver más productos" que pueden impulsar a los usuarios a seguir navegando o comprando.

1. Arrastrar y soltar widgets de botones: Will Widget de botones Arrástrelo a la parte inferior de la página y configure su texto con una frase de acción potente, como "Explore toda nuestra gama de productos".
2. Añadir banner promocional: Uso marco de imagen tal vez Imágenes en línea Widgets que añaden un banner promocional llamativo que incita a los usuarios a hacer clic para ver el producto rebajado.

Paso 7: Vista previa y publicación de la página

Una vez completado el diseño de la página y la optimización de la capacidad de respuesta, haga clic en el botón avances asegúrese de que la página está en elEn ordenador, tableta y móvilTodo se visualiza correctamente. Si todos los ajustes y diseños son los esperados, puede hacer clic en el botón escriba a para ponerlo en línea.

resúmenes

Crear páginas de categorías de productos adaptables para WooCommerce con Elementor es tan sencillo como potente. Con la edición flexible de arrastrar y soltar, los diseños personalizados de categorías de productos y las opciones de diseño adaptativo, puedes asegurarte de que tus páginas tengan una gran experiencia de usuario en todos los dispositivos. No te olvides de mejorar aún más la experiencia de interacción del usuario con botones CTA y filtros, lo que en última instancia aumenta las conversiones del sitio web.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres