Una vez presentados los plugins Elementor y Elementor Pro, y tras haber aconsejado a nuestros alumnos y alumnas sobre la forma más sensata y eficiente de utilizar ambos plugins, es el turno de describir el funcionamiento del interfaz de edición de Elementor, pieza clave de estos dos complementos. Para ello utilizaremos nuestros propios screencasts, que complementaremos, allí donde lo consideremos necesario, con tutoriales y videotutoriales previamente publicados en la Red.
Edición con Elementor
Para editar una entrada o página con Elementor, hay que hacer lo siguiente: desde los menús Entradas o Páginas, pulsar en la opción Añadir nueva y, a continuación, hacer clic sobre el botón azul Editar con Elementor. En caso de que ya se haya guardado algún artículo elaborado con Elementor, WordPress mostrará esta circunstancia en las listas de entradas y páginas, y nos ofrecerá la opción de editarlas con dicho plugin.
Los dos procedimientos antedichos se muestran en el siguiente screencast:
El interfaz de edición de Elementor
Cuando editamos un artículo con Elementor, abandonamos el editor normal de WordPress, y accedemos a un nuevo editor que tiene un aspecto totalmente diferente. Este nuevo editor está dividido en dos áreas claramente diferenciadas: el área de configuración y propiedades, a la izquierda, y el área de edición del contenido, a la derecha.
Es posible ocultar completamente el área de propiedades si se arrastra el manejador que aparece entre ambas áreas (una flecha sobre un rectángulo vertical rojo) hasta el extremo izquierdo de la pantalla, lo cual permite convertir el editor en un verdadero sistema de edición WYSIWYG.
Todo ello se puede ver en el siguiente screencast:
Área de configuración y propiedades
El área izquierda del editor de Elementor está dividida, a su vez, en varias zonas, a saber:
Zona superior
En esta primera zona aparecen dos iconos:
- Icono de hamburguesa, que da acceso a diversas opciones de configuración de Elementor, del artículo que está siendo editado o de los elementos de diseño, según las circunstancias de edición.
- Icono de cuadrícula o rejilla; cuando se hace clic sobre él accedemos a la lista completa de todos los elementos o widgets de Elementor (y también de WordPress), que se pueden arrastrar sobre la zona de edición.
Zona central
Esta zona ocupa la mayor parte de la altura de la pantalla. En ella aparecen todos los widgets o elementos de diseño disponibles, que se pueden arrestar sobre la zona de edición.
Zona inferior
Cuenta con un menú desplegable de color verde, que permite guardar un artículo como borrador o plantilla, y también publicarlo, y otros cinco iconos, correspondientes a otras tantas funcionalidades. De izquierda a derecha, son los siguientes:
- Icono de engranaje, mediante el cual se accede a la configuración del artículo que está siendo editado.
- Icono de hojas apiladas, que da acceso al navegador de página. Su función es muy parecida al navegador de bloques de WordPress, es decir, mostrar la estructura de los elementos que forman el artículo..
- Icono de flecha circular que gira sobre si misma: sirve para acceder al historial de edición, mediante el cual se pueden deshacer cambios, recuperar versiones antiguas de un artículo, etc.
- Icono de pantalla, símbolo del modo adaptable. Mediante esta herramienta podemos comprobar el diseño del artículo en tres tipos de dispositivos diferentes: ordenadores de escritorio, tabletas y teléfonos móviles.
- Icono con forma de ojo. Al pulsar sobre él se abre una nueva ventana o pestaña que sirve para previsualizar el diseño del artículo que está siendo editado.
El siguiente screencast muestra el funcionamiento del área izquierda del editor de Elementor.
Área de edición
El área de edición es un gran espacio en blanco solo interrumpido por dos iconos encerrados en una caja con borde punteado. Estos iconos tienen las siguientes funciones: el icono con forma de cruz sobre un círculo rojo sirve para añadir secciones de página, mientras que el icono con forma de carpeta sirve para añadir plantillas.
Esta área en blanco es el principal escenario de uso de los plugins Elementor y Elementor Pro, ya que sobre ella se pueden arrastrar y soltar, mover, copiar, pegar, borrar y reordenar los elementos de diseño que ofrecen ambos plugins.
En los siguientes artículos de esta sección y de la próxima veremos cómo funciona el área de edición de Elementor.
El Finder de Elementor
Una vez instalado Elementor, existe una función de búsqueda y acceso rápido a todos sus componentes (el denominado finder), que se puede invocar desde el propio Elementor, desde el backend de WordPress e incluso desde el frontend, siempre, claro está, que el usuario haya iniciado sesión.
Para activar el finder de Elementor, basta con pulsar la combinación de teclas Ctrl+E en Windows, o CMD+E en Mac. El artículo Introducing Finder: The Easiest Way to Switch Between Pages explica detalladamente cómo utilizar esta función, que resulta sumamente útil para agilizar todos los procesos de edición en los que interviene Elementor. Una demostración básica de su funcionamiento puede verse en el screencast que incluimos a continuación.
3 comentarios