Utilizzare il page builder di Xperience

Imparerai a conoscere:

• Page builder nei siti Xperience
• Creazione di pagine con il page builder
• Utilizzo del Page builder

Page builder nei siti Xperience

Il page builder ti consente di creare e gestire i contenuti del tuo sito direttamente nell’interfaccia di amministrazione di Xperience. L’interfaccia utente del page builder è semplice da usare e il suo editor drag-and-drop ti offre molte possibilità per lavorare con le tue pagine. Puoi accedere al page builder dalla scheda Page.

Creazione di pagine con il page builder

Il page builder ti offre un controllo maggiore sui contenuti rispetto ai contenuti strutturati. Puoi creare pagine o modificarne il contenuto e il layout utilizzando sezioni e widget configurabili.

In base alle esigenze del tuo business, gli sviluppatori impostano la funzionalità del page builder e preparano tutti i widget di cui hai bisogno per creare un sito web efficace.

Il page builder ti offre un’esperienza quasi WYSIWYG. Trascini e rilasci i tuoi contenuti dove ti servono utilizzando i widget e salvi le modifiche. Puoi quindi vedere immediatamente come appariranno i contenuti sul sito live. Puoi anche copiare e incollare widget esistenti insieme ai loro contenuti per risparmiare tempo.

Anche quando vuoi modificare la struttura della pagina, non hai bisogno dell’aiuto degli sviluppatori. Questi possono preparare sezioni in cui posizionare i widget. Ogni sezione può avere proprietà diverse che puoi usare per modificare il layout e l’aspetto della pagina. Ad esempio, una delle proprietà può darti il controllo sul numero di colonne. Un’altra proprietà può impostare la dimensione o lo sfondo della sezione, come puoi vedere implementato nelle sezioni della Landing page di Dancing Goat.

Ti consigliamo di utilizzare il page builder per le pagine ad alto traffico, dove devi adattare sia i contenuti che il design. Esempi tipici di queste pagine sono la Home page del sito o le landing page di campagne.

Gli sviluppatori possono abilitare il page builder per l’intera pagina, come puoi vedere nella pagina Coffee samples di Dancing Goat. Il page builder ti dà il pieno controllo sul layout e sui contenuti di una pagina.

Gli sviluppatori possono anche abilitare il page builder solo per parti specifiche delle pagine. Questo è mostrato nella Home page di Dancing Goat. Puoi modificare gran parte della Home page usando il page builder nella scheda Page. Ma per modificare la sezione Our Story, devi passare alla scheda Content e usare l’editor di contenuti strutturati. La sezione Our Story probabilmente non cambierà spesso e non hai bisogno di personalizzarla. Il suo layout e contenuto rimarranno gli stessi per la maggior parte del tempo. È per questo che gli sviluppatori non hanno utilizzato il page builder per visualizzare i suoi contenuti.

GUARDA IL VIDEO QUI

Il Page builder di Xperience è composto da quattro elementi fondamentali: Page templates, Editable areas, Sections e Widgets.

• Page templates: ti permettono di scegliere e cambiare facilmente il layout delle pagine. Sono perfetti per pagine con una struttura predefinita o ripetitiva, come landing page o pagine prodotto. Puoi utilizzarli quando lavori con pagine basate sul page builder, ma anche gli sviluppatori possono applicarli a contenuti strutturati. (In una parte successiva del tutorial userai i template per gli articoli di Dancing Goat.)
• Editable areas: sono le aree modificabili che gli sviluppatori definiscono all’interno delle pagine. Servono a stabilire quali parti devono essere gestite dalla scheda Content e quali parti invece possono essere personalizzate dagli editori tramite il page builder
• Sections: ti permettono di organizzare l’aspetto visivo della pagina. Ad esempio, puoi scegliere quante colonne avrà una sezione. Alcune sezioni offrono proprietà aggiuntive, come impostare dimensioni, sfondo o altri elementi grafici
• Widgets: sono componenti con una struttura predefinita che ti aiutano a creare i contenuti. Puoi usarli per caricare immagini, modificare testi o inserire call-to-action. Ogni sezione può contenere più widget, combinabili liberamente. Puoi riordinarli facilmente trascinandoli nella posizione desiderata
  
  GUARDA IL VIDEO QUI

Utilizzo del Page builder

GUARDA IL VIDEO QUI

💡 Compito
Vuoi rendere la tua landing page più interessante e hai deciso di applicare i seguenti aggiornamenti:

• Cambiare il testo del pulsante call-to-action in “Sign up”
• Mettere in grassetto il testo “Our previous batches”
• Spostare il widget Testimonial subito sotto il widget Hero image

❓ Hai bisogno di aiuto?
Segui questi passaggi per aggiornare la tua landing page:

1. Vai nell’applicazione Pages e apri Coffee samples nell’albero dei contenuti
2. Se necessario, passa alla scheda Page
3. Modifica il testo nel widget Hero image
4. Inserisci “Sign up” nel pulsante call-to-action dell’Hero image
5. Evidenzia l’intestazione “Our previous batches” per aprire l’editor di testo e applica il grassetto
6. Seleziona il widget Testimonial per visualizzarne le proprietà
7. Trascina il widget Testimonial sotto il widget Hero image, all’interno della stessa sezione
8. Elimina la sezione vuota:
   1. Vai nella sezione a 1 colonna (con sfondo marrone) che conteneva il widget Testimonial
   2. Clicca su Delete section per rimuoverla dalla pagina
9. Salva le modifiche

Un breve video mostra anche il processo descritto sopra: