Breakdance: guida completa al builder per WordPress

Se per costruire o rinnovare il tuo sito vorresti la comodità dei builder visivi più popolari ma anche un codice ottimizzato per la velocità e la SEO, questa guida a Breakdance fa al caso tuo.

Qui vedrai come Breakdance può aiutarti a creare pagine, template, ed elementi e stili globali per gestire il layout e la grafica del sito in modo organizzato ed efficace, senza bisogno di configurare il tema WordPress. 

Esamineremo nel dettaglio le funzionalità della versione gratuita e vedremo cosa offrono in più i piani a pagamento. 

E ovviamente non potrà mancare un confronto tra Breakdance ed Elementor. 

Cos’è Breakdance?

Breakdance è un builder per siti WordPress di Soflyy, azienda già nota per aver creato Oxygen, plugin builder apprezzato anche dagli sviluppatori.

Rispetto a Oxygen, Breakdance è progettato per essere più intuitivo e quindi adatto a un pubblico più ampio e, probabilmente per questo, è disponibile con abbonamenti annuali e supporto premium anziché licenze ‘a vita’, ed è più costoso. 

A differenza di altri site builder come Divi o GeneratePress, Breakdance non è un tema, ma un plugin in grado di sostituire il tema WordPress.

Louis Reigold e il suo team hanno voluto proporre un’alternativa a Elementor, cercando di offrire la comodità e l’immediatezza del builder più amato dagli utenti WordPress non avanzati, ma senza gli svantaggi che gli vengono attribuiti.

Ci sono riusciti? 

Breakdance vs Elementor

Volendo fare un confronto tra Breakdance ed Elementor, non si può non parlare di due aspetti.

Innanzitutto Breakdance è stato proprio pensato come strumento facile per costruire in siti leggeri ed efficienti. Quindi per risolvere a monte il problema del codice superfluo generato da altri builder visivi, non inserisce elementi HTML inutili. Inoltre, a differenza di Elementor, carica solo gli script e i CSS usati nella pagina e non usa librerie Javascript pesanti.

Un altro punto sottolineato dai creatori di Breakdance è il costo inferiore, a cui si aggiunge il risparmio complessivo sui plugin WordPress, perché le funzionalità integrate nella versione premium rendono inutili molti componenti aggiuntivi a pagamento necessari su siti creati con Elementor. E con meno plugin installati il sito è anche più leggero e più semplifice da gestire.

Breakdance: piani e prezzi

Breakdance offre un piano gratuito, e 3 piani a pagamento con garanzia soddisfatti o rimborsati di 60 giorni.

Spesso soppesare le differenze di funzionalità e prezzo delle varie versioni di plugin e temi richiede un po’ di impegno; qui invece no, la proposta è davvero chiara e semplice. I creatori di Breakdance ci offrono 4 opzioni:

• un piano gratuito con funzionalità limitate;
• un piano Pro con tutte le funzionalità premium ma per un solo sito;
• un piano Pro senza limite di installazioni;
• un piano Agency, identico al piano Pro ma con agevolazioni per le web agencies.

FREE – utilizzabile su un numero illimitato di siti – contiene le funzionalità di base per costruire un sito WordPress e una versione limitata di quelle che servono a creare popup e form, usare dati dinamici e integrare WooCommerce. Nella versione gratuita anche la Design Library contiene meno template (80), e gli autori sembrano aver intenzione di riservarla presto ai clienti pro.

Nel piano Free mancano la possibilità di creare i propri template e la funzione One-Click Websites, che consente di importare modelli di siti completi di layout, contenuti e stili per diversi tipi di business o progetti. 

Però anche la versione gratuita contiene gli accorgimenti per migliorare le prestazioni e la SEO del sito, e una cache per il CSS.

PRO 1 WEBSITE – piano a pagamento più economico a circa 100$ all’anno – contiene la stessa versione di Breakdance degli altri piani premium, da cui si differenzia solo perché utilizzabile su un unico sito.

Comprende quindi l’intera Design Library con i 145 template, i design preset per i blocchi dell’editor, tutte le funzioni dei builder per i form e per i popup, comprese integrazioni con servizi per l’email marketing capaci di rendere superflui tanti plugin WordPress per la newsletter; la possibilità di sfruttare a pieno i template accedendo a tutte le condizioni di visualizzazione e di gestire il codice dall’interfaccia di Breakdance.

