Dimensiones

El Campo de dimensiones proporciona a un widget personalizado el familiar control de espaciado de cuatro entradas de la pestaña Avanzado de Elementor: valores superior, derecho, inferior e izquierdo con un icono de enlace que los mantiene sincronizados. Dentro de los complementos maestros Creador de widgets, es el campo al que accede cada vez que el relleno, el margen o el radio del borde por esquina deben poder editarse desde el panel en lugar de codificarse en su hoja de estilo.

Como todo control de Widget Builder, Dimensions es compatible Condiciones, por lo que puede revelar opciones de espaciado solo cuando se aplican. 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 los detalles y limitaciones.

El valor que almacena incluye los cuatro lados más la unidad, y su panel CSS imprime cada pieza por su nombre. Obtener esa ortografía correcta es todo el truco, y hay un comportamiento específico de este campo que vale la pena conocer antes de conectarlo: el campo Selector simple del constructor no hace nada para controlar las dimensiones.

Qué hace el campo Dimensiones #

• Representa el control de cuatro entradas para arriba, derecha, abajo e izquierda, con el ícono de enlace que refleja un valor en todos los lados.
• Almacena todos los lados más la unidad en un solo valor, su CSS lee con notación de puntos.
• Ofrece un conmutador de unidades en todas las unidades que permita, como px, % y em.
• Puede limitar qué lados se muestran a través de la opción de dimensiones permitidas, hasta entradas solo horizontales o solo verticales.
• Admite valores responsivos entonces cada punto de interrupción mantiene su propio espacio.

Si no ha creado un widget antes, el Descripción general del creador de widgets cubre los conceptos básicos; empezar ahí.

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 Widget Builder. Nuestro ejemplo es un widget de tarjeta de precios cuyo .price-card el cuadro debería permitir a los editores configurar el acolchado interior.

Cómo agregar un campo Dimensiones #

Abra el panel de campos a la izquierda del editor Widget Builder y busque Dimensiones campo, listado con los otros campos de valores CSS, como el control deslizante.

Arrástrelo a una sección debajo del Estilo tab, el hogar habitual para los controles de espaciado. Una vez que aterriza, las opciones del campo se abren a la izquierda.

Dimensiones opciones de campo explicadas #

• Etiqueta: el texto al lado del control en Elementor, por ejemplo “Acolchado de tarjetas”.
• Nombre: el identificador único al que se refiere su CSS, letras, números y guiones bajos únicamente, por ejemplo pad.
• Predeterminado: el valor inicial, manteniendo arriba, derecha, abajo, izquierda, la unidad y si los lados comienzan vinculados.
• Unități de dimensiune: las unidades entre las que el usuario puede cambiar, como px, % y em.
• Dimensiones permitidas: qué entradas aparecen. “Todos” muestra cuatro lados; “horizontal” muestra sólo izquierda y derecha; “vertical” muestra solo arriba y abajo; una lista personalizada selecciona lados específicos.
• Responsivo: agrega el ícono del dispositivo para que el escritorio, la tableta y el móvil mantengan valores separados.
• Descripción, Mostrar etiqueta, separador y condiciones funcionan igual aquí que en cualquier otro campo.

Conecte el valor de Dimensiones a su CSS #

El valor almacenado es una matriz con las claves top, right, bottom, left, unit, y isLinked. En el panel CSS, deletrea los cuatro lados y repite la unidad después de cada uno:

.price-card {
  padding: {{ pad.top }}{{ pad.unit }} {{ pad.right }}{{ pad.unit }} {{ pad.bottom }}{{ pad.unit }} {{ pad.left }}{{ pad.unit }};
}

Con 24 en cada lado y px seleccionado, la regla se traduce como padding: 24px 24px 24px 24px;. Desenlaza los lados del panel y cada token lleva su propio número. El mismo patrón cubre margin y, uno al lado del otro por esquina, border-radius. Vale la pena recordar una peculiaridad de CSS si ofrece % como unidad: el relleno porcentual se resuelve en función del ancho del elemento, incluso para arriba y abajo, y los editores no esperarán eso.

Tenga cuidado: el campo Selector del constructor no emite ninguna propiedad CSS predeterminada para un control de Dimensiones, por lo que completarlo no produce nada. Escriba los lados en el panel CSS como se indicó anteriormente o defina entradas completas de selectores que contengan la propiedad completa; la opción Selector simple no es un atajo para este campo.

Utilice el control de Dimensiones en Elementor #

Coloque su widget personalizado en una página de Elementor o recargue el editor si la página ya estaba abierta; Los nuevos controles nunca aparecen en una pestaña de editor obsoleto. El control aparece con cuatro entradas, el conmutador de unidad y el icono de enlace en su esquina.

Escriba cualquier entrada mientras el ícono de enlace esté activo y los cuatro lados se actualicen juntos. Haga clic en el ícono para desvincular y cada lado tomará su propio valor, que es como se obtiene un relleno asimétrico, como una parte superior más alta que una inferior. Con Responsive activado, el ícono del dispositivo almacena espacios separados por punto de interrupción.

Casos de uso comunes #

• Acolchado de tarjetas y cajas, el control de espaciado más común en widgets personalizados.
• Márgenes de sección y envoltura para que los editores puedan afinar el ritmo vertical entre bloques.
• Radio del borde por esquina, usando los cuatro valores como esquinas en lugar de lados.
• Acolchado de botones, a menudo con dimensiones permitidas limitadas a horizontales.
• Compensaciones de medios, empujando una imagen o insignia con valores de margen.

Consejos para trabajar con el campo Dimensiones #

• Deletrea todos los lados y la unidad. La conexión del panel CSS es de cuatro tokens más cuatro tokens unitarios; un desnudo {{ pad }} imprime nada utilizable.
• Omita el campo Selector simple. No emite ninguna propiedad para Dimensiones. El panel CSS, o una entrada completa de selectores, es la ruta de trabajo.
• Limite los lados cuando la propiedad lo requiera. Un control solo horizontal mantiene honesto el campo de relleno de botones.
• Establezca un valor predeterminado vinculado. Comenzando con lados iguales y vinculados, los editores brindan una base sensata y una entrada en la que pensar.
• Mantenga el espacio entre bases en su hoja de estilo. El widget debería verse correctamente en la primera caída; Luego el control se ajusta desde allí.
• Encienda Responsive para acolchado y margen. El espaciado entre escritorios rara vez sobrevive al contacto con la pantalla de un teléfono.

Preguntas frecuentes #

Envolviendo #

El campo Dimensiones del generador de widgets mueve las decisiones de relleno, margen y radio fuera de su hoja de estilo hacia el panel: un control, cuatro lados, una unidad, todo impreso por su nombre en la pestaña CSS. Úselo al lado del Campo deslizante, que cubre las longitudes de un solo valor por las que sería excesivo un control de cuatro lados. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.