El campo Sombra de texto agrega el control de sombra de texto de Elementor a un widget personalizado creado con los complementos maestros Creador de widgets. Los editores obtienen un color, una configuración borrosa y dos compensaciones, y la sombra se aplica a cualquier texto que apunte su selector CSS. Úselo cuando un encabezado deba permanecer legible encima de una foto.
Text Shadow es un campo profesional. El complemento gratuito incluye un Widget Builder limitado y viene con el conjunto completo de campos Complementos maestros Pro.
Qué hace el campo Sombra de texto #
- Agrega un control al panel de su widget en Elementor: su etiqueta más un ícono de lápiz que abre la configuración de sombra.
- Esas configuraciones son Color (con opacidad), Desenfoque, Horizontal y Vertical.
- Elementor escribe el
text-shadowCSS al elemento establecido en la opción Selector del campo, por lo que no coloca un token en su HTML o CSS.
Si aún no ha creado un widget, lea el Descripción general del creador de widgets primero y vuelve con un widget abierto.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Master Addons para Elementor y Master Addons Pro, ambos 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 “Photo Banner”: una foto de fondo con un encabezado H2 en la parte superior que tiene la clase
banner-title, completado desde un campo de texto llamadobanner_title.
Cómo agregar un campo Sombra de texto #
- Ir a Complementos maestros > Creador de widgets y abre tu widget.
- Haga clic en el Estilo pestaña encima del área de secciones y agregue una sección si la pestaña está vacía. Dale a la sección un título claro, como “Título del banner”.
- Tipo
shadowen el cuadro de búsqueda de campo de la izquierda. Aparecen Box Shadow y Text Shadow. - Arrastrar Sombra de texto en la sección. Su configuración se abre en la barra lateral izquierda.
También puede colocar el campo en una sección Contenido o Avanzado, y el control aparece en esa pestaña Elementor. Sin embargo, los editores suelen buscar sombras en Estilo.
Texto Explicación de las opciones del campo Sombra #
- Etiqueta es el texto al lado del control en Elementor. El ejemplo usa “Title Shadow”.
- Nombre es el ID único del campo (solo letras, números y guiones bajos). Elementor guarda los valores del editor con este nombre, así que configúrelo una vez y déjelo en paz.
- Descripción es una nota para usted dentro del constructor. Elementor no lo muestra bajo este control.
- Valor predeterminado este campo no lo utiliza. Una nueva sombra siempre comienza con los valores predeterminados de Elementor, que se enumeran más abajo.
Desplácese hacia abajo en la barra lateral para llegar a la configuración común y al Selector.
- Mostrar etiqueta oculta o muestra la etiqueta en el panel.
- Separador dibuja una línea divisoria antes o después del control.
- Condiciones muestre el control sólo cuando otro campo tenga un valor determinado, por ejemplo un conmutador “Mostrar sombra”. Ver Condiciones.
- Selector es el selector CSS que recibe la sombra. El campo no hace nada útil sin él, por lo que tiene su propia sección a continuación.
El bloque de etiquetas, el control responsivo, el soporte dinámico, la interfaz disponible y las clases de control también aparecen en la lista. Un control de sombra de texto no los usa y cambiarlos no tiene ningún efecto en este campo.
Configure el selector #
El Selector le dice a Elementor qué elemento recibe la sombra. Para el encabezado del banner, ingrese:
{{WRAPPER}} .banner-title
{{WRAPPER}}se reemplaza con la clase única de este widget en la página, que mantiene la sombra dentro de este widget..banner-titlees la clase en el encabezado del HTML de su widget.
El campo utiliza su selector exactamente como está escrito. Sin {{WRAPPER}}, la regla se convierte en .banner-title { text-shadow: ... } para toda la página, y cada elemento con esa clase la capta, incluidos los encabezados de otros widgets. Si dejas el Selector vacío, la sombra pasa a {{WRAPPER}} .elementor-widget-container, que cubre todo el texto del widget.
Un control puede diseñar varios elementos. Separe los selectores con comas e inicie cada uno con {{WRAPPER}}, por ejemplo {{WRAPPER}} .banner-title, {{WRAPPER}} .banner-subtitle.
El panel Documentación al lado del editor de código enumera a {{title_shadow}} token para este campo. Déjalo fuera de tu HTML y CSS. Una sombra se almacena como números y un color, por lo que el token no tiene texto para imprimir y el Selector ya maneja la salida.
Hacer clic Guardar configuración cuando hayas terminado.
Utilice el control Sombra de texto 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. El control se encuentra en la sección que creó, mostrando su etiqueta y un ícono de lápiz.
Haga clic en el lápiz para abrir la ventana emergente. Eso activa la sombra con los valores iniciales de Elementor: Desenfoque 10, Horizontal 0, Vertical 0 y negro al 30% de opacidad. El lienzo se actualiza mientras arrastras los controles deslizantes.
- Desenfocar va de 0 a 100 px. En 0 obtienes una copia nítida de las letras y los valores más altos las suavizan hasta obtener un brillo.
- Horizontal y Vertical ejecute de -100 a 100 px y mueva la sombra hacia la izquierda o hacia la derecha y hacia arriba o hacia abajo.
Haga clic en la muestra de color para elegir el color de la sombra. El selector tiene un control deslizante de opacidad y acepta valores HEXA, RGBA o HSLA, para que pueda escribir un valor como rgba(0, 0, 0, 0.65) directamente.
Para eliminar la sombra, haga clic en la flecha de reinicio circular al lado del lápiz.
Casos de uso comunes #
- Encabezados de fotografías de héroes y pancartas con áreas brillantes detrás del texto.
- Texto sobre fondos de video, donde una suave sombra mantiene las palabras legibles a medida que cambia el fotograma.
- Tipo de pantalla retro, como un desplazamiento duro con borroso cero en números grandes o insignias de venta.
- Un brillo sobre fondos oscuros, realizado con un color de sombra claro, un gran desenfoque y sin desplazamiento.
Consejos para trabajar con el campo Text Shadow #
- Inicie cada selector con
{{WRAPPER}}. De lo contrario, la sombra puede filtrarse a otros widgets de la página. - Coloque el campo junto a un campo Tipografía que use el mismo selector, de modo que la configuración de fuente y sombra del encabezado se encuentre en una sección.
- Elija un color semitransparente. El negro con una opacidad del 40 al 70% parece natural y el negro sólido tiende a parecer pesado.
- Verifique la sombra con la imagen más brillante que probablemente obtenga el widget. Una sombra que funciona en una foto oscura puede desaparecer en una clara.
- Si el diseño necesita una sombra antes de que alguien toque el control, agregue una
text-shadowregla para.banner-titleen la pestaña CSS. El valor del control lo reemplaza una vez que un editor establece uno. - Para tarjetas, botones y contenedores, utilice el Cuadro Campo de sombras en cambio. Text Shadow sigue la forma de las letras.
Preguntas frecuentes #
¿el campo Sombra de texto es gratuito?
No. Text Shadow es uno de los campos Pro en Widget Builder, por lo que Master Addons Pro debe estar activo antes de poder agregarlo a un widget.
¿Por qué no aparece mi sombra de texto?
Primero revisa el Selector. Tiene que coincidir con un elemento en el HTML de su widget, por ejemplo {{WRAPPER}} .banner-title para un título con la clase banner-title. Luego guarde el widget y recargue el editor Elementor.
¿puedo usar el token {{title_shadow}} en mi CSS?
No. El token no imprime nada útil para este campo. Establezca la opción Selector y Elementor escribe text-shadow regla para ti.
¿por qué se muestra la sombra en los encabezados de otros widgets?
Falta el Selector {{WRAPPER}}, entonces coincide con esa clase en toda la página. Agregar {{WRAPPER}} delante de la clase y ahorra.
¿cuál es la diferencia entre Text Shadow y Box Shadow?
Text Shadow dibuja alrededor de las letras y no tiene configuración de extensión o inserción. Box Shadow dibuja alrededor del rectángulo del elemento. Utilice Text Shadow para encabezados y etiquetas, y Box Shadow para tarjetas y botones.
Envolviendo #
Coloque el campo Sombra de texto en una sección Estilo, asígnele una etiqueta y un nombre y configure el Selector en {{WRAPPER}} además de la clase de tu texto. Luego, los editores obtienen controles de color, desenfoque y desplazamiento en Elementor, y la sombra permanece dentro de ese widget. Emparejarlo con el Campo de tipografía para el resto del estilo del encabezado, consulte precios por lo que incluye cada plan.
