Sombra de texto

El Campo de sombra de texto agrega el control de sombra de texto de Elementor a su widget personalizado: desplazamiento horizontal y vertical, desenfoque y un color con opacidad, aplicado a cualquier texto al que apunte su selector. Dentro de los complementos maestros Creador de widgets, es la forma más rápida de permitir a los editores mantener un titular legible sobre una foto ocupada o darle un impulso sutil al tipo de pantalla.

Como todos los controles de Widget Builder, Text Shadow es compatible Condiciones, útil para revelarlo solo cuando una opción de sombra está habilitada y la salida del token en todo el generador se ejecuta a través de Motor de plantilla de sintaxis de ramita. Ambas guías cubren la configuración y las limitaciones.

Text Shadow es un control de grupo, el más pequeño de la familia que incluye tipografía y fondo. El cableado es idéntico: no hay token en su CSS, solo una opción de Selector que le indica a Elementor qué elemento diseñar.

Qué hace el campo Sombra de texto #

• Representa el control del grupo de sombras de texto de Elementor, abierto desde el icono del lápiz al lado de la etiqueta del campo.
• Compensaciones horizontales y verticales coloca la sombra alrededor de los glifos.
• Desenfocar lo suaviza, desde un borde duro duplicado hasta un amplio brillo.
• Color incluye un canal alfa para sombras realistas y de baja opacidad.
• Escribe el propio CSS al selector que proporcione; no hay token de plantilla.

¿Nunca antes has creado un widget? Comience con el Descripción general del creador de widgets y vuelve una vez que tengas uno abierto.

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 banner de fotos con un <h2 class="banner-title"> rumbo sentado en la imagen.

Cómo agregar un campo Sombra de texto #

En el editor Widget Builder, desplácese por el panel de campos de la izquierda hasta encontrar el archivo Sombra de texto campo, listado con los otros campos del grupo de estilos, como Tipografía y Sombra de caja.

Arrástrelo a una sección debajo del Estilo pestaña, generalmente justo al lado del campo Tipografía que diseña el mismo texto. Una vez que aterriza, las opciones del campo se abren a la izquierda.

Texto Explicación de las opciones del campo Sombra #

• Etiqueta: el texto que se muestra junto al control en Elementor, por ejemplo “Title Shadow”.
• Nombre: el identificador único únicamente para el campo, letras, números y guiones bajos.
• Selector: el selector CSS al que se aplica la sombra. Esta es la conexión en sí, que se trata a continuación.
• Excluir: elimina los subcontroles individuales del grupo cuando desea una ventana emergente recortada.
• Descripción, Mostrar etiqueta, separador y condiciones son las opciones de visualización estándar que ha visto en otros campos.

Apunta el campo a tu selector #

Como los otros controles grupales, el campo Sombra de texto no tiene {{shortcode}} para tu CSS. La sombra agrupa desplazamientos, desenfoque y color en una propiedad, por lo que a {{ token }} para las impresiones de campo nada útil. El Selector la opción lleva toda la conexión.

Para el encabezado del banner, el selector es:

{{WRAPPER}} .banner-title

• {{WRAPPER}} representa el contenedor del widget y mantiene la sombra dentro de este widget. Los controles de grupo aplican el selector tal como está escrito, así que {{WRAPPER}} es tuyo escribir; no está agregado para ti.
• .banner-title es el elemento de texto dentro de su widget HTML.

Cuidado: saltar {{WRAPPER}} y el selector estila cada .banner-title a lo largo de la página, incluidos los de otros widgets. La configuración refleja el Campo de tipografía exactamente, entonces un selector que funciona allí funciona aquí.

Si el diseño requiere una sombra predeterminada, guárdela en la pestaña CSS del widget como alternativa. El control lo anula una vez que un editor establece valores.

Utilice el control Sombra de texto en Elementor #

Agregue su widget personalizado a una página en Elementor o recargue el editor si ya estaba abierto. El control muestra su etiqueta y un ícono de lápiz que abre la ventana emergente de sombra.

Elija un color, luego ajuste Blur y las dos compensaciones. Una sombra oscura con baja opacidad con un par de píxeles de desenfoque mantiene un titular legible sobre la fotografía; Los desplazamientos más grandes con cero desenfoque producen un efecto de visualización retro. La vista previa se actualiza con cada cambio. Sintonice el resultado con la foto más clara que probablemente use el sitio, no solo con la imagen de demostración, porque una sombra marcada sobre un fondo oscuro puede desaparecer por completo en una brillante.

Casos de uso comunes #

• Encabezados sobre fotografías en widgets de héroe y banner, donde la sombra recompra contraste.
• Texto sobre fondos de vídeo, que cambian constantemente y necesitan una ventaja adicional.
• Mostrar efectos de tipo como sombras duras desplazadas en números grandes.
• Texto claro sobre imágenes luminosas, donde un suave halo oscuro mantiene los subtítulos legibles.
• Insignias y etiquetas sentado en pendientes o áreas estampadas.

Consejos para trabajar con el campo Text Shadow #

• La opción Selector es toda la conexión. No existe ningún token para los controles de grupo, por lo que no hay nada en la pestaña CSS para este campo.
• Inicie siempre el selector con {{WRAPPER}}. Se usa sin formato y sin él la sombra llega a todos los elementos coincidentes de la página.
• Emparejarlo con un campo Tipografía en el mismo selector. Las decisiones de fuente y sombra para un encabezado luego se sientan juntas en el panel.
• Favorece los colores de baja opacidad. Las sombras construidas a partir del canal alfa del color se asientan en el diseño; El negro sólido rara vez lo hace.
• Utilice Excluir para simplificar. Si un widget solo necesita desenfoque y color, recortar el grupo mantiene la ventana emergente pequeña.
• Envíe un respaldo en la pestaña CSS cuando el diseño predeterminado depende de que la sombra esté ahí.

Preguntas frecuentes #

Envolviendo #

El campo Text Shadow del Widget Builder es un pequeño control que resuelve un problema recurrente: texto que debe permanecer legible sin importar la imagen que deje un editor detrás de él. Nombra el campo, configura el Selector en {{WRAPPER}} más la clase del texto, y la sombra vive en el panel a partir de ese momento. Comparte su modelo de selección con el Campo de tipografía, que de todos modos suele pertenecer al mismo título. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.