Page Builder Procedura dettagliata parte 1: pagina semplice

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. Se si utilizza una versione precedente di Adobe Commerce, utilizzare gli esercizi di procedura dettagliata Page Builder inclusi nella Commerce 2.3 Guida utente.

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:

Scaricare le risorse immagine della procedura dettagliata

  1. Scaricare il file simple-page-assets e salvarlo nel sistema locale.

  2. 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:

    Page Builder file di procedura dettagliata - risorse di pagina semplici {width="500"}

Seguire le tre parti della procedura dettagliata in ordine.

Parte 1: riga a tutto pagina con banner

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

  1. Nella barra laterale Admin, passa a Content > Elements>Pages.

  2. 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.

    Impostazioni pagina di base {width="600" modal="regular"}

  3. Espandere Il selettore di espansione 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.

  4. 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 note
    NOTE
    Il layout Larghezza intera può essere utilizzato solo con un tema compatibile.

    Impostazioni struttura pagina {width="600" modal="regular"}

  5. 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

  1. Espandere Il selettore di espansione nella sezione Content.

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

    note note
    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.

    Anteprima contenuto pagina con riga vuota {width="600" modal="regular"}

  2. 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.

  3. 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.

    Page Builder casella degli strumenti riga {width="600" modal="regular"}

  4. Nella casella degli strumenti Riga, scegliere l'icona Impostazioni ( Impostazioni {width="20"}.

  5. 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.

    Impostazioni riga - pagina al vivo completa {width="600" modal="regular"}

  6. 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.

    Impostazioni riga - margini e spaziatura interna {width="600" modal="regular"}

  7. 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.

Passaggio 3: aggiungere un banner

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.
  1. Nel pannello Page Builder, espandi Media e trascina un segnaposto Banner nell'area di visualizzazione.

    Trascinamento di un tipo di contenuto banner nell'area di visualizzazione {width="600" modal="regular"}

  2. Passa il puntatore del mouse sul contenitore del banner per visualizzare la casella degli strumenti.

    note note
    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.

    Casella degli strumenti banner {width="600" modal="regular"}

  3. Nella casella degli strumenti del banner, scegli l'icona Impostazioni ( Icona Impostazioni {width="20"} ).

  4. In Appearance ​scegliere Collage Right.

    L'impostazione Collage Right posiziona il contenuto sul lato destro del banner.

    Aspetto banner - diritto collage {width="600" modal="regular"}

  5. Scorri verso il basso fino alla sezione Background ​e imposta l'immagine di sfondo per il banner:

    • Per Background Image, fare clic su Carica.

      Sfondo banner - carica immagine {width="600" modal="regular"}

      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.

      Immagine di sfondo caricata nella raccolta multimediale {width="600" modal="regular"}

    • 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.

      Selezione del file di immagine del banner di esempio per dispositivi mobili {width="600" modal="regular"}

    • 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.

      Banner con immagine di sfondo {width="600" modal="regular"}

    Osserva il testo segnaposto visualizzato sul lato destro della riga. La posizione di questo testo riflette l'impostazione dell'aspetto Collage Right.

  6. 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.

    Modifica del contenuto del banner dall'area di visualizzazione {width="600" modal="regular"}

  7. Applica formattazione al testo:

    • Selezionare la prima riga di testo. Quindi, nella barra degli strumenti dell'editor in Formati, scegli Heading 2.

      Applicazione del formato Titolo 2 {width="600" modal="regular"}

    • 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.

    Banner nella fase del contenuto con testo formattato {width="600" modal="regular"}

