Secciones, columnas y widgets

Una vez descrita la disposición general del editor de Elementor, debemos ocuparnos de los elementos básicos que sirven para estructurar y organizar un artículo creado con este plugin: secciones, columnas y widgets. En este artículo examinaremos cómo se crean estos elementos y cómo se trabaja con ellos.

Las secciones

Si concebimos una página web como una estructura con disposición de cuadrícula o rejilla, una sección es un bloque de contenido que se extiende horizontalmente de izquierda a derecha. En la primera sesión de este curso ya vimos que, para poder ser considerada propiamente como una sección, el bloque de contenido debe combinar objetivos funcionales y un diseño distintivo, aspectos ambos que permitirán identificar inequívocamente este elemento en la página web.

Elementor permite crear un número indefinido de secciones en una misma página, con las mismas anchuras y alturas o cada una de ellas con medidas diferentes. Dentro de las secciones se pueden insertar columnas verticales que, a su vez, pueden albergar elementos de contenido o widgets.

Creación y funcionamiento de las secciones

Para crear una sección, basta con pulsar sobre el icono con forma de cruz que aparece en la zona de edición de Elementor. Al hacerlo, se abrirá una ventana modal que permite seleccionar, de entre doce modelos diferentes, el número y disposición de las columnas que formarán la estructura de la sección.

Las secciones se pueden ordenar y reordenar en la página web utilizando la técnica de arrastra y soltar. Al principio, esta operación resulta un poco difícil, sobre todo para las personas que no están acostumbradas a esta técnica, pero enseguida se le coge el tranquilo. La ordenación de secciones también se puede llevar a cabo mediante el navegador de Elementor, que resulta muy útil cuando el diseño de la página es complejo y está formado por un gran número de elementos.

Manipulación de las secciones

En el editor de Elementor cada sección se identifica mediante un contenedor o caja cuyo borde es de color azul y en cuya parte superior hay un bloque con tres iconos. Al pulsar sobre ellos se activan diferentes funciones:

• El icono con forma de cruz sirve para añadir una nueva sección, que se dispondrá por encima de la sección sobre cuyo icono se ha pulsado.
• El icono con forma de cuadrícula de puntos permite seleccionar la sección. Si se hace clic con el botón derecho en este icono, se podrán efectuar diversas operaciones sobre la sección, como por ejemplo editarla, duplicarla, borrarla, guardarla como plantilla, añadir una nueva columna, pegar o reiniciar los estilos, etc.
• El icono con forma de aspa sirve para eliminar la sección.

Propiedades de las secciones

Cuando se selecciona una sección, el área de configuración y propiedades de Elementor se transforma y, en lugar de mostrar los widgets disponibles, muestra las propiedades de la sección, organizadas en tres pestañas: Diseño, Estilo y Avanzado. Esta misma estructura tripartita se repite cuando accedemos a las propiedades de las columnas y los widgets.

Todos los aspectos de funcionamiento de las secciones que acabamos de describir se muestran en el siguiente screencast.

Las columnas

Las columnas son los bloques verticales que forman las secciones. Como acabamos de ver en el epígrafe anterior, las columnas se crean automáticamente cuando el usuario selecciona el diseño de una sección. Elementor identifica las columnas mediante un contenedor delimitado por un borde negro punteado, en cuyo ángulo superior izquierdo aparece un icono característico.

Si hacemos clic sobre el icono de una columna, veremos cómo Elementor muestra sus propiedades en el área de configuración, organizadas en las mismas tres pestañas (Diseño, Estilo y Avanzado) que ya hemos visto al tratar las secciones. Por otro lado, si pulsamos con el botón derecho del ratón sobre el icono de la columna, podremos acceder a funciones como duplicarla, borrarla, añadir una nueva columna, pegar o reiniciar los estilos, etc.

El funcionamiento de las columnas puede verse en el screencast que incluimos a continuación.

Los widgets

Los widgets de Elementor (que no son lo mismo que los widgets de WordPress) son los diferentes bloques de contenido que se pueden incluir dentro de las columnas. Si accedemos al área de configuración y propiedades de Elementor, comprobaremos que disponemos de un enorme conjunto de widgets, organizados en diversas categorías (una organización que recuerda mucho a la del insertador de bloques de WordPress). La última categoría es la de los widgets de WordPress, que se pueden utilizar no solo del modo habitual, sino también dentro de cualquiera de los artículos elaborados con Elementor.

Relación de widgets de Elementor

No disponemos de tiempo ni espacio suficientes como para detallar todos los widgets con que cuentan Elementor y Elementor Pro, pero tampoco lo consideramos necesario, porque la mayoría tienen unos títulos muy intuitivos que permiten identificarlos sin posibilidad de error. En cualquier caso, remitimos a los alumnos y alumnas de este curso a la documentación de Elementor, que es sin lugar a dudas el mejor recurso para encontrar información exhaustiva sobre los widgets y cualquier otro aspecto del uso de Elementor.

Cómo se añaden y se manipulan los widgets

Una vez definida un sección (que al menos ha de tener una columna), los widgets se crean mediante una técnica tan simple como efectiva: arrastrarlos con el ratón desde el área de configuración y propiedades hasta la columna donde se desean insertar. Elementor marca la zona de inserción del widget con un tono azul característico, lo cual permite añadirlo con gran precisión.

Una vez insertado un widget, Elementor lo identifica con un icono característico que tiene forma de lápiz y está situado en el ángulo superior derecho de un contenedor bordeado por una línea azul.

Mediante las técnicas que ya hemos descrito al tratar sobre secciones y columnas (es decir, arrastrar y soltar, y pulsar con el botón derecho del ratón), los widgets se pueden reordenar, borrar, pegar y copiar, etc. Al igual que ocurre con las secciones y columnas, cuando se hace clic sobre un widget, el área de configuración y propiedades del editor de Elementor adopta la disposición tripartita de configuración que ya hemos visto, la cual permite acceder a las tres pestañas (Diseño, Estilo y Avanzado) en que se organizan sus propiedades.

El funcionamiento de los widgets puede verse en el screencast que ofrecemos a continuación.

Complejidad y simplicidad de Elementor

Como puede deducirse de las explicaciones y screencasts que hemos incluido en este artículo, el editor de Elementor es, a pesar de su aparente complejidad, muy fácil de manejar, ya que tanto las secciones como las columnas y los widgets se utilizan de la misma manera, y sus respectivas opciones y configuraciones están organizadas de forma homogénea.

Lo más difícil de Elementor es comprender la organización en secciones, columnas y widgets, y aplicar esta organización a los hábitos de composición de cada usuario. No obstante, una vez entendido este mecanismo, Elementor y Elementor Pro son muy fáciles de utilizar. Otra cosa muy distinta es dominar la enorme cantidad de funcionalidades y opciones de ambos plugins, o tener buenas ideas, creatividad y buen gusto a la hora de ponerlas en práctica.