Page Builder Procedura dettagliata parte 1: pagina semplice

Segui questo esercizio in tre parti per acquisire familiarità con Page Builder Workspace creando una pagina semplice che illustri quanto sia semplice creare pagine ricche di contenuti con il tuo design.

Esempio di pagina semplice {width="700" modal="regular"}

NOTE
Questi esercizi di procedura dettagliata vengono aggiornati per riflettere le recenti modifiche apportate al Page Builder nella versione 2.4.1. Se utilizzi una versione precedente di Adobe Commerce, utilizza Page Builder esercitazioni dettagliate incluse nel Commerce 2.3 Guida utente.

Prima di iniziare

Prima di iniziare questo esercizio, si consiglia di aumentare il Durata sessione amministratore per evitare il timeout della sessione mentre si lavora.

Verifica le impostazioni di configurazione di Content Management richieste:

Scaricare le risorse immagine della procedura dettagliata

  1. Scarica il file simple-page-assets e salvare il file 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. Quindi, scegli la cartella di destinazione e fai 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 della 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 {width="700" modal="regular"}

Passaggio 1: creare una pagina

  1. Il giorno Amministratore barra laterale, vai a Content > Elements>Pages.

  2. Nell’angolo superiore destro, fai clic su Add New Page ed effettuare le seguenti operazioni:

    • Per evitare che la pagina venga pubblicata nel Negozio, impostare Enable Page a No.

    • Per Page Title, immetti Simple Page.

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

  3. Espandi Selettore di espansione il Design sezione.

    Tieni presente che Layout è impostato su Page -- Full Width per impostazione predefinita. Oltre ai cinque standard layout opzioni, Page Builder aggiunge layout a larghezza intera per pagine, categorie e prodotti.

  4. Se i dati di esempio sono disponibili, impostare New Theme a Magento Luma. In caso contrario, è possibile scegliere un altro tema disponibile o lasciarlo vuoto per utilizzare il tema predefinito.

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

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

  5. Nell’angolo superiore destro, fai 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. Espandi Selettore di espansione il Content sezione.

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

    note note
    NOTE
    Il Intestazione contenuto è facoltativo. Per impostazione predefinita, è formattato come livello di intestazione 1 (H1) in base al tema. Per questo esercizio, il Intestazione contenuto viene lasciato vuoto.

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

  2. Clic Edit with Page Builder o all'interno dell'area di anteprima dei contenuti.

    Nella sezione espansa Page Builder workspace, 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 Impostazioni ( Icona Impostazioni {width="20"} icona.

  5. Sotto Appearance, scegli Emorragia 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 a Advanced ​sezione e imposta tutto Margins and Padding ​impostazioni per 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 al Page Builder , scorri verso l’alto fino alla parte superiore della pagina e fai clic Save nell’angolo superiore destro.

Passaggio 3: aggiungere un banner

NOTE
Page Builder ha un nuovo tipo di contenuto denominato Banner, descritto in questo passaggio. Precedentemente il Banner nel menu Contenuto, è ora un'opzione Blocco dinamico.
  1. In Page Builder pannello, espandere Media e trascina un Banner segnaposto 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, la Carica immagine e Seleziona dalla raccolta sono inclusi pulsanti che consentono di apportare modifiche rapide al banner direttamente dall'area di visualizzazione.

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

  3. Nella casella degli strumenti Banner, scegliere Impostazioni ( Icona Impostazioni {width="20"} ).

  4. Sotto Appearance, scegli Collage Right.

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

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

  5. Scorri verso il basso fino a Background ​e impostare l'immagine di sfondo per il banner:

    • Per Background Image, fai clic su Carica.

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

      Passa alla directory in cui sono state salvate le risorse di pagina semplici estratte e scegli wide-banner-background.jpg file.

      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 galleria di file multimediali {width="600" modal="regular"}

    • Per Background Mobile Image, fai clic su Carica.

      Nella stessa directory di file, scegliere wide-banner-background-mobile.jpg file.

      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 i dispositivi mobili {width="600" modal="regular"}

    • Scorri indietro fino alla parte superiore della pagina e fai clic su Save per salvare le impostazioni e tornare a Page Builder Workspace.

      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 Collage Right impostazione dell'aspetto.

  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. Passare il puntatore del mouse sulla casella degli strumenti del banner, scegliere Impostazioni ( Icona Impostazioni {width="20"} ), quindi scorrere fino alla Content ​sezione.

    Il testo viene visualizzato in Testo messaggio casella. Il testo può essere inserito e modificato sia dall'area di visualizzazione che dall'area di visualizzazione Content ​sezione delle impostazioni del banner.

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

  2. Continuando in Content, impostare il collegamento e il pulsante del banner:

    • Imposta Collegamento a Categorye quindi fare clic su Select per visualizzare l'albero delle categorie.

    • Scegli What's New come categoria collegata.

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

    • Imposta Show Button a Always.

    • Per Button Text, immetti Shop Now come testo visualizzato sul pulsante.

    • Per Button Type, accetta Primary impostazione predefinita.

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

    • Per Overlay Color, eseguire una delle operazioni seguenti:

      • Fate clic sul quadrato di colore e scegliete il campione bianco.
      • Fai clic su nella Nessun colore e immettere White o il valore esadecimale #ffffff.

      Quindi, fai clic su Apply.

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

    • Scorri indietro fino alla parte superiore della pagina e fai clic su Save per salvare le impostazioni e tornare a Page Builder Workspace.

      Il pulsante viene visualizzato sotto il messaggio del banner sullo stage.

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

  4. Nell'angolo superiore destro dell'area di visualizzazione fare clic sul pulsante Chiudi schermo intero ( Icona Chiudi schermo intero ).

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

    È possibile passare da una modalità all'altra in qualsiasi momento.

  5. Nell’angolo in alto a destra, fai clic su Save freccia e scegli Save & Close.

  6. Se richiesto, fare clic su Gestione cache nel messaggio nella parte superiore della pagina e aggiorna 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 riga per rendere Page Builder pannello allineato con stage. 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 {width="600" modal="regular"}

Passaggio 1: aggiungere una riga

  1. Nella griglia Pagine individuare Pagina semplice creato nella prima parte di questo esercizio e selezionare Edit nel Action ​colonna.

  2. Espandi Selettore di espansione il Content sezione.

  3. Clic Edit with Page Builder o all'interno dell'area di anteprima dei contenuti.

  4. In Page Builder pannello in Layout, trascina un Row ​segnaposto nell'area di visualizzazione e posizionarlo 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 la Impostazioni ( Icona Impostazioni {width="20"} ).

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

  6. Sotto Appearance, accetta Contenuto ​impostazione predefinita.

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

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

  7. Nell’angolo superiore destro, fai clic su Save per salvare le impostazioni e tornare a Page Builder Workspace.

Passaggio 2: aggiungere una colonna

  1. In Page Builder pannello in Layout, trascina un Column ​segnaposto per la 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 sulla forma circolare Griglia controllo ( 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 Configura Page Builder sezione nella sezione Page Builder Argomento di configurazione.

    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. In Page Builder , espandere Media e trascina un Image segnaposto alla prima colonna.

    Trascinamento del tipo di contenuto 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, fai clic su Upload Image. Quindi, passa alla directory in cui sono state salvate le risorse di pagina semplici estratte e scegli la small-banner-1.jpg file.

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

      Ripeti questa azione per aggiungere small-banner-2.jpg alla seconda colonna.

    • Trascina il file di immagine: sul desktop, apri la cartella delle risorse della pagina semplice e posizionala accanto alla finestra del browser Amministratore in cui stai lavorando con Page Builder fase. Quindi, trascina il file small-banner-1.jpg dalla cartella delle risorse di pagina semplici e rilasciala nella prima colonna.

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

      Ripeti questa azione per aggiungere 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 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 Collegamento a Category.

    • Nell'albero delle categorie eseguire il drilling verso il basso e scegliere Men's Hoodies & Sweatshirt categoria.

    • Nell'angolo superiore destro, Save le impostazioni e tornare al Page Builder Workspace.

  6. Ripeti il passaggio precedente per collegare l’immagine nella seconda colonna al Ingranaggio categoria.

  7. Nell'angolo superiore destro dell'area di visualizzazione fare clic sul pulsante Chiudi schermo intero ( Icona Chiudi schermo intero ).

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

  8. Nell’angolo in alto a destra, fai clic su Save freccia e scegli Save & Close.

  9. Quando richiesto, fare clic su Gestione cache nel messaggio nella parte superiore della pagina e aggiorna 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 {width="500"}

Passaggio 1: aggiungere una riga

  1. Nella griglia Pagine individuare Pagina semplice creato nella prima parte di questo esercizio e selezionare Edit nel Action ​colonna.

  2. Espandi Selettore di espansione il Content sezione.

  3. Clic Edit with Page Builder o all'interno dell'area di anteprima dei contenuti.

  4. In Page Builder pannello in Layout, trascina un Row ​posizionare il segnaposto sullo stage e posizionarlo sopra la riga creata nella seconda parte dell'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 la Impostazioni ( Icona Impostazioni {width="20"} ).

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

  6. Nella pagina Modifica riga sotto Appearance, scegli 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. In Background, immetti #f1f1f1 come Background Color.

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

  8. Scorri verso il basso fino a Advanced ​sezione e imposta tutto Margini e spaziatura ​valori per 0.

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

  9. Scorri indietro fino alla parte superiore della pagina e fai clic su Save per salvare le impostazioni e tornare a Page Builder Workspace.

    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. In Page Builder pannello in Layout, trascina un Column ​segnaposto nella riga superiore sullo stage.

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

  2. Trascinare il bordo destro della prima colonna sui 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 Impostazioni ( Icona Impostazioni {width="20"} ).

  4. Scorri verso il basso fino a Advanced ​sezione e imposta tutto Margini e spaziatura ​valori per 0.

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

  5. Scorri indietro fino alla parte superiore della pagina e fai clic su Save per salvare le impostazioni e tornare a Page Builder Workspace.

Passaggio 3: aggiungere un’immagine alla prima colonna

  1. In Page Builder pannello, espandere Media e trascina un Image tipo di contenuto alla prima colonna.

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

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

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

  3. Passa alla directory in cui sono state salvate le risorse di pagina semplici estratte e scegli review-image.jpg file.

    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. In Page Builder , espandere Elements e trascinare il Text alla seconda colonna.

    Trascinamento del tipo di contenuto 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, fai clic su Inserisci immagine ( Icona Inserisci immagine ) ed effettuare le seguenti operazioni:

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

    • In Insert/edit image, fai clic sul pulsante_ Trova _(  Icona Trova  ) accanto al simbolo​ Source campo.

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

    • Il giorno Select Images ​pagina, fai 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 Sorgente.

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

    • Per Image Description, immetti 5-Star Rating e fai clic su OK per inserire l'immagine nella colonna.

    • Nella barra degli strumenti dell’editor, fai 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:

    • Fai clic in un punto qualsiasi della prima riga di testo e nella barra degli strumenti dell’editor in Formati, scegli Heading 2.

    • Seleziona il testo rimanente e nella barra degli strumenti dell’editor in Formati, scegli 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 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, fai 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 la 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 dell’immagine nella prima colonna.

    • Imposta Vertical Alignment a Center.

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

  8. Scorri verso il basso fino a Advanced ​sezione e imposta tutto Margins and Padding ​valori a zero ( 0 ).

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

  9. Scorri indietro fino alla parte superiore della pagina e fai clic su nell’angolo superiore destro Save per salvare le impostazioni e tornare a Page Builder Workspace.

    Riga con contenuto di revisione sull’area di visualizzazione {width="600" modal="regular"}

  1. Seleziona la Antonia Racer Tank e fare clic sul pulsante Inserisci collegamento ( Icona Inserisci collegamento ) nella barra degli strumenti dell’editor.

  2. In Inserisci collegamento specifica il collegamento al prodotto del catalogo:

    • Inserisci 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, immetti 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, fai 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 sul pulsante Chiudi schermo intero ( Icona Chiudi schermo intero ).

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

  4. Nell’angolo superiore destro, fai 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’originale Pagina semplice esempio. 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 il Content sezione.

  2. Clic Edit with Page Builder o all'interno dell'area di anteprima dei contenuti.

  3. Passa il puntatore del mouse sulla prima riga dello stage per visualizzare la casella degli strumenti e scegli la 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 sull'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 sul pulsante Chiudi schermo intero ( Icona Chiudi schermo intero ).

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

  7. Nell’angolo in alto a destra, fai clic su Save freccia e scegli Save & Close.

  8. Se richiesto, fare clic su Gestione cache nel messaggio nella parte superiore della pagina e aggiorna 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