Cuando haces clic en “Editar con Elementor”, se abre una interfaz visual que te permite diseñar tu página fácilmente. Aquí te explicamos qué ves en pantalla y para qué sirve cada parte.
1. Panel izquierdo (widgets)
En este panel encontrarás todos los elementos que puedes usar en tu diseño: encabezados, imágenes, botones, formularios, etc.
Solo debes arrastrar el widget que necesites y soltarlo dentro de tu página.
También desde aquí puedes cambiar las opciones de cada widget al seleccionarlo.
2. Vista previa en vivo (zona central)
Esta es la parte principal del editor. Aquí es donde ves tu página tal como se verá al publicarla.
Puedes hacer clic sobre cualquier elemento para editarlo, moverlo, duplicarlo o eliminarlo.
3. Barra superior (controles globales)
En la parte superior se encuentran herramientas importantes:
-
Menú de Elementor (≡): acceso al historial, ajustes del sitio, plantillas y más.
- Estructura: aparece en la parte derecha por defecto. Al hacer clic, se despliega el panel de capas, donde puedes ver la jerarquía completa de tu diseño: secciones, columnas, contenedores y widgets. Puedes usarlo para seleccionar, reordenar o ubicar fácilmente cualquier elemento dentro de la página.
- Ajustes del sitio: define estilos globales para todo tu sitio, como tipografías, colores, botones y fondos. Ideal para mantener coherencia visual sin tener que editar cada elemento uno por uno.
-
Vista responsive: para ver cómo se ve tu diseño en computador, tablet o celular.
-
Configuración del documento (ícono de engranaje): título, estado, imagen destacada, etc.
-
Vista previa (ícono del ojo): abre tu página en una nueva pestaña para verla.
-
Botón púrpura “Publicar” o “Actualizar”: guarda los cambios realizados.
Este entorno está diseñado para que puedas construir tu página sin tener que cambiar de pantalla ni usar código. Todo lo que ves, lo puedes mover o editar con unos pocos clics.
En el siguiente capítulo aprenderás cómo construir la estructura de tu página utilizando secciones, columnas y contenedores.
