25 funciones Divi "ocultas" para impulsar la productividad y el diseño

Con todas las poderosas funciones de Divi que se han lanzado a lo largo de los años, es seguro decir que algunas de ellas pueden haber sido pasadas por alto (o ignoradas). Aquellos de nosotros que usamos Divi a diario podemos ocasionalmente quedarnos atascados en nuestras formas Divi y necesitamos un pequeño recordatorio de las nuevas funciones disponibles. Y aquellos que son nuevos en Divi pueden necesitar que alguien les arroje algo de luz sobre esas características que se “esconden” en un sitio sencillo. Independientemente de si eres un Divi Master o un joven, nunca está de más echar un vistazo a TODAS las funciones disponibles en Divi. ¡Puede que aprenda algo nuevo!

Para esta publicación, voy a destacar 25 funciones de Divi que están destinadas a impulsar la productividad y el diseño, pero que pueden haber escapado a la atención de muchos usuarios. Entiendo que no todas estas características serán nuevas para ti (algunas de ellas han existido desde el comienzo de Divi), pero estoy bastante seguro de que algunas te sorprenderán.

¡Disfrutar!

25 funciones Divi "ocultas" para impulsar la productividad y el diseño

Suscríbete a nuestro canal de Youtube

# 1 barra de búsqueda de opciones de búsqueda

Bien, este no es realmente tan "oculto", pero sospecho que algunos de ustedes no tienen el hábito de usar esta función. Lo entiendo. Los viejos hábitos tardan en morir, pero definitivamente vale la pena incorporar esta barra de búsqueda en su flujo de trabajo. Si necesita agregar relleno personalizado a su módulo, no se conforme con hacer clic en la pestaña de diseño, desplazarse hacia abajo, abrir la palanca de tamaño y luego agregar su margen personalizado. Simplemente escriba "margen" en la barra de opciones de búsqueda y ¡ya está! ¿Quiere asegurarse de que todas sus fuentes coincidan con un módulo determinado? Simplemente escriba la palabra "fuente" en la barra de opciones de búsqueda y actualice la fuente del cuerpo, la fuente del encabezado y la fuente del botón, todo en una pequeña lista.

Sugerencia: no es necesario que haga clic en una pestaña específica antes de realizar la búsqueda. Los resultados de la búsqueda se extraerán de todas las opciones de las tres pestañas sin importar dónde se encuentre en la configuración de texto.

La barra de búsqueda también se puede encontrar al agregar un nuevo módulo. Simplemente comience a escribir el nombre del módulo que desea y su módulo aparecerá en la parte superior de la lista sin tener que desplazarse para encontrarlo.

# 2 Coloque degradado sobre la imagen de fondo

Esta es una gran característica que mejora el proceso de diseño. Agregar superposiciones de degradado a las imágenes es una necesidad en el diseño web y esta característica facilita la adición de esas superposiciones dentro de Divi Builder. Simplemente agregue una imagen de fondo a su módulo y luego agregue un combo de color de fondo degradado. En las opciones de fondo degradado, seleccione "colocar degradado sobre la imagen de fondo". Solo asegúrese de tener una cierta cantidad de opacidad con sus colores degradados para que pueda ver la imagen detrás del degradado. Y con Visual Builder, puede ajustar fácilmente su degradado a la opacidad y el color perfectos para su imagen de fondo.

# 3 Alterne sus dos colores de fondo degradados: hay un botón para eso.

Esta no es una característica importante, pero quería mencionarla porque no podría dormir por la noche sabiendo que algunos de ustedes todavía cambian esos códigos de color manualmente. Obtener el fondo degradado correcto puede ser un desafío a veces, por lo que es bueno tener opciones como esta.

Para alternar sus colores, simplemente coloque el cursor sobre el selector de color y haga clic en el icono de "alternancia de color" (no estoy seguro del término oficial). Es el siguiente también, el icono de eliminar.

# 4 atajos de teclado

Estos son fáciles de pasar por alto y a menudo se olvidan. Pero acelerarán su flujo de trabajo si se compromete a usarlos. El tiempo que ahorra al usar teclas abreviadas en comparación con el tiempo que dedica a NO usarlas puede ser considerable. Quiero decir, hay una razón por la que aprendemos a mecanografiar en lugar de conformarnos con la escritura a mano (aunque disfruto de la escritura a mano). Y lo mismo ocurre con la creación de sitios web.

Puede encontrar una lista de sus atajos de teclado dentro del modal Divi Builder Helper. Simplemente escriba el signo de interrogación (shift +?) En su teclado desde Visual Builder y haga clic en la pestaña de teclas rápidas.

Ah, sí, se puede acceder a los videos de documentación de ayuda de la misma manera. No nos olvidemos de esos.

A continuación, se muestra una lista de todas las teclas de método abreviado disponibles. He resaltado los que sugiero comenzar con (personalmente los uso todo el tiempo):

# 5 Vista de estructura alámbrica

Menciono este porque llena el vacío de tener que ir a la compilación del backend mientras diseñas con el constructor visual. Entonces, para todos los fanáticos de los constructores de backend, pueden considerar dar el salto al constructor visual.

Y no se olvide de la tecla abreviada para abrir y cerrar la vista de estructura alámbrica: shift + w

Para obtener una vista aún más amplia de su diseño dentro de la vista de alambre, puede seleccionar el ícono de flecha de alternancia en cada una de sus secciones o filas para contraer toda la sección.

# 6 Edición en línea

Hay algunos lugares donde se puede realizar la edición en línea. Cuando está utilizando Visual Builder y desea editar el texto dentro de un módulo determinado, no tiene que hacer clic para editar la configuración del módulo para cambiar el contenido. Simplemente haga clic en el texto y el editor en línea se desplegará, lo que le permitirá editar el texto.

Cuando utiliza la vista de estructura alámbrica en Visual Builder, también puede editar las etiquetas en línea. ¿Quiere cambiar el nombre de una etiqueta de sección? No tiene que hacerlo desde el modal de configuración de fila o desde las opciones de clic derecho. Simplemente haga clic en la etiqueta y edítela allí mismo.

Consejo: salir del editor en línea puede resultar confuso, pero no tiene por qué serlo. Simplemente presione la tecla esc y estará fuera.

# 7 Prueba dividida de Visual Builder usando las opciones de clic derecho

Siempre me sorprende lo fácil que es usar la función de prueba dividida dentro de Visual Builder. No voy a entrar en detalles aquí porque puedes leer la versión completa de las funciones. Pero aquí está la esencia de cómo funciona esto. Haga clic con el botón derecho en la sección, fila o módulo que desea probar y luego seleccione prueba dividida en el menú contextual. A continuación, seleccione el objetivo de la prueba (entrada del formulario de contacto, clic en un botón, etc.). Divi creará automáticamente otra versión (dividirá) del elemento que está probando para que pueda crear una nueva versión. Cuando probé por primera vez esta función, no entendí cómo ver ambas versiones de mi prueba dividida desde el constructor visual, así que abrí la vista de estructura alámbrica para ver ambas. Pero esto no es necesario. Una vez que active un objetivo de prueba dividida, notará que aparecen flechas en el menú de configuración que le permiten deslizarse a través de las diferentes versiones de su prueba dividida.

# 8 Configuraciones de constructor personalizables

Si no ha explorado la configuración del generador, no es demasiado tarde. Aquí hay algunas configuraciones útiles que pueden mejorar su interacción diaria con Visual Builder.

Aquí hay tres que quiero destacar.

Configuración Modal Posición predeterminada

No sé ustedes, pero tengo cierta preferencia con respecto a cómo me gusta que aparezcan mis Modales cuando hago ediciones en mi monitor grande (es la posición fija de la barra lateral izquierda en caso de que se lo pregunte). Pero hay ocasiones en las que necesito romper la tradición y cambiar la posición modal (generalmente cuando estoy editando en una pantalla más pequeña como mi computadora portátil). Así que configuré mi posición predeterminada para que sea la barra lateral izquierda fija. De esa manera no me dejo engañar por trabajar con una posición modal con la que no me siento cómodo antes de darme cuenta de la necesidad de volver a colocarla como me gusta.

Configuración de grupo en conmutadores cerrados

