Creare un sito WordPress non deve essere necessariamente scoraggiante, anche quando si è alle prime armi. Con gli strumenti e le indicazioni giuste, si può avere un sito elegante e perfettamente funzionante in tempi brevi.

Questa guida mostra come costruire un sito WordPress utilizzando Bricks Builder, un potente costruttore di temi che offre ampie possibilità di personalizzazione senza dover scrivere una sola riga di codice.

Panoramica su Bricks Builder

Bricks Builder è un costruttore di siti visuale che permette agli utenti di creare siti web personalizzati e reattivi direttamente all’interno dell’ambiente WordPress. È stato progettato per migliorare l’esperienza dell’utente in quanto si integra perfettamente con WordPress, consentendo a principianti e sviluppatori esperti di costruire siti web visivamente attraverso un’interfaccia drag-and-drop.

A differenza di Elementor e di altri site builder, Bricks è un tema, non un plugin. Incorpora quasi tutte le funzionalità, mentre altri costruttori di siti utilizzano plugin aggiuntivi.

È dotato di un’esperienza di editing front-end live, il che significa che è possibile vedere le proprie modifiche in tempo reale mentre si modificano gli elementi di design e i layout.

Interfaccia di editing front-end live di Bricks
Interfaccia di editing front-end live di Bricks.

Offre un kit di strumenti completo che include template pre-progettati, una vasta gamma di elementi di design e opzioni di personalizzazione avanzate per uno sviluppo web più dettagliato.

Inoltre, Bricks Builder supporta i dati dinamici, consentendo agli utenti di costruire facilmente siti web basati sui dati e di integrare dinamicamente i contenuti nei loro template.

Vantaggi dell’uso di Bricks per WordPress

Bricks Builder si distingue per le sue prestazioni e la sua flessibilità. Si tratta di un’alternativa più recente e robusta rispetto ad altri builder, che offre:

  • Velocità: Bricks è incredibilmente veloce e leggero.
  • Facilità d’uso: l’interfaccia è intuitiva e facile da usare sia per i principianti che per i professionisti.
  • Personalizzazione: Bricks offre un’ampia possibilità di personalizzazione attraverso CSS e JavaScript personalizzati ed è compatibile con un’ampia gamma di plugin WordPress.

Primi passi con Bricks

Bricks è un tema premium che richiede un abbonamento a pagamento. Per utilizzarlo, è necessario acquistare uno dei piani. Una volta effettuato il pagamento, potrete scaricare un file zip sulla dashboard che potrà essere caricato sul sito WordPress, insieme a una chiave di licenza che attiverà Bricks all’interno della propria installazione di WordPress.

 La dashboard di Bricks per scaricare il tema Bricks
La dashboard di Bricks per scaricare il tema Bricks.

Dopo aver installato il tema Bricks, nella bacheca di WordPress apparirà una nuova voce di menu Bricks.

Per attivare la licenza, accedete alla dashboard, cliccate su Activate license, inserite la chiave di licenza dall’account Bricks e cliccate su Activate. In questo modo si abilitano tutte le funzionalità del tema Bricks.

Configurare la licenza del tema Bricks per attivare il tema.
Configurare la licenza del tema Bricks per attivare il tema.

Se volete fare una prova con Bricks prima di passare all’acquisto, potete creare un account di prova su try.bricksbuilder.io. Questa piattaforma fornisce l’accesso a un sito WordPress preconfigurato con Bricks installato, consentendo di esplorarne le caratteristiche e le funzionalità senza alcun costo iniziale.

Il benvenuto nell'interfaccia del cruscotto di WordPress di Bricks
Schermata di benvenuto nell’interfaccia della dashboard di Bricks WordPress.

Come avviare il page builder di Bricks

Per progettare una nuova pagina con il page builder di Bricks, andate su Pagine > Aggiungi nuovo o cliccate su una pagina esistente. Potete lanciare l’editor di Bricks cliccando su Edit with Bricks.

Avviare il page builder Bricks cliccando su Modifica con Bricks
Avviare il page builder Bricks cliccando su Modifica con Bricks.

Ora potete trascinare gli elementi dal pannello Elementi per progettare la pagina.

L’interfaccia di Bricks

L’interfaccia di Bricks offre una perfetta integrazione con l’ambiente di WordPress.

Etichettatura dell'interfaccia Bricks per comprendere il significato di ogni sezione
Le sezioni dell’interfaccia di Bricks.

Ecco una panoramica dell’interfaccia principale:

  • Area di lavoro del builder: l’area principale di Bricks è l’area di lavoro del costruttore, che è una rappresentazione visiva del sito web. Qui è possibile interagire direttamente con le pagine, trascinando gli elementi al loro posto, ridimensionando e riorganizzando i componenti.
  • Barra degli strumenti: nella parte superiore dell’area di lavoro, la barra degli strumenti offre un accesso rapido alle funzionalità essenziali come il salvataggio del lavoro, l’anteprima del sito e l’accesso al menu delle impostazioni e ai controlli responsive.
  • Pannello degli elementi: sul lato sinistro dell’interfaccia, il pannello degli elementi funge da cassetta degli attrezzi. Contiene tutti gli elementi che potrete utilizzare nel vostro sito, come caselle di testo, immagini, pulsanti e altro ancora. Potete trascinare questi elementi dal pannello direttamente sulla pagina.
  • Vista struttura: spesso posizionata accanto o come toggle all’interno del pannello degli elementi, la vista struttura fornisce un quadro gerarchico della pagina. Questa vista è particolarmente utile per comprendere il layout e la profondità degli elementi della pagina, consentendo di selezionare e modificare facilmente gli elementi annidati.

Usare i font personalizzati in Bricks

Bricks offre l’interessante caratteristica di permettere di caricare font personalizzati su un sito WordPress. Per farlo, basta andare su Bricks > Custom Fonts.

Utilizzare i font personalizzati in Bricks
Utilizzare i font personalizzati in Bricks.

Questa sezione permette di caricare i file dei font in vari formati, tra cui WOFF2, WOFF o TTF. È anche possibile caricare diverse varianti di font, come thin, semi-bold, normal e bold.

Per aggiungere un font personalizzato, cliccate su Add new. Quindi, inserite un nome per il font nel campo Add title. Successivamente, selezionate la variante di font che desiderate caricare, scegliete lo stile del font e cliccate su Edit.

Aggiungere i dettagli del font e caricare diverse varianti di font
Aggiungere i dettagli del font e caricare diverse varianti di font.

Apparirà un menu a tendina con i campi per caricare il file del font. Selezionate il file del font e caricatelo. Potete ripetere questo processo cliccando su Aggiungi una variante di font per quante più varianti possibili. Infine, cliccate su Pubblica.

La pagina dei font personalizzati di Bricks
La pagina dei font personalizzati di Bricks.

Per applicare il font personalizzato appena caricato al testo del sito WordPress, seguite questi passaggi:

  1. Andate alla pagina in cui volete utilizzare il nuovo font e cliccate su Edit with Bricks.
  2. Cliccate sul testo che volete modificare.
  3. Le informazioni sul testo selezionato saranno visualizzate nel pannello di sinistra. Cliccate su STYLE.
  4. Espandete il menu a tendina TYPOGRAPHY per visualizzare altre opzioni.
  5. Nel campo Font family, sfogliate i font disponibili, compresi quelli di Google e quelli caricati da voi.
  6. Selezionate il vostro font personalizzato dall’elenco per aggiornare immediatamente il testo.

Ora il testo verrà visualizzato con il vostro font personalizzato, dando alla pagina un tocco originale.

Usare i font personalizzati di Bricks nell'interfaccia di Bricks
Usare i font personalizzati di Bricks nell’interfaccia di Bricks.

Usare i template in Bricks

I template sono una funzione fondamentale di Bricks e sono disponibili in vari tipi, tra cui header, footer e layout dei post del blog. Questi template possono spaziare da una singola sezione, come l’header di un sito web o una sezione hero, a contenuti a pagina intera, come i layout dei post del blog, le pagine di archivio, i risultati di ricerca e le pagine di errore.

Creare un template

Per creare un template:

  1. Andate su Bricks > Template nella dashboard.
  2. Scegliete di aggiungere un nuovo template o di importarne uno esistente.
  3. Cliccate su Add new, selezionate il tipo di template e poi scegliete Edit with Bricks.

    Creare un nuovo template per Bricks Builder
    Creare un nuovo template per Bricks Builder.

Applicare i template

Per applicare un template a una pagina:

  1. Andate alla pagina in cui volete utilizzare il template.
  2. Cliccate sull’icona Template (cartella) nella barra degli strumenti del costruttore per aprire la sezione dei template.

    Applicare i template alle pagine Bricks
    Applicare i template alle pagine Bricks.

  3. Qui potete accedere sia ai template creati da voi che a quelli della community.
  4. Selezionate il template desiderato e visualizzatelo in anteprima.

    L'archivio dei template di Bricks contiene i template della community, locali e remoti.
    L’archivio dei template di Bricks contiene i template della community, locali e remoti.

  5. Infine, potete cliccare su Insert per adottarlo.

    Scegliere e utilizzare un template della community selezionato
    Scegliere e utilizzare un template della community selezionato.

