0.3 · Descubrir el editor

Nivel 0 · Primeros pasos e instalación

0.3Descubrir el editor

Objetivo: orientarte en el editor de Elementor (vista previa, panel, navegador, ajustes) y dominar el flujo arrastrar → seleccionar → configurar.
Tiempo estimado: 12 min · lectura autónoma · Si solo tienes 5 min: lee «Lo esencial en 30s» + el esquema.

Lo esencial en 30 segundos

  • Lienzo = la zona de vista previa donde ves y construyes la página en directo.
  • Panel (a la izquierda) = o bien la biblioteca de widgets (para arrastrar), o bien los ajustes del elemento seleccionado.
  • Flujo básico: arrastrar un widget → seleccionarlo → configurarlo (en el panel).

Hilo conductor — Nadia abre el editor

Nadia hace clic en "Editar con Elementor" en la página de inicio del carpintero. La pantalla se divide: un panel a la izquierda, la página en el centro. Al principio busca las cosas, hace clic por todas partes. Esta sección le da el mapa: dónde soltar, dónde configurar, cómo encontrar un elemento perdido en una maquetación recargada.

Continúa el caso 0.2 — Nadia pasa de instalar a construir.

1. El mapa del editor

El editor tiene dos zonas. El lienzo (vista previa) ocupa el centro: es la página tal como aparecerá, construida en directo. El panel (a la izquierda) tiene dos caras: o bien la biblioteca de widgets que arrastras al lienzo, o bien los ajustes del elemento seleccionado en ese momento. Alternas entre ambas según añadas un elemento o lo configures.

En la parte inferior del panel, las herramientas: biblioteca de plantillas, Navegador (navegación por la estructura), vista previa responsive, historial, guardar/publicar. El Navegador es valioso cuando la página se complica: lista todos los contenedores y widgets en un árbol.

2. El flujo básico

El gesto fundamental se repite para todo: ARRASTRAR un widget del panel al lienzo → SELECCIONARLO (clic) → CONFIGURARLO en el panel. Nadia arrastra un widget Título, hace clic en él y el panel muestra al instante sus ajustes (contenido, estilo, avanzado).

Cuando un elemento está "perdido" en una maquetación recargada, el Navegador permite encontrarlo y seleccionarlo por su nombre en el árbol, sin buscar a clics. Es uno de los primeros reflejos de comodidad que conviene adquirir.

Error frecuente de interpretación: "El panel de la izquierda es solo un menú fijo". No: cambia según el contexto — biblioteca de widgets al añadir, ajustes del elemento al seleccionar. Entender este doble papel evita sentirse perdido.
Flujo básico en el editor de Elementor Arrastrar un widget del panel al lienzo, seleccionarlo y luego configurarlo en el panel. Arrastrar (panel → lienzo)Soltar el widget → SeleccionarClic en el elemento → Configurar (panel)Contenido, Estilo, Avanzado Navegador: encontrar un elemento en una página recargada.
Arrastrar → Seleccionar → Configurar: el gesto que se repite para todo.
Versión en texto del esquema (SEO / lectores de pantalla / traducción): 1) Arrastrar un widget del panel al lienzo. 2) Seleccionarlo con un clic. 3) Configurarlo en el panel (pestañas Contenido/Estilo/Avanzado). El Navegador lista contenedores y widgets en un árbol para encontrar un elemento. Lección: el panel cambia de papel (biblioteca ↔ ajustes).

🔎 Ejemplo concreto — Colocar un primer título (caso Nadia)

1. Panel → buscar "Título" → arrastrar al lienzo.
2. Clic en el título → el panel muestra sus ajustes.
3. Pestaña Contenido: escribir "Carpintería Benali".
→ ¿Necesitas encontrar un botón perdido más abajo? Abre el Navegador.

Resultado: sabes añadir y configurar cualquier elemento.

Lección: el Navegador ahorra mucho tiempo en páginas recargadas.

Vocabulario de la sección

Editar con Elementor
El botón (desde una página/entrada) que abre el editor visual.

Ejemplo sencillo: Nadia hace clic en "Editar con Elementor" en la página de inicio.

Lo que no es: quedarse en el editor clásico de WordPress (Gutenberg).

Reflejo: para diseñar visualmente, abre el editor de Elementor.

Lienzo (vista previa)
La zona central donde ves y construyes la página en directo, tal como aparecerá.

Ejemplo sencillo: Nadia ve el título aparecer justo tras configurarlo.

Lo que no es: imaginar el resultado sin verlo, como en código.

Reflejo: lo que está en el centro y parece la página = el lienzo.

Panel
El panel de la izquierda: biblioteca de widgets para arrastrar, o ajustes del elemento seleccionado.

Ejemplo sencillo: el panel pasa de widgets a ajustes cuando Nadia selecciona un título.

Lo que no es: creer que el panel es un menú fijo.

Reflejo: añado → biblioteca; selecciono → ajustes.

Navegador (estructura)
El árbol de contenedores y widgets de la página, para navegar y seleccionar por estructura.

Ejemplo sencillo: Nadia encuentra un botón enterrado haciendo clic en él en el Navegador.

Lo que no es: buscar a clics un elemento en una página muy recargada.

Reflejo: elemento no encontrado a clics → abre el Navegador.

Flujo básico
Arrastrar un widget → seleccionarlo → configurarlo: el gesto repetido para cada elemento.

Ejemplo sencillo: Nadia aplica el mismo flujo a un título, una imagen, un botón.

Lo que no es: buscar un método distinto para cada tipo de widget.

Reflejo: siempre: arrastrar, seleccionar, configurar.

En la práctica — Orientarse en el editor

  1. Abre una página con "Editar con Elementor".
  2. Arrastra un widget Título al lienzo y luego selecciónalo.
  3. Localiza las tres pestañas de ajustes (Contenido, Estilo, Avanzado).
  4. Abre el Navegador y localiza la estructura de la página (contenedores, widgets).
Sabes añadir, seleccionar y configurar un elemento, y encontrar cualquier elemento con el Navegador.

Guion listo para decir — mostrar el editor al cliente (30 s)

"Este es el editor: en el centro, su página de verdad; a la izquierda, o la lista de elementos para añadir, o los ajustes del elemento en el que hice clic. Construyo en directo, usted ve el resultado al momento. Nada se publica hasta que hago clic en Publicar."

Tranquiliza: el borrador no está en línea hasta publicar.

Plantilla para copiar y pegar — puntos de referencia del editor

ABRIR: botón "Editar con Elementor"
LIENZO: zona central (vista previa en directo)
PANEL IZQUIERDO: biblioteca (añadir) O ajustes (configurar)
FLUJO: arrastrar → seleccionar → configurar
ENCONTRAR UN ELEMENTO: Navegador (árbol de estructura)
PUBLICAR: botón verde en la parte inferior del panel

Página sencilla

Pocos elementos: basta con hacer clic directamente, el Navegador es opcional.

Página recargada

Muchos contenedores anidados: el Navegador se vuelve esencial para seleccionar con precisión.

Pantalla estrecha

Contrae el panel para ver el lienzo grande, luego reábrelo para configurar.

Trabajo en equipo

Nombrar los contenedores en el Navegador ayuda al equipo a orientarse.

✓ Buenas prácticas

  • Memoriza el flujo arrastrar → seleccionar → configurar.
  • Usa el Navegador en páginas recargadas.
  • Publica solo cuando estés satisfecho (el borrador no está en línea).

✗ Errores frecuentes

  • Buscar a clics un elemento en vez de abrir el Navegador.
  • Olvidar que el panel cambia de papel según el contexto.
  • Creer que los cambios están en línea antes de publicar.

Puntos clave

  • Lienzo = vista previa en directo; panel = biblioteca o ajustes.
  • Flujo básico: arrastrar → seleccionar → configurar.
  • Navegador = árbol de estructura para encontrar un elemento.
  • Nada se publica hasta hacer clic en Publicar.

Reto 48h — aplica mañana

Abre una página en Elementor, añade un título, una imagen y un botón con el flujo arrastrar → seleccionar → configurar, luego encuentra cada uno en el Navegador. 15 minutos, sin publicar.

Lista de salida de la sección
  • Sé abrir el editor y localizar lienzo y panel.
  • Aplico el flujo arrastrar → seleccionar → configurar.
  • Encuentro un elemento con el Navegador.
Autoevaluación 1-5: ¿me oriento en el editor?¿uso el Navegador cuando la página se recarga?

Preguntas frecuentes

¿Mis cambios están en línea de inmediato?

No: trabajas sobre un borrador. Nada se publica hasta que haces clic en "Publicar" (o "Actualizar").

Ya no encuentro un elemento, ¿qué hago?

Abre el Navegador (icono de estructura en la parte inferior del panel): lista todos los contenedores y widgets en un árbol; haz clic en el elemento para seleccionarlo.

¿Puedo deshacer una acción?

Sí: el historial (en la parte inferior del panel) permite deshacer/rehacer y volver a estados anteriores de la página.

Comprueba tu comprensión — escenario

En una página de inicio muy recargada, Nadia ya no encuentra el botón "Solicitar presupuesto". ¿Cuál es el reflejo correcto?

Recursos adicionales (opcional, para ir más allá)

Examen del nivel 0Preguntas inéditas y más difíciles para validar tus conocimientos