Aplicación de las plantillas especiales de Elementor

Cuando creamos un artículo con Elementor, este adquiere por defecto las características de diseño del tema (tipografía, colores, cabecera, pie de página, barras laterales, etc.), lo cual puede no ser conveniente para los objetivos previstos.

Para resolver este problema, Elementor dispone de dos plantillas especiales, que se pueden aplicar a cualquier artículo (páginas, entradas u otros tipos de contenido) con el fin de modificar su diseño e independizarlo de las características del tema:

• Anchura completa de Elementor: esta plantilla elimina cualquier barra lateral o área de widgets, y permite que el diseño del artículo cubra, si así se desea, toda la anchura de la página. En cambio, la aplicación de esta plantilla no elimina la cabecera ni el pie de página definidos por el tema.
• Lienzo de Elementor: como su propio nombre sugiere, esta plantilla convierte la página en un espacio en blanco, sin barras laterales, cabecera ni pie de página, con lo cual el usuario puede “pintar” sobre ella como si se encontrara ante el proverbial lienzo de un cuadro.

Conviene tener en cuenta que ninguna de estas plantillas suprime otras características de los temas, como la tipografía, el color del texto, el diseño del fondo, los colores de los enlaces, etc. Si se quieren anular estos elementos de diseño, hay que poner en práctica técnicas especiales, que veremos, si el tiempo lo permite, en la quinta sesión del curso.

Para aplicar cualquiera de las plantillas antedichas, hay que editar un artículo con Elementor, pulsar sobre el icono de configuración de página que aparece en la parte inferior del área de configuración y propiedades (tiene forma de rueda dentada o engranaje), y seleccionar la plantilla que en cada caso convenga a los propósitos de edición.

Ocultación del título de un artículo

Hay muchas ocasiones en que el diseño de un artículo hace aconsejable ocultar su título; de hecho, así lo hemos venido haciendo en la primera, segunda y tercera actividades de este curso, aunque en todos estos casos hemos aplicado la función de ocultación del título propia de los temas de la familia Génesis.

Para conseguir este objetivo en Elementor, e independientemente del tema que utilicemos en nuestro sitio web, hay que repetir el procedimiento definido en el epígrafe anterior, aunque en este caso se debe activar la opción Ocultar el título.

El screencast que incluimos a continuación muestra cómo se puede seleccionar una plantilla especial de Elementor y cómo ocultar el título de un artículo.

La entrada Propiedades de los artículos de Elementor se publicó por primera vez en Curso de WordPress 2020.

Qué son las plantillas de Elementor y Elementor Pro

Las plantillas de Elementor y Elementor Pro son bloques de contenido creados con cualquiera de ambos plugins, que se pueden guardar para ser reutilizadas en cualquier momento. Elementor permite crear plantillas a partir de una sección, que a su vez puede contener una o varias columnas y uno o varios widgets, o bien a partir de una página completa.

Creación de plantillas

Las plantillas se pueden crear directamente, desde el menú Plantillas, o se pueden crear desde cualquier página o entrada que esté siendo editada con Elementor. A continuación vamos a ilustrar ambos procedimientos son sendos screencasts.

Uso de las plantillas de Elementor

Una vez creada una plantilla, la podemos reutilizar en cualquier entrada o página creada con Elementor, e incluso en las páginas creadas con el editor de WordPress. Hay varias formas de hacerlo, que dependen de si tenemos instalado o no el plugin Elementor Pro.

Inserción de plantillas con Elementor Pro

Si tenemos instalado Elementor Pro, podemos insertar una plantilla desde el botón de inserción de plantillas del editor de Elementor, o desde el editor de WordPress, para lo cual tenemos que copiar y pegar el shortcode correspondiente. Vamos a verlo en el siguiente screeencast.

Inserción de plantillas con Elementor

Si no está instalado el plugin Elementor Pro, solo podremos insertar las plantillas de Elementor desde el editor de este plugin, pero no desde el editor de WordPress, ya que no podemos acceder a los shortcodes de las plantillas. Afortunadamente, existe un plugin que resuelve esta limitación: Elementor Blocks for Gutenberg, cuyo uso podemos ver en el siguiente screencast.

