Esta página de inicio de venta de boutique es uno de los diseños de página exclusivos que le brindamos como miembros de por vida y nuevos clientes de Cyber ​​​​Monday. El diseño y el diseño de la página de destino son notables, lo que facilita la promoción de descuentos y productos destacados de una manera nueva y fresca. El encabezado presenta un fuerte llamado a la acción para educar a los usuarios sobre un descuento valioso. Y las diferentes secciones de la página promocionan productos de acuerdo a diferentes categorías como «recién llegados» y «lo que está de moda». La página termina con un fuerte llamado a la acción en el pie de página que también incluye un temporizador de cuenta regresiva.

En este artículo, le mostraré cómo usar la página de inicio de venta de boutique en su propio sitio web y también le mostraré cómo diseñar una sección de productos destacados únicos con Divi . Para hacer esto, usaré el módulo de tienda de Divi de manera creativa para presentar sus productos de WooCommerce con una categoría específica.

¿Ya eres miembro de por vida? Puede descargar el paquete ahora mismo , ¡no es necesario que participe en nuestra venta de Cyber ​​​​Monday!

El diseño de la página de destino de la venta boutique

Obtenga la página de destino exclusiva de la oferta boutique de Cyber ​​Monday

Antes de ingresar al tutorial de caso de uso, deberá poner sus manos en la página de inicio de venta exclusiva de Cyber ​​Monday Boutique que puede obtener convirtiéndose en un nuevo miembro de Elegant Themes, actualizando su cuenta existente o siendo miembro de por vida con nosotros. . Si ya es miembro de por vida, puede iniciar sesión en nuestra área de miembros y descargar todos nuestros paquetes de diseño exclusivos aquí. Todos los demás deberán usar el botón a continuación para comprar o actualizar antes de poder seguir el resto del tutorial a continuación.

¡Reclama el trato antes de que desaparezca!

¿Ya eres miembro de por vida? Puede descargar el paquete ahora mismo , ¡no es necesario que participe en nuestra venta de Cyber ​​​​Monday!

Agregar el diseño de la página de destino de venta de boutique a su sitio web

En el resto de esta publicación, asumiremos que ha aprovechado nuestra oferta de Cyber ​​Monday (o Black Friday) o que ya es miembro de por vida y tiene acceso al diseño de la página de destino del lanzamiento de la aplicación.

Una vez que haya descargado el nuevo diseño de página de inicio de venta de boutique de nuestra área de miembros, puede ver el video a continuación para ver lo fácil que es configurarlo. También le recomendamos que siga este tutorial para preparar su sitio para una mayor personalización.

Una vez que haya descargado con éxito el diseño, lo haya importado a la Biblioteca Divi y lo haya agregado a una nueva página, estará listo para comenzar el tutorial de caso de uso a continuación.

Tutorial de caso de uso: cómo diseñar una sección de productos destacados únicos con Divi y nuestra página de inicio de venta exclusiva de boutique

Si está utilizando WooCommerce en su sitio web de comercio electrónico, es posible que ya haya aprovechado el módulo de tienda de Divi, que le permite mostrar fácilmente sus productos en cualquier lugar de su sitio web. En este tutorial, le mostraré cómo diseñar una línea única de módulos de tienda, cada uno de ellos de una categoría de producto diferente. Esto le permite diseñar cada módulo de producto/tienda individualmente. Además, tendrá la funcionalidad automatizada que actualiza el módulo con un nuevo producto cada vez que se agrega un nuevo producto de WooCommerce a la categoría específica en el módulo de la tienda.

Aquí hay un adelanto de lo que construiremos juntos.

Configuración de sus productos WooCommerce

Para este tutorial, deberá tener el complemento WooCommerce instalado y activo en su sitio web. Una vez que tenga WooCommerce en funcionamiento, vaya a su panel de control de WordPress y navegue a Productos > Agregar nuevo. Luego actualice lo siguiente:

Dale a tu nuevo producto un Título y una Descripción.

Fijar el precio y precio de venta del producto.

Agregue una nueva categoría llamada «Destacado» y selecciónela.

Agregue una imagen destacada para el producto.

Luego publica el producto.

Nota: Este diseño funciona mejor cuando las imágenes destacadas de su producto son todas del mismo tamaño. El que estoy usando para este tutorial es de 981 px por 800 px. Si las imágenes no tienen el mismo tamaño, los cuadros de productos destacados en su página variarán en altura.

A continuación, continúe con los mismos pasos para agregar cuatro productos más. Para cada nuevo producto que agregue, asegúrese de asignar una categoría diferente a cada uno. Esto es importante para que el módulo de la tienda pueda mostrar el producto más reciente en esa categoría. Para este tutorial, solo doy a mis productos las siguientes categorías: Destacados, Destacados 1, Destacados 2, Destacados 3, Destacados 4, Destacados 5.

