0.3Descubrir el editor
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.
🔎 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
- Abre una página con "Editar con Elementor".
- Arrastra un widget Título al lienzo y luego selecciónalo.
- Localiza las tres pestañas de ajustes (Contenido, Estilo, Avanzado).
- Abre el Navegador y localiza la estructura de la página (contenedores, widgets).
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.
- Sé abrir el editor y localizar lienzo y panel.
- Aplico el flujo arrastrar → seleccionar → configurar.
- Encuentro un elemento con el Navegador.
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.
En una página de inicio muy recargada, Nadia ya no encuentra el botón "Solicitar presupuesto". ¿Cuál es el reflejo correcto?