Page Builder Procedura dettagliata parte 1: pagina semplice

5 maggio 2025

Argomenti:

Creato per:

Principiante
Intermedio
Utente

Segui questo esercizio in tre parti per acquisire familiarità con l'area di lavoro Page Builder creando una semplice pagina che illustra quanto sia semplice creare pagine ricche di contenuti con la tua progettazione.

Esempio di pagina semplice

NOTE

Questi esercizi di procedura dettagliata vengono aggiornati per riflettere le recenti modifiche apportate all'area di lavoro Page Builder nella versione 2.4.1.

Prima di iniziare

Prima di iniziare questo esercizio, è consigliabile aumentare la durata della sessione di amministrazione per evitare che si verifichi il timeout della sessione mentre si lavora.

Verifica le impostazioni di configurazione di Content Management richieste:

WYSIWYG Editor è abilitato nella configurazione Opzioni WYSIWYG.
Page Builder è abilitato nella configurazione di Strumenti di contenuto avanzati.

Scaricare le risorse immagine della procedura dettagliata

Scaricare il file simple-page-assets e salvarlo nel sistema locale.
Passare al file scaricato ed estrarre i file compressi.

In un sistema Windows, fare clic con il pulsante destro del mouse e scegliere Extract All file. Scegliere quindi la cartella di destinazione e fare clic su Extract.

In un sistema Mac, è sufficiente fare doppio clic sul file zip e spostare i file estratti nella cartella di destinazione.

La cartella contiene i seguenti file di immagine:

Seguire le tre parti della procedura dettagliata in ordine.

In questa parte dell'esercizio Pagina semplice viene creata una pagina con una riga e un banner al vivo. La riga presenta immagini di sfondo diverse per i dispositivi desktop e mobili.

Page Builder riga al vivo completa con banner

Passaggio 1: creare una pagina

Nella barra laterale Admin, passa a Content > Elements>Pages.
Nell'angolo superiore destro fare clic su Add New Page ed eseguire le operazioni seguenti:
- Per impedire la pubblicazione della pagina nello store, impostare Enable Page su No.
- Per Page Title, immettere Simple Page.
Espandere nella sezione Design.

Layout è impostato su Page -- Full Width per impostazione predefinita. Oltre alle cinque opzioni layout standard, Page Builder aggiunge layout a larghezza intera per pagine, categorie e prodotti.
Se i dati di esempio sono disponibili, impostare New Theme su Magento Luma. In caso contrario, è possibile scegliere un altro tema disponibile o lasciarlo vuoto per utilizzare il tema predefinito.

L'impostazione New Theme può essere utilizzata per sostituire il tema predefinito e per applicare un tema diverso alla pagina.

NOTE
Il layout Larghezza intera può essere utilizzato solo con un tema compatibile.
Nell'angolo superiore destro fare clic su Save.

Quando la pagina viene salvata, il nome Pagina semplice viene visualizzato nell'angolo superiore sinistro della pagina.

Passaggio 2: formattare la riga

Espandere nella sezione Content.

Questa azione visualizza l'anteprima Page Builder con una riga vuota.

NOTE
Il campo Intestazione contenuto è facoltativo. Per impostazione predefinita, è formattato come livello di intestazione 1 (H1) in base al tema. Per questo esercizio, Intestazione contenuto è lasciato vuoto.
Fare clic su Edit with Page Builder o all'interno dell'area di anteprima del contenuto.

Nell'Page Builder area di lavoro espansa, il pannello a sinistra fornisce gli strumenti di contenuto che è possibile utilizzare per creare il contenuto nell'area di visualizzazione.
Passa il cursore del mouse sulla riga vuota per visualizzare la casella degli strumenti.

Ogni contenitore di contenuto ha una casella degli strumenti con un set di opzioni simile.
Nella casella degli strumenti Riga, scegliere l'icona Impostazioni ( .
In Appearance scegliere Smarginatura completa.

L'impostazione dell'aspetto a pagina intera estende i bordi sinistro e destro dell'area contenuto della riga e dello sfondo fino alla larghezza completa della pagina.
Scorri verso il basso fino alla sezione Advanced e imposta tutte le impostazioni Margins and Padding su 0.

Questa impostazione assicura che il banner estenda l'intera larghezza della riga.
Per salvare le impostazioni e tornare all'area di lavoro Page Builder, scorrere fino all'inizio della pagina e fare clic su Save nell'angolo superiore destro.

NOTE

Page Builder ha un nuovo tipo di contenuto denominato Banner, presentato in questo passaggio. Precedentemente l'opzione Banner nel menu Contenuto è ora un blocco dinamico.

