Sombra de caja

El campo Sombra de caja agrega el control de sombra de caja de Elementor a un widget personalizado creado con los complementos maestros Creador de widgets. Los editores establecen el color, los desplazamientos, el desenfoque, la extensión y la posición desde una pequeña ventana emergente, y la sombra se aplica al elemento en el que apunta su selector CSS. Es el campo para levantar cartas de la página, suavizar botones o darle a un panel una apariencia presionada.

Box 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 caja #

• Agrega un control a la pestaña Estilo de su widget: su etiqueta y un ícono de lápiz que abre la configuración de sombra.
• Las configuraciones son Color, Horizontal, Vertical, Desenfoque, Extensión y Posición (Esquema o Puesta a Puesta).
• Elementor escribe el box-shadow CSS al elemento del Selector, por lo que no necesita 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.

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 de “Tarjeta testimonial” cuya tarjeta tiene la clase quote-card.

Cómo agregar un campo Box Shadow #

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 “Estilo de tarjeta”.
3. Tipo shadow en el cuadro de búsqueda de campo de la izquierda. Aparecen Box Shadow y Text Shadow.
4. Arrastrar Sombra de caja en la sección. Su configuración se abre en la barra lateral izquierda.

Se explican las opciones del campo Box Shadow #

• Etiqueta es el texto al lado del control en Elementor, por ejemplo “Card Shadow”.
• Nombre es el ID único del campo. Sólo letras, números y guiones bajos.
• Descripción es una nota para ti dentro del constructor.
• Selector, Tipo de sombra predeterminado, Valores de sombra predeterminados y Color de sombra predeterminado aparece debajo de la descripción. En nuestras pruebas, los cambios escritos en estos cuadros no se guardaron y el constructor registró un error, así que no confíe en ellos por ahora. En su lugar, configure el selector en la configuración común (siguiente sección) y dé a la tarjeta una sombra inicial en la pestaña CSS.
• Valor predeterminado no es utilizado por este campo.

Configure el selector #

Desplácese hasta la parte inferior de la barra lateral y escriba la clase del elemento en Selector caja bajo Clases de Control. Para la tarjeta testimonial:

.quote-card

No tienes que escribir {{WRAPPER}}. El constructor lo agrega frente a su selector, por lo que la regla se convierte en {{WRAPPER}} .quote-card y sólo afecta a este widget. Separe varios selectores con comas si una sombra debe aplicarse a más de un elemento. Si el Selector está vacío, la sombra pasa al contenedor exterior del widget.

Después de guardar, el cuadro Selector cerca de la parte superior de la barra lateral muestra el mismo valor.

Agregue una sombra alternativa #

Coloque la sombra inicial en la pestaña CSS. Se muestra hasta que un editor enciende el control y la sombra del control lo reemplaza después de eso:

.quote-card {
  box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
}

Hacer clic Guardar configuración cuando hayas terminado.

Utilice el control Box Shadow 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. Tu etiqueta aparece con un icono de lápiz.

Haga clic en el lápiz para abrir la ventana emergente. Eso activa la sombra con los valores iniciales de Elementor: Horizontal 0, Vertical 0, Blur 10, Spread 0 y negro al 50% de opacidad. Ajústelos y la tarjeta se actualiza a medida que arrastra:

• Color establece el color de la sombra y la opacidad. Un color teñido y semitransparente parece más suave que el negro.
• Horizontal y Vertical mueva la sombra hacia los lados y hacia arriba o hacia abajo.
• Desenfocar suaviza el borde. 0 da una sombra dura.
• Extender crece o reduce la sombra. Un pequeño valor negativo evita que un gran desenfoque se derrame hacia los lados.
• Posición cambia entre Esquema (fuera de la caja) e Insertar (dentro de ella).

Establecer posición en Insertar para una apariencia prensada, útil para campos de entrada y paneles silenciosos:

La flecha circular al lado del lápiz restablece el control y elimina la sombra.

Casos de uso comunes #

• Tarjetas en widgets testimoniales, de precios, de equipo y de blog.
• Botones que necesitan un poco de profundidad, a menudo combinados con un estilo flotante.
• Sombras duras y desplazadas para diseños planos y atrevidos.
• Insertar sombras en campos de entrada, barras de búsqueda y paneles empotrados.

Consejos para trabajar con el campo Box Shadow #

• Utilice el selector en la parte inferior de la barra lateral y escriba solo la clase. {{WRAPPER}} se agrega para ti.
• Mantenga una alternativa box-shadow en la pestaña CSS para que los nuevos widgets no parezcan planos.
• Para sombras de cartas suaves, pruebe con un desenfoque grande, un desplazamiento vertical de aproximadamente la mitad del desenfoque y un pequeño ensanchamiento negativo.
• Dale al elemento un radio de borde. Las sombras siguen las esquinas, por lo que las cartas redondeadas obtienen sombras redondeadas.
• Para sombras en texto, utilice Campo de sombra de texto en cambio.

Preguntas frecuentes #

Envolviendo #

Agregue el campo Sombra de caja a una sección Estilo, escriba la clase de su elemento en el Selector en la parte inferior de la barra lateral y mantenga una sombra alternativa ligera en la pestaña CSS. Luego, los editores controlan la sombra desde una ventana emergente. Para conocer el estilo del resto de la tarjeta, consulte Frontera y Dimensiones campos y comprobar precios por lo que incluye cada plan.