Las técnicas que acabamos de esbozar responden a un proceso creciente de complejidad conceptual y técnica. En todo caso, la organización y metodología del curso parten de un conocimiento que este curso da por supuesto: el manejo básico de los bloques del editor de WordPress. A partir de este punto, el curso se irá adentrando progresivamente en terrenos desconocidos para la mayoría de los asistentes, pero que al mismo tiempo ofrecen un gran potencial de crecimiento y mejora.

Uso de los bloques nativos del editor de WordPress

El nuevo editor incorporado a la versión 5 de WordPress, denominado Gutenberg, no es un maquetador o diseñador de páginas en sentido estricto, pero lleva camino de serlo. En el momento de publicar este artículo, con WordPress en su versión 5.3.2, el editor ya cuenta con un buen número de bloques que permiten crear diseños muy funcionales y atractivos.

La primera sesión del curso la dedicaremos precisamente a realizar prácticas con varios bloques de gran impacto visual:

• Fondo.
• Espaciador.
• Medios y texto.
• Grupo.
• Columnas.
• Galería de imágenes.
• Botón.

Uso de colecciones de bloques adicionales

El editor de WordPress no solo puede trabajar con los bloques proporcionados por la propia aplicación, sino también con bloques creados por diversos plugins y temas, e incluso con bloques diseñados por los propios usuarios.

La aparición de la versión 5 de WordPress y su nuevo editor ha traído consigo una auténtica proliferación de plugins de colecciones de bloques, que aumentan, casi indefinidamente, las capacidades de diseño isual del editor. En la segunda y tercera sesión del curso trabajaremos con una de las colecciones de bloques más potentes y mejor valoradas, Atomic Blocks.

Uso de sistemas de maquetación visual

Un sistema de maquetación o diseño visual propiamente dicho no solo permite diseñar a voluntad entradas y páginas (que es el ámbito para el que ha sido programado el editor de WordPress y en el que se mueven la mayoría de plugins de colecciones de bloques), sino también modificar radicalmente la apariencia de todo un sitio web.

Mediante el uso de un sistema de maquetación visual completo, el diseñador de un sitio web no está limitado por las características del tema, ya que puede modificar enteramente aspectos como su estructura, paletas de colores, tipografía, menús, áreas de widgets, plantillas de artículos, etc.

Las sesiones cuarta y quinta del curso estarán dedicadas a trabajar con uno de estos sistemas de maquetación visual, formado por Elementor y Elementor Pro. El primero es un plugin gratuito que se puede descargar e instalar libremente desde el repositorio de plugins de WordPress; el segundo, en cambio, es un plugin de pago cuya licencia ha sido adquirida por el Departamento de Educación del Gobierno de Navarra para su uso en los sitios web de los centros educativos.

La entrada Tres técnicas para el diseño visual se publicó por primera vez en Curso de WordPress 2020.

Los constructores de páginas y el diseño de sitios web

En nuestro Curso de WordPress 2018, ya definimos los page builders o constructores de páginas (también llamados maquetadores de páginas o editores visuales), así como sus rasgos funcionales característicos y sus ventajas e inconvenientes. Además publicamos entonces una relación de los constructores de páginas para WordPress más utilizados y de mayor calidad.

Aunque es cierto que dos años son mucho tiempo en el ámbito de las tecnologías utilizadas para el diseño web, creemos que lo que escribimos hace dos años sigue siendo válido ahora, razón por la cual no vamos a repetir lo que ya quedó dicho en ocasión anterior. No obstante, queremos hacer hincapié en un par de hechos que deben tenerse muy en cuenta con respecto al tema que nos ocupa:

• Primero y principal: el imparable desarrollo del editor de WordPress, organizado en torno al proyecto Gutenberg, va a modificar radicalmente la forma en que se diseñan los sitios web. Hay muchos expertos que auguran la muerte de los temas tal como ahora los conocemos, e incluso la desaparición o mutación de la mayor parte de los constructores de páginas.
• Segundo: la posición de Elementor en el muy competitivo segmento de los constructores de páginas se ha afianzado de forma indiscutible. En el momento de escribir estas líneas, Elementor es el constructor de páginas más utilizado, con más de 4 millones de instalaciones, a gran distancia de todos sus competidores. Para profundizar en las razones que explican el éxito de Elementor y saber en qué direcciones va a avanzar este plugin aconsejamos leer el artículo Elementor Raises $15M: Will They Move into SaaS Services Next? (And Why You Should Too).

Qué podemos hacer con un constructor de páginas

El espacio y el tiempo disponibles en esta sesión no nos permiten realizar un análisis comparativo exhaustivo entre el editor de WordPress, por un lado, y los constructores de páginas, por otro, pero sí apuntar algunas diferencias significativas entre ambos sistemas. La tabla comparativa incluida a continuación, en la que hemos tomado como elementos de comparación el actual editor de WordPress y el constructor de páginas Elementor, ayudará a los alumnos y alumnas del curso a comprender la diferencia entre ambos sistemas de edición.

La entrada Los constructores de páginas se publicó por primera vez en Curso de WordPress 2020.

Por qué hemos seleccionado Elementor y Elementor Pro

A la vista del espectacular desarrollo de los plugins constructores de páginas y de sus enormes posibilidades para el diseño web, en su momento el Departamento de Educación del Gobierno de Navarra se planteó la compra de un plugin que permitiera a los responsables de los sitios web de centros contar con una de estas potentísimas herramientas. Se optó entonces por seleccionar la pareja Elementor-Elementor Pro, debido a una serie de argumentos que ya expusimos en el artículo El plugin Elementor.

Qué relación hay entre Elementor y Elementor Pro

Elementor o, más propiamente, Elementor Page Builder, es un plugin gratuito, que puede descargarse libremente desde el repositorio oficial de plugins de WordPress. En cambio, Elementor Pro es un plugin de pago, que funciona como complemento o extensión del anterior. Elementor puede instalarse sin ningún requisito especial, y funciona por sí mismo en cualquier instalación de WordPress. Por el contrario, Elementor Pro no solo exige que ya esté instalado y activado el plugin Elementor, sino que además requiere que se haya adquirido la licencia con la cual se puede descargar el plugin y activar sus funcionalidades.

La licencia de Elementor Pro comprada por el Departamento de Educación del Gobierno de Navarra permite su instalación en todos los sitios web de centros educativos que estén interesados en él. Por tanto, a lo largo de este curso nosotros no distinguiremos entre las funcionalidades de uno y otro, dado que los consideramos una unidad funcional inseparable (de hecho, una vez instalados y activados ambos plugins, su integración mutua es perfecta). Cualquier mención de Elementor, por tanto, debe entenderse como referida a ambos plugins, salvo que indiquemos otra cosa.

Dicho esto, los alumnos y alumnas del curso deben tener muy en cuenta las siguientes observaciones:

• Las tareas que plantea esta cuarta sesión del curso se realizarán en los blogs de práctica solo con Elementor (es decir, sin Elemento Pro).
• Elementor Pro solo se activará en la quinta sesión del curso, y no en todos los sitios de práctica, sino en un sitio específico, en el que serán datos de alta todos los alumnos y alumnas del curso. Las condiciones de acceso a este sitio especial serán muy particulares, y se anunciarán oportunamente.

Cómo, cuándo y dónde se debe utilizar Elementor

Elementor es un constructor de páginas extraordinariamente potente, capaz de diseñar páginas web individuales, o un sitio web completo, sin ninguna de las restricciones que imponen los temas habituales. Esta capacidad lo convierte en una herramienta excepcional, que por tanto debe utilizarse en condiciones muy determinadas, sobre todo cuando sus usuarios, como ocurre en la inmensa mayoría de los centros educativos, son (o somos) amateurs con muy distinto grado de competencia. A continuación detallamos algunas recomendaciones de uso.

Qué se debe editar con Elementor

Aconsejamos utilizar Elementor solo para crear aquellos artículos que deban tener un diseño singular, destacado o excepcional. En la inmensa mayoría de los casos, resulta poco rentable utilizar Elementor para diseñar las entradas y páginas individuales normales.

Quién debe editar con Elementor

Elementor no debe ser utilizado por cualquier usuario, ni siquiera aquellos autorizados a editar y publicar por sí mismos. Nuestra recomendación es que solo lo utilice la persona que se encarga de la administración del sitio web, y siempre que cuente con los conocimientos y habilidades necesarios.

