Hoy mismo Elegant Themes nos presentó una nueva revisión de Divi 3.0… ya la décimo quinta. Pero esta vez nos sorprendió con una nueva característica, que muchos de nosotros consideraremos sumamente útil: los atajos de teclado.
La traducción ya está actualizada, pero mientras preparo el nuevo capítulo para la documentación, les acerco el contenido de la última entrada del blog de Elegant Themes en la cual se explica en detalle esta nueva herramienta.
El mes último, ET lanzó Divi 3.0 e introdujo el constructor visual. Esta flamante interfaz revolucionó el constructor de Divi integrándolo al front-end y permitiendo cambios en tiempo real gracias a un conjunto de controles visuales.
En las semanas siguientes al lanzamiento de Divi 3.0, el equipo de ET estuvo dedicado a asegurarse que el constructor visual funcionara bien para todos. Casi sin respiro, han corregido errores, han mejorado la compatibilidad con plugins de terceros, y se han ocupado de asuntos relacionados con la usabilidad. Un mes y 140 optimizaciones después, las cosas parecen lucir mejor que nunca, y ET continuará en las próximas semanas perfeccionando la estabilidad, antes de comenzar a trabajar en Divi 3.1.
No se añadirán nuevas características a Divi 3.1, sino que el desarrollo se centrará en mejorarlo, y hacerlo más rápido y más fácil de usar. El constructor visual también llegará pronto al plugin Divi Builder (no se preocupen, que no se olvidaron).
En el tiempo que se tomaron para reparar algunas cosas, también trabajaron en algo nuevo: los atajos de teclado. Para sacar provecho de la velocidad de uso del constructor visual, qué mejor que incluir esta útil herramienta, con la cual el usuario informático seguramente ya está familiarizado.
Casi todo en el constructor visual ahora se puede activar mediante atajos de teclado. Aquello que comúnmente tomaría dos, tres, cuatro y hasta cinco clics, se podrá logar con un par de combinaciones de teclas. Se puede cortar, copiar, pegar, añadir contenido nuevo, ajustar columnas, cambiar el relleno y más, sin siquiera abrir el panel de ajustes. Una vez que le agarren la mano a estos atajos, verán que las páginas se construyen más rápido y de manera más eficiente.
Cortar, Copiar y Pegar
Probablemente ya esté acostumbrado a estos atajos, y ahora funcionan en el Constructor de Divi de la forma en que se espera. Coloque el puntero sobre un módulo y presione Ctrl
+ C
para copiarlo, o Ctrl
+ X
para cortarlo (lo copia y lo elimina de la página). Una vez que un módulo, una fila o una sección se han copiado, simplemente pose el puntero sobre el lugar donde quiere pegarlo y presione Ctrl
+ V
.
Copiar y pegar estilos en módulos existentes
No solo se pueden copiar y pegar módulos enteros, también se pueden copiar estilos de un módulo y pegarlos en otro. Esta es una nueva característica que creemos le encantará. Digamos que tiene una página con ocho módulos Anuncio breve y decide que quiere actualizar los colores y estilos de fuente. Simplemente personalice uno de los módulos, acérquele el puntero y presione Ctrl
+ Alt
+ C
para copiar los estilos. Esto copiará todas las personalizaciones que tenga en ese módulo. Lleve el puntero a otro módulo Anuncio breve y presione Ctrl
+ Alt
+ V
para pegar los estilos. El módulo se actualizará para lucir exactamente igual al módulo cuyos estilos ha copiado, pero mantendrá su propio contenido.
Arrastrar y Copiar
También puede copiar un módulo en una nueva ubicación, manteniendo presionada la tecla Alt
mientras lo desplaza. Esto copiará el módulo en la nueva ubicación donde lo soltó.
Deshacer y Rehacer
La posibilidad de deshacer y rehacer en el constructor es una verdadera salvación, y es increíblemente fácil cuando se usan atajos de teclado. Si no quedó conforme con un cambio que haya hecho, simplemente presione Ctrl
+ Z
para revertirlo. Si se arrepiente, presione Ctrl
+ Y
o Cmd
+ Shift
+ Z
para rehacer el cambio que acaba de deshacer.
Ajustar el ancho de separación y de las filas
Ajustar el ancho de fila o de separación es algo que nuestros usuarios hacen constantemente, y ahora con los atajos de teclado podrá hacer esos ajustes de forma instantánea sin siquiera abrir el panel de ajustes de la fila. Para hacer una fila de ancho completo, simplemente coloque el puntero sobre ella y presione R
+ F
. Para ajustar el ancho de separación, coloque el puntero sobre la fila y presione G
+ 1
/ 2
/ 3
/ 4
. Por ejemplo, puede crear una grilla de imágenes en ancho completo, sin separación, presionando R
+ F
y G
+ 1
.
Cambiar la estructura de columnas
Ahora también puede cambiar la estructura de columnas de forma instantánea. Simplemente coloque el puntero sobre una fila y presione C
+ 1
/ 2
/ 3
/ 4
, etc. para alternar entre cualquiera de las once estructuras disponibles. También puede abrir la ventana de información Cambiar columna y presionar Shift
+ Tab
para pasar a cada uno de los tipos de columna de la lista.
Reflejar valores de relleno mientras arrastra
Una de las características más geniales del constructor visual es la posibilidad de arrastrar para aumentar o disminuir los valores de relleno de una fila o sección. Hemos añadido algunas combinaciones de teclas diferentes para hacer más útil el control de relleno. Al presionar Shift
mientras arrastra, limitará a un valor de 10 en 10 para el incremento en la altura o el ancho. De esta manera, si desea aumentar el relleno de una sección a 100 píxeles, puede presionar la tecla Shift
y arrastrar directamente al valor correcto en un par de toques para que alcance el salto en 10.
También añadimos la posibilidad de reflejar los valores de relleno. Si arrastra el relleno en un lado mientras presiona Shift
+ Alt,
el relleno del lado opuesto se actualizará para emparejarse con el lado que está ajustando. Asimismo puede presionar Alt
mientras arrastra, y se limitará la altura o el ancho del valor de relleno actual para que no sea mayor que el relleno del lado opuesto. Es una manera fácil de aumentar o disminuir rápidamente el relleno de cualquier lado para que coincida exactamente con el valor del lado opuesto.
Ajustar el relleno de filas y secciones
Como alternativa a arrastrar para aumentar o disminuir los valores de relleno, ahora puede usar las teclas de las flechas para un ajuste más exacto de los rellenos de filas y secciones. Si presiona S
+ Flechas,
aumentará los valores de relleno de la sección contenedora de acuerdo con la flecha que presione. Si presiona R
+ Flechas
ajustará el relleno de la fila contenedora. Por ejemplo, al pulsar S
+ ↑
aumentará el relleno superior de la sección actual. Al pulsar R
+ ↓
aumentará el relleno de la parte inferior de la sección contenedora.
También se pueden disminuir los valores de relleno, presionando las teclas S
/ R
+ Alt
+ Flechas.
Por ejemplo, al pulsar R
+ Alt
+ ↓
disminuirá el valor de relleno inferior de la fila contenedora.
Añadir contenido nuevo
Los atajos de teclado también existen para agregar nuevas filas y secciones. Al presionar R
+ 1
/ 2
/ 3
/ 4
, etc. automáticamente se añadirá una fila nueva debajo de la fila actual con el tipo de columna elegido. Por ejemplo, al pulsar R
+ 4
se añadirá una nueva fila con 4 columnas de ¼ a la página.
Lo mismo ocurre con las secciones. Añada cualquier tipo de sección de Divi (Estándar, Especial o Ancho completo) presionando S
+ 1
/ 2
/ 3
.
Bloquear y Desactivar
Cualquier elemento de la página ahora se puede bloquear o desactivar, simplemente llevando el puntero sobre ese elemento y presionando las teclas L
o D
.
Guardar y Publicar
Los atajos de teclado estándar para guardar, Ctrl
+ S
, ahora guardarán automáticamente la página mientras esté en el constructor de Divi. Ni siquiera necesita abrir la barra de ajustes de la página. Puede presionar Ctrl
+ Alt
+ S
para guardar la página como borrador, sin publicar.
Salir del constructor visual y volver al constructor
Ahora es fácil salir del constructor visual y alternar con el constructor original. Para salir del constructor visual, simplemente presione Ctrl
+ E
. Para salir del constructor visual e ir directamente al constructor original, presione Ctrl
+ Shift
+ E
.
Alternar ajustes con una tecla
Los paneles de ajustes más usados ahora se pueden abrir simplemente con pulsar una tecla. Para alternar la barra de ajustes, presione T
. Para abrir los ajustes de página, presione O
. Para abrir la ventana de información de portabilidad, presione P
. Para abrir el historial de revisiones, presione H
.
Alternar la expansión de ventana modal
La interfaz del constructor visual es totalmente personalizable, en especial cuando se trata de las ventanas de ajustes. Cuando tenga una ventana modal de ajustes abierta, puede presionar Ctrl
+ Enter
para llevarla a pantalla completa o para minimizarla. También puede llevar el panel a la derecha/izquierda de la pantalla, presionando Ctrl
+ ←
o Ctrl
+ →
para alternar entre ambos modos.
Acercar y alejar las vistas previas en modo adaptable
Ahora se puede alejar o acercar la vista en cada una de las vistas previas, presionando Ctrl
+ -
y Ctrl
+ +
. Es una excelente manera de tener un vistazo rápido de cómo se verán los cambios en los distintos dispositivos.
Cambiar de pestaña y alternar columnas
Ahora puede navegar rápidamente en las pestañas y opciones de las ventanas modales. Cuando tenga abierta una ventana de ajustes, presione Shift
+ Tab
para ir a la siguiente pestaña, y presione Tab
para navegar por los campos que contiene cada pestaña. También puede alternar entre cada diseño de columna, pulsando Shift
+ Tab
mientras esté abierta la ventana de información Cambiar estructura de columnas.
Doble clic para abrir los ajustes del módulo
Ya no es necesario colocar el puntero sobre los iconos de un módulo para abrir el panel principal de ajustes. En lugar de hacer clic directamente sobre el icono del engranaje, haga doble clic en cualquier parte del módulo, fila o sección para abrir los ajustes.
Lista de todos los atajos de teclado
Si alguna vez necesita recordar todos los atajos, presione ?
para obtener ayuda. Aparecerá una ventana modal con la lista completa de los atajos correspondientes a Mac y Windows. Para casi todos los casos, la tecla Ctrl
es reemplazada por Cmd
para Mac en la siguiente lista:
Atajos de página
- Deshacer:
Ctrl
+Z
- Rehacer:
Ctrl
+Y
/Cmd
+Shift
+Z
- Guardar página:
Ctrl
+S
- Guardar como borrador:
Ctrl
+Shift
+S
- Salir del constructor visual:
Ctrl
+E
- Volver al constructor original:
Ctrl
+Shift
+E
- Acercar pantalla:
Ctrl
++
- Alejar pantalla:
Ctrl
+-
- Alternar barra de ajustes:
T
- Abrir ventana modal de ajustes de página:
O
- Abrir ventana modal del historial:
H
- Abrir ventana modal de portabilidad:
P
- Lista de todos los atajos:
?
Atajos del editor en línea
- Salir del editor en línea:
Esc
Atajos de módulo
- Copiar módulo:
Ctrl
+C
- Cortar módulo:
Ctrl
+X
- Pegar módulo:
Ctrl
+V
- Copiar ajustes de diseño del módulo:
Alt
+Ctrl
+C
- Pegar ajustes de diseño del módulo:
Alt
+Ctrl
+V
- Desactivar módulo:
D
- Bloquear módulo:
L
- Ajustar relleno de a 10px:
Shift
+ Arrastrar - Reflejar ajustes de relleno:
Shift
+Alt
+ Arrastrar - Ajustar relleno al lado opuesto:
Alt
+ Arrastrar - Copiar módulo y arrastrar:
Alt
+ Mover módulo - Cambiar estructura de columnas:
C
+1
/2
/3
/4
- Hacer fila de ancho completo:
R
+F
- Cambiar ancho de separación:
G
+1
/2
/3
/4
- Aumentar relleno de fila:
R
+←
/→
/↑
/↓
- Aumentar relleno de fila de a 10px:
Shift
+R
+←
/→
/↑
/↓
- Disminuir relleno de fila:
Alt
+R
+←
/→
/↑
/↓
- Disminuir relleno de fila de a 10px:
Alt
+Shift
+R
+←
/→
/↑
/↓
- Añadir nueva fila:
R
+1
/2
/3
/4
- Aumentar relleno de sección:
S
+←
/→
/↑
/↓
- Aumentar relleno de sección de a 10px:
Shift
+S
+←
/→
/↑
/↓
- Disminuir relleno de sección:
Alt
+S
+←
/→
/↑
/↓
- Disminuir relleno de sección de a 10px:
Alt
+Shift
+S
+←
/→
/↑
/↓
- Añadir nueva sección:
S
+1
/2
/3
- Abrir ajustes de módulo: Doble clic en el módulo
Ajustes de ventana modal
- Cerrar:
Esc
- Deshacer:
Ctrl +
Z
- Rehacer:
Ctrl
+Y
/Cmd
+Shift
+Z
- Guardar cambios:
Enter
- Cambiar a pestaña:
Shift
+Tab
- Alternar expansión de ventana modal:
Ctrl
+Enter
- Llevar a la izquierda:
Ctrl
+←
- Llevar a la derecha:
Ctrl
+→
También hay atajos nuevos en el constructor original
No queríamos añadir los nuevos atajos solo al constructor visual, sino que también lo hemos hecho en el constructor original. También hay algunos nuevos, como Ctrl
+ P
, que lanzará una vista previa en vivo de cualquier elemento que esté editando.
Atajos de página
- Guardar página:
Ctrl
+S
- Guardar página como borrador:
Ctrl
+Shift
+S
- Deshacer:
Ctrl
+Z
- Rehacer:
Ctrl
+Shift
+Z
- Abrir historial:
H
- Abrir portabilidad:
P
- Abrir ajustes de página:
O
Atajos de módulo
- Cortar módulo:
Ctrl
+X
- Copiar módulo:
Ctrl
+C
- Pegar módulo:
Ctrl
+V
- Copiar módulo y arrastrar:
Alt
+ mover módulo - Desactivar módulo:
D
- Bloquear módulo:
L
- Cambiar estructura de columnas:
C
+1
/2
/3
/4
- Añadir nueva fila:
R
+1
/2
/3
/4
- Añadir nueva sección:
S
+1
/2
/3
- Abrir ajustes de módulo: Doble clic en el módulo
Atajos de ventana modal
- Cerrar:
Esc
- Guardar cambios:
Enter
- Cambiar a pestaña:
Shift
+Tab
- Vista previa del módulo:
Ctrl
+P
Mejoras en estabilidad y corrección de errores según Elegant Themes
Desde el lanzamiento de Divi 3.0, nuestro equipo ha estado trabajando sin pausa para corregir errores e implementar enmiendas de compatibilidad casi a diario, de acuerdo con los problemas que nos han reportado los usuarios en los foros de soporte. Estamos comprometidos en garantizar una excelente experiencia con el nuevo constructor visual.
Divi 3.0 fue el lanzamiento de producto más grande de todos los tiempos, y en seguida nos hemos enfocado al 100% en el soporte y desarrollo de recursos para asegurar que el constructor visual funcione bien para todos. Desde que nuestra comunidad ha puesto a prueba el nuevo constructor con una combinación diferente de plugins, temas hijos, configuraciones de servidor, navegadores y complementos de navegadores, hemos podido identificar problemas y actualizar Divi con un montón de mejoras de compatibilidad y estabilidad. Aunque hicimos una prueba beta de Divi 3.0 durante semanas, cerrada a mil clientes, no nos fue posible abarcar todo. Para vuestra tranquilidad, estamos dedicados completamente a ayudar a todos, y muy contentos con la velocidad a la cual hemos podido encargarnos de los inconvenientes descubiertos hasta el momento.
Habrán podido notar los varios avisos de actualización que aparecieron recientemente en el escritorio de WordPress. Aunque en líneas generales hacemos lanzamientos menores con una frecuencia semanal o mensual, decidimos romper esa tradición en este caso, y comprometernos a trabajar sin pausa para proporcionar actualizaciones diarias con las últimas mejoras del constructor visual. En el transcurso del último mes hemos actualizado Divi y Extra unas 15 veces, con una combinación de 140 mejoras. Inevitablemente, nuevos problemas van a surgir, pero al día de hoy las cosas están más estables, y de ahora en más la frecuencia de los lanzamientos se normalizará.
Si necesita ayuda con algo, no olvide abrir un hilo en el foro de soporte para que podamos resolverlo juntos.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Wow! Es genial, gracias por crear esta entrada! 😉
Excelente post.
No tenia ni idea que se pudiera realizar tantas operaciones con el teclado.
Es de gran ayuda saber estos detalles, ya que son los que marcan la difetencia para realizar un proyecto ahorrando un tiempo importante.
🙂