PRO UNLIMITED WEBSITES costa attualmente circa 200$ all’anno, per cui è molto più conveniente per chiunque abbia più di un sito.

AGENCY – circa 800$ all’anno – aggiunge alle funzionalità premium alcuni elementi comodi per le agenzie come supporto tecnico, programmi di affiliazione e sconti sulle licenze rivendute dall’agenzia.

Installare Breakdance

A differenza della maggior parte dei plugin gratuiti, la versione free di Breakdance va scaricata dal sito ufficiale e installata con la stessa procedura di quelle a pagamento. 

Qui puoi cliccare su Get started sotto il piano che preferisci.

Se si tratta di Free dovrai inserire i dati personali e creare un account; in tutti gli altri casi anche configurare un metodo di pagamento. 

Dopo aver impostato anche nome utente e password, fai clic sul pulsante Free Download in fondo alla pagina.

Se stai acquistando un piano a pagamento, andrai prima al checkout; mentre se hai scelto la versione gratuita, ti troverai subito nella pagina da cui scaricare il plugin con clic sul pulsante giallo.

Qui trovi anche delle istruzioni per iniziare a usare il plugin per costruire i tuoi siti. 

Nel frattempo, all’indirizzo che hai inserito durante la creazione del profilo, dovresti aver ricevuto anche la mail con il codice della licenza, gratuita o meno; in ogni caso puoi recuperarlo in qualsiasi momento dalla tua pagina utente sul sito di Breakdance.

È arrivato il momento di aprire WordPress e installare Breakdance. Nel pannello di amministrazione del tuo sito, vai su Plugin > Aggiungi plugin e fai clic sul pulsante Carica plugin.

Ora vai su Scegli file e carica sul sito lo ZIP scaricato poco fa.

Fai clic su Installa ora.

Scegliendo Attiva plugin puoi portare a termine l’installazione di Breakdance.

Configurare Breakdance

Non appena finisci di installare il plugin, si apre la schermata Breakdance Setup Wizard, da dove ti puoi occupare della configurazione.

Per prima cosa è consigliato disattivare il tema del sito, e sostituirlo in pratica con il builder. Se decidi di tenere il tema, le sue impostazioni potrebbero influenzare il modo in cui vengono visualizzati gli elementi che inserisci con il plugin, interferendo con lo stile che scegli.

Qui c’è il campo in cui inserire il codice della licenza per i piani Pro.

Puoi scegliere se installare o meno l’integrazione per AnalyticsWP, un plugin che monitora il comportamento degli utenti che compilano i form; e se permettere la raccolta di dati anonimi sull’uso di Breakdance per il miglioramento del software.

Finito il setup, ti trovi nella Home di Breakdance, che contiene pulsanti per accedere alla libreria dei modelli, link ai tutorial, al gruppo Facebook e al canale YouTube, da cui arriva il video tutorial per principianti che vedi più giù.

Usare Breakdance per creare un sito

Su Breakdance hai 2 possibilità per creare le pagine del tuo sito: 

• inserire elementi col drag and drop; 
• oppure importare dei modelli preimpostati e personalizzarli.

In entrambi i casi, i primi passi sono gli stessi.

Prima di tutto crea una pagina come faresti normalmente in WordPress scegliendo nella barra laterale dell’admin Pagine > Aggiungi pagina. 

Nella schermata successiva aggiungi un titolo (ad esempio Homepage) e poi pubblica la pagina o salva la bozza.

 Poi clicca sul pulsante Edit in Breakdance.

La prima volta che apri il plugin, un popup ti chiederà se vuoi aprire la Design Library – archivio dei template – oppure proseguire con la creazione della pagina da zero. 

Partire da un modello già pronto è la strada suggerita dagli autori di Breakdance per iniziare a usare il plugin, soprattutto a chi non ha tanta esperienza di web design perché consente di farsi un’idea di come sono costruite le sezioni e impostati i vari elementi che compongono le pagine. Se decidi di seguirla, clicca sul pulsante per aprire la libreria e vai al paragrafo successivo.

Design Library 

Ti trovi così nella Design Library, a cui d’ora in poi potrai accedere anche dall’apposito pulsante nell’editor. Qui hai la possibilità di scegliere tra decine di template raggruppati per settore. 

