homefinance blog
La tipografía de apilamiento es una técnica fácil y efectiva para crear hermosos modelos de título en la división. La tipografía a menudo se usa estrictamente como un elemento de diseño abstracto de manera que realmente no contribuya al contenido leído por los motores de búsqueda. Pero también puede ser creativo diseñando títulos reales (H1, H2, etc.) con algunas técnicas DIV. En este tutorial, usaré Divic para crear 5 modelos de título diferentes con tipo apilado. Esperamos que pueda usar estos modelos como una inspiración para sus propios modelos de título. Vamos a empezar. Tirar con el ojo es un vistazo a los 5 modelos.
Diseño # 1
Diseño # 2
Diseño # 3
Diseño # 4
Diseño # 5
Construiremos estos modelos desde cero. Entonces, para comenzar, crear una nueva página, dar un título a su página e implementar Visual Builder. Seleccione la opción “Construir desde cero” y estará listo para comenzar a construir. Para simplificar el proceso de creación de cada uno de los 5 modelos, reproduciré secciones para comenzar para el siguiente diseño. Por lo tanto, sería mejor crear estos modelos, comenzando con el primero. Título de diseño no. 1 Para este primer diseño, le mostraré cómo apilar verticalmente el texto del título y enfocarlo en el medio de la fila. También agregaré dos capas de gradiente (una por sección y otra en una fila) sobre la imagen de fondo para proporcionar una superposición blanca semi -transparente equilibrada, que combina perfectamente con los fondos blancos. El resultado es sutil, pero único y limpio.
Antes de agregar nuestro módulo de texto, primero lidiemos con la configuración de secciones y filas.Esto facilitará ajustar el módulo más tarde.Acceda a la configuración de la sección y actualice lo siguiente: Agregue una imagen de fondo (al menos 1920 PX ancho) Color izquierdo del gradiente de fondo: #ffffff El color derecho del gradiente de fondo: RGBA (255,255,255.0) Coloque el gradiente sobre la imagen de fondo: Sí Luego, actualice la configuración de la fila de la siguiente manera: Color izquierdo del gradiente de fondo: RGBA (255,255,255.0) Color derecho del gradiente de fondo: #fffff Ancho personalizado: 100% de alineación personalizada: 0 PX arriba, 0 PX abajo
Ahora podemos agregar nuestro módulo de texto a la columna central de nuestra fila de tres columnas. Luego actualice la configuración del módulo de texto de la siguiente manera: reemplace el contenido simulado en el cuadro de contenido con un encabezado H2 que escribe “diseño” de la siguiente manera:
diseño
Luego actualice el resto de la configuración de la siguiente manera: 2 encabezado de fuente : Cairo Rubrica 2 Fuente de peso: Título regular 2 Estilo de fuente: Eppercase (TT) Sección 2 Tamaño de texto: 8VW Ancho: 58% (escritorio), 16% (tableta), 18% (teléfono inteligente) Módulo de mezcla: Centro de margen personalizado: – – – 10VW arriba, -10VW Down Los valores de ancho personalizado combinados con el tamaño del texto del encabezado de 8VW son la clave para hacer este diseño. El ancho personalizado aprieta el texto para que cada letra se reúna uno encima del otro. El valor porcentual del ancho cambia drásticamente en la tableta, porque el tamaño de la columna que contiene el módulo de texto va de 1/3 al ancho completo. La configuración del texto del encabezado a una unidad de longitud de VW (ancho de la ventana) permitirá que el texto se adapte perfectamente al tamaño de la ventana del navegador. Finalmente, para concluir el diseño con un borde a la derecha e izquierda. Ancho de acogida derecha: 4 PX Ancho del borde izquierdo: 4 PX
Aquí esta el resultado final.
Título de diseño no. 2 Para el siguiente ejemplo, voy a cambiar un pequeño diseño, de modo que el texto del título se rompa en dos y apilado en lugar de que cada letra se apilara individualmente. También agregaré un subtítulo bajo el título principal para otro aspecto. Al cuadro de contenido Agregue el siguiente título H3:
Nuestro proceso
Luego agregue un fondo blanco a: Wallpaper: #FFFFFF
En la pestaña Diseño, actualice lo siguiente: Texto de 2 -Título de tamaño: 10 VW Ancho: 100% (escritorio), 32% (tableta), 33% (teléfono inteligente) Título 3 Fuente: Título condensado de Ubuntu Alineación de texto: Rúbrica 3 Dimensión de texto : 32 px (escritorio), 20 px (tableta), 16 px (teléfono inteligente) y luego actualice el espacio para el módulo de texto para que sea más receptivo en el móvil: margen personalizado (tableta): -5VW superior, -10VW margen personalizado ( teléfono inteligente): -5VW TOP, -12VW ahora retire el gradiente de fondo en la sección y uno por uno. Luego agregue un pequeño relleno en su giro actualizando la siguiente configuración de línea:
Revestimiento personalizado (escritorio): 5VW arriba, 5VW Down Lining personalizado (tableta): 0VW arriba, 0VW aquí está el resultado final.
Diseñando el Título # 3 Esta vez compensaremos el título de la izquierda y volveremos al apilamiento de cada letra verticalmente. Luego cambiaré la fuente y le daré a la fila un borde adecuado para completar los bordes del módulo. Duplique la segunda sección de diseño y luego actualice la configuración del módulo de la siguiente manera: primero elimine el título H3 en el cuadro de contenido. Título 2 Fuente: Ubunto Rúbrica condensada 2 Tamaño de texto: 6VW Ancho: 54% (escritorio), 16.4% (tableta), 17.5% (teléfono inteligente) Módulo de alineación: izquierda (predeterminada)
Para ajustar los dispositivos móviles, actualice la siguiente distancia: el margen personalizado (tableta): -15VW El margen personalizado (teléfono inteligente): -17VW ahora vaya a la configuración de la fila y actualice lo siguiente para hacer el espacio correcto. Revestimiento personalizado: 2VW arriba, 2VW abajo, 10 VW restante
Luego agregue un borde en fila para completar el borde del módulo. El ancho del borde superior: 4 px El ancho del borde inferior: 4 px
Ahora solo hay uno para disparar sobre nuestro módulo en la columna izquierda de la fila. Verifique el resultado final. Proyecting Título # 4 Para el último diseño de título, haré el título apilado completamente alineado y luego agregaré un color y efecto en frío.
Primero, actualice la configuración de la fila para deshacerse del llenado de la izquierda.
Luego actualice la configuración del módulo de texto para incluir lo siguiente: Wallpaper: # 5B7796 Color de texto: Abrir 2 Fuente: Cairo Título 2 Estilo de fuentes: Sección predeterminada 2 Texto: 10VW
Tamaño del texto del texto: Finamiento personalizado de 5 VW: 2 VW hacia arriba, 2 VW hacia abajo, 4 VW a la izquierda, 4VW Restauración derecha Estilos de borde a los valores predeterminados, luego actualice la nueva configuración del borde de la siguiente manera: Edge de ancho recto: 0.2EM Borde recto: #FFFFFF el margen inferior de ancho : 0.2em Color de borde derecho: #ffffff
Ahora, como puede ver, el valor de 0.2EM para el borde puede parecer pequeño. Esto se debe al hecho de que el valor de EM se basa en el valor de la fuente del cuerpo, que cambiamos en 5VW especialmente por este motivo. Como queremos que el ancho del borde se adapte junto con el tamaño de nuestro título, debemos darle al texto del cuerpo un valor de la unidad de longitud VW que se escalará con el tamaño del navegador. Ahora dale una sombra de caja para un hermoso efecto de cuadrícula roto. Box Sombra: Ver captura de pantalla Posición horizontal de la caja: 20 PX Box Sombra Posición vertical: 20 PX Color de sombra: # 5B7796 Posición de sombra de la caja: sombra exterior
Luego actualice el tamaño del módulo para dispositivos móviles. Ancho: 50% (escritorio), 13% (tableta), 16% (teléfono inteligente)
Para un último paso, elimine el relleno y el borde de su fila. Luego verifique el resultado final. Dipping Título # 5 Para este último diseño de título, simplemente cambiaremos el espacio para ampliar el módulo de texto. Esto creará un diseño similar al del Título # 2. Primero, abra el módulo de texto y agregue el siguiente texto bajo su título H2:
Nuestro proceso
luego actualice la configuración de diseño de la siguiente manera: Título 2 Fuente Estilo: ancho de mayúsculas (TT): 94% (escritorio), 29% (tableta), 29% (teléfono inteligente) y luego actualice el espacio de la siguiente
Aquí esta el resultado final.
Receptivo El truco para hacer que estos modelos se vean bien en el móvil es ajustar el tamaño y los bordes del módulo de texto para escalarlos con la ventana reducida del navegador. Entonces, si algo no encaja correctamente, es posible que deba ajustar estas propiedades para sus propios fines. Así es como se verán los diseños en los dispositivos móviles.