Elementor y el editor de WordPress

Elementor no permite intercambiar la edición de artículos con el editor de WordPress. Es decir, no se puede pasar de escribir o componer un artículo con Elementor a hacerlo con el editor de WordPress (ni viceversa). Por tanto, hay que planificar muy bien la arquitectura y la edición del sitio.

Sí es posible, en cambio, insertar elementos creados con Elementor tanto en el editor como en los widgets de WordPress. Para ello basta con guardar como plantillas los diseños creados son Elementor, cada uno de los cuales genera el correspondiente shortcode; posteriormente, el shortcode se pude copiar y pegar en el editor de WordPress. Una alternativa a esta técnica es utilizar el plugin Elementor Blocks for Gutenberg. mediante el cual es posible insertar cualquier plantilla creada con Elementor como un bloque.

Diseño global de un sitio con Elementor

En caso de que queramos utilizar Elementor para diseñar un sitio web completo, es necesario definir un tipo especial de plantillas globales que conforman lo que Elementor denomina “constructor de temas” (theme builder). Si el desarrollo del curso lo permite, veremos esta funcionalidad en la quinta sesión.

Por otro lado, es posible “graduar” la independencia de Elementor con respecto al tema utilizado en el sitio web. Esto quiere decir que podemos adoptar el diseño básico de un tema como base para trabajar con Elementor, o prescindir casi totalmente de dicho diseño. Ninguna de las dos alternativas es mejor que la otra; la elección de cualquiera de ellas debe hacer tras valorar las circunstancias del caso.

El futuro de Elementor y WordPress

En el momento de escribir este artículo, no está claro si Elementor va a seguir existiendo como un plugin (bueno, dos plugins, como ya hemos visto), o se va a transformar en un servicio online (un SaaS) u otro tipo de software. Por otro lado, el desarrollo del editor de WordPress es muy veloz, y cabe en lo posible que, en un tiempo relativamente corto, haga innecesarios plugins como Elementor, que tal vez solo tengan sentido para proyectos de diseño de muy alto nivel.

Por tanto, recomendamos a nuestros alumnos y alumnas que no se entusiasmen en exceso con las posibilidades de Elementor. En lugar de “poner todos los nuevos en la misma cesta” y elaborar un diseño muy dependiente de este plugin, les aconsejamos que limiten sus diseños al mínimo imprescindible para obtener los resultados funcionales y estéticos deseados.

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

Lamentablemente, la suspensión de las sesiones presenciales del curso, como consecuencia de la epidemia de coronavirus y la posterior aplicación del estado de alarma en todo el territorio español, ha desbaratado los planes que habíamos diseñado para esta cuarta sesión, ya que impide que podamos demostrar ante sus alumnos y alumnas las técnicas y procedimientos que hemos ido explicando en artículos precedentes.

Así pues, solo nos queda una opción: solicitar a los alumnos que, después de leer los artículos de esta cuarta sesión, tengan la saludable audacia (“audentes fortuna iuvat”, como escribió Virgilio), de elaborar en sus sitios de práctica al menos un diseño de página web con Elementor. Para ello contarán con la ayuda de los materiales ya publicados en esta sección del curso, el ejemplo de un sencillo modelo que ha elaborado el profesor y los recursos que iremos recopilando en la página correspondiente, todavía por terminar, que forma parte de la quinta sesión del curso.

Un modelo de página web

Hemos elaborado un modelo de página web que puede ser replicado por los alumnos y alumnas del curso con un esfuerzo relativamente pequeño. En el siguiente epígrafe ofrecemos las pautas necesarias para reproducirlo con Elementor.

Cómo podrá observarse, no hemos detallado totalmente las instrucciones necesarias para reproducir el modelo, pues queremos que los alumnos y alumnas investiguen y experimenten por su cuenta. Por supuesto, esta indeterminación justifica plenamente que los alumnos realicen cuantas adaptaciones y modificaciones les parezcan oportunas, siempre, claro está, que el resultado sea elegante, armonioso y adecuado con los objetivos del ejercicio.

Plantilla y título de pagina

Esta página tiene las siguientes carcteristicas:

