21 funciones Divi para aumentar la productividad y el diseño en tus proyectos
La idea
Con la cantidad de características de Divi que se han lanzado a lo largo de los años, puede que algunas de ellas se te hayan pasado por alto y no las tienes localizadas. Quienes usamos Divi a diario, tenemos nuestra propia forma de trabajar con Divi. Y en ocasiones necesitamos un pequeño recordatorio de las nuevas funciones disponibles.
A los son nuevos en Divi les vendrá bien arrojar luz sobre esas características «escondidas» en el Tema. Independientemente de si eres experto en Divi o novato, vendrá bien ver todas las funciones disponibles en Divi. Tal vez encuentres alguna opción que «parcheastes» con un pluging sin saber que Divi ya tenía la solución.
Para este post, destacaré 21 características Divi que nos permiten aumentar la productividad y el diseño. Pero pueden haber pasado desapercibidas para muchos usuarios. Entiendo que no todas estas características serán nuevas para tí. Algunas de ellas han existido desde el comienzo de Divi. Sin embargo puede que algunas te sorprendan.
No se trata de enumerar todas las funcionalidades con que cuenta Divi. Sólo es una recopilación de las que me han parecido más interesantes. Seguro que este post irá creciendo con el tiempo al ritmo de las actualizaciones de Divi. Empecemos.
#1 La barra de búsqueda en el panel de ajustes del Constructor Visual
Esta funcionalidad no es díficil de encontrar. De hecho, cada vez que abrimos los ajustes de cualquier sección, fila o módulo en modo Constructor Visual, ahí estará. 
Seguro que esta opción la has visto un montón de veces. Probablemente no le has hecho mucho caso. Sin embargo, créeme si te digo que una vez te habitúes será difícil que no la uses.
Por ejemplo, si necesitas cambiar el relleno de una sección, fila o módulo. O cambiar el estilo para un tipo de encabezado. O ajustar sombras…cualquier opción que necesites. Sólo tienes que empezar a escribir y Divi te mostrará todas las funciones que asocie a lo que escribes.Y además no es necesario que estés en la pestaña adecuada. Divi lo busca por tí en todas las pestañas y te lo muestra ordenado. Una gozada, vamos. 
La barra de búsqueda también se puede encontrar acuando agregas un nuevo módulo. Simplemente empieza a escribir el nombre del módulo que necesitas y tu módulo aparecerá en la parte superior de la lista sin tener que desplazarte para encontrarlo.
Recuerda que esta barra de búsqueda solamente estará disponible cuando estés trabajando en modo Constructor Visual. Comentarte también que en algunas ocasiones puedes buscar algo que al no estar aún traducido al castellano, deberás introducir el término de búsqueda en inglés.
Por ejemplo, para algunas funciones de sombra, introduce shadow. De todas formas, aun así, es una herramienta que considero muy útil y que sin duda nos ayudará a mejorar nuestro flujo de trabajo en nuestros proyectos con Divi.
#2 Revertir a una Versión Previa de Divi
A partir de la versión 3.6 de Divi o la versión 2.6 si usas el tema Extra, ya es posible revertir a una versión anterior del tema. Tal vez en alguna ocasión has notado que algo no va bien después de ejecutar una actualización de Divi. Alguna incompatibilidad con algún plugin, o código que hay que adecuar.
En fin, que con un solo click puedes volver a una versión previa y solucionar los posibles errores antes de actualizar. Puedes encontrar esta opción en Divi > opciones del tema > actualizaciones (updates). Ahí verás un botón que te va a permitir retroceder a una versión previa:ROLLBACK TO THE PREVIOUS VERSION. Adjunto gif “robado amistosamente” de la web de Elegant Themes. 
Solo podrás cambiar de versión a partir de la 3.6, no de las anteriores. Por cierto, ya había un plugin que hacía esto mismo para tus temas y plugins pero precisamente con Divi no funcionaba.
#3 Cambiar la paleta de Color predeterminada de Divi
Dónde encontrar esta función: Divi → Opciones de tema → Pestaña General → Paleta predeterminada de seleccíón de colores
Cuando emprendes un proyecto, una buena estructuración de los contenidos redundará en una optimización de tu flujo de trabajo. Vamos, que currarás mucho mejor. Y uno de los factores claves de tu diseño será la elección de los colores. Para evitar ir copiando y pegando códigos de color hexadecimales según vas necesitando, usa esta función con cabeza.
Tómate tu tiempo para añadir los colores de tu web a tu paleta predeterminada. Luego, allí donde necesites aplicar los colores de tu web tendrás disponible tu paleta personalizada.
#4 Eliminar espacio debajo de la imagen
Esta característica lleva ya mucho tiempo implantada en Divi, pero pocas veces la utilizamos. Podemos encontrarla en los módulos de imagen, en el apartado separación de la pestaña Diseño.
Sólo afecta a las imágenes cuando son el último módulo en una columna. Cuando está habilitado, la distancia entre la parte inferior de la imagen y la siguiente sección se elimina, lo que permite que la imagen bordee la parte superior de la siguiente sección de la página.
Una forma de aprovechar esta característica es ubicar las imágenes de encabezado de manera que queden en el borde de la sección siguiente. 
#5 Colocar un degradado sobre una imagen de fondo
Esta funcionalidad mejora el proceso de diseño. Agregar las superposiciones de degradado a las imágenes puede mejorar el diseño web y esta característica facilita agregar esas superposiciones. Simplemente añade una imagen de fondo a tu módulo y luego agrega un degradado lineal o radial. En las opciones de fondo de degradado, selecciona «colocar degradado encima de la imagen de fondo» (posiblemente lo tengas en inglés: Place gradient Above Background Image).
Asegúrate de tener asignada opacidad a tus colores degradados para que puedas ver la imagen detrás del degradado. Fíjate en el ejemplo de la imagen de abajo. Le hemos superpuesto a la imagen un degradado radial cálido. Puedes ver el proceso en el vídeo al final de este post. 
#6 Vista Esquelética en el Constructor Visual
Si eres de los que suelen editar desde la vista de escritorio, ya va siendo hora de dar un pasito al frente. Dentro del constructor visual, disponemos de la vista esqueleto. Fíjate en la captura donde se muestran algunas opciones de edición (en rojo y amarillo). Es similar a la vista del escritorio de WordPress pero añade opciones interesantes que optimizan nuestro tiempo.
Cuando accedas al Constructor Visual, pulsa en el icono que ves en la captura de imagen. También puedes alternar esta vista con la estándar, con el atajo de teclado mayúsculas+w. Si te acostumbras a los atajos de teclado, tu vida con Divi será más fácil (y rápida).
Aunque sólo sea porque puedes editar directamente en esta vista los nombres de las secciones, filas o módulos, sin tener que entrar a sus ajustes, ya vale la pena. Pero además puedes desplegar o colapsar los paneles que contienen los contenidos, ya sean secciones o módulos.
#7 El módulo código
Esta módulo es uno de los módulos más olvidados de los que dispone Divi. Sin embargo podemos hacer cosas fantásticas con él.
Nos da la posibilidad de agregar elementos html, CSS o JavaScript a ciertas páginas sin que afecte a otras páginas. Las capacidades del Módulo de código son infinitas. Aquí tienes un par de tutoriales en los que hemos usado este módulo:
#8 Editar o quitar los Créditos de pie de página
Hasta no hace demasiado tiempo, para editar los créditos del pie de página había que tocar el archivo footrer.php o functions.php.
Ahora puedes hacerlo desde Divi → Personalizador de tema → Pie (de página) → Barra inferior → Desactivar créditos de pie de página / Editar créditos de pie de página
Puedes desactivar fácilmente la barra inferior por completo o insertar tus propios créditos de pie de página ingresando texto o html dentro del cuadro de texto. Tienes más opciones que afectan al footer, pero quería destacar éstas.
#9 Edición en línea
Hay algunos lugares, cuando estás utilizando el Constructor Visual, donde es posible editar el texto dentro de un determinado módulo. No tienes que abrir los ajustes para editar la configuración del módulo y cambiar el contenido. Simplemente haz clic en el texto y aparecerá el editor en línea, que te permitirá editar el texto.
Recuerda que también puedes editar las etiquetas de las secciones/filas/módulos en la vista esqueleto del Constructor Visual (apartado #6) .
Consejo: Hay veces que salir del editor en línea puede ser confuso, y se hace pesado. Simplemente haz click fuera o presiona la tecla Esc y desaparecerá el editor.
#10 Configuración de página en Divi
Ubicación : icono de engranaje en el menú de configuración en la parte inferior del Constructor Visual.
También es posible acceder a los ajustes de página desde el escritorio, pulsando el icono de las tres rayitas horizontales en la parte superior de la página.
Desde Divi 2.7, podemos establecer configuraciones predeterminadas (y anular las configuraciones de tema) para la página específica en la que estés trabajando. Esta capacidad de establecer configuraciones específicas de la página supone un ahorro de tiempo interesante a la hora de crear páginas de inicio u otras páginas que necesitan un diseño distinto al resto.
Puedes establecer una paleta de colores para tu página que anulará la paleta predeterminada en las Opciones de tema. Cambiar los colores de fondo de esta página, colores predeterminados de texto (claro y oscuro) para sólo esta página, separación entre columnas, etc.
También puedes agregar CSS personalizado. Puesto que el CSS solo se cargará en la página específica, no tendrás que tomarte la molestia de seleccionar ID de publicación específicos o acceder a la hoja de estilos de tu tema hijo.
#11 Cargar fuentes personalizadas a nuestro sitio Divi
Ubicación : En cualquier módulo que incorpore texto, al elegir fuente, verás un botón que te permitirá cargar una fuente.
No solo puedes subir fácilmente fuentes personalizadas en varios tipos de archivos (eot, woff2, woff, ttf, otf), Divi almacenará esas fuentes para que estén disponibles para todos los módulos de tu sitio.
Sólo tienes que seleccionar cambiar la fuente de un elemento de texto y hacer clic en el botón SUBIR.
Aparecerá un menú emergente de fuente de carga que te permitirá nombrar y agregar tu archivo de fuente.
Después de que tu tipografía ha sido seleccionada, haz clic en el botón cargar. Luego podrás acceder a estas fuentes personalizadas desde la misma lista de fuentes incluidas en Divi.
#12 Historial de Ediciones en el Constructor Visual de Divi
Estos estados en tu flujo de trabajo están disponibles cuando estás editando en modo Constructor Visual. No es lo mismo que las revisiones disponibles en tu página o entrada cuando estás en el escritorio de WordPress.
Estos estados son como una máquina del tiempo para tus ediciones en el Constructor Divi. En lugar de utilizar las opciones de deshacer o rehacer con el botón derecho del ratón o teclas rápidas, puedes ver la lista de tus ediciones haciendo clic en el enlace Historial de Ediciones (1) en el menú de configuración.
Lo bueno de esta función es que enumera la marca de tiempo y una pequeña descripción para cada edición dentro de la lista de estado del historial (2).
Además, si seleccionas un estado de historial para volver a un estado pasado, siempre puedes volver a visitar la lista para avanzar a la última edición que hiciste. Básicamente, te permite avanzar y retroceder en tus ediciones anteriores mientras ves esos cambios en tiempo real con el Constructor Visual.
Ten en cuenta que estos estados históricos se guardan como un objeto Javascript y no se guardan en tu base de datos. Por esto, si sales del Constructor Visual al editar la página, cuando regreses no estarán disponibles ya los estados del historial que tenías. Así que asegúrate de mantener el Constructor Visual hasta que hayas finalizado tu edición. El historial de ediciones comienza cuando carga la página en el Constructor y se limpia cuando sales de éste.
#13 Opciones de Diseño para los 6 niveles de Encabezados
Si tienes un módulo con múltiples encabezados (h1, h2, h3, etc.) es muy fácil editar sus estilos. Puedes asignar a cada uno de esos encabezados un estilo único dentro de la configuración de diseño del módulo. En la pestaña Diseño, abre la sección Título Texto o Texto de encabezado. Luego selecciona la pestaña que controla el tipo de encabezado que quieres personalizar.
Truco: sabrás qué niveles de encabezado han sido personalizados por la etiqueta azul en la pestaña. Si la etiqueta permanece gris, la configuración predeterminada está activa para ese nivel de encabezado.
#14 Copiar y pegar estilos con las opciones de click derecho
Entra en modo Constructor Visual en tu página o entrada. Haz click con el botón derecho del ratón sobre una sección, fila o módulo.
En el menú contextual verás una lista de acciones posibles. Puedes deshacer, rehacer, guardar en biblioteca, etc. Pero me gustaría destacar la posibilidad de copiar los estilos de todo el módulo, fila o sección. A mí me parece una función con la que puedes ganar mucho tiempo. Al final tiempo es dinero.
Imagínate que deseas actualizar el diseño de una sección que creaste hace tiempo. Quieres modernizar el diseño porque tu cliente lo ha visto en la web. Tu sección está compuesta por tres anuncios. Cada uno de ellos destaca una virtud de los servicios de la empresa de tu cliente. Le dedicas un tiempo a aplicar nuevos ajustes a uno de los módulos anuncio. Sombra, colores, tipografías, borde, separación…Cuando estés satisfecho con el nuevo diseño simplemente copia los estilos con el botón derecho. Haz click nuevamente con el botón derecho en cada uno de los restantes anuncios y selecciona pegar estilos.
Todos los estilos se actualizarán a los nuevos ajustes respetando contenidos. Una gozada.
#15 El Uso Personalizado De Canalón De Ancho
En el tema Extra se llama Usar ancho personalizado de separación. Esta función puedes encontrarla en la pestaña Diseño > Tamaño de los ajustes de fila.
El ancho del canal corresponde a la cantidad de espacio horizontal (margen) entre las columnas en cada fila.
Los valores que puedes introducir para el ancho del canal varían de 1 a 4.
1 representa un margen cero entre columnas.
2 representa un 3% de margen derecho entre columnas.
3 representa un margen derecho del 5.5% entre columnas.
4 representa un 8% de margen derecho entre columnas.
Por ejemplo, supongamos que quieres crear un diseño de cuadrícula de ancho completo para mostrar imágenes sin ningún espaciado entre ellas. Puedes crear una nueva fila con tres columnas, agregar imágenes a tus columnas, hacer el ancho completo de la fila y, a continuación, asignarle un ancho de canal personalizado de 1.
#16 Deshabilitar enlaces de menú desplegable de nivel superior
Ubicación de la función: Divi → Opciones de tema → Navegación → Ajustes generales
Los enlaces del menú desplegable de nivel superior son los principales enlaces que permanecen visibles en el menú de navegación. Los enlaces de nivel inferior son aquellos que aparecen después de desplazarse sobre el enlace principal de nivel superior.
Al deshabilitar los enlaces del menú desplegable de nivel superior, ya no se puede hacer clic en éstos. En su lugar, pueden servir como marcadores de posición no seleccionables que etiquetan y organizan tus enlaces secundarios.
Por ejemplo, supongamos que estás creando un sitio para una empresa que ofrece cuatro servicios principales (líneas de negocio en la captura inferior) y cada uno de estos servicios necesita su propia página. Una configuración normal sería tener un enlace de nivel superior llamado «Líneas de negocio» con los 4 tipos de servicios como elementos del menú secundario. En lugar de tener que lidiar con el enlace a una página de servicios generales, puedes desactivar el enlace de «Líneas de negocio» de nivel superior y simplemente usarlo como una etiqueta organizativa.
#17 Método alternativo de desplazamiento al enlace
Ubicación de la función: Divi → Opciones de tema → Navegación → Ajustes generales
Si alguna vez has intentado vincular directamente a una ID de CSS utilizando un enlace de anclaje desde una página externa, es posible que hayas notado que el aterrizaje final de la página no es del todo correcto. A veces parte del contenido se corta en la zona superior.
Habilitar el método alternativo de desplazamiento al enlace corrige este problema. No solo pone la página en el lugar correcto, sino que la parte superior de la página se carga primero antes de desplazarse a la ID de CSS. Me parece útil para los usuarios que pueden confundirse y no darse cuenta inicialmente de que están viendo una sección de la página.
#18 Divisores de sección
Ubicación de la funcionalidad: Ajustes de sección → Pestaña Diseño → Dividers
Por si no lo sabías, podemos añadir fantásticas transiciones entre secciones de Divi sin una línea de código con suma facilidad. Simplemente ve a los ajustes de cualquier sección. Abre la pestaña diseño y busca la opción Dividers. Una manera sencilla de aumentar el nivel visual de nuestra página en segundos.
Ya hemos hecho un par de tutoriales sobre esta función de Divi. Pulsa los siguientes enlaces si quieres saber más de los divisores de sección.
- Un vistazo a los nuevos separadores entre secciones de Divi y un tutorial práctico
- Cómo aplicar divisores de sección a módulos en Divi
#19 Añadir url a casillas de verificación en los formularios Divi
Desde la entrada en vigor de la nueva Ley de Protección de datos, Divi incorporó la opción de incluir enlaces en el texto de las casillas de selección (checkbox) en los formularios.
Hasta entonces, era necesario usar código JavaScript para implementar esta opción. Ahora simplemente añade el link cuando configuras este elemento en tus formularios Divi.
Añade un campo tipo checbox a tu formulario y en las opciones añade el link al texto que quieras. Simple y fácil.
#20 Importar y exportar las opciones de Divi
Ubicación de la función: Divi → Opciones de tema
Divi incluye un completo panel de opciones personalizadas. Puedes controlar aspectos tales como el logo, los ajustes de navegación, y un monton de cosas más. Estas opciones están dentro del administrador de WordPress, en el menú Divi > Opciones del tema.
Configurar las opciones del tema puede ser una labor tediosa. Cada sitio web puede tener una configuración distinta. Sin embargo, muchas opciones serán comunes a la mayoría de webs. Lo normal es que a lo largo del tiempo vayas ajustando la configuración según te convenga. Al final conseguirás un ajuste fino y práctico.
Pues bien, esta configuración puedes guardarla simplemente como copia de seguridad o para aplicarla a otras webs. Y el ahorro de tiempo puede llegar a ser bestial.
#21 Personalizar la apariencia de nuestras publicaciones
Ubicación de la función: Divi → Personalizador de temas → Blog → Publicación
Cuando creamos un blog, muchos prefieren no activar Divi en las entradas. Normalmente para prevenir un trasvase sin complicaciones si decidimos cambiar de tema. No es mi caso. Yo prefiero crear una plantilla para mis entradas y guardarlo en la biblioteca. Jamás me ha dado problemas.
Pero si prefieres no usar Divi en tus entradas, puedes personalizar el aspecto para éstas desde el personalizador de temas > Blog > Publicación. Puedes cambiar el tamaño de texto, estilos, etc, para tus metadatos y texto de cabecera. Cuando termines de configurar, cada entrada nueva que crees, se hará de acuerdo a los estilos y ajustes que hayas introducido.
Por su puesto que puedes configurar más opciones con CSS, pero eso es otra historia…
# Conclusión
Evidentemente existen muchas funciones que seguro has echado de menos. En este post quería mostrarte una selección de las que considero menos utilizadas y sin embargo muy útiles. Tal vez en un futuro próximo cree un nuevo artículo con las opciones «olvidadas» en este. ¿Cuales habrías añadido tú? Espero tus comentarios
Y a continuación, el vídeo
gracias por el aporte
Un placer, Gelber
Saludos