Cómo reemplazar las fuentes con variables de diseño de fuentes de Divi 5

Las actualizaciones de fuentes pueden ser un dolor de cabeza. Cambie una fuente de título, y de repente, estás rastreando cada lugar que aparece. Se pierda uno o dos encabezados, y su diseño inmediatamente se siente apagado. La actualización manual de las fuentes invita a la inconsistencia.

Divi 5 resuelve esto con variables de fuentes y preajustes. En lugar de perseguir cada instancia, puede configurar sus fuentes una vez y dejar que el sistema maneje el resto. La tipografía permanece limpia y unificada, sin importar cuántos módulos use. Eche un vistazo a lo simple que puede ser.

Por qué las fuentes estáticas pueden crear problemas

Las configuraciones de fuente estática crean una red de complicaciones que empeoran con el tiempo. Cuando agrega fuentes directamente a cada elemento, dispersa las opciones de tipografía en cientos de lugares diferentes.

Construye un sitio con pantalla PlayFair para encabezados y poppins para texto del cuerpo. Unos meses más tarde, desea cambiar a una pila de fuentes más moderna. Ahora, cazas a través de cada módulo, cada preajuste, cada configuración personalizada para encontrar dónde viven esas fuentes. Señorita incluso un encabezado enterrado en una sección de testimonios, y su diseño puede verse roto.

Cuando actualiza manualmente las fuentes una por una, puede usar accidentalmente diferentes tamaños o pesos. Actualiza la mayoría de los encabezados a 32px, pero se pierden algunos que se quedan en 28px. Su diseño una vez yendo ahora se siente desequilibrado.

Este método disperso convierte los cambios de fuente simples en proyectos principales. Lo que debería tomar minutos se extiende en horas de tediosa caza y actualización. Pasas más tiempo administrando la tipografía que realmente diseñando con ella.

Lo que debe usar en su lugar: variables de diseño y preajustes de Divi 5

Las variables de diseño almacenan su configuración de diseño, que puede reutilizar en cualquier lugar. Establezca una fuente una vez, guárdela como una variable de diseño, luego úsela en su sitio. Cambie la variable más adelante, y todos los elementos que se actualican automáticamente.

Divi ofrece seis tipos de variables: números, texto, imágenes, enlaces, colores y fuentes. Dos variables de fuente predeterminadas están listas para usar: una para encabezados y otra para texto del cuerpo. El Administrador de variables se encuentra en la barra lateral izquierda en el icono de la base de datos.

Estas variables funcionan en campos que no las admiten, como campos numéricos, campos de fuentes y configuraciones de espaciado. Haga clic en el icono de variable junto a cualquier campo compatible para ver sus opciones.

¿Qué hacen los presets de los grupos de opciones?

Los preajustes de los grupos de opciones guardan grupos de estilo específicos, como tipografía, bordes o espacios, no módulos completos. Por ejemplo, puede crear un preajuste solo para encabezar fuentes y tamaños.

Cuando aplica un grupo de opciones preestablecido, solo cambia esa área de estilo. El resto de su módulo permanece igual. Puede combinar diferentes presets en un elemento sin problemas. Mezclar variables de diseño con preajustes de grupos de opciones para obtener más flexibilidad. Cree preajustes que usen sus variables. Cuando actualiza una variable, todos los presets que lo usan también se actualizan.

Guía paso a paso para crear un sistema de fuentes dinámico con Divi 5

La configuración de las variables de fuentes dura unos veinte minutos. Una vez que trabajan, los cambios en la fuente ocurren instantáneamente en todo su sitio. Aquí le mostramos cómo llegar:

1. Cree variables de fuentes para su nuevo sistema

Abra Variable Manager haciendo clic en el icono de la base de datos en su barra lateral izquierda. Vaya a la pestaña Fuentes. Verá dos variables predeterminadas: una para encabezados y otra para texto del cuerpo.

