Fuente

El campo Fuente agrega un menú desplegable de la familia de fuentes a un widget personalizado que crea con los complementos maestros Creador de widgets. Los editores eligen una fuente del sistema o una fuente de Google en Elementor y el widget la aplica al elemento que elija. Cambia únicamente el tipo de letra. El tamaño, el peso y la altura de la línea permanecen en su CSS.

La fuente es uno de los campos que puede utilizar en el Widget Builder de la versión gratuita. El complemento gratuito incluye un Widget Builder limitado y viene con el conjunto completo de campos Complementos maestros Pro.

Qué hace el campo Fuente #

• Agrega un menú desplegable con capacidad de búsqueda al panel de su widget en Elementor. La lista tiene a Predeterminado opción, a Sistema grupo (Arial, Tahoma, etc.) y a Google grupo.
• Guarda el apellido como texto, por ejemplo Playfair Display.
• Escribe un font-family regla para los elementos que enumera a continuación Selectores CSS. Cuando la elección es una fuente de Google, Elementor carga esa fuente en la página por usted.
• También te da un token, como {{ quote_font }}, eso imprime el apellido.

¿Nuevo para el constructor? Leer el Descripción general del creador de widgets primero, luego regresa con un widget abierto.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalados y activos. El guía de instalación configuración de cubiertas.
• Un widget abierto en Widget Builder. El ejemplo de esta guía es un widget de “Cita completa”: un área de texto denominada quote_text, un campo de texto llamado quote_authory un campo Fuente llamado quote_font eso establece el tipo de letra de la cita.

Cómo agregar un campo Fuente #

1. Ir a Complementos maestros > Creador de widgets y abre tu widget.
2. Haga clic en el Estilo tabule y agregue una sección, por ejemplo “Citar estilo”.
3. Tipo font en el cuadro de búsqueda de campo de la izquierda.
4. Arrastrar Fuente en la sección. Haga clic en el lápiz en el campo para abrir su configuración.

El estilo es donde los editores esperan encontrar opciones tipográficas, pero el campo también funciona en una sección Contenido o Avanzado.

Se explicaron las opciones del campo de fuente #

• Etiqueta: el texto encima del menú desplegable en Elementor, por ejemplo “Cita fuente”.
• Nombre: el ID único del campo y el nombre de su token. Utilice únicamente letras, números y guiones bajos, por ejemplo quote_font.
• Descripción: una pista que se muestra en el menú desplegable en Elementor.
• Valoarea implicită: la familia con la que comienza una nueva copia del widget. Escriba el nombre exactamente como aparece en la lista de Elementor, por ejemplo Playfair Display.

En Configuración común lo encontrarás Mostrar etiqueta, Bloque de etiquetas, Separador y Condiciones, que funcionan igual que en otros campos. La configuración que hace que este campo funcione es Selectores CSS.

Aplique la fuente con Selectores CSS #

Desplácese hacia abajo hasta Selectores CSS y haga clic Agregar artículo. Cada fila tiene dos cuadros:

• Selector CSS: el elemento que obtiene la fuente. Para la cita de extracción es .pq-quote. No es necesario escribir {{WRAPPER}}, porque el creador lo agrega y mantiene la regla dentro de este widget.
• Proprietăți CSS: la regla para escribir. {{VALUE}} se reemplaza con la familia elegida.

font-family: "{{VALUE}}", Georgia, serif;

Una nueva fila viene llena de texto de ejemplo .text-1, .text-2 y color: {{VALUE}};. Reemplaza ambos. Si te vas color en el cuadro de propiedades, el nombre de la fuente termina como un valor de color y el tipo de letra no cambia.

Las citas alrededor {{VALUE}} mantenga los nombres con espacios, como Playfair Display, funcionando. Georgia, serif es el respaldo mientras se carga la fuente. Para diseñar más elementos, haga clic en Agregar elemento nuevamente y agregue otra fila.

Deja la llanura Selector cuadro en la parte inferior vacío. En nuestras pruebas escribió color: Lora; para este campo, que no establece una fuente.

Hacer clic Guardar configuración cuando hayas terminado.

¿por qué no poner el token en el panel CSS? #

El token funciona allí. font-family: "{{ quote_font }}", Georgia, serif; imprime el nombre correcto. El problema es cargar. En nuestras pruebas, una fuente de Google utilizada únicamente a través del token no se cargó en la interfaz, por lo que los visitantes vieron la fuente alternativa. Una fila de Selectores CSS le brinda a Elementor la información que necesita para cargar la fuente, y la misma selección se realizó correctamente.

Guarde el token para lugares donde necesite el nombre como texto, como una clase o una etiqueta en el HTML.

Utilice el control de fuente en Elementor #

Agregue el widget a una página o recargue el editor si la página ya estaba abierta. Seleccione el widget y abra el Estilo pestaña. Haga clic en el menú desplegable debajo de su etiqueta y comience a escribir para filtrar la lista. Cada apellido está dibujado en su propio tipo de letra, lo que facilita la selección.

Elija una familia y las actualizaciones de vista previa. En la página publicada, Elementor carga la fuente de Google junto con los estilos del widget.

Elegir Predeterminado borra la selección. Luego, el widget vuelve a ser cualquier fuente de su panel CSS o conjuntos de temas para ese elemento, así que dale al elemento una fuente sensible en el panel CSS.

Casos de uso comunes #

• Extraiga citas y testimonios donde solo el texto de la cita cambie de tipografía.
• Muestra encabezados en widgets de héroe o banner, dejando solo el texto del cuerpo.
• Números de precio, insignias o etiquetas que utilizan una fuente de visualización de marca.
• Sitios de clientes donde los editores deben elegir una fuente pero no tocar tamaños y espacios.

Consejos para trabajar con el campo Fuente #

• Utilice selectores CSS en lugar del token para diseñar. Eso es lo que hace que Google Fonts se cargue.
• Agregue siempre una pila alternativa después {{VALUE}}, como por ejemplo Georgia, serif o Arial, sans-serif.
• Coloque el tamaño y el peso en el panel CSS. El campo Fuente solo establece la familia.
• ¿Necesita también controles de tamaño, peso y espaciado? El Campo de tipografía es un campo Pro que los agrupa a todos.
• Cada fuente de Google agrega una descarga. Dos o tres familias por página es un límite razonable.

Preguntas frecuentes #

Envolviendo #

Agregue el campo Fuente a una sección Estilo, establezca una familia predeterminada y agregue una fila de Selectores CSS que apunte font-family: "{{VALUE}}" en tu elemento. Los editores obtienen una lista de fuentes con capacidad de búsqueda en Elementor y las fuentes de Google se cargan en la página sin código adicional. Para el estilo de texto completo, consulte Campo de tipografíași verifică precios por lo que incluye cada plan.