Deslizador

El Campo deslizante coloca un control de rango de arrastrar para configurar en el panel de su widget personalizado, el mismo que utiliza Elementor para espacios, anchos y radios de borde en sus propios widgets. Dentro de los complementos maestros Creador de widgets, usted establece un mínimo, un máximo, un paso y las unidades entre las que el usuario puede elegir. Quien edite el widget en Elementor arrastra un identificador en lugar de escribir valores CSS sin procesar.

El campo Control deslizante es compatible Condiciones como todo control, y como su valor es numérico, el Motor de plantilla de sintaxis de ramita te permite diversificarlo con comparaciones como {% if columns >= 3 %}. Ambas guías cubren la configuración y las limitaciones.

El valor que produce un control deslizante no es un número simple. Es un par: un tamaño y una unidad. Ese detalle decide cómo conectar el campo a su hoja de estilo, por lo que este documento pasa la mayor parte de su tiempo allí.

Qué hace el campo Control deslizante #

• Representa un control deslizante de rango con un identificador arrastrable y una entrada numérica al lado, que coincide con los controles deslizantes nativos de Elementor.
• Ofrece un conmutador de unidades cuando permites más de una unidad, el mismo control puede funcionar en px, % o em.
• Almacena un tamaño y una unidad juntos como valor, su panel CSS lee con notación de puntos.
• Admite valores responsivos, permitiendo a los usuarios establecer un tamaño diferente por dispositivo desde el icono del dispositivo.
• Acepta valores dinámicos y puede escribir CSS a través del mecanismo de selectores de Elementor como alternativa al panel CSS.

¿nuevo en la construcción de widgets? Leer el Descripción general del creador de widgets primero; Este documento supone que ya tiene un widget abierto en el editor.

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 una cuadrícula de tarjetas de equipo cuyo .team-row el contenedor necesita un espacio ajustable por el usuario entre tarjetas.

Cómo agregar un campo deslizante #

En el editor Widget Builder, desplácese por el panel de campos de la izquierda hasta encontrar el archivo Deslizador campo, listado con los otros campos de valores CSS, como Dimensiones.

Arrástrelo a una sección debajo del Estilo tab, donde los controles de tamaño generalmente están activos, aunque el Contenido y el Avanzado también funcionan. Una vez que aterriza, las opciones del campo se abren a la izquierda.

Se explican las opciones de campo deslizante #

• Etiqueta: el texto al lado del control en Elementor, por ejemplo “Card Gap”.
• Nombre: el identificador único al que se refiere su CSS, letras, números y guiones bajos únicamente, por ejemplo my_gap.
• Predeterminado: el valor inicial, almacenado como tamaño más una unidad.
• Min, Max, Step: el rango que cubre el mango y hasta dónde se mueve cada incremento de arrastre. Un control de espacio podría ir de 0 a 100 en pasos de 1.
• Unități de dimensiune: las unidades entre las que el usuario puede alternar, como px, % y em. Una unidad oculta el conmutador; varios lo muestran.
• Responsivo: agrega el ícono del dispositivo para que cada punto de interrupción mantenga su propio valor.
• Dinámico y Selectores: soporte dinámico de etiquetas y mecanismo de selectores de Elementor que se tratan a continuación.
• Descripción, etiqueta de visualización, separador y condiciones son las mismas opciones de visualización que ofrece cada campo.

Conecte el control deslizante a su CSS #

El valor de un control deslizante es una matriz con dos teclas: size y unit. Imprimir el nombre del campo por sí solo no genera nada, porque no hay un valor único para imprimir. En el panel CSS, escriba siempre ambas partes con notación de puntos:

.team-row {
  gap: {{ my_gap.size }}{{ my_gap.unit }};
}

Un valor de 24 con px seleccionados representa como gap: 24px;. Cambie el conmutador de unidad a % y se convertirá en la misma regla gap: 24%; sin tocar la plantilla.

Ai grijă: {{ my_gap }} por sí solo imprime una cadena vacía. Si tu regla se traduce como gap: ; y el diseño ignora el control, lo que falta .size y .unit casi siempre son por qué. El mismo silencio sigue a un cambio de nombre: cambie el nombre del campo más tarde y los tokens antiguos seguirán renderizándose, solo que sin nada en ellos, así que actualice el panel CSS en la misma sesión.

La alternativa de los selectores #

Los controles deslizantes también funcionan con el mecanismo de selectores de Elementor, que escribe el CSS para usted en lugar de pasar por el panel CSS. Para un control deslizante, Elementor inyecta un valor básico en lugar de una declaración completa, por lo que el campo Selector simple del constructor por sí solo no produce una regla utilizable. Una entrada de selectores personalizada debe llevar la propiedad completa, utilizando los propios marcadores de posición de Elementor:

'{{WRAPPER}} .team-row' => 'gap: {{SIZE}}{{UNIT}};'

Para la mayoría de los widgets, el token del panel CSS es la ruta más sencilla; busque entradas de selectores cuando desee que Elementor administre la salida.

Utilice el control deslizante en Elementor #

Agregue su widget personalizado a una página en Elementor. Si la página ya estaba abierta, vuelva a cargar el editor primero, ya que una pestaña obsoleta sigue mostrando el panel anterior. El control deslizante aparece en el panel del widget con su etiqueta, el identificador, la entrada numérica y el conmutador de unidades si permitió más de una unidad.

Arrastre el identificador o escriba un número y la vista previa le seguirá inmediatamente. Con Responsive activado, el ícono del dispositivo cambia el control entre los valores de escritorio, tableta y móvil, por lo que una brecha de escritorio de 40 px puede reducirse a 16 px en teléfonos del mismo campo.

Casos de uso comunes #

• Rejilla y espacios flexibles entre tarjetas, columnas o elementos de galería.
• Anchos y alturas de los elementos, como el tamaño de una imagen o la longitud del divisor, con una opción % para diseños fluidos.
• Radio fronterizo en tarjetas y botones cuando un radio uniforme es suficiente.
• Tamaño de iconos y fuentes donde una unidad em mantiene las cosas en relación con el texto circundante.
• Compensaciones de espaciado como la distancia entre una insignia y la esquina en la que se encuentra.

Consejos para trabajar con el campo Control deslizante #

• Imprima siempre ambas partes. {{ my_gap.size }}{{ my_gap.unit }} es toda la conexión; el nombre del campo desnudo te da una cadena vacía.
• Haga coincidir Min, Max y Step con la propiedad. Un rango de 0-100 en pasos de 1 se adapta a un espacio; Es posible que un control de radio solo necesite 0-50.
• Ofrezca sólo las unidades que tengan sentido. Un control solo de px es más claro que uno en el que % produce diseños rotos.
• Mantenga un respaldo en la estructura del panel CSS. Escriba la regla para que el widget aún se establezca con sensatez en el valor predeterminado en la primera caída.
• Active Responsive para los valores de diseño. Los espacios y anchos casi siempre necesitan una configuración móvil más estricta.
• Prefiera el token del panel CSS sobre el campo Selector. El campo Selector simple inyecta solo un valor mínimo para los controles deslizantes, lo cual no es una declaración completa.

Preguntas frecuentes #

Envolviendo #

El campo Control deslizante Widget Builder convierte cualquier longitud de CSS en su widget en un control que el editor puede arrastrar: nombrar el campo, vincular el rango e imprimir {{ name.size }}{{ name.unit }} en el panel CSS. Se empareja naturalmente con el Campo de dimensiones cuando un widget necesita un espaciado de cuatro lados junto con valores individuales. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.