Se clicchi accanto a DESIGN SET apri un menù a discesa in cui ciascuna voce rappresenta un gruppo di modelli – per esempio fitness, security, car wash, dental ecc. 

Selezionando la prima voce del menù (This Website) puoi accedere invece ai tuoi template già salvati, se ne hai.

I modelli sono di 3 tipi:

• UI kit – kit per l’interfaccia utente – insieme di componenti grafici base preimpostati;
• Sections – porzioni di pagina web complete di layout; 
• Complete site (siti completi).

Questo ad esempio è quello che trovi dentro l’UI kit Samba:

Come vedi i componenti, o Sections, sono raggruppati in base alla funzione, ad esempio portfolio, form, shop, intestazioni, recensioni, icone per il pagamento, ecc. 

Per visualizzarli fai clic su View Sections.

Questi ad esempio sono alcuni dei modelli che trovi all’interno di Portfolio:

I modelli sono in effetti molto belli e comodi, in più si possono assemblare nei modi più vari.

Per importare il primo componente del tuo design ti basta entrare in una sezione, scegliere un elemento e importarlo. Prima però, devi importare le impostazioni globali facendo clic sul pulsante Import Global Settings, altrimenti potrebbe non essere visibile.

Conferma che sei consapevole che le impostazioni precedenti del tuo sito gestite dal tema saranno sovrascritte.

Ora puoi procedere con la scelta degli elementi e costruire il tuo sito. Ti mostro un esempio in cui ho aperto la sezione Heros and Titles del Samba UI kit. 

Poi ho cliccato su add to page per inserire l’elemento nel mio sito.

Ed ecco l’hero nell’editor di Breakdance.

Con lo stesso metodo puoi importare tutti i componenti che ti servono e poi personalizzarli con l’editor di Breakdance. 

La Design Library è accessibile anche dal menù di Breakdance nella barra sinistra dell’admin; qui però sono visibili solo i modelli di siti e non singole sezioni o UI kit.

Headers

Da questa schermata puoi configurare tutte le intestazioni del tuo sito WordPress.

Configurare l’header

Vai su Breakdance > Headers e clicca su Aggiungi header.

Nella finestra che si apre, dagli un nome, ad esempio Header Principale; poi scegli dove mostrarlo:

• ovunque;
• sulle pagine ‘single’, in pratica tutte tranne gli archivi;
• negli articoli;
• nelle pagine;
• nei media;
• all’interno delle pagine archivio;
• sulla pagina 404;
• sulla pagina dei risultati della ricerca WordPress.

Gli utenti premium possono anche impostare delle condizioni per la visualizzazione delle intestazioni: in base allo status e al ruolo degli utenti, al loro browser e sistema operativo, alla data, al numero di sessioni ecc.; anche usando gli operatori logici AND e OR.

Nel campo Priority puoi decidere il livello di priorità che avrà la testata in caso di più testate che soddisfano le condizioni. 

Dopo aver salvato le modifiche, vedrai il tuo header attivo all’interno dell’elenco di template per intestazioni appena comparso.

Importare un modello di header

Anche in questo caso puoi importare un modello già pronto oppure costruire tutto da zero. In entrambi i casi devi entrare nell’editor cliccando su Edit with Breakdance.

Ora che sei sull’editor del plugin, vai su Add.

Entra nella Library cliccando sul pulsante.

Nel menù DESIGN SET in alto a sinistra, trovi diverse voci; puoi trovare modelli di header negli UI kit Samba e Barebones, oppure in This Website se ne hai già configurato per il tuo sito. 

Questa schermata contiene anche una barra di ricerca per trovarli più facilmente. Se il tipo di componente che stai cercando è presente nel set che hai aperto, ti comparirà una voce cliccabile proprio sotto la barra (nell’esempio, Headers).

Entra in Headers per sfogliare i modelli a disposizione.

Ricordati di selezionare prima Import Global Settings oppure il modello potrebbe non essere visualizzato.

Dopodiché vai sul modello di header che preferisci e clicca sul pulsante add to site, come abbiamo fatto per l’hero nell’esempio precedente.

La testata scelta comparirà nell’editor di Breakdance.

Anche l’header può essere personalizzato dall’editor del plugin e in qualsiasi momento puoi tornare in Headers > Edit in Breakdance e aprirlo per le modifiche. 

