L'aggiornamento Beaver Builder 2.7 è già qui! Quindi ti starai chiedendo quali nuove funzionalità aspettarti dal nostro generatore di pagine.

Beaver Builder 2.7 introdurrà una nuova interfaccia di modifica reattiva, un'interfaccia utente di visibilità e modifiche al codice per nodo. Potrai anche selezionare più tipi di post e integrare ACF Blocks Pro.

In questo post presenteremo il nuovo aggiornamento Beaver Builder 2.7. Quindi, ti mostreremo alcune delle sue nuove funzionalità. Iniziamo!

Un'introduzione a Beaver Builder 2.7

In Beaver Builder, abbiamo creato un plug-in per la creazione di pagine intuitivo che semplifica la creazione e la personalizzazione delle pagine WordPress. Indipendentemente dalle tue competenze, puoi progettare rapidamente il tuo sito web con il nostro editor visivo drag-and-drop, modelli di pagina predefiniti, Impostazioni globali e molto altro:

Beaver Builder è già uno strumento prezioso sia per i principianti che per gli sviluppatori web. Tuttavia, aggiorniamo costantemente il nostro software con miglioramenti e correzioni di bug.

In Beaver Builder 2.6 abbiamo aggiunto miglioramenti di usabilità al front-end e al back-end del nostro editor visivo. Questo aggiornamento ha introdotto blocchi riutilizzabili, modelli di micro pagine e un'anteprima di Google Fonts. Inoltre, puoi importare ed esportare le impostazioni globali e aggiungere nuovi valori di breakpoint.

Proprio quando pensavi che Beaver Builder non potesse migliorare, abbiamo lanciato un nuovo aggiornamento! Beaver Builder 2.7 offre un nuovo editor reattivo per l'anteprima delle visualizzazioni dei dispositivi mobili. Abbiamo anche sostituito il menu a discesa dei punti di interruzione con icone più intuitive.

Quando esegui l'aggiornamento alla versione 2.7, sarai in grado di personalizzare le impostazioni del codice per righe, colonne o moduli specifici. Permettiamo anche di selezionare più tipi di post. Infine, Beaver Builder 2.7 si integra completamente con ACF Blocks, dandoti accesso a un'esperienza avanzata di modifica dei contenuti.

5 nuove funzionalità e aggiornamenti che dovresti conoscere in Beaver Builder 2.7

Poiché questo è il nostro primo aggiornamento del 2023, approfondiamo un po' Beaver Builder 2.7. In questo modo conoscerai tutte le sue caratteristiche principali e le correzioni di bug prima di installare la nuova versione.

1. Modifica reattiva aggiornata

Nelle versioni precedenti di Beaver Builder, potevi utilizzare la modalità di modifica reattiva per ridimensionare le pagine per schermi diversi, nonché visualizzare e modificare i tuoi progetti su dispositivi mobili e tablet. Beaver Builder 2.7 include le seguenti nuove funzionalità per rendere i tuoi progetti ancora più precisi su dispositivi di tutte le dimensioni:

• L'interfaccia utente di Beaver Builder è ora in un iFrame e rende le anteprime reattive di dispositivi di diverse dimensioni accurate al 100%.
• Ora include anche l'intestazione e il piè di pagina del sito nell'anteprima. In precedenza si trattava solo del layout.

Eseguendo l'aggiornamento a Beaver Builder 2.7, avrai accesso a opzioni di modifica reattive avanzate. Innanzitutto, puoi visualizzare la pagina in quattro diverse dimensioni: extra grande, grande, media e piccola:

Inoltre, l'editor reattivo ti consente di impostare un'altezza e una larghezza personalizzate. Basta inserire una combinazione specifica di pixel e la schermata di modifica si aggiornerà automaticamente:

Successivamente, c'è un menu a discesa per modificare lo zoom. Questa impostazione ti consentirà di visualizzare la schermata di modifica al 100%, 75% o 50%. In alternativa, puoi scegliere Adatta alla finestra :

Per personalizzare ulteriormente l'editor, abbiamo aggiunto delle frecce di ridimensionamento nella parte inferiore e ai lati dello schermo. Questi elementi possono fornire molta più flessibilità durante la progettazione della pagina:

Beaver Builder ora semplifica l'adattamento di dispositivi di varie dimensioni. Utilizzando le nostre nuove funzionalità di modifica, puoi garantire che ogni pagina del tuo sito WordPress sia reattiva e ottimizzata per i dispositivi mobili!

2. Interfaccia utente di visibilità

Beaver Builder supporta già punti di interruzione personalizzati per diverse dimensioni dello schermo. Ciò significa che puoi impostare la larghezza dei pixel che modifica il comportamento reattivo da dispositivi grandi, medi e piccoli.

Quando definisci i punti di interruzione, è importante tenere a mente questi valori predefiniti:

Ad esempio, la maggior parte degli iPad ha un orientamento orizzontale di 1024 x 768 pixel, mentre quello verticale sarebbe di 768 x 1024 pixel. In questo caso, l'orientamento orizzontale è adatto a un dispositivo di grandi dimensioni, mentre il valore verticale si adatta a un dispositivo piccolo.

In Beaver Builder, queste impostazioni dei punti di interruzione si trovano in Visibilità nella scheda Avanzate . Utilizzando una versione precedente del nostro generatore di pagine, vedrai opzioni come Solo dispositivi grandi e medi o Solo dispositivi piccoli :

Beaver Builder 2.7 aggiorna questa impostazione con icone intuitive. Invece di scegliere da un ampio menu a discesa, puoi semplicemente selezionare o deselezionare determinate icone delle dimensioni del dispositivo:

Questa semplice modifica semplifica la personalizzazione di righe, colonne o moduli da visualizzare su schermate diverse. Utilizzando Beaver Builder 2.7, puoi personalizzare la visibilità dei tuoi layout in modo rapido e semplice!

3. CSS e JavaScript per nodo

Finora abbiamo discusso di come Beaver Builder 2.7 aggiorna alcune impostazioni preesistenti per rendere l'interfaccia più user-friendly. Tuttavia, stiamo anche introducendo alcune nuove opzioni di modifica!

Ad esempio, ora puoi modificare il codice per nodi specifici. Ogni riga, colonna e modulo include un editor CSS e JavaScript nella scheda Avanzate .

Anche dopo l'aggiornamento alla versione 2.7, dovrai abilitare CSS e JavaScript per nodo. Poiché questa impostazione è disabilitata per impostazione predefinita, vai su Impostazioni > Beaver Builder > Avanzate . Quindi attiva Abilita impostazioni codice :

Successivamente, apri le impostazioni per il modulo, la riga o la colonna specifica che desideri modificare. Fare clic sulla scheda Avanzate e scorrere fino in fondo. Qui vedrai i nuovi editor CSS e JavaScript:

Puoi aggiungere CSS e JavaScript personalizzati direttamente a singole righe, colonne o moduli utilizzando questa funzione. Quindi vedrai un'icona di codice allegata al nodo nel pannello di struttura:

Questa funzione ti darà maggiore controllo sull'aspetto e sulla funzionalità del tuo sito. Mentre aggiungi CSS e JavaScript per nodo, tieni presente che tutta la codifica avrà come ambito il nodo su cui stai lavorando.

4. Tipi di post a selezione multipla

In Beaver Builder 2.7 abbiamo migliorato anche il modulo Accordion. Essenzialmente, una fisarmonica visualizza un elenco di elementi con sezioni espandibili. In precedenza, questo modulo poteva includere i tuoi post o le tue pagine, ma non entrambi contemporaneamente:

Con Beaver Builder 2.7, il nuovo modulo Accordion supporta la selezione multipla di tipi di post. Dopo aver inserito il modulo, scegli Pubblica come origine contenuto . Quindi, puoi selezionare sia Articoli che Pagine come Tipo di articolo :

Per visualizzare il contenuto giusto, assicurati di filtrare i risultati con categorie e tag. Come con la versione precedente di Beaver Builder, puoi comunque personalizzare l'ordine e il numero di elementi visualizzati.

5. Integrazione dei blocchi ACF

Se vuoi iniziare a utilizzare blocchi personalizzati sia nell'editor dei blocchi che in Beaver Builder, abbiamo una soluzione! Il nostro aggiornamento 2.7 si integra completamente con i blocchi ACF:

ACF Blocks ti consente di creare tipi di blocchi personalizzati. Una volta registrato un nuovo blocco, sarà disponibile per l'inserimento in un post di WordPress o in una pagina di Beaver Builder. Ciò manterrà il tuo web design coerente in tutto il tuo sito web.

Per iniziare, dovrai registrare un blocco con ACF Blocks. In un file block.json , aggiungi i dettagli sul tuo blocco personalizzato:

 { "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" } }

Successivamente, apri il file PHP del tuo tema. Quindi, puoi configurare l'output per il contenuto del blocco:

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

Ora dovrai caricare il blocco utilizzando le funzioni. Ciò renderà il blocco personalizzato disponibile in ACF:

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

Infine, vai su Campi personalizzati in WordPress e aggiungi un nuovo gruppo di campi. Puoi utilizzare qualsiasi campo ACF, ma assicurati di selezionare Blocca come posizione:

Una volta creato il tuo blocco personalizzato, puoi iniziare a usarlo! In Beaver Builder, raggruppa i moduli disponibili per Blocchi ACF:

Quindi, inserisci semplicemente il tuo blocco. Proprio come un modulo Beaver Builder, potrai trascinarlo e rilasciarlo sulle pagine e personalizzarne le impostazioni:

Usando questa integrazione, puoi creare blocchi riutilizzabili che funzionano nell'editor nativo di WordPress e in Beaver Builder. Ciò ti consente di standardizzare il contenuto del design sui tuoi post e sulle tue pagine.

Conclusione

Eseguendo l'aggiornamento a Beaver Builder 2.7, avrai accesso a una versione più reattiva e flessibile del nostro generatore di pagine. Ora puoi personalizzare le pagine per i dispositivi mobili, aggiungere codice per nodi specifici e molto altro ancora.

Per riassumere, ecco cosa puoi aspettarti da Beaver Builder 2.7:

1. Modifica reattiva aggiornata.
2. Interfaccia utente di visibilità.
3. CSS e JavaScript per nodo.
4. Tipi di post a selezione multipla.
5. ACF blocca l'integrazione.

Le persone chiedono anche

Qual è l'ultima versione di Beaver Builder?

Beaver Builder 2.7 è l'ultima versione del nostro plugin. Supporta l'integrazione con ACF Blocks Pro, la selezione multipla di tipi di post e CSS e JavaScript per nodo. Troverai anche miglioramenti alla modifica reattiva che rendono Beaver Builder più preciso e più facile da usare.

Cosa fa Beaver Builder?

Beaver Builder è un generatore di pagine che può personalizzare visivamente il tuo sito Web WordPress. Il nostro plugin include moduli di contenuto drag-and-drop, modelli di pagina predefiniti, etichettatura bianca e impostazioni avanzate. Queste funzionalità lo rendono uno strumento flessibile sia per i principianti che per gli sviluppatori!

A proposito di Will Morris

Will Morris è uno scrittore dello staff di WordCandy. Quando non scrive di WordPress, gli piace portare in scena la sua routine di cabaret nel circuito locale.