8 técnicas para hacer diseños limpios y abstractos con div Div

La decisión sobre el estilo que desea seguir su sitio puede llevar mucho tiempo. No es una sorpresa si considera todos los estilos de diseño que puede seguir. El estilo que elija será una representación de todo lo que representa su sitio y ciertamente desea que coincida con las tendencias de diseño en 2018. En esta serie de estaciones, exploraremos algunos de los más populares y hermosos allí:
Limpio y abstracto
Mínimo
Departamento
Audaz y colorido
Para cada uno de los estilos de diseño, revisaremos algunas técnicas de división que harán que sea mucho más fácil alcanzar este tipo de diseño. Comenzaremos con el estilo de diseño limpio y abstracto. Compartiremos 8 técnicas que puede aplicar a sus elementos de diseño utilizando el Visual Builder de DIV y, más tarde, ¡crearemos dos ejemplos increíbles desde cero!
¡Vamos a eso! 1. Evite los colores de fondo de la sección de color principal en la mayoría de los casos, el término “limpio” también significa mucho “blanco”. Esto no significa que deba evitar los colores en general, pero evitar los colores en los elementos estructurales principales de su sitio web (como secciones) puede contribuir mucho a proporcionar a los visitantes una impresión limpia.

2. En su lugar, use fondos sutiles para reducir la sensación de la sección blanca y blanca, no tiene que centrarse en la configuración de la sección. Por ejemplo, puede crear fácilmente un diseño sutil y abstracto utilizando imágenes de fondo de fondo. Solo cubrirá el fondo de su fila y dejará suficiente espacio en blanco para mantener esa sensación general y blanca. El fondo del modelo que usa debe contener un color de fondo blanco y solo una parte de ese fondo blanco debe cubrirse con patrones. Asegúrese de no agregar ningún patrón a los bordes o esquinas. Esto le permite mezclar sus fondos y secciones. A continuación, en esta publicación, en la parte donde recrearemos los ejemplos, ¡podrá guardar la imagen de la imagen y podrá usarla para sus propios proyectos de diseño web! 3. Rompe el modelo con los colores de fondo del módulo blanco, la jerarquía de diseño que contiene DIV (sección → fila → columna → módulo) le permite hacer lo mismo que el fondo del modelo promedio. Usando un color de fondo blanco para los módulos de su elección, puede anular el fondo del modelo promedio que ocupa su módulo, en combinación con un fondo de sección blanca, le permite hacer módulos y fondos de sección para combinar, manteniendo el mismo Tiempo el fondo del modelo clasificado intacto para otros módulos que usa.

4. Cree el contraste con las dimensiones de la fuente El uso de un fondo de sección blanca significa que tendrá que buscar elementos sorprendentes en otros lugares. Una de las cosas que puede hacer para llamar la atención es la creación de contraste en el tamaño de la fuente. Cuanto mayor sea la diferencia de tamaño entre el subtítulo y el título principal, por ejemplo, más aparecerá el título principal. Use el espacio para las letras para la elegancia como el juego con dimensiones de fuentes, el uso de letras adicionales en diferentes puede traer resultados sorprendentes. Ayuda a mejorar el contraste entre el contenido que comparte sin tener que integrar una paleta multicolor en el diseño. Al igual que el tamaño de las fuentes, atrae la atención de su visitante, pero de una manera diferente al gran tamaño de las fuentes.

6. Use CTA con gradientes, divisores y secciones vacías para fines abstractos, otra forma de equilibrar el diseño limpio y blanco de su sitio web es usar colores de manera abstracta. Utilizando colores degradados para su impulso, los divisores y las secciones vacías en combinación con secciones son algunas de esas cosas que le permitirán crear resultados sorprendentes sin perder ese factor limpio y blanco.

