El Campo de tipografía proporciona a un widget personalizado exactamente el mismo panel de tipografía que utilizan los widgets principales de Elementor: familia de fuentes con fuentes de Google, tamaño, peso, transformación, estilo, decoración, altura de línea, espacio entre letras y espacio entre palabras, todos responsivos por dispositivo. Dentro de los complementos maestros Creador de widgets, agrega el campo una vez, apúntelo a un selector CSS y cualquiera que edite el widget en Elementor puede rediseñar el texto sin tocar el código.
Como todos los controles de Widget Builder, Typography es compatible Condiciones, para que puedas mantenerlo oculto hasta que se active un interruptor de estilo personalizado. La salida del token en todo el generador pasa por Motor de plantilla de sintaxis de ramita; Ambas guías cubren los detalles y limitaciones.
A diferencia de los campos de texto o color, el campo Tipografía no utiliza un código corto en su CSS. Le indica al campo qué selector controla y Elementor escribe los estilos de tipografía en ese selector por sí solo. Un campo, un selector, hecho.
Qué hace el campo Tipografía #
Un campo Tipografía representa el control del grupo de tipografía de Elementor en el panel de opciones de su widget. Cuando alguien selecciona el widget y hace clic en el icono del lápiz junto a la etiqueta del campo, se abre una ventana emergente con el conjunto completo de controles de texto:
- Familia de fuentes: un menú desplegable con capacidad de búsqueda con fuentes del sistema, fuentes de Google y cualquier fuente personalizada registrada en el sitio.
- Tamaño de fuente: un control deslizante y una entrada con unidades px, em, rem y vw, responsivo por dispositivo.
- Peso de fuente: 100 a 900 más Normal y Negrita.
- Transformar, Estilo y Decoración: mayúsculas y minúsculas, cursiva y oblicua, subrayadas y lineales.
- Altura de línea, espaciado de letras y espaciado de palabras: cada uno con su propia entrada receptiva.
El ícono del globo también está ahí, por lo que el widget puede seguir el del sitio Fuentes globales ajustes preestablecidos en lugar de un estilo único. Sigue el mismo patrón que los otros campos del Widget Builder: elimine el campo, asígnele un nombre, conéctelo. La única diferencia es cómo se conecta, a través de un selector en lugar de un código corto. Si eres nuevo en la creación de widgets, comienza con Descripción general del creador de widgets primero.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
- Un widget personalizado abierto en el editor de Widget Builder. Nuestro ejemplo es un widget de héroe de restaurante con un
<h1 class="bfh-title">rumbo y a<p class="bfh-lede">párrafo de introducción en su HTML.
Cómo agregar un campo de tipografía #
En el editor Widget Builder, desplácese por el panel de campos de la izquierda hasta encontrar el archivo Tipografía campo, listado con los otros campos del grupo de estilo.
Arrastre el campo Tipografía a una sección debajo del Contenido, Estilo, sau Avanzado pestaña. El estilo es el hogar natural, aunque funciona en cualquier lugar. Una vez que aterriza, las opciones del campo se abren a la izquierda.
Se explican las opciones de campo de tipografía #
Seleccione el campo Tipografía para abrir su configuración.
- Etiqueta: el texto que se muestra junto al control en Elementor, “Tipografía” de forma predeterminada. Con varios campos de tipografía en un widget, use nombres como “Tipografía de título” y “Tipografía de botón”.
- Nombre: el identificador único del campo. Debe contener sólo letras, números y guiones bajos, por ejemplo
title_typography. - Descripción: texto auxiliar opcional que se muestra debajo del control.
- Selector: el selector CSS al que se aplican los estilos de tipografía. Esta es la única configuración que hace que el campo funcione, que se trata en la siguiente sección.
- Valoarea implicită: opcionalmente, vincule el campo a uno de los ajustes preestablecidos de fuentes globales de Elementor: Primario, Secundario, Texto o Acento. Luego, el widget comienza con ese ajuste preestablecido aplicado y lo sigue si las fuentes globales del sitio cambian.
- Mostrar etiqueta y Separador: la pantalla estándar alterna, además de Condiciones más abajo para mostrar el campo solo cuando otro control tiene un valor determinado.
Apunta el campo a tu selector #
Aquí está la parte que hace tropezar a las personas si están acostumbradas a los demás campos: el campo Tipografía no tiene {{shortcode}} para tu CSS. Un valor de tipografía es un conjunto completo de propiedades, no un valor único, por lo que no puede imprimirse en una declaración CSS. En su lugar, completa el Selector option y Elementor generan los estilos por usted.
Para el párrafo de introducción del héroe, el selector es:
{{WRAPPER}} .bfh-lede
{{WRAPPER}}representa el contenedor del widget, por lo que los estilos solo llegan a este widget y nunca se filtran al resto de la página. Inicie siempre el selector con él..bfh-ledees el elemento dentro de su widget HTML que el control debe diseñar.- Para controlar varios elementos con un solo control, separe los selectores con comas y dé a cada uno lo suyo
{{WRAPPER}}:{{WRAPPER}} .bfh-title, {{WRAPPER}} .bfh-lede.
Si deja el Selector vacío, el campo vuelve al contenedor completo del widget, que diseña cada fragmento de texto del widget a la vez. Eso suele ser más de lo que deseas. Configure el selector y luego haga clic Guardar configuración.
Su hoja de estilo en la pestaña CSS sigue funcionando como aspecto inicial del widget. Lo que sea font-family o font-size escribiste que permanece en su lugar hasta que un usuario elige algo en el panel; Luego, los valores del control lo anulan.
Utilice el control de tipografía en Elementor #
Agregue su widget personalizado a una página en Elementor o recargue el editor si la página ya estaba abierta. Seleccione el widget y el control Tipografía aparecerá en su panel con la etiqueta que configuró, un ícono de globo terráqueo para fuentes globales y un ícono de lápiz para valores personalizados.
Elija una familia de fuentes y un tamaño #
Haga clic en el icono del lápiz para abrir la ventana emergente de tipografía. El Familia dropdown busca fuentes del sistema y la biblioteca completa de Google Fonts mientras escribe. Debajo de él, Tamaño toma un valor en px, em, rem o vw, y el icono del dispositivo te permite establecer un tamaño diferente por punto de interrupción: un titular de escritorio de 96px puede caer a 48px en teléfonos desde el mismo control.
Establezca peso, espaciado y resto #
Se cumple el mismo popover Peso, Transformar, Estilo, Decoración, Altura de la línea, Espaciado de letras, y Espaciado de palabras. Cada cambio aparece en la vista previa, por lo que puede ver cómo el encabezado se ajusta a medida que reduce el espacio entre letras. Si nada parece cambiar, verifique que su selector realmente coincida con un elemento en el widget HTML; un error tipográfico en el nombre de la clase falla silenciosamente.
O siga las fuentes globales del sitio #
En su lugar, haga clic en el icono del globo y elija Primario, Secundario, Texto o Acento. El texto del widget ahora sigue ese ajuste preestablecido global, y cuando un rediseño intercambia las fuentes del sitio, este widget sigue sin que nadie lo toque. Si establece un valor predeterminado en el campo, este enlace ya está activo cuando el widget aparece por primera vez en una página.
En nuestro ejemplo, el encabezado cambia a una cara de script a 98px, elegido directamente de la lista de fuentes de Google, y la vista previa vuelve a dibujar en el momento en que se carga la fuente.
Casos de uso comunes #
- Encabezados en widgets de héroe y banner donde cada sitio quiere su propia fuente de visualización.
- Botones que deben coincidir con la tipografía de botones existente del sitio.
- Títulos de tarjetas y extractos con campos separados para cada uno, por lo que los títulos y el cuerpo del texto se escalan de forma independiente.
- Widgets de testimonios y citas donde la cita toma una serifa en cursiva y la atribución permanece en la fuente del cuerpo.
- Widgets orientados al cliente donde los editores deben rediseñar el texto libremente sin siquiera abrir el CSS.
Consejos para trabajar con el campo Tipografía #
- La opción Selector es toda la conexión. No hay ningún código corto de tipografía para pegar en su CSS «configure el selector y deje que Elementor escriba los estilos.
- Inicie siempre el selector con
{{WRAPPER}}. Sin él, los estilos se aplican a cada coincidencia de la página, no solo a su widget. En una lista separada por comas, cada pieza necesita la suya propia{{WRAPPER}}. - Mantenga sus estilos base en la pestaña CSS. Son cómo se ve el widget en una nueva caída; el control sólo anula lo que realmente cambia el usuario.
- Un campo por rol de texto. Un campo de título, un campo de cuerpo y un campo de botón brindan a los editores un control limpio. Un campo apuntado a todo el widget aplana todo a un solo estilo.
- Utilice los valores predeterminados de Global Fonts para los sitios cliente. Vincular el campo a Primaria o Secundaria mantiene los widgets personalizados al mismo ritmo que el sistema de diseño del sitio desde el primer día.
Preguntas frecuentes #
¿cuál es el campo Tipografía en Master Addons Widget Builder?
El campo Tipografía agrega el control completo del grupo de tipografía de Elementor a un widget personalizado: familia de fuentes con Google Fonts, tamaño responsivo, peso, transformación, estilo, decoración, altura de línea, espaciado de letras y espaciado de palabras. Lo apuntas a un selector CSS y Elementor aplica los estilos elegidos a ese selector.
¿dónde está el código corto de tipografía para la pestaña CSS?
No hay ninguno. La tipografía es un grupo de muchas propiedades CSS, por lo que no puede imprimir a través de una sola {{token}} la forma en que lo hace un campo de texto o color. La opción Selector del campo reemplaza el código corto: configúrelo en algo así como {{WRAPPER}} .my-title y los estilos se generan para ti.
¿qué significa {{WRAPPER}} en el selector?
Es un marcador de posición para el propio elemento contenedor del widget. Iniciando el selector con {{WRAPPER}} explora la tipografía únicamente en este widget. Déjelo fuera y el selector coincidirá en todas partes de la página, lo que puede rediseñar otros widgets por accidente.
¿puede un campo de tipografía diseñar más de un elemento?
Sí. Separe los selectores con comas y comience cada uno con {{WRAPPER}}, por ejemplo {{WRAPPER}} .card-title, {{WRAPPER}} .card-link. Ambos elementos siguen entonces el mismo control.
¿por qué mi control de tipografía está diseñando todo el widget?
La opción Selector está vacía, por lo que el campo volvió al contenedor externo del widget. Complete un selector que se dirija solo al elemento que desea, guarde y recargue el editor Elementor.
¿aún importan los estilos de fuente que escribí en la pestaña CSS?
Sí. Son la apariencia predeterminada del widget y se muestran hasta que alguien cambia el control en Elementor. El usuario elige en el panel de tipografía y luego tiene prioridad sobre los valores de la hoja de estilo.
Envolviendo #
El campo Tipografía del creador de widgets envía a los editores el panel que ya conocen de los propios widgets de Elementor, con fuentes de Google, tamaños responsivos y ajustes preestablecidos globales, en cualquier elemento de su widget personalizado. Nombra el campo, configura el Selector en {{WRAPPER}} además de la clase de su elemento, cada decisión de fuente sale de su hoja de estilo y entra en el panel. Emparejarlo con el Campo fronterizo y el Campo de texto para crear un panel de widgets que cubra contenido y estilo en un solo lugar. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.
