Alternar menú

¿Qué hay de nuevo en Beaver Builder 2.7?

Publicado: 2023-04-20

25 % de descuento en todos los productos de Beaver Builder... ¡Date prisa, la oferta termina pronto! Más información

beaver-builder-2.7
  • Constructor de castores

¿Qué hay de nuevo en Beaver Builder 2.7?

¡La actualización Beaver Builder 2.7 ya está aquí! Quizás se pregunte qué nuevas funciones puede esperar de nuestro creador de páginas.

Beaver Builder 2.7 introducirá una nueva interfaz de edición responsiva, interfaz de usuario de visibilidad y ediciones de código por nodo. También podrá seleccionar varios tipos de publicaciones e integrar ACF Blocks Pro.

En esta publicación, presentaremos la nueva actualización de Beaver Builder 2.7. A continuación, te mostraremos algunas de sus nuevas características. ¡Empecemos!

Tabla de contenido:

  • Introducción a Beaver Builder 2.7
  • Nuevas funciones y actualizaciones que debe conocer en Beaver Builder 2.7
    1. Edición responsiva actualizada
    2. Interfaz de usuario de visibilidad
    3. CSS y JavaScript por nodo
    4. Tipos de publicaciones de selección múltiple
    5. Integración de bloques ACF
  • Conclusión
  • La gente también pregunta

Introducción a Beaver Builder 2.7

En Beaver Builder, hemos creado un complemento de creación de páginas fácil de usar que facilita la creación y personalización de páginas de WordPress. Independientemente de sus habilidades, puede diseñar rápidamente su sitio web con nuestro editor visual de arrastrar y soltar, plantillas de página prediseñadas, configuraciones globales y mucho más:

Creador de páginas Beaver Builder

Beaver Builder ya es una herramienta valiosa tanto para principiantes como para desarrolladores web. Sin embargo, actualizamos constantemente nuestro software con mejoras y correcciones de errores.

En Beaver Builder 2.6, agregamos mejoras de usabilidad al front-end y back-end de nuestro editor visual. Esta actualización introdujo bloques reutilizables, plantillas de micropáginas y una vista previa de Google Fonts. Además, puede importar y exportar configuraciones globales y agregar nuevos valores de puntos de interrupción.

Justo cuando pensaba que Beaver Builder no podía mejorar, ¡lanzamos una nueva actualización! Beaver Builder 2.7 trae un nuevo editor responsivo para obtener una vista previa de las vistas de dispositivos móviles. También reemplazamos el menú desplegable del punto de interrupción con íconos más fáciles de usar.

Cuando actualice a 2.7, podrá personalizar la configuración del código para filas, columnas o módulos específicos. También hacemos posible seleccionar múltiples tipos de publicaciones. Finalmente, Beaver Builder 2.7 se integra completamente con ACF Blocks, brindándole acceso a una experiencia avanzada de edición de contenido.

5 nuevas características y actualizaciones que debes conocer en Beaver Builder 2.7

Como esta es nuestra primera actualización de 2023, profundicemos un poco más en Beaver Builder 2.7. De esta manera, conocerá todas sus características principales y correcciones de errores antes de instalar la nueva versión.

1. Edición adaptable actualizada

En versiones anteriores de Beaver Builder, podía utilizar el modo de edición responsivo para cambiar el tamaño de las páginas para diferentes pantallas, así como ver y editar sus diseños en dispositivos móviles y tabletas. Beaver Builder 2.7 incluye las siguientes funciones nuevas para que sus diseños sean aún más precisos en todos los tamaños de dispositivos:

  • La interfaz de usuario de Beaver Builder ahora está en un iFrame, lo que hace que las vistas previas receptivas de diferentes tamaños de dispositivos sean 100% precisas.
  • Ahora también incluye el encabezado y pie de página del sitio en la vista previa. Anteriormente, era sólo el diseño.
Edición responsiva

Al actualizar a Beaver Builder 2.7, tendrá acceso a opciones avanzadas de edición responsiva. Primero, puedes ver la página en cuatro tamaños diferentes: extra grande, grande, mediano y pequeño:

Tamaño de edición responsivo

Además, el editor responsivo le permite establecer una altura y un ancho personalizados. Simplemente ingrese una combinación específica de píxeles y la pantalla de edición se actualizará automáticamente:

Píxeles de página personalizados

A continuación, hay un menú desplegable para cambiar el zoom. Esta configuración le permitirá ver la pantalla de edición al 100%, 75% o 50%. Alternativamente, puede elegir Ajustar a la ventana :

Tamaño de ventana de página

Para personalizar aún más el editor, hemos agregado flechas de cambio de tamaño en la parte inferior y los lados de la pantalla. Estos elementos pueden proporcionar mucha más flexibilidad al diseñar la página:

Cambiar el tamaño de las flechas en Beaver Builder 2.7

Beaver Builder ahora facilita la adaptación a varios tamaños de dispositivos. Al utilizar nuestras nuevas funciones de edición, puede asegurarse de que cada página de su sitio de WordPress responda y sea compatible con dispositivos móviles.

2. Visibilidad de la interfaz de usuario

Beaver Builder ya admite puntos de interrupción personalizados para diferentes tamaños de pantalla. Esto significa que puede establecer el ancho de píxel que cambia el comportamiento de respuesta de dispositivos grandes a medianos y pequeños.

Al definir puntos de interrupción, es importante tener en cuenta estos valores predeterminados:

Grande Medio Pequeño
Valor de punto de interrupción predeterminado para el ancho del navegador indefinido 992px 768px
Rango de ancho del navegador 993px y superior 769-992px 768px y menos

Por ejemplo, la mayoría de los iPads tienen una orientación horizontal de 1024 x 768 píxeles, mientras que la vertical sería de 768 x 1024 píxeles. En este caso, la orientación horizontal se adapta a un dispositivo grande y el valor vertical se adapta a un dispositivo pequeño.

En Beaver Builder, estas configuraciones de puntos de interrupción se encuentran en Visibilidad en la pestaña Avanzado . Al utilizar una versión anterior de nuestro creador de páginas, verá opciones como Solo dispositivos grandes y medianos o Solo dispositivos pequeños :

Punto de interrupción de visibilidad

Beaver Builder 2.7 actualiza esta configuración con íconos fáciles de usar. En lugar de elegir de un gran menú desplegable, simplemente puede seleccionar o anular la selección de ciertos íconos de tamaño de dispositivo:

Iconos de puntos de interrupción de visibilidad

Este simple cambio hace que sea más fácil personalizar qué filas, columnas o módulos se muestran en diferentes pantallas. ¡Con Beaver Builder 2.7, puede personalizar la visibilidad de sus diseños de forma rápida y sencilla!

3. CSS y JavaScript por nodo

Hasta ahora, hemos discutido cómo Beaver Builder 2.7 actualiza algunas configuraciones preexistentes para hacer que la interfaz sea más fácil de usar. Sin embargo, ¡también presentamos algunas opciones de edición completamente nuevas!

Por ejemplo, ahora puedes editar el código de nodos específicos. Cada fila, columna y módulo incluye un editor de CSS y JavaScript en la pestaña Avanzado .

Incluso después de actualizar a 2.7, deberá habilitar CSS y JavaScript por nodo. Dado que esta configuración está deshabilitada de forma predeterminada, navegue hasta Configuración > Beaver Builder > Avanzado . Luego active Habilitar configuración de código :

La configuración de Beaver Builder 2.7 habilita la configuración del código

Después de esto, abra la configuración del módulo, fila o columna específica que desea editar. Haga clic en la pestaña Avanzado y desplácese hasta el final. Aquí verá los nuevos editores de CSS y JavaScript:

Personalizar CSS del nodo

Puede agregar CSS y JavaScript personalizados directamente a filas, columnas o módulos individuales utilizando esta función. Luego verá un ícono de código adjunto al nodo en el panel de esquema:

Código del panel de esquema

Esta característica le dará más control sobre la apariencia y funcionalidad de su sitio. A medida que agrega CSS y JavaScript por nodo, tenga en cuenta que toda la codificación se limitará al nodo en el que está trabajando.

4. Tipos de publicaciones de selección múltiple

En Beaver Builder 2.7, también hemos mejorado el módulo Accordion. Básicamente, un acordeón muestra una lista de elementos con secciones ampliables. Anteriormente, este módulo podía incluir tus publicaciones o páginas, pero no ambas al mismo tiempo:

Acordeón Castor Constructor

Con Beaver Builder 2.7, el nuevo módulo Accordion admite la selección múltiple de tipos de publicaciones. Después de insertar el módulo, elija Publicar como fuente de contenido . Luego, puede seleccionar tanto Publicaciones como Páginas como Tipo de publicación :

Tipos de postes de acordeón

Para mostrar el contenido correcto, asegúrese de filtrar los resultados con categorías y etiquetas. Al igual que con la versión anterior de Beaver Builder, aún puede personalizar el orden y la cantidad de elementos mostrados.

5. Integración de bloques ACF

Si desea comenzar a usar bloques personalizados tanto en Block Editor como en Beaver Builder, ¡tenemos una solución! Nuestra actualización 2.7 se integra completamente con ACF Blocks:

Complemento de bloques ACF

ACF Blocks le permite crear tipos de bloques personalizados. Una vez que registre un nuevo bloque, estará disponible para insertarlo en una publicación de WordPress o en una página de Beaver Builder. Esto mantendrá su diseño web consistente en todo su sitio web.

Para comenzar, deberá registrar un bloque con ACF Blocks. En un archivo block.json , agregue detalles sobre su bloque personalizado:

 { "name": "acf/bb-example-acf-block", "title": "ACF Example Block", "description": "An example ACF block that can be used in Beaver Builder.", "category": "bb-example-acf-blocks", "icon": "admin-appearance", "script": "file:./js/scripts.js", "style": "file:./css/styles.css", "supports": { "jsx": false }, "acf": { "mode": "preview", "renderTemplate": "template.php" }, "beaverBuilder": { "group": "ACF Blocks" } }

Después de esto, abra el archivo PHP de su tema. Luego, puedes configurar la salida para el contenido del bloque:

 <?php $heading = get_field( 'heading' ); $content = get_field( 'content' ); ?> <div> <h3><?php echo $heading; ?></h3> <p><?php echo $content; ?></p> </div>

Ahora necesitarás cargar el bloque usando funciones. Esto hará que el bloque personalizado esté disponible en ACF:

 add_action( 'init', function() { register_block_type( 'path/to/block.json' ); } );

Finalmente, vaya a Campos personalizados en WordPress y agregue un nuevo grupo de campos. Puede utilizar cualquier campo ACF, pero asegúrese de seleccionar Bloquear como ubicación:

Campo Bloques ACF

Una vez que hayas creado tu bloque personalizado, ¡puedes comenzar a usarlo! En Beaver Builder, agrupe los módulos disponibles por bloques ACF:

Bloques ACF

Luego, simplemente inserte su bloque. Al igual que un módulo de Beaver Builder, podrá arrastrarlo y soltarlo en páginas y personalizar su configuración:

Bloques ACF en Beaver Builder 2.7

Con esta integración, puede crear bloques reutilizables que funcionan en el editor nativo de WordPress y en Beaver Builder. Esto le permite estandarizar el contenido del diseño en sus publicaciones y páginas.

Conclusión

Al actualizar a Beaver Builder 2.7, tendrá acceso a una versión más flexible y con mayor capacidad de respuesta de nuestro creador de páginas. Ahora puede personalizar páginas para dispositivos móviles, agregar codificación para nodos específicos y mucho más.

Para revisar, esto es lo que puede esperar de Beaver Builder 2.7:

  1. Edición responsiva actualizada.
  2. Interfaz de usuario de visibilidad.
  3. CSS y JavaScript por nodo.
  4. Tipos de publicaciones de selección múltiple.
  5. ACF bloquea la integración.

La gente también pregunta

¿Cuál es la última versión de Beaver Builder?

Beaver Builder 2.7 es la última versión de nuestro complemento. Admite la integración con ACF Blocks Pro, selección múltiple de tipos de publicaciones y CSS y JavaScript por nodo. También encontrará mejoras en la edición responsiva que hacen que Beaver Builder sea más preciso y más fácil de usar.

¿Qué hace Beaver Builder?

Beaver Builder es un creador de páginas que puede personalizar visualmente su sitio web de WordPress. Nuestro complemento incluye módulos de contenido de arrastrar y soltar, plantillas de página prediseñadas, etiquetas blancas y configuraciones avanzadas. ¡Estas características la convierten en una herramienta flexible tanto para principiantes como para desarrolladores!

Acerca de Will Morris

Will Morris es redactor de WordCandy. Cuando no está escribiendo sobre WordPress, le gusta presentar su rutina de comedia en vivo en el circuito local.

Nuestro boletín

Nuestro boletín se escribe personalmente y se envía aproximadamente una vez al mes. No es en absoluto molesto ni spam.
Lo prometemos.

Únase al boletín

Pruebe Beaver Builder hoy

Beaver Builder