El editor de un vistazo
Un recorrido por el editor de Payly: la barra superior, el panel Bloques, el lienzo y el panel de ajustes, además de cómo funcionan el guardado, deshacer y los atajos de teclado.
El editor es donde construyes las páginas de tu tienda. Ves cada página tal como la verá un visitante y la cambias seleccionando elementos, arrastrándolos y rellenando sus ajustes. Nada de lo que hagas aquí es visible para los visitantes hasta que publiques.
Abrir el editor
- Abre el panel de tu sitio.
- Haz clic en Editar sitio en la parte superior del menú de la izquierda.
Un sitio recién creado se abre solo en el editor justo después de que elijas un diseño. Consulta Crea tu primer sitio.
Las cuatro zonas
El editor tiene una barra en la parte superior y tres columnas debajo: el panel Bloques a la izquierda, tu página en el centro (el lienzo) y el panel de ajustes a la derecha.
La barra superior
De izquierda a derecha, la barra superior contiene estos controles:
- Panel te devuelve al panel de tu sitio.
- El estado de guardado te indica cómo va tu trabajo. Guardado, sin publicar significa que tus cambios están guardados en tu borrador, pero tu tienda en producción todavía no los muestra. Guardado y publicado significa que tu tienda en producción coincide con lo que ves. También ves Guardando… un instante después de cada cambio, y No guardado si falla un guardado.
- El cuadro del nombre del sitio muestra el nombre de tu tienda. Haz clic en él para renombrar tu sitio.
- El selector de páginas (muestra el nombre de la página en la que estás, por ejemplo Inicio) enumera tus páginas. Elige una para editarla. Gestionar páginas, al final de la lista, abre el gestor de páginas. Consulta Añade y gestiona páginas.
- Escritorio, Tableta y Móvil cambian el tamaño de pantalla para el que estás diseñando. Consulta Haz que tu sitio se vea bien en móviles y tabletas.
- El icono del reloj (Copias de seguridad) abre tus copias de seguridad guardadas. Consulta Deshacer cambios y restaurar una versión anterior.
- Las dos flechas son Deshacer y Rehacer.
- El icono de una flecha que sale de un cuadro (Ver el sitio publicado) abre tu tienda en producción en una pestaña nueva. Aparece una vez que has publicado.
- Vista previa muestra todo tu sitio, con los enlaces funcionando y todo, en una pestaña nueva. Consulta Previsualiza tu sitio antes de publicarlo.
- Publicar lleva tus cambios a tu tienda en producción. Consulta Publica tu primer sitio.
- El menú de la cuenta, en el extremo derecho, contiene el tema y el idioma del propio Payly (no cambian tu tienda), además de Ajustes, Inicio de Payly y Cerrar sesión.
El panel Bloques
La columna izquierda empieza con Bloques, las piezas de construcción que puedes añadir a una página, ordenadas en grupos: Básicos, Medios, Disposición, Tienda, Marketing y Menús y formularios. Arrastra un bloque a la página o haz clic en él para añadirlo al final de la sección actual. Consulta Añade, mueve y cambia el tamaño de los bloques.
Desplázate hacia abajo en la misma columna para encontrar Estructura, una lista con el encabezado, las secciones de la página actual y el pie de página, con un botón Añadir sección. Consulta Trabaja con secciones.
El lienzo
El centro de la pantalla es tu página. Se dibuja con el mismo código que dibuja tu tienda en producción, así que lo que ves es lo que obtienen los visitantes. Haz clic en cualquier bloque o sección para seleccionarlo. Un bloque seleccionado muestra un contorno azul, tiradores para cambiar el tamaño y una pequeña barra de herramientas con los botones Duplicar, Girar y Eliminar. Los enlaces del lienzo no se abren al hacer clic en ellos.
El panel de ajustes
La columna derecha tiene dos pestañas:
- Selección muestra los ajustes de lo que hayas seleccionado. Si no hay nada seleccionado, muestra los ajustes de la propia página: su Título del navegador, su Descripción para buscadores y el interruptor Esta es la página de la tienda. Si seleccionas un bloque, muestra los ajustes de ese bloque, agrupados bajo encabezados como General, Tipografía, Tamaño y posición y Gestionar. Haz clic en un encabezado para abrirlo. Para volver a los ajustes de la página, haz clic en Ajustes de la página en la parte superior del panel, pulsa Esc o haz clic en la zona gris junto a la página.
- Diseño del sitio contiene los colores, las fuentes y los ajustes de disposición que se aplican a todas las páginas. Consulta Define tus colores, tipografías y disposición.
Cómo funciona el guardado
El editor guarda por ti. Un instante después de que dejes de cambiar algo, guarda tu borrador y el estado de la barra superior vuelve a Guardado, sin publicar. No hay ningún botón Guardar.
Un cambio guardado no está en producción. Tus visitantes siguen viendo tu última versión publicada hasta que hagas clic en Publicar.
Deshacer y rehacer
Haz clic en Deshacer para anular tu último cambio y en Rehacer para recuperarlo. Recuerdan los cambios que has hecho desde que abriste el editor. Si cierras o recargas el editor, ese historial empieza de nuevo desde la versión guardada.
Atajos de teclado
En un Mac, usa Cmd en lugar de Ctrl.
| Teclas | Qué hacen |
|---|---|
| Ctrl + Z | Deshacer el último cambio |
| Ctrl + Mayús + Z | Rehacer |
| Ctrl + D | Duplicar el bloque seleccionado |
| Supr o Retroceso | Eliminar el bloque seleccionado |
| Esc | Quitar la selección |
| Teclas de flecha | Mover el bloque seleccionado 1 píxel (mantén pulsada Mayús para moverlo 10) |
| Ctrl + teclas de flecha | Mover el bloque seleccionado una celda de la cuadrícula |
| Ctrl + Mayús + teclas de flecha | Hacer el bloque seleccionado una celda más ancho, más estrecho, más alto o más bajo |