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.

La entrada Secciones, columnas y widgets se publicó por primera vez en Curso de WordPress 2020.

Widgets de la categoría Pro

Entradas

El widget de entradas permite mostrar un conjunto de entradas, bien en forma de lista, bien con disposición de cuadrícula o rejilla. Es uno de los,widgets más potentes y útiles de Elementor Pro, gracias a su gran cantidad de opciones de configuración y presentacion. El siguiente vídeo (este y todos los demás de esta página están en inglés) muestra cómo utilizarlo:

Portfolio

Parecido en concepto y diseño al widget de entradas, el de portfolio permite crear un elegante escaparate de trabajos, actividades o cualquier otro contenido que se pretenda destacar. También dispone de una gran batería de opciones de configuración y presentación, algunas de las cuales pueden verse en acción en el siguiente vídeo:

Galería de imágenes

El funcionamiento del widget de galería de imágenes es muy semejante al del bloque nativo de galería de imágenes de WordPress, con la diferencia de que este widget (que también existe enla versión gratuita de Elementor, aunque con funcionalidad limitada) dispone de una cantidad de opciones de configuración y presentación mucho mayor. En el siguiente vídeo podemos ver algunas de sus posibilidades:

Pase de diapositivas

El widget de pase de diapositivas permite crear impresionantes sliders o pases de diapositivas, que pueden configurarse de acuerdo con una amplia variedad de disposiciones y presentaciones. En el vídeo que incluimos bajo este párrafo se muestra su funcionamiento:

Formulario

El widget de formularios de Elementor Pro es completísimo, y por sí solo justificaría la adquisición de este plugin. Los formularios creados con Elementor Pro son sumamente flexibles y potentes, y se pueden integrar con muchas aplicaciones de terceras partes. Algunas de estas funcionalidades pueden verse en estos dos vídeos:

Titular animado

El widget de titular animado sirve para crear titulares muy vistosos y llamativos, gracias a la posibilidad de aplicarles diversos efectos de movimiento y animación. Algunos pueden verse en este vídeo:

Caja volteada

Las cajas volteadas o flip boxes sirven para mostrar contenido destacado, que se dispone en cajas dotadas de llamativos efectos de volteo, rotación, deslizamiento, etc. Elementor Pro proporciona muchas opciones distintas para configurar este widget, tal como muestra el siguiente vídeo:

Llamada a la acción

Con el widget de llamada a la acción se pueden crear elegantes y atractivos dispositivos cuyo objetivo es llamar la atención del visitante y animarle a realizar una acción previamente planificada. En el siguiente vídeo podemos ver su funcionamiento:

Carrusel de elementos multimedia

Como su nombre indica, este widget permite diseñar vistosos carruseles de elementos multimedia, que no solo pueden incluir imágenes, sino también vídeos. El widget dispone de gran cantidad de opciones que lo convierten en un recurso muy potente, tal como puede verse en el siguiente vídeo:

Carrusel de testimonios

El widget de carrusel de testimonios sirve para mostrar testimonios en una sucesión animada, semejante a los carruseles de imágenes o de vídeo. Algunas de las opciones de configuración y presentación de este widget aparecen en este vídeo:

Botones para compartir

Las clásicas baterías de botones para compartir artículos en las redes sociales se pueden crear muy fácilmente en Elementor Pro con este widget, que ofrece avanzadas opciones de configuración y presentación. En el vídeo que presentamos bajo estas líneas pueden verse algunas:

Menú de navegación

No hay ninguna duda de que el widget de menú de navegación de Elementor Pro es uno de los más útiles de este plugin, ya que permite crear menús de navegación, horizontales o verticales, en muy poco tiempo, a partir de los menús previamente creados con el sistema nativo de WordPress. Además, el widget cuenta con un conjunto muy nutrido de opciones de configuración y diseño, tal como podemos ver en este vídeo:

Citas

El widget de citas (blockquotes) de Elementor Pro permite crear elegantes y atractivos bloques de citas, que se pueden compartir en Twitter, y que se pueden personalizar con muchas opciones diferentes. Algunas están ilustradas en este vídeo:

Tabla de contenidos

El widget de tabla de contenidos de Elementor Pro sirve para crear tablas de contenidos de los artículos, que se generan automáticamente a partir de los titulares incluidos en ellos. Esta interesantísima herramienta cuenta con muchas opciones para seleccionar o excluir titulares, mostrarlos jerárquicamente, etc. En el vídeo que incluimos a continuación pueden verse alguna de sus posibilidades:

Plantilla

El widget de plantilla de Elementor Pro sirve para incrustar cualquier plantilla realizada con este plugin o con Elementor. Es una forma rápida, sencilla y muy efectiva de acceder a las plantillas definidas con estos plugins y poder reutilizarlas sin salir del editor de Elementor. En el vídeo que incluimos,a continuación se muestra cómo utilizar este widget y los demás mecanismos de incrustación de plantillas de los que disponen los plugins Elementor y Elementor Pro:

Otros widgets

Solo hemos comentado los widgets que nos parecen más útiles y aprovechables para la construcción de sitios web educativos, pero lo cierto es que en la categoría Pro hay todavía unos cuantos más:

• Inicio de sesión.
• Lista de precios.
• Tabla de precios.
• Cuenta atrás.
• Reseñas.
• Widgets de Facebook: botón, incrustación, página y comentarios.

Otras categorías de widgets de Elementor Pro

Para no alargar en exceso la exposición de los widgets exclusivos de Elementor Pro, hemos dedicado un artículo a los widgets de las categorías Sitio e Individual, ambas relacionadas con lo que Elementor Pro denomina constructor de temas (theme builder).

Prácticas con los widgets de Elementor Pro

En el artículo dedicado a las prácticas con Elementor Pro vamos a proponer un par de tareas relacionadas con los widgets de este plugin que hemos comentado aquí.

La entrada Los widgets de Elementor Pro se publicó por primera vez en Curso de WordPress 2020.