Lección 2.3: La Barra Superior — Ícono por Ícono
Si la barra lateral izquierda es tu cinturón de herramientas, la barra superior es el tablero de control del avión. Desde aquí controlas cómo ves tu trabajo, en qué dispositivo lo estás previsualizando, cuándo guardas y cuándo sales. No construyes nada con ella — pero sin entenderla, trabajas a ciegas.
El mapa completo de la barra superior
Basado exactamente en lo que ves en tus capturas:
La barra tiene tres zonas:
- 📍 Izquierda: configuración y vista
- 📍 Centro: dispositivos y dimensiones
- 📍 Derecha: guardar y salir
ZONA IZQUIERDA
[ ⚙ ] Ajustes del Visual Builder
Es la configuración interna del editor en sí mismo. No toca tu web — configura cómo se comporta el editor.
Qué encuentras dentro:
- → Tamaño del panel derecho (más ancho o más estrecho)
- → Posición del panel (derecha o izquierda)
- → Velocidad de las animaciones del editor
- → Opciones de accesibilidad del builder
¿Cuándo lo usas? Si trabajas en una pantalla pequeña y el panel derecho ocupa demasiado espacio, aquí lo ajustas. La mayoría del tiempo lo dejarás como está.
[ Main Canvas ▼ ] Selector de Canvas
Muestra en qué «lienzo» estás trabajando ahora mismo.
Normalmente siempre dirá «Main Canvas» — el lienzo principal donde está tu página o plantilla.
La flechita ▼ abre un menú desplegable con todos los Canvases que tengas creados:
- → Main Canvas (la página)
- → Canvas 1: Popup de Citas
- → Canvas 2: Menú móvil
Así puedes saltar de un canvas a otro sin perder lo que estabas haciendo. Por ahora siempre estará en «Main Canvas» — no lo toques.
[ ⊞ ] Vista Wireframe — ver el esqueleto de la página
Este ícono cambia completamente cómo se ve el lienzo.
- Vista normal: ves tu página con imágenes, colores, textos reales — como la ve el visitante.
- Vista wireframe: ves solo la estructura — cajas grises, sin colores, sin imágenes — como el plano de un arquitecto.
Cuando tu página tiene mucho contenido y quieres ver la estructura limpia sin distracciones visuales.
Ejemplo real: Tienes una página con 5 secciones, imágenes grandes y colores fuertes. Quieres reorganizar las secciones. Activas wireframe → todo se vuelve gris y limpio → arrastras las secciones de lugar fácilmente → desactivas wireframe → vuelves a la vista normal.
Clic una vez: activa wireframe / Clic otra vez: vuelve a la vista normal.
ZONA CENTRAL
Esta es la zona más importante del día a día. Aquí controlas en qué dispositivo estás viendo tu diseño.
[ ··· ] Menú de opciones extra
Tres puntitos — opciones adicionales del builder:
- → Importar / Exportar la página completa
- → Copiar la página a otro sitio
- → Opciones de descarga del layout
No lo usarás seguido hasta que tengas más experiencia.
[ □ ] [ 📱 ] [ 📲 ] Los tres dispositivos
Estos tres íconos son de los más importantes para cualquier diseñador web moderno. Hoy más del 60% de las visitas vienen desde el celular. Tu web tiene que verse bien en los tres.
[ □ ] ESCRITORIO — Desktop
Vista en computadora o laptop. Es la vista por defecto cuando abres el builder. Todo lo que diseñas aquí es la base.
[ 📱 ] TABLET
Vista en tableta (iPad, etc.). El lienzo se achica para simular el tamaño de una tablet.
¿Qué puede cambiar aquí?
- → Textos que eran grandes se ven más pequeños.
- → Columnas que estaban una al lado de la otra pueden apilarse.
- → Imágenes que se ven perfectas en escritorio pueden cortarse.
En esta vista puedes ajustar opciones SOLO para tablet sin afectar al escritorio.
[ 📲 ] MÓVIL — Teléfono
Vista en celular. Esta es la vista más crítica. La mayoría de tus visitantes vendrán desde aquí.
Lo que suele pasar aquí si no está bien configurado:
- → Texto demasiado pequeño para leer.
- → Botones muy juntos difíciles de tocar.
- → Imágenes que se salen de la pantalla.
LA REGLA DE HERENCIA: Escritorio → Tablet → MóvilLo que configuras en escritorio lo heredan tablet y móvil. Lo que configuras en tablet solo lo hereda móvil. Siempre diseña primero en escritorio, luego ajusta los demás. Nunca al revés.
[ ↔ 1208px ] Ancho del lienzo
Muestra en píxeles el ancho actual. Puedes escribir un número manual (ej: 375 para iPhone) para probar puntos de quiebre específicos. Solo cambia la previsualización, no el modo de edición.
[ 🔍 100% ] El zoom
Cambia qué tan grande ves el lienzo. El zoom NO afecta tu web real.
- → 75%: para ver toda la página de un vistazo.
- → 150%: para ajustar detalles de 1 o 2 píxeles.
ZONA DERECHA
[ Salir ▼ ] — Salir del Visual Builder
Cierra el editor y te lleva de vuelta a WordPress.
Opciones de la flecha ▼: Salir y guardar / Salir sin guardar / Salir y ver.
[ Guardar ] — El más importante de todos
Si la luz se va o el internet falla y no has guardado, pierdes TODO.
Ctrl + S.- Después de construir una sección.
- Antes de un cambio arriesgado.
- Antes de salir «un momento».
RESUMEN DE USO CONSTANTE
| [ ⊞ ] Wireframe | Para ver la estructura limpia. |
| [ □ ][ 📱 ][ 📲 ] | Para revisar dispositivos. |
| [ Guardar ] | Tu mejor amigo (cada 15 min). |