¿Cómo utilizar las Columnas en Elementor?

1. Crear una columna en Elementor

Lo primero, nos dirigimos al apartado Páginas >> Añadir nueva para crear una página. En el campo Añadir el título escribimos el título que va a tener la página y, en el bloque Atributos de página, seleccionamos la plantilla Elementor ancho completo.

Hacemos clic en Editar con Elementor para acceder al panel de edición.

A diferencia de las secciones, las columnas “no se crean” directamente. Lo que tenemos que hacer es crear una sección ya que las columnas forman parte de las secciones.

Si arrastramos un widget al área de contenido, se creará automáticamente una sección y, dentro de la sección, se “creará” una columna

Por otro lado, cuando creamos secciones desde el área de contenido haciendo clic en el botón , Elementor nos mostrará una combinación de estructuras predefinidas donde, cada una de las estructuras, es una sección dividida en columnas.

En la imagen anterior, cada figura corresponde a una sección dividida en columnas de forma horizontal y, gracias a la combinación “sección+columnas”, es que se logra la versión RESPONSIVE de un sitio web.

2. Propiedades de una columna en Elementor

Crear una sección arrastrando un widget, Encabezado (por ejemplo), al área de contenidos para que puedas apreciar todos los componentes.

  • El primer recuadro azul, corresponde a la sección.
  • El recuadro negro de línea punteada, corresponde a la columna.
  • El recuadro interior azul corresponde al widget.

Si te fijas, en la esquina superior izquierda, se puede apreciar un icono de fondo negro. Este icono corresponde a la columna.

Al igual que con las secciones, haciendo clic en este icono, seleccionamos la columna y podemos realizar las siguientes acciones:

I. Editar la columna.

Si hacemos clic sobre el icono el panel de Elementor cambia y nos muestra todas las opciones de edición únicamente de la columna que hemos seleccionado.

II. Arrastrar la columna.

Otra acción que podemos realizar es arrastrar la columna. Seleccionamos la columna y, sin soltar el ratón, podemos moverla entre columnas de una misma sección o entre secciones si queremos cambiar el orden del contenido en nuestra página.

III. Menú contextual.

Al igual que sucede con las secciones, si hacemos clic con el botón derecho del ratón sobre el icono veremos lo siguiente:

Elementor nos muestra un sencillo menú donde podemos realizar acciones adicionales en la columna como duplicarla, copiarla y pegarla y borrarla, entre otras.

3. Ajustes de una columna en Elementor

Llegamos a la parte más importante de las columnas en Elementor: la edición. Aquí es donde las columnas cobran vida.

Como te he mencionado en el punto anterior, si hacemos clic en el icono Editar columna, el panel de edición de Elementor nos mostrará una serie de opciones donde podemos editar la columna.

Vamos a mencionar las principales opciones de edición y, en futuras lecciones, haremos ejemplos prácticos del uso de cada una de estas opciones cuando comencemos a trabajar con widgets.

3.1 Disposición

En este apartado podemos controlar el funcionamiento que tendrá la columna.

En el Ancho de la columna definiremos el valor en porcentaje. Si tenemos una sección con una columna, el valor del ancho de la columna será 100% y no será posible cambiarlo porque no tendría sentido.

Vamos a crear una sección con 4 columnas a ver que pasa:

Usando la lógica, el valor del ancho de cada columna es 25% pero, ¿se podrían cambiar estos valores? Por supuesto que si.

Si cambiamos el valor de una columna a 20% (la segunda por ejemplo), la columna siguiente cambia automáticamente a 30% para que la suma de todos los anchos de las columnas sea siempre 100% = 25% + 20% + 30% + 25%.

Cuando modificamos el valor de una columna, solo se actualizará la siguiente columna a la derecha. En caso que modifiquemos el valor de la última columna, solo se actualizará la anterior (a su izquierda).

Esto lo podemos conseguir editando el ancho de cada columna pero también lo podemos hacer más divertido y dinámico. ¿Cómo?

Presta atención:

Si pasas el ratón justo en medio de 2 columnas, el puntero del ratón cambia a un icono con 2 flechas. Haciendo clic y, sin soltar el ratón, puedes moverlo hacia la derecha e izquierda y verás como los anchos de las columnas van cambiando automáticamente:

La Alineación vertical y la Alineación Horizontal es la posición donde queremos que se muestren los widgets dentro de una columna: arriba, medio, abajo e izquierda, centro, derecha.

Cuando instalamos Elementor por primera vez, en el apartado Ajustes >> Estilos, Elementor declara el valor Espacio entre widgets en 20px, por defecto. Este será el espacio que habrá entre todos los widgets dentro de una misma columna, verticalmente.

La Etiqueta HTML suele ser más utilizada por los programadores para personalizar el contenido con código CSS.

3.2 Estilo

