Los diseños de cuadrícula son ordenados y pueden resultar aburridos. Una imagen que se inclina fuera de su columna o una tarjeta que crece ligeramente debajo del cursor: pequeñas transformaciones como estas separan una página diseñada de una apilada. El Transforma extensión en Complementos maestros para Elementor coloca el conjunto de herramientas de transformación CSS completo en cada elemento: traducir, rotar, escalar, sesgar y voltear, con configuraciones separadas para estados normales y flotantes.
Qué hace la extensión Transforms #
Una vez habilitado, cada elemento Elementor obtiene un Transforma sección bajo su Avanzado pestaña. Voltear Transformaciones habilitadas a Sí aparecen y seis controles, cada uno aplicando una transformación CSS al elemento sin tocar el flujo de diseño real:
- Traducir: mueva el elemento a lo largo de los ejes X e Y, en porcentaje de su propio tamaño.
- Girar: gírelo en cualquier ángulo.
- Scale: agrandarlo o encogerlo en cada eje de forma independiente.
- Sesgar: inclínelo para obtener una apariencia diagonal y dinámica.
- Voltear horizontal / Voltear vertical: reflejelo con un clic.
El Normal y Flotar las pestañas contienen valores separados, por lo que un elemento puede permanecer en reposo en una dirección y transformarse cuando el cursor aterriza sobre él, con una duración de transición que usted controla.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Sigue el guía de instalación primero.
- Transforms es una extensión gratuita, por lo que no se requiere licencia Pro.
Cómo habilitar la extensión Transforms #
Desde su panel de WordPress, vaya a Complementos maestros y abre el Extensiones pestaña. Transformaciones se encuentra en el Widgets de animación grupo con insignia Hot, entre Animación de entrada y revelar. Haga clic en su palanca para que se vuelva morado y luego presione Guardar cambios y espere el aviso verde “Configuración guardada correctamente”.
Abra el panel Transformar en un elemento #
Seleccione el elemento en el editor Elementor, un widget de imagen en la demostración y abra Avanzado pestaña. Expandir el Transforma sección con insignia MA morada e interruptor Transformaciones habilitadas a Sí. Los seis controles de transformación aparecen debajo de las pestañas Normal y Hover, cada una de las cuales se abre con el ícono de su lápiz.
Mueve y escala el elemento #
Haga clic en el lápiz al lado Traducir y se abren dos controles deslizantes: Traducir X y Traducir Y. La demostración empuja la imagen 71 en el eje X y se desliza hacia el borde de la sección en el lienzo a medida que el control deslizante se mueve. Los valores son relativos al tamaño del propio elemento y cada eje tiene su propia configuración de respuesta por dispositivo.
El Escala el control funciona de la misma manera. Establecer la escala X en 1,4 en la demostración amplía la imagen más allá de su columna, superponiendo el límite de la sección para el tipo de ruptura que enmarca una cuadrícula simple no puede hacerlo. Deje la escala Y vacía y siga a X, o establezca ambas para estiramiento independiente.
Gira y sesga el trabajo de la misma manera. Abra el control, arrastre el control deslizante y el lienzo mostrará el ángulo a medida que avanza.
Agregue una transformación flotante #
Cambiar al Flotar tab y los mismos controles se aplican solo mientras el cursor está en el elemento, más dos extras: Voltear horizontal y Voltear vertical conviértase en conmutadores Sí/No y a Duración de la transición (ms) el control deslizante controla qué tan rápido se anima el cambio. La demostración activa Flip Horizontal con una transición de 400 ms, por lo que la imagen se refleja suavemente al pasar el cursor y retrocede cuando el cursor sale.
El resultado en la página #
Publique y verifique el front-end. La imagen se desplaza y se amplía más allá de su columna exactamente como está dispuesta en el editor, y al pasar el cursor se reproduce el flip con la facilidad de 400 ms. Las transformaciones son puro CSS, por lo que nada carga extra y el diseño alrededor del elemento nunca vuelve a fluir.
Una cosa para recordar: las transformaciones son sólo visuales. El elemento todavía ocupa su lugar original en el diseño, por lo que un elemento muy traducido puede superponerse a sus vecinos. Ese suele ser el punto, pero consulte tableta y móvil, donde el mismo desplazamiento cubre más pantalla.
Donde las transformaciones ganan su lugar #
- Imágenes de ruptura. Una foto escalada y desplazada más allá del borde de la columna proporciona una profundidad de sección de héroe.
- Comentarios flotantes. Las tarjetas que se levantan, inclinan o crecen ligeramente debajo del cursor se leen como en las que se puede hacer clic.
- Acentos rotados. Las insignias, sellos y etiquetas se encuentran de forma más natural en un ligero ángulo.
- Secciones sesgadas. Unos pocos grados de inclinación en un divisor o botón rompen la monotonía del rectángulo.
- Activos reflejados. Gire una flecha o ilustración en lugar de exportar una segunda imagen.
Vídeotutorial #
Observe cada control en acción, desde habilitar la extensión hasta el giro flotante en la página publicada.
Preguntas frecuentes #
¿cómo roto o escalo un elemento en Elementor?
Habilite la extensión Transformaciones en la pestaña Extensiones de complementos maestros, seleccione el elemento y abra Transformaciones en la pestaña Avanzado. Active Transformaciones habilitadas, luego use el control Girar o Escalar; el lienzo muestra una vista previa del cambio en vivo mientras arrastra el control deslizante.
¿puedo aplicar una transformación diferente al flotar?
Sí. El panel tiene pestañas Normal y Hover separadas. Establezca valores en reposo en Normal, valores de desplazamiento en desplazamiento y use el control deslizante Duración de transición para controlar la rapidez con la que el elemento se anima entre los dos estados.
¿las transformaciones rompen el diseño de mi página?
No. Las transformaciones CSS son solo visuales, por lo que el elemento mantiene su espacio original en el diseño y el contenido circundante nunca vuelve a fluir. Un elemento transformado puede superponerse a los vecinos por diseño, por lo que la vista previa de la tableta y el móvil para confirmar las compensaciones aún se ven bien.
¿qué transformaciones incluye la extensión?
Traducir X e Y, Girar, Escalar X e Y, Inclinar, Voltear Horizontal y Voltear Vertical, cada uno disponible en estados normal y flotante. Cada control responde, por lo que los valores pueden diferir según el dispositivo.
¿la extensión Transforms es gratuita?
Sí. Transforms se envía con la versión gratuita de Master Addons para Elementor, en el grupo Animation Widgets de la pestaña Extensiones. La página de precios cubre lo que agregan los planes Pro.
Envolviendo #
La extensión Transforms le entrega el kit de herramientas de transformación CSS dentro del panel Elementor: mueva, gire, escale, incline y voltee cualquier cosa, con estados de desplazamiento y transiciones suaves incluidos. Comience con una imagen de ruptura o un levantamiento flotante y construya a partir de ahí. Se empareja naturalmente con el Extensión de animación de entrada para elementos que llegan en movimiento y la alineación completa de Widgets y extensiones de complementos maestros cubre el resto.
