Cómo usar secciones vacías en la división para crear elementos de diseño únicos

Cada semana, le proporcionamos Divin de diseño y paquetes de diseño gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de apariencia, también compartimos un caso de uso que lo ayudará a llevar el sitio web al siguiente nivel. Esta semana, como parte de nuestra iniciativa continua de diseño de la Divica, le mostraremos cómo usar las secciones vacías de la división para crear elementos de diseño únicos. Usaremos estas secciones vacías en la página de destino del paquete de diseño de joyero. Sin embargo, puede agregar estas secciones vacías a cualquier paquete de diseño o sitio web que cree utilizando Visual Builder de DIV.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, eche un vistazo a los elementos de diseño que crearemos:

Acercarse
Utilizamos secciones vacías para crear elementos de diseño únicos sin necesidad de cambiar la configuración de otras secciones
Ofrecemos a nuestras secciones el mismo color que el color de fondo del anterior y siguiente sección de la sección, que en este caso es blanco.
Reutilizamos un color de nuestra paleta de colores como color de fondo de nuestra nueva sección
Combinamos diferentes separadores de secciones para la parte superior e inferior para crear diferentes patrones.
Sin módulos, una sección no aparecerá correctamente en el escritorio y no aparecerá en la tableta y el teléfono
Por lo tanto, en lugar de dejarlo vacío, creamos una ilusión de una sección vacía
Agregar un módulo de texto con un carácter invisible hará el truco
Nuestras nuevas secciones serán independientes, lo que significa que podemos jugar con el borde, sin afectar la sección anterior o siguiente
Puede aplicar este diseño a cualquier página o paquete que los cuatro ejemplos que recrearemos en este tutorial son maravillosos para el paquete de joyero de diseño
Sin embargo, puede usar otros divisores de sección y experiencia con otros paquetes de apariencia
Pasos generales Agregue una nueva sección estándar antes de manejar cada uno de los ejemplos individualmente, primero pasaremos los pasos generales. Esto significa que, antes de comenzar un ejemplo, deberá seguir estos pasos. Los pasos generales son los mismos para cada uno de los ejemplos. Comience agregando una nueva sección estándar a una de sus páginas utilizando el paquete de joyería de Divic. Para ejemplos, utilicé la página de destino.
Agregue el color de fondo a la sección y luego, agregue “# F2E3DE” como el color de fondo de esta sección.

Agregue la fila con una columna Agregue una fila con una columna siguiente.

Agregue un módulo de texto invisible y complete agregando un módulo de texto invisible. Como se menciona en el enfoque de esta publicación, no podemos dejar solo una sección completamente vacía. Si hace esto, la sección desaparecerá en la tableta y el teléfono. Por lo tanto, preferiremos engañar a la sección para creer que hay contenido usando un carácter invisible. Puede agregar un carácter invisible presionando el botón ALT y escribiendo 0160 con el teclado numérico. O bien, simplemente puede clonar el siguiente carácter entre comillas: “”.

Crear sección # 1


Agregue el borde izquierdo y derecho a la sección Ahora comencemos a crear el primer ejemplo agregando el siguiente margen personalizado en la sección:

Margen superior: 200 PX (escritorio), 100 px (tableta), 50 px (teléfono) Margen inferior: 200 PX (escritorio), 100 (tableta), 50 px (teléfono)
Agregue esquinas redondeadas, luego abra la configuración del borde y agregue “100px” a la esquina superior izquierda y derecha.
Agregue el divisor inferior Finalmente agregue el siguiente separador inferior a su sección:

Estilo divisor: encontrar en la lista

Color divisor: blanco
Altura del divisor: 180 PX (escritorio), 150 px (tableta), 120 px (teléfono)
Repetición horizontal: 8x (escritorio), 5x (tableta), 4x (teléfono)
Crea la sección # 2
¿Eliminar la junta de fila que desea crear el segundo ejemplo? Comience eliminando todos los rellenos de la fila agregando “0px” al relleno superior e inferior.

Agregue el divisor superior Continuar agregando un separador superior a su sección:

Estilo divisor: encontrar en la lista


Color divisor: blanco
Agregue el divisor inferior Use el mismo divisor y para el fondo:
Estilo divisor: encontrar en la lista

Color divisor: blanco
La sección de clonación puede ser clonada en esta sección tantas veces como desee. Para lograr el mismo resultado que se muestra en el ejemplo, ¡clone la sección a la vez y allí la tiene!
Crear sección # 3

Agregue el tercer ejemplo superior Divisor usa el siguiente separador superior:


Estilo divisor: encontrar en la lista

Color divisor: blanco
Altura del divisor: 40 px (escritorio), 30 px (tableta), 20 px (teléfono)
Agregue el divisor inferior después de que haya agregado al divisor superior, cambie al divisor inferior y aplique la siguiente configuración:
Estilo divisor: encontrar en la lista

Color divisor: blanco
Altura del divisor: 140 PX
Repetición del distribuidor horizontal: 6x (escritorio), 5x (tableta), 4x (teléfono)
Crea la sección # 4
Agregue el divisor superior para el último ejemplo en línea, elija el siguiente separador superior: Estilo de divisor: Buscar en la lista

Color divisor: blanco

Agregue el divisor inferior junto con el siguiente separador inferior:
Estilo divisor: encontrar en la lista
Color divisor: blanco

Agregue un revestimiento adicional en una fila si desea aumentar la altura del diseño, también puede agregar “40 PX” al relleno superior e inferior.
Extra: imagen de fondo + superposición de gradiente
Agregue el fondo de gradiente a la sección Puede hacer que cada una de las secciones vacías sea única agregando una imagen de fondo y una superposición de gradiente en su sección. Comience agregando un fondo de gradiente en su sección:

Primer color: # f2e3de

Segundo color: RGBA (255,255,255,0)

Tipo de gradiente: lineal
Dirección de gradiente: 130 grados
Posición inicial: 25%
Agregue una imagen de fondo a la sección y luego, agregue una imagen de fondo (puede encontrar la que usé en su biblioteca de medios después de cargar el paquete de diseño del joyero de la diva) junto con la siguiente configuración:
Posición de la imagen de fondo: el centro superior
Mezcla de imagen de fondo: superposición

Vista previa Ahora que hemos dado todos los pasos, eche un vistazo final al resultado: