Antes de empezar a diseñar, vamos a familiarizarnos con la interfaz del editor de Grid.

El editor está dividido en cuatro áreas principales:

1. Barra superior: contiene las principales herramientas de navegación, edición, visualización y publicación.
2. Barra de herramientas lateral: permite acceder a los diferentes paneles del editor.
3. Canvas: es el área central donde visualizamos y editamos la página.
4. Panel derecho: muestra los estilos, propiedades y animaciones del elemento seleccionado.

[Captura: vista general del editor, señalando las cuatro áreas]

Barra superior

Comenzando de izquierda a derecha, encontramos primero el logo de Grid. Al hacer clic sobre él se abre un menú desde donde podemos, entre otras opciones, volver al Panel de control.

A continuación encontramos el indicador de la página actual. Desde allí podemos abrir el menú de páginas, cambiar entre las diferentes páginas del sitio y crear nuevas páginas.

Luego tenemos el modo de edición. Grid cuenta con tres modos diferentes:

• Diseño: es el modo más completo y nos permite trabajar con todas las herramientas del editor.
• Edición simplificada: oculta muchos de los paneles y limita las opciones disponibles desde el canvas. Está pensado principalmente para personas que necesitan modificar el contenido de un sitio sin intervenir en su diseño, por ejemplo, cambiar textos, imágenes o videos.
• Previsualización: permite ver el sitio tal como lo verán los visitantes.

Para diseñar vamos a trabajar principalmente en el modo Diseño.

[Captura: menú de modos de edición]

En el centro de la barra superior encontramos las vistas de dispositivo. Podemos alternar entre Computadora, Tablet y Celular para comprobar cómo se adapta nuestro diseño a diferentes tamaños de pantalla.

Estas vistas también nos permiten aplicar estilos específicos para cada tamaño de pantalla. Esto es lo que conocemos como diseño responsivo, un concepto que vamos a trabajar durante gran parte del curso.

Como regla general, recomendamos comenzar siempre el diseño desde la vista Computadora y luego adaptarlo a pantallas más pequeñas.

[Captura: botones de vistas Computadora / Tablet / Celular]

Hacia la derecha encontramos el botón de GRID AI, que permite utilizar inteligencia artificial para crear y editar páginas, redactar textos y realizar diferentes tareas dentro del editor.

GRID AI todavía se encuentra en Beta, por lo que es posible que esta opción no esté disponible para todos los usuarios.

A su lado encontramos el botón de Preferencias. Entre sus diferentes opciones se encuentra la posibilidad de mostrar u ocultar los bordes de los elementos en el canvas.

Mantener los bordes visibles puede ser especialmente útil durante las primeras etapas de aprendizaje, ya que permite identificar con mayor facilidad los diferentes elementos que forman parte de una página.

[Captura: preferencias con la opción de mostrar bordes activada]

También encontramos los botones de Deshacer y Rehacer, que permiten revertir o recuperar cambios realizados en el editor.

Se pueden utilizar tanto desde estos botones como mediante atajos de teclado:

• Windows: Ctrl + Z para deshacer y Ctrl + Alt + Z para rehacer.
• Mac: Cmd + Z para deshacer y Cmd + Option + Z para rehacer.

El siguiente indicador muestra el estado del borrador.

Grid guarda automáticamente nuestros cambios de forma periódica. Cuando aparece la tilde verde, significa que todos los cambios están guardados. También podemos guardar manualmente utilizando este botón.

Si intentamos cerrar el navegador o navegar hacia otra página mientras tenemos cambios pendientes de guardar, Grid nos mostrará una advertencia para evitar que perdamos nuestro trabajo.

Por último, encontramos el estado de publicación y el botón para publicar.

Grid trabaja con un sistema de borradores y versiones publicadas. Los cambios que hacemos en el editor se guardan en nuestro borrador, pero eso no significa que los visitantes los vean inmediatamente.

Cuando estamos conformes con los cambios y queremos que sean visibles para los visitantes, debemos publicar la página.

Cada página se publica de forma independiente, aunque algunos elementos generales, como los componentes y los estilos globales, se publican para todas las páginas del sitio.

Más adelante veremos el sistema de publicación en detalle.

Si una página ya está publicada, también podemos despublicarla para que deje de estar disponible para los visitantes, o descartar el borrador para volver a la última versión publicada.

[Captura: estado de borrador y publicación]

Barra de herramientas lateral

En el lado izquierdo del editor encontramos la barra de herramientas lateral. Desde aquí podemos abrir los diferentes paneles de Grid.

Elementos

El panel de Elementos contiene los diferentes elementos que podemos utilizar para construir una página, organizados por categorías.

Podemos arrastrar cualquiera de estos elementos directamente al canvas para incorporarlos a nuestro diseño.

Componentes

Los Componentes permiten guardar conjuntos de elementos junto con sus estilos, propiedades y variables para poder reutilizarlos en diferentes páginas.

Esto resulta especialmente útil para elementos que se repiten en un sitio, como encabezados, pies de página o determinados bloques de contenido.

Vamos a profundizar en los componentes más adelante.

Colecciones

Las Colecciones permiten crear bases de datos personalizadas para almacenar contenido.

Podemos utilizarlas, por ejemplo, para administrar actividades, trabajos, noticias o cualquier otro tipo de contenido que necesitemos.

Este contenido puede utilizarse posteriormente para crear páginas y listas dinámicas.

Las Colecciones son una herramienta avanzada y tienen su propio curso dedicado.

Imágenes

El panel de Imágenes permite subir y administrar las imágenes utilizadas en nuestro proyecto.

Las imágenes disponibles pueden arrastrarse directamente al canvas.

Estilos globales

Desde Estilos globales podemos definir características generales que se aplicarán a todo el sitio, incluyendo las páginas nuevas que creemos.

Por ejemplo, podemos definir:

• La paleta de colores.
• Los estilos predeterminados de los textos.
• La tipografía.
• El tamaño de los textos.
• El interlineado.
• Otros valores de diseño.

También podemos instalar tipografías desde Google Fonts o Adobe Fonts.

[Captura: barra lateral con los diferentes paneles]

Debajo de estos paneles generales encontramos herramientas específicas de la página que estamos editando.

Capas

El panel de Capas muestra la jerarquía de elementos de la página.

Desde aquí podemos visualizar cómo están organizados los elementos y seleccionar o reordenar cualquiera de ellos.

[Captura: panel de capas con una página construida]

SEO y Social

El panel de SEO y Social permite configurar información específica de cada página relacionada con su aparición en buscadores y con la forma en que se muestra cuando se comparte en redes sociales.

Desarrollador

El panel de Desarrollador permite insertar código personalizado para extender la funcionalidad del sitio más allá de las opciones disponibles en el editor visual.

El Canvas

En el centro del editor encontramos el Canvas, que es la representación visual de la página que estamos diseñando.

Al comenzar un proyecto, el canvas puede estar vacío. Para empezar a construir nuestra página podemos utilizar el botón para agregar una sección.

Grid ofrece diferentes secciones prediseñadas que podemos utilizar como punto de partida, incluyendo portadas con imágenes o videos de fondo, columnas, grillas y otras estructuras.

También podemos agregar nuevas secciones utilizando los botones + que aparecen por encima y por debajo de las secciones existentes.

[Captura: menú para agregar una sección]

Secciones

Las secciones son el elemento estructural básico de una página en Grid.

Prácticamente todos los elementos que agregamos al sitio se colocan dentro de una sección. Las secciones nos permiten organizar la estructura de la página y serán una parte fundamental de nuestro trabajo durante el curso.

Una vez que tenemos elementos dentro del canvas, podemos seleccionarlos para editarlos.

Los elementos pueden seleccionarse directamente desde el canvas, desde el panel de capas o utilizando la ruta de elementos que aparece debajo del canvas.

Actualmente, podemos seleccionar un elemento a la vez.

Cuando seleccionamos un elemento de texto, podemos editar directamente su contenido. Si seleccionamos una parte del texto, también aparecen las opciones de formato correspondientes.

[Captura: elemento seleccionado en el canvas]

Cada elemento seleccionado muestra una barra de herramientas contextual. Las opciones pueden variar según el tipo de elemento, pero algunas de las más habituales son:

• Propiedades: permite modificar opciones específicas del elemento, como reemplazar una imagen o cambiar el tipo de texto.
• Mover: permite cambiar la posición del elemento dentro de la estructura.
• Guardar como componente: permite convertir el elemento y sus elementos hijos, junto con sus estilos y propiedades, en un componente reutilizable.
• Seleccionar elemento padre: permite subir un nivel dentro de la estructura.
• Duplicar: crea una copia del elemento junto con sus elementos hijos.
• Eliminar: elimina el elemento seleccionado.

Los cambios realizados pueden revertirse utilizando la función de deshacer.

Debajo del canvas encontramos además la ruta de elementos, también conocida como breadcrumbs. Esta ruta muestra dónde se encuentra el elemento seleccionado dentro de la jerarquía y permite navegar hacia sus elementos padres.

[Captura: barra de herramientas contextual + breadcrumbs]

Panel derecho

El panel derecho es contextual: su contenido cambia según el elemento que tengamos seleccionado.

Cuenta con tres pestañas principales:

• Estilos
• Propiedades
• Animaciones

Estilos

La pestaña Estilos es una de las herramientas que más vamos a utilizar durante el curso.

Desde aquí podemos modificar las características visuales del elemento seleccionado. Las opciones disponibles dependen del tipo de elemento, aunque muchas son compartidas.

Por ejemplo, podemos modificar:

• Márgenes internos y externos.
• Colores e imágenes de fondo.
• Tipografías.
• Tamaños.
• Alineación.
• Y muchas otras características.

Los estilos están directamente relacionados con las diferentes vistas de dispositivo.

Los estilos que aplicamos en Computadora se trasladan automáticamente a Tablet y Celular, a menos que los sobrescribamos en esas vistas.

Los estilos definidos para Tablet se trasladan a Celular, pero no modifican Computadora.

Los estilos definidos para Celular solamente afectan a esa vista.

Por eso es importante comenzar nuestros diseños en la vista Computadora y luego realizar los ajustes necesarios para pantallas cada vez más pequeñas.

Este concepto de diseño responsivo va a aparecer constantemente a lo largo del curso.

[Captura: panel de estilos + vistas de dispositivo]

Propiedades

La pestaña Propiedades contiene ajustes específicos del elemento.

A diferencia de los estilos, estas propiedades no dependen de la vista de dispositivo: se aplican al elemento independientemente de si estamos viendo el sitio en Computadora, Tablet o Celular.

Estas mismas propiedades también pueden abrirse desde la barra de herramientas del elemento seleccionado en el canvas.

Animaciones

Por último, encontramos la pestaña Animaciones.

Desde aquí podemos agregar animaciones a los elementos en diferentes situaciones, por ejemplo:

• Cuando el elemento aparece en pantalla.
• Mientras hacemos scroll por la página.
• De forma continua.

Esto permite crear efectos como apariciones, desplazamientos o animaciones de tipo parallax.

Las animaciones se verán con mayor profundidad en una clase específica.

[Captura: panel de Animaciones]

Para terminar

La interfaz de Grid tiene muchas herramientas, pero no es necesario aprenderlas todas de memoria en esta etapa.

A medida que avancemos en el curso vamos a utilizar cada una de ellas en situaciones concretas, y su funcionamiento va a resultar cada vez más familiar.

En las próximas clases vamos a empezar a trabajar con la estructura de las páginas y a aprender cómo organizar secciones, layouts y elementos para construir nuestros primeros diseños.