Dimensiones

El campo Dimensiones agrega el control de espaciado de cuatro cajas de Elementor (arriba, derecha, abajo e izquierda, con un ícono de enlace y un menú de unidad) a un widget personalizado creado con los complementos maestros Creador de widgets. Úselo siempre que el acolchado, el margen, el ancho del borde o el radio de la esquina se establezcan desde el panel Elementor en lugar de fijarse en su CSS.

Dimensiones es un campo Pro. El complemento gratuito incluye un Widget Builder limitado y viene con el conjunto completo de campos Complementos maestros Pro.

Qué hace el campo Dimensiones #

• Muestra cuatro cuadros numéricos en el panel Elementor. Con el icono de enlace encendido, escribir en un cuadro llena los cuatro.
• Un menú de unidades permite a los editores cambiar entre las unidades que usted permite, como px, em y %.
• Puedes ocultar los lados que no necesitas. Es posible que un campo de relleno de botones solo muestre Derecha e Izquierda.
• Elementor escribe el CSS por usted a través de las filas de Selectores CSS del campo, incluidos valores separados por dispositivo cuando el Control Responsivo está activado.

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 de precios” con a price-card caja y a price-btn botón y tres campos de Dimensiones: Relleno de Tarjetas, Radio de Tarjetas y Relleno de Botones.

Cómo agregar un campo Dimensiones #

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 “Espaciado de tarjetas”.
3. Tipo dimensions en el cuadro de búsqueda de campo de la izquierda.
4. Arrastrar Dimensiones en la sección. Su configuración se abre en la barra lateral izquierda.

Dimensiones opciones de campo explicadas #

Aquí está el campo Acolchado de tarjetas:

• Etiqueta es el texto encima de los cuadros de Elementor, por ejemplo “Relleno de tarjetas”.
• Nombre es el ID único del campo. Sólo letras, números y guiones bajos.
• Descripción aparece bajo el control en Elementor.
• Dimensiones permitidas tiene cuatro botones de flecha para arriba, derecha, abajo e izquierda. Haga clic en una flecha para desactivar ese lado. En Elementor, un lado desactivado se muestra como un cuadro gris que no se puede editar.
• Tipo de propiedad ofrece personalizado, margen, relleno, ancho de borde y radio de borde. Elija uno y el constructor completará una fila de Selectores CSS para esa propiedad (más sobre esto a continuación). El ancho del borde también agrega border-style: solid.
• Unidades de tamaño enumera las unidades que los editores pueden elegir. Un nuevo campo permite px, %, em, rem, vh y vw. Elimina los que no tienen sentido para tu diseño.
• Valor predeterminado tiene cuatro cuadros para los valores iniciales superior, derecho, inferior e izquierdo.

El campo Acolchado de botones solo necesita izquierda y derecha, por lo que las flechas superior e inferior están apagadas:

Mai jos, Control responsivo agrega el ícono del dispositivo para que el escritorio, la tableta y el móvil puedan tener valores diferentes. Mostrar etiqueta, separador y condiciones funcionan como lo hacen en otros campos.

Conecte el campo con los selectores CSS #

Cada Selectores CSS la fila tiene un Selector CSS (qué elemento estilizar) y Propiedades CSS (la regla a escribir). Cuando elige Relleno como tipo de propiedad, la fila comienza así:

CSS Selector:   {{WRAPPER}}
CSS Properties: padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};

{{WRAPPER}} por sí solo significa todo el widget. Cámbialo al elemento que desees, como por ejemplo .price-card. Poți pleca {{WRAPPER}} afuera, porque el generador lo agrega frente a su selector, por lo que la regla permanece dentro de este widget.

În Properties CSS, {{TOP}}, {{RIGHT}}, {{BOTTOM}} y {{LEFT}} se reemplazan con los números de los cuatro cuadros, y {{UNIT}} con la unidad elegida. Con el tipo de propiedad configurado en Personalizado, usted mismo escribe la regla. El campo Acolchado de botones utiliza solo dos lados:

CSS Selector:   .price-btn
CSS Properties: padding-right: {{RIGHT}}{{UNIT}}; padding-left: {{LEFT}}{{UNIT}};

Hacer clic Agregar artículo aplicar el mismo valor a otro elemento con una segunda fila.

Dos cosas que debes saber. El soltero Selector el cuadro cerca de la parte inferior de la configuración común no hace nada para un campo Dimensiones, así que utilice siempre las filas de Selectores CSS. Y al elegir un tipo de propiedad, encontrará el cuadro Propiedades CSS para usted, así que elíjelo primero y verifique las filas nuevamente si lo cambia más tarde.

Utilice los valores de su plantilla en su lugar #

También puede imprimir los valores directamente en la pestaña HTML o CSS. El campo se mantiene top, right, bottom, left y unit, entonces escribe cada lado seguido de la unidad:

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

Un desnudo {{ card_padding }} no imprime nada. Para la mayoría de los widgets, las filas de Selectores CSS son la mejor opción, ya que Elementor escribe una regla separada para cada dispositivo cuando el Control Responsivo está activado.

Hacer clic Guardar configuración cuando hayas terminado.

Utilice el control de Dimensiones 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. Cada campo Dimensiones muestra cuatro cuadros etiquetados Arriba, Derecha, Abajo e Izquierda, el ícono de enlace y un menú de unidad en la esquina superior derecha. El acolchado de botones muestra la parte superior e inferior atenuadas.

Escriba un número y la tarjeta se actualizará de inmediato. Haga clic en el icono de enlace para desvincular los lados y darle a cada uno su propio valor, como lo hace aquí el relleno de tarjetas con 64 en la parte superior e inferior y 56 en los lados. Utilice el menú de unidades para cambiar entre las unidades que permitió.

Casos de uso comunes #

• Acolchado interior para tarjetas, cajas y pancartas.
• Márgenes entre partes de un widget, como el espacio bajo un encabezado.
• Radio de esquina en tarjetas, imágenes y botones, utilizando el tipo de propiedad Border Radius.
• Acolchado de botones izquierdo y derecho, con los lados superior e inferior apagados.
• Anchos de borde por lado, utilizando el tipo de propiedad Ancho de borde.

Consejos para trabajar con el campo Dimensiones #

• Cambie siempre el selector CSS desde {{WRAPPER}} a tu elemento. Tal como está, el espaciado se aplica a todo el contenedor del widget.
• Recorte las unidades de tamaño a las que desea que utilicen los editores. px y em cubren la mayoría de los espacios.
• Desactive los lados que no se apliquen. Impide que los editores establezcan valores que no tienen ningún efecto.
• Establezca un valor predeterminado que coincida con su diseño, para que el widget se vea bien tan pronto como se agregue.
• Tenga cuidado con % para relleno y margen. Los navegadores calculan el porcentaje de relleno a partir del ancho del elemento, incluso para arriba y abajo.
• Para un solo valor, como un espacio o un tamaño de icono, el Campo deslizante es más sencillo.

Preguntas frecuentes #

Envolviendo #

Elija un tipo de propiedad, apunte la fila Selectores CSS a su elemento, recorte las unidades y los lados y establezca un valor predeterminado sensato. Luego, los editores obtienen el mismo control de espaciado que conocen de los propios widgets de Elementor. Para conocer el resto del estilo de la caja, consulte Frontera y Antecedentes campos y comprobar precios por lo que incluye cada plan.