Atajos de teclado en Divi: cuáles son y cómo usarlos

Estos son fáciles de pasar por alto y a menudo se olvidan. Pero pueden acelerar tu flujo de trabajo si decides usarlos. El tiempo que ahorras al usar atajos de teclado en Divi en comparación con el tiempo que gastas en hacer los mismos pasos con solo el mouse puede ser considerable. Por eso es importante ver cuáles serían los atajos de teclado para Divi más provechosos para tu actividad de diseño diaria.

Déjame ponerlo en perspectiva con un ejemplo concreto. Imagina que en un proyecto promedio guardas la página unas cincuenta veces, copias y pegas módulos otras tantas, y abres el historial de cambios una y otra vez. Si cada una de esas acciones te toma tres o cuatro segundos buscando el botón correcto con el mouse, en una sola jornada de diseño estás perdiendo varios minutos en pura navegación. Multiplica eso por todos los proyectos del mes y entiendes por qué los diseñadores que dominan los atajos trabajan notablemente más rápido.

Cómo abrir la lista de atajos dentro de Divi

Puedes encontrar una lista de los atajos de teclado dentro del modal de Divi Builder Helper. Simplemente, presiona la tecla Shift + el signo de interrogación (shift +?) en tu teclado desde Visual Builder y haz clic en la pestaña de atajos para verlos.

Esto es muy útil porque significa que nunca tienes que memorizar todo de golpe ni dejar este artículo abierto en otra pestaña. La referencia completa está siempre a un atajo de distancia dentro del propio constructor. Mi recomendación es que, mientras aprendes, tengas ese panel a mano y vayas consultándolo cada vez que dudes. Con la repetición, los atajos que más usas se te van fijando solos y dejas de necesitar la lista.

A continuación mostramos la lista oficial de los atajos de teclado en Divi disponibles:

Atajos de página

• Deshacer: Ctrl + Z
• Rehacer: Ctrl + Y / Cmd + Shift + Z
• Guardar página: Ctrl + S
• Guardar página como borrador: Ctrl + Shift + S
• Salir de Visual Builder: Ctrl + E
• Salir a Backend Builder: Ctrl + Shift + E
• Ampliación de vista previa receptiva: Ctrl + +
• Reducción del zoom de vista previa receptiva: Ctrl + –
• Alternar barra de configuración: T
• Configuración de página abierta Modal: O
• Modal de historial abierto: H
• Portabilidad Abierta Modal: P
• Listar todos los accesos directos: ?

Accesos directos del editor en línea

• Salir del editor en línea: Esc

Accesos directos del módulo

• Copiar Módulo: Ctrl + C
• Módulo de corte: Ctrl + X
• Módulo de pegado: Ctrl + V
• Copiar configuración de diseño del módulo: Alt + Ctrl + C
• Pegar configuración de diseño del módulo: Alt + Ctrl + V
• Deshabilitar módulo: D
• Módulo de bloqueo: L
• Ajustar relleno por 10px: Shift + Arrastrar
• Ajuste del relleno del espejo: Mayús + Alt + Arrastrar
• Ajustar relleno al lado opuesto: Alt + Arrastrar
• Copiar módulo: + Arrastrar Alt + Mover módulo
• Cambiar estructura de columna C + 1 / 2 / 3 / 4
• Hacer fila de ancho completo: R + F
• Cambiar ancho de canaleta: G + 1 / 2 / 3 / 4
• Aumentar relleno de fila: R + Izquierda/Derecha/Arriba/Abajo
• Aumentar el relleno de filas en 10px: Shift + R + Izquierda/Derecha/Arriba/Abajo
• Reducir relleno de fila: Alt + R + Izquierda/Derecha/Arriba/Abajo
• Agregar nueva fila: R + 1 / 2 / 3 / 4
• Aumentar el relleno de la sección: S + Izquierda/Derecha/Arriba/Abajo
• Aumentar el relleno de la sección en 10 px: Shift + S + Izquierda/Derecha/Arriba/Abajo
• Reducir el relleno de la sección: Alt + S + Izquierda/Derecha/Arriba/Abajo
• Añadir Nueva Sección: S + 1 / 2 / 3
• Abra la configuración del módulo: haga doble clic en el módulo.

Accesos directos modales

