Proyectos programación

Contenedores y Widgets Elementor


Contenedores Flexbox

Los contenedores Flexbox son una metodología de diseño y creación de webs con Elementor; que permite que la web sea responsive.

La diferencia entre Flexbox y Grid es que los contenedores en flexbox son flexibles y se adaptan al diseño; en el caso de Grid los contenedores son todos iguales.

Es importante que a la hora de trabajar con flexbox quitemos el padding por defecto (es el relleno), cada vez que utilicemos un contenedor.

EN WEBS ANTIGUAS

En las webs desarrolladas en el último año, flexbox está por defecto.

Sin embargo en webs antiguas es necesario configurarlo (antes funcionaba con secciones y columnas).

contenedores desde 0

Los contenedores se pueden anidar unos sobre otros: existe un contenedor padre y los contenedores hijos que se anidan dentro; que a su vez pueden contener dentro anidados más contenedores.

Por lo que es importante su optimización, sino afectará al rendimiento de la web.

La envoltura permite que si todos los elementos no caben horizontalmente; hace que se desplacen hacia abajo respetando el tamaño dado a cada elemento. 

Características editables de los contenedores

Si trabajamos con contenedores hijos podremos decidir su dirección:

  • -> se colocan todos en horizontal uno al lado del otro, aplicandose de izquierda a derecha.
  • vertical aplicandose arriba a abajo. Es la opción por defecto
  • <- se colocan todos en horizontal uno al lado del otro, aplicandose de derecha a izquierda.
  • vertical invertida: de abajo hacia arriba.

Si trabajamos con contenedores también podemos justificar el contenido:

  • Por defecto podemos ponerlo al inicio.
  • Centrados
  • Al final
  • Distribuidos a lo largo de toda la pantalla con espacios intermedios.
  • Distribuidos a lo largo de toda la pantalla con espacio alrededor.
  • Espaciado uniforme hace que los espaciados de dentro y de fuera sean iguales.

También es posible alinear los elementos tanto verticalmente como horizontalmente. Requiere que el contenedor padre tenga una altura mínima definida. Permite

  • En el inicio.
  • En el centro
  • Al final
  • Estirar

Huecos entre los elementos permite tanto en columnas como en filas añadir espacio entre los contenedores y los elementos.

La envoltura permite que si todos los elementos no caben horizontalmente; hace que se desplacen hacia abajo respetando el tamaño dado a cada elemento. 

Contenedores clicables

Otra opción son los contenedores clicables que permiten tener enlaces, afectando a todo el contenedor no solo a los botones. 

Para ello definimos que etiqueta html es ese contenedor (por defecto es un div, y deberemos ponerlo como un enlace).

Esto requiere que NO existan enlaces internos dentro del contenedor, para que no se rompa el diseño.

Customización del orden de los contenedores

Esto es útil cuando hay varios elementos y queremos cambiar la configuración de desktop a mobile.

Podemos decidir en qué orden se colocará.

Es imprescindible, para implementar esta característica, que cada elemento debe tener una posición en orden definida; si no, no funciona.

Widgets anidados: pestañas, acordeón y mega menú.

Widgets pestañas

Cada pestaña nos permite añadir diferentes contenidos según lo que queramos mostrar. Son contenedores flexbox y tienen sus propiedades.

En este caso aprovechamos el widgets: tabla de precios.

Este widgets de lista de precios se puede hacer customizable utilizando contenedores flexbox y haciendo que el contenedor sea cliclable.

Podemos definir donde se colocan las pestañas, a través de la opción de dirección.

En el caso de la pantalla que mostramos en mobile en ajustes adicionales >punto de ruptura yo le puedo indicar que los botones del widget pestaña se conviertan en acordeón.

Widgets Acordeón

Son anidables pudiendo admitir cualquier tipo de contendido dentro.

Ejemplos de uso son los flaqs.

Otro ejemplo es este donde podemos tener mucho contenido por ejemplo en el landing pero que no ocupe espacio, solo cuando el usuario desee acceder a él.

En interacciones podemos cambiar el estado por defecto; que permite modificar que pestaña del acordeón queremos dejar abierta.

También permite definir cuál es el máximo de elementos que queremos tener abiertos.

Widgets Mega menú

A diferencia del menú WordPress, permite organizar los enlaces en acordeón.

Y mostrar contenido según la pestaña que seleccionemos.

https://wpeplayground.com/

https://www.domestika.org/es/isamacias