• Configure sus fuentes principales: haga clic en la variable de encabezado. Elija su familia de fuentes y su peso, luego guárdelo. Haga lo mismo para el texto del cuerpo, pero elija algo limpio y fácil de leer.
• Agregue más fuentes si es necesario: algunos diseños necesitan fuentes adicionales para citas, testimonios o texto especial. Haga clic en "Agregar nueva variable" y dale un nombre claro.
• Complete todos los detalles: cada variable contiene su familia de fuentes, peso, estilo y otras configuraciones. Use pesas en negrita para los titulares, pesas regulares para el texto del cuerpo e cursiva cuando desee agregar énfasis.
• Mantenga sus nombres simples: en lugar de confundir etiquetas, llámelos "Fuente de citas" o "Fuente resaltada".
• Recuerde guardar: sus cambios no se mantendrán hasta que presione el botón Guardar.

La mayoría de los sitios web solo necesitan encabezado y fuentes corporales. Solo agregue variables adicionales para necesidades de diseño especiales, no pequeños ajustes de texto. Menos variables facilitan la creación de un nuevo contenido mucho más fácil.

2. Agregue variables numéricas para tamaños de fuente

Cambie a la pestaña Números en Variable Manager. Aquí, crea variables de tamaño que funcionan con sus fuentes. Piense en esto como su escala de tipografía.

Comience con sus tamaños de encabezado. Cree variables llamadas H1, H2, H3, etc. Establezca cada uno en un tamaño diferente que tenga sentido para su diseño. Puede usar valores de píxeles regulares como 32px o unidades receptivas como Clamp () para tamaños que se adaptan a otras pantallas.

El texto del cuerpo también necesita su variable de tamaño. Llámelo algo así como "tamaño del cuerpo" y configúrelo en un tamaño de lectura cómodo, generalmente alrededor de 16px a 18px.

También puede crear variables para necesidades de texto especiales. Tal vez desee una variable de "texto pequeño" para subtítulos o una variable de "texto grande" para testimonios. Nómbrelos claramente para que recuerdes para qué son más tarde.

Estas variables numéricas funcionan en cualquier lugar donde necesita un tamaño consistente. Úselos para alturas de línea, espaciado o cualquier medida que aparezca varias veces en su sitio. Cuando actualiza una variable de número, todo lo usa cambia automáticamente.

La mayoría de los sitios web solo necesitan encabezado y fuentes corporales. Solo agregue variables adicionales para necesidades de diseño especiales, no pequeños ajustes de texto. Menos variables facilitan la creación de un nuevo contenido mucho más fácil.

3. Use buscar y reemplazar para intercambiar fuentes estáticas

Haga clic derecho en cualquier campo de fuente en la configuración de su módulo para ver la opción Buscar y reemplazar. Esto abre un panel donde Divi carga su configuración de fuente actual automáticamente. Ahora puede cambiar esa fuente estática con una de sus variables de diseño.

El campo del elemento de origen muestra qué módulo comenzó. Puede cambiar esto para elegir cualquier otro elemento en su página como punto de partida.

El valor de búsqueda muestra cualquier fuente que desee reemplazar. En lugar de elegir otra fuente estática, establezca su valor de reemplazo en una de sus variables de diseño de fuentes.

Encuentre y reemplace los trabajos para tamaños de fuente también. Haga clic derecho en cualquier campo de tamaño de fuente para acceder al mismo panel de reemplazo. Esto le permite intercambiar tamaños de nivel de elemento como 24px con sus variables numéricas.

Busque módulos de texto donde establezca manualmente los tamaños de fuente. Estas configuraciones de tamaño disperso crean los mismos problemas que las fuentes estáticas. Cuando desee ajustar su escala de tipografía, termina cazando a través de cada módulo para encontrar cada tamaño. Reemplace estos tamaños estáticos con su H1, H2, tamaño del cuerpo u otras variables numéricas.

Establezca sus límites de reemplazo

Busque y reemplace los controles de ubicación donde ocurran los cambios. Elija "página completa" para actualizar las fuentes en todo su diseño. Elija "Elemento actual y los niños" para limitar los cambios a esa sección específica y cualquier cosa anidada dentro de él.

También puede dirigirse a contenedores parentales o áreas de página específicas.

Buscar y reemplazar el tipo de elemento lo ayuda a concentrarse en módulos específicos. Seleccione "todos los elementos" para un intercambio de fuentes completo, o elija "módulos" para omitir contenedores y elementos estructurales. Puede obtener aún más específico apuntando solo a ciertos tipos de módulos.

Evite reemplazos accidentales

