Cómo diseñar un gráfico comparativo de productos creativos con Divi

Vistazo

Aquí hay un adelanto del cuadro de comparación que construiré en este tutorial.

Lo que necesitas para este tutorial

Para este tutorial, necesita lo siguiente:

• Tema Divi (Instalado y Activo)
• Dos imágenes (alrededor de 800 px por 450 px) para servir como imágenes de su producto en el cuadro de comparación.

Creación de su encabezado e imágenes de productos

Para empezar, cree una nueva página, implemente Visual Builder y luego elija crear su página desde cero.

A continuación, agregue un diseño de una columna a su fila de su sección.

Antes de agregar un módulo, vayamos a la configuración de la sección y actualicemos lo siguiente:

Color de fondo: #222222

Color de degradado de fondo izquierdo: rgba(242,90,71,0.14)

Color de degradado de fondo derecho: rgba(255,255,255,0)

Tipo de degradado: Radial

Coloque el degradado sobre la imagen de fondo: SÍ

Guardar ajustes. Ahora abra la configuración de su fila y dele a su fila un ancho personalizado del 100%.

Luego agregue un módulo de texto a su fila de una columna con la siguiente configuración:

Para el contenido, ingrese este html:

Fuente del texto: Montserrat

Peso de la fuente del texto: Ultra Negrita

Estilo de fuente del texto: TT (Mayúsculas)

Color del texto del texto: rgba(255,255,255,0.3)

Tamaño del texto del texto: 3vw

Altura de la línea del texto: 1,8 em

Orientación del texto: Centro

A continuación, actualice las opciones de diseño del encabezado h2 y proporcione a su módulo un margen inferior personalizado para crear el efecto de superposición.

Encabezado 2 Fuente: Montserrat

Encabezado 2 Color del texto: rgba(255,255,255,0.3)

Encabezado 2 Tamaño del texto: 13vw

Encabezado 2 Espaciado entre letras: 1vw

Margen personalizado: -13vw Inferior

Parte de su texto estará oculto por ahora, pero aparecerá una vez que agreguemos el otro contenido.

Dos crean nuestra segunda fila, duplican la primera fila y luego eliminan el módulo de texto dentro de la fila duplicada. Luego actualice la estructura de la columna a una fila de dos columnas.

Continúe y actualice la configuración de su fila de la siguiente manera:

Ancho de canalón personalizado: 1

columna 1 relleno personalizado: 2vw

columna derecha 2 relleno personalizado: 2vw izquierda

Aquí es donde vamos a poner las imágenes de nuestros dos productos que deseamos comparar. En la columna izquierda de nuestra fila, agregue su imagen usando el módulo de imagen. Para este ejemplo, estoy usando una imagen png de 800 px por 459 px. Luego actualice la configuración del módulo de imagen de la siguiente manera:

Ancho: 70 %

Alineación del módulo: Derecha

Relleno personalizado: 40 px Parte inferior

Luego copie el módulo y péguelo en la columna de la derecha. Cambie la imagen y luego ajuste la alineación del módulo a la izquierda.

Debajo del módulo de imagen en la columna izquierda, agregue un módulo de texto con el siguiente contenido de texto: «Producto antiguo».

Luego ingrese al módulo de texto en la primera fila de arriba y copie los estilos de texto.

Luego pase el cursor sobre el nuevo módulo de texto con el texto «Producto antiguo» y pegue los estilos de texto en el módulo con el botón derecho.

Esto coincidirá con los estilos de texto que necesitamos mucho más rápido. Ahora todo lo que tenemos que hacer es

actualizar el tamaño y la alineación del texto:

Texto Tamaño del texto: 16px

Orientación del texto: Derecha

Ahora vaya a la pestaña avanzada y coloque el siguiente CSS personalizado en el cuadro de entrada Elemento principal:

Esto es necesario porque Divi ajustará la alineación del texto a la izquierda en los teléfonos inteligentes de forma predeterminada. Este fragmento de CSS anulará esto y se asegurará de que permanezca alineado correctamente en el teléfono inteligente también.

Guardar ajustes. Luego copie el módulo de texto y péguelo debajo de la imagen en la columna de la derecha. Cambie el contenido del texto a «Nuevo producto» y actualice la orientación del texto a «Izquierda».

Esto es lo que tenemos hasta ahora.

Crear el cuadro de comparación de productos

Para crear nuestro gráfico de comparación, vamos a utilizar una secuencia de dos filas de columnas, cada una separada por una fila de una columna. Las dos filas de columnas contendrán nuestras barras de colores. Y la fila de una columna mostrará el nombre de la característica asociada con los valores de la barra.

Cree una nueva fila de dos columnas y actualice la configuración de la fila de la siguiente manera:

Ancho personalizado: 100%

Ancho de medianil: 1

Relleno personalizado: 0px

Columna inferior 1 Relleno personalizado: 2vw

Columna derecha 2 Relleno personalizado: 2vw Izquierda

El relleno personalizado de las columnas 1 y 2 crea el espacio que necesitamos en el medio de nuestros gráficos de barras que agregaremos.

En la columna de la izquierda, agregue un módulo divisor y actualice la configuración de la siguiente manera:

Color de degradado de fondo izquierdo: rgba(81,91,214,0.25)

Color de degradado de fondo derecho: rgba(255,255,255,0.15)