Nel pannello Page Builder, espandi Media e trascina un segnaposto Banner nell'area di visualizzazione.
Passa il puntatore del mouse sul contenitore del banner per visualizzare la casella degli strumenti.

NOTE
L’area di visualizzazione ora dispone di due contenitori di contenuto, ciascuno con una casella degli strumenti separata. Poiché il banner è nidificato all'interno della riga, assicurarsi di utilizzare la casella degli strumenti corretta.

Oltre alla casella degli strumenti, sono inclusi i pulsanti Carica immagine e Seleziona da raccolta, per consentire di apportare modifiche rapide al banner direttamente dall'area di visualizzazione.
Nella casella degli strumenti del banner, scegli l'icona Impostazioni ( ).
In Appearance scegliere Collage Right.

L'impostazione Collage Right posiziona il contenuto sul lato destro del banner.
Scorri verso il basso fino alla sezione Background e imposta l'immagine di sfondo per il banner:
- Per Background Image, fare clic su Carica.
  
  Passare alla directory in cui sono state salvate le risorse di pagina semplici estratte e scegliere il file wide-banner-background.jpg.
  
  L’immagine viene caricata e viene visualizzata una miniatura dell’immagine caricata. Il nome del file, le dimensioni dell'immagine e le dimensioni del file sono indicati di seguito.
- Per Background Mobile Image, fare clic su Carica.
  
  Nella stessa directory di file, scegliere il file wide-banner-background-mobile.jpg.
  
  L’immagine di sfondo mobile viene utilizzata per i dispositivi mobili e anche ogni volta che una finestra del browser desktop viene ridimensionata alla larghezza di un dispositivo mobile.
- Tornare alla parte superiore della pagina e fare clic su Save per salvare le impostazioni e tornare all'area di lavoro Page Builder.
  
  Lo sfondo viene visualizzato sullo stage e estende l'intera larghezza della riga.
Osserva il testo segnaposto visualizzato sul lato destro della riga. La posizione di questo testo riflette l'impostazione dell'aspetto Collage Right.
Fare clic sul testo segnaposto e immettere il seguente messaggio come due righe:

Get fit and look fab in new seasonal styles.

New LUMA yoga collection

La barra degli strumenti dell'editor viene visualizzata sopra la casella di testo. Il testo può essere immesso e formattato direttamente dall'area di visualizzazione oppure scegliendo Impostazioni nella casella degli strumenti del banner.
Applica formattazione al testo:
- Selezionare la prima riga di testo. Quindi, nella barra degli strumenti dell'editor in Formati, scegli Heading 2.
- Selezionare la seconda riga di testo. Quindi, nella barra degli strumenti dell'editor in Formati, scegli Paragraph.
Le impostazioni di formato applicano gli stili del foglio di stile associato al tema corrente.

__

Passa il puntatore del mouse per visualizzare la casella degli strumenti del banner, scegli nuovamente l'icona Impostazioni ( ), quindi scorri fino alla sezione Content.

Il testo verrà visualizzato nella casella Testo messaggio. Il testo può essere immesso e modificato dalla fase o dalla sezione Content delle impostazioni del banner.
Continuando nella sezione Content, impostare il collegamento e il pulsante del banner:
- Impostare Link su Category, quindi fare clic su Select per visualizzare la struttura delle categorie.
- Scegliere What's New come categoria collegata.
- Imposta Show Button su Always.
- Per Button Text, immettere Shop Now come testo visualizzato sul pulsante.
- Per Button Type, accettare l'impostazione predefinita Primary.
  
  Lo stile del pulsante del tema corrente determina il formato del pulsante.
Imposta la sovrapposizione banner:

È possibile utilizzare una sovrapposizione per applicare un colore di sfondo all'area di contenuto attiva definita dall'impostazione Aspetto. L'immagine di sfondo del banner rimane visibile per l'intera larghezza del banner.
- Imposta Show Overlay su Always.
- Per Overlay Color, eseguire una delle operazioni seguenti:
  - Fate clic sul quadrato di colore e scegliete il campione bianco.
  - Fare clic nella casella di testo Nessun colore e immettere White o il valore esadecimale #ffffff.
  Quindi fare clic su Apply.
- Tornare alla parte superiore della pagina e fare clic su Save per salvare le impostazioni e tornare all'area di lavoro Page Builder.
  
  Il pulsante viene visualizzato sotto il messaggio del banner sullo stage.
