Elementor: columnas, secciones y elementos

Uno de los temas a tener en cuenta para trabajar con Elementor es el de tratar de entender algunos aspectos del mismo, que pueden resultar inicialmente, como poco intuitivos y difíciles de entender. Es por ello que en este post tratemos 3 de esos aspectos como son las columnas, las secciones y los elementos.

La idea es entender bien Elementor y no tratar de hacer chapucillas con código de allí y de allá para ajustar. Nunca es buena idea añadir cientos de líneas de código a los editores visuales, sobre todo cuando son cosas que se puede arreglar fácilmente con ellos mismos. El abusar de paddings, margins, z-index, displays none,… nunca es una buena idea, en estos casos.

La mejor forma de entender cómo funciona Elementor es usar una de sus plantillas de página, como Elementor Canvas y publicar. Podremos posteriormente editar con Elementor la misma página desde cero. La plantilla Elementor Canvas nos permite un lienzo completamente en blanco. Si además utilizamos la función Live Preview, veremos los cambios tras cada guardado.

Existen tres formas de comenzar con Elementor:

    • Seleccionar una sección con una columna.
    • Seleccionar una sección con más de una columna.
    • Seleccionar una plantilla propia o ajena.

En este caso, nos vamos a centrar en los primeros dos puntos, ya que al elegir una plantilla, no estaríamos haciendo el proyecto desde cero y no se entendería bien el proceso.

Es importante saber que no es lo mismo agregar una sección con una columna, y luego añadirle dos columnas dentro; que una sección con dos columnas. No podemos hacer anidaciones infinitas. Si nos hemos equivocado de diseño, se puede solucionar fácilmente creando otra sección de forma correcta y trasladando los elementos. Sin embargo, es una fuente recurrente de frustración entre los usuarios novatos.

Si vamos dando estilos a nuestra sección y a nuestra columna vacíos, observaremos que en el visor iremos viendo los colores que estemos dando a la sección, pero que la columna no se verá. ¿Cuándo podremos ver el estilo que hemos dado a nuestra columna o columnas? Cuando le agreguemos un elemento a la misma, como puede ser por ejemplo un texto o otra sección. Hasta que no haya un elemento, la columna va a funcionar como si no existiese. Y esto es otro gran problema para los usuarios novatos, al igual que el padding natural que tienen las columnas.

Otro de los aspectos a tener en cuenta es determinar el ancho que queremos que tengan nuestras secciones y columnas. Por un lado debemos observar los estilos CSS como los colores o imágenes de fondo, y por otro el contenido en sí. Cada uno puede usar un ancho de sección diferente. Es decir, el CSS se expande al ancho completo, pero el HTML (contenido) puede expandirse o no, dentro de una sección expandida.

En definitiva, y realizando distintas combinaciones de secciones con columnas o con columnas anidadas, se podrían hacer diferentes versiones de un layout. Un consejo es ver plantillas ajenas y ver cómo solucionan problemas básicos. Por último, seamos lo más semánticos que podamos con nuestro código, aunque Elementor a veces nos lo ponga difícil.

Para ver todo esto de forma práctica he grabado este video tutorial, donde paso a paso explico algunos ejemplos de posibles layouts combinando algunas opciones de secciones, columnas y elementos a integrar.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (11 votos, promedio: 4,18 de 5)
Cargando…

Autor: Rafa Ramos

Diseñador y Desarrollador Web, Marketero y Formador. Profesor del Máster en Gestión de Marketing y Ventas en el Instituto de Estudios Cajasol en los dos últimos años. Organizador de WordPress Aljarafe, y habitual colaborador de las comunidades de WordPress en España.

Comparte esta entrada en
468 ad

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Pin It on Pinterest

Share This