Inserción de plantillas en widgets

Si disponemos de Elementor Pro, podemos insertar las plantillas que hayamos creado no solo en entradas y páginas, tal como acabamos de ver, sino incluso en las áreas de widgets. Esto es posible gracias al widget denominado Biblioteca de Elementor, que permite insertar las plantillas que hayamos definido en cualquiera de las áreas de widgets o barras laterales del tema que estemos utilizando en nuestro sitio web. En el siguiente vídeo (en inglés) se muestra cómo hacerlo.

Exportación e importación de plantillas

En la segunda sesión de este curso ya vimos cómo se exportan los bloques mediante el plugin EditorsKit, y cómo se pueden importar posteriormente, tanto desde el mismo sitio en el que han sido creados, como desde un sitio web diferente.

Pues bien, Elementor utiliza un sistema semejante al de EditorsKIt, también basado en ficheros JSON, aunque en este caso mucho más potente, flexible y versátil. Este sistema tiene un enorme potencial, ya que permite aprovechar el trabajo realizado en el diseño y construcción de un sitio web para exportarlo a cualquier otro sitio en el que también esté instalado el plugin Elementor.

En este curso no vamos a realizar prácticas de exportación e importación de plantillas; no obstante, podemos ver su funcionamiento en el videotutorial que incluimos a continuación.

Tipos de plantillas

Elementor y Elementor Pro Disponen de un amplio y potente arsenal de plantillas y elementos reutilizables, algunos de los cuales vamos a explicar a continuación.

Plantillas locales

Estas plantillas, cuyo uso ya hemos visto en anteriores epígrafes, permiten guardar una sección, o una página completa, de forma que pueda ser reaprovechada posteriormente en entradas, páginas individuales o incluso en widgets. Tanto las plantillas de sección como las de página se pueden crear con Elementor y con Elementor Pro.

Plantillas globales

El objetivo de este tipo de plantillas no es solo reaprovechar un bloque de contenido (widget, sección o página), sino sobre todo crear los elementos estructurales que definen un sitio web completo. El conjunto de todas las plantillas globales forma lo que se conoce como constructor de temas, funcionalidad exclusiva del plugin Elementor Pro.

Según la función que desempeñan en el diseño y estructura de un sitio web, se pueden distinguir los siguientes tipos de plantillas globales:

• Artículos individuales, que pueden ser tanto entradas como páginas.
• Páginas de archivo.
• Cabecera.
• Pie de página.
• Ventana emergente o popup.

Widgets globales

Los widgets globales son un tipo especial de widgets de Elementor, y funcionan de un modo semejante a las demás plantillas. De hecho, son muy parecidos en concepto a los bloques reutilizables del editor de WordPress, ya que se pueden utilizar múltiples veces en un mismo sitio web; si se modifica un widget global, los cambios se aplicarán a cualquier lugar donde se inserte dicho widget.

Al igual que los bloques reutilizables, también los widgets globales se pueden desenlazar o desvincular de sus respectivos modelos para, de este modo, poder ser modificados individualmente sin que dicha modificación afecte a la plantilla original.

Condiciones de las plantillas

Siempre que se utilice Elementor Pro, a todas las plantillas, tanto locales como globales, se les pueden aplicar condiciones, mediante las cuales es posible determinar qué partes de un sitio web se van a construir con una plantilla u otra. Pondremos algunos ejemplos, todos ellos tomados del sitio web de este curso, que permitirán entender mejor el concepto:

• Se puede crear una plantilla global de cabecera o de pie de página que se aplique a todo el sitio web. Es el caso de este curso, que utiliza sendas plantillas de cabecera y pie de página en todas sus páginas.
• Se puede crear una plantilla para artículos individuales que se aplique a todas las entradas (pero no a las páginas). En este sitio web existe una plantilla única para todas las entradas individuales, pero plantillas distintas para las páginas. Por ejemplo, la,página Contacto se ha elaborado con una plantilla notoriamente distinta a la que hemos aplicado a la página Instrucciones del curso.
• Se puede crear una plantilla de páginas de archivo que solo se aplique a la página en la que se muestra la categoría X, y diseñar otra plantilla de página de archivo para la categoría Y. De este modo, ambas páginas pueden tener un diseño distinto. No es el caso de este sitio web, cuyas páginas de archivo son todas iguales.

