Panel de edición de Elementor

Elementor selecciona las páginas y entradas que son los tipos de contenido que vienen por defecto cuando instalamos WordPress.

1. Acceder al panel de edición de Elementor

Comencemos a trabajar con las páginas. Para acceder al panel de edición de Elementor de una página tenemos que dirigirnos al apartado Páginas y accedemos a cualquier página que queramos editar.

En el editor de la página, veremos el botón Editar con Elementor en la parte superior de la página. Hacemos clic en este botón para acceder al editor de Elementor. Cada página o entrada tendrá su propio panel de edición.

Otra forma de acceder al panel de edición de Elementor es directamente desde el apartado Páginas (o Entradas). Para esto es necesario haber accedido, al menos una vez, a la página o entrada.

Al acceder a una página (o entrada) con Elementor, se creará en el título de la página o entrada una etiqueta (Elementor) y un enlace adicional (Editar con Elementor) desde el cual podemos acceder al panel de edición de Elementor sin necesidad de acceder primero a la página o entrada.

Haciendo clic en el enlace Editar con Elementor accederemos directamente al panel de edición de la página o entrada. Otra alternativa es en cada página podemos visualizar un titulo Editar con Elementor

2. Opciones del panel de edición de Elementor

Elementor se compone de 2 apartados principales:

1. Panel de Elementor: se encuentra ubicado al lado izquierdo de la pantalla. Contiene los widgets y las opciones de configuración de toda la página o entrada.
2. Área de contenido: se encuentra ubicado al lado derecho de la pantalla y es donde se ubicará el contenido de la página o entrada mediante secciones, columnas y widgets

2.1 Elementos (widgets)

En esta pestaña se encuentran todos los elementos que podemos utilizar en el área de contenido. Estos elementos también se conocen como widgets y así les llamaremos a partir de ahora durante todo el desarrollo del curso.

Una de las características que ha hecho a Elementor tan popular, es que los widgets son de arrastrar y soltar (lo que se conoce como Drag & Drop) convirtiéndolo en un plugin bastante versátil y fácil de utilizar.

Haciendo clic en el icono superior derecho podemos acceder siempre a esta pestaña para utilizar los widgets.

Los widgets que actualmente componen Elementor son:

• BÁSICO: Son los widgets básicos de un sitio web: encabezados, editor de texto, imagen, vídeo entre otros.
• PRO: Son widgets avanzados que están solo disponibles al instalar Elementor PRO.
• GENERAL: Son widgets con funciones complementarias de Elementor: galería y carrusel de imágenes, pestañas, acordeón entre otros.
• SITIOS: Son widgets dinámicos que están solo disponibles al instalar Elementor PRO.
• WOOCOMMERCE: Son widgets para tiendas online con WooCommerce que están solo disponibles al instalar Elementor PRO.
• WORDPRESS: Son los widgets nativos de WordPress y se pueden insertar en el área de contenido de una página o entrada.

2.2 Global

En esta pestaña, disponible solo con Elementor PRO, podemos crear widgets personalizados, guardarlos y luego utilizarlos en otra página o entrada.

Esta característica es muy útil cuando queremos que un widget se repita en todo el sitio web. Por ejemplo: un botón personalizado, un formulario de contacto o cualquier widget que queramos utilizar.

2.3 Menú principal

Podemos acceder al menú principal desde el icono superior izquierdo . Desde este apartado podemos configurar las opciones generales de Elementor en cada página o entrada.

2.3.1 Menú principal

• DISEÑO DEL SISTEMA: En este apartado, Elementor nos ofrece algunas opciones para personalizar los estilos de todo nuestro sitio web como colores globales y fuentes globales que por defecto se utilizaran para cada widget.
• ESTILO DEL TEMA: En esta opción nos permitira modificar las configuraciones por defecto del tema que estemos utilizando para poder gestionarlo todo desde un mismo lugar.
• AJUSTES: Podemos configurar los ajustes globales (para cada página o entrada) o los ajustes generales (para todo el sitio web).

Otra opción interesante que ofrece Elementor es el Buscador. Con este buscador podemos buscar cualquier cosa dentro de nuestro sitio web como páginas, entradas, plantillas o cualquier tipo de contenido que se pueda editar con Elementor.

2.4 Herramientas adicionales

Las herramientas adicionales se encuentran en la parte inferior del panel de Elementor. Estas herramientas nos ayudarán en el diseño y configuración de la página o entrada.

• Ajustes: Podemos acceder a este apartado desde el icono . Desde este apartado podemos configurar las opciones generales de la página como si lo hiciéramos desde el editor de la página o entrada en WordPress.
• Navigator: Podemos acceder a este apartado desde el icono . Esta característica de Elementor resulta muy interesante ya que mostrará un menú, en capas, de todos los elementos que se encuentran configurados en el área de contenido.

