Cómo utilizar Elementor Flexbox Container en 6 sencillos pasos

¿Has probado el nuevo?  Contenedor Elementor Flexbox ¿característica?

Bueno, lo que se rumorea es que es una gran adición para optimizar su sitio web para todos los dispositivos y hacer que su sitio se cargue más rápido.

¿Cómo? 

Bueno, el nuevo contenedor flexible funciona de una manera un poco diferente (tanto en el front-end como en el backend) que las secciones/sección interna anteriores. Y estas nuevas y diferentes formas de trabajar son las que hacen la magia.

En este blog, aprenderá sobre las nuevas opciones que el contenedor Elementor flexbox trae a la mesa para crear un sitio web y cómo utilizar Elementor Flexbox Container en una guía paso a paso.

Así que sigue leyendo…

¿Qué es un contenedor Elementor Flexbox?

El contenedor Elementor Flexbox trae todas las funciones de CSS Flexbox a su editor Elementor. Con la nueva incorporación, puede crear fácilmente diseños avanzados para garantizar que las páginas web se vean geniales en todos los dispositivos, independientemente del tamaño.

Nota: El contenedor CSS flexbox, como su nombre indica, le proporciona flexibilidad avanzada para crear un diseño adaptable al dispositivo. Antes de la introducción de flexbox, era bastante complicado crear un diseño responsivo utilizando múltiples modos de diseño como Bloque, En línea, Tabla y Posición. Pero con los contenedores flexbox, ya no necesitas múltiples modos de diseño.

Y cuando se trata del contenedor Elementor flexbox, ya no tendrás que usar secciones. Puedes agregar widgets dentro de un contenedor sin ninguna sección. También puede agregar una cantidad infinita de contenedores dentro del contenedor.

Una vez que agrega widgets y contenedores, puede controlar la distribución de los widgets dentro del contenedor junto con el diseño de cada dispositivo. Además, obtienes configuraciones de personalización independientes para cada contenedor (incluso contenedores dentro de un contenedor). Esto le brinda la mejor flexibilidad para hacer que su dispositivo de diseño responda. 

Diferencia entre los nuevos contenedores y secciones de Elementor Flex

Debes preguntarte cuáles son las diferencias entre contenedores y secciones. Bueno, hay bastantes diferencias. Estas son algunas diferencias clave:

• Puede agregar widgets a contenedores con flexbox mientras que con las secciones necesitas agregar columnas y luego agregarles widgets.
• En el contenedor flexible, el ancho del widget está en línea de forma predeterminada mientras que, con la estructura de sección de columnas, el ancho del widget es el ancho completo de forma predeterminada.
• Anteriormente, solo podías agregar una sección interna dentro de una sección, pero con los últimos contenedores flexibles, puede agregar tantos contenedores como desee.
• Con la estructura de sección de columna, puede cambiar la dirección del widget usando la columna o el posicionamiento en línea. Ahora, con el último contenedor flexible, puede cambiar la dirección del widget usando Columna, Fila, Inversión de columna o Inversión de fila.
• En la estructura de la sección de la columna, se utilizaron columnas inversas o secciones duplicadas para que las páginas web respondieran. En el último método de contenedor flexible, puede utilizar un Orden personalizado de widgets o Contenedores para cada dispositivo.
• Las opciones de alineación en la estructura de sección/columna son Izquierda, Centro y Derecha. Por otro lado, con los contenedores flexibles, obtienes opciones de alineación como flex-start, flex-center y flex-End.

Ahora debes estar pensando en cómo estos cambios pueden beneficiarte. Para obtener más información al respecto, pase a la siguiente sección.

Ventajas de utilizar el contenedor Elementor Flexbox

Se realiza mucha investigación antes de agregar una nueva función a un complemento para garantizar que sea útil para los clientes. Lo mismo ocurre con el contenedor flexible Elementor. Este Elementor Se ha agregado esta característica porque beneficiará en gran medida a los usuarios.

Estas son algunas de las ventajas que disfrutará si utiliza el contenedor Elementor flexbox:

• Dado que la sección y la sección interior se reemplazarán con contenedores flexibles, puede construir sitios web más optimizados.
• Flexbox reducirá la cantidad de columnas y secciones internas de Elementor Flexbox. Como resultado, se producirá menos código en el backend. Y yomenos DOM resultará en una mejor velocidad para su sitio de WordPress.
• La configuración del contenedor Flexbox le permitirá crear sitios web que respondan al dispositivo con más flexibilidad que antes.
• Ahora usted puede hipervínculo a una sección completa. Antes sólo se podían vincular widgets.
• Si antes no estaba satisfecho porque solo podía agregar una sección interna en una sección, entonces el contenedor flexible es para usted. Con el contenedor flexible, puedes agregue contenedores dentro del contenedor de forma indefinida.