Una vez hecho esto, está listo para comenzar a crear la sección de productos destacados en la página de inicio de venta de boutique.

Vaya a la página en la que ha importado la página de inicio de venta de boutique e implemente el generador visual.

Debajo de la segunda sección del diseño, cree una nueva sección regular con una Fila de 5 columnas.

Configuración de los módulos de tienda para extraer de una determinada categoría

Ahora es el momento de comenzar a agregar nuestros módulos de tienda a nuestras columnas. Luego podemos configurar cada uno para extraer de una categoría diferente. En la primera columna, agregue un módulo de tienda y actualice lo siguiente:

Tipo: Categoría de producto

Número de productos: 1

Incluir categorías: Destacados

Ordenar por: Ordenar por Fecha: De más reciente a más antiguo

A continuación, copie y pegue el módulo de la tienda en la columna 2 y actualice la configuración de la tienda para incluir solo la categoría «Destacado 2».

Luego continúe este proceso para las columnas restantes de la siguiente manera:

Copie y pegue el módulo de la tienda en la columna 3 y actualice la configuración de la tienda para incluir solo la categoría «Destacados 3».

Copie y pegue el módulo de la tienda en la columna 4 y actualice la configuración de la tienda para incluir solo la categoría «Destacado 4».

Copie y pegue el módulo de la tienda en la columna 5 y actualice la configuración de la tienda para incluir solo la categoría «5 destacados».

Con esta funcionalidad implementada, cada vez que agregue un nuevo producto en cualquiera de las categorías aplicadas, el módulo de la tienda mostrará automáticamente ese producto en su sección destacada. Así que esta es una excelente manera de mostrar el producto más reciente de 5 categorías diferentes, todo en un solo lugar.

Diseño de los módulos de la tienda

Antes de comenzar a diseñar nuestros módulos de tienda, continúe y abra la configuración de la fila y actualice lo siguiente:

Ancho de medianil: 1

Relleno personalizado (tableta): 10 % a la izquierda, 0 % a la derecha

Relleno personalizado (teléfono inteligente): 20 % a la izquierda, 0 % a la derecha

Como queremos aplicar el mismo diseño para todos nuestros módulos de tienda a la vez, podemos usar la función de selección múltiple de Divi para seleccionar todos los módulos de tienda. Para hacer esto, mantenga presionada la tecla cmd (o ctrl) y haga clic en cada uno de los módulos hasta que todos estén seleccionados. Luego haga clic en el icono de configuración en uno de los módulos seleccionados para abrir el modal de configuración del elemento. Cualquier cambio de diseño que realice aquí se aplicará a todos los módulos.

Actualice lo siguiente:

Color de fondo: #241f32

Color de fondo (hover): #ff6363

Color de icono Hover: rgba(0,0,0,0)

Color de superposición de Hover: rgba(0,0,0,0)

Color de insignia de venta (predeterminado): #ff6363

Color de la insignia de venta (pasar el cursor): #241f32

Orientación del texto: Centro

Color del texto del título: #ffffff

Color del texto del precio: #ffffff

Ancho: 120 % (escritorio), 100 % (tableta), 100 % (teléfono inteligente)

Margen personalizado (escritorio): -20 % a la derecha

Margen personalizado (desplazamiento): -20 % a la izquierda, 0 % a la derecha

Margen personalizado (tableta): -20 % a la izquierda, 0 % a la derecha

Relleno personalizado: 5px inferior

Al establecer el ancho (técnicamente ancho máximo) en 120%, al pasar el mouse, puede extender el módulo más allá de su columna principal usando un margen izquierdo negativo de -20%.

Dado que el módulo de la tienda en la columna 5 no necesita el efecto de desplazamiento que se mueve hacia la izquierda, continúe y deshabilite el efecto de desplazamiento del margen personalizado en ese módulo.

Aquí esta el resultado final.

Y debido a cómo configuramos nuestros márgenes personalizados, el efecto de desplazamiento que mueve el módulo hacia la izquierda está deshabilitado en dispositivos móviles. Y el diseño responde muy bien.

Por supuesto, siéntase libre de experimentar con más configuraciones para diferentes diseños y efectos de desplazamiento. Además, si te gusta el diseño pero no quieres usar el módulo de tienda, siempre puedes crear un diseño similar usando módulos publicitarios. Luego podría vincular cada propaganda a una página de categoría de producto o algo así.

Pensamientos finales

Este caso de uso es parte de nuestra oferta de Cyber ​​Monday en la que compartimos 6 páginas de destino de edición limitada GRATIS con clientes de Black Friday y miembros de por vida. Al unirse a nuestra comunidad empoderada durante estos días y convertirse en miembro, obtendrá:

• 25% DE DESCUENTO EN TODO
• Todas las 6 páginas de aterrizaje gratis
• Acceso a nuestros increíbles temas y complementos
• Premios de bonificación

¡Aprovecha la oportunidad y conviértete en miembro hoy!