• Se le ha aplicado la plantilla “lienzo de elementor”, tal como hemos explicado en Propiedades de los artículos de Elementor.
• Se ha ocultado su título, de acuerdo con el procedimiento también descrito en la página antedicha.

Secciones de la página

La página modelo tiene tres secciones, a saber:

• Una sección de cabecera, con una imagen “héroe”, un titular, texto y botones.
• Una sección central compuesta por seis imágenes, organizadas en dos filas de tres columnas cada una,
• Una sección de pie de página, con titular, datos de contacto y mapa.

Sección de cabecera

Esta sección tiene las siguientes características:

• Es de anchura completa, y tiene una imagen de fondo.
• Consta de una única columna.
• El primer elemento es un widget de titular, a cuyo texto se le ha aplicado un efecto de sombra.
• El segundo elemento es un widget de editor de texto.
• El tercer elemento es un widget de sección interior, con dos columnas. Dentro de cada columna hay un widget de botón.

Sección central

Esta sección consta de una columna, y comprende los siguientes elementos:

• Un widget de titular.
• Un widget de sección interior, con tres columnas. En cada una de ellas se incluyen los siguientes widgets:
  • Widget de imagen.
  • Widget de titular.
  • Widget de imagen.
  • Widget de titular.

Sección de pie de pagina

Esta es una sección de anchura completa y una única columna, dentro de la cual se han incluido los siguientes widgets:

• Un widget de titular.
• Un widget de sección interior, formada por dos columnas, la primera de las cuales tiene un tercio de la anchura total, y la segunda dos tercios. En cada una de las dos columnas se han incluido estos elementos:
  • Columna de la izquierda: widget de titular y widget de editor de texto.
  • Columna de la derecha: widget de mapa de Google.

Realización y envío de la tarea correspondiente a la cuarta sesión

Dadas las excepcionales circunstancias que afectan no solo a este curso, sino a todas las actividades de enseñanza de los centros públicos y privados de Navarra, hemos acordado con el CAP de Pamplona que el plazo de realización de las prácticas descritas en este artículo se amplíe hasta el día 1 de mayo. Los alumnos y alumnas deberán enviar el trabajo al profesor mediante el procedimiento habitual.

La entrada Prácticas con Elementor se publicó por primera vez en Curso de WordPress 2020.

Una advertencia previa

Aunque nos hemos esforzado mucho en encontrar recursos de calidad en español, lo cierto es que una proporción abrumadora de los mejores y más actualizados recursos sobre Elementor y Elementor Pro están en inglés. Por tanto, resulta inevitable incluir materiales y recursos en la lengua de Shakespeare.

Documentación oficial de Elementor

La documentación oficial de Elementor (toda ella en inglés), muchas de cuyas páginas ya hemos citado en los artículos de esta sesión y de la anterior, es auténticamente enciclopédica. Por tanto conviene destacar algunos de los recursos más interesantes:

1. Recomendamos comenzar por la guía definitiva de uso del plugin, que contiene tres videotutoriales muy útiles, y por la sección Getting Started.
2. El canal oficial de Elementor en YouTube es impresionante. Pocos plugins del ecosistema de WordPress pueden rivalizar con este canal en la cantidad, calidad y variedad de sus vídeos.
3. La sección Website Tutorials, que enseña a crear sitios web de temática o propósitos específicos, está repleta de excelentes ideas. Curiosamente, no se contempla en ella la creación de sitios web educativos o de formación.
4. La biblioteca de plantillas de Elementor, accesible desde el editor del plugin siempre que se cuente con una licencia de Elementor Pro, es un recurso esencial para encontrar modelos prediseñados e inspiración. De entre los cientos de plantillas disponibles, queremos destacan los denominados Template Kits, o conjuntos de plantillas, que se incrementan mensualmente con nuevas creaciones. Este sitio ha sido elaborado a partir de uno de esos conjuntos, The Law Firm Template Kit (véase el vídeo de demostración).
5. El blog de Elementor también es un recurso muy recomendable para estar al tanto de las novedades del plugin y conocer trucos y técnicas. Una de sus secciones más intersantes son las “masterclasses” que imparte con gran dinamismo el experto Simón Shockett.
6. Los interesados en la programación apreciarán especialmente la completísima sección de recursos para desarrolladores.

Cursos, tutoriales, videotutoriales

En español

Incluimos a continuación algunos tutoriales, cursos, reseñas y comparativas de calidad, con mucha información y abundantes ejemplos:

1. Elementor Page Builder: el análisis más completo y detallado (enero 2020): tutorial no tan exhaustivo como promete su título, pero que puede venir muy bien a los principiantes.
2. Curso de páginas web con Elementor: aunque muy orientado al ámbito comercial, este es un completísimo curso de videotutoriales que ilustran el desarrollo de un sitio web con este plugin.
3. Elementor Page Builder Review: el mejor editor visual gratuito: muy buena introducción al plugin y sus principales funcionalidades.
4. Elementor Pro review y opinión personal: excelente y completísima presentacion de las funcionalidades del plugin de pago.
5. Curso de Elementor básico y Curso de Elementor avanzado: dos cursos en vídeo, elaborados por la compañía de alojamiento Webempresa. El canal de YouTube de esta empresa, especializada en WordPress, contiene gran cantidad de recursos sobre dicha aplicación.
6. Curso de Elementor Pro. Este gigantesco curso online está formado por nada menos que 67 videotutoriales, que cubren prácticamente todos los aspectos de uso de este plugin.
7. Comunidad ElemenPros: portal de recursos sobre Elementor y Elementor Pro, con muchos recursos de gran calidad, tanto gratuitos como de pago. Cabe destacar el interesantísimo canal de YouTube.

Recursos en español más antiguos

Aunque los materiales incluidos en este epígrafe son de calidad indiscutible, por ellos ya ha pasado cierto tiempo, así que es posible que sus descripciones e indicaciones no se correspondan totalmente con las versiones actuales de Elementor y Elementor Pro:

1. Curso Básico de Elementor: un curso muy completo, organizado en cinco entregas (1, 2, 3, 4 y 5), publicado entre octubre y noviembre de 2017.
2. Elementor page builder WordPress: el maquetador visual definitivo: un curso muy recomendable, aunque algunos de sus contenidos están pendientes de desarrollo o actualización.
3. La serie de videotutoriales Elementor Page Builder, review + mega tutorial con 3 vídeos tiene casi año y medio, pero constituye una excelente presentación de las funcionalidades de este plugin y de la forma de trabajar con él.
4. El curso Elementor Page Builder: review + tutorial y comparativa con Thrive Content Builder es muy completo y está bien estructurado, aunque debería ser actualizado.
5. Elementor Page Builder: tutorial y review + Video del mejor page builder WordPress en español: la información que este curso proporciona es muy completa, aunque necesita actualización.

En inglés

• FerdyKorpershoek: un canal de videotutoriales, varios de los cuales están dedicados a Elementor y Elementor Pro. Incluye varios tutoriales para principiantes, alguno de ellos con subtítulos en español.
• Oooh Boy: interesantísimo canal de videotutoriales dedicado a mostrar técnicas avanzadas de diseño con Elementor.
• WPtuts: este canal de vídeo también dispone de varios videotutoriales sobre Elementor muy completos, la mayoría de nivel avanzado.

Plantillas prediseñadas

La mayor parte de los recursos que hemos incluido en este epígrafe requieren temas concretos o plugins especializados para su importación. No obstante, siempre se pueden utilizar como fuente de inspiración y consulta:

• Elementor Template Library: ya nos hemos referido a este recurso en el epígrafe sobre documentación oficial de Elementor.
• Envato Elements: es un plugin que permite acceder a un amplísimo repositorio de plantillas (gratis y de pago) compatibles con Elementor.
• Plantillas para Elementor del tema Astra: una amplia colección de plantillas, tanto gratuitas como de pago, basadas en este tema.
• Demos de OceanWP: estos sitios prediseñados también de pueden importar, siempre que se utilice este tema.

Plugins y complementos para Elementor

El éxito indiscutible de Elementor y Elementor Pro, así como su potencia y facilidad de uso, han favorecido que se desarrolle una enorme oferta de plugins y complementos para ambos plugins, tanto gratuitos como de pago. En la página correspondiente de la documentación de Elementor Pro puede encontrarse una relación muy completa de los más recomendables.

La entrada Recursos sobre Elementor y Elementor Pro se publicó por primera vez en Curso de WordPress 2020.