• Cerrar: ESC
• Deshacer: Ctrl + Z
• Rehacer: Ctrl + Y / Cmd + Shift + Z
• Guardar cambios: Entrar
• Cambiar pestañas Mayús + Tabulador
• Alternar expansión modal: Ctrl + Enter
• Alternar ajuste modal: Ctrl + Flecha izquierda / Flecha derecha

Consejo: Los atajos de relleno (padding) con la tecla Shift mientras arrastras son los que más subestima la gente. Mantener Shift presionado mientras ajustas el espaciado de un módulo te mueve en incrementos limpios de 10px, lo que te da márgenes consistentes en toda la página sin tener que escribir valores a mano. Una vez que lo pruebas, no vuelves a ajustar espaciados de otra forma.

Accesos directos del generador de backend

Los siguientes métodos abreviados de teclado están disponibles cuando Backend Builder está activo.

Atajos de página

• Guardar página: Ctrl + S
• Guardar página como borrador: Ctrl + Shift + S
• Deshacer: Ctrl + Z
• Rehacer: Ctrl + Mayús + Z
• Historial abierto: H
• Portabilidad abierta: P
• Configuración de página abierta: O

Accesos directos del módulo

• Módulo de corte: Ctrl + X
• Copiar Módulo: Ctrl + C
• Módulo de pegado: Ctrl + V
• Copiar módulo: + Arrastrar Alt + Mover módulo
• Deshabilitar módulo: D
• Módulo de bloqueo: L
• Cambiar estructura de columna: C + 1 / 2 / 3 / 4
• Agregar nueva fila: R + 1 / 2 / 3 / 4
• Añadir Nueva Sección: S + 1 / 2 / 3
• Abra la configuración del módulo: haga doble clic en el módulo.

Accesos directos modales

• Cerrar: ESC
• Guardar cambios: Entrar
• Cambiar pestañas: Mayús + Tabulador
• Módulo de vista previa: Ctrl + P

Texto, titulares y párrafo (Mac)

• H1 – ^ + ⌥ + 1
• H2 – ^ + ⌥ + 2
• H3 – ^ + ⌥ + 3
• H4 – ^ + ⌥ + 4
• H5 – ^ + ⌥ + 5
• H6 – ^ + ⌥ + 6
• Párrafo: ^ + ⌥ + 7

Texto, titulares y párrafo (Windows)

• H1 – Mayús + Alt + 1 (Windows)
• H2 – Mayús + Alt + 2 (Windows)
• H3 – Mayús + Alt + 3 (Windows)
• H4 – Mayús + Alt + 4 (Windows)
• H5 – Mayús + Alt + 5 (Windows)
• H6 – Mayús + Alt + 6 (Windows)
• Párrafo: Shift + Alt + 7 (Windows)

Los atajos que más vale la pena memorizar primero

La lista completa es larga y, si intentas aprenderla toda de una sentada, lo más probable es que no se te quede ninguno. Por eso quiero darte una ruta de prioridades basada en lo que de verdad usas a diario cuando diseñas con Divi. Domina primero estos y el resto vendrá solo con el tiempo.

El grupo más importante es el de las acciones universales: deshacer (Ctrl + Z), rehacer (Ctrl + Y) y guardar (Ctrl + S). Estos tres los vas a presionar decenas de veces por sesión, así que son los que más tiempo te ahorran a largo plazo. Justo después vienen los de manipulación de módulos: copiar (Ctrl + C), pegar (Ctrl + V) y, sobre todo, copiar y pegar la configuración de diseño (Alt + Ctrl + C y Alt + Ctrl + V), que te permiten replicar el estilo exacto de un módulo en otro sin rehacer nada a mano.

El tercer grupo que recomiendo dominar pronto es el de creación rápida de estructura: agregar una sección nueva (S + 1/2/3) y agregar una fila nueva con el número de columnas que quieras (R + 1/2/3/4). Construir el esqueleto de una página de esta forma es muchísimo más ágil que ir al menú visual cada vez. Cuando estos tres grupos te salgan sin pensar, ya estarás trabajando a una velocidad que se nota.

Consejo: No trates de memorizar los atajos estudiándolos en una lista. La mejor forma de fijarlos es obligarte a usarlos en tu próximo proyecto real, aunque al principio te haga ir más lento. Cada vez que tu mano vaya instintivamente al mouse para guardar o copiar, deténte y usa el atajo. En una o dos semanas de trabajo, esos movimientos se vuelven automáticos.