Template remoti

I template di Bricks offrono funzionalità uniche che non si trovano in altri site builder. Per template remoti si intendono i template creati e utilizzati in altri siti che volete utilizzare nel vostro sito.

Per consentire ad altri siti di utilizzare i vostri template Bricks, andate su Bricks > Settings > Template nella bacheca di WordPress e attivate la casella My Templates Access.

Usate gli URL Whitelist e la protezione con password per limitare l’accesso ai template alle persone che conoscono la password corretta.

Consentire ad altri siti di utilizzare i template Bricks come template remoti
Consentire ad altri siti di utilizzare i template Bricks come template remoti.

Per utilizzare i template di altri siti, andate in Bricks > Impostazioni > Template, scorrete fino alla sezione Template remoti e incollate l’URL del sito Bricks da cui volete recuperare i template nel campo URL del template remoto.

Utilizzare template remoti da altri siti
Utilizzare template remoti da altri siti.

Se impostate una password, dovete assicurarvi di scriverla nella sezione Password del template remoto. Poi cliccate su Save Settings.

Per utilizzare questi template, navigate nel costruttore di pagine e cliccate su Template come prima; apparirà una nuova sezione di Remote templates con tutti i template del sito remoto.

Utilizzare i dati dinamici in Bricks

Bricks permette di incorporare dati dinamici nei template e nelle pagine, rendendolo uno strumento versatile per la creazione di siti web dinamici.

Potete includere diversi elementi dinamici come immagini in evidenza, titoli dei post, date di pubblicazione, nomi degli autori, categorie, tag, titoli dei siti e tutti i vostri campi personalizzati.

I dati dinamici sono particolarmente utili per la creazione di template specifici in Bricks, come il template del post del blog o i template per i tipi di post personalizzati, come l’annuncio di una singola proprietà.