De forma predeterminada, Divi agrupará sus opciones de configuración en conmutadores. Esto significa que tendrá que hacer clic para abrir esos botones para ver las opciones dentro de cada uno. Puede deshabilitar esa función para que su configuración ya no se agrupe en conmutadores, lo que le permite desplazarse por la configuración sin tener que hacer clic para ver más.

Modo de interacción predeterminado del constructor

Como muchas de las características enumeradas en este artículo, esta es definitivamente una preferencia personal. Pero puedo ver los beneficios de cada uno. El modo de interacción de desplazamiento predeterminado resalta e implementa el menú de configuración para cualquier sección, fila o módulo al desplazar el cursor.

El modo clic también puede resultar útil. A veces, es posible que no quede claro qué módulo está editando o sobre el que se desplaza, especialmente si los módulos están cerrados juntos y / o tienen márgenes personalizados. El modo de clic elimina las conjeturas por completo al resaltar y delinear el contenido del módulo al pasar el mouse antes de hacer clic para editar el módulo.

El modo Cuadrícula resaltará y mostrará el menú de configuración para todas las secciones, filas y módulos a la vez. Aunque personalmente no uso este modo como predeterminado, veo el valor de usar el modo de cuadrícula cada vez que estoy moviendo / reorganizando elementos a lo largo de mi página.

# 9 Opciones de diseño de enlaces, listas y citas en bloque con el módulo de texto

No se olvide de la nueva interfaz con pestañas para administrar estilos de texto personalizados dentro del Módulo de texto de Divi. Estas pestañas le permiten personalizar el diseño de sus enlaces, listas (sin ordenar y sin ordenar) y citas en bloque. Hacer estos cambios usando CSS puede ser complicado. Además, es posible que desee cambiar las cosas de un módulo a otro. Estas opciones le permiten hacerlo fácilmente.

Estas son dos de mis opciones favoritas que quizás hayas pasado por alto.

Opciones de estilo de lista

En las pestañas Listas ordenadas y desordenadas, puede cambiar fácilmente el tipo de estilo de la lista o deshacerse de todo junto.

También puede cambiar el margen de sangría para los elementos de la lista y la posición del estilo.

Opciones de estilo de cita en bloque

En la pestaña Blockquote, puede cambiar el peso y el color del borde del elemento de diseño que distingue al blockquote.

# 10 opciones de diseño para los 6 niveles de encabezado

En la misma nota que el n. ° 9 anterior, la nueva interfaz con pestañas también existe para los niveles de encabezado de texto. Eso significa que si tiene un módulo con varios encabezados (h1, h2, h3, etc.), puede darle 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, abra la sección Encabezado del título o Texto del encabezado y seleccione la pestaña que controla el tipo de encabezado que desea personalizar.

Sugerencia: sabrá qué niveles de encabezado se han personalizado mediante la etiqueta azul en la pestaña. Si la etiqueta permanece gris, la configuración predeterminada está activa para ese nivel de encabezado.

# 11 Cargue fuentes personalizadas con módulos Divi

¿Quién sabe? Tal vez el botón Cargar haya permanecido oculto en un sitio simple para algunos de ustedes. Si es así, definitivamente debería aprovechar esta conveniente función. No solo puede cargar fácilmente fuentes personalizadas en varios tipos de archivos (eot, woff2, woff, ttf, otf), Divi almacenará esas fuentes personalizadas para que estén disponibles para todos los módulos de su sitio.

Todo lo que necesita hacer es seleccionar para cambiar la fuente de un elemento de texto y hacer clic en el botón Cargar.

Aparecerá un modo de carga de fuente que le permitirá nombrar y agregar su archivo de fuente.

Una vez que haya seleccionado su archivo, haga clic en el botón de carga. Entonces podrá acceder a estas fuentes personalizadas desde la misma lista de fuentes incluidas en Divi Builder.

# 12 Eliminar el espacio debajo de la imagen

Esta función ha existido por un tiempo, pero existe la posibilidad de que se la haya perdido o que no comprenda su importancia.

Esta opción solo afecta a las imágenes cuando son el último módulo de 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 función es colocar las imágenes del encabezado de modo que bordeen la sección siguiente.

# 13 Agrega diferentes unidades para diferentes entradas