Llegamos a la parte más divertida de todas: los estilos. En este apartado podemos editar colores, imágenes y bordes de una columna. Todos estos ajustes son los que le dan personalidad a las columnas.

En las pestañas Fondo podemos asignar un fondo a la columna: colores, imágenes y diapositivas.

En la pestaña Borde podemos crear todo tipo de bordes en una columna.

La última pestaña, Tipografía, no tiene mucho sentido utilizarla en una columna aunque puede ser útil dependiendo del tipo de diseño que estemos realizando.

3.3 Avanzado

Por último tenemos el apartado que pone todo en su lugar: Avanzado.

En la pestaña Avanzado podemos asignar valores de márgenes y rellenos (conocidos como margin y padding) a las columnas. Adicionalmente se pueden indicar un ID de CSS y Clases CSS si necesitamos personalizar aún más el diseño de las secciones.

Por último, existe un valor llamado Z-Index que es muy útil en algunas ocasiones.

En la pestaña Efectos de movimiento podemos añadir animaciones a las columnas.

La pestaña Adaptabilidad es muy útil cuando diseñamos las versiones RESPONSIVE de nuestro sitio web.

Las pestañas Atributos y CSS personalizado son opciones que ayudan a mejorar el diseño de nuestras páginas. Estas opciones solo están disponibles con Elementor PRO y veremos como se usan en futuras lecciones.

4. ¿Insertar secciones en una columna?

Sección interior que se encuentra en la paleta de widgets BÁSICO. Este widget funciona como una sección pero sigue siendo un widget. Por lo tanto, se puede añadir dentro de una columna.

Si seleccionamos este widget y lo arrastramos al área de contenido veremos lo siguiente:

Se ha creado una sección con 2 columnas dentro de la sección principal y, a su vez, dentro de la columna principal que tiene la siguiente jerarquía:

Con Elementor solo se puede crear una sección interna dentro de una sección principal. No es posible crear una sección interna dentro de otra sección interna (lo que se conoce como secciones anidadas).

5. Estructura de una sección

Regresemos al ejemplo del punto 3.1 donde habíamos creado una sección con 4 columnas desde el área de contenido. El ancho de cada columna tiene un valor de 25% pero, en el apartado Disposición, verás que el campo está en blanco.

Esto no significa que no tenga un valor. Simplemente como hemos elegido una estructura predeterminada de Elementor, este entiende que cada columna tendrá el valor de 25% aunque no lo indique.

Si modificamos el ancho de la segundo columna a 20%, la tercera columna adoptará el valor de 30%. Hasta ahí todo bien. Ahora…

Intenta cambiar o borrar el valor del ancho de la segunda o tercera columna a ver que pasa.

¿A que no has podido?

Esto se debe a que Elementor entiende que la estructura original (4 columnas) ha sido alterada y ahora muestra los valores.

Si intentamos ponerlos a 25% utilizando el ratón, podremos tener nuevamente una sección con 4 columnas de 25% cada una pero, los valores seguirán apareciendo en el campo Ancho de la columna de las columnas modificadas, aunque todas estén a 25%

¿Es esto un problema? Depende.

No sería un problema si controlas todos los anchos de todas las columnas pero, si no tienes mucha experiencia con Elementor y, alteras los anchos de las columnas, puede que el diseño no quede simétrico y no sepas como arreglarlo.

Y después de tantos porcentajes, aquí viene la solución. Se llama Estructura.

Si hacemos clic en el icono Editar sección (la que contiene las columnas alteradas), en el apartado Disposición, podemos ver la estructura original de la sección que hemos creado.

Haciendo clic en Restablecer, todas las columnas volverán a tener el ancho inicial (25%) y, lo mejor de todo, es que no mostrarán el valor. Vuelven a su estado original.

6. Duplicar columnas en Elementor

En el menú contextual de la columna existe una opción llamada Duplicar. Esta opción funciona como un “copiar y pegar a la vez” y lo que hace es reproducir exactamente la columna que hemos duplicado (incluye TODO).

Adicionalmente existe otra opción llamada Añadir nueva columna y lo que hace es añadir una nueva columna, al lado de la anterior, pero totalmente en blanco. No incluye nada de la otra columna.

A diferencia de las secciones, en versión RESPONSIVE, las columnas se pueden duplicar en formato HORIZONTAL y VERTICAL según nuestras necesidades. Esta es la esencia del diseño para tabletas y móviles.

Para ubicar las columnas en formato VERTICAL entrará en juego nuestro amigo Ancho de la columna. Si, ese del que hemos estado hablando toda la lección.

Comparte:
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on telegram
Telegram
Share on whatsapp
WhatsApp
Share on skype
Skype
Share on email
Email

Te puede interesar:

Estructura Elementor

1. Conociendo la estructura de página de Elementor El término Estructura de Página se puede asociar a la estructura que tiene cualquier página “estandar” en

Leer Más »

Deja un comentario

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