La biblioteca de plantillas de Elementor

Además de los tipos de plantilla que ya hemos visto, los plugins Elementor y Elementor Pro proporcionan a sus usuarios otro recurso de enorme utilidad: la biblioteca de plantillas, formada por un amplísimo catálogo de electos prediseñados, a los que se puede acceder siempre que se haya adquirido una licencia de Elementor Pro y se haya establecido una conexión entre el sitio web y una cuenta de usuario de Elementor.

Como ya hemos visto en el screencasts Inserción de plantillas con Elementor, a la biblioteca de plantillas se accede desde el editor de Elementor, para lo cual hay que hacer clic en el icono gris con forma de carpeta. Al hacerlo, se accede a una ventana modal organizada en tres áreas:

• Bloques, que contiene bloques prediseñados (una o varias secciones de Elementor).
• Páginas, con diseños de páginas completas (en el caso de los Template Kits, son diseños de temas completos, organizados en varias plantillas de pagina diferentes).
• Mis plantillas, que contiene las plantillas diseñadas por el usuario o que este haya podido importar de diversas fuentes.

Todas las plantillas de bloques y páginas están etiquetadas, lo cual permite clasificarlas por tipos, realizar búsquedas, marcarlas como favoritos, etc. además, mediante los iconos que aparecen en la parte superior de la ventana modal, se pueden importar plantillas y guardar como plantilla la página que el usuario está editando.

Cómo se utiliza la biblioteca de plantillas

Los tres vídeos que incluimos a continuación muestran cómo se utiliza esta biblioteca. Los dos primeros videotutoriales están en español, y el tercero en inglés:

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

Sitio especial para las prácticas con Elementor Pro

Elementor Pro es un plugin de pago que requiere una configuración especial por cada instalación. Esa configuración se debe realizar, separadamente, en todos y cada uno de los los sitios en los que se activa el plugin. Así pues, y para evitar tener que hacer 22 configuraciones distintas para otros tantos usuarios, hemos creado una única instalación de Elementor Pro, que será compartida por todos los participantes en el curso, incluido el profesor.

Acceso al sitio especial de prácticas

Para acceder al sitio especial de prácticas, cada alumno y alumna del curso debe iniciar sesión en su respectivo sitio. Una vez que haya entrado, podrá ver, en el ángulo superior izquierdo del escritorio de WordPress,, un enlace denominado Mis sitios. Al pasar el ratón por encima de ese enlace, se desplegará un menú con los sitios en los que está dado de alta cada usuario. Uno de esos sitios es Prácticas con Elementor, que es el escenario de las prácticas previstas en esta quinta esión. El siguiente screencast muestra el procedimiento que acabamos de describir:

Condiciones para realizar las prácticas

Las tareas que puedan llevarse a cabo en el sitio Prácticas con Elementor deben atenerse a lo dispuesto en las siguientes instrucciones:

1. Los alumnos y alumnas solo deben elaborar páginas, no entradas. El sitio ya cuenta con diez entradas creadas por el profesor del curso, que se utilizarán como base para ciertos widgets, pero que nos deben modificar.
2. Los alumnos y alumnas no deben crear plantillas por su cuenta. Las prácticas con plantillas que vamos a proponer se realizarán a partir de modelos muy sencillos, proporcionados por el profesor.
3. Para que el profesor del curso pueda saber rápidamente quién las ha elaborado, todas las páginas deberán tener como título la identidad de su autor o autora. Algo así como “Página de Eduardo Larequi García 1”, “Página de Eduardo Larequi García 2”, etc.
4. Dado que todos los alumnos y alumnas han sido dados de alta en este sitio especial con el rol de editores, tienen la capacidad de modificar no solo sus propias páginas, sino las de otros usuarios. Pues bien, cada alumno o alumna solo podrá editar, modificar o borrar sus propias páginas, a fin de no interferir con el trabajo de sus compañeros y compañeras.

