Lección 08

Crear columnas en Elementor

En la lección anterior hablamos de las secciones en Elementor ya que es lo primero que necesitamos crear cuando diseñamos un sitio web con Elementor.

Al igual que lo hemos hecho con las secciones, para crear columnas en Elementor, vamos a activar la plantilla Elementor ancho completo para poder visualizar mejor el proceso.

Índice del contenido
    Add a header to begin generating the table of contents

    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.

    Recuerda que esto lo hacemos para que Elementor quite la(s) barra(s) lateral(es) que viene(n) por defecto con el tema ya que, por lo general, las páginas no suelen incluir barra(s) lateral(es).

    Puedes trabajar como más gustes ya que esto no influirá en el funcionamiento de las secciones.

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

    Editando una página con Elementor
    Editando una página con Elementor

    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 tal como vimos en la lección anterior.

    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.

    Estructuras de secciones en Elementor
    Estructuras de secciones en Elementor

    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.

    ¿Crees que es posible?

    Según lo que hemos comentado hasta ahora, solo es posible que existan columnas dentro de las secciones pero, ¿crees que es posible crear secciones dentro de una columna? Mientras vas pensando la respuesta, continúa leyendo la lección.

    Anuncio publicitario

    2. Propiedades de una columna en Elementor

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

    Creando una columna con Elementor
    Creando una columna con Elementor
    • 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.

    Icono Editar columna en Elementor
    Icono Editar columna en Elementor

    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:

    Menú de edición de una columna en Elementor
    Menú de edición de una columna en Elementor

    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.

    La finalidad de esta lección es que aprendas a crear columnas y te familiarices con todas las propiedades y opciones que ofrecen las columnas en Elementor.

    Para no alargar tanto la lección, 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.

    Editar columna en Elementor: Disposición
    Editar columna en Elementor: Disposición

    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:

    Sección de 4 columnas en Elementor
    Sección de 4 columnas en Elementor

    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:

    Editar el ancho de una columna en Elementor
    Editar el ancho de una columna en Elementor

    Continuamos...

    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.

    Editar columna en Elementor: Estilo
    Editar columna en Elementor: Estilo

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

    En la lección, fondos con Elementor, veremos con más detalles y ejemplos cómo utilizar estas opciones en una columna.

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

    En la lección, bordes en Elementor, veremos con más detalles y ejemplos cómo utilizar esta opción.

    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.

    En la pestaña Tipografía, Elementor cita la siguiente nota:

    "El siguiente conjunto de controles está obsoleto. Esos controles solo son visibles si se han lanzado previamente."

    Es posible que en futuras versiones esta característica desaparezca.

    3.3 Avanzado

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

    Editar columna en Elementor: Avanzado
    Editar columna en Elementor: 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.

    Lectura recomendada...

    En la lección del curso de WordPress, CSS para WordPress, puedes encontrar información sobre el uso de los márgenes y rellenos en un sitio web.

    En futuras lecciones iremos jugando con estos valores con ejemplos prácticos para que te familiarices con su uso.

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

    En la lección, animaciones en Elementor, veremos con más detalles y ejemplos cómo utilizar esta opción.

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

    En la lección, modo adaptable en Elementor, veremos con más detalles y ejemplos cómo utilizar esta opción.

    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.

    Curso de WordPress

    Si aún no tienes Elementor PRO este es el momento perfecto para que te hagas con este fantástico editor de contenidos.

    Va a ser parte importante de este curso. Desarrollaremos muchas lecciones con este plugin para que aprendas a utilizarlo en su totalidad y sacar el máximo provecho para el desarrollo de sitios web 100% profesionales.

    4. ¿Insertar secciones en una columna?

    Al final del punto 1 te pregunté si crees que es posible insertar secciones dentro de columnas. ¿Qué has respondido?

    • Si
    • No
    • No tiene sentido
    • Banana...

    Si has respondido Si, has acertado y a continuación te voy a contar a ti y a los que quieren banana, cómo se hace.

    En la lección anterior conocimos el primer widget de Elementor, 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.

    Sección interior en Elementor
    Sección interior en Elementor

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

    Insertar una sección interior con Elementor
    Insertar una sección interior con Elementor

    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:

    Jerarquía de una sección interior con Elementor
    Jerarquía de una sección interior con Elementor

    Es muy importante tener en cuenta esta jerarquía al momento de diseñar las columnas. Ten en cuenta que la columna principal es la que manda y es donde se realizan los primeros ajustes.

    Al final si que hemos podido insertar una sección dentro de una columna. Parecía impensable pero has visto que si.

    ¡Ha que es una maravilla!

    Con este "simple" widget podemos crear estructuras complejas para realizar múltiples diseños en nuestras páginas.

    Información de interés...

    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).

    Sin embargo, existe un plugin muy potente que permite crear secciones anidadas "infinitas" en Elementor. Ya te hablaré de este plugin más adelante a medida que avancemos en el curso.

    5. Estructura de una sección

    Si recuerdas la lección anterior (otra vez, por eso es importante que la hayas visto), en el apartado Disposición de una sección, se encuentra la pestaña Estructura de la que hablaríamos en esta lección.

    ¿Y por qué vamos a hablar algo de las secciones en una lección de columnas?

    Porque primero era necesario que conocieras muy bien cómo funcionan las columnas para hablar de esta característica.

    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.

    Restablecer ancho de las columnas en Elementor
    Restablecer ancho de las columnas en Elementor

    ¿Por qué te he contado todo esto?

    Porque es realmente importante que el diseño siempre sea SIMÉTRICO. La estética y la simetría en un sitio web es muy valorada por los usuarios ya que mejora la EXPERIENCIA DEL USUARIO y esto se traduce en un buen SEO.

    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.

    He querido hacer énfasis en este concepto para que tengas claro que las columnas solo se duplican en formato HORIZONTAL, izquierda y derecha, en versión PC (Desktop o Escritorio).

    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.

    Anuncio publicitario

    7. Conclusión

    Si has seguido este curso desde el principio, te habrás dado cuenta que las columnas son muy similares a las secciones salvo algunas pequeñas diferencias.

    Esto se debe a que, tanto las secciones como las columnas, son las que forman la estructura y sirven de contenedores de los widgets. Es lo primero que tenemos que conocer para comenzar a trabajar con Elementor.

    A medida que avancemos en este impresionante curso de Elementor, iremos viendo cómo utilizar todas estas fantásticas características y propiedades que nos ofrecen las columnas en Elementor.

    ¿Te ha gustado?

    Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este curso de Elementor y ayudas a otras personas que desean aprender.

    (3 votos, promedio: 5 de 5)

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on linkedin
    LinkedIn
    Share on telegram
    Telegram
    Share on whatsapp
    WhatsApp
    Share on email
    Email

    Este curso es gratis y siempre lo será pero, mantenerlo, requiere de mucho tiempo y esfuerzo. Si te gusta el curso y te ha ayudado, considera invitarme un café haciendo un pequeño donativo a este proyecto que he creado con el para ti y muchas personas que desean aprender. Las donaciones me ayudan a seguir trabajando en este fantástico curso gratuito. ¿Me invitas un café?.

    Suscríbete y aprende Elementor desde cero.

    No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre Elementor.

    Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.

    Comparte tu experiencia

    Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.

    guest
    0 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    0
    ¿Dejas un comentario? Gracias!x
    ()
    x
    Ir arriba

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electrónicos.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@gianoliveira.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.