Nell'angolo superiore destro dell'area di visualizzazione fare clic sull'icona Chiudi schermo intero ( ).

Facendo clic su questa icona si ritorna alla sezione Content per la pagina con l'anteprima visualizzata.

È possibile passare da una modalità all'altra in qualsiasi momento.
Nell'angolo superiore destro fare clic sulla freccia Save e scegliere Save & Close.
Se richiesto, fare clic sul collegamento Gestione cache nel messaggio nella parte superiore della pagina e aggiornare eventuali cache non valide.

Parte 2: riga contenente due colonne uguali

In questa parte dell'esercizio aggiungerete una riga alla pagina e la dividerete in due colonne uguali. Quindi, aggiungi un’immagine collegata a ogni colonna. Nelle istruzioni, ogni nuova riga viene aggiunta prima della prima per allineare il pannello Page Builder con l'area di visualizzazione. Alla fine dell'esercizio ridisporrete le righe in modo che corrispondano all'esempio Pagina semplice.

Pagina di esempio che utilizza una riga contenuta con due colonne uguali

Passaggio 1: aggiungere una riga

Nella griglia Pagine individuare la pagina semplice creata nella prima parte dell'esercizio e selezionare Edit nella colonna Action.
Espandere nella sezione Content.
Fare clic su Edit with Page Builder o all'interno dell'area di anteprima del contenuto.
Nel pannello Page Builder sotto Layout, trascina un segnaposto Row nell'area di visualizzazione e posizionalo sopra il banner.

La linea guida rossa segna il limite tra le due righe.
Passa il puntatore del mouse sulla nuova riga per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( ).
In Appearance, accettare l'impostazione predefinita Contains.

Questa impostazione limita l’area del contenuto della riga alla larghezza della pagina definita dal tema.
Nell'angolo superiore destro fare clic su Save per salvare le impostazioni e tornare all'area di lavoro Page Builder.

Passaggio 2: aggiungere una colonna

Nel pannello Page Builder sotto Layout, trascina un segnaposto Column nella nuova riga.

La riga è ora divisa in due colonne di uguale larghezza. Ogni colonna è un contenitore separato per il contenuto con la propria casella strumenti dedicata di opzioni.
Nell'angolo superiore sinistro della prima colonna fare clic sul controllo circolare Griglia ( ) per visualizzare le linee guida della griglia.

La griglia garantisce che il contenuto sia allineato in modo coerente e che venga riprodotto correttamente sia sui desktop che sui dispositivi mobili. Per informazioni sulla configurazione delle dimensioni della griglia, vedere la sezione Configure Page Builder nell'argomento del programma di installazione di Page Builder.

I numeri tra parentesi (6/12) nel bordo superiore di ogni contenitore di colonne indicano il numero di divisioni della griglia in ogni colonna e il numero totale di divisioni nella riga.

Passaggio 3: aggiungere immagini con collegamenti

In questo passaggio imparerai a caricare un’immagine nel banner.

Nel pannello Page Builder, espandere la sezione Media e trascinare un segnaposto Image nella prima colonna.
Inserite l'immagine di esempio nel segnaposto.

Per un'immagine che si trova nel sistema, è possibile scegliere uno dei seguenti metodi:
- Carica il file di immagine: nella prima colonna fare clic su Upload Image. Passare quindi alla directory in cui sono state salvate le risorse di pagina semplici estratte e scegliere il file small-banner-1.jpg.
  
  Ripetere questa azione per aggiungere il file small-banner-2.jpg alla seconda colonna.
- Trascina il file immagine: sul desktop, apri la cartella delle risorse di pagina semplice e posizionala accanto alla finestra del browser Amministratore in cui stai lavorando con la fase Page Builder. Trascinare quindi il file small-banner-1.jpg dalla cartella delle risorse di pagina semplici e rilasciarlo nella prima colonna.
  
  Ripetere questa azione per aggiungere il file small-banner-2.jpg alla seconda colonna.
Determina quale pagina del catalogo desideri collegare a ogni immagine.
Passa il puntatore del mouse sull'immagine nella prima colonna per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( ).
Collega l'immagine a una categoria:
- Scorri verso il basso e imposta Link su Category.
- Nell'albero delle categorie espandere e scegliere la categoria Men's Hoodies & Sweatshirt.
- Nell'angolo superiore destro Save le impostazioni e tornare all'area di lavoro Page Builder.
Ripetere il passaggio precedente per collegare l'immagine nella seconda colonna alla categoria Ingranaggio.
Nell'angolo superiore destro dell'area di visualizzazione fare clic sull'icona Chiudi schermo intero ( ).