__

  1. Passa il puntatore del mouse per visualizzare la casella degli strumenti del banner, scegli nuovamente l'icona Impostazioni ( Icona Impostazioni {width="20"} ), 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.

    Impostazioni banner - testo messaggio {width="600" modal="regular"}

  2. 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.

      Contenuto banner - collegamento alla categoria {width="600" modal="regular"}

    • 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.

  3. 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.

      Impostazioni banner - colore sovrapposizione pulsante {width="600" modal="regular"}

    • 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.

      Banner nella fase del contenuto con SMS e pulsante {width="600" modal="regular"}

  4. Nell'angolo superiore destro dell'area di visualizzazione fare clic sull'icona Chiudi schermo intero ( Chiudi icona 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.

  5. Nell'angolo superiore destro fare clic sulla freccia Save e scegliere Save & Close.

  6. 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

  1. Nella griglia Pagine individuare la pagina semplice creata nella prima parte dell'esercizio e selezionare Edit nella colonna Action.

  2. Espandere Il selettore di espansione nella sezione Content.

  3. Fare clic su Edit with Page Builder o all'interno dell'area di anteprima del contenuto.

  4. 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.

    Aggiunta di una nuova riga sopra il banner {width="600" modal="regular"}

  5. Passa il puntatore del mouse sulla nuova riga per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( Icona Impostazioni {width="20"} ).

    Casella degli strumenti Riga {width="600" modal="regular"}

  6. In Appearance, accettare l'impostazione predefinita Contains.

    Questa impostazione limita l’area del contenuto della riga alla larghezza della pagina definita dal tema.

    Mantenimento dell'impostazione predefinita per l'aspetto contenuto {width="600" modal="regular"}

  7. 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

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

    Trascinamento di un tipo di contenuto colonna nell'area di visualizzazione {width="600" modal="regular"}

    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.

    Riga con due colonne di larghezza uguale {width="600" modal="regular"}

  2. Nell'angolo superiore sinistro della prima colonna fare clic sul controllo circolare Griglia ( Controllo 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.

    Visualizzazione dei dettagli delle dimensioni della griglia per la colonna {width="600" modal="regular"}

Passaggio 3: aggiungere immagini con collegamenti

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

  1. Nel pannello Page Builder, espandere la sezione Media e trascinare un segnaposto Image nella prima colonna.

    Trascinamento del tipo di contenuto dell'immagine nella prima colonna {width="600" modal="regular"}

  2. Inserite l'immagine di esempio nel segnaposto.

    Segnaposto immagine {width="600" modal="regular"}

    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.

      Immagine caricata aggiunta alla prima colonna {width="600" modal="regular"}

      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.

      Trascinamento dell'immagine nella seconda colonna {width="600" modal="regular"}

      Ripetere questa azione per aggiungere il file small-banner-2.jpg alla seconda colonna.

  3. Determina quale pagina del catalogo desideri collegare a ogni immagine.

  4. Passa il puntatore del mouse sull'immagine nella prima colonna per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( Icona Impostazioni {width="20"} ).

    Casella degli strumenti Immagine {width="600" modal="regular"}

  5. 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.

  6. Ripetere il passaggio precedente per collegare l'immagine nella seconda colonna alla categoria Ingranaggio.

  7. Nell'angolo superiore destro dell'area di visualizzazione fare clic sull'icona Chiudi schermo intero ( Chiudi icona schermo intero ).

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

  8. Nell'angolo superiore destro fare clic sulla freccia Save e scegliere Save & Close.

  9. 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

  1. Nella griglia Pagine individuare la pagina semplice creata nella prima parte dell'esercizio e selezionare Edit nella colonna Action.

  2. Espandere Il selettore di espansione nella sezione Content.

  3. Fare clic su Edit with Page Builder o all'interno dell'area di anteprima del contenuto.

  4. 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.

    Aggiunta di una nuova riga {width="600" modal="regular"}

  5. Passa il puntatore del mouse sulla nuova riga per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( Icona Impostazioni {width="20"} ).

    Casella degli strumenti Riga {width="600" modal="regular"}

  6. 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.

    Selezione dell'aspetto Larghezza intera {width="600" modal="regular"}

  7. Nella sezione Background ​immettere #f1f1f1 come Background Color.

    Impostazione del colore di sfondo {width="600" modal="regular"}

  8. Scorri verso il basso fino alla sezione Advanced ​e imposta tutti i valori Margini e spaziatura interna ​su 0.

    Impostazione di margini e spaziatura interna {width="600" modal="regular"}

  9. 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.

    Riga con il colore di sfondo nell'area di visualizzazione {width="600" modal="regular"}

