Sombra de caja

El Cuadro Campo de sombras coloca el control de sombra estándar de Elementor en el panel de su widget personalizado: desplazamiento horizontal y vertical, desenfoque, extensión, color con opacidad y un interruptor insertado. Dentro de los complementos maestros Creador de widgets, es el campo que permite a los editores levantar una tarjeta de la página, suavizar un botón o rebajar una entrada sin tocar la hoja de estilo.

El control Box Shadow es compatible Condiciones, una forma limpia de mostrarlo solo cuando hay activado un interruptor de sombra y el generador maneja la salida del token en todo el generador Motor de plantilla de sintaxis de ramita. Ambas guías cubren la configuración y las limitaciones.

Box Shadow es un control de grupo, la misma familia que Typography y Background. La conexión a su widget es un selector CSS, no un token: le dice al campo qué elemento diseña y Elementor escribe la sombra allí por sí solo.

Qué hace el campo Sombra de caja #

• Representa el control del grupo de sombras de cajas de Elementor, abierto desde el icono del lápiz al lado de la etiqueta del campo.
• Compensaciones horizontales y verticales coloca la sombra alrededor del elemento.
• Desenfocar y esparcir controla la suavidad y el alcance.
• Color incluye un canal alfa, que es de donde proviene la mayor parte de la calidad de las sombras.
• Posición alternar cambia entre una sombra exterior y un recuadro.
• Escribe el propio CSS al selector que proporcione; no existe ningún token de plantilla.

Si es nuevo en la creación de widgets, el Descripción general del creador de widgets es el lugar para empezar.

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 testimonial cuyo <article class="quote-card"> debería llevar una sombra controlada por el editor.

Cómo agregar un campo Box Shadow #

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

Arrástrelo a una sección debajo del Estilo tab, normalmente junto a los campos Border y Dimensiones en una sección de estilo de tarjetas. Una vez que aterriza, las opciones del campo se abren a la izquierda.

Se explican las opciones del campo Box Shadow #

• Etiqueta: el texto que se muestra junto al control en Elementor, por ejemplo “Card 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.
• Opciones de campos: anulaciones para los subcontroles dentro del grupo, como cambiar un valor predeterminado desde el que comienza la sombra.
• Descripción, Mostrar etiqueta, Separador y Condiciones son las opciones de visualización habituales.

Apunta el campo a tu selector #

Como todo control de grupo, el campo Sombra de caja no tiene {{shortcode}} para tu CSS. Una sombra son varios valores enrollados en una propiedad y a {{ token }} para las impresiones de campo nada útil. El Selector la opción es toda la conexión.

Para la tarjeta testimonial, el selector es:

{{WRAPPER}} .quote-card

• {{WRAPPER}} representa el contenedor del widget y mantiene la sombra en el alcance de este widget. Los controles de grupo usan el selector exactamente mientras lo escribes, así que escribe {{WRAPPER}} tú mismo.
• .quote-card es el elemento dentro de su widget HTML en el que aterriza la sombra.

Cuidado: un selector sin {{WRAPPER}} coincide todos .quote-card en la página, la configuración de sombra de un widget los rediseña todos. Nada te advierte; los estilos simplemente se difunden.

Mantenga una sombra alternativa en la pestaña CSS del widget si el diseño depende de una. Es la mirada en la primera caída y los valores del control toman el control una vez que un editor abre la ventana emergente.

Utilice el control Box Shadow en Elementor #

Coloque el widget en una página de Elementor, recargando el editor si la página ya estaba abierta. El control muestra su etiqueta con un icono de lápiz; al hacer clic en él se abre la ventana emergente de sombra.

Primero configure el color, luego levante el desenfoque y mantenga las compensaciones pequeñas para que la tarjeta se vea suave, o empuje Vertical hacia arriba con cero desenfoque para obtener una sombra gráfica dura. Voltee la posición para insertar en campos y pozos presionados. La vista previa rastrea cada cambio. Una nota de diseño: las sombras no ocupan espacio en el flujo, por lo que una extensión generosa puede sangrar en las secciones superiores e inferiores sin mover nada, lo cual vale la pena verificar cuando el widget se encuentra entre filas apretadas.

Casos de uso comunes #

• Tarjetas en widgets testimoniales, de precios y de equipo, donde una suave sombra separa la tarjeta de la página.
• Botones eso necesita profundidad en el estado predeterminado.
• Marcos de imagen, dando a las fotografías un borde elevado, parecido a una impresión.
• Barras y paneles adhesivos donde una sombra señala elevación sobre el contenido.
• Campos de formulario insertados, usando el interruptor insertado para una apariencia empotrada.

Consejos para trabajar con el campo Box Shadow #

• La opción Selector es toda la conexión. No hay token de sombra de cuadro para la pestaña CSS; esperar uno es el callejón sin salida más común con controles de grupo.
• Inicie siempre el selector con {{WRAPPER}}. El campo lo usa sin formato y al dejarlo se derrama la sombra sobre cada elemento coincidente en la página.
• Agrupa con Borde y Dimensiones. Los tres campos juntos forman una sección completa de estilo de tarjetas en el panel.
• Apóyate en el color alfa, no en la oscuridad. Una sombra negra con una opacidad del 10 al 15 por ciento se lee mejor que una gris sólida, y vale la pena una nota en la Descripción de su campo.
• Mantenga un respaldo en el widget CSS. Si el diseño necesita una sombra de forma predeterminada, envíela en la hoja de estilo y deje que el control la anule.

Preguntas frecuentes #

Envolviendo #

El campo Widget Builder Box Shadow brinda a los editores un control real sobre la profundidad: un campo, un selector que comienza con {{WRAPPER}}, y toda la ventana emergente de sombra aparece en el panel. Funciona en el mismo modelo de selector que Campo de tipografía, entonces la configuración se traslada directamente entre los controles del grupo. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.