Come Aggiungere un Blocco nel Page Builder

Il Page Builder permette di costruire il contenuto della pagina utilizzando blocchi predefiniti. Ogni blocco rappresenta un componente riutilizzabile che può essere aggiunto, modificato e riordinato.

Panoramica

Il Page Builder è uno strumento visuale che permette di:

• Aggiungere contenuti modulari alla pagina
• Organizzare il layout senza scrivere codice
• Utilizzare componenti predefiniti e personalizzati
• Creare layout complessi in modo intuitivo

Passo 1: Accedere alla Sezione Page Builder

1. Apri o crea una pagina nel CMS
2. Assicurati di essere nella tab "Principale" (non SEO)
3. Scorri fino alla sezione "Page builder" nella parte inferiore del form
4. La sezione Page Builder mostra un pulsante "+ Add block" quando non ci sono blocchi ancora aggiunti

Annotazione 1 (Blu): Il pulsante "+ Add block" è evidenziato in blu. Questo è il punto di partenza per aggiungere contenuti alla pagina.

Passo 2: Cliccare sul Pulsante "Add block"

1. Clicca sul pulsante "+ Add block" nella sezione Page Builder
2. Si aprirà un menu a tendina con tutti i blocchi disponibili organizzati per categoria

Passo 3: Esplorare le Categorie di Blocchi

Il menu dei blocchi mostra diverse categorie organizzate per tipo:

Categorie Disponibili

1. Interactive - Blocchi interattivi (es. form, Cards, la possibilità di inserire uno snippet di codice in diversi linguaggi -opzione che è preferibile usare solo in presenza di codici realizzati da uno sviluppatore-)
2. Testo - Blocchi basati su testo (es. paragrafi, titoli, liste)
3. Carousel - Blocchi per caroselli e slider
4. Moduli - Blocchi per moduli come bar locator, trasporti, document locator, listing di alloggi, destinazioni ed altre sezioni del PIM; è inoltre possibile inserire un blocco di contatti o un listing di voli
5. Multimedia - Blocchi per immagini, video e media
6. Layout - Blocchi per organizzare il layout, come una scheda orizzontale o un widget con sfondo

Annotazione 2 (Verde): Il campo di ricerca permette di trovare rapidamente un blocco specifico digitando il suo nome.

Annotazione 3 (Arancione): Le sezioni di tutti i blocchi sono evidenziate. Clicca su una categoria per vedere i blocchi disponibili in quella categoria.

Passo 4: Selezionare un Blocco

1. Naviga tra le sezioni per trovare il blocco desiderato
2. Clicca sulla categoria per espanderla e vedere i blocchi disponibili
3. Clicca sul blocco specifico che vuoi aggiungere
4. Il blocco verrà aggiunto alla pagina e potrai compilarne i campi

Dopo l'Aggiunta di un Blocco

Una volta aggiunto un blocco:

1. Il blocco appare nella lista: Il blocco verrà visualizzato nella sezione Page Builder
2. Campi da compilare: Potrai compilare i campi specifici del blocco selezionato
3. Riordinamento: Potrai riordinare i blocchi trascinandoli su e giù
4. Duplicazione: Potrai duplicare blocchi usando il menu contestuale
5. Eliminazione: Potrai eliminare blocchi usando il menu contestuale o il pulsante di eliminazione

Best Practices

1. Pianifica la struttura: Prima di aggiungere blocchi, pensa alla struttura della pagina
2. Inizia semplice: Aggiungi pochi blocchi alla volta per mantenere la pagina organizzata
3. Esplora le categorie: Naviga tra le categorie per scoprire tutti i blocchi disponibili
4. Testa il risultato: Dopo aver aggiunto un blocco, visualizza la pagina per vedere come appare

Campo form

Il campo form consente di creare un form all'interno di ogni pagina creata. È possibile scegliere l'aspetto del form che si intende realizzare cliccando sull'elenco a tendina alla voce: "Stile":

• Predefinito: consente di preservare l'aspetto preimpostato per le pagine di Bauking;

È possibile creare un form selezionandolo dal campo "Collega un elemento esistente" Cliccando su questo pulsante, si aprirà una schermata in cui è possibile visionare un elenco di form già presenti nel sistema; se non si riesce a trovare dall'elenco un form già presente di nostro interesse, è possibile cercarlo tramite apposita barra di ricerca, presente in alto.

Completato questo step, avrai correttamente completato l'inserimento di un form all'interno della pagina desiderata.

Campo Card

Con il campo card, puoi inserire una sezione all'interno di una qualsiasi pagina del sito, in cui si trovano delle card, composte da un immagine e un testo personalizzato al di sotto.

Il primo campo da campilare è quello generale, che ti consente di inserire un titolo e un sottotitolo alla sezione. Puoi formattare liberamente entrambe le voci, che sono facoltative. Al di sotto, troverai il campo Pulsanti, ed al di sotto un bottone, Add button, che ti consente di aggiungere un bottone. Attivando tramite toggle i controlli (contrassegnato dalla voce Show controls), verranno mostrate tutte le opzioni di personalizzazione del bottone, di cui potrai infine scegliere la posizione rispetto all'intera sezione. La sezione dedicata ai pulsanti presenta le seguenti voci configurabili:

• Etichetta: indica il nome del bottone, utile per i tracciamenti delle pagine e per distinguere i vari pulsanti inseriti (sopratutto per sezioni con più pulsanti);
• Show controls: essenziale per visualizzare tutte le configurazioni del pulsante.

Una volta attivato Show Controls saranno quindi visibili i seguenti campi:

• Dimnensioni: permette di impostare la dimensione del bottone;
• Link type: consente di scegliere il tipo di link all'interno del bottone. Può essere: voce, url, email, numero di telefono, sms o un social-button;
• Paw: un toogle che consente di dare un tocco pet al bottone, rendendolo più accattivante;
• Voce: Consente di scegliere il link a cui associare il pulsante; si può scegliere di inserirlo manualmente, oppure selezionare una voce già presente a sistema mediante Collegamento;
• Button type: consente di scegliere il tipo di bottone; può essere: primary, secondary, o in linea.
• Titolo: consente di aggiungere un titolo al link, utile visualizzabile in una finestra apposita quando un utente avvicina un cursore al pulsante nel frontend senza fare clic
• Aria label: una configurazione avanzata che consente di gestire la visibilità del pulsante in base al tipo di visualizzazione (se renderlo visibile o invisibile da mobile, ad esempio).

Creazione delle card

Cliccando su Add card nella sezione in basso, comparirà la modale della prima card. In questa sezione, si trovano:

• Titolo: elemento obbligatorio delle card, di testo semplice.
• Sottotitolo: elemento opzionale, per inerire un sottotitolo al di sotto della card
• Pulsante: per inserire un button dedicato alla singola card (segue le stesse configurazioni che è possibile eseguire per il button principale, descritto nella sezione Campo card)
• Immagine: per inserire un'immagine all'interno della card. È possibile sfogliare le risorse interne del pc da cui si opera mediante clic su naviga, o su Carica un file, oppure trascinare direttamente l'immagine all'interno del riquadro interessato.

Campo codice

In presenza di esigenze particolari, è possibile inserire un blocco Code per inserire uno snippet di codice all'interno della pagina. La sezione apparirà come un ide, in cui in alto a destra nel blocco è possibile scegliere il linguaggio di programmazione del codice inserito. Si consiglia di inserire sezioni di codice solo in presenza di una sezione realizzata appositamente da uno sviluppatore, per evitare problemi futuri nell'utilizzo del sito, o problemi estetici nel frontend.

Campo testo

Questo campo è la soluzione ideale per inserire un blocco di testo completamente personalizzabile all'interno di una pagina. Possiede un'unica sottotipologia, Article, ideata per creare un blocco di testo che consente di creare uno o più paragrafi, proprio come occorrerebbe in un articolo di blog. È comunque possibile dividere un articolo di blog in più sezioni di questo tipo, ideale per creare una pagina di blog unica, che rispecchi le esigenze narrative uniche di ogni singolo contenuto si intenda inserire nella sezione di riferimento.

Blocco carousel

Il blocco carousel, pensato per inserire un blocco di contenuti con immagini e testo, o solo immagini, o solo testo, presenta un meccanismo di compilazione sovrapponibile a quello già visto nella sezione dedicata alle Card

Blocco carosuel Petnews

Blocco pensato per inserire un listing di articoli suggeriti provenienti da Petnews.

All'interno di questa sezione, possibile inserire un titolo (ma la compilazione di questo campo è facoltativa), un sottotitolo, e poi procedere con l'associazione dei contenuti da inserire nel blocco, che possono essere creati sul momento (opzione eseguibile cliccando su Crea e collega elemento, oppure selezionando contenuti già presenti nel listing cliccando su Collega un elemento esistente)

Blocco carousel stories

Necessario per inserire elementi in formato storia su pagine selezionate del sito.

Presenta i campi Titolo e Sottotitolo, che consentono di arricchire questa sezione di titolo e sottotitolo. Nella Tab Videos di questo blocco, è possibile inserire il video-storia che si intende inserire nella pagina.

Blocco Multimedia

Il blocco multimedia consente di inserire un blocco video nella pagina.

All'interno di questo blocco, troviamo i seguenti campi:

• Tab Url/File: consente, a scelta, di inserire l'url di un video che si intende mostrare nel frontend della pagina in fase di creazione/modifica; Selezionando la tab Url, sarà necessario inserire l'url del video; Selezionando la tab File, sarà necessario caricare un file di video all'interno dell'apposito riquadro. È inoltre possibile inserire una caption al video, che verrà visualizzata durante la riproduzione del video stesso.