Uso de Transform Translate vs.Margen negativo con Divi


No es ningún secreto que Divi viene con un montón de opciones. Y, a veces, algunas de estas opciones parecen ofrecer resultados similares. Es importante conocer la diferencia y cómo y cuándo usarlos. El margen negativo y la traducción por transformación son dos de esas opciones de diseño que pueden ofrecer un resultado similar y, en algunas situaciones, usar una en lugar de la otra puede tener más sentido.

En esta publicación, le facilitaremos la elección de la opción de diseño correcta mostrándole la diferencia entre ambos, dónde puede encontrarlos en el creador de Divi y cómo usarlos en su beneficio para crear diseños web impresionantes.

¡Hagámoslo!

(incrustar) https://www.youtube.com/watch?v=OwvQdZV3Jwg (/ incrustar)

Suscríbete a nuestro canal de Youtube

Cómo funciona el margen negativo

El margen negativo sigue siendo una de las técnicas más utilizadas en el diseño web y el diseño en general. Puede agregar una dimensión adicional rápida y sin esfuerzo a cualquier sitio web que cree. Ahora, en Divi, básicamente puede agregar un margen negativo a cualquier elemento de diseño en su página. Ya sea que desee agregar una superposición a una sección, fila o módulo, puede encontrar estas opciones en la configuración de espaciado yendo a la pestaña de diseño.

Puedes elegir qué tipo de superposición quieres crear; de abajo hacia arriba, de arriba hacia abajo, de izquierda a derecha o de derecha a izquierda. También es importante tener en cuenta el índice Z de su elemento. Las superposiciones más comunes ocurren de abajo hacia arriba debido al índice Z más alto del elemento.

transformar traducir

Revisa este tutorial para ver algunos excelentes ejemplos de superposición que se crean con margen negativo.

Cómo funciona Transform Translate

Transform translate tiene un enfoque completamente diferente, uno que también es mucho más visual. Cuando agrega un margen negativo a la configuración de espaciado de un elemento, debe ingresar manualmente un valor en una unidad de su elección (píxel, ventana gráfica,…). Verá que ese valor se convierte en acción en su página (en tiempo real) y puede continuar modificando el valor a medida que avanza.

En contraste con el margen negativo, la opción de diseño de traducción de transformación está mucho más orientada visualmente. Te da un eje que representa el ancho y alto de tu página, y puedes usar tu puntero para colocar el elemento donde quieras en la página. Puede encontrar la opción de diseño de traducción de transformación yendo a las opciones de transformación en la pestaña de diseño de cualquier elemento. Allí, tendrás que habilitar la segunda pestaña.

transformar traducir

Una de las grandes diferencias entre la traducción de transformación y el margen negativo, sin embargo, es lo que se está dejando atrás. Si está cambiando la posición de un elemento usando la opción de traducción de transformación, el espacio inicial que ocupa el módulo permanecerá. Con margen negativo, ocurre lo contrario.

transformar traducir

¿Creando pequeñas superposiciones? Opte por el margen negativo

Margen negativo superior

Si desea crear una superposición hacia arriba, deberá agregar un valor negativo al margen superior de su elemento. Después de agregar el margen superior negativo, le seguirá cualquier módulo que venga debajo del módulo, en la misma columna y fila. En otras palabras; el margen negativo se aplicará a todos los módulos que estén presentes en una columna en particular.

transformar traducir

Si quiere evitar eso, también tendrá que agregar un margen inferior personalizado. Utilice la misma cantidad de píxeles que utilizó para la superposición superior (sin el signo menos).

transformar traducir

Margen negativo izquierdo y derecho

Si agrega un margen negativo al lado izquierdo o derecho de un elemento, es necesario agregar la misma cantidad de píxeles (sin el signo menos) al otro lado. Si lo agrega solo a un lado, verá que el módulo aumenta de tamaño:

transformar traducir

Al agregar el mismo valor sin el menos al otro lado, se asegura de que el módulo mantenga el mismo tamaño que tenía antes.

transformar traducir

¿Creando superposiciones más grandes? Opta por Transform Translate

Si está creando superposiciones más grandes, es mejor elegir la opción de traducción de transformación. Funciona completamente diferente al margen negativo. En primer lugar, no tiene en cuenta ninguna estructura de página. Reposiciona visualmente el elemento sin tener en cuenta los tamaños de contenedor que están presentes en esa página. En segundo lugar, le ayuda a colocar el elemento exactamente donde desee sin tener que modificar manualmente los valores.

Agregar todos los elementos a la parte inferior de la sección

Al utilizar la opción de traducción de transformación en un elemento de diseño, hay que tener en cuenta que deja atrás el espacio que ocupa inicialmente. En la mayoría de las situaciones, desea deshacerse de ese espacio y, afortunadamente, eso también es posible. Comience agregando los módulos en la parte inferior de su sección (en una fila separada) y vuelva a colocarlos hacia arriba usando la opción de traducción de transformación.

transformar traducir

transformar traducir

Ocultar desbordamiento y cambiar la altura de la sección

Una vez que haya terminado de reposicionar los elementos en su sección, puede definir una altura para su sección. En la parte inferior, tendrá bastante espacio ocupado por los elementos reposicionados de los que desea deshacerse. Abra la configuración de la sección, vaya primero a la configuración de desbordamiento. Ocultar el desbordamiento vertical. Luego, vaya a la configuración de tamaño de su sección y elija una altura coincidente para la sección (en diferentes tamaños de pantalla).

transformar traducir

transformar traducir

Pensamientos finales

Las características en constante evolución de Divi a veces pueden dificultar la comprensión de la diferencia entre dos opciones de diseño que le permiten lograr resultados similares. Pero aunque algunas opciones pueden parecer iguales, existen diferencias que pueden ayudarlo a tomar una decisión entre ambas opciones. En esta publicación, le mostramos cuál es la diferencia entre ambos, dónde puede encontrarlos en Divi Builder y cómo usarlos en su beneficio al diseñar cualquier tipo de sitio web. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube por lo que siempre será una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.