Diferencias entre el constructor visual y el de backend

Si observas las listas con atención, notarás que el constructor visual tiene bastantes más atajos que el de backend. Esto tiene una explicación lógica y conviene que la entiendas para saber en qué entorno conviene trabajar según lo que necesites hacer.

El constructor visual está pensado para el diseño en tiempo real, así que incorpora atajos finos para ajustar el relleno (padding), modificar la estructura de columnas al vuelo, cambiar el ancho de las canaletas y mucho más. Como ahí ves el resultado mientras editas, tiene sentido que tengas control granular sobre cada detalle del espaciado y la disposición sin levantar las manos del teclado.

El constructor de backend, en cambio, trabaja de forma más esquemática, mostrándote la estructura como bloques sin el renderizado visual completo. Por eso su set de atajos es más reducido y se concentra en lo esencial: guardar, copiar, pegar, crear secciones y filas, y manejar los modales. Una particularidad útil del backend es el atajo de vista previa de módulo (Ctrl + P), que no existe en el visual porque ahí simplemente ya estás viendo todo renderizado.

¿Los atajos de Divi funcionan igual en Mac y en Windows?

La mayoría sí, con la equivalencia habitual entre sistemas: donde en Windows usas Ctrl, en Mac normalmente usas Cmd. La diferencia más visible está en los atajos de formato de texto (titulares y párrafos): en Mac se usa la combinación Control + Option (^ + ⌥) más el número, mientras que en Windows se usa Mayús + Alt más el número. Por eso la lista oficial separa esos atajos en dos secciones, una para cada sistema operativo.

¿Por qué algunos atajos no me funcionan?

La causa más común es que el atajo solo funciona en el contexto correcto. Por ejemplo, los atajos de módulo requieren que el cursor esté sobre un módulo o que este esté seleccionado, no funcionan si tienes el foco dentro de un campo de texto. Otra causa frecuente es el conflicto con atajos del navegador o de alguna extensión instalada. Si algo no responde, revisa que estés en el entorno adecuado (visual o backend) y que ningún otro programa esté capturando esa combinación de teclas.

¿Cuánto tiempo ahorro realmente usando atajos en Divi?

Depende de cuánto diseñes, pero el ahorro es real y se acumula. Cada acción con atajo te ahorra unos pocos segundos frente a buscarla con el mouse, y como esas acciones se repiten cientos de veces por proyecto, el total termina siendo significativo. Más allá del tiempo en sí, hay un beneficio extra: mantener las manos en el teclado conserva tu concentración en el diseño y evita los micro-cortes que provoca estar saltando constantemente al mouse.

¿Puedo personalizar los atajos de teclado de Divi?

De forma nativa, Divi no incluye un panel para reasignar sus atajos a las combinaciones que tú prefieras: vienen predefinidos por Elegant Themes. Lo más sensato es acostumbrarte al set oficial, que está bien pensado y es consistente con las convenciones que ya conoces de otros programas (Ctrl + Z para deshacer, Ctrl + S para guardar, y así). Aprender los que vienen por defecto te sirve además en cualquier instalación de Divi, sin depender de configuraciones personales.

Si quieres aprender a usar Divi de manera profesional, revisa nuestro Curso básico de Divi donde te damos todos los detalles del tema si estás comenzando a usarlo.

Conclusión

Los atajos de teclado de Divi son una de esas mejoras silenciosas que no transforman tu diseño de un día para otro, pero que, sumadas a lo largo de semanas y proyectos, marcan una diferencia enorme en tu productividad. Lo mejor es que no tienes que aprenderlos todos: empieza por los esenciales (deshacer, guardar, copiar, pegar y crear estructura) y deja que el resto se incorpore de forma natural con la práctica.

Mi recomendación final es simple: ten siempre presente el atajo Shift + ? para abrir la lista completa dentro del propio constructor, y comprométete a usar al menos un atajo nuevo en cada proyecto. Esa disciplina pequeña es lo que, con el tiempo, te convierte en alguien que diseña con fluidez y sin fricción.

¿Te han servido? Cuéntanos en los comentarios que tal te han funcionado estos atajos de teclado para Divi. Y si quieres dar el siguiente paso y dominar el tema de principio a fin, explora todos los cursos disponibles en UXDivi y lleva tu nivel de diseño con Divi mucho más allá.