Usando el Div

Los módulos de texto son una parte vital de cualquier diseño de página que cree con Div, estoy seguro de que todo está de acuerdo. Normalmente se usan para mostrar el texto de una manera simple. Pero puede usar módulos de texto para crear elementos de diseño sorprendentes. En publicaciones de blog anteriores, ya le he mostrado cómo usar el texto para mejorar su diseño web. En este tutorial, continuaremos agregando opciones para elegir entre diseñar una página y usar módulos de texto. Como saben o no, hay varios tipos diferentes de textos que puede combinar en el mismo módulo de texto. Además, un módulo puede contener varios títulos, párrafos, enlaces y más. En esta publicación, utilizaremos todos estos tipos de texto para nuestra ventaja para crear elementos de bloque sorprendentes en el diseño de nuestra página.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo al resultado final en diferentes dimensiones de pantalla.

¡Vamos a empezar! Agregue un nuevo color de fondo regular Luego abra la configuración de la sección y cambie el color de fondo.
Color de fondo: # 000000

Espacio Acceda a la configuración de espaciado de su sección y agregue algunos valores de llenado personalizados.
Revestimiento superior: 280 PX (escritorio), 150 px (tableta y teléfono)
Bajo forro: 280 PX (escritorio), 150 px (tableta y teléfono)

Agregue una nueva fila a la estructura de la columna Después de haber terminado de cambiar la configuración de la sección, agregue una nueva línea utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y haga que el giro ocupe todo el ancho de la pantalla en la configuración del tamaño. Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Finalmente espaciado, agregue algunos rellenos personalizados en la configuración del espacio.

Columna 1 relleno izquierdo: 100 px (escritorio y tableta), 50 px (teléfono)
Columna 2 Lineo personalizado: 50 PX
Columna 3 trenza personalizada: 50 PX
¡Agregue el módulo de texto de título en el cuadro de contenido de la columna 1 es hora de comenzar a agregar diferentes módulos! El primer módulo que necesitaremos en la primera columna es un módulo de texto. Agregue el contenido H2 al cuadro de contenido.

Configuración de texto H2 Luego acceda a la configuración de texto H2 y realice algunos cambios:

2 Sección de fuentes: código fuente PRO
Título 2 Estilo de fuente: mayúscula
Rúbrica 2 color de texto: #ffffff
Rúbrica 2 Dimensión de texto: 100 PX
Rúbrica 2 Espaciación de letras: 24 PX
El espacio reduce el espacio en la parte superior usando un margen superior negativo.

Margen superior: -50 PX
Agregue el módulo de descripción de texto en la columna 1 Configuración de texto El segundo módulo requerido en la primera columna es un modo de texto descripción. Después de agregar el contenido, vaya a la configuración del texto y realice algunos cambios:

Texto de fuente: código fuente Pro
Color de texto: #ffffff
Orientación de texto: justificar
La dimensión reduce el ancho del módulo de texto.

Ancho: 68%
Espacio y por último, pero no menos importante, cree un espacio entre este módulo de texto y el anterior en la configuración del espacio.

Margen superior: 200 PX (escritorio), 100 PX (tableta y teléfono)
Margen inferior: 100 PX (tableta y teléfono)
¡Agregue el módulo de bloqueo de texto al cuadro de contenido de la columna 2 es hora de moverse a la segunda columna! Aquí usaremos módulos de texto para crear elementos de bloque. Una parte esencial de esto es la estructuración correcta del cuadro de contenido. En la pantalla de impresión a continuación, puede ver que usamos un título H3, un título H4, un párrafo y un enlace. Entre el título H4 y el párrafo, nos aseguramos de que también haya un espacio adicional. Los colores de fondo agregan un fondo negro al módulo de texto.

Color de fondo: # 000000

Configuración de texto cambiaremos cada tipo de texto individualmente. Comience cambiando la configuración del párrafo.
Texto de fuente: código fuente Pro

Orientación de texto: izquierda
Color de texto: Abierto
Configuración del enlace de texto Entonces, realice algunos cambios adicionales en la configuración del enlace.
Estilo de fuente de enlace: mayúscula y subrayado


Enlace de subrayador de color: #ffffff
Enlace de color de texto: # EDF000
Tamaño del enlace de texto: 16 PX
Enlace de la carta de espacio: 3 PX
Rúbrica 3 Configuración de texto Título H3 En nuestro cuadro de contenido necesita la siguiente configuración:
Título 3 Estilo de fuente: mayúscula

Rúbrica 3 Dimensión de texto: 33 PX
Configuración de texto del Título 4 Continúe abriendo la configuración del texto H4 y haciendo algunos cambios allí.
Título 4 Color de texto: # 4F4F4F

Título 4 Dimensión de texto: 19 PX
Título 4 Espacio de letras: -1 PX
Dimensión Para crear la forma exacta deseada, reduciremos el ancho del módulo de texto adicional.
Ancho: 88% (escritorio), 60% (tableta), 90% (teléfono)

El espacio deberá cambiar la configuración del espacio.
Margen izquierdo: 200 PX (tableta)

Revestimiento superior: 50 px
Revestimiento inferior: 50 PX
ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
Borde y luego agregue un borde sutil al módulo de texto. El límite: 2 PX
Color del borde: # 424242

Sombra de caja y para terminar, agregue una sombra colorida.
Posición horizontal de la sombra de la caja: 19 PX
Box Shadow Posición vertical: 16 PX

Poder de extender la sombra de la caja: -4px
Color de la sombra: # F2FF00
Clonar el bloque del texto del módulo dos veces y colocarlo en la columna 3 para ahorrar tiempo, clonaremos los módulos de bloque de texto que hemos creado dos veces y colocaremos ambos duplicados en la tercera columna de la fila.
Los cambios en el módulo de texto rojo cambian el color del texto del enlace Abra el primer módulo de texto en la tercera columna y cambie el color del enlace.
Enlace de color de texto: # E02B20

Cambie el espacio luego, acceda a la configuración del espacio y agregue un margen superior.

Margen superior: -150 PX (escritorio), -20 px (tableta), 50 px (teléfono)
Cambie el color de las sombras Cambie el color de la sombra de la caja al mismo color que se usa para el texto del enlace.

Color de la sombra: # E02B20
Cambios en el módulo de texto azul cambia el color del texto del enlace y cambia el color del segundo módulo de texto en la tercera columna.

Enlace de color de texto: # 0ff3ff
Cambie el tamaño y luego cambie la configuración de tamaño.

Tamaño: 67% (escritorio), 60% (tableta), 90% (teléfono)
Cambie el espacio para crear una cierta superposición entre este módulo y los otros dos módulos de texto, reproducir con los valores de margen personalizados.

Margen superior: -20 PX (escritorio), -30 px (tableta), 50 px (teléfono)
Margen izquierdo: -160 PX (escritorio), 200 px (tableta), 0 px (teléfono)

Cambie el color de las sombras para terminar, cambie el color del tono de caja en el mismo color azul utilizado para el texto del enlace y esté terminado! Shadow Color: # 0ff3ff
Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.
Pensamientos finales Te sorprendería cuántos modelos únicos puedes hacer usando módulos de texto en combinación con Div integrado.No se requiere un código CSS adicional.En esta publicación, le mostré cómo usar diferentes tipos de texto para crear elementos de bloque increíbles en el diseño de su página de la Divic.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.