La actualización de Beaver Builder 2.6 está aquí, trayendo consigo algunas características nuevas y útiles y optimización de front-end. En este artículo, cubriremos las características nuevas más notables en la actualización de Beaver Builder 2.6 y le mostraremos cómo usarlas en su sitio. ¡Vamos a ver!

Una introducción a Beaver Builder 2.6

Las actualizaciones anteriores de Beaver Builder 2.4 y 2.5 agregaron muchas plantillas y módulos nuevos a la mezcla. En lo que se enfoca la versión 2.6 es en mejorar lo que ya existe. Uno de esos cambios es la capacidad de hacer un uso completo de los bloques reutilizables, pero hay una serie de otros ajustes en la parte delantera y trasera que debe conocer.

Un par de mejoras notables en la calidad de vida que son fáciles de apreciar en esta actualización incluyen la adición de un punto de interrupción de dispositivo extra grande y vistas previas de fuentes de Google. También verá una nueva barra de búsqueda en la pestaña Guardado y la capacidad de importar, exportar y restablecer la configuración global de Beaver Builder.

Además, hay un par de mejoras de back-end que mejorarán su sitio automáticamente, como la optimización de la base de datos y los ajustes de la interfaz de usuario. También hay un puñado de correcciones menores, como es de esperar en cualquier actualización importante.

Nuevas funciones y actualizaciones que debe conocer en Beaver Builder 2.6

Si bien hay una larga lista de actualizaciones y correcciones incluidas con la versión 2.6 de Beaver Builder, estas son las mejoras más notables que puede esperar:

1. Bloques reutilizables

Los bloques reutilizables existen desde hace un tiempo en WordPress, pero en la actualización de Beaver Builder 2.6 ahora se pueden usar y actualizar automáticamente. En otras palabras, cuando se actualiza un bloque reutilizable en WordPress, también se actualizará en cualquier diseño de Beaver Builder donde esté presente.

¿Qué es un bloque reutilizable?

Los bloques reutilizables le permiten guardar un elemento o grupo de elementos en el Editor de bloques de WordPress para usarlos en publicaciones o páginas futuras. Si se encuentra recreando elementos similares una y otra vez, o si desea agregar un elemento o grupo de contenido anterior a una nueva publicación o página, esta característica puede ahorrarle mucho trabajo.

¿Cómo creo bloques reutilizables en WordPress?

Para crear bloques reutilizables en WordPress, primero seleccione el elemento o elementos que desea convertir en un bloque reutilizable. Haga clic en Más opciones en el extremo derecho del menú emergente y seleccione Agregar a bloques reutilizables . Luego simplemente asigne un nombre y guarde el nuevo elemento para agregarlo a su repositorio de bloques reutilizables:

¿Cómo agrego bloques reutilizables a una publicación en Beaver Builder?

Para agregar bloques reutilizables a una publicación en Beaver Builder 2.6, simplemente seleccione Bloques reutilizables en la sección Módulos estándar del Panel de contenido . Esto le dará opciones que puede arrastrar y soltar en su publicación como lo haría con cualquier elemento:

Para editar un bloque reutilizable, simplemente interactúe con él como lo haría con los elementos normales de la página. Tenga en cuenta que cualquier cambio que realice se reflejará dondequiera que exista actualmente ese bloque reutilizable en su sitio. Si desea cambiarlo solo para la instancia actual, seleccione la opción Convertir a bloque normal en el menú emergente.

2. Plantillas de micropáginas

Beaver Builder viene con una serie de plantillas de diseño integradas, que pueden ser un atajo útil para diseñar las páginas de su sitio web. Beaver Builder 2.6 agrega las siguientes nuevas microplantillas de aterrizaje:

• Aplicación de teléfono
• Enlace biográfico
• Lanzamiento de cuenta regresiva
• Pódcast

Para agregar una de las nuevas microplantillas de aterrizaje a su diseño, vaya a Panel de contenido > Plantillas y seleccione Micropáginas en el menú desplegable. Luego, puede hacer clic en su plantilla favorita para reemplazar el diseño existente o agregar un nuevo diseño:

Use una plantilla de diseño que sea similar al diseño que desea. Luego, cambie cualquiera de las configuraciones existentes, mueva los elementos y agregue su contenido para personalizar el diseño. O simplemente pruebe varias plantillas de diseño para inspirarse o aprender cómo se creó el diseño.

3. Nuevo punto de interrupción en la configuración global

Esta última actualización de Beaver Builder también agrega una opción de punto de interrupción adicional para diseños receptivos en la configuración global. Un punto de interrupción mide la cantidad de píxeles de ancho que muestra un dispositivo y establece diferentes diseños según ese ancho.

De forma predeterminada, estos son los siguientes recuentos de píxeles para diferentes dispositivos:

• Dispositivos grandes: 1200 píxeles
• Dispositivos medianos: 992 píxeles
• Dispositivos pequeños: 768 píxeles

En otras palabras, puede modificar cómo se muestra su sitio en una pantalla que tiene menos de 768 píxeles de ancho en comparación con una que tiene más de 1200 píxeles de ancho. Esto es importante para garantizar que los sitios web receptivos se vean bien sin importar qué dispositivos estén usando sus visitantes.

Para cambiar los ajustes preestablecidos para los puntos de interrupción en su sitio, vaya a Configuración global y desplácese hacia abajo hasta Diseño receptivo en la pestaña General . Simplemente ingrese el ancho de píxel para cada categoría y haga clic en el botón Guardar cuando haya terminado:

Puede establecer los valores que desea utilizar para cada punto de interrupción. Además, la nueva opción extra grande le brinda más control sobre cómo se verá su sitio en pantallas de alta definición (como un televisor 4K).

Esto significa que ahora hay una categoría más grande que el punto de interrupción de Dispositivo grande , que se llama Dispositivos extragrandes . Puede ver esta selección enumerada en la configuración de Punto de interrupción en la sección Visibilidad ubicada en la pestaña Avanzado de filas, columnas y módulos:

Tenga en cuenta que cuando actualice el complemento a la versión 2.6, todos los dispositivos configurados como Solo grandes se cambiarán automáticamente a dispositivos extragrandes y grandes.

4. Vista previa de fuentes de Google

Ahora puede obtener una vista previa de las fuentes de Google desde la sección Tipografía para ver cómo se verán antes de implementarlas. Esto le permite buscar rápidamente y elegir la fuente correcta en la ventana de selección, lo que le ahorra tiempo y lo ayuda a encontrar el ajuste perfecto.

Para obtener una vista previa de las fuentes de Google en Beaver Builder 2.6, vaya a Tipografía > Fuentes y luego haga clic en el cuadro desplegable Familia . Simplemente coloque el cursor sobre cualquier fuente individual en la sección de Google para ver una vista previa:

Anteriormente, tendrías que elegir una fuente para que entrara en vigor y pudieras ver cómo se ve. Esta nueva funcionalidad le permite buscar múltiples opciones para encontrar la mejor opción, sin ralentizarlo.

5. Barra de búsqueda en la pestaña Guardado

Ahora hay una función de búsqueda en la pestaña Guardado del panel Contenido . Puede usarlo para reducir los resultados al buscar elementos de contenido guardados, como filas, columnas y módulos. Si su pestaña Guardado se está llenando de módulos útiles y elementos de cuadrícula de uso común, una búsqueda rápida puede ayudarlo a encontrar lo que necesita.

Para usar la función de búsqueda en Beaver Builder 2.6, haga clic en la pestaña Guardado en la esquina superior derecha del panel Contenido . Luego, puede usar la nueva barra de búsqueda para reducir los resultados:

En lugar de desplazarse por un montón de opciones, puede escribir una palabra clave como "texto" o "fila" para que aparezcan los resultados más relevantes que ha almacenado. Esto puede ahorrarle tiempo y ayudarlo a ubicar elementos más rápido en su pestaña Guardado .

6. Importar, exportar y restablecer la configuración global

Otra opción que trae la actualización de Beaver Builder 2.6 es la capacidad de importar, exportar y restablecer la configuración global de Beaver Builder. Use esto para crear una copia de seguridad de su configuración o transfiérala a otro sitio que también use Beaver Builder. También puede restablecer su configuración a los valores predeterminados.

Las opciones para exportar, importar y restablecer la configuración de Beaver Builder se pueden encontrar yendo a la pestaña Configuración en el panel de administración de WordPress y seleccionando Beaver Builder . En la parte inferior de la página, verá una nueva pestaña llamada Importar/Exportar .

En esa pestaña, verá tres botones: Exportar configuración , Importar configuración y Restablecer configuración :

La primera opción, Configuración de exportación , creará un archivo que puede guardar como respaldo o usar en otro sitio. La configuración de importación le permitirá tomar un archivo exportado y aplicarlo al sitio actual. Finalmente, al elegir Restablecer configuración , se restablecerá la configuración global de Beaver Builder a sus valores predeterminados. Esto puede ser útil si está solucionando problemas o desea deshacer un cambio reciente.

7. Mejoras en el front-end

Hay algunas pequeñas mejoras en el front-end que automatizan los procesos comunes para ahorrarle tiempo y esfuerzo. Veamos cada uno brevemente.

Copiar y pegar actualización

Ahora puede copiar y pegar configuraciones de filas, columnas y módulos. Esto le ahorrará tener que reconfigurar varios elementos individualmente al realizar ajustes en el diseño de sus páginas. Incluso hay menús desplegables en la interfaz de usuario que le permiten copiar y pegar rápidamente estas configuraciones.

Simplemente coloque el cursor sobre el ícono de ajustes de cualquier fila, columna o módulo y haga clic en Copiar configuración para copiar la configuración de ese elemento:

A continuación, desplace el cursor sobre el elemento cuya configuración desea actualizar. Haga clic en el ícono de ajustes y haga clic en Pegar configuración para aplicar los cambios.

Filtrar módulos de publicación por campo personalizado

Puede seleccionar varios tipos de publicaciones (publicaciones, carrusel de publicaciones, control deslizante de publicaciones) en la pestaña Contenido . Hay filtros para cada tipo, por lo que puede ordenar sus opciones por categoría o buscar publicaciones y páginas con características específicas.

Datos dinámicos en pestañas y módulos de acordeón

Ahora es posible completar automáticamente los elementos en los módulos Pestañas y Acordeón con cualquier tipo de publicación, o usar elementos guardados dentro de ellos, como filas, columnas y plantillas. La nueva opción de contenido personalizado en ambos menús desplegables lo ayuda a lograr esto:

8. Mejoras de back-end

Por último, pero no menos importante, esta actualización de Beaver Builder realiza algunas mejoras notables entre bastidores para mejorar el rendimiento y la funcionalidad de su sitio. Estas no son características que notará de inmediato, pero deberían mejorar la experiencia general de Beaver Builder. Incluyen los siguientes cambios:

Ajustes de interfaz de usuario

Una refactorización de UI CSS agrega coherencia a las propiedades personalizadas, como fuentes, colores y tamaño. La superposición de la interfaz de usuario también se ha perfeccionado, mejorando las características destacadas en el área del lienzo y la sensación de la interfaz de usuario superpuesta del constructor.

Correcciones de visibilidad

Se han solucionado algunos problemas con la nueva configuración de visibilidad de puntos de interrupción. Esto garantiza que cualquier configuración anterior a la actualización de Beaver Builder 2.6 se traducirá en la nueva jerarquía de configuración.

Ajustes avanzados

Notará un nuevo panel en la pestaña Avanzado de la configuración de Beaver Builder que le permite habilitar y deshabilitar muchas de las opciones que anteriormente requerían un código personalizado. Esto puede ayudarlo a realizar la transición a la nueva actualización sin problemas, sin tener que limpiar manualmente el código antiguo para evitar conflictos.

La configuración avanzada incluye:

• Panel de contorno
• Edición en línea
• Sistema de notificaciones
• Recordar última pestaña utilizada
• Formas de fila personalizadas
• Limite las revisiones de WP para diseños
• Corrección de seguridad Mod
• Modo de datos pequeños
• Etiquetas de nodo
• Mostrar enlaces de acción duplicados en WP Admin
• Permitir que las páginas se puedan ordenar
• Mostrar enlace de acción duplicado en la barra de administración de WP
• Mostrar uso avanzado del módulo
• Fuentes de Google
• fuente impresionante
• Preferir GD para recortar imágenes
• Renderizar activos CSS/JS en línea

Reducción de la base de datos en la configuración guardada

Ahora, cuando el Modo de datos pequeños está habilitado en la pestaña Configuración avanzada, los campos que están vacíos/en blanco no se guardarán en la base de datos. Esto significa que no se rastrea ningún nodo sin un valor o que esté establecido en nulo. El resultado es una reducción de los metadatos de las publicaciones hasta en un 50 %. Los tamaños de archivo reducidos significan tiempos de carga más rápidos y un mejor rendimiento de la página, lo que incluso podría mejorar su SEO.

Conclusión

Ahora que sabe qué esperar de Beaver Builder 2.6, puede comenzar a planificar cómo mejorar su sitio con estas nuevas características.

En resumen, las nuevas actualizaciones y funciones más destacadas de la versión 2.6 de Beaver Builder incluyen:

1. Bloques reutilizables totalmente integrados
2. Nuevas plantillas de aterrizaje de micropáginas
3. Opción de punto de interrupción extra grande
4. Vistas previas de las fuentes de Google
5. Pestaña Guardado que se puede buscar
6. Importar, exportar y restablecer la configuración global de Beaver Builder
7. Mejoras en el front-end
8. Mejoras de back-end

Para obtener una lista completa de las actualizaciones, le gustaría leer sobre esta versión en nuestra base de conocimiento.