El campo Control deslizante agrega el control de rango de arrastrar para configurar de Elementor a un widget personalizado creado con los complementos maestros Creador de widgets. Los editores arrastran un identificador o escriben un número, eligen una unidad y el valor ingresa a su CSS. Úselo para espacios, anchos, alturas, tamaños de íconos, tamaños de fuente o cualquier otra cosa que sea un número más una unidad.
El control deslizante 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 Control deslizante #
- Muestra un control deslizante con un cuadro numérico y un menú de unidades en el panel Elementor.
- Estableces el mínimo, el máximo y el paso, más un valor inicial.
- El valor es un número y una unidad juntos, como 24 y px.
- Lo conecta a su CSS con una fila de Selectores de CSS o lo imprime en la pestaña HTML o CSS con dos tokens.
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 “Team Grid” con dos controles deslizantes: Card Gap para el espacio entre tarjetas y Avatar Size para las iniciales de la ronda.
Cómo agregar un campo deslizante #
- Ir a Complementos maestros > Creador de widgets y abre tu widget.
- Haga clic en el Estilo tabule y agregue una sección, por ejemplo “Diseño de cuadrícula”.
- Tipo
slideren el cuadro de búsqueda de campo de la izquierda. - Arrastrar Deslizador en la sección. Su configuración se abre en la barra lateral izquierda.
Se explican las opciones de campo deslizante #
- Etiqueta es el texto encima del control deslizante en Elementor, por ejemplo “Card Gap”.
- Nombre ¿es el ID único del campo y el inicio de sus tokens
card_gapda{{ card_gap.size }}. Sólo letras, números y guiones bajos. - Descripción aparece debajo del control deslizante en Elementor.
- Valor mínimo, Valor máximo y Paso establezca el rango y hasta dónde llega cada movimiento del identificador. Card Gap usa de 0 a 80 en pasos de 2.
- Valor predeterminado es el número y la unidad iniciales, configurados con su propio pequeño control deslizante y menú de unidades.
Escriba los valores Mínimo, Máximo y Paso incluso si los cuadros ya muestran 0, 100 y 1. Los cuadros que nunca toca no se guardan, y un control deslizante sin ninguno de ellos guardado vuelve a los rangos de Elementor: 0 a 1000 para px, 0 a 100 para % y 0 a 10 para em y rem. Cuando los configura, se usa el mismo rango para cada unidad, por lo que de 0 a 80 se aplica tanto a em como a px.
No hay ninguna configuración para la que aparecen las unidades. Los editores pueden elegir px, %, em y rem. Más abajo, Control responsivo agrega el ícono del dispositivo para que el escritorio, la tableta y el móvil puedan tener diferentes valores.
Conecte el control deslizante con los selectores CSS #
Desplácese hasta Selectores CSS y haga clic Agregar artículo. La nueva fila viene llena de un ejemplo (.text-1, .text-2 y color: {{VALUE}};), así que reemplace ambas cajas:
CSS Selector: .team-grid
CSS Properties: gap: {{SIZE}}{{UNIT}};
{{SIZE}} se reemplaza con el número y {{UNIT}} con la unidad elegida, entonces 24 px se convierte en gap: 24px;. Nu are nevoie {{WRAPPER}} en el selector porque el constructor lo agrega para ti. Agregue más filas para usar el mismo valor en otros elementos.
Utilice estas filas en lugar de la única Selector cuadro en la parte inferior de la barra lateral. Ese cuadro no tiene lugar para una propiedad CSS, por lo que no puede escribir una regla de trabajo para un control deslizante.
Utilice el valor en su plantilla en su lugar #
También puede imprimir el valor en la pestaña HTML o CSS. Escriba el tamaño y la unidad como dos tokens uno al lado del otro. El control deslizante Tamaño del avatar establece el ancho y el alto del avatar de esta manera:
.team-avatar {
width: {{ avatar_size.size }}{{ avatar_size.unit }};
height: {{ avatar_size.size }}{{ avatar_size.unit }};
}
Un desnudo {{ avatar_size }} no imprime nada. También puedes comparar el número en una condición, por ejemplo {% if card_gap.size >= 40 %}. Cuando el control responsivo está activado, use una fila de selectores CSS, ya que Elementor escribe una regla separada para cada dispositivo.
Hacer clic Guardar configuración cuando hayas terminado.
Utilice el control deslizante 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 control deslizante muestra un identificador, un cuadro numérico y una etiqueta de unidad.
Arrastre el identificador o escriba un número y el widget se actualizará de inmediato. Haga clic en la etiqueta de la unidad para cambiar entre px, %, em y rem.
Aquí la brecha se eleva a 48px y los avatares a 96px:
Casos de uso comunes #
- Espacios entre tarjetas, columnas y elementos de lista.
- Ancho, ancho máximo o alto de una imagen, tarjeta o sección.
- Tamaños de iconos, avatares e insignias.
- Tamaño de fuente o altura de línea para un elemento.
- Radio del borde o ancho del borde cuando todos los lados comparten un valor.
Consejos para trabajar con el campo Control deslizante #
- Escriba siempre Min, Max y Step para que el control deslizante tenga un rango sensato.
- Elija un rango que se ajuste a cada unidad que los editores puedan elegir. 0 a 80 está bien para px pero es muy grande para em.
- Mantenga un valor base para la propiedad en la pestaña CSS, como
gap: 24px;, entonces el widget mira justo antes de que alguien toque el control deslizante. - Reemplace el texto de ejemplo en una nueva fila de Selectores CSS. Tal como está, la fila apunta a clases que su widget no tiene.
- Para valores con cuatro lados, como relleno o margen, utilice el Campo de dimensiones.
Preguntas frecuentes #
¿el campo Control deslizante es gratuito?
No. Slider es uno de los campos Pro en Widget Builder, por lo que Master Addons Pro debe estar activo antes de poder agregarlo a un widget.
¿por qué mi token deslizante no imprime nada?
Un control deslizante contiene un número y una unidad, por lo tanto {{ field_name }} por sí solo no imprime nada. Usar {{ field_name.size }}{{ field_name.unit }}.
¿por qué el control deslizante sube a 1000?
Min, Max y Step no se guardaron. Escriba los valores en los tres cuadros, incluso si ya muestran 0, 100 y 1, luego guarde el widget.
¿puedo limitar el control deslizante solo a px?
No del panel de campo. Los editores pueden elegir px, %, em o rem. Elija un rango que funcione para los cuatro o establezca un valor predeterminado sensible para que px sea la unidad inicial.
¿necesito {{WRAPPER}} en el selector CSS?
No. Añade el constructor {{WRAPPER}} delante del selector para ti, entonces .team-grid es suficiente.
Envolviendo #
Agregue el campo Control deslizante, escriba Min, Max y Step, establezca un valor predeterminado y conéctelo con una fila de Selectores CSS como gap: {{SIZE}}{{UNIT}};. Utilice el .size y .unit tokens cuando el valor pertenece a su pestaña HTML o CSS. Para otros controles de tamaño, consulte Dimensiones y Tipografía campos y comprobar precios por lo que incluye cada plan.