Per aggiungere dati dinamici, iniziate a digitare { sull’area di disegno oppure cliccate sull’icona a “ingranaggio” accanto alla maggior parte dei campi nel pannello delle impostazioni.

Ecco come creare un template di post singolo utilizzando i dati dinamici con Bricks:

  1. Andate su Bricks > Template per creare un nuovo template. Assegnate un titolo al template, impostate il suo tipo su Single e poi pubblicatelo o salvatelo come bozza.
  2. Cliccate su Edit with Bricks per iniziare a configurare il template in modo da utilizzare i dati dinamici.
  3. Create lo stile della pagina come desiderate. In genere, elementi come il titolo del post, l’immagine in evidenza, la data di pubblicazione, il nome dell’autore e il contenuto del post andrebbero visualizzati dinamicamente.
  4. Su una pagina bianca, aggiungete un titolo e un contenuto inserendo {post_title} in un elemento Heading e {post_content} in un elemento di testo Basic.

    Utilizzare i dati dinamici in Bricks
    Utilizzare i dati dinamici in Bricks.

Per impostare questo template come predefinito per tutti i post:

  1. Cliccate sull’icona delle impostazioni nella barra degli strumenti, andate su Template Settings > Conditions e poi cliccate sul pulsante + ADD CONDITION.
  2. Selezionate il tipo di post e specificate Post.

    Impostare il template come predefinito per tutti i post
    Impostare il template come predefinito per tutti i post.

  3. Assicuratevi di salvare e aggiornare la pagina del template su WordPress. Poi, navigate nella pagina dei post per vedere ogni post formattato con il nuovo template senza ulteriori stili.

    Il template viene utilizzato per tutti i post.
    Il template viene utilizzato per tutti i post.

Per semplificare lo stile di questo template, aggiungete un post predefinito da utilizzare come riferimento per gli elementi dinamici:

  1. Cliccate sull’icona delle impostazioni nella barra degli strumenti e andate su Template Settings > POPULATE CONTENT.
  2. Scegliete un post/pagina singolo come tipo di contenuto e selezionate un post specifico come contenuto del template. Se non ne compare nessuno, cercatene uno e poi cliccate su APPLY PREVIEW.

    Aggiungere un post predefinito da usare come riferimento per gli elementi dinamici
    Aggiungere un post predefinito da usare come riferimento per gli elementi dinamici.

  3. Ora potete visualizzare facilmente elementi come il titolo e il contenuto del post utilizzando il template di post selezionato.

    Il post predefinito selezionato viene visualizzato durante la personalizzazione della pagina con dati dinamici
    Il post predefinito selezionato viene visualizzato quando si personalizza una pagina con dati dinamici.

Inoltre, Bricks supporta l’utilizzo dei contenuti dei campi personalizzati avanzati (ACF), migliorando la possibilità di creare pagine dettagliate e personalizzate.

Gestire l’invio di moduli con Bricks

La funzione di invio dei moduli è stata introdotta in Bricks 1.9.2 per permettere di catturare i moduli inviate. Questo permette di creare una tabella personalizzata chiamata bricks_form_submissions nel database (con il prefisso dello stesso database WP).

È possibile attivare la nuova impostazione per salvare gli invii dei moduli nel database in Bricks > Settings > General > Miscellaneous.

Gestione degli invii dei moduli con Bricks
Gestione degli invii dei moduli con Bricks.

Poi cliccate su Save Settings. Apparirà la scheda Form Submissions (Bricks > Form Submissions), che contiene le varie tabelle di invio dei moduli.

Raccogliere i moduli inviati

La raccolta dei moduli inviati in Bricks non richiede un plugin aggiuntivo. Basta solo utilizzare l’elemento Form per creare un modulo e impostare correttamente i campi.

Aggiungere l'elemento Form alla pagina Bricks
Aggiungere l’elemento Form alla pagina Bricks.

Nel pannello delle impostazioni, cliccate su Action e selezionate l’azione Save Submission.

Impostare l'azione di salvataggio dell'invio per l'elemento Form di Bricks
Impostare l’azione di salvataggio dell’invio per l’elemento Form di Bricks.

Successivamente, cliccate su Save Submission per assegnare al modulo un nome descrittivo. Questo nome sarà utilizzato per accedere ai dati del modulo.

Impostare un nome descrittivo per la pagina Form Submission
Impostare un nome descrittivo per la pagina Form Submission.

Ora, quando salvate e aprite la pagina potrete completare il modulo e poi tornare a Bricks > Form submission per vedere i dati del modulo.

La pagina Form Submission di Bricks consente di accedere a tutti i moduli e ai loro dati
La pagina Form Submission di Bricks consente di accedere a tutti i moduli e ai loro dati.

Potete anche scaricare un file CSV dei vari moduli inviati. Nella sezione Bricks > Settings > General > Miscellaneous, dove avete configurato questa funzione, potete resettare o eliminare la tabella del database.

Eseguire il reset o eliminare la tabella del database del modulo
Eseguire il reset o eliminare la tabella del database del modulo.

Utilizzare WooCommerce con Bricks

WooCommerce è un plugin gratuito che arricchisce il vostro sito WordPress con funzionalità di e-commerce. È riconosciuto a livello mondiale come una delle principali soluzioni open-source per la creazione e la gestione di un negozio online.

Bricks si integra perfettamente con WooCommerce, fornendo un solido builder in-theme per creare l’intero negozio, a partire dalla pagina principale del negozio fino alle pagine dei singoli prodotti, agli archivi dei prodotti, ai carrelli, ai checkout e alle pagine degli account.

Bricks offre elementi e template specifici per WooCommerce, che permettono di progettare il layout del vostro negozio.

Elementi di prodotto Bricks per siti web WooCommerce
Elementi di prodotto Bricks per siti web WooCommerce.

Per iniziare a usare il WooCommerce Builder in Bricks, installate e attivate il plugin WooCommerce. Una volta attivato, potete usare Bricks per progettare e personalizzare visivamente vari template di WooCommerce, in modo simile a come gestiresti i layout dei singoli post.

Per creare una semplice pagina del negozio:

  1. Andate su Pages e selezionate la pagina del Negozio.
  2. Cliccate su Edit with Bricks. Il pannello Elementi contiene diversi elementi di prodotto. Questi permettono di visualizzare i prodotti, i titoli, le descrizioni, i prezzi e altro ancora, facilitando la creazione di template dinamici.
Utilizzare WooCommerce con Bricks Builder
Utilizzare WooCommerce con Bricks Builder.

Utilizzando questi elementi, potrete organizzare e modellare la pagina come desiderate.

Come per la creazione di un template di post singolo, potete creare un template di prodotto singolo e impostare le sue condizioni in modo che funzioni con tutti i prodotti.

Query Loop in Bricks

Il costruttore di Query Loop permette di interrogare il database in base ai parametri della query e di visualizzare i risultati della query all’interno del ciclo. Può essere utilizzato in elementi di layout come container, Accordion e Slider.

Potete interrogare tipi di post, termini di tassonomia e utenti. Ad esempio, potete interrogare un elenco di autori di blog, membri della community e membri del team.

Per utilizzare Query loop, aggiungete un elemento Container all’area di disegno. Attivate l’impostazione Use Query Loop per trasformare il vostro contenitore in un elemento del ciclo.

Una volta attivata l’impostazione Use Query Loop, vedrete un controllo Query (icona a forma di infinito). Cliccate sull’icona per aprire il controllo query e impostate i parametri di query per recuperare il contenuto dal database.

Utilizzo dei Query Loop nell'elemento contenitore Bricks per i post
Utilizzo dei Query Loop nell’elemento contenitore Bricks per i post.

Il contenitore ora funge da elemento ripetitore. Tutti gli elementi all’interno di questo contenitore vengono ripetuti tutte le volte che ci sono risultati di una query. Questa guida spiega come funziona.

Costi di Bricks

Bricks non ha un piano gratuito. Creano un account solo per farvi provare il loro tema, ma non è possibile utilizzarlo per il proprio sito senza pagare.

Bricks offre piani di base e un piano a vita. Il piano a vita offre privilegi illimitati, ma spetta a voi decidere cosa preferite.

Bricks offre la comodità di avere quasi tutto quello che serve all’interno della piattaforma, contribuendo a un flusso di lavoro efficiente e senza interruzioni e rendendolo un valido investimento per chi cerca una soluzione di web design robusta e versatile.

Struttura dei costi di Bricks Builder
Struttura dei costi di Bricks Builder.

Recensione di Bricks: Vale la pena provare?

Un potenziale svantaggio è che Bricks non offre una versione gratuita, a differenza di Elementor. Tuttavia, Bricks Builder sta guadagnando attenzione nel settore grazie alla sua miscela di semplicità e potenti funzionalità.

Un sondaggio del 2024 condotto da The Admin Bar su 1.144 professionisti di WordPress afferma che “Bricks è stato l’unico page builder ad aumentare i suoi numeri rispetto all’anno scorso, raccogliendo il 32% del totale” con la seguente tabella:

Una statistica del 2024 di Admin Bar mostra i page builder che i migliori professionisti di WordPress stanno attualmente utilizzando
Statistiche dei page builder più utilizzati dai professionisti di WordPress.

Questo dimostra come molti professionisti di WordPress lo stiano adottando nonostante sia ancora relativamente nuovo sul mercato.

Bricks funziona come un tema completo. Ciò significa che non è possibile combinare le funzionalità di altri temi con il suo page builder. Inoltre, in termini di velocità, essendo un nuovo page builder progettato per siti web ad alte prestazioni, Bricks Builder è considerato più veloce di Elementor Pro.

L’utilizzo di un page builder progettato solo per la velocità non può garantire le migliori prestazioni. Indipendentemente dal tipo di sito web che state realizzando, il vostro provider di hosting gioca un ruolo fondamentale per le sue prestazioni.

Noi di Kinsta siamo noti per offrire un hosting WordPress di qualità superiore con decine di funzioni premium. È il nostro vanto!

Operiamo su un’architettura completamente containerizzata alimentata esclusivamente dalla Google Cloud Platform sulla rete Premium Tier di Google. Questo ci permette di offrirvi un’ampia selezione dei server dati più veloci, prestazioni incredibili, caching a livello di server, risorse dedicate e sicurezza avanzata.

Date un’occhiata a ciò che dicono i nostri clienti o contattateci per saperne di più sulla nostra soluzione di hosting gestito e sui suoi vantaggi.

Riepilogo

In questo articolo abbiamo esplorato Bricks Builder, il suo funzionamento, alcune delle sue funzioni e il loro utilizzo. Abbiamo esaminato il suo approccio tematico completo, le sue capacità di personalizzazione e i vantaggi in termini di prestazioni.

Sebbene Bricks non abbia una versione gratuita come Elementor, il suo design integrato e i suoi frequenti aggiornamenti possono offrire un’efficienza superiore per ottimizzare le prestazioni del sito web.

Avete qualche domanda su come utilizzare il costruttore di temi WordPress Bricks? Fatecelo sapere nella sezione commenti qui sotto!

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.