Cómo alinear secciones y columnas de Elementor

Mientras trabaja con Elementor , notará que es un poco complicado posicionar de forma personalizada sus secciones y columnas. Debe alinear columnas y secciones vertical y horizontalmente para lograr un diseño responsivo de "estirar hasta llenar". Sin esta alineación, los elementos de las columnas con diferentes alturas no se ajustarán en la pantalla.

• ¿Por qué necesitamos alinearnos?
• ¿Cómo funcionan las Columnas o secciones para un Diseño Responsivo?
• ¿Cómo alinear secciones y columnas de Elementor?
• Para solucionar problemas de ancho de respuesta, utilice el desbordamiento oculto
• Cuidando el posicionamiento
• Unidades relativas
• Controle la profundidad de cada elemento utilizando el índice Z
• El truco de la funcionalidad duplicada
• Compensaciones
• La regla de oro
• Conclusión

¿Por qué necesitamos alinearnos?

En cada columna o sección, el contenido puede ser de diferentes categorías. Puede ser en forma de imágenes, texto y calificaciones. Para una apariencia completa, se recomienda que haya uniformidad en la apariencia del contenido. No debería ser simplemente arrojado allí, tirado, simplemente por el gusto de hacerlo.

Con una buena alineación, puedes hacer que el sitio web parezca más limpio y elegante, para que no parezca desordenado. Con la opción de alineación, puedes ajustar varios widgets de diferentes tamaños uno al lado del otro en la misma columna.

¿Cómo funcionan las Columnas o secciones para un Diseño Responsivo?

Elementor 2.5 le permite posicionar de forma personalizada su diseño y contenido. Con la nueva función de posicionamiento personalizado, puedes mover los widgets a cualquier ubicación. Pero realmente no puedes hacerlo más allá de una determinada sección. Estos widgets son relativos a la columna en la que se encuentran. Esto puede causar un problema en la capacidad de respuesta del diseño.

Suponga que tiene un diseño de tres columnas. Con la ayuda del posicionamiento personalizado, puedes arrastrar y soltar un widget desde la columna derecha a la columna central, o como quieras.

Pero hacerlo sólo beneficiará a los visitantes de escritorio porque les parecerá bien. Sin embargo, causará un problema si se accede al sitio web desde un dispositivo móvil porque Elementor apila las columnas verticalmente en el dispositivo móvil.

Entonces, en lugar de tener tres columnas una al lado de la otra, es posible que experimente las tres columnas apiladas una sobre otra. El elemento ya no aparecerá en la columna del medio como ocurre en los escritorios.

Aunque puedes modificar inteligentemente la vista móvil con una configuración oculta, no hay garantía de que la mayoría de las personas puedan encontrarla. Entonces, ¿por qué frustrar a los usuarios? Hacer que el diseño sea responsivo y adaptable es la solución correcta. Para que no se estrelle por ningún lado.

De hecho, debes prestar atención a la relación del widget con la columna en la que se encuentra.

¿Cómo alinear secciones y columnas de Elementor?

Para cada sección/columna, aterrice en la sección de diseño y establezca las siguientes opciones de alineación según sus requisitos:

• Alineación vertical: puede elegir la configuración para los widgets entre las siguientes. Pero una cosa que debe tener en cuenta es que el contenido de una columna no se puede alinear con las tres primeras opciones verticales de la columna, es decir, superior, media e inferior.
• Arriba
• Medio
• Abajo

De hecho, hay ^* tres nuevas opciones que hacen que sea realmente conveniente alinear el contenido según sus gustos.

• ^*Espacio entre: establece el espacio entre los widgets al principio y al final en el borde de la columna. Los widgets están equiespaciados, es decir, hay el mismo espacio entre ellos.
• ^*Espacio alrededor: el espacio entre los widgets es igual y los bordes tienen la mitad del tamaño del espacio entre los widgets.
• ^*Espacio uniforme: el espacio entre los widgets es uniforme: es igual entre ellos, antes y después.

• Alineación horizontal: con esta opción puedes realizar posicionamiento en línea y alinear los widgets en línea, que están en la misma fila, horizontalmente. Puede alinear el contenido de las columnas horizontalmente usando estas opciones:
• Inicio: alinea todos los iconos a la izquierda
• Centro: coloca los íconos en el medio de la columna.
• Finaliza todos los iconos a la derecha.
• Espacio entre: el espacio entre los widgets al principio y al final en el borde de la columna. Los widgets están equiespaciados, es decir, hay el mismo espacio entre ellos.
• Espacio alrededor: el espacio entre los widgets es igual y los bordes tienen la mitad del tamaño del espacio entre los widgets.
• Espacio uniforme: el espacio entre los widgets es uniforme: es igual entre ellos, antes y después

Para solucionar problemas de ancho de respuesta, utilice el desbordamiento oculto

Cuando se trata de la apariencia de un sitio web en dispositivos móviles, existe una alta probabilidad de que se encuentre con un problema en el que un widget con posicionamiento personalizado desborde el ancho de una columna.  

Esto provoca una situación realmente frustrante para los visitantes móviles, donde pueden desplazarse horizontalmente. Y esto no es algo que usted deseaba para su sitio web. Esto se puede solucionar mediante:

Configuración de diseño> Establecer la opción Desbordamiento Oculto

Al hacer esto, el área sobrante se cortará y no será necesario desplazarse horizontalmente.

Cuidando el posicionamiento

También debes cuidar la posición de las columnas. Puede configurar un posicionamiento personalizado con Elementor 2.5: absoluto y fijo.

El posicionamiento absoluto es el posicionamiento del elemento relativo a la sección o columna en la que se encuentra. Entonces, si usa el posicionamiento absoluto para un elemento o sección, esa sección no se moverá a lo largo de la ventana del visitante.

La posición fija es diferente de la absoluta ya que permite que la sección/elemento permanezca fijo en el punto de vista del visitante. Entonces, si el usuario se desplaza por la página, el elemento permanecerá allí.

Unidades relativas

A medida que diseña su página web, encontrará que hay varias formas de colocar los elementos. Para el posicionamiento absoluto, es una buena idea utilizar unidades relativas, ya que hará que el diseño responsivo sea más funcional cuando se trata de diferentes tamaños de pantalla.

La unidad relativa se ajusta en función del ancho y alto relativos de la pantalla, lo que permite que los elementos o secciones cambien de tamaño y tengan un mejor diseño receptivo. Si opta por utilizar píxeles, deberá crear varias secciones receptivas para diferentes tamaños de pantalla.

Controle la profundidad de cada elemento utilizando el índice Z

Si va a utilizar posicionamiento 'absoluto' o 'fijo' para los widgets, habrá muchas situaciones en las que dos o más widgets podrían superponerse, es decir, estarán apilados "uno encima" del otro. Puede evitar esto utilizando la configuración normal del índice Z. Esto le permitirá controlar la profundidad y le permitirá elegir qué widgets aparecen en primer plano.

El truco de la funcionalidad duplicada

Si está utilizando el clic derecho para duplicar un elemento con un posicionamiento personalizado, puede parecer que el clic derecho no ha funcionado.

Pero espera. Eso no es cierto. La funcionalidad duplicada ha funcionado perfectamente bien y ha duplicado el elemento. Es solo que, dado que cada elemento tiene exactamente la misma ubicación personalizada, el elemento duplicado se apiló EXACTAMENTE encima del otro elemento (dando la impresión de que no se ha creado ningún duplicado).

En términos simples, si crea una columna con éxito, puede duplicarla cuando sea necesario. Además, asegúrese de que las columnas que cree no utilicen un posicionamiento personalizado. Si es así, la duplicación no funcionará con la opción de hacer clic derecho. Sin embargo, puede utilizar la función duplicar para superar la limitación y copiar la columna.

Arrastra un poco el elemento superior y revelará el otro. Ambos elementos están muy presentes. Además, cuando duplicas una columna, se acumulará sobre la anterior. Puede que te confundas. Pero no te preocupes, simplemente puedes arrastrarlo y luego usarlo en el diseño de tu página web.

Compensaciones

Hay casos en los que necesita establecer compensaciones para el contenido de su página web. Con Elementor, puedes configurar fácilmente el desplazamiento. Entonces, si establece un desplazamiento de 500 px desde la izquierda, se dejará espacio alrededor del contenido según su entrada. De manera similar, también puede establecer el desplazamiento en el lado derecho. Es una buena práctica establecer el desplazamiento hacia la izquierda y hacia la derecha en un valor similar, ya que el contenido quedará correctamente alineado en la pantalla.

Hay casos en los que necesita establecer compensaciones para el contenido de su página web. Con Elementor, puedes configurar fácilmente el desplazamiento. Entonces, si establece un desplazamiento de 500 px desde la izquierda, se dejará espacio alrededor del contenido según su entrada. De manera similar, también puede establecer el desplazamiento en el lado derecho. Es una buena práctica establecer el desplazamiento hacia la izquierda y hacia la derecha en un valor similar, ya que el contenido quedará correctamente alineado en la pantalla.

La regla de oro

Para un mejor diseño responsivo, utilice unidades relativas. Esto se debe a que el posicionamiento absoluto puede resultar complicado cuando se accede al sitio web desde una plataforma diferente. El uso de unidades relativas para diseñar sus secciones dará como resultado un diseño más receptivo. El cambio de ancho se puede gestionar perfectamente con la ayuda de las unidades relativas. Por "relativo" nos referimos a unidades variables como porcentaje o ancho de vista (VW), en lugar de unidades fijas como píxeles.

Conclusión

Elementor es un creador de sitios web súper fácil de usar. A veces, puede plantear desafíos en la visualización del sitio web si se accede al sitio web desde un dispositivo móvil o una tableta. Con la ayuda de la alineación de secciones y columnas, puedes hacer que tus sitios web sean perfectos con mucha facilidad.