Le impostazioni dell’intestazione che abbiamo già incontrato restano sempre accessibili nella sezione Headers con un clic su Settings – sotto il nome dell’header.

Footers

Da questa schermata puoi impostare uno o più footer per il tuo sito WordPress, con un procedimento quasi identico a quello che abbiamo visto per l’header.

Configurare il footer

Vai su Breakdance > Footers e su Add Footer.

Nella schermata con le impostazioni, aggiungi il nome e scegli dove applicarlo; se hai un account premium puoi anche definire delle condizioni per l’applicazione ai diversi tipi di pagina del tuo sito.

Il footer che hai creato è ora visibile nell’elenco appena comparso. Dopo aver cliccato su Edit in Breakdance puoi personalizzarlo come sempre nel builder del plugin.

Le impostazioni del footer che hai appena scelto, invece, restano sempre accessibili cliccando su Settings in questo stesso menù.

Importare un modello di footer

Eccoci di nuovo nell’editor del plugin. Ora non ti resta che scegliere Add > Library per andare a cercare il modello di footer che fa al caso tuo.

Usa la barra di ricerca oppure sfoglia il design set e accedi ai template di footer disponibili.

Prima di fare qualunque altra cosa ricordati di cliccare sul pulsante Import Global Settings in alto a destra.

Come per tutti i componenti predefiniti, fai clic sul pulsante add to page quando compare e avrai il footer nel tuo sito.

Ora puoi personalizzarlo con l’editor di Breakdance.

Global blocks

I Global Blocks sono componenti che configuri una volta e riusi tutte le volte che vuoi e ovunque sul tuo sito WordPress – ideali per razionalizzare l’inserimento e la modifica di elementi ripetuti come call-to-action, moduli di iscrizione, testimonianze, card di eventi, ecc. E offrono anche un ulteriore vantaggio: quando modifichi un blocco globale, tutte le istanze di quel blocco si aggiornano automaticamente su tutto il sito. 

I Global Blocks sono simili ai Widget di WordPress, ma più flessibili e potenti, perché sono del tutto personalizzabili dal punto di vista grafico, possono incorporare elementi dinamici e layout anche complessi e supportano condizioni di visibilità; mentre i widget sono utili per usi basici e statici.

A differenza di template e header, che puoi posizionare anche dalle impostazioni di Breakdance, i blocchi globali vanno inseriti localmente nelle pagine.

Puoi farlo attraverso:

• l’elemento Global Block che trovi nel builder;
• il blocco dedicato in Gutenberg;
• lo shortcode apposito.

Ma prima vediamo come crearli.

Configurare un Global Block

Prima di tutto il blocco globale va configurato, in modo molto simile a quanto abbiamo visto per header e footer.

Per occupartene vai su Breakdance > Global Blocks e sul pulsante Add Global Blocks.

Nella finestra che si apre scegli un nome per il blocco e crealo cliccando sul pulsante Add Global Block. 

Eccolo nell’elenco dei blocchi globali che è comparso nelle impostazioni del plugin. 

Come vedi c’è anche lo shortcode che puoi incollare nell’editor di WordPress e in quello di Breakdance quando vuoi inserire il tuo nuovo blocco globale.

Il link Settings invece porta alle impostazioni, ma l’unico aspetto configurabile da qui è il nome del blocco.

Andiamo quindi a costruire il componente globale nell’editor del plugin cliccando, ancora una volta, su Edit in Breakdance.

Anche qui possiamo recuperare gli elementi che ci servono dalla barra laterale del builder, oppure aprire la Design Library e cercare dei componenti preimpostati.

Aggiungere un Global Block dall’editor

Per aggiungere un blocco globale a un contenuto dall’editor di Breakdance, devi aprire la pagina che ti interessa con l’editor usando il solito pulsante giallo, e poi cliccare su Add > Elements.

Ora bisogna trovare l’elemento Global Block tra gli elementi di Breakdance, magari sfruttando la barra di ricerca. 

Quando clicchi sopra il blocco, si apre un menù a tendina che contiene tutti i blocchi globali impostati fino a quel momento (nel mio caso solo uno).

Con un ulteriore clic puoi scegliere il blocco e lo vedrai comparire nell’anteprima della pagina sulla destra. 

Quello che vedi nell’immagine è un esempio.

Inserire un Global Block da Gutenberg

Per inserire un Global Block in Gutenberg, l’editor a blocchi di WordPress, ti basta cliccare sul pulsante ‘+’, cercare l’elemento aiutandoti con la barra e selezionarlo.

Ora puoi sfruttare il menù a discesa per scegliere il blocco che desideri inserire, proprio come abbiamo visto nell’editor del plugin.

Il risultato è lo stesso.

Inserire un Global Block tramite shortcode

Prima di tutto ti servirà lo shortcode, che puoi recuperare nella sezione Breakdance > Global Blocks e copiare. 

Dopodiché puoi incollarlo sia in Gutenberg che nell’editor di Breakdance.

In Gutenberg, come tutti gli altri shortcode, potrai inserirlo come se fosse un normale testo.

Nel builder del plugin invece, questo codice viene gestito attraverso gli elementi, quindi nel pannello Elements devi cercare Shortcode e poi cliccarci sopra.

Nel campo che appare incolla il codice. Se è tutto a posto, lo vedrai in tempo reale nell’anteprima.

Templates

I template di Breakdance sono modelli di contenuti che in un certo senso sostituiscono il tema WordPress, disponibili per pagine, articoli, archivi, prodotti WooCommerce, pagine di errore 404, risultati di ricerca e qualsiasi tipo di post personalizzato. I template ti permettono di trarre il massimo vantaggio dal lavoro fatto per costruire il layout e lo stile di una pagina perché puoi riusarli all’infinito; e in più consentono di modificare in un colpo solo tutte le pagine in cui li hai applicati. 

I modelli di Breakdance si configurano in modo molto simile a footer, header e blocchi globali.

Dal menù apri la sezione Templates e poi fai clic su Add Template. 

Dal menù a discesa scegli il tipo di modello che vuoi creare: 

• Single Product – prodotto singolo di WooCommerce;
• Shop Page & All Product Archives – pagina del negozio e archivi di prodotti WooCommerce;
• Specific Product Archive – categoria specifica di archivio prodotti;
• Single Post – articoli, pagine e custom post type;
• Post Archive – archivi degli articoli del sito, come tag, categorie, pagine autore;
• 404 Not found – pagina 404, mostrata quando un utente prova ad accedere a un URL inesistente;
• Search Results – pagina dei risultati di ricerca del sito;
• Custom Template – modello personalizzato applicabile ovunque tramite regole e condizioni di posizionamento del template.

Ecco che compare il tuo elenco di template dove trovi quello che hai scelto per iniziare, a cui andranno ad aggiungersi gli altri che creerai.

I template sono in parte preconfigurati, ma puoi modificare le impostazioni aprendole con clic su Settings, se sai quel che fai.

Comparirà un avviso che ti invita a leggere la documentazione sui template prima di modificare le impostazioni avanzate.

In questa sezione sono modificabili:

• titolo
• posizione nel sito
• condizioni
• priorità.

Ad esempio, nel caso del template Single Post, la Location di default sono gli articoli (Single/Articoli), la priorità è 20 e non è prevista nessuna condizione di visualizzazione.

Col menù Location puoi modificare la posizione e applicare il template a:

• tutte le pagine;
• contenuti ‘single’ di WordPress – articoli, pagine, pagina di apertura, media;
• archivi – pagine di tag e categorie, archivi per data, autore, tipo di post;
• altri contenuti, come pagine 404 o risultati di ricerca.

Anche nella versione gratuita, per i template è disponibile una decina di condizioni di visualizzazione, come Post ID o numero dei commenti o autore; ce ne sono più del doppio per gli utenti premium.

Con il tasto Edit in Breakdance puoi accedere alla personalizzazione del modello attraverso il builder del plugin e alla libreria.

Il tuo template appena aperto potrebbe già contenere header e footer, ad esempio se li hai impostati per essere visibili ovunque come ho fatto io.

Popups

Nella schermata Popups, accessibile dal menù di Breakdance nella barra laterale dell’admin, puoi creare finestre a comparsa che potrai personalizzare con l’editor. Grazie a questa funzionalità, per niente scontata per un builder gratuito, potresti riuscire a fare a meno di installare un plugin di popup per WordPress. Se ti serve un builder di popup avanzato però, lo trovi solo nella versione premium.

Come sempre per avviare la configurazione basta cliccare sul pulsante Add Popup.

Nella finestra successiva troverai impostazioni già viste per i template:

• titolo
• posizione nel sito
• condizioni.

In più ci sono 3 opzioni specifiche:

• Add Trigger – per definire l’azione che innesca l’apertura del popup: nella versione gratuita l’unica scelta è il clic sulla finestra, mentre in quelle premium ci sono 5 possibilità;
• possibilità di limitare il numero di visualizzazioni del popup alla stessa persona, nella stessa sessione, ecc;
• possibilità di non mostrare il popup se ne sono già comparsi altri.

Anche qui puoi andare all’editor cliccando su Edit in Breakdance per costruire il tuo popup da zero o importare un modello e adattarlo al tuo sito.

Andando su Add > Elements puoi cercare l’elemento Popup e trascinarlo nell’area di lavoro, e poi costruirlo con l’editor drag and drop inserendo elementi di testo e visivi.

Cliccando sopra l’elemento Popup puoi accedere alle impostazioni nella barra a sinistra. Nel primo pannello puoi:

• disattivare l’overlay;
• permettere lo scroll;
• disattivare il pulsante di chiusura; 
• decidere dopo quanto tempo mostrarlo;
• far chiudere la finestra in automatico dopo un tempo predefinito;
• aggiungere opzioni avanzate: classe CSS e ID HTML.

Nel secondo pannello, come sempre, puoi configurare le opzioni relative allo stile di tutte le parti, compreso il pulsante di chiusura; mentre nel terzo trovi le solite opzioni avanzate.

Vediamo degli altri elementi di Breakdance che possono aiutarti (anche) a costruire il tuo popup.

Form builder

Un’altra funzionalità utile è l’elemento Form Builder, che serve ad aggiungere un modulo da compilare personalizzato all’interno di qualsiasi pagina web – operazione che di solito richiede l’installazione di un apposito plugin per creare form su WordPress.

Il costruttore di form di Breakdance è disponibile come elemento nel pannello laterale dell’editor. Puoi aggiungerlo a una pagina come modulo statico, oppure renderlo dinamico inserendolo in una finestra popup.

Per creare un modulo popup basta inserire l’elemento Form Builder dentro l’elemento Popup, di cui parliamo meglio tra un attimo – come ho fatto qui.

Otterremo qualcosa del genere:

Nella versione Pro, è possibile collegare i form a sistemi come Mailchimp e Mailerlite e creare moduli per l’iscrizione alla lista mail. In questo caso non ci servirebbe il campo messaggio, e potremmo eliminarlo in un attimo dalle impostazioni dell’elemento, come vedremo tra poco parlando dell’editor.

A cosa servono i form nella versione Free?

I moduli gratuiti di Breakdance permettono di raccogliere informazioni dagli utenti come nome, email, messaggi ecc. e di spedire un’email automatica di notifica all’amministratore del sito e all’utente che ha compilato il modulo.

I dati possono essere salvati nel database e resi gestibili dall’amministratore attivando l’azione Store Submission (conserva l’invio) nelle impostazioni del Form Builder – l’unica disponibile con il piano gratuito.

Saranno accessibili nella sezione Form Submissions, che trovi nel menù di Breakdance nel pannello laterale di WordPress. 

L’editor di Breakdance

L’editor di Breakdance è il builder vero e proprio, che ti permette di costruire sia pagine singole per cui hai esigenze specifiche – per esempio una landing page –, che template di pagine, sezioni e blocchi globali che vuoi usare in modo sistematico sul tuo sito WordPress. 

Qualunque pagina o articolo può essere aperta e modificata con Breakdance, basta usare l’apposito pulsante giallo che trovi sempre nella barra orizzontale in alto.

Come quello di Bricks Builder, anche l’editor di Breakdance si divide in 4 parti:

• barra orizzontale
• pannello degli elementi a sinistra
• area di lavoro centrale
• pannello della struttura a destra.

Barra orizzontale

Nella barra in alto troviamo prima di tutto il pulsante Add da cui parte la costruzione delle pagine, l’icona dispositivo per il design responsive e quella con i tre puntini che permette di accedere ai Global Settings.

Poi c’è il menù da cui scegliere quali template editare – per esempio post singolo, archivio dei post, footer, header, blocchi globali –, che offre anche un campo di ricerca e dei filtri.

Un altro menù ti permette di selezionare la pagina su cui verrà mostrata l’anteprima durante la modifica ai template.