Passaggio 2: aggiungere colonne di larghezza diversa

  1. Nel pannello Page Builder sotto Layout, trascina un segnaposto Column ​nella riga superiore dell'area di visualizzazione.

    Trascinamento di una colonna nell'area di visualizzazione {width="600" modal="regular"}

  2. 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).

    Ridimensionamento della prima colonna {width="600" modal="regular"}

  3. Passa il puntatore del mouse sul primo contenitore di colonne per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( Icona Impostazioni {width="20"} ).

  4. Scorri verso il basso fino alla sezione Advanced ​e imposta tutti i valori Margini e spaziatura interna ​su 0.

    Impostazione di margini e spaziatura interna {width="600" modal="regular"}

  5. 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

  1. Nel pannello Page Builder, espandere Media e trascinare un tipo di contenuto Image nella prima colonna.

    Trascinamento di un tipo di contenuto immagine nella prima colonna {width="600" modal="regular"}

  2. Nel segnaposto immagine, fare clic su Upload Image.

    Carica immagine {width="600" modal="regular"}

  3. 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.

    Immagine caricata aggiunta alla colonna {width="600" modal="regular"}

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.

  1. Nel pannello Page Builder, espandere la sezione Elements e trascinare il tipo di contenuto Text nella seconda colonna.

    Trascinamento del tipo di contenuto di testo nell'area di visualizzazione {width="600" modal="regular"}

  2. Fai clic sull’elemento di testo per visualizzare la barra degli strumenti dell’editor.

  3. Nella barra degli strumenti fare clic sull'icona Inserisci immagine ( Inserisci icona immagine ) ed eseguire le operazioni seguenti:

    Inserimento di un'immagine nel testo {width="600" modal="regular"}

    • Nella finestra di dialogo Insert/edit image, fai clic sull'icona_ Trova _( Icona Trova ) accanto al campo​ Source.

      Finestra di dialogo Inserisci/modifica immagine {width="600" modal="regular"}

    • 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.

      Scelta dell'immagine nella pagina {width="600" modal="regular"}

    • 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 ( Pulsante Allinea al centro ) per centrare l'immagine nella colonna.

      Immagine di valutazione centrata {width="600" modal="regular"}

  4. 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.

    Rivedi il testo centrato nella colonna {width="600" modal="regular"}

  5. 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.

  6. 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 ( Icona Impostazioni {width="20"} ).

    • Sotto la miniatura dell'immagine, prendere nota delle dimensioni dell'immagine.

      Dimensioni immagine visualizzate sotto la miniatura {width="600" modal="regular"}

    • Nell'angolo superiore destro fare clic su Chiudi.

  7. 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 ( Icona Impostazioni {width="20"} ).
    note note
    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.

    Impostazione dell'altezza minima e dell'allineamento verticale {width="600" modal="regular"}

  8. Scorri verso il basso fino alla sezione Advanced ​e imposta tutti i valori Margins and Padding ​su zero ( 0 ).

    Impostazione di margini e spaziatura interna {width="600" modal="regular"}

  9. 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.

    Riga con contenuto di revisione nell'area di visualizzazione {width="600" modal="regular"}

  1. Selezionare il testo Antonia Racer Tank e fare clic sull'icona Inserisci collegamento ( Inserisci collegamento icona ) nella barra degli strumenti dell'editor.

  2. 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.

      Inserimento di un collegamento nel testo {width="600" modal="regular"}

    • Al termine, fare clic su OK per salvare il collegamento.

      Il testo collegato viene ora evidenziato nel banner.

      Banner con testo collegato {width="600" modal="regular"}

  3. Nell'angolo superiore destro dell'area di visualizzazione fare clic sull'icona Chiudi schermo intero ( Chiudi icona schermo intero ).

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

  4. 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.

  1. Se necessario, espandere Selettore di espansione nella sezione Content.

  2. Fare clic su Edit with Page Builder o all'interno dell'area di anteprima del contenuto.

  3. Passa il puntatore del mouse sulla prima riga nell'area di visualizzazione per visualizzare la casella degli strumenti e scegli l'icona Sposta ( Icona Sposta ).

    Sposta {width="600" modal="regular"}

  4. 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 note
    NOTE
    Se sposti accidentalmente solo una parte del contenuto, ad esempio l’immagine, è sufficiente spostare il contenuto nella posizione in cui appartiene e riprovare.

    Spostamento di una riga nell'area di visualizzazione {width="600" modal="regular"}

  5. Ripetete questa procedura per spostare la prima riga nella seconda posizione.

    L’ordine delle righe sulla pagina ora corrisponde all’esempio Pagina semplice.

  6. Nell'angolo superiore destro dell'area di visualizzazione fare clic sull'icona Chiudi schermo intero ( Chiudi icona schermo intero ).

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

  7. Nell'angolo superiore destro fare clic sulla freccia Save e scegliere Save & Close.

  8. Se richiesto, fare clic sul collegamento Gestione cache nel messaggio nella parte superiore della pagina e aggiornare eventuali cache non valide.

Hai completato l’esercizio Pagina semplice. Conserva il lavoro creato, in modo da poterci fare riferimento in un secondo momento.

Quando sei pronto, procedi a Parte 2: Blocchi.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d