7. Cree la profundidad con la caja de sombras sutil en combinación con elementos de diseño degradados y abstractos. No es el tipo de profundidad “difícil de perder”, sino del tipo sutil que te ayuda a levantarlo con una muesca arriba. Las sombras de caja sutil se caracterizan por una alta resistencia de desenfoque en combinación con una resistencia reducida al estiramiento y un color claro, que no atrae mucha atención, pero capacita a los otros elementos de diseño en su sitio web. 8. Se superpone los elementos de diseño con margen negativo. Mencioné el uso de los elementos de diseño, como separadores y secciones vacías, en combinación con separadores de secciones. Estos elementos ya son hermosos, pero para que su diseño sea más complejo (de manera positiva) y abstracta, puede usar fácilmente un margen superior negativo para hacer diferentes elementos de diseño en su sección superpuesta. También puede cambiar este margen superior negativo dependiendo de cómo desee ver en diferentes tamaños de pantalla, ya sea un escritorio, tableta o teléfono.

Vista previa ahora, que hemos pasado por todas las técnicas de división, es hora de ponerlas en práctica. Echemos un vistazo al diseño que recrearemos en diferentes tamaños de pantalla, mientras mantenemos diferentes técnicas.


¡Empecemos a crear! Pasos generales Agregue una nueva sección. Crearemos dos ejemplos diferentes. Los ejemplos son similares, pero difieren en términos de elementos de diseño. Para aliviar el proceso, primero viajaremos los pasos generales y una vez que se completen, nos centraremos en cada uno de los ejemplos individualmente. Comience abriendo una nueva página usando Visual Builder A Div y agregue una nueva sección estándar. Esta sección contiene, por defecto, un color de fondo blanco y, por lo tanto, lo conservaremos. Una nueva fila de la estructura de la columna, agregue una fila a su sección que contiene una columna.

Imagen de fondo Como mencioné en una de las técnicas, puede mejorar fácilmente la sección blanca utilizando un fondo de modelo para su turno. Continúe y guarde la imagen a continuación, la cargue y úsela con el siguiente fondo de configuración de imagen:

Tamaño de la imagen de fondo: adecuado

Posición de la imagen de fondo: Centro

Repetir la imagen de fondo: sin repetición

Dimensión luego abra la configuración de tamaño y active el “Haga esta fila completa ancho”.
Agregue el módulo de texto no. 1 Color de fondo ahora, ¡comencemos a agregar módulos! Comenzaremos con un subtítulo y, como se menciona en la técnica número 2, romperemos el modelo para este módulo utilizando un fondo blanco.
Configuración de texto Abra la configuración del texto y aplique los siguientes cambios:
El peso de la fuente de texto: en negrita


Text -Text estilo: mayúscula

Color de texto: # 000000

Tamaño del texto: 18 PX
Texto de la carta de espacio: 29 PX (tableta), 25 PX (tableta), 18 PX (teléfono)
Orientación de texto: centro
Espacio para crear un espacio entre el comienzo del modelo y nuestro módulo de texto, agregaremos “100px” al borde superior de nuestro módulo de texto. Agregue el módulo de texto no. 2 Configuración de texto justo debajo del módulo de texto anterior, continúe y agregue una nueva que contenga el título que desea mostrar. Abra la configuración de texto de su módulo y realice los siguientes cambios:
El peso de la fuente de texto: Ultra Bold
Color de texto: # 000000
Tamaño de texto: 200 PX (escritorio), 130 px (tableta), 100 px (teléfono)


Texto de la carta de espacio: -6px

La altura de la línea de texto: 1em
Agregue una tercera vía y el último botón del módulo al botón es un módulo de botón. Después de agregar la copia, acceda a la configuración de alineación y use el botón de alineación central.
Botón de configuración Para cambiar la apariencia del botón, abra la configuración del botón y aplique los siguientes cambios:
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 16 PX
El color del texto del botón: #ffffff


Color de gradiente # 1: # FD5056

Color de gradiente # 2: # BD3CB5
Dirección de gradiente: 153 grados
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 54 PX
Peso de fuente: Ultra Bold
Estilo de fuente: mayúscula
El espacio para proporcionar suficiente llenado del botón es una parte importante de la creación de una CTA legible y atractiva. Abra la configuración de espacio del botón y aplique el siguiente margen y el llenado personalizado:
SUS y margen inferior: 100 PX
Revestimiento superior e inferior: 15 px
Revestimiento izquierdo y derecho: 40 PX
Box Shadow Por último, pero no menos importante, crearemos profundidad (como se menciona en el número 7) para crear un diseño atractivo:


Poder de la falta de claro de la sombra de la caja: 80 pxpute de la distribución de los adornos: -7px
Box Sombe Color: RGBA (0.0,0,0.34)
Ejemplo no. 1: Pasos adicionales
Agregue una nueva línea a la estructura de la columna ahora, que hemos recorrido los pasos generales, para crear los dos ejemplos diferentes individualmente. Para el primer ejemplo, comience agregando una nueva fila en la misma sección que la siguiente estructura de la columna:

Dimensión Abra la configuración de la fila y permita que sus módulos ordinarios ocupen todo el ancho de la pantalla utilizando la siguiente configuración de tamaño:
Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Agregue un modo Divisor Agregar y ocultar el divisor Agregar un módulo divisor a su vez y deshabilitar la opción “Mostrar” en la configuración de visibilidad en la pestaña Contenido.

Antecedentes de gradiente En cambio, utilizaremos un fondo de gradiente para nuestro divisor:

Color de gradiente # 1: # FD5056
Color de gradiente # 2: # BD3CB5
Dirección de gradiente: 168 grados
Espacio para hacer que el módulo divisor se superponga con nuestra fila anterior y sus módulos, usaremos “-400px” para el margen superior.

Opacidad y para que el título del módulo de texto de nuestra fila anterior continúe apareciendo, ajustaremos la opacidad de la configuración de filtros al “43%”.


Box Shadow Por último, pero no menos importante, aplicaremos una sombra de una caja sutil para mejorar la profundidad de nuestro diseño:
Poder de poco claro de la sombra de la caja: 80 px
Poder de extender la sombra de la caja: 3 PX
Box Sombe Color: RGBA (0.0,0,0.49)

Ejemplo no. 2: Pasos adicionales

Cambie el espacio del módulo de texto no. 1 Para el segundo ejemplo, tendremos que hacer algunos cambios en nuestros módulos existentes a partir del primer módulo de texto. Abra la configuración del espacio y agregue el siguiente margen personalizado: Margen inferior: 150 PX (teléfono)

Cambie el espacio del módulo de texto no. 2 Abra más el segundo módulo de texto y use la siguiente configuración de espaciado:
Margen inferior: 150 PX (tableta y teléfono)
Cambie el color del texto del botón luego, abra el módulo del botón y cambie el color de su texto a “# BD3CB5”.
Elimine el fondo de fondo Continuar y eliminar el fondo de gradiente de su módulo de barril.

Agregue el color de fondo del botón y, en su lugar, agregue un color de fondo blanco.

Agregue un nuevo fondo de gradiente Después de haber terminado de cambiar los módulos existentes, puede continuar y agregar una nueva sección debajo de la existente. Abra su configuración de sección y use los siguientes antecedentes de gradiente para esto:
Color de gradiente # 1: # FD5056

Color de gradiente # 2: # BD3CB5
Dirección de gradiente: 165 grados

Divisor superior Continúe agregando un separador superior a su sección:

Estilo divisor: encontrar en la lista

Color divisor: #ffffff

Separador inferior Use la misma configuración para el divisor inferior.
Espacio de lo último que tendrá que hacer para su nueva sección es cambiar la configuración del espacio:
Margen superior: -460px
Margen inferior: 100 px


Revestimiento superior e inferior: 0 px
Agregue una nueva línea a la estructura de la columna ahora, para asegurarse de que nuestra sección aparezca en todas las dimensiones de la pantalla, agregaremos una fila con un módulo divisor invisible. Comience agregando la fila primero: agregue un módulo divisor, oculte el divisor Agregue el módulo divisor y asegúrese de apagar la opción “Pantalla” en la configuración de visibilidad y ¡ha terminado!
Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales En esta publicación, le mostré algunas técnicas excelentes sobre cómo obtener un estilo de sitio limpio y abstracto. Esta es la primera serie de la serie sobre cómo hacer hermosos estilos de diseño utilizando algunas de las mejores opciones divididas. En la próxima serie, compartiremos técnicas sobre cómo obtener más estilos de diseño increíbles. Si tiene alguna pregunta o sugerencia, asegúrese de dejar una sección de comentarios a continuación.