Facendo clic su questa icona si ritorna alla sezione Content per la pagina con l'anteprima visualizzata.
Nell'angolo superiore destro fare clic sulla freccia Save e scegliere Save & Close.
Quando richiesto, fare clic sul collegamento Gestione cache nel messaggio nella parte superiore della pagina e aggiornare eventuali cache non valide.

Parte 3: riga a larghezza intera con colonne diseguali

L’ultima riga di questa pagina presenta il contenuto di una recensione di prodotto. Aggiungere una riga a larghezza intera e dividerla in due colonne di larghezza diversa. Alla prima colonna viene aggiunta un'immagine di sfondo con un colore di sfondo corrispondente applicato alla riga per un effetto unificato.

Esempio di riga a larghezza intera con colonne di larghezza diversa

Passaggio 1: aggiungere una riga

Nella griglia Pagine individuare la pagina semplice creata nella prima parte dell'esercizio e selezionare Edit nella colonna Action.
Espandere nella sezione Content.
Fare clic su Edit with Page Builder o all'interno dell'area di anteprima del contenuto.
Nel pannello Page Builder sotto Layout, trascina un segnaposto Row nell'area di visualizzazione e posizionalo sopra la riga creata nella seconda parte di questo esercizio.

Una linea guida rossa segna il limite tra le due righe.
Passa il puntatore del mouse sulla nuova riga per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( ).
Nella pagina Modifica riga in Appearance, scegliere Full Width.

Questa impostazione limita l’area del contenuto alla larghezza massima della pagina definita dal tema. Il colore e/o l’immagine di sfondo non sono limitati ed estendono l’intera larghezza della riga.
Nella sezione Background immettere #f1f1f1 come Background Color.
Scorri verso il basso fino alla sezione Advanced e imposta tutti i valori Margini e spaziatura interna su 0.
Tornare alla parte superiore della pagina e fare clic su Save per salvare le impostazioni e tornare all'area di lavoro Page Builder.

Il colore di sfondo della riga è ora un beige chiaro.

Passaggio 2: aggiungere colonne di larghezza diversa

Nel pannello Page Builder sotto Layout, trascina un segnaposto Column nella riga superiore dell'area di visualizzazione.
Trascinare il bordo destro della prima colonna nella posizione quattro di 12 (4/12) sulla griglia.

La dimensione della seconda colonna viene regolata su otto di 12 (8/12).
Passa il puntatore del mouse sul primo contenitore di colonne per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( ).
Scorri verso il basso fino alla sezione Advanced e imposta tutti i valori Margini e spaziatura interna su 0.
Tornare alla parte superiore della pagina e fare clic su Save per salvare le impostazioni e tornare all'area di lavoro Page Builder.

Passaggio 3: aggiungere un’immagine alla prima colonna

Nel pannello Page Builder, espandere Media e trascinare un tipo di contenuto Image nella prima colonna.
Nel segnaposto immagine, fare clic su Upload Image.
Passare alla directory in cui sono state salvate le risorse di pagina semplici estratte e scegliere il file review-image.jpg.

L’immagine caricata viene visualizzata nella prima colonna e si fonde perfettamente con il colore di sfondo della riga.

Passaggio 4: aggiungere il contenuto della revisione alla seconda colonna

La seconda colonna della riga deve contenere il contenuto di una recensione del cliente, inclusa l’immagine di valutazione a cinque stelle e un messaggio di testo formattato.

Nel pannello Page Builder, espandere la sezione Elements e trascinare il tipo di contenuto Text nella seconda colonna.
Fai clic sull’elemento di testo per visualizzare la barra degli strumenti dell’editor.
Nella barra degli strumenti fare clic sull'icona Inserisci immagine ( ) ed eseguire le operazioni seguenti:
- Nella finestra di dialogo Insert/edit image, fai clic sull'icona_ Trova _( ) accanto al campo Source.
- Nella pagina Select Images, fare clic su Choose Files.
- Nella cartella in cui sono state salvate le risorse di pagina semplici, scegli rating.png.
- Tornando alla pagina, fai doppio clic sulla sezione dell’immagine per selezionarla e inserirne l’URL nel campo Source.
- Per Image Description, immettere 5-Star Rating e fare clic su OK per inserire l'immagine nella colonna.
- Nella barra degli strumenti dell'editor fare clic su Allinea al centro ( ) per centrare l'immagine nella colonna.
Posizionare il punto di inserimento subito dopo l'immagine a cinque stelle, premere Invio o A capo per iniziare una nuova riga e immettere il testo seguente:

