Las tiras de Advantor son iconos de un solo clic que puede notar dentro del panel izquierdo. Su posición está inspirada en Photoshop y otras herramientas gráficas que sitúan iconos en una franja a la izquierda.
En nuestro Advantor puede encontrar iconos para abrir paneles con un solo clic como:
1 - Fondo (A)
2 - Tamaño y espacio (S)
3 - Diseño (D)
4 - Tipografía (F)
5 - Bordes (Y)
6 - Efectos (X)
7 - CSS personalizado (C)
8 - JS personalizado (V)
9 - Atributos (B)
10 - Editor BlockPad (editor de código de 3 paneles)
Panelator es una franja de iconos personalizable que ofrece las siguientes opciones con un solo click:
1 - Estructura (Q)
2 - Selectores (W)
3 - Hojas de estilo (E)
4 - Ajustes (R)
5 - Inspector de estilos (T)
-- Preferencia del usuario:
🔸 Se puede seleccionar que el panelador aparezca como parte de la barra superior
🔸 Otra opción es que forme parte del panel derecho
Los iconos de la franja inferior son herramientas relacionadas con el espacio de trabajo.
Aquí puedes encontrar algunas de las herramientas favoritas como:
1 - Live Server - Es lo mismo que la vista previa en el front-end, pero tiene una característica interesante que hace ahorrar tiempo. Es una ventana del navegador que se recarga automaticamente cuando se hace un guardado en Oxygen, así los cambios están disponibles y actualizados sin tener que hacer una recarga en la ventana del nacegador.
Esta característica funciona mejor para la configuración de doble pantalla, por lo que puede tener el constructor en una pantalla y la vista previa en otra pantalla.
2 - Live Server Scroll Sync - esta función permite la sincronización bidireccional entre la vista previa frontal (Live Server) y el lienzo dentro del constructor, una explicación simple y rápida sería que ambas ventanas constructor y navegador reaccionan simultaneamente a los movimientos de scroll, estes en cualquiera de las ventanas, ambas se moverán al mismo tiempo.
3 - Modo Macro - habilitado puedes aplicar el último comando haciendo click en los elementos dentro del panel de estructura. Mas rápido que esto es hacer Shift+Click en el elemento del lienzo y hará lo mismo.
4 - Modo X - pon tu sitio web dentro del escáner de rayos X. Verás un sitio web en escala de grises con todos los elementos delineados para que pueda centrarse en el diseño y encontrar los elementos que están causando problemas de diseño.
5 - Grid Guide - como las guías de rejilla de Figma/Sketch, puedes establecer la rejilla requerida desde el diseñador y tener ayudas visuales para transferir el diseño de los archivos Figma al sitio web de WordPress.
6 - Import StyleSheets - en Oxygen puede utilizar variables para colores globales, pero no puedes ver su valor. Esta opción importará esas variables dentro del Editor.
7 - Quick fix - si algo está roto o fuera de sitio en la ventana del editor, al hacer click en ese icono, activa algunos mecanismos que pueden resolver algunos problemas. Eliminará las hojas de estilo importadas si colisionan con el Editor de Oxygen Builder.
8 - Ayuda / Preferencias del usuario - aquí puedes encontrar los controles para la interfaz del Espacio de Trabajo y ajustarlo a tus necesidades. Por otro lado, aquí hay enlaces útiles para el soporte, los comentarios, los documentos, etc.
El espacio de trabajo anula los controles nativos de Oxygen Canvas y utiliza mecanismos propios para proporcionar un grado más fino de opciones de ajuste.
Pregunta: ¿Desea tener Auto-Zoom (Oxygen nativo) o modo Responsive en el punto de ruptura por defecto?
El espacio de trabajo por defecto es el modo Responsive para que puedas ver los cambios de diseño mientras arrastras los tiradores del resizer, si quieres el Auto-Zoom nativo de Oxygen necesitas habilitarlo a través de las preferencias de usuario.
Así es como se puede configurar el Auto-Zoom:
Bien, ahora tenemos decidido qué opciones funcionan mejor para nuestro flujo de trabajo, pero si no estás seguro se cambiar sobre la marcha siempre.
El siguiente paso es entender otros ayudantes que se dividen en dos grupos:
1️⃣- Punto de ruptura por defecto = Configuración del lienzo, este es el control manual del Zoom. Puedes establecerlo haciendo clic en el Zoom que deseas aplicar o establecer el ancho a simular y esto calculará el Zoom necesario.
2️⃣- Otros puntos de interrupción = Responsive helpers - este es el control del lienzo en dos dimensiones, puedes e introducir valores manualmente, puedes elegir presets de ancho/altura, o puedes seleccionar el dispositivo para ver la capacidad de respuesta del diseño.
Esta opción sólo funciona en el punto de ruptura por defecto. En otros no tendrá ningún efecto porque en los puntos de ruptura más pequeños no se necesita zoom en el lienzo.
En otros puntos de interrupción, marque la función Responsive Helpers.
En la esquina inferior izquierda encontrarás las indicaciones del ancho de lienzo y de zoom:
Después de hacer click deberías ver un modal como este:
Tienes cinco opciones para controlar el Zoom del punto de ruptura por defecto:
1️⃣- Introduce el ancho y el Zoom se auto-ajustará.
2️⃣- Selecciona el común y el Zoom necesario se calculará automáticamente.
3️⃣- Selecciona la escala introduciendo un valor.
4️⃣- Selecciona una de las opciones de escala predefinidas.
5️⃣- Restablecer el zoom.
Para cualquier otra opción podemos utilizar Responsive Helpers que configurará el ancho y el alto del lienzo para simular el tamaño del dispositivo.
Para obtener el modal de Responsive Helpers hay que hacer click en los tres puntos al lado del icono de móvil en la esquina inferior izquierda como se muestra en la imagen de abajo
Después del click en el icono de los tres puntos verás las opciones:
Podrás :
1️⃣- Introducir manualmente la anchura/altura deseada.
2️⃣- Seleccionar uno de los pressets mas habituales correspondientes al mercado actual.
3️⃣- Seleccionar uno de los dispositivos comunes.
Después de seleccionar cualquiera de las opciones, se seleccionará automáticamente el punto de ruptura correspondiente a ese dispositivo y se activará el modo Responsive helpers si no está activado:
Si las opciones Responsive Helpers están activas, verás el icono del móvil con un fondo azul claro. Si vas al punto de ruptura por defecto, estas opciones no tendrán ningún efecto, independientemente de si están activadas o no.
Si quieres salir de este modo sólo tienes que desmarcar el icono azul claro.
Para encontrar:
- Componentes de bloques de código
- Componentes Div
- Componentes de imagen
- Componentes de texto enriquecido
- Componentes Botones/enlaces
- Componentes de texto
- Componentes Headers
o una combinación de los elementos anteriores. Puedes hacerlo haciendo click en el icono de Filtros dentro del Panel de Estructura
¿Por qué esto puede ser útil?
Si tienes una estructura complicada puede ser difícil encontrar bloques de algún tipo, como por ejemplo bloques de código.
Simplemente aplica el filtro para el bloque de código (o del bloque que quieras) y mostrará sólo los bloques de código, se puede filtrar por mas de un tipo, activar y desactivar cualquier tipo sobre la marcha.
Una cosa que distingue a Oxygen de otros constructores de WordPress es el sistema de clases.
Las clases son la característica más valiosa en Oxygen y los desarrolladores las utilizan todo el tiempo. Por defecto Oxygen clase mostrando requieren dos clicks para cambiar el selector, y un click a cada vez que quieres ver todos los selectores existentes.
La visión del espacio de trabajo es un poco diferente en esta área. Para nosotros la visión general de las clases debería mostrarse siempre sin necesidad de hacer click para verlas cada vez.
Lo mismo que para cambiarlos debería ser una sola acción de un solo click porque lo hacemos todo el día y esta es una de las acciones más comunes dentro del Editor.
Para entrar y salir del modo pantalla completa(Full Screen) es suficiente con pulsar la tecla Espacio.
Debido a que Recoda Workspace anula la interfaz de usuario nativa, algunas opciones ya no son necesarias. Esta sección explicará esto y de qué manera son reemplazadas.
Ocultar/Mostrar el panel izquierdo
Puedes ver que ya no hay ningún botón de Ocultar/Mostrar. Este botón ya no es necesario porque esta acción se controla ahora de otras dos maneras:
- Arrastrando
- Doble click en el tirador o en la zona que hace de divisor.
