Al diseñar una página de producto para promocionar su producto, es útil incluir imágenes llamativas combinadas con fondos limpios, contenido conciso y CTA claros. Para hacer que su página sea única, agregar algunos elementos creativos también puede ayudar. Entonces, si está buscando un diseño de producto nuevo y algunos consejos de diseño inspiradores, esta publicación es para usted.
En este tutorial, le mostraré cómo usar Divi para diseñar un hermoso diseño de producto utilizando algunas técnicas de diseño simples (pero poderosas). Al crear el diseño, explicaré cómo agregar una perspectiva tridimensional a cualquier imagen con un breve fragmento de CSS personalizado. Luego, le mostraré cómo apilar divisores de sección para crear una ola multicolor abstracta para dividir su contenido. E incluso daré un consejo fácil para mantener los botones CTA duales del mismo ancho.
Aquí hay un adelanto del diseño que crearemos hoy.
Lo que necesitas para este Tutorial
Para este tutorial, la única herramienta de diseño que necesitará es Divi, así que asegúrese de tener su tema Divi instalado y activo. Luego, usaremos Visual Builder para crear una sección de héroe única y el divisor de onda. Y para finalizar el diseño del diseño, deberá importar elementos del diseño de la página de destino de Marketing de software desde el constructor Divi. Deberá agregar uno o dos fragmentos de CSS personalizado que se pueden colocar fácilmente en la pestaña avanzada de un módulo.
Empecemos.
Diseñe un diseño de producto Divi llamativo con perspectiva de imagen y ondas abstractas coloridas
Suscríbete a nuestro canal de Youtube
Crear el encabezado de ancho completo
Para crear el encabezado de ancho completo, primero cree una nueva página e implemente el generador visual. Luego agregue una nueva sección de ancho completo con un módulo de encabezado de ancho completo.
Antes de agregar el contenido del encabezado, vaya a la configuración de la sección de ancho completo y actualice lo siguiente:
Color de degradado de fondo 1 (izquierda): rgba(23,20,57,0.95)
Color de degradado de fondo 2 (derecha): rgba(136,52,253,0.98)
Colocar degradado encima de la imagen de fondo: SÍ
Observe que los colores del degradado de fondo tienen una opacidad muy leve y se colocan sobre la imagen de fondo. Esto le permitirá crear una superposición de degradado agradable para su imagen de fondo.
A continuación, introduzca la imagen de fondo.
Imagen de fondo: [insertar imagen]
En la pestaña de diseño, agregue un relleno personalizado a su sección.
Relleno personalizado: 0 px arriba, 0 px a la derecha, 80 px abajo, 0 px a la izquierda
A continuación, agregue una sombra de cuadro interior blanca con una posición vertical de -200px. Esto permitirá que la imagen de nuestro producto (aún no agregada) parezca superpuesta en la siguiente sección. Este método es un poco más limpio que agregar un margen inferior negativo a nuestra imagen para llevarla a la siguiente sección.
Sombra de cuadro: [ver captura de pantalla]
Posición vertical de sombra de cuadro: -200px
Color de sombra: #ffffff
Posición de sombra de cuadro: Sombra interna
Esto hará que la vista previa visual del fondo desaparezca por ahora, pero no te preocupes. Todo se equilibrará cuando agreguemos nuestro contenido.
Ahora puede volver a la configuración del módulo de encabezado de ancho completo y agregar el contenido del encabezado actualizando lo siguiente:
Título: Nuestro producto
Texto del subtítulo: Nulla quis lorem ut libero malesuada feugiat.
Texto del botón n.º 1: Descargar ahora
Texto del botón n.º 2:
URL de la imagen del logotipo de licencia de compra: [insertar imagen, 100 px por 100 px]
Consejo: asegúrese de que la imagen de su logotipo sea blanca (o de color claro) ya que estamos usando un fondo oscuro.
Vaya a la pestaña Diseño y actualice la opción Orientación de texto y logotipo a «centrada».
Luego actualice lo siguiente:
Color del texto: Fuente del título claro
: Peso de la fuente del título Poppins :
Tamaño del texto del título
ligero : 65 px (escritorio), 40 px (teléfono inteligente)
Altura de la línea del título: 1,5 em
Fuente del subtítulo: Poppins
Peso de la fuente del subtítulo: Regular
Tamaño del texto del subtítulo: 20 px
Altura de la línea del subtítulo: 1,5 em
Usar estilos personalizados para el botón dos: SÍ
Color de fondo del botón dos: #1e69cb
Ancho del borde del botón dos: 0px
Radio del borde del botón dos: 50px
Espaciado entre letras del botón dos: 1px
Fuente del botón dos: Poppins
Usar estilos personalizados para el botón uno: SÍ
Color de fondo del botón uno: #75d334
Ancho del borde del botón uno: 0px
Radio del borde del botón uno: 50px
Espaciado entre letras del botón uno: 1px
Fuente del botón uno: Poppins
Una de las características únicas del encabezado de ancho completo es la capacidad de agregar dos botones (CTA dobles) uno al lado del otro. Esto es perfecto para productos que ofrecen tanto una descarga gratuita como una licencia premium.
Si ha usado el botón dual en su encabezado anteriormente, puede que sepa que los dos botones no coinciden exactamente en tamaño porque el ancho del botón se ajusta dependiendo de la cantidad de texto en el botón. Para hacer que los botones coincidan en ancho sin importar la cantidad de texto, puede agregar un par de líneas de CSS personalizado.
Para agregar el CSS personalizado, vaya a la pestaña avanzada e ingrese el siguiente fragmento de CSS en el campo de entrada para el Botón uno y el Botón dos:
|
01
02
|
width: 100%;max-width: 220px; |
Guardar ajustes.
Es posible que deba ajustar el ancho máximo para ajustarlo a su propia fuente y tamaño de botón. Solo asegúrese de tener en cuenta el ícono animado que necesitará espacio al pasar el mouse.
Agregar la imagen del producto de ancho completo
Para esta imagen de producto simulada, usaré una captura de pantalla de la interfaz de usuario (IU) del producto que, en este caso, es Divi Builder. Para crear la imagen de ancho completo, agregue un módulo de imagen de ancho completo debajo del encabezado de ancho completo.
Luego sube tu imagen. El tamaño de la imagen debe ser de alrededor de 1920 px por 1080 px.
Luego actualice la siguiente configuración de diseño.
Ancho: 35 % (escritorio), 60 % (tableta), 70 % (teléfono inteligente)
Alineación del módulo: centro
Ajustar el ancho del módulo usando porcentajes ayudará a crear una transición más suave al ajustar el ancho del navegador y mejores pantallas móviles.
Sombra de cuadro: [ver captura de pantalla]
Posición vertical de sombra de cuadro: 29 px
Fuerza de desenfoque de sombra de cuadro: 72 px
Fuerza de extensión de sombra de cuadro: -21 px
Color de sombra: #27005e
Ahora estamos listos para agregar nuestra perspectiva y rotación a nuestra imagen para darle ese efecto 3D genial. Para hacer esto, vaya a la pestaña avanzada y agregue la siguiente línea de CSS personalizado (con prefijos de proveedores para compatibilidad entre navegadores) al campo de entrada Elemento principal.
|
01
02
03
04
05
|
-webkit-transform: perspective(700px) rotateX(45deg);-moz-transform: perspective(700px) rotateX(45deg);-ms-transform: perspective(700px) rotateX(45deg);-o-transform: perspective(700px) rotateX(45deg);transform: perspective(700px) rotateX(45deg); |
Este css le está haciendo dos cosas a nuestra imagen usando la propiedad Transform CSS. Primero, agrega una perspectiva de 700px. Esto básicamente crea la cantidad de distancia entre la imagen y la perspectiva del usuario cuando ve la página. En este momento se encuentra a 700 px del usuario. La menor cantidad de píxeles acercará la imagen. Un valor de píxel más grande lo llevará más lejos. Pero, este valor de perspectiva por sí solo no producirá el efecto que queremos hasta que añadamos rotación a la imagen. Esa es la siguiente parte del valor de la propiedad de transformación. El rotateX(45deg) le dice a la imagen que gire sobre el eje X 45 grados. Y debido a que se establece la perspectiva, la imagen ahora tiene una apariencia tridimensional. Siéntase libre de jugar con estas configuraciones para obtener el aspecto que desea.
Crear el divisor de ondas multicolor abstracto
Para la próxima parte, voy a ser un poco creativo con los divisores de sección. Si aún no lo sabe, cada sección le permite agregar un divisor superior o inferior para crear hermosas transiciones entre secciones de contenido. Para este diseño, usaré cuatro secciones apiladas una encima de la otra (cada una con divisores superior e inferior). Esto permitirá superponer divisores con diferentes colores para crear una ola abstracta única y colorida. El truco es dejar tus secciones libres de contenido y relleno para que la sección tenga una altura de 0px. Luego, debe reflejar los divisores superior e inferior (los que están conectados) y combinarlos con el mismo color para crear un solo haz de color que fluya por la página. Cuando apile las otras secciones y divisores, tendrá un total de 3 haces de color entrelazados en la página.
Hagámoslo.
Agregar la primera sección de divisores
Agregue una nueva sección regular debajo de su contenido existente, pero no agregue un módulo. Luego elimine la fila dentro de la sección. Recuerde, no queremos ninguna altura en nuestras secciones.
Actualice la configuración de diseño de la sección agregando un divisor inferior.
Divisor:
Estilo de divisor inferior: [ver captura de pantalla]
Color de divisor: rgba (45,153,255,0.1)
Altura de divisor: 157 px (escritorio), 75 px (tableta y teléfono inteligente)
Repetición horizontal de divisor: 2x
Luego agregue un espacio personalizado que creará un margen necesario sobre la sección y un relleno cero. Esto elimina la altura de la sección para que los divisores se apilen sin problemas uno encima del otro.
Margen personalizado: 230 px superior (escritorio), 115 px (tableta y teléfono inteligente)
Relleno personalizado: 0 px superior, 0 px a la derecha, 0 px inferior, 0 px a la izquierda
Agregar la segunda sección de divisores
En este punto vas a repetir el mismo proceso. Agregue otra sección regular a continuación, pero no agregue un módulo. Luego elimine la fila dentro de la sección.
Actualice la configuración de diseño de la sección agregando un divisor superior e inferior.
Divisor: parte superior
Estilo del divisor: [ver captura de pantalla]
Color del divisor: rgba (45,153,255,0.1)
Altura del divisor: 127 px (escritorio), 60 px (tableta y teléfono inteligente)
Repetición horizontal del divisor: 2x
Relleno personalizado: 0px arriba, 0px derecha, 0px abajo, 0px izquierda
Ya puedes ver cómo toma forma la primera ola.
Divisor: Inferior
Estilo de divisor: [ver captura de pantalla]
Color de divisor: rgba(117,211,52,0.08)
Altura de divisor: 181 px (escritorio), 90 px (tableta y teléfono inteligente)
Voltear divisor: Horizontal
Esto servirá como la parte superior de la segunda ola que se terminará en la siguiente sección.
Agregar la tercera sección de divisores
Continúe repitiendo el mismo proceso. Agregue otra sección regular a continuación. No agregue un módulo. Luego elimine la fila dentro de la sección.
Luego actualice la configuración del diseño de la sección agregando un divisor superior e inferior.
Divisor: Superior
Estilo de divisor: [ver captura de pantalla]
Color de divisor: rgba(117,211,52,0.08)
Altura de divisor: 119px (escritorio), 60px (tableta y teléfono inteligente)
Voltear divisor: Horizontal
Relleno personalizado: 0px arriba, 0px derecha, 0px abajo, 0px izquierda
Ahora puede ver cómo toma forma la segunda ola.
Divisor:
Estilo de divisor inferior: [ver captura de pantalla]
Color de divisor: rgba (122,112,251,0.12)
Altura de divisor: 72 px (escritorio), 40 px (tableta y teléfono inteligente)
Repetición horizontal de divisor: 2x Inversión
de divisor: horizontal y vertical
Esto servirá como la parte superior de la tercera ola que se completará en la siguiente sección.
Agregar el divisor de la cuarta sección
Agregue una sección regular más sin un módulo. Luego elimine la fila dentro de la sección.
Luego actualice la configuración del diseño de la sección agregando un divisor superior.
Divisor: parte superior
Estilo de divisor: [ver captura de pantalla]
Color de divisor: rgba (122,112,251,0.12)
Altura de divisor: 185 px (computadora de escritorio), 90 px (tableta y teléfono inteligente)
Repetición horizontal de divisor: 2x
Rotación de divisor: horizontal y vertical
Margen personalizado: 500 px en la parte inferior (escritorio), 250 px en la parte inferior (tableta y teléfono inteligente)
Relleno personalizado: 0 px en la parte superior, 0 px en la derecha, 0 px en la parte inferior, 0 px en la izquierda
Ahora la tercera ola está completa. El margen inferior de 500 px es para crear el espacio necesario antes de la siguiente sección debajo de los divisores de sección.
Aquí esta el resultado final.
Importe el diseño de la página de destino de marketing de software
Para finalizar el diseño, importe el diseño de la página de inicio de marketing de software yendo a su menú de configuración, haciendo clic en el botón Cargar desde biblioteca y seleccionando el diseño. Esto cargará el diseño debajo de su contenido actual para que podamos usar diferentes elementos para terminar nuestro diseño. Los colores y las fuentes también combinan muy bien.
Una vez importado el nuevo diseño, elimine la primera sección del diseño y las últimas cuatro secciones del diseño. Esta es solo mi preferencia para este tutorial. Por supuesto, puede usar los elementos que desee para su propia página de producto.
Este es el aspecto que debería tener su página ahora.
Ahora arrastre la sección inferior «Características» directamente debajo de la sección de ancho completo y encima de los divisores.
Agregar perspectiva y rotación a las imágenes de su sección destacada
En la primera sección que contiene la ilustración gráfica grande, elimine el módulo de imagen que muestra la ilustración y agregue un nuevo módulo de imagen con una imagen que muestre la interfaz de su producto.
Luego vaya a la pestaña avanzada y agregue el siguiente CSS personalizado dentro del campo de entrada Elemento principal.
|
01
02
03
04
05
|
-webkit-transform: perspective(1000px) rotateY(-45deg);-moz-transform: perspective(1000px) rotateY(-45deg);-ms-transform: perspective(1000px) rotateY(-45deg);-o-transform: perspective(1000px) rotateY(-45deg);transform: perspective(1000px) rotateY(-45deg); |
Este CSS se parece mucho al primero que usamos en el encabezado, pero hay tres diferencias menores. La perspectiva es de 1000px para crear mayor distancia. La imagen ahora gira sobre el eje Y y utilicé el valor negativo de 45 grados para girar la imagen en el sentido de las agujas del reloj sobre el eje Y. Esto funciona bien para las imágenes en la columna de la derecha.
NOTA IMPORTANTE: Es importante que borre el módulo de imagen antes de agregar el nuevo módulo de imagen porque el módulo anterior tenía animación. Esta animación entra en conflicto con el código CSS que estamos usando. Entonces, si agregó el CSS y nada cambió, probablemente se deba a que tiene un efecto de animación en su lugar.
Con la perspectiva de la imagen en su lugar, vaya a la pestaña de diseño y agregue una sombra de cuadro que funcione con la nueva posición de la imagen de la siguiente manera:
Sombra de cuadro: [ver captura de pantalla]
Posición horizontal de sombra de cuadro: 39 px
Fuerza de desenfoque de sombra de cuadro: 56 px
Fuerza de extensión de sombra de cuadro: -17 px
Color de sombra de cuadro: rgba (39,0,94,0.19)
Para la pantalla móvil, querrá ajustar el tamaño de la imagen al 60% en la tableta con una alineación centrada.
Ahora vamos a hacer lo mismo para la siguiente sección que contiene la ilustración. Elimine el módulo de imagen y agregue uno nuevo con la imagen de su elección. Luego agregue el siguiente CSS personalizado dentro del campo de entrada Elemento principal.
|
01
02
03
04
05
|
-webkit-transform: perspective(1000px) rotateY(45deg);-moz-transform: perspective(1000px) rotateY(45deg);-ms-transform: perspective(1000px) rotateY(45deg);-o-transform: perspective(1000px) rotateY(45deg);transform: perspective(1000px) rotateY(45deg); |
La única diferencia aquí es la rotación. Dado que esta imagen está configurada para girar 45 grados positivos, la imagen ahora gira en sentido contrario a las agujas del reloj. Esto funciona bien para las imágenes en la columna izquierda.
Finalmente, vaya a la pestaña de diseño y agregue la siguiente configuración de sombra de caja:
Sombra de cuadro: [ver captura de pantalla]
Posición horizontal de sombra de cuadro: -39 px
Fuerza de desenfoque de sombra de cuadro: 56 px
Fuerza de extensión de sombra de cuadro: -17 px
Color de sombra de cuadro: rgba (39,0,94,0.19)
Para la pantalla móvil, querrá ajustar el tamaño de la imagen al 60% en la tableta con una alineación centrada.
¡Eso es todo! Veamos el resultado final.
Responsivo móvil
Con los ajustes móviles realizados en el camino, su diseño se verá genial en tabletas y teléfonos inteligentes.
La única modificación que sugeriría es agregar el siguiente CSS personalizado a la configuración de su página o al personalizador de temas :
|
01
02
03
04
05
|
@media (max-width: 757px) {.et_pb_button_two.et_pb_button { margin-left: 0px !important; } } |
Esto elimina el margen entre los dos botones para que se alineen perfectamente cuando se apilan en el móvil.
Esto es lo que parece en la tableta y el teléfono inteligente.
Pensamientos finales
Agregar perspectiva y rotación a sus imágenes es realmente fácil de hacer una vez que sabe cómo funciona el valor de la propiedad de transformación y dónde agregar ese fragmento de CSS. Y el efecto es bastante impresionante. Estas imágenes realmente “destacan”. Por supuesto, este diseño no se limita a las imágenes de productos. Puede agregar perspectiva a cualquier imagen que desee en cualquier página que desee.
El diseño de ondas abstractas no será para todos. Lo entiendo. Pero, solo piense en todos los diferentes diseños que se pueden hacer usando este método de apilar divisores de sección con múltiples colores. Con tantos estilos, alturas y colores de divisores, es posible que termine pasando el resto del día creando por diversión. Estos divisores apilados también servirían como fondo único para cierto contenido.
De todos modos, espero que se sienta inspirado para agregar algunas de estas técnicas de diseño a su propio sitio y, como siempre, espero saber de usted en los comentarios.
¡Salud!