Pannello Elements

Il pannello Elements contiene i blocchi drag and drop per costruire le pagine. Puoi trascinarli in punti precisi dell’area di lavoro, oppure inserirli col clic ed eventualmente spostarli in un secondo momento.

Gli elementi sono divisi in 6 sezioni.

La sezione Basic raccoglie tutti i blocchi fondamentali per creare una pagina web: i contenitori che servono a strutturare la pagina, come sezione, colonne, griglie e div; e gli elementi di base come intestazioni e testi semplici, testi già formattati (rich texts), blocchi per link, immagini, video e icone – che vedi nell’immagine sotto.

La sezione Blocks ospita elementi più complessi. In questa immagine ad esempio ho inserito alcuni blocchi compresi nella versione gratuita: nella prima colonna, Icon box, Image box e Icon list; nella seconda colonna, Blockquote, FAQs, Basic Slider. I blocchi free sono una decina, quelli compresi solo nei piani a pagamento circa 30, tra cui ce n’è anche uno per inserire in WordPress le mappe di Google Maps.

Nella sezione Site trovi un solo elemento gratuito: WP Menu – menù di base per siti WordPress compreso ecommerce. Ci sono poi elementi premium per costruire header, menù e campi per la ricerca interna di WordPress.

La sezione Advanced contiene elementi come AnalyticsWP Event, per l’integrazione con AnalyticsWP e il tracciamento degli utenti da WordPress, e altri componenti avanzati come i blocchi shortcode e Global. Anche qui ci sono ulteriori elementi premium.

La sezione Dynamic contiene campi che funzionano in modo dinamico, andando a cercare informazioni nel database; ci sono ad esempio, il titolo del post, l’excerpt e il contenuto, l’autore, la lista dei post – elementi testuali che cambiano di pagina in pagina. La versione premium permette di sfruttare i dati dinamici in modo più avanzato con i loop builder ecc. E anche i breadcrumbs sono solo in Pro.

Pannello Structure

Sulla destra c’è il pannello che rappresenta in modo schematico la struttura della pagina, navigabile. Puoi nasconderlo o mostrarlo con clic sull’icona ‘a livelli’ nella barra orizzontale sulla destra.

Come vedi, se aggiungiamo elementi al template, questi compaiono nella struttura sulla destra. 

Possiamo anche spostarli con drag and drop dal pannello Structure, cambiando le posizioni e le gerarchie.

Anche nel builder di Breakdance, esistono degli elementi ‘contenitore’, che sono qui Section, Columns, Grid e Div, che usiamo per definire il layout della pagina e racchiudere gli altri elementi.

Possiamo quindi spostare i componenti della pagina da un contenitore all’altro, così come nidificare i contenitori dentro altri contenitori.

Personalizzare modelli ed elementi

In Breakdance puoi personalizzare qualunque elemento; gli elementi che hai inserito tu da zero così come quelli importati attraverso i modelli: funziona allo stesso modo.

Inoltre è possibile modificare sia componenti inseriti localmente che impostati a monte, in template, sezioni o blocchi applicati a livello globale.

Tutte le modifiche agli elementi sono visibili in tempo reale nell’area centrale dell’editor.

Aggiungere elementi

Per aggiungere un elemento clicca sul pulsante Add nell’angolo in alto a sinistra oppure sull’icona ‘+’ nell’area di lavoro.

Cerca il componente che ti interessa con la barra di ricerca o sfogliando le sezioni, poi posizionalo dove preferisci.

Personalizzare un elemento 

Per personalizzare un elemento cliccaci sopra e le impostazioni compariranno nella barra a sinistra.

Le proprietà degli elementi sono suddivise in 2 o 3 diversi pannelli, che variano a seconda dei casi. 

Quello relativo allo stile è riconoscibile dall’icona a forma di tavolozza e può raccogliere opzioni relative a:

• Tipografia: font, colore, dimensione, spaziatura di caratteri e righe;
• Eventuali sfondi (colori o immagini);
• Dimensione; 
• Spaziatura rispetto agli altri elementi;
• Divisori; 
• Bordi.

Questo, ad esempio, è quello dell’elemento contenitore Section.

Mentre nel caso dei testi potresti trovare meno opzioni relative al layout e più impostazioni tipografiche.

