Page Builder Procedura dettagliata parte 1: pagina semplice

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.