Divi es un excelente tema para construir tiendas en línea. Se integra perfectamente con WooCommerce y el módulo de la tienda se puede diseñar como cualquier módulo Divi. Hay muchas tiendas en línea creadas con Divi para inspirarte para tu próximo diseño Divi. En este artículo, veremos 13 sitios web de Divi que tienen diseños de tiendas increíbles.
Estoy mirando el diseño del módulo de la tienda dentro del diseño, las páginas de productos individuales, las superposiciones, el uso de imágenes, colores, fuentes, etc. Mostraré una imagen de la página de la tienda o del producto y comentaré lo que me gustó de ella. . Los sitios web no están en ningún orden en particular. Espera hasta el final para ver algunos enlaces que te ayudarán a diseñar tus propios diseños de tienda increíbles.
Este usa Divi Builder para diseñar las páginas de productos, que colocan los productos sobre un fondo con estilo con una sombra enmarcada. Todos los elementos del producto están diseñados con Divi, incluido el texto, los botones, la insignia de ventas y las reseñas. Al hacer clic en la imagen destacada, se amplía la imagen dentro de su cuadro mientras que al hacer clic en la lupa se abre una galería a pantalla completa.
Ver sitio web
2. Líquidos del trono
Este módulo de tienda muestra los productos sobre un fondo negro. Las imágenes del producto también usan un fondo negro y se mezclan perfectamente. Los productos muestran el nombre en blanco y usan un botón verde oscuro que coincide con el estilo del sitio web. Este sitio tiene una de las páginas de productos más singulares que he visto. Muestra una imagen de la caja del producto, pero luego, al desplazarse, revela el producto en paralaje. A medida que continúa desplazándose, la descripción del producto se desplaza sobre el fondo con una superposición para que aún pueda ver el producto debajo del texto.
Ver sitio web
3. Patinete
Quiero uno. Bien, ahora que eso está fuera del camino… Esta página de la tienda muestra productos en cuatro columnas que ocupan todo el ancho del sitio web. Incluyen un ícono superpuesto rojo que coincide con las fuentes y los aspectos destacados del sitio web. Las páginas de productos también se muestran en ancho completo. Me gusta el uso de imágenes grandes y fotografías limpias de productos. Estoy pensando en una Cross Max 20D+.
Ver sitio web
4. Tarta y bayas
Este diseña las fuentes y las superposiciones para que coincidan con la marca del sitio web. El estilo de la fuente incluso continúa en la insignia de venta, que usa un fondo más oscuro y un color más claro de la misma fuente. La superposición muestra un icono con estilo. La página del producto incluye un interesante botón Cómprelo ahora con un icono animado y efectos de desplazamiento degradados.
Ver sitio web
5. En alegría
Este módulo de tienda encaja muy bien con el diseño de la página. Utiliza una superposición azul tenue y abre el producto dentro de una ventana emergente al hacer clic, lo que le permite ver los detalles del producto, hacer selecciones y agregarlo a su carrito sin salir de la página de la tienda.
Ver sitio web
6. Impresionante tienda de negocios
Este coloca el módulo de la tienda sobre el fondo de paralaje. Muchos elementos tienen una imagen destacada que coincide con el estilo artístico del sitio web. También incluye fuentes con estilo y un icono superpuesto a juego. Las páginas de productos también incluyen el fondo de paralaje y las fuentes con estilo.
Ver sitio web
7. La cesta del hermano
Esta página de la tienda incluye enlaces a varias categorías utilizando iconos y texto grandes. También tiene una función de búsqueda. Las páginas de categorías de productos incluyen una barra lateral con estilo que muestra categorías y búsquedas. Los productos incluyen bordes con estilo, un ícono flotante, texto que cambia de color al pasar el mouse y un sistema de clasificación por estrellas. Las páginas de productos se muestran en ancho completo.
Ver sitio web
8. Coco Cuscino
Este diseño incluye muchos elementos con estilo como enlaces a categorías de tiendas. Incluyen imágenes, texto, divisores y botones. Los productos incluyen bordes y botones con estilo. Las páginas individuales se muestran a todo lo ancho e incluyen una sombra de cuadro para las imágenes del producto, un divisor con estilo y un botón con estilo.
Ver sitio web
9. Flores de la casa
Este muestra el módulo de la tienda dentro de una fila estilizada con un efecto de sombra encuadrado. El texto y los botones tienen un estilo negro para que coincida con la marca de la empresa. Los productos utilizan una superposición ligeramente oscura con un ícono de rosa único. Las páginas de productos utilizan un estilo gris para los aspectos más destacados y también incluyen un módulo de tienda con estilo para mostrar productos similares.
Ver sitio web
10. Fabricaciones de madera
Este muestra los productos en la página de inicio como imágenes con un efecto de sombra y un precio. Al pasar el cursor sobre la imagen, se amplía tanto el producto como su sombra. Al hacer clic en un producto, se abre una página del producto con imágenes en un control deslizante y una descripción, y se resalta el icono del producto en el menú de la izquierda.
Ver sitio web
11. Incendios suspendidos Aurora
Este utiliza un diseño limpio para el módulo de tienda de dos columnas, que muestra una imagen grande sobre el título, el texto y el botón de cada artículo. La página del producto muestra un control deslizante de imagen, todo el texto esperado, botones con estilo, alterna para la información de precios por país, video incrustado y otra ronda de alterna para toda la información sobre el producto.
Ver sitio web
12. Orinal en cuclillas
Este módulo de tienda utiliza algunas insignias de ventas interesantes. Las imágenes del producto proporcionan el color e incluyen títulos y una superposición. Las chapas de venta son botones redondeados con el precio y el texto. Las páginas de productos son de ancho completo e incluyen el precio y el estilo de los botones. El área de descripción del producto incluye un control deslizante impulsado por Pixlee.
Ver sitio web
13. Tienda de moda
Este muestra productos y categorías de varias maneras diferentes en la página de inicio, comenzando con el control deslizante en la sección principal. El siguiente es un diseño alternativo con una imagen grande y texto en un lado para la categoría y un módulo de tienda en el otro lado que muestra productos en dos columnas. El siguiente es un módulo de tienda que se muestra en cuatro columnas con un efecto de sombra para cada producto con un botón de compras en la superposición. Las páginas de productos están a todo lo ancho e incluyen algunas fuentes interesantes.
Ver sitio web
pensamientos finales
Ese es nuestro vistazo a 13 sitios web de Divi con increíbles diseños de tiendas para ayudarlo a inspirarse para su próximo sitio web de Divi. Para obtener aún más ayuda con los diseños de su tienda Divi, hay muchos artículos aquí en el blog de ET. Éstos son sólo algunos de los muchos artículos en el blog:
- Cómo agregar la búsqueda de piezas de vehículos a la página de la tienda del paquete de diseño de reparación de automóviles de Divi
- Cómo agregar opciones de venta al por mayor a su tienda impulsada por Divi y WooCommerce
- Cómo agregar listas de deseos de productos al paquete de diseño de la tienda de cosméticos de Divi
- Cómo convertir su tienda en un mercado de múltiples proveedores utilizando el paquete de diseño Divi Photo Marketplace
- Cómo configurar las recolecciones en la tienda para pedidos en línea con el paquete de diseño de cafetería gratuito de Divi y WooCommerce
- Cómo integrar su tienda Etsy en su sitio web Divi
- 5 formas hermosas de diseñar el módulo de la tienda de Divi
- Cómo diseñar páginas de cuenta personalizadas para WooCommerce, EDD, Memberpress y más con Divi Builder
- Cómo diseñar un producto de WooCommerce para mostrar texto en lugar de un ícono al pasar el mouse en Divi
- Primeros pasos con Divi y WooCommerce
Queremos escuchar de ti. ¿Cuáles de estos diseños de tiendas son tus favoritos? Háganos saber en los comentarios.