Dirección de degradado: 90 grados

Posición de inicio: 35%

Color: #515bd6

Peso del divisor: 23px (este valor debe ser igual al valor de Altura del divisor que es 23 px por defecto para que el divisor tenga el mismo ancho que el fondo del módulo)

Relleno personalizado: 70 % a la izquierda (esto empuja el divisor hacia la derecha un 75 %, lo que da como resultado un valor de gráfico de barras del 25 % desde la derecha)

Guardar ajustes.

Ahora copie el Módulo divisor en la columna derecha de la misma fila. Luego actualice la siguiente configuración:

Color de degradado de fondo izquierdo: rgba(255,255,255,0.15)

Color de degradado de fondo derecho: rgba(242,90,71,0.25)

Posición de inicio: 70 %

Color: #f25a47

Relleno personalizado: 30 % Derecha (esto empuja el divisor hacia la izquierda 30 % resultando en un valor de gráfico de barras de 70% desde la izquierda).

Ahora que su primera fila de barras está en su lugar, debemos agregar una fila de una columna debajo para colocar la etiqueta de características de nuestro producto.

Cree una fila de una columna con un relleno personalizado de 0px en la parte superior. Luego agregue un nuevo módulo de publicidad y actualice la configuración del módulo de publicidad de la siguiente manera:

Contenido: “característica”

Icono de uso: SÍ

Icono: ver captura de pantalla

Color del icono: rgba(255,255,255,0.3)

Usar tamaño de fuente del icono: SÍ

Tamaño de fuente del icono: 30px

Orientación del texto: centro

Fuente del cuerpo: Montserrat

Peso de la fuente del cuerpo: Ultra negrita

Color del texto del cuerpo: rgba(255,255,255,0.3)

Espaciado entre letras del cuerpo: 2px

Personalizado Margen: -20px

En la pestaña avanzada, puede eliminar el margen predeterminado debajo del ícono de publicidad agregando el siguiente CSS personalizado en el cuadro CSS de la imagen de Blurb:

Ahora que tiene su primer ejemplo práctico de función de comparación de productos, todo lo que necesita hacer es duplicar las dos filas que componen la función de comparación (la fila con las dos barras/divisores y la fila con el módulo de publicidad). Encuentro que es más fácil usar ctrl + c (o comando + c) para copiar cada fila y luego ctrl + v (o comando + v) para pegarlos uno debajo del otro. Luego simplemente actualice el relleno personalizado para los divisores duplicados para mostrar diferentes valores de gráfico de barras.

También puede ajustar la posición inicial y final del degradado según el valor de relleno personalizado que elija. Por ejemplo, si le da al divisor de la columna izquierda un relleno del 60 % a la izquierda, puede ajustar la posición inicial de su degradado al 30 % (exactamente la mitad de la distancia del relleno).

Para un toque final, es posible que desee agregar un fondo divisorio a su sección. Para este ejemplo, voy a agregar lo siguiente:

Divisor superior: Ver captura de pantalla

Color del divisor: rgba(255,255,255,0.05)

Altura del divisor: 19vw

Aquí esta el resultado final.

También me gusta el aspecto del diseño cuando cambio el color de fondo de la sección a #000314.

Hacer el diseño receptivo

En Divi, cualquier fila de dos columnas se apilará automáticamente una encima de la otra en los dispositivos móviles. Esto, por supuesto, romperá el diseño en el móvil. Para solucionar esto tendremos que hacer dos cosas. Primero, debemos agregar un pequeño fragmento de CSS personalizado dentro del personalizador de temas .

Este código ajustará el ancho de columna de cualquier fila con la clase CSS «disable-break» al 50%. Esto asegurará que mantengamos nuestra estructura de dos columnas en los dispositivos móviles para que el diseño no se rompa. No olvides publicar tus cambios.

Una vez que el CSS está en su lugar, debemos agregar la clase CSS a cualquier fila que tenga una estructura de dos columnas.

Para empezar, agreguemos la clase CSS a la fila de dos columnas que contiene nuestras dos imágenes de productos. Abra la configuración de la fila y vaya a la pestaña avanzada. Luego ingrese «disable-break» en el cuadro de entrada Clase CSS.

Luego haga clic derecho en la opción Clase CSS y haga clic en «Copiar clase CSS».

Ahora todo lo que necesita hacer es hacer clic derecho en cada fila que tiene una estructura de dos columnas (todas las filas con los divisores/barras) y hacer clic en «Pegar clase CSS».

Ahora sus columnas mantendrán la estructura de dos columnas en los dispositivos móviles y mantendrán el diseño consistente.

Pensamientos finales

Crear un gráfico de comparación de productos en Divi es simple una vez que aprende algunas técnicas de diseño. El truco consiste en configurar filas de dos columnas con un ancho del 100 % y un ancho de medianil de 1. Después de eso, puede usar el módulo divisor para crear algunos diseños únicos de gráficos de barras. Y si desea mantener su diseño de dos columnas en dispositivos móviles, todo lo que necesita es un pequeño fragmento de CSS personalizado. Espero que este diseño de gráfico de comparación se pueda usar de muchas maneras diferentes. Siéntete libre de compartir algunas ideas con Divi Nation.

Espero escuchar de usted en los comentarios.

¡Salud!