La versatilidad de Divi lo hace ideal para sitios web de comercio electrónico. Se integra bien con WooCommerce y otras plataformas de comercio electrónico. Es lógico que haya muchos sitios web de comercio electrónico creados con Divi. En este artículo, veremos 20 ejemplos de sitios web de comercio electrónico creados con Divi para ayudar a despertar su imaginación.
Estos sitios tienen diseños interesantes, páginas de tiendas y páginas de productos. La mayoría incluye un estilo interesante para la tienda y las páginas de productos, y algunos incluyen complementos de WooCommerce. Señalaré lo que más me llama la atención. Los sitios web no están en ningún orden en particular.
East of Africa tiene un diseño de página de inicio nítido que se enfoca en la empresa. La página tiene varios llamados a la acción para ver los diversos productos. Las páginas de categorías incluyen un encabezado con un logotipo grande y un menú de navegación que se desplaza con el encabezado. Las páginas incluyen un cuadro de búsqueda y categorías sugeridas. Las páginas de productos muestran el producto en dos columnas. El diseño es simple e incluye productos sugeridos.
Ver sitio web
2. Dulce Cecilia
Sweet Cecilys muestra imágenes como enlaces a las categorías de la tienda dentro de un diseño de varias columnas que se parece a una revista. El fondo muestra una parte del logotipo de la empresa. Las páginas de categoría incluyen el mismo patrón de fondo que la página de inicio y muestran los productos dentro de cuatro columnas. Las páginas de categorías tienen widgets de WooCommerce en la barra lateral que están diseñados para que coincidan con los productos. Las páginas de productos usan la barra lateral y agregan botones para compartir en redes sociales y productos relacionados. Este sitio tiene algunas fotografías de productos increíbles.
Ver sitio web
3. Papel rosa moderno
La página de inicio de Modern Pink Paper parece una tienda y utiliza colores suaves para atraer al público objetivo. Incluye CTA a diferentes categorías. Las páginas de categorías principales usan la misma imagen para cada categoría, pero muestran el título sobre la imagen. Las páginas de categorías secundarias muestran los productos con un filtro. Las páginas de productos tienen muchas opciones de color y personalización. El comprador puede seleccionar el color, agregar un nombre para la personalización, optar por ver el producto antes de que se envíe y agregar mensajes y notas. La descripción del producto utiliza un acordeón para las preguntas frecuentes.
Ver sitio web
4. Diseños de una hoja
One Leaf Designs muestra imágenes de productos en un control deslizante de ancho completo con un CTA de tienda seguido de una sección con los más vendidos. La página de la tienda muestra los productos en una sección encuadrada que se superpone al encabezado. Las páginas de productos muestran el producto con una sombra de cuadro para todas las imágenes. El texto está diseñado para que coincida con el sitio. Incluye enlaces a otros productos que le pueden gustar al visitante.
Ver sitio web
5. La cesta del hermano
Bro Basket muestra un encabezado de pantalla completa con un CTA de la tienda. Una sección muestra las categorías de la tienda usando imágenes con superposiciones. Otra sección muestra productos seleccionados a mano. Las páginas de categorías muestran varias secciones sobre la empresa y lo que hacen. Estas secciones incluyen servicios en tarjetas 3D. Los que están más lejos están borrosos. El área de descripción de las páginas de productos incluye un video de ancho completo o personalizaciones. También incluyen productos relacionados. Me encanta la fotografía en este sitio web.
Ver sitio web
6. Tienda de cuidado natural
Natural Care Shop tiene un bonito diseño de tienda con imágenes que enlazan con las categorías. Utiliza colores suaves para atraer al público objetivo. Las páginas de categoría incluyen widgets de la barra lateral de WooCommerce y CTA en el pie de página. Los productos se muestran con imágenes grandes. Las páginas de productos tienen iconos de estilo y productos similares tanto en un widget como en imágenes de CTA.
Ver sitio web
7. Apis Australia
Apis Australia incluye un CTA de tienda de ancho completo en el encabezado junto con una sección de categoría que muestra varios productos en una imagen. La página de la tienda usa el mismo fondo para mostrarse detrás del módulo de la tienda. Otra sección de la tienda muestra productos complementarios sobre el mismo fondo. Los productos se muestran con sombras de caja. Las páginas de productos son simples pero incluyen estilo de texto para que coincida con el sitio y los productos relacionados.
Ver sitio web
8. Lahlay
Lahlay muestra un control deslizante de pantalla completa con CTA para varios productos. Incluye un mega-menú que se esconde en el scroll. Varias secciones en la página de inicio muestran los productos con imágenes grandes y sombras de cuadro. Varias otras secciones proporcionan información del producto con imágenes. Las páginas de categorías muestran muchas fotos e información en acordeones con estilo, junto con un módulo de tienda con estilo. Los productos se muestran en ventanas emergentes. Este sitio tiene una de las páginas de categorías/productos más interesantes que he visto.
Ver sitio web
9. Leoca
Leoca muestra un encabezado de pantalla completa con un CTA de tienda. La siguiente sección muestra imágenes grandes que enlazan con categorías. Incluyen los títulos de las categorías. Las páginas de categorías muestran una imagen a pantalla completa junto con el título de la categoría. La siguiente sección muestra un producto seguido de un módulo de tienda con imágenes grandes y animación flotante para que las superposiciones muestren los tamaños y un corazón para agregar el producto a su lista de deseos. Las páginas de productos muestran muchas imágenes grandes junto con opciones.
Ver sitio web
10. El caballero desaliñado
Scruffy Gentleman proporciona un cuadro de búsqueda de productos debajo del encabezado seguido de una imagen de fondo de ancho completo en paralaje. Los productos destacados se desplazan sobre él y se superponen a la siguiente sección de productos destacados. Otra sección muestra un CTA en parallax seguido de nuevos artículos en la tienda. La página de la tienda sigue un diseño similar y agrega una barra lateral de WooCommerce. Las páginas de productos se muestran en ancho completo e incluyen imágenes grandes.
Ver sitio web
11. Veez
Veez incluye un botón de compra que permanece en la pantalla mientras te desplazas. La página de inicio muestra categorías con imágenes como enlaces que tienen estilo con cuadros y texto superpuestos. Las páginas de categoría muestran una imagen y un título para presentar la sección, seguido de un módulo de tienda y un botón para revelar más. Las páginas de productos tienen muchos estilos interesantes. Muestran el producto con muchas imágenes grandes en varias columnas. Otra sección muestra más productos de la categoría.
Ver sitio web
12. Coco Cuscino
Coco Cuscino incluye un control deslizante de pantalla completa con un CTA de tienda para las diferentes categorías. El desplazamiento muestra un control deslizante de los últimos productos con un título de sección a la izquierda. Otra sección incluye CTA para diferentes categorías. Las páginas de categorías y productos son simples y tienen estilo de borde, botón y texto, y un pie de página personalizado. La página del producto incluye una sombra de cuadro.
Ver sitio web
13. Tarta y bayas
Tarte and Berry muestra los productos en un control deslizante de pantalla completa utilizando el efecto Ken Burns y un CTA de la tienda. Una sección delgada muestra el proceso de compra con iconos. A continuación hay una gran lista de productos y una sección de testimonios. La página de la tienda sigue este mismo diseño, pero sin el control deslizante. Las páginas de productos están diseñadas para que coincidan con el sitio e incluyen un cuadro para agregar un mensaje personalizado. La descripción muestra los ingredientes. La página también muestra productos relacionados.
Ver sitio web
14. Boticario de Nikki Hill
Nikki Hill Apothecary utiliza un diseño suave y elegante para exhibir los productos. El encabezado muestra un CTA seguido de información sobre la empresa. Una sección de varias columnas muestra imágenes como enlaces a categorías. Las páginas de categoría están limpias e incluyen estilos para que coincidan con el sitio. Las páginas de productos tienen un estilo personalizado, que incluye las pestañas del área de descripción. Debajo del producto hay un producto sugerido dentro de un cuadro con estilo. La fotografía en este sitio lo distingue.
Ver sitio web
15. Picos y gorrión
Spikes and Sparrow muestra un control deslizante de ancho completo para exhibir productos. El control deslizante tiene una navegación con estilo en el lado izquierdo. La siguiente sección muestra categorías en un diseño de varias columnas usando imágenes con superposiciones de texto con estilo. Las páginas de la tienda muestran los productos con una barra lateral de estilo WooCommerce. Las páginas de productos lucen elegantes con sus colores de marca. No muestran mucha información, pero sí incluyen el producto en otros colores.
Ver sitio web
16. Patinete
Kickbike muestra un control deslizante de ancho completo con un CTA de tienda. La página de inicio ofrece varios artículos y enlaces sobre la empresa, secciones de la tienda y mucha información sobre los productos. Las páginas de categoría incluyen una imagen de pantalla completa seguida de una sección de información, la sección de la tienda en ancho completo y luego una sección de preguntas frecuentes. Las páginas de productos son simples pero usan muchas fotos grandes y productos relacionados.
Ver sitio web
17. Boutique sin sal
Unsalted Boutique utiliza colores suaves detrás del menú, secciones, bloques de texto, etc. para atraer al público objetivo. Un CTA se muestra dentro de un control deslizante y usa una imagen con un cuadro de color para el texto. Se utilizan cuadros de colores en todo el sitio para identificar las categorías. La página de inicio incluye varias de estas secciones de la tienda. Los enlaces de categoría abren la página del producto donde puede elegir el producto específico de un cuadro desplegable. La página del producto también muestra productos relacionados.
Ver sitio web
18. Flores de la casa
Maison Flowers muestra la imagen de un producto como fondo de paralaje en la sección principal de pantalla completa. El desplazamiento muestra un módulo de tienda con estilo con un ícono de flor en la superposición y una sección con imágenes para categorías con animación flotante. Las páginas de categoría coinciden con la página de inicio, pero tienen una imagen pequeña con una superposición de estilo. Las páginas de productos utilizan el mismo encabezado y un título de producto grande, e incluyen un cuadro de mensaje personal para personalizar el regalo. La página también tiene una sección para mostrar información de envío y compra y otras dos secciones con productos similares.
Ver sitio web
19. Tienda Basami
Basami Shop muestra un CTA de tienda en un control deslizante de pantalla completa. Una sección de otros productos y una sección de favoritos incluyen box shadows. Las páginas de categorías muestran categorías en la barra lateral, una descripción de la categoría y luego los productos. Las páginas de productos muestran una imagen grande del producto, la galería de productos y luego el área de descripción. Esta área está diseñada para que coincida con el sitio e incluye productos relacionados.
Ver sitio web
pensamientos finales
Ese es nuestro vistazo a 20 ejemplos de sitios web de comercio electrónico creados con Divi para ayudar a despertar su imaginación. Estos sitios son excelentes ejemplos de lo que se puede hacer con Divi. Muchos tienen elegantes páginas de destino con módulos de tienda con estilo para centrarse en los productos. Hay varios ejemplos excelentes de páginas de tiendas, páginas de categorías y páginas de productos. Es fácil ver cómo la fotografía de productos puede hacer que un diseño simple se destaque. Seguramente habrá algo aquí para ayudarlo a diseñar cualquier tipo de sitio web de comercio electrónico para su próximo proyecto Divi.
Queremos escuchar de ti. ¿Cuáles de estos sitios web de comercio electrónico de Divi son tus favoritos? Háganos saber lo que piensa sobre ellos en los comentarios.
Imagen destacada a través de TeraVector / shutterstock.com