De forma predeterminada, cuando ingresa un número para ciertas entradas en la Configuración de Divi Builder, Divi lo tratará como una unidad de píxeles. Pero no está limitado a ingresar unidades de píxeles para estas opciones de entrada. También puede ingresar otras unidades, incluidas%, em, vh y vw.

Por ejemplo, los porcentajes funcionan muy bien para dispositivos móviles. Si establece un margen superior al 5% (en lugar de algo como 100 px) en el escritorio, el margen se escalará proporcionalmente al 5% del tamaño de la sección en el dispositivo móvil (en lugar de heredar un gran espacio de 100 px que sería demasiado espacio en movil). Esta es una buena técnica para mantener una sección en la mitad superior de la página en diferentes tamaños de navegador.

Incluso puede utilizar combinaciones de unidades. Es posible que desee mantener su altura fija estableciendo sus márgenes superior e inferior en un cierto número de píxeles y luego establezca sus márgenes izquierdo y derecho en un cierto porcentaje.

Todo lo que necesita hacer es escribir el sufijo de la unidad con su número al completar las diferentes entradas.

# 14 Estados de la historia

Los estados del historial son como una máquina del tiempo para sus ediciones dentro del constructor Divi. En lugar de usar las opciones de hacer clic derecho o las teclas de acceso rápido para deshacer y rehacer, puede ver cómodamente la lista de sus ediciones haciendo clic en el enlace Historial de edición 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.

Además, si selecciona un estado del historial para volver a un estado anterior, siempre puede volver a visitar la lista para avanzar a la última edición que realizó. Básicamente, le permite retroceder y avanzar a través de sus ediciones anteriores mientras ve esos cambios en tiempo real con Visual Builder.

Tenga en cuenta que estos estados del historial se guardan como una colección Backbone / objeto Javascript y no se guardan en su base de datos y no sobrecargarán su base de datos. Debido a esto, si sale del constructor cuando edita la página, no podrá revisar los estados del historial que hizo anteriormente. Así que asegúrese de mantener el edificio abierto hasta que haya finalizado su diseño. Los estados del historial comienzan cuando carga la página / constructor.

Opción de ancho de canal personalizado n. ° 15 (ideal para diseños de cuadrícula)

El ancho de la canaleta corresponde a la cantidad de espacio horizontal (margen) entre las columnas de cada fila.

Los valores opcionales para el ancho de la canaleta varían de 1 a 4.

1 representa un margen cero entre columnas.
2 representa un margen derecho del 3% entre columnas.
3 representa un margen derecho del 5,5% entre columnas.
4 representa un margen derecho del 8% entre columnas.

Esto definitivamente es útil para diseñar diseños de cuadrícula. Los diseños de cuadrícula se pueden crear manualmente utilizando estructuras de columnas y módulos, pero también puede asignar diseños de cuadrícula automáticamente dentro de ciertos módulos, como el módulo de cartera y el módulo de blog.

Por ejemplo, supongamos que desea crear un diseño de cuadrícula de ancho completo para mostrar imágenes sin ningún espacio entre ellas. Puede crear una nueva fila con tres columnas, agregar imágenes a sus columnas, hacer que la fila sea de ancho completo y luego darle un ancho de canalón personalizado de 1.

# 16 Opciones de clic derecho

Ubicación de funciones : simplemente haga clic con el botón derecho en cualquier sección desde Divi Builder.

Aunque no voy a repasar todas las opciones de clic derecho aquí, me gustaría señalar un par de opciones a las que solo se puede acceder al hacer clic derecho y que son simplemente demasiado convenientes para pasarlas por alto.

Cerrar con llave

Como administrador, solo usted tiene la capacidad de bloquear ciertos elementos. Esta es una forma conveniente de evitar que sus editores cambien el contenido que desea sin cambios. También lo protege de cambiar accidentalmente una sección importante.

Contraer y cambiar el nombre

Me encanta usar estas dos opciones en combinación mientras construyo páginas web más largas. No sé ustedes, pero me canso mucho de desplazarme hacia arriba y hacia abajo para encontrar las secciones que necesito editar. Es por eso que utilizo la opción de contraer con el botón derecho del ratón para condensar grandes secciones de mi página web que se han completado. Una vez contraído, utilizo la opción de clic derecho para cambiar el nombre de la sección y obtener una etiqueta de administrador reconocible.