Inoltre ci sarà anche un pannello dove inserire il contenuto testuale ed eventualmente scegliere altre impostazioni specifiche (come il tipo di header) – lo riconosci dall’icona a forma di matita.

C’è un ulteriore pannello di impostazioni comune alla maggior parte degli elementi, che si apre con l’icona ‘ingranaggio’ e contiene 4 sezioni:

• Advanced include opzioni avanzate per l’aggiunta di CSS personalizzato, classi CSS e ID HTML;
• Hide on a Breakpoint, che serve a nascondere un elemento specifico su determinati dispositivi, anche a seconda dell’orientamento, verticale o orizzontale (desktop, tablet, mobile);
• Conditions permette di impostare regole per mostrare o nascondere un elemento – le stesse che abbiamo incontrato nelle impostazioni di header e template;
• Animations serve ad applicare agli elementi effetti all’ingresso, come fade-in, slide, zoom, ecc., e animazioni allo scroll, per esempio la sfocatura, oppure anche di rendere l’elemento ‘sticky’, cioè fissarlo in una certa area della pagina.

Personalizzazione responsive

Come ormai tutti i builder, anche Breakdance offre un tasto per simulare la visualizzazione dai diversi dispositivi (desktop, tablet, mobile, orizzontale e verticale) e rendere il design 100% responsive.

Inoltre molte opzioni, come la dimensione del font, hanno accanto l’icona del dispositivo, che permette di impostare valori diversi per i diversi schermi.

Design preset 

Dopo aver personalizzato un elemento, puoi salvare le sue impostazioni di design come preset per riutilizzarle su altri elementi, mantenendo uno stile uniforme su tutto il sito e soprattutto risparmiando tempo.

Purtroppo questa opzione, anche se visibile ovunque, è accessibile solo per chi ha acquistato un piano a pagamento, per cui, se provi ad attivarla con un account Free, ti viene segnalato che non verrà applicata.

Global Styles 

Tra le impostazioni di Breakdance c’è la funzione Global Styles, che serve a gestire in modo centralizzato lo stile di tutti gli elementi del sito, per assicurare la coerenza visiva e rendere le modifiche semplici e rapide.

Per esempio, dopo che avrai configurato la palette di colori globale, ogni volta che cambierai un colore della palette gli elementi che lo usano si aggiorneranno ovunque nel sito.

La funzione Global Styles permette di gestire a livello globale le impostazioni di:

• Colori
• Pulsanti
• Tipografia
• Form
• Elementi contenitore
• Codice CSS e JavaScript
• Durata delle transizioni.

Per accedere alle impostazioni globali per lo stile puoi cliccare sui tre puntini in alto a destra nell’editor e selezionare Global Settings nel menù a discesa.

Le impostazioni compariranno nel pannello sulla destra.

Alcuni pro e contro di Breakdance builder

È facile acquisire familiarità con il plugin perché è costruito in modo che le operazioni seguano schemi ricorrenti e le sezioni mantengano un aspetto coerente: tutti gli elementi si creano allo stesso modo; anche le schermate per creare e configurare i diversi componenti sono quasi identiche – cambiano solo i dettagli specifici dove serve. 

Come spesso accade con i plugin WordPress freemium, a volte c’è un po’ di confusione riguardo a cosa si possa fare con la versione gratuita, e può capitare che alcune funzionalità o template si scoprano non utilizzabili solo dopo aver iniziato a usarli.

Conclusioni

In questa guida a Breakdance, builder per WordPress, abbiamo scoperto quante possibilità offre per costruire il proprio sito in modo semplice e razionale anche a chi ha la versione gratuita, e l’estremo livello di personalizzazione che consente con i piani Pro.

Questo plugin è un’alternativa a Elementor e altri site builder da tenere in considerazione perché è pensato non solo per rendere facile la creazione di un sito WordPress, ma anche per mantenerlo efficiente e ottimizzato per la SEO.

Come hai visto, con Breakdance puoi costruire pagine con l’editor drag and drop, importare componenti preconfigurati, sezioni e intere pagine e poi personalizzarle; e usare lo stesso metodo anche per configurare header e footer, template per diversi tipi di contenuti e blocchi globali – che da quel momento in poi riuscirai a gestire in modo centralizzato ed efficiente.

Hai già provato Breakdance o altri builder? Com’è andata? Se ti va, parliamone nei commenti.