La opción "Solo reemplazar los campos idénticos" evita los cambios no deseados. Active esto cuando desee reemplazar las fuentes sin afectar otras configuraciones que puedan compartir el mismo valor.

Esto mantiene su radio fronterizo a 10px, incluso cuando reemplaza una fuente que se llama "10px" o algo similar.

Sin esta configuración, busque y reemplace los aspectos de su valor objetivo en todas partes. Con él habilitado, el sistema solo cambia los campos de fuentes reales, dejando otras configuraciones de diseño solo.

4. Trabaja a través de tu sistema de fuentes

Necesitará operaciones de búsqueda y reemplazo separadas para diferentes pesos y estilos de fuentes. Su sitio puede usar la misma familia de fuentes en pesas regulares y audaces. Maneje cada variación individualmente, reemplazándolas con las variables de diseño apropiadas que creó anteriormente.

Cada vez, el proceso es el mismo: haga clic con el botón derecho en el campo de fuente, establezca su valor de reemplazo en una variable de diseño, elija su alcance y aplique los cambios. Repita esto para cada fuente estática que necesita actualización.

5. Crea preajustes con tus variables

Acceda a cualquier módulo de texto y navegue a la pestaña de diseño. Localice la tipografía y haga clic en el icono preestablecido. Seleccione su variable de fuente de encabezado en el menú desplegable. Aplique su variable de número H1 para el tamaño.

Configure la altura de la línea y los valores de espaciado. Nombra el "encabezado principal" preestablecido y guárdelo. Haga clic en el icono de estrella para establecer esto como su valor predeterminado. Los nuevos módulos de texto adoptarán automáticamente estas configuraciones. Todos los módulos existentes con la misma etiqueta de encabezado y sin estilos también heredarán estas configuraciones.

Puede repetir este proceso para cada nivel de encabezado. Cada preajuste mantiene la consistencia mientras sirve diferentes propósitos.

Estos preajustes de tipografía funcionan con cualquier módulo que contenga campos de texto. Los módulos de la propaganda, el contenido de acordeón, los testimonios y los formularios de contacto aceptan los mismos presets. Esta compatibilidad entre el módulo elimina las tareas de estilo repetitivo.

El grupo de opciones preestablece las categorías de estilo específicas solo. Aplique un encabezado preestablecido al texto del botón mientras mantiene intacto los antecedentes y la configuración del borde del botón.

6. Extienda sus nuevas variables en todos los elementos

Haga clic derecho en cualquier elemento usando sus nuevas variables. Seleccione "Extender atributos" en el menú. Configure el elemento fuente como su módulo recientemente actualizado.

Establezca la ubicación en "página completa" para actualizaciones completas. En los tipos de atributos, elija "estilos" para centrarse únicamente en elementos de diseño.

Habilite "solo reemplace los campos idénticos" para evitar cambios no deseados en el relleno, los márgenes u otros valores numéricos que puedan coincidir con sus tamaños de fuente. Seleccione "todos los elementos" para actualizar módulos y contenedores, o elija "Módulos" para dirigir específicamente los elementos de contenido.

Procese páginas complejas en secciones más pequeñas en lugar de actualizaciones de todo el sitio. Seleccione "Sección actual" para limitar los cambios a un área a la vez. Comience con su sección de encabezado. Aplicar extensiones variables, revisar los resultados y proceder a las áreas principales de contenido. Complete la sección de pie de página al final.

Este enfoque metódico identifica los conflictos de formato temprano y controla el proceso de actualización.

Divi 5 facilita la tipografía

Solía cambiar de la pantalla PlayFair a algo moderno y actualizar la mayoría de los encabezados, pero se pierde ese testimonio en la página tres. Su sitio parecía desagradable durante semanas.

Las variables de Divi 5 agilizan la tipografía de su sitio web. Cambie su variable de encabezado desde el icono de la base de datos en la barra lateral, y cada módulo de texto se actualiza al instante. Se incluye ese pie de página de formulario de contacto.

La próxima vez que cambie, actualizará dos variables en lugar de hacer clic a través de cincuenta módulos. La herramienta Buscar y reemplazar atrapa lo que normalmente extrañaría. Su tipografía se mantiene apretada y sus fines de semana permanecen suyos.