Cómo utilizar el contenedor Elementor Flexbox en 6 pasos

Siga los pasos a continuación para aprender cómo usar el contenedor Elementor Flexbox en su sitio web para obtener una apariencia más optimizada. El proceso consta de 6 sencillos pasos:

Paso 1: active el contenedor Flexbox en Elementor Experiments

Primero, necesitará una función de contenedor flexbox para aprovechar el contenedor flexbox en Elementor. Para eso, navega a Elementor ⇒ Configuración desde el panel de WordPress. Ahora vaya a la pestaña Experimentos y Desplácese hacia abajo para encontrar la opción "Contenedor Flexbox".

Después de encontrar la opción elija Activo en el menú desplegable para activar Elementor Flexbox Container. Finalmente, desplácese hacia abajo y haga clic en “Guardar cambios”para guardar el estado.

Paso 2: crea una nueva página

Después de activar el contenedor flexible, es hora de crear una nueva página para que puedas usar esta función. Para eso, navega a Páginas ⇒ Todas las páginas y luego haga clic en Agregar nuevo. Ahora, proporcione un título y haga clic en Editar con Elementor

Paso 3: agregue un contenedor

Ahora, en lugar de una sección, necesitas agregar un contenedor. Para eso,  haga clic en el ícono +, luego elija la estructura que desee.

Nota: Si observa la estructura en el navegador, encontrará que la estructura es en realidad un contenedor que tiene otros contenedores en lugar de columnas. Tú también puedes arrastre y suelte un solo contenedor desde el menú de la izquierda. 

Puede personalizar muchas opciones para el contenedor, como

• Ancho del contenedor: Puede elegir el ancho del contenedor como En caja o ancho completo.
• Ancho: Si elige Encuadrado como ancho del contenedor, el ancho será 928Px. Por otro lado, si elige Ancho completo, el ancho del contenedor será 100% del ancho de la ventana gráfica. Sin embargo, puede cambiar ambos valores de ancho.
• Desbordamiento: Puede elegir el valor de desbordamiento como Predeterminado, oculto o automático.
• Etiqueta HTML: También puedes cambiar la etiqueta HTML del contenedor. Obtiene opciones como div, encabezado, pie de página, principal, artículo, sección, etc. Hay una nueva adición de una etiqueta. De esta manera puedes convertir una eTodo el contenedor en un enlace con una etiqueta.

Nota:  También obtienes muchas opciones en "Elementos" (más adelante). Es más, puedes personalizar todas las configuraciones anteriores para cada contenedor interno también.

Paso 4: agrega widgets

El proceso de agregar widgets es el mismo que el de la estructura de la sección de columnas. Necesitas busque el widget y luego arrastre y suelte en el ícono + de cada contenedor. Por ejemplo, voy a agregar un encabezado, un video y un ícono para compartir en redes sociales.

Paso 5: personalizar el contenido del contenedor 

Ahora es el momento de personalizar los widgets del contenedor. Para ello, edite el contenedor. Luego, vaya a Diseño en el panel izquierdo y expanda la opción Elementos. Estas son las opciones con las que puedes jugar:

• Direcciones: La dirección predeterminada es fila. Sin embargo, tiene cuatro opciones, como Fila, Columna, Fila invertida y Columna invertida. Si elige la columna o la columna invertida, todos los contenedores dentro del contenedor principal se mostrarán como diferentes columnas de Elementor Flexbox.

Nota: Si elige una columna, deberá ajustar el ancho de los contenedores internos.

• Alinear contenedores: Puede establecer la alineación como Flex Start, center, flex-end y Scratch. Flex comienza a colocar el elemento contenedor desde el punto de iniciot, y con un valor de centro Flex puedes colocar los artículos en el centro. Por otro lado, Con el extremo Flex, puede mostrar todos los contenedores internos en la parte inferior. Y con la opción extensible, los contenedores interiores ocuparán espacio adicional si se asignan. Todo esto será aplicable si elige la dirección como una fila.

Por otro lado, si eliges el dirección como una columna, entonces los valores flex-start y center funcionarán igual que la fila. Pero con el extremo flexible, los contenedores se desplazarán hacia la derecha y con cero, ocupará cualquier espacio a la izquierda.

• Justificar contenido:  Tienes seis opciones para justificar el contenido: inicio flexible, centro, final flexible, espacio entre, espacio alrededor y espacio uniforme. El espacio entre agregará el mismo espacio entre cada uno de los elementos. Sin embargo, no agregará ningún espacio en la parte superior o inferior de los elementos.

La opción de espacio alrededor agregará espacio tanto en la parte superior como en la inferior de cada contenedor. Y la opción de espacio uniforme agregará el mismo espacio alrededor de todos los widgets y contenedores internos.

• Brecha de elementos:  Puede utilizar esta opción para agregar espacio entre elementos (widgets y secciones interiores).

• Envoltura: Elegir Sin envoltura poner todos los artículos en una sola línea y Ajustar para permitir que el contenido fluya en varias líneas.

Paso 6: Publicar y obtener vista previa

Puede repetir el paso 4 para personalizar todas las configuraciones de su contenedor. Una vez que haya terminado con la personalización, haga clic en el botón publicar para publicar la página. Luego, puede hacer clic en el botón de vista previa para ver su página con la nueva estructura de contenedor flexible.

Cómo convertir una página de Elementor basada en secciones a un contenedor Flexbox

Convertir una estructura basada en secciones/columnas al nuevo contenedor Elementor Flex es muy fácil. Puede hacerlo siguiendo los 4 sencillos pasos que se muestran a continuación:

Paso 1: Selecciona la sección que deseas convertir

Debe convertir cada sección por separado. Entonces, primero, seleccione la sección que desea convertir. Puede haga clic en los seis puntos para seleccionar una sección o seleccione una sección del navegador (Puedes encontrar la opción en la esquina inferior izquierda).

Paso 2: Haga clic en Convertir para realizar la conversión.

Ahora para convertir, en el panel izquierdo, encontrará un Opción Convertir a contenedor debajo del diseño. Hacer clic sobre el CONVERTIR botón.

Paso 3: Elimina la sección anterior

Una vez completado el proceso de conversión, encontrará dos versiones de la misma sección. Uno está basado en secciones y otro en contenedores. La versión de arriba está basada en secciones. Eliminar la versión anterior/original.

Paso 4: actualización y vista previa

Puede repetir los pasos 1 al paso 3 para todas las secciones de su página. Una vez que haya terminado de convertir todas las secciones al diseño del contenedor Flexbox, haga clic en el botón actualizar para guardar. Ahora puede hacer clic en el botón de vista previa para ver la misma página pero con un diseño de contenedor.

¿Se puede crear un contenedor Flexbox horizontal y vertical en Elementor?

Sí, Elementor admite la creación de contenedores flexbox horizontales y verticales en menos de unos segundos. Solo necesita seleccionar los seis puntos del contenedor de Elementor y seleccionar la dirección horizontal o vertical en la pestaña de diseño. De este modo, podrá crear su contenedor flexbox sin problemas.

¿Puedo utilizar las funciones complementarias de Elementor con el nuevo Flexbox Container?

Sí. Absolutamente puedes. 

Puedes usar ElementsKit: el complemento definitivo para Elementor para agregar widgets adicionales y otras funciones al creador de páginas Elementor. Este elemento Añadir es 100% compatible con el nuevo contenedor Flexbox de Elementor.

Puede utilizar el mismo proceso de convertir cualquier sección de Elementor al diseño de contenedor (que se muestra en la sección anterior) para convertir secciones/páginas de ElementsKit. 

ElementsKit viene con Más de 500 secciones listas, más de 35 páginas listas y más de 85 complementos personalizados Funciones que te harán la vida más fácil. Tu puedes fácilmente crear un sitio web completo usando la plantilla prefabricada de ElementsKit en solo unos minutos.

A continuación se muestra un ejemplo en el que puede ver con qué facilidad las páginas prefabricadas de ElementsKit se convierten a Elementor Flexbox Container.

Envolver

Estoy seguro de que ahora te darás cuenta de por qué hay tanto en torno a esta nueva incorporación de Elementor. El contenedor Elementor Flex es realmente una bendición para todos los creadores de sitios web de WordPress que buscaban formas de crear sitios web. más optimizado, más rápido y receptivo independientemente del tamaño del dispositivo.

Y la guinda del pastel es que puedes convertir tu sitio web creado previamente en un sitio web optimizado basado en contenedores en poco tiempo. Sin embargo, el contenedor flexible todavía está en modo experimental. Por lo tanto, no se recomienda usarlo en un sitio web activo hasta que se publique como una función activa.

Hasta entonces, siéntete libre de jugar con el contenedor flexible Elementor en tu sitio de prueba. Y prueba Kit de elementos para obtener más flexibilidad para diseñar un sitio web de apariencia increíble que atraiga la atención de sus clientes y eleve el éxito de su sitio web.