Cómo diseñar un diagrama de comparación de productos creativos con div Div

Un diagrama de comparación de productos puede ser una forma extremadamente efectiva de promover nuevos productos, junto con sus características actualizadas. La apariencia visual de un diagrama es más atractiva para los usuarios que el texto simple. Y la estructura de una comparación de lado a lado permite a los usuarios ver fácilmente la diferencia entre cada característica del producto. En este tutorial, le mostraré cómo diseñar un diagrama de comparación creativo de los productos con Div. Y este aspecto de diseño se puede usar para comparar casi cualquier cosa. Por ejemplo, veo que este es un aspecto perfecto para estudios de casos.
Vamos a empezar. Tire con el ojo aquí hay una breve presentación de la tabla de comparación que construiré en este tutorial.


¿Qué necesita para este tutorial para este tutorial? Necesita lo siguiente:
El tema de la división (instalado y activo)
Dos imágenes (alrededor de 800 PX con 450 px) para servir como imágenes de su producto en la tabla de comparación.
Crear el título y las imágenes del producto para comenzar, crear una nueva página, implementar Visual Builder, luego elegir crear su página desde cero.

Luego agregue un vistazo con una columna en la fila en 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 Gradiente de fondo izquierdo: RGBA (242.90,71.0.14) Color de fondo derecho: RGBA (255,255,255,0) Tipo de gradiente: Coloque el gradiente sobre el fondo: Sí

Guarde la configuración. Ahora abra la configuración de la fila y déle a la fila un ancho 100%personalizado.

Luego agregue un módulo de texto en una fila con una columna con la siguiente configuración: para contenido, ingrese este html: & lt; h2 & gt; comparar & lt;/h2 & gt; vs
Texto de fuente: Montserrat Texto Fuente Peso: Ultra Bold Estilo de texto Texto: TT (Eppercase) Texto Color de texto: RGBA (255,255,255,0,3) Tamaño de texto: 3VW Altura de texto: 1.8em Orientación del texto: Centro: Centro
Luego, actualice las opciones de diseño de título H2 y brinde al módulo un margen inferior personalizado para crear el efecto superpuesto. 2 encabezado de fuentes: Montserrat Sección 2 Color de texto: RGBA (255,255,255,0,3) Sección 2 Tamaño de texto: 13VW Sección 2 Espaciado de letras: 1 VW Margen personalizado: -13VW ABAJO

Parte de su texto estará oculto por el momento, pero aparecerá después de agregar el otro contenido. Dos crean segundo, duplica la primera fila y luego elimina el módulo de texto en la fila duplicada. Luego actualice la estructura de la columna en una fila con dos columnas.

Continuar y actualizar la configuración de la fila de la siguiente manera:

Ancho de canaleta personalizado: 1 Columna 1 trenza personalizada: 2VW Right Columna 2 Trenza personalizada: 2VW izquierda
Aquí pondremos las imágenes de los dos productos que queremos comparar. En la columna izquierda de nuestra fila, agregue la imagen con el módulo de imagen. Para este ejemplo, uso una imagen PNG de 800 x 459 PX. Luego actualice la configuración del módulo de imagen de la siguiente manera: Ancho: 70% de alineación del módulo: Reinicio personalizado correcto: 40px hacia abajo

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

En el módulo de imagen en la columna izquierda, agregue un módulo de texto con el siguiente contenido de texto: “Producto antiguo”. Luego ingrese el módulo de texto desde la primera fila anterior y copie los estilos de texto. Luego coloque el cursor sobre el nuevo módulo de texto con el texto “Producto antiguo” y pegue los estilos de texto usando el clic derecho.

Esto se ajustará a 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: Tamaño del texto del texto: 16 PX Orientación del texto: ahora mismo acceda a la pestaña avanzada y coloque los siguientes CSS personalizados en el cuadro de entrada principal:

TEXT-ALEGIO: ¡Correcto! IMPORTANTE;

Esto es necesario, porque la diva ajustará implícitamente el texto al texto a la izquierda en los teléfonos inteligentes. Este fragmento CSS anulará esto y se asegurará de que permanezca alineado a la derecha y en el teléfono inteligente.
Guarde la configuración. Luego, copie el módulo de texto y péguelo debajo de la imagen en la columna derecha. Cambie el contenido del texto a “nuevo producto” y actualice la orientación del texto a la “izquierda”. Esto es lo que tenemos hasta ahora.
Creando el diagrama de comparación del producto para crear nuestro diagrama de comparación, utilizaremos una sucesión de dos filas de columnas, cada una por separado a través de una fila de columna. Las dos filas de columnas mantendrán nuestras coloridas barras. Y un giro de una sola columna mostrará el nombre de la característica asociada con los valores de la barra.

Cree una nueva fila con dos columnas y actualice la configuración de la fila de la siguiente manera: Ancho personalizado: 100% Ancho de canaleta: 1 ENLAVIO PERSONALIZADO: 0PX Down Column 1 Fraidura personalizada: 2VW Right Columna 2 Fraida personalizada: 2VW Left

Las columnas personalizadas 1 y 2 crean el espacio que necesitamos en el medio de nuestros gráficos de barras que agregaremos. En la columna izquierda agregue un módulo divisor y actualice la configuración de la siguiente manera: Color de fondo izquierdo: RGBA (81.91,214, 0.25) Fondo derecho Color gradiente: RGBA (255,255,255,0,15) Dirección de gradiente: 90 grados Posición inicial: 35% Color: # 515bd6 Peso divisor: 23 PX (este valor debe ser igual al valor del divisor, que es 23px predeterminado para que el divisor tenga el mismo ancho que el fondo del módulo) trenza personalizada: 70% a la izquierda (esto empuja al divisor al 75% derecho, lo que resulta en un gráfico de 25% a la derecha) gráfico)
Guarde la configuración. Ahora copie el módulo divisor en la columna derecha de la misma fila. Luego, actualice la siguiente configuración: Gradiente de fondo izquierdo: RGBA (255,255,25,0,15) Color de fondo derecho: RGBA (242,90,71,0.25) Posición inicial: 70% Color: # F25A47 Fuera personalizada: 30% correcto (( Esto empuja al divisor al 30% izquierdo, lo que resulta en un gráfico de gráfico con 70% restante).

Ahora que la primera fila de barras está en su lugar, debemos agregar una fila con una columna debajo para poner nuestra etiqueta de características del producto. Cree una fila con una columna con un relleno personalizado de 0 PX en la parte superior. Luego agregue un nuevo módulo de blurb y actualice la configuración del módulo de blurbs de la siguiente manera:

Contenido: “Característica” Use el icono: Sí Icono: ver captura de pantalla

Icono de color: RGBA (255,255,255,0,3) Use el tamaño del icono Fuente: Sí Fuente de tamaño de icono: 30 PX Orientación de texto: Fuente Cuerpo: Montserrat Peso corporal: Ultra Bold Body Text Color: RGBA (255.25.255.0.3) Cartas del cuerpo de espaciado: 2 PX Margen personalizado: -20 pestaña avanzada PXSUB, puede eliminar el margen predeterminado debajo del icono de la propaganda agregando los siguientes CSS personalizados en la imagen de la propaganda CSS: Margen -Bottom: 0px;

Ahora que tiene su primer ejemplo de operación de la función de comparación de productos, todo lo que tiene que hacer es copiar las dos líneas que componen la función de comparación (gire con las dos barras / separadores y la fila con el módulo de la propaganda). Creo que es el más fácil usar Ctrl + C (o comando + c) para copiar cada fila y luego Ctrl + V (o comando + v) para que se mantenga entre sí. Luego, simplemente actualice el relleno personalizado para separadores duplicados para mostrar diferentes valores del gráfico de barras.
También puede ajustar la posición de inicio y finalización del gradiente de acuerdo con el valor de llenado personalizado que elija. Por ejemplo, si ofrece un separador de columna izquierda un relleno izquierdo del 60%, puede ajustar la posición inicial del gradiente al 30% (exactamente la mitad de la distancia de relleno).

Para un último toque, le recomendamos que agregue un fondo de divisor en su sección para este ejemplo, agregaré lo siguiente: Divisor superior: Ver Captura de color del divisor: RGBA (255,255,255,05) Altura: 19 VW

Aquí esta el resultado final.

También me gusta el diseño del diseño cuando cambio el color de fondo de la sección a 000314.
Realización del diseño receptivo en la división, cualquier fila con dos columnas se acumulará automáticamente uno encima del otro en dispositivos móviles. Por supuesto, esto romperá el diseño en el móvil. Para remediar esto, tendrás que hacer dos cosas. Primero, debemos agregar un pequeño fragmento de CSS personalizado dentro del personalizador del tema. @Media (max-width: 980px) {. Disable-break .et_pb_column {

Ancho: ¡50%! Importante;

margen de fondo: 30px;

}

}
Este código ajustará el ancho de la columna de cualquier fila con la clase CSS “Desactivar” al 50%. Esto asegurará que mantengamos la estructura de las dos columnas en los dispositivos móviles, de modo que el diseño no se rompa. No olvides publicar los cambios. Una vez que CSS está en su lugar, debemos agregar la clase CSS a cualquier fila que tenga una estructura de dos columnas. Para empezar, agregemos la clase CSS con dos columnas que contienen las dos imágenes de nuestro producto. Abra la configuración de la fila y acceda a la pestaña avanzada. Luego ingrese el “Desactivado” en el cuadro de introducción de la clase CSS.
Luego, haga clic en la opción de clase CSS y haga clic en “Copiar la clase CSS”.
Ahora todo lo que tiene que hacer es hacer clic derecho en cada fila que tenga una estructura de dos columnas (todas las filas con separadores / barras) y haga clic en “clase CSS Lipire”.
Ahora sus columnas mantendrán la estructura de dos columnas en dispositivos móviles y mantendrán el diseño coherente.