Awesome Tank!

I'm a long distance runner and it keeps me pretty comfortable, although these companies always act like their shirts are magical and really it's just pretty basic stuff. Still it's a great shirt, and I would recommend it.

Antonia Racer Tank – Reviewed by Allyson

Il testo viene centrato durante la digitazione.
Formattare il testo:
- Fare clic in un punto qualsiasi della prima riga di testo e nella barra degli strumenti dell'editor in Formati scegliere Heading 2.
- Selezionare il testo rimanente e nella barra degli strumenti dell'editor in Formati scegliere Paragraph.
Il testo viene formattato in base al foglio di stile associato al tema.
Ottieni le dimensioni dell’immagine in modo da poter centrare il contenuto verticalmente nella colonna:
- Passa il puntatore del mouse sull'immagine nella prima colonna per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( ).
- Sotto la miniatura dell'immagine, prendere nota delle dimensioni dell'immagine.
- Nell'angolo superiore destro fare clic su Chiudi.
Centra il contenuto verticalmente nella seconda colonna:
- Passa il puntatore del mouse sulla seconda colonna per visualizzare la casella degli strumenti e scegli l'icona Impostazioni (
  
  ).
NOTE
Per visualizzare la casella degli strumenti corretta, assicurarsi di selezionare il contenitore di colonne anziché il contenitore di testo.
- Per Minimum Height, immetti 450 come altezza in pixel per l'immagine nella prima colonna.
- Imposta Vertical Alignment su Center.
Scorri verso il basso fino alla sezione Advanced e imposta tutti i valori Margins and Padding su zero ( 0 ).
Scorrere indietro fino alla parte superiore della pagina e nell'angolo superiore destro fare clic su Save per salvare le impostazioni e tornare all'area di lavoro Page Builder.

Passaggio 5: inserire un collegamento a un prodotto catalogo

Selezionare il testo Antonia Racer Tank e fare clic sull'icona Inserisci collegamento ( ) nella barra degli strumenti dell'editor.
Nella finestra di dialogo Inserisci collegamento, specifica il collegamento al prodotto del catalogo:
- Immettere il prodotto URL.
  
  Puoi immettere un URL relativo o completo. Per questo esempio viene inserito il seguente collegamento relativo:
  
  ../antonia-racer-tank.html
- (Facoltativo) Per Titolo, immettere il nome del prodotto.
  
  L’attributo di collegamento Titolo viene utilizzato da alcuni browser come descrizione comando.
- Al termine, fare clic su OK per salvare il collegamento.
  
  Il testo collegato viene ora evidenziato nel banner.
Nell'angolo superiore destro dell'area di visualizzazione fare clic sull'icona Chiudi schermo intero ( ).

Facendo clic su questa icona si ritorna alla sezione Content per la pagina con l'anteprima visualizzata.
Nell'angolo superiore destro fare clic su Save.

Passaggio 6: ridisporre le righe

Quando tutte e tre le righe sono state completate, il passaggio finale consiste nel ridisporre le righe in modo che corrispondano all'esempio originale di Pagina semplice. Per corrispondere all'esempio originale, la prima riga deve essere spostata in basso e l'ultima riga deve essere spostata in alto.

Se necessario, espandere nella sezione Content.
Fare clic su Edit with Page Builder o all'interno dell'area di anteprima del contenuto.
Passa il puntatore del mouse sulla prima riga nell'area di visualizzazione per visualizzare la casella degli strumenti e scegli l'icona Sposta ( ).
Tenere premuto il pulsante del mouse mentre si verifica che tutto il contenuto della riga sia selezionato e trascinare la riga nella posizione sotto la linea guida rossa nella parte inferiore della pagina.

NOTE
Se sposti accidentalmente solo una parte del contenuto, ad esempio l’immagine, è sufficiente spostare il contenuto nella posizione in cui appartiene e riprovare.
Ripetete questa procedura per spostare la prima riga nella seconda posizione.

L’ordine delle righe sulla pagina ora corrisponde all’esempio Pagina semplice.
Nell'angolo superiore destro dell'area di visualizzazione fare clic sull'icona Chiudi schermo intero ( ).

Facendo clic su questa icona si ritorna alla sezione Content per la pagina con l'anteprima visualizzata.
Nell'angolo superiore destro fare clic sulla freccia Save e scegliere Save & Close.
Se richiesto, fare clic sul collegamento Gestione cache nel messaggio nella parte superiore della pagina e aggiornare eventuali cache non valide.