Descripción de las prácticas

A continuación describimos las tareas que pensábamos encomendar a los alumnos y alumnas del curso si este no se hubiera visto interrumpido. Parte de estas prácticas se hubieran realizado durante la propia sesión, y otra parte estaba destinada a ser realizada por los asistentes como actividad práctica.

Práctica 1

El objetivo de esta primera práctica es elaborar y publicar en el sitio Prácticas con Elementor una página compuesta por al menos tres secciones de Elementor y un mínimo de tres widgets diferentes de Elementor Pro, que se elegirán de entre los siguientes:

1. Widget de titular animado. Se deja la selección del estilo y los efectos de este widget a criterio de los participantes en el curso.
2. Widget de carrusel de elementos multimedia. Con este widget se debe elaborar un carrusel de imágenes, que tendrá un máximo de cinco elementos. Aconsejamos utilizar para ello las imágenes ya existentes en la biblioteca multimedia, lo cual ahorra el trabajo de tener que subirlas.
3. Widget de galería de imágenes. Hay que crear una galería de fotos elegantes y vistosa, con al menos seis imágenes. La elección del estilo las opciones y los efectos se deja a criterio de los participantes en el curso.
4. Widget de llamada a la acción. Se puede utilizar cualquier combinación de las opciones que ofrece este widget.
5. Widget de entradas. Con este widget hay que componer una cuadrícula simétrica, con un máximo de diez entradas, ya que este es el número de entradas publicadas en el sitio especial de prácticas.
6. Widget de caja volteada. Se puede utilizar cualquier combinación de las opciones que ofrece este widget.
7. Widget de pase de diapositivas. Si se opta por este widget, habrá que Elaborar un mínimo de cuatro diapositivas, con las opciones que a cada alumno o alumna le parezcan más convenientes.
8. Widget de cuenta atrás. Se deberá elaborar un contador que establezca el tiempo que queda para la declaración del final de la epidemia de coronavirus.

Además de los citados, pueden utilizarse todos los widgets de Elementor o Elementor Pro que cada alumno o alumna considere más apropiados o convenientes para su diseño. No obstante, se recomienda que las páginas no sean muy largas ni demasiado complejas, con el fin de evitar dificultades innecesarias de elaboración y un tiempo de carga excesivo.

Práctica 2

El objetivo de esta segunda práctica es aprender a utilizar el sistema de plantillas de Elementor y Elementor Pro. Con tal propósito, el profesor del curso ha creado dos plantillas y un widget global, que están disponibles para cualquiera de los participantes en el curso:

1. Plantilla Aviso rojo.
2. Plantilla Maldito Covid-19.
3. Widget global Qué haremos cuando volvamos a la normalidad.

Los alumnos y alumnas pueden elaborar y publicar en el sitio Prácticas con Elementor una nueva página, diferente a la creada en la práctica 1, o bien pueden añadir a dicha página los siguientes componentes:

• Las plantillas Aviso rojo y Maldito Covid-19 que se insertarán mediante sus correspondientes shortcodes, o mediante el widget de plantillas. El procedimiento para conseguirlo está explicado en este artículo de la documentación oficial de Elementor.
• El widdget global Qué haremos cuando volvamos a la normalidad, que también se insertará en la misma página. El procedimiento para conseguirlo está explicado en este artículo de la documentación oficial de Elementor.

Práctica 3

Para esta quinta sesión del curso habíamos previsto la realización de algunas prácticas con plantillas globales y con el constructor de temas de Elementor Pro. Lamentablemente, la suspensión de las dos ultimas sesiones, a causa de la epidemia de coronavirus, impide que podamos hacer demostraciones de estas funcionalidades, que son las más complicadas de describir, pero también las más interesantes y potentes del plugin de pago.

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

Dadas las excepcionales circunstancias que afectan a este curso, hemos considerado que la realización de las prácticas descritas en este artículo debe ser totalmente voluntaria; además, no es necesario que los alumnos y alumnas comuniquen al profesor el trabajo que hayan podido realizar. Por supuesto, pueden hacer las tareas descritas y enviarlas al profesor, si así lo desean, mediante el procedimiento habitual.

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