# 17 Deshabilitar los enlaces del menú desplegable de nivel superior

Ubicación de funciones: Divi → Opciones de tema → Navegación → Configuración general

Para ser claros, los enlaces del menú desplegable de nivel superior son los enlaces principales principales que permanecen visibles en el menú de navegación. Los enlaces de nivel secundario son los que aparecen después de pasar el cursor sobre el enlace principal de nivel superior.

Al deshabilitar los enlaces del menú desplegable del nivel superior, los enlaces principales del nivel superior ya no son enlaces en los que se puede hacer clic. En su lugar, pueden servir como marcadores de posición en los que no se puede hacer clic que etiquetan y organizan sus subenlaces.

Por ejemplo, supongamos que está creando un sitio para una empresa que ofrece tres servicios principales y cada uno de estos servicios necesita su propia página. Una configuración normal sería tener un enlace de nivel superior llamado "servicios" con los tres tipos de servicios como elementos del submenú. En lugar de tener que lidiar con los enlaces a una página de servicios generales, puede desactivar el enlace de "servicios" de nivel superior y simplemente utilizarlo como una etiqueta organizativa.

# 18 Método alternativo de desplazamiento a ancla

Ubicación de funciones: Divi → Opciones de tema → Navegación → Configuración general

Si alguna vez ha intentado vincular directamente a una ID de CSS utilizando un enlace de anclaje desde una página externa, es posible que haya notado que la ubicación de descanso final de la página no es del todo correcta. A veces es demasiado bajo para que parte del contenido se corte en la parte superior.

Así es como se ve mi pantalla después de vincular mi ID de CSS desde una página externa. No puede verlo, pero el título de la sección ha sido cortado.

Habilitar el método alternativo de desplazamiento para anclar corrige este problema. No solo coloca al usuario en el lugar correcto, la parte superior de la página se carga primero antes de desplazarse a la ID de CSS. Encuentro esto útil para los usuarios que pueden confundirse y no darse cuenta inicialmente de que están viendo una sección de la página.

# 19 Ocultar logo en el móvil

Ubicación de funciones: Divi → Personalizador de temas → Estilos móviles → Menú móvil

Si alguna vez necesita ocultar su logotipo en un dispositivo móvil, Divi lo hace muy fácil. Pero es una de esas opciones que es fácil pasar por alto. Ahórrese algo de tiempo y no se preocupe por jugar con CSS adicional.

# 20 Menú principal y animación desplegable del menú secundario

Ubicación de la función del menú principal : Divi → Personalizador de temas → Encabezado y navegación → Animación del menú desplegable BAr del menú principal

Ubicación de la función del menú secundario : Divi → Personalizador de temas → Encabezado y navegación → Barra de menú secundaria -> Animación del menú desplegable

No tiene que conformarse con la animación de desvanecimiento predeterminada para sus menús desplegables. La sección Animación del menú desplegable incluye cuatro opciones:

1. Fundido (predeterminado)

2. Expandir

3. Deslizar

4. Voltear

A veces, microinteracciones como esta realmente pueden hacer que su menú se destaque.

# 21 Editar (o deshabilitar) los créditos de pie de página

Ubicación de funciones: Divi → Personalizador de temas → Pie de página → Barra inferior → Deshabilitar créditos de pie de página / Editar créditos de pie de página

Si ha estado usando Divi por un tiempo, es posible que se haya acostumbrado a editar la barra inferior de su pie de página editando el archivo footer.php en su tema hijo. Esto ya no es necesario.

Puede desactivar fácilmente la barra inferior por completo o puede insertar sus propios créditos de pie de página ingresando texto o html dentro del cuadro de texto.

# 22 Cambiar la paleta de colores predeterminada de Divi

Ubicación de la función : Divi → Opciones de tema → Ficha General → Paleta predeterminada de Selectores de color

Tómese un descanso de copiar y pegar códigos de colores hexadecimales.

La paleta predeterminada de Selectores de color es la paleta de colores que se utilizará en Divi Builder.

Si conoce el tema de color de su sitio web, simplemente actualice los colores predeterminados para incluir los colores necesarios para su diseño. Esta opción puede ahorrarle mucho tiempo a largo plazo, ya que podrá acceder a estos colores en todos los módulos cuando cree y edite su sitio.

# 23 Configuración de la página de Divi

Ubicación : icono de engranaje en el menú de configuración en la parte inferior del Visual Builder.

Desde Divi 2.7, la configuración de Divi Builder le permite establecer la configuración predeterminada (y anular la configuración del tema) para la página específica en la que está trabajando dentro de Divi Builder. Esta capacidad de establecer configuraciones específicas de la página es un ahorro de tiempo extremadamente conveniente para crear páginas de destino u otras páginas que necesitan un diseño específico que se desvía de la norma.

Puede establecer una paleta de colores para su página que anulará la paleta predeterminada en sus Opciones de tema.

También puede agregar CSS personalizado específico de la página. Dado que el CSS solo se cargará en la página específica, no tendrá que pasar por la molestia de apuntar a ID de publicaciones específicas o acceder al archivo style.css de su tema secundario.

Una característica única de la configuración de Divi Builder es la capacidad de habilitar el sistema de prueba dividida Divi Leads para su página. Esta poderosa herramienta es simplemente demasiado valiosa para ignorarla. Si aún no lo ha usado, ¡siga mi consejo y comience su primera prueba hoy!

# 24 Elija qué metainformación mostrar en las publicaciones de blog

Aunque esta característica de Divi ha existido desde el comienzo de Divi, puede pasarse por alto fácilmente. Cada una de las publicaciones de tu blog tiene cierta metainformación que se muestra debajo del título de la publicación (autor, categoría, fecha, comentarios). Pero, dependiendo de cómo esté utilizando su blog, es posible que no desee que esta información adicional distraiga del contenido que está proporcionando. Divi facilita la personalización de esta información.

Cambiar la metainformación para el diseño de una sola publicación

Ubicación : Divi → Opciones de tema → Diseño (pestaña) → Diseño de publicación única

Puede hacer clic fácilmente para deshabilitar o habilitar cada una de las cuatro piezas de metainformación para todas sus publicaciones de blog individuales haciendo clic en cada una de ellas. La metainformación desactivada se mostrará atenuada.

Cambiar la metainformación de los extractos de las publicaciones de la página del blog

Ubicación: Divi → Opciones de tema → Diseño (pestaña) → Configuración general

Para cambiar la metainformación que se muestra en los extractos de la publicación de la página de su blog, simplemente haga clic en cada uno de los cuatro meta elementos que desea que se muestren u oculten.

Si está utilizando el módulo de blog Divi para la página de su blog, la configuración anterior no funcionará. Deberá cambiar la metainformación que desea que se muestre en la Configuración general del módulo de blog.

# 25 El módulo de código

El módulo de código es una de las mejores características ocultas de Divi. Le brinda la posibilidad de agregar html a su página sin restricciones. El módulo también le permite agregar elementos html a ciertas páginas sin que afecte a otras páginas. Las capacidades del Módulo de código son infinitas, pero aquí hay algunas formas en que puede usarlo:

• Importe archivos CSS externos como Animate.css solo para la página que necesita animación.
• Agrega bloques de código javascript o bibliotecas que solo aplicaste a tu página.
• Integre complementos de terceros como el control deslizante de revolución.
• Puede utilizar el Módulo de código de ancho completo para incrustar un Typeform para cuestionarios más interactivos, formularios de contacto, etc.
• Agregar un menú de acción flotante
• Cree un anuncio de barra superior deslizable.
• Agrega un botón de acción flotante.

Para concluir

Cuando aprende algo por primera vez, a veces puede sentirse como beber de una boca de incendios, y hay cosas que sin duda se habrá perdido y deberá repasar. Mi objetivo con esta publicación era revisar algunas de esas características de Divi que creo que son fáciles de pasar por alto y demasiado útiles para ignorarlas.

¿Tiene alguna característica que crea que debería estar en la lista? Por favor comparta, estoy seguro de que todos nos beneficiaremos.

Espero sus comentarios.