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.
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.
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.
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
Vamos a crear una sección arrastrando un widget, Encabezado (por ejemplo), al área de contenidos para que puedas apreciar todos los componentes.
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:
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.
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.
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.
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:
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.
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 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.
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.
Lectura recomendada...
En la entrada, 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.
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.
Al final del punto 1 te pregunté si crees que es posible insertar secciones dentro de columnas. ¿Qué has respondido?
Si has respondido Si, has acertado y a continuación te voy a contar a ti y a los que han dicho 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.
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:
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.
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.
¿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.
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
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.
No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.
Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.
Copyright © 2024 Curso de WordPress
Hecho con Venezolano!
Desarrollado con WordPress y diseñado con Hello Theme y Elementor.
A veces, Elementor tiene conflicto con plantillas y no hay foro que pueda ayudar a solucionarlo.