Widgets adicionales

La lista de widgets exclusivos de Elementor Pro es casi interminable, razón por la cual nos limitaremos a presentar aquí algunos de los más interesantes, que hemos ordenado alfabéticamente. Todos los widgets están enlazados con la documentación original del plugin (en inglés); además, aquellos widgets que hemos utilizado en la elaboración de este sitio web se identifican, y en algunos casos también se enlazan, con al menos una página que demuestra su uso.

1. Botones para compartir. Hemos utilizado este widget para crear la batería de iconos de compartir en redes sociales que aparece bajo el contenido de cada una de las entradas de este sitio web.
2. Cajas volteadas (flip boxes). Las cajas volteadas o flip boxes de la página principal de este sitio han sido creadas con este widget.
3. Carrusel de elementos multimedia.
4. Carrusel de testimonios.
5. Cuenta atrás. Este widget lo hemos utilizado en la página de Modo de mantenimiento, que solo estuvo visible durante la fase de construcción de este sitio web.
6. Diapositivas.
7. Formularios. El potentísimo widget de formularios de Elementor nos ha permitido crear el formulario de la página Contacto.
8. Llamada a la acción.
9. Portfolio.
10. Menu de navegación. La plantilla de cabecera global de este sitio incluye un widget de menú de navegación, que hemos utilizado para crear el menú del sitio.
11. Tabla de contenidos. El primer widget de la barra lateral de todas las entradas de este sitio web ha sido creado con este widget, mediante el cual se pueden generar tablas de contenidos a partir de los titulares insertados en los artículoS.
12. Titulares animados.

Widgets de contenido dinámico

Los widgets de contenido dinámico de Elementor Pro permiten crear plantillas globales aplicables a entradas, páginas, páginas de archivo, etc. Cuando, por ejemplo, se utiliza un widget dinámico de título de entrada en una plantilla, este elemento se sustituye, en cada una de las entradas del sitio, por el título de la entrada.

El plugin Elementor Pro dispone de una completa batería de widgets de contenido dinámico, muchos de los cuales hemos utilizado en la elaboración de las plantillas de entradas, páginas y páginas de archivo con las que hemos construido este sitio web:

• Entradas.
• Entradas de página de archivo.
• Mapa del sitio.
• Widgets de entradas individuales:
  • Título de entrada.
  • Metadatos de entrada.
  • Resumen de entrada.
  • Contenido de entrada.
  • Imagen destacada.
  • Formulario de búsqueda.
  • Caja de autor.
  • Comentarios de entrada.
  • Navegación por las entradas.
  • Migas de pan.

Constructor de temas

Una de las funcionalidades más interesantes de Elementor Pro es lo que se conoce como theme builder, o constructor de temas, mediante el cual se pueden construir temas completos, formados a su vez por distintos tipos de plantillas. Con esta funcionalidad es posible llevar el diseño de un sitio web a un nivel de personalización absoluto. De algunos aspectos de esta funcionalidad nos ocuparemos en el artículo sobre las plantillas de Elementor.

La biblioteca de plantillas

Una vez que se activa el plugin Elementor Pro y se conecta con una cuenta autorizada, el usuario ya tiene acceso completo a la biblioteca de plantillas, que no es otra cosa que un enorme repositorio de diseños de gran calidad, perfectamente estructurados y organizados, mediante los cuales se pueden crear sitios web muy elegantes en muy poco tiempo. Dada la importancia de esta funcionalidad, vamos a dedicarle un artículo específico en esta sesión.

Nuevas funcionalidades del plugin Elementor Pro

La reciente versión 2.9 de Elementor Pro ha incorporado tres nuevas funcionalidades que aumentan todavía más las ya excepcionales capacidades de este plugin con respecto al diseño global de un sitio web:

• Edición global de sitios web, mediante la cual se pueden diseñar todas las plantillas globales (de cabecera, de pie de página, de entrada, etc.) en una única operación.
• Colores dinámicos, que permiten crear rápidamente distintas variantes de un mismo diseño.
• CSS personalizado global, que sirve para definir estilos CSS globales que modifican la apariencia de todo un sitio web.

Estas nuevas funcionalidades complementan y mejoran la de estilos del tema, que se incorporó a la versión 2.9 de Elementor a principios del mes de febrero.

La entrada El plugin Elementor Pro 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.

Widgets del constructor de temas

Los widgets del constructor de temas de Elementor Pro son bloques que cargan fragmentos de contenido dinámicos, correspondientes a los diversos elementos estructurales de los artículos y de los temas de WordPress, como vamos a ver a continuación.

Widgets de la categoría “sitio”

Todos los widgets de esta categoría permiten cargar parámetros importantes de la configuración de WordPress:

1. El widget de logotipo del sitio carga la imagen de logotipo del sitio, tal como haya sido definido en el personalizador de temas de WordPress.
2. Con el widget de título del sitio se puede incluir el título del sitio que haya sido establecido en la página de ajustes generales de WordPress.
3. El widget de título de página sirve para incluir el título de la página que ha sido asignado desde el editor de WordPress.
4. El widget de menú de navegación permite cargar cualquiera de los menús configurados en la página de menús de WordPress.
5. Gracias al widget de formulario de búsqueda es posible incluir un formulario estándar de búsqueda de WordPress.
6. Mediante el widget de mapa del sitio se puede añadir a cualquier artículo un completo mapa HTML del contenido del sitio web.
7. El widget de migas de pan (breadcrumbs) permite añadir a las páginas del sitio rutas de navegación, que son muy útiles para guiar a los visitantes y reforzar la coherencia interna del sitio web. Para que este. widget funcione correctamente, es imprescindible que esté instalado y activado el plugin Yoast SEO.

Widgets de la categoría “individual”

Todos los widgets de esta categoría comparten una funcionalidad común, ya que sirven para añadir dinámicamente los elementos constitutivos de un artículo, y por tanto permiten crear plantillas de artículos individuales. Estos widgets son los siguientes:

1. El título.
2. El resumen o extracto.
3. La imagen destacada.
4. La tabla de contenidos.
5. La caja de información sobre el autor.
6. Los comentarios del artículo.
7. La navegación por los artículos.
8. Los metadatos de los artículos.

Videotutoriales sobre el constructor de temas

El funcionamiento del constructor de temas y de los widgets que acabamos de ver es difícil de explicar sin la ayuda de referencias y demostraciones visuales. Afortunadamente, los responsables de la documentación de Elementor han publicado una serie de excelentes videotutoriales (todos ellos en inglés), que permiten comprender cómo se crean los elementos constitutivos de un tema: la cabecera, el pie de página, las plantillas de entradas, de páginas de archivo, de resultados de búsqueda y de página de error 404 (página no encontrada).

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