Cómo crear secciones vibrantes para su próximo div.

Sabemos que la mayoría de ustedes siempre buscan nuevas formas de hacer que los sitios que cree únicos. Con Div, hay muchas formas en que su sitio se distingue de los demás. Hoy, le mostraremos cómo puede crear valores impresionantes utilizando solo las opciones construidas del DIV. Este enfoque es excelente si desea crear un diseño increíble, mantener la estructura general de la página y seguir navegando sin problemas. ¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo al resultado que tenemos la intención de obtener diferentes tamaños de pantalla:

¡Empecemos a crear! Agregue una nueva sección regular de espaciado, comience abriendo una nueva página, cambiando a Visual Builder y agregando la primera sección. Sin agregar filas o módulos, abra la configuración de la sección y agregue algunos rellenos:
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Agregue una nueva estructura de columna de fila Continuar agregando una fila utilizando la siguiente estructura de columnas:

Color de fondo luego abra la configuración de la fila y agregue un color de fondo a toda la fila:
Color de fondo: # F9F9F9

Columna 1 Gradiente de fondo Luego, agregue un fondo sutil de gradiente a su primera columna. Esto ayudará a crear la superposición de los títulos de las secciones entre las columnas.
Color 1: # 0031C4
Color 2: # 00eff
Columna 1 Dirección de gradiente: 125deg

Dimensión y cambie el espacio espacial para asegurarse de que ocupa todo el ancho de la pantalla.
Haga esta fila ancho completo: sí
Use el ancho de la cuneta personalizada: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí

Finalmente espaciado, cambie la configuración de espacio de acuerdo con los diferentes tamaños de pantalla: revestimiento superior: 0 PX
Finamiento inferior: 0 PX
Columna 2 revestimiento superior: 200 px
Columna 2 revestimiento inferior: 200 px
Columna 2 relleno izquierdo: 350 px (escritorio), 50 px (tableta y teléfono)
Columna 2 Reinicio recto: 50 PX
Agregue el módulo de texto del título de la sección en la columna 1 Configuración de texto H2 Ahora que todas las configuraciones de fila están en su lugar, podemos comenzar a agregar módulos. Comenzaremos con la primera columna. Aquí, la única forma en que necesitamos es un módulo de texto. Después de agregar el contenido H2 al cuadro de contenido, continúe y modifique la configuración de texto H2:

Título 2 Fuente de peso: Ultra Bold
Título 2 Estilo de fuente: mayúscula
Título 2 Alineación de texto: Centro
Rúbrica 2 color de texto: #ffffff
Rúbrica 2 Dimensión de texto: 150 PX
Título 2 Altura de la línea: 1.25em
Título 2 TEXTO Sombra Longitud vertical: -0.55em
Título 2 Color de la sombra de texto: RGBA (0.255,255,0,25)
Espaciar la superposición entre las columnas es diferente en el escritorio, la tableta y el teléfono. Para crear superposición, haremos algunos cambios en la configuración de espacio de nuestro módulo de texto:


Margen superior: 325 PX (escritorio), 150 px (tableta y teléfono)
Margen inferior: 325 PX, -120 PX (tableta), -110 PX (teléfono)
Margen derecho: -100% (escritorio), 0 px (tableta y teléfono)
Filtro por último, pero no menos importante, usaremos un modo de mezcla para crear la diferencia de color para el texto que aparece.

Modo de mezcla: superposición
Agregue el módulo de texto de título en la configuración de Texto de la columna 2 H3 Pasemos a la segunda columna. Allí, el primer módulo que necesitamos es un modo de texto. Después de agregar su contenido H3, cambie la configuración de texto H3: Título 3 Peso de la fuente: semi audac.

Rúbrica 3 Color de texto: # 00eff
Rúbrica 3 Dimensión de texto: 60 PX
Rúbrica 3 Espaciación de letras: -3px
Espacio Cree espacio agregando el margen inferior a continuación:
Margen inferior: 50 PX

Agregue el módulo divisor en la columna 2 color divisor El segundo módulo que necesitamos es un módulo divisor. Abra la configuración de color y cambie el color para que coincida con la paleta de diseño:
Color divisor: # 00ffff

Dimensión Entonces, cambie la configuración de tamaño:
Altura: 56 PX


Ancho: 75%
Agregue el módulo de descripción de texto en la columna 2 Configuración de texto Continuar agregando un módulo de texto Descripción utilizando la siguiente configuración de texto:
Tamaño del texto: 17 PX

La altura de la línea de texto: 1.3em
Orientación de texto: justificar
Dimensión Cambiar la configuración de tamaño adicional:
Tamaño: 70% (escritorio), 100% (tableta y teléfono)

Espacio agregar espacio debajo de este módulo usando un margen inferior:
Margen inferior: 50 PX

Agregue un módulo de botón al botón de configuración de la columna 2 El último módulo que necesitaremos en esta columna es un módulo de botón. Después de agregar CTA, cambie la configuración del botón:
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 17 PX
El color del texto del botón: #ffffff
El color de fondo del botón: # 00eff
El ancho del nudo del botón: 0 PX
Botón Raza: 100 PX
Distancia entre letras y botones: -1 PX
Peso de fuente: Ultra Bold
Estilo de fuente: cruce en mayúsculas y para darle al botón un aspecto más limpio, agregaremos algunos forros:
Revestimiento superior: 10 px
Finamiento inferior: 10 PX


Revelaje izquierdo: 30 PX
Revestimiento derecho: 30 PX
Box Shadow por último, pero no menos importante, usaremos una sombra de caja sutil para agregar un poco de profundidad a nuestra sección:
Poder de poco claro de la sombra de la caja: 54 px
Poder de extender la sombra de la caja: -8px

Color de la sombra: RGBA (0.0,0,0,3)
La sección de clonación cambia todas las copias para crear la segunda sección, simplemente clonaremos la que ya hemos creado y luego cambiaremos toda la copia.
Cambie el color de fondo de la fila para esta nueva sección, usaremos otra paleta de colores. Comience cambiando el color de fondo de la fila.
Color de fondo: #efefef

Cambie los antecedentes del gradiente de la columna 1 y luego elija otro fondo de gradiente.

Color 1: # 5F00A8
Color 2: # 9000ff

Cambie el título del color del tono también, combinamos el color de las sombras de texto con nuestra nueva paleta de colores:
Título 2 Color de la sombra de texto: RGBA (255,0,255,0,24)
Cambie la configuración de espacio para el título de la sección De acuerdo con la longitud de la copia que usa, deberá jugar con el borde derecho negativo.

Margen derecho: -110% (escritorio)
Cambie el color del texto del texto del título y luego cambie el color del texto del título El módulo de texto en la columna 2.

Rúbrica 3 Color de texto: # 9000ff
Cambie el color del separador igual, haga que el color del separador coincida con el diseño.

Color: # ff00ff
Cambie el color de fondo del botón para terminar, deberá cambiar el color de fondo del módulo del botón.

El color del fondo del botón: # 9000FFRIZIIizización Ahora que hemos recorrido todos los pasos, eche un vistazo final al resultado final en diferentes tamaños de pantalla:
Pensamientos finales Hay muchas maneras en que puede hacer que su diseño web distinga de los otros sitios web allí.En esta publicación, le mostré cómo crear títulos de secciones y secciones increíbles en general, utilizando solo las opciones incorporadas del DIV.Combinamos fondos de gradiente de columna con módulo de texto superpuesto, sombras de texto y modos de mezcla para crear un resultado final sorprendente.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.