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


¡Finalmente está aquí!

Lunes cibernético

¿Te perdiste nuestra oferta de Black Friday durante el fin de semana? ¡No te preocupes! Nuestro mayor descuento de todos los tiempos se extiende por tiempo limitado para el Cyber ​​Monday. Este es el descuento más grande que hemos ofrecido, y es solo algo que ofrecemos durante nuestras rebajas de Black Friday y Cyber ​​Monday. Una vez finalizada la venta, este descuento no estará disponible hasta el próximo año. ¡Eso es mucho tiempo de espera!

¡Obtenga la oferta antes de que se acabe!

Esta página de inicio de venta de boutique es uno de los diseños de página exclusivos que le ofrecemos como miembros vitalicios y nuevos clientes de Cyber ​​Monday. El diseño y la disposición de la página de destino son notables, lo que facilita la promoción de descuentos y productos destacados de una manera nueva y novedosa. El encabezado presenta un fuerte llamado a la acción para educar a los usuarios sobre un valioso descuento. Y las diferentes secciones de la página promocionan productos de acuerdo con diferentes categorías como "recién llegados" y "lo que está de moda". La página termina con una fuerte llamada 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 boutiques en su propio sitio web y también lo guiaré a través de cómo diseñar una sección de productos destacados únicos con Divi. Para hacer esto, usaré el módulo de la tienda de Divi de formas creativas para presentar sus productos WooCommerce con una categoría específica.

¿Ya es miembro vitalicio? Usted puede descarga el paquete ahora mismo, ¡no es necesario participar en nuestra oferta de Cyber ​​Monday!

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

Obtenga la página de inicio de venta exclusiva de Cyber ​​Monday Boutique

Antes de entrar en el tutorial de casos de uso, deberá poner sus manos en la página de inicio de venta exclusiva de Cyber ​​Monday Boutique, que puede obtener al convertirse en un nuevo miembro de Elegant Themes, actualizar su cuenta existente o si ya es miembro vitalicio con nosotros. . Si de hecho ya es un miembro vitalicio, 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.

¡Reclame el trato antes de que desaparezca!

¿Ya es miembro vitalicio? Usted puede descarga el paquete ahora mismo, ¡no es necesario participar en nuestra oferta de Cyber ​​Monday!

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

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

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

(incrustar) https://www.youtube.com/watch?v=oPJ70kc2fko (/ incrustar)

Una vez que haya descargado correctamente 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 casos 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 los cuales proviene 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 WordPress y navegue a Productos> Agregar nuevo. Luego actualice lo siguiente:

Dale a tu nuevo producto un título y una descripción.
Establece el precio y el precio de venta del producto.
Agregue una nueva categoría llamada "Destacados" y selecciónela.
Agrega una imagen destacada para el producto.

Luego publique 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 son del 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 producto nuevo 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 estoy dando a mis productos las siguientes categorías: Destacados, Destacados 1, Destacados 2, Destacados 3, Destacados 4, Destacados 5.

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

Vaya a la página donde ha importado la página de inicio de la venta de boutique e implemente el constructor visual.

En 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 la 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
Recuento de productos: 1
Incluir categorías: Destacado
Ordenar por: Ordenar por fecha: 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 "Destacado 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 "Destacado 5".

Con esta funcionalidad en su lugar, 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, abra la configuración de fila y actualice lo siguiente:

Ancho de la canaleta: 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

Dado que queremos aplicar el mismo diseño para todos los módulos de nuestra tienda a la vez, podemos usar la función de selección múltiple de Divi para seleccionar todos los módulos de la tienda. Para hacer esto, mantenga presionado cmd (o ctrl) y haga clic en cada uno de los módulos hasta que todos estén seleccionados. Luego haga clic en el ícono 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 (desplazamiento): # ff6363
Color de desplazamiento del icono: rgba (0,0,0,0)
Color de superposición de desplazamiento: rgba (0,0,0,0)
Color de la insignia de venta (predeterminado): # ff6363
Color de la insignia de venta (flotar): # 241f32
Orientación del texto: centro
Color del texto del título: #ffffff
Precio del color del texto: #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 compra en la columna 5 no necesita el efecto de desplazamiento que se mueve hacia la izquierda, continúe y desactive 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 el móvil. 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 la tienda, siempre puedes crear un diseño similar usando módulos de propaganda. 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 Cyber ​​Monday, donde compartimos 6 páginas de inicio de edición limitada GRATIS con clientes y miembros vitalicios del Black Friday. Al unirse a nuestra comunidad empoderada durante estos días y convertirse en miembro, obtendrá:

  • 25% DE DESCUENTO EN TODO
  • Las 6 páginas de destino gratuitas
  • Acceso a nuestros increíbles temas y complementos
  • Premios de bonificación

¡Aproveche la oportunidad y conviértase en miembro hoy!