Las opciones de transformación de Divi son un conjunto de herramientas poderosas que te permiten manipular el diseño web de formas sorprendentes, creando profundidad y efectos visuales atractivos.

Las opciones de transformación de Divi te permiten mover elementos, escalarlos, rotarlos en tres ejes diferentes, sesgar elementos y ajustar el origen de la transformación, todo dentro del Constructor Visual.

Ya no es necesario escribir código personalizado detallado para agregar efectos de transformación a los elementos de tu página. Ahora puedes transformar todas las Secciones, Filas y Módulos directamente en el Constructor Visual y ver los efectos en tiempo real.

Combinar estos efectos con las opciones de hover de Divi te permite crear diseños interactivos potentes mientras el usuario navega por tu sitio web.

Al aplicar efectos de transformación, es importante notar que esto no afectará a los elementos alrededor.

Esto significa que puedes mover elementos, aumentar su tamaño y rotarlos sin afectar a los elementos vecinos.

Esto permite sacar elementos de sus Columnas, Filas o Secciones padres, permitiéndote apilar objetos y crear collages hermosos con diferentes módulos.

Dónde encontrar las opciones de transformación en Divi

• Abre la ventana de configuración del elemento haciendo clic en el ícono de engranaje

• Ve a la pestaña Diseño

• Expande el grupo de opciones de Transformación

Cómo usar las opciones de transformación de Divi

La interfaz de transformación incluye deslizadores y campos de entrada para ajustar valores, y presenta la transformación visualmente para que sea fácil entender lo que está ocurriendo.

Al ajustar los controles, verás la transformación en acción en la página.

Transformar Escala

Arrastra los deslizadores para aumentar o disminuir el tamaño del elemento.

Por defecto, la proporción original se mantiene, pero puedes desvincular el alto y ancho para ajustarlos independientemente haciendo clic en el ícono de cadena en la esquina inferior derecha.

Transformar Traslación

Mover un elemento con traslación permite moverlo sin afectar a los elementos circundantes o su elemento padre.

Esto es similar a usar posición absoluta en CSS, pero la posición se basa en la posición en línea del elemento, no en la posición relativa del padre.

Transformar Rotación

• La primera opción permite inclinar elementos hacia abajo-derecha o arriba-izquierda

• La segunda opción permite inclinar elementos hacia atrás o adelante

• La tercera opción permite inclinar elementos de izquierda a derecha

En lugar de rotar elementos en Photoshop, ahora puedes crear este efecto dentro de Divi, ahorrándote mucho tiempo de diseño. Y si necesitas reemplazar una imagen, no tienes que editarla otra vez en Photoshop, solo la reemplazas en Divi.

Transformar Sesgado

Esto se usa para crear efectos de profundidad interesantes. Arrastra los deslizadores para ajustar el sesgado.

Por defecto, se mantiene la proporción original, pero puedes desvincular los valores para ajustarlos individualmente haciendo clic en el ícono de cadena en la esquina inferior derecha.

Al igual que con la escala, puedes sesgar elementos con proporción bloqueada o desbloquear cada lado para ajustarlos independientemente.

Combinar sesgado y rotación puede crear efectos 3D sorprendentes que añaden profundidad y complejidad a tu página.

Origen de la Transformación

Esto es útil para mover el punto donde ocurre un efecto de transformación.

Ejemplo: Usa esta opción junto con la rotación para definir el punto exacto donde ocurre la rotación. Solo debes posicionar el punto usando la interfaz proporcionada.

Mejores prácticas y consejos para usar las opciones de transformación de Divi

Usa transformación con opciones de hover
Para crear diseños verdaderamente interactivos, combina efectos de transformación y hover para que los elementos se transformen al pasar el cursor. 

Consejo profesional: si quieres mover un elemento con transformación traslación al pasar el cursor, también aumenta su tamaño con transformación escala para evitar saltos bruscos al hacer hover.

Agrega perspectiva para efectos 3D

En diseño web, puedes posicionar elementos en 3D usando la propiedad de transformación. En Divi, estas opciones están integradas.

La propiedad principal que da posición 3D es rotación, que permite rotar objetos en los ejes z, x o y.

Sin embargo, la rotación por sí sola no hace que el elemento se vea 3D a menos que se aplique la propiedad de perspectiva.

La imagen rota pero sigue viéndose 2D, como si la apretaran de arriba y abajo.

Si añades perspectiva con un pequeño fragmento de CSS al elemento padre (la fila), se añade perspectiva a la imagen.

Dependiendo del valor de perspectiva, puedes aumentar o disminuir la distancia aparente del objeto respecto al usuario.

Ejemplo de apariencia si añades perspectiva: 1000px; a la columna.

Para más información, mira cómo usar perspectiva con transformaciones para diseñar muros fotográficos 3D en Divi.

Seguir aprendiendo

• Cómo agregar efectos 3D con GIFs y videos usando opciones de transformación

• Cómo usar formas con movimiento transformado como fondos en Divi

• Cómo añadir marcadores de imagen con las opciones de transformación de Divi

• 3 efectos de hover con transformación que puedes aplicar a tus imágenes con Divi

• Cómo transformar múltiples elementos para efectos abstractos en Divi

• Usar transformación traslación versus margen negativo en Divi

• Cómo usar opciones de transformación para diseñar fondos únicos para divisores de sección en Divi

• Módulos interactivos creativos usando transformación y opciones de hover en Divi

• Cómo apilar elementos de portafolio bellamente con las opciones de transformación de Divi