Como puedes apreciar en la imagen, cada widget que se añade con Elementor, se encuentra en una columna y esta, a su vez en una sección.

Al activar Navigator, Elementor nos muestra un “arbol” de todos los widgets y sus contenedores en orden jerárquico.

Esta herramienta es muy útil cuando tenemos una página con muchos widgets. Es mucho más sencillo navegar con el Navigator que hacer scroll por toda la página.

• Historial: Podemos acceder a este apartado desde el icono . Con esta herramienta podemos regresar uno o varios pasos atrás si nos hemos equivocado haciendo algún cambio. Por ejemplo, si hemos borrado un widget y, ha sido por error, accedemos al historial y restauramos el widget.
• Modo adaptable: Podemos acceder a este apartado desde el icono . Con esta herramienta, Elementor muestra una vista previa de la página o entrada en cualquier tipo de dispositivo: escritorio (PC), tableta y móvil.

Esta característica de Elementor es realmente impresionante ya que permite realizar 3 diseños diferentes del mismo sitio web.

• Previsualizar cambios: Podemos acceder a este apartado desde el icono . Muestra una vista previa de los cambios antes de actualizar la página. Es una herramienta muy útil cuando estamos trabajando en borrador y queremos ver cómo está quedando el diseño antes de guardar los cambios.
• Publicar/Actualizar: Una vez finalicemos todos los cambios en la página o entrada, tendremos que guardarlos. Elementor ofrece 3 opciones:
  • Guardar borrador: Solo es útil cuando la página o entrada aún no se encuentra publicada. Si no hemos finalizado el diseño, podemos guardar un borrador y luego continuar actualizando el contenido.
  • Guardar como plantilla: Si hemos finalizado el contenido de la página o entrada, podemos guardarlo como una plantilla y luego cargar todo el contenido en otra página o entrada.
  • Publicar/Actualizar: Con esta opción, podemos publicar los cambios (si es una página o entrada nueva) o actualizar los cambios (si ya existe).

• Ocultar/Mostrar panel: En el panel de Elementor, se encuentra una pestaña que sobresale en el lateral derecho. Haciendo clic en esta pestaña, el panel de Elementor se esconderá y podremos ver los cambios hechos en la página o entrada en tiempo real. Luego podemos volver a hacer clic en esta pestaña (solo se esconde el panel de Elementor) para continuar editando el contenido.

2.5 Área de contenido

Para añadir nuevos widgets o plantillas con Elementor, en el área de contenido, veremos un recuadro con el texto Arrastra aquí el widget.

Simplemente seleccionamos el widget que queramos y lo arrastramos al recuadro. Se añadirá el nuevo widget al área de contenido y, en el panel principal, podremos configurar todas las opciones del widget.

De esta forma se añadirá el widget en 1 sección con 1 columna y se irán ubicando verticalmente en el área de contenido. Pero, ¿que pasa si queremos añadir widgets horizontalmente?

Para hacerlo, tenemos que elegir primero una estructura. En el recuadro Arrastra aquí el widget, hacemos clic en el botón .

Veremos lo siguiente:

En la imagen anterior podemos apreciar las estructuras de una sección que Elementor ofrece por defecto.

Al seleccionar una estructura, Elementor añadirá una nueva sección divida en varias columnas (según la configuración que hayamos elegido) y, en cada columna, podremos añadir widgets en formato horizontal.

Gracias a esta configuración de columnas es que se consigue el diseño responsivo de un sitio web.

2.6 Biblioteca de Elementor

Una de las grandes bondades que posee Elementor, es su biblioteca de recursos. Esto es algo por lo que ha ganado tanta popularidad y es el editor de contenidos favorito de muchos desarrolladores (el mío sin duda ).

Para acceder a este apartado, hacemos clic en el icono ubicado en el recuadro Arrastra aquí el widget del área de contenido.

La biblioteca está dividida en 3 apartados:

• Bloques: Son secciones prediseñadas, con widgets y columnas, tales como llamadas a la acción, preguntas frecuentes, portadas, contacto entre otros para utilizarlas en un sitio web. Una vez las insertemos, podemos modificarlas cambiando el texto, imágenes, colores, fuentes y cualquier cosa que necesitemos adaptar al diseño de nuestro sitio web.
• Páginas: Son plantillas prediseñadas (algo así como demos) que podemos insertar en cada una de las páginas o entradas. Una vez las insertemos, podemos modificarlas al igual que los bloques.
• Mis plantillas: Cuando creamos nuestras propias plantillas, en este apartado es donde podemos encontrarlas para insertarlas en las páginas y entradas.