Guía definitiva al diseño flexible

Guia al Diseño Flexible

¿Quiere saber cómo aprovechar el poder del posicionamiento personalizado de Elementor? En este artículo, cubriremos todos los aspectos de nuestra versión de diseño flexible, que incluye posicionamiento en línea, absoluto y fijo, horizontal y vertical.

Elementor v 2.5 introdujo Flexible Layout, que ofrecía nuevas formas de colocar elementos dentro y fuera de la cuadrícula. Este conjunto de capacidades de posición avanzadas hace que sea más fácil y rápido crear diseños personalizados.

Las nuevas opciones de diseño incluyen configuraciones avanzadas de alineación de columnas de flexbox, ancho de widget en línea y personalizado, así como posicionamiento absoluto y fijo.

En este artículo, aprenderá cómo aprovechar el poder del nuevo posicionamiento personalizado de Elementor, que cubre todos los aspectos que sueñan los diseñadores, incluido Inline; Absoluto y fijo; Posicionamiento horizontal y vertical. También profundizaremos en las mejores prácticas para las características de columnas de alineación de columnas y editor de texto. El posicionamiento personalizado ofrece mayor flexibilidad y control al crear su diseño.

¿Qué es el diseño flexible?

  • Ancho del Widget
    • Ancho completo
    • En línea
    • Personalizado
  • Alineación de columnas
    • Vertical
    • Horizontal
  • Posicionamiento
    • Defecto
    • Absoluto
    • Fijo

¿Listo para diseñar más rápido y mejor que nunca? Tome un café y prepárese para obtener una amplia descripción de todas las nuevas y emocionantes funciones. ¡Vamos a bucear!

Ancho del Widget

La forma en que elija definir el ancho de su widget se relaciona con su concepto de diseño general y sus necesidades. Elementor ofrece tres opciones: Ancho completo, En línea y Personalizado. El ancho completo es el predeterminado, por lo que comenzaremos con Inline.

En línea

El posicionamiento en línea le ahorra mucho tiempo y simplifica su flujo de trabajo. Como solo ocupa la cantidad mínima de tamaño de un widget, Inline le permite colocar varios widgets dentro de la columna y diseñar mejores diseños.

Estas son algunas maneras geniales de aplicar esta característica:

  • Alinea los elementos lado a lado en la misma columna.
  • controlar la posición de un elemento
  • y usa un ancho personalizado para alinear tus elementos en línea

¿Quieres colocar dos botones uno al lado del otro en la misma columna? ¡Ahora usted puede!

En la sección prediseñada anterior, hay dos botones en la misma columna, alinéelos de lado a lado. Haga clic en el botón y en Avanzado> Posicionamiento personalizado, haga clic en el menú desplegable ‘ancho’ y elija ‘En línea’. Luego haz lo mismo con el segundo botón.

Aquí hay otra forma útil de usarlo:

A continuación verá 4 columnas que alojan 2 widgets en línea: un widget de encabezado y un widget de editor de texto. Con la ‘alineación vertical’ puede controlar la posición de nuestros widgets hacia el centro, el inicio y el final.

‘Fin’ es perfecto para este diseño, por lo que simplemente haga clic derecho y copie y pegue el estilo para el resto de los widgets.

A continuación, agregue las funciones de un servicio aquí, y justo debajo del texto, arrastre en un widget de cuadro de imagen, cambia la imagen, elimina el título y pega tu texto.

Luego, en la pestaña Estilo, cambie el ancho de la imagen al 40% y, debajo del contenido, alinéelo hacia la izquierda.

En Avanzado, posicionamiento personalizado: cambie el ancho a personalizado y configúrelo al 30% del ancho de la columna.

Todo lo que queda por hacer es hacer clic derecho y duplicar dos veces y modificar sus imágenes y texto.

Vea el video tutorial completo en Posicionamiento en línea aquí .

Alineación de columnas

Aquí repasaremos todas las nuevas opciones de alineación vertical y horizontal.

Para la alineación vertical, aprenderá cómo usar las opciones Espacio entre, Espacio alrededor y Espacio uniformemente . Para la alineación horizontal, veremos Inicio, Centro, Fin, así como las opciones Espacio entre, Espacio alrededor y Espacio uniformemente .

En este diseño prefabricado a continuación, cada columna contiene una imagen, un editor de texto y un widget de clasificación de estrellas, pero puede ver que el contenido de las columnas no está alineado correctamente. Las configuraciones anteriores en Disposición> Alineación vertical ‘top’, ‘middle’ y ‘bottom’ no pueden solucionar este problema.

Es por esto que agregamos tres nuevas opciones verticales para una personalización más fácil y precisa:

Espacio entre, espacio alrededor y espacio uniformemente.

Así es como funciona cada una de las tres nuevas funciones de alineación vertical :

1. Espacio entre : coloca los íconos al principio y al final cerca del borde de la columna, con el mismo espacio entre ellos.

2. Espacio alrededor : aquí los Widgets están espaciados equitativamente, y los bordes son la mitad del espacio entre los widgets.

3. Espacio uniformemente : configura los Widgets para que tengan el mismo espacio entre, antes y después de ellos.

Vamos a pasar a las actualizaciones en la alineación horizontal .

Esta función amplía la capacidad del posicionamiento en línea y le permite alinear horizontalmente los widgets en línea que se colocan en la misma fila.

Como puede ver, hemos agregado 5 Íconos Widgets a esta columna a la derecha. Están configurados en línea, haciéndolos aparecer uno al lado del otro en la misma columna. Estableceremos la alineación vertical de las columnas en la parte inferior, para que se coloquen junto a las ideas de la Lista superior.

1. Inicio : alinea todos los iconos a la izquierda.

2. Centro – a la mitad de la columna.

3. End lo coloca a la derecha.

Ahora ya sabe cómo usar las opciones de alineación vertical y horizontal dentro de las columnas en Elementor 2.5.

Vea el video tutorial completo sobre la alineación de columnas aquí .

A continuación: Widget Width.

Posicionamiento – Qué hacer y qué no hacer

Los diseñadores solo tienen que amar a este. Absolute Positioning proporciona la independencia para diseñar a mano alzada en WordPress. ¡Finalmente!

Por lo tanto, si está buscando un mayor control y precisión sobre la colocación de sus elementos en el lienzo, pruebe la configuración absoluta y fija. El posicionamiento absoluto le permite colocar elementos sin las restricciones de la columna en la que se encuentra, o los widgets circundantes.

Absoluto

Al principio, el posicionamiento absoluto puede ser un poco complicado, por lo que aquí hay una descripción general de los conceptos básicos que necesitará para comenzar a usarlo.

Para probarlo, vaya a cualquier widget, elija ‘Posición: Absoluta’ y arrastre el widget a cualquier ubicación en la página, independientemente de la cuadrícula. Apunte a cualquier lugar de la pantalla y simplemente arrastre el widget hacia allí.

Un objeto absoluto es relativo a la columna. Debajo de la caja cuadrada rosa está nuestro objeto absoluto.

Vaya a Avanzado, posición personalizada y elija posición absoluta. Cambie la posición haciendo clic en la orientación horizontal y vertical, el cuadro está dentro de la columna y también moviéndolo en la pantalla. (El cuadrado será relativo a la columna). Notará que el texto salta y el cubo aparece sobre él. ¿Por qué? Es porque en el momento en que el cubo se establece en absoluto, se elimina del flujo de elementos en la página.

Tenga en cuenta que el ancho predeterminado de un elemento absoluto se hereda automáticamente de la columna en la que se encuentra. Asegúrese de estar en el lugar correcto en relación con el área en la que desea colocarlo, que se refiera a los bordes correctos, especialmente para responsive

Pongamos el cuadrado fuera de la columna. Parece que está en la esquina inferior derecha de la pantalla, pero si cierra el panel y se desplaza, verá que el cuadrado se mueve con la columna y mantiene la posición exacta que se estableció anteriormente. Puede moverlo a cualquier lugar y permanecerá en el mismo punto en relación con la columna .

La cosa es que, la posición absoluta generalmente choca con el diseño sensible. Afortunadamente, Elementor le permite establecer una posición personalizada separada para dispositivos móviles, tabletas y de escritorio utilizando unidades de porcentaje, VH, VW o píxeles.

Con la Posición absoluta, corre el riesgo de obtener un desplazamiento horizontal cuando el elemento supera los límites de la página. Afortunadamente, agregamos un control de Desbordamiento Oculto, que condensa todos los widgets de la sección en el interior y elimina cualquier desplazamiento no deseado.

Fijo

Entonces, ¿todo esto también se aplica a la posición fija? Cambie la posición del cubo rosa de absoluto a fijo y veamos.

¿Que pasó? ¿Desapareció? No se asuste. Puede recuperarlo fácilmente estableciendo el desplazamiento a cero. Desapareció porque la configuración de Orientación y compensación Horizontal y Vertical siguen siendo las mismas que para el posicionamiento absoluto. PERO, un elemento de posición fija se posiciona en relación con la ventana gráfica, la ventana del navegador y no con la columna en la que se encuentra. Por lo tanto, en este caso, el cubo rosa solo esconde 200 píxeles debajo de la ventana gráfica, debido a la horizontal negativa. valor de compensación Voy a seguir adelante y traerlo de nuevo a la vista con el control deslizante. Recuerde, puede recuperar el cubo fácilmente estableciendo las compensaciones en cero.

Cuando las orientaciones del cubo se establecen en la parte inferior y derecha y sus compensaciones son cero, el cubo se coloca exactamente en la esquina inferior derecha de la ventana gráfica, esta es su posición inicial.

Al igual que con la posición absoluta, la configuración de orientación determina esto.

Digamos que queremos que el cubo se coloque cerca de la parte inferior de la izquierda, luego establezca la Orientación horizontal a la izquierda y la Orientación vertical a la parte inferior .

Como puede ver, todavía hay algunas compensaciones previamente establecidas. Podemos arrastrarlo a la esquina inferior izquierda, pero quiero que se coloque exactamente en el borde. Todo lo que necesito hacer es ingresar cero para las compensaciones horizontales y verticales.

Con la Posición fija, cualquier cambio en el contenido o en el ancho de la columna como ya se demostró no afecta la posición del cubo porque está posicionado en relación con la ventana gráfica y no con respecto a la columna en la que se encuentra. Esto significa que el ancho predeterminado de un elemento fijo es Se hereda automáticamente de la ventana gráfica.

CONSEJO: tenga en cuenta que usar la configuración correcta de Orientación Vertical y Horizontal para objetos absolutos y fijos es vital para mantener un mejor comportamiento de respuesta. Diseñar su página con esto en mente le ahorrará mucho tiempo al realizar ajustes para dispositivos móviles y tabletas.

Vea el video tutorial completo sobre posicionamiento absoluto y fijo aquí .

Conclusión

La nueva versión de Elementor Core 2.5 ofrece a los diseñadores web capacidades de diseño a mano alzada que nunca antes fueron posibles en WordPress. Estas opciones son extremadamente útiles tanto para los diseñadores como para los profesionales del marketing, y expanden su libertad para crear diseños hermosos como los imagina. Aprovecha el nuevo diseño flexible de hoy. Flexible Layout es un sorprendente conjunto de herramientas que revolucionará completamente su proceso de diseño.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *