Buenas amigos!! En este artículo vamos a ver algo que os va a ayudar muchísimo! Sobre todo si sois desarrolladores o vais a hacer vuestra web y queréis diseñar de forma ágil y rápida.
El mes pasado en Elegant Themes lanzaron Div 3.0 con el espectacular constructor visual. Esta nueva interfaz revolucionó por completo el Divi Builder al llevarlo al front-end y permitiendo a los usuarios realizar cambios en tiempo real a su sitio web utilizando un conjunto de controles visuales. La reacción de los usuarios ha sido increíble y no podemos estar más emocionados con el futuro de Divi.
En las semanas siguientes al lanzamiento de Divi 3.0 en Elegant Themes se han dedicado a hacer que el nuevo generador visual funcionase a la perfección, resolviendo pequeños errores tras el lanzamiento, que suele ser habitual ya que la comunidad lo testea a fondo. Han mejorando la compatibilidad con plugins de terceros, etc. Un mes y 140 mejoras más tarde, las cosas se ven mejor que nunca y van a continuar para mejorar la estabilidad durante las próximas semanas antes de comenzar a trabajar en Divi 3.1. No vamos a añadir nuevas características en Divi 3.1, pero vamos a hacer todo sobre Divi sólo un poco mejor, más rápido y más fácil de usar. El generador visual va a venir a el plugin del Divi Builder pronto también!
En y entre las horas dedicadas a conseguir que el Constructor Visual esté en plena forma, han encontrado tiempo para trabajar en algo nuevo también. Han querido aprovechar la increíble velocidad del constructor y proporcionar a los profesionales Divi algunas nuevas herramientas que ayuden a llevar su trabajo de diseño web al siguiente nivel. Así que han decidido crear un nuevo conjunto de funciones de usuario avanzado en forma de atajos de teclado.
Atajos de teclado, cuando se utiliza en el nuevo generador visual, son increíblemente gratificantes y asombrosamente rápidos. Para la gran mayoría de personas que construyen sitios web de forma profesional, “el tiempo es dinero”, y estas nuevas herramientas se va a ahorrar una tonelada de él! jeje
PRUEBA DE LOS NUEVOS ACCESOS DIRECTOS EN LA DEMO GRATUITA!
Índice del artículo
Atajos de teclado Galore
Casi todas las acciones que haces en el Generador Visual ahora pueden ser realizadas mediante atajos de teclado. Dónde antes necesitabas normalmente de 2 a 3 o 4 o incluso 5 clics del ratón ahora se pueden realizar en tan sólo unas pocas teclas. Puedes cortar, copiar, pegar, añadir nuevos contenidos, ajuste columnas, cambiar el relleno y más sin tener que abrir un panel de configuración. Una vez que domines estos accesos directos, la construcción de páginas la harás a una nueva velocidad que te encantará.
CORTAR, COPIAR, PEGAR
Probablemente ya estés acostumbrado a estos atajos, pues ya los tienes en Divi. Pasa el ratón sobre un módulo y pulse Ctrl+ C para copiarlo o Ctrl+ X para cortarlo (copiar y quitarlo de la página). Una vez que un módulo, fila o sección ha sido copiado, simplemente coloca el cursor sobre la que desea pegar y pulse Ctrl+ V. ¿Te mola eh?
COPIAR Y PEGAR ESTILOS ONTO MÓDULOS EXISTENTES
¡No sólo se pueden copiar y pegar módulos enteros, también puede copiar estilos desde un módulo y pegar esos estilos en otro módulo! ¡¡¡Esto me encanta!! Digamos que si tienes una página con 8 módulos y decides actualizar sus colores y estilos de fuente. Simplemente debes personalizar una de los módulos y a continuación, coloca el cursor sobre él y pulse Ctrl+ Alt+ C para copiar sus estilos. Esto copiará todas las personalizaciones de diseño que ha realizado en el módulo. Pase el ratón sobre otro módulo de propaganda y pulse Ctrl+ Alt+ Vpara pegar los estilos en el módulo. El módulo se actualizará para tener un aspecto como el módulo que has copiado a los estilos, pero conservará la totalidad de su contenido único!
ARRASTRAR Y COPIA
También puedes copiar un módulo en una nueva ubicación pulsando la tecla Alt mientras lo mueves. Esto copiará el módulo trasladado a la ubicación que quieras.
DESHACER REHACER
La capacidad de deshacer y rehacer en el generador es un ahorro total de tiempo y vida, y es muy fácil de hacer mediante atajos de teclado. Si no te gusta un cambio que ha hecho, sólo tienes que pulsar Ctrl+ Z para revertirla. Si cambias de opinión, pulsa Ctrl+ Y o Cmd + Shift+ Z rehacer el cambio que acabas de deshacer.
AJUSTE DE CANAL Y DE FILA ANCHOS
Los ajustes de anchura la anchura y la altura es algo que a nuestros clientes les estamos haciendo todo el tiempo, y ahora con los atajos de teclado que pueden realizar estos ajustes al instante sin tener que abrir el panel de configuración de la fila. Para hacer una fila de anchura completa, basta con colocar sobre ella y pulse R + F. Para ajustar el ancho del canal de una fila, se ciernen sobre él y pulse G + 1/ 2/ 3/4. Por ejemplo, puede crear al instante una cuadrícula de anchura completa de imágenes sin bordes presionando R+ F y G+ 1
CAMBIAR LAS ESTRUCTURAS DE LA COLUMNA
Ahora puedes cambiar las estructuras de columna instantánea también. Simplemente coloca el cursor sobre una fila y pulse C+ 1/ 2/ 3/ 4 etc para alternar a través de cualquiera de las 11 estructuras de columnas disponibles. También puedes abrir la información de herramienta Cambiar columna y pulse Shift+ Tab para desplazarte por cada uno de los tipos de columna en la lista.
ESPEJO VALORES DE RELLENO MIENTRAS SE ARRASTRA
Una de las funciones más interesantes del Visual Builder es la capacidad de arrastrar para aumentar o disminuir los valores de relleno de fila y de la Sección. Han añadido un par de teclas de acceso rápido diferentes para hacer el relleno pueda arrastrar aún más útil. Sosteniendo Shift mientras arrastra limitará la altura o anchura de cambio en incrementos de 10. Así que si deseas aumentar su Sección relleno para 100px, sólo mantén pulsada la tecla Shift y arrastrar directamente al valor correcto en un par de segundos y se encajará a cada unidad de 10.
También han añadido la capacidad de reflejar valores de relleno. Si arrastras el relleno en un lado mientras sostienes Shift+ Alt, el relleno en el lado opuesto se actualizará para que coincida con el lado corriente que su están ajustando.También puede mantener Alt mientras se arrastra y se va a limitar la altura o la anchura del valor de relleno actual a ser mayor que el relleno en el lado opuesto. Es una manera fácil de aumentar o disminuir rápidamente el relleno en cualquier lado para que coincida con el valor exacto en el lado opuesto.
AJUSTAR FILA Y LA SECCIÓN RELLENO
Como una alternativa a arrastrar para aumentar o disminuir los valores de relleno, ahora puedes utilizar las teclas de flecha del teclado para hacer ajustes afinado de fila y sección de relleno. Al pulsar S+ Flecha aumentará los valores de relleno de la sección principal de acuerdo con la tecla de flecha que se pulsa. Al pulsar R+ Flecha ajustará el relleno de la fila padre. Por ejemplo, al hacer clic S+ Arriba aumentará relleno superior de la sección actual. Al pulsar R+ Abajo aumentará el fondo de relleno de la fila padre.
Valores de relleno se pueden disminuir así golpeando el S/R+ Alt+ Flecha Keys. Por ejemplo, al pulsar R+ Alt+ Abajo disminuirá el valor de relleno inferior de la fila padre.
AÑADIR NUEVO CONTENIDO
Los atajos de teclado también sirven para añadir nuevas filas y secciones. Al pulsar R+ 1/ 2/ 3/ 4 etc. automáticamente, se añade una nueva fila debajo de la fila actual con el tipo de columna elegida. Por ejemplo, al pulsar R+ 4 añadirá una nueva fila de 4 columnas a la página.
Lo mismo ocurre con las secciones. Añadir cualquiera de los tipos de sección de Divi (Regular, especiales o ancho completo) pulsando S+ 1/ 2/ 3.
BLOQUEAR Y DESACTIVAR
Cualquier elemento de la página ahora puede ser desactivado o bloqueado simplemente ponte sobre el elemento y pulsa la L o D.
GUARDAR Y PUBLICAR
El atajo de teclado estándar para guardar, Ctrl+ S, ahora se guardará automáticamente la página, mientras que en el Divi Buider. Ni siquiera tienes que abrir la barra de configuración de página. También puedes pulsar Ctrl+ Alt+ S para guardar la página como un borrador sin publicar.
SALIR DE VISUAL CONSTRUCTOR Y SALIR PARA BACKEND CONSTRUCTOR
Ahora es fácil para salir del constructor y saltar hacia atrás y hacia adelante entre el generador visual y backend del constructor. Para salir del Visual Builder, sólo tienes que pulsar Ctrl+ E. Para salir del Visual Constructor e ir directamente al backend Constructor, pulse Ctrl+ Shift+ E.
AJUSTES CON SÓLO PRESIONAR UNA TECLA
Todos los paneles de ajustes más utilizados ahora se puede abrir con una sola tecla. Para activar y desactivar la barra de configuración, pulsa T. Para abrir la configuración de página, pulsa O. Para abrir la descripción portabilidad, pulsa P. Para abrir el historial de revisión, pulsa H.
CAMBIAR TAMAÑO DE LA VENTANA DE AJUSTES
La interfaz visual del constructor es completamente personalizable, especialmente cuando se trata de su configuración de ventanas emergentes. Siempre que tengas una ventana de configuración abierta, puedes pulsar Ctrl+ Enter para ir a pantalla completa o para reducir al mínimo desde el modo de pantalla completa. También puedes ajustar la ventana hacia el lado izquierdo / derecho de la pantalla pulsando Ctrl+ Left Arrow o Ctrl+ Right Arrow para alternar entre cada modo.
ACERCAR O ALEJAR PARA ALTERNAR VISTAS PREVIAS RESPONSIVE
Ahora se puede ampliar fácilmente y acercar la imagen para cada modo de previsualización pulsando el Ctrl+ -y Ctrl+ + botones. Es una muy buena manera de ver rápidamente los cambios en diferentes dispositivos.
CAMBIAR DE PESTAÑA Y TOGGLE COLUMNAS
Ahora puedes navegar rápidamente a través de las pestañas y las opciones. Siempre que tengas una configuración popup abierta, pulsa Shift+ Tab para ir a la siguiente pestaña y pulsa Tab para desplazarte por los campos de cada ventana. También puedes cambiar a través de cada diseño de las columnas pulsando Shift+ Tab, mientras que la información de herramienta Cambio Columna de la estructura está abierta.
DOBLE CLIC PARA ABRIR LA CONFIGURACIÓN DEL MÓDULO
Ya no es necesario colocar el cursor sobre los iconos de botón de un módulo para abrir su panel de configuración principal. En lugar de hacer clic directamente sobre el icono de engranaje, simplemente Double Click en cualquier lugar en el módulo, fila o sección para abrir la configuración!
LISTA DE TODOS LOS ATAJOS DE TECLADO
Si alguna vez necesitas ayuda para recordar un atajo de teclado, sólo tiene que pulsar ? para conseguir un poco de ayuda. Una ayuda aparecerá con una lista completa de atajos de teclado más relevantes para ordenadores Mac y Windows. En su mayor parte, la tecla Ctrl se reemplaza con Cmd en Mac en la siguiente lista.
La página de accesos directos
- Deshacer: Ctrl+Z
- Rehacer: Ctrl+ Y/ Cmd+ Shift+Z
- Guardar la página: Ctrl+S
- Guardar página como borrador: Ctrl+ Shift+S
- Salir de Visual Constructor: Ctrl+E
- Salir Para backend Constructor: Ctrl+ Shift+E
- Zoom-in de pantalla: Ctrl++
- Pantalla de zoom-out: Ctrl+-
- Cambiar la configuración de barras: T
- Configuración de la página abierta modal: O
- Abre el historial modal: H
- Portabilidad abrir modal: P
- Listar Todos los accesos directos: ?
Inline Editor de accesos directos
- Salir Inline Editor: Esc
Los accesos directos de módulos
- Copia Módulo: Ctrl+C
- Módulo Cut: Ctrl+X
- Módulo pegar: Ctrl+V
- Configuración de copia de diseño del módulo: Alt+ Ctrl+C
- Pegue parámetros de diseño del módulo: Alt+ Ctrl+V
- Módulo Desactivar: D
- Módulo de bloqueo: L
- Ajuste Relleno Por 10px: Shift+Drag
- Espejo ajuste relleno: Shift+ Alt+Drag
- Ajuste Relleno hacia el lado opuesto: Alt+Drag
- Copia Módulo + Drag – Alt + Module Move
- Cambio de columna Estructura C+ 1/ 2/ 3/4
- Hacer fila de ancho completo: R+F
- Cambiar Medianil: G+ 1/ 2/ 3/4
- Aumentar tamaño de fila Relleno: R+Left/Right/Up/Down
- Aumentar tamaño de fila relleno por 10px: Shift+ R+Left/Right/Up/Down
- Reducir tamaño de fila Relleno: Alt+ R+Left/Right/Up/Down
- Reducir tamaño de fila relleno por 10px: Alt+ Shift+ R+Left/Right/Up/Down
- Añadir nueva fila: R+ 1/ 2/ 3/4
- Aumenta la sección Relleno: S+Left/Right/Up/Down
- Aumenta la sección Relleno por 10px: Shift+ S+Left/Right/Up/Down
- Disminuir la sección Relleno: Alt+ S+Left/Right/Up/Down
- Disminuir la sección Relleno por 10px: Alt+ Shift+ S+Left/Right/Up/Down
- Añadir Nueva sección: S+ 1/ 2/3
- Abra Ajustes del módulo: Double Clickel módulo.
Los accesos directos modales
- Cerca: Esc
- Deshacer: Ctrl+Z
- Rehacer: Ctrl+ Y/ Cmd+ Shift+Z
- Guardar cambios: Enter
- Aquí Switch – Shift+Tab
- Alternar modal Expandir: Ctrl+Enter
- Alternar modal Snap Izquierda: Ctrl+Left Arrow
- Alternar modal Snap derecha: Ctrl+Right Arrow
NUEVA BACKEND BUILDER ACCESOS DIRECTOS TAMBIÉN!
No acabamos de añadir nuevos accesos directos al Creador visual, todos los accesos directos pertinentes se han añadido al programa de fondo constructor también! Hay algunos nuevos también, por ejemplo, pulsando Ctrl+ Ppara lanzar una vista previa en vivo de cualquier elemento que se está editando.
La página de accesos directos
- Guardar la página: Ctrl+S
- Guardar página como borrador: Ctrl+ Shift+S
- Deshacer: Ctrl+Z
- Rehacer: Ctrl+ Shift+Z
- Historia abierta: H
- Abrir Portabilidad: P
- Para abrir Configuración de Página: O
Los accesos directos de módulos
- Módulo Cut: Ctrl+X
- Copia Módulo: Ctrl+C
- Módulo pegar: Ctrl+V
- Copia Módulo + Drag – Alt + Module Move
- Módulo Desactivar: D
- Módulo de bloqueo: L
- Cambio de columna Estructura C+ 1/ 2/ 3/4
- Añadir nueva fila: R+ 1/ 2/ 3/4
- Añadir Nueva sección: S+ 1/ 2/3
- Abra Ajustes del módulo: Double Clickel módulo.
Los accesos directos modales
- Cerca: Esc
- Guardar cambios: Enter
- Cambie aquí: Shift+Tab
- Módulo de vista previa: Ctrl+P
Hola, cuando trato de guardar lo que he hecho en divi supreme me sale un error y no me deja guardar, dice que es por varios razón y ya he intentado todo pero aún nada.
Necesito desactivar de forma definitiva el campo de fórmulas. En un documento con numeración en pie de página, no aparece el número sino {PAGE \* MERGEFORMAT} al dar clic derecho activar o desactivar campo, ya aparece normal la numeración de las páginas, pero al cerrar el documento y volver a abrirlo, aparece otra vez la misma situación.
Hola, ¿hay alguna forma de desactivarlos?