Page Builder Procedura dettagliata parte 2: blocchi

L'esercizio seguente illustra la differenza tra blocchi semplici e blocchi dinamici e come utilizzare Page Builder per creare ogni tipo di blocco.

NOTE
Page Builder ha un nuovo tipo di contenuto denominato Banner, che è presente nel primo esercizio di procedura dettagliata e non è correlato alla funzionalità precedente del banner. Precedentemente l'opzione Banner nel menu Contenuto era Blocco dinamico.

Blocco dinamico nella vetrina

Questo esercizio presuppone che tu abbia completato Parte 1: Pagina semplice, inclusi i prerequisiti e file di esempio scaricati. Seguire le parti di questo esercizio di procedura dettagliata in ordine.

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

Parte 1: Creare un blocco semplice

In questo esercizio di procedura dettagliata verrà creato un blocco semplice con il contenuto di Google Maps. I blocchi semplici sono talvolta denominati blocchi CMS o blocchi statici, perché il contenuto non cambia. Un blocco semplice è ideale per i contenuti che potresti voler riutilizzare.

Passaggio 1: creare un blocco

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

  2. Nell'angolo superiore destro fare clic su Add New Block.

  3. Per Block Title, immettere Google Map.

  4. Per Identifier, immettere google-map.

  5. Scegli Store View dove il blocco deve essere disponibile.

    Informazioni sul blocco {width="600" modal="regular"}

  6. Nell'angolo superiore destro fare clic su Save.

Passaggio 2: aggiungere Google Map

  1. Scorri verso il basso fino all'anteprima del contenuto Page Builder (attualmente vuota) e fai clic su Edit with Page Builder.

  2. Nel pannello Page Builder, espandere Media e trascinare un segnaposto Map nell'area di visualizzazione.

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

    Se Google Maps è configurato per il tuo archivio, verrà visualizzata una mappa con il percorso del tuo archivio.

    Mappa di Google configurata per il tuo archivio {width="600" modal="regular"}

    Se Google Maps non è ancora configurato per l'archivio, verrà visualizzata una mappa segnaposto.

    Google Maps segnaposto {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 il blocco con l'anteprima visualizzata.

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

Passaggio 3: configurare Google Maps

Se Google Maps è già configurato per il tuo archivio, puoi saltare questo passaggio e passare a quello successivo.

  1. Passa alla console della piattaforma Google Cloud.

  2. Fai clic sull’elenco a discesa del progetto e seleziona o crea il progetto per il quale desideri aggiungere una chiave API.

  3. Per configurare le credenziali API, segui le istruzioni nella documentazione di Google Maps.

  4. Copia la chiave API negli Appunti.

  5. Torna all'amministratore Commerce e passa a Stores > Settings>Configuration.

  6. Nel pannello a sinistra in General, scegli Content Management.

  7. Espandere Selettore di espansione Advanced Content Tools.

    Strumenti di contenuto avanzati {width="600" modal="regular"}

    Per ulteriori informazioni sulle opzioni di configurazione Content Management Advanced Tools, vedere la Guida di riferimento alla configurazione.

  8. Per Google Maps API Key, incolla la chiave copiata.

  9. Fare clic su Test Key.

    Se si è verificato un problema con la chiave, tornare al sito di Google Maps Platform per risolvere il problema. Riprovare.

  10. Dopo aver verificato la chiave, fare clic su Save Config.

Passaggio 4: aggiungere il blocco a una pagina

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

  2. Nella griglia, trovare Simple Page ​creato nel primo tutorial e selezionare Edit ​nella colonna​ Action.

  3. Espandere Il selettore di espansione nella sezione Content e 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 ​nella parte superiore dell'area di visualizzazione.

    Aggiunta della riga all'inizio della fase {width="600" modal="regular"}

  5. Nel pannello Page Builder, espandi Add Content e trascina un segnaposto Block nella nuova riga.

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

    Blocca casella strumenti {width="600" modal="regular"}

  7. Nella pagina Modifica blocco fare clic su Select Block.

    Seleziona blocco {width="600" modal="regular"}

  8. Nella casella di ricerca, immettere map e premere Invio/Ritorno per trovare il blocco creato.

    Trova blocco nell'elenco {width="600" modal="regular"}

  9. Nella griglia, fare clic su Select per scegliere il blocco Google Maps.

  10. Nell'angolo superiore destro fare clic su Save per salvare le impostazioni e tornare all'area di lavoro Page Builder.

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

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

Congratulazioni! È stata completata la prima parte dell'esercizio di blocco. Assicurati di conservare il tuo lavoro come riferimento.

Parte 2: Creare un blocco dinamico

Un blocco dinamico include una logica che determina dove, quando e a chi viene visualizzato. In questo esercizio di procedura dettagliata, viene creato un blocco dinamico per una promozione che viene attivato quando vengono soddisfatte le condizioni della regola di prezzo e che viene visualizzato solo a un segmento di clienti specifico. Il risultato di questo esempio è simile al banner creato nel primo esercizio, ma con una logica che controlla quando viene visualizzato nella vetrina.

Esempio di promozione tee Luma

Passaggio 1: creare un nuovo blocco dinamico

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

    Elenco blocchi dinamici {width="700" modal="regular"}

  2. Nell'angolo superiore destro fare clic su Add Dynamic Block.

    Nuova pagina blocco dinamico {width="600" modal="regular"}

  3. Completa le impostazioni di base per il nuovo blocco dinamico:

    • Imposta Enable Dynamic Block su Yes.

    • Per Dynamic Block Name, immettere Tee Shirt Promo.

    • Impostare Dynamic Block Type su Content Area e fare clic su Done.

      Il tipo di blocco dinamico determina la posizione del blocco nel layout di pagina. Quando imposti un blocco dinamico per il tuo archivio, considera sia il layout di pagina che il tema, in modo da poter sfruttare lo spazio disponibile. Alcuni negozi hanno un’area di contenuto attiva limitata a una larghezza fissa, mentre altri estendono l’intera larghezza dello schermo.

      Impostazione tipo blocco dinamico {width="600" modal="regular"}

    • Per Customer Segment, seleziona la casella di controllo di ciascun segmento che desideri applicare al blocco dinamico e fai clic su Fine per salvare l'elenco dei segmenti.

      Nell'esempio seguente sono presenti due segmenti di clienti che identificano i clienti registrati in base al sesso. Questo blocco dinamico viene visualizzato solo per le clienti di sesso femminile registrate che hanno effettuato l’accesso ai loro account mentre fanno acquisti nel tuo negozio.

      Scelta dei segmenti cliente {width="600" modal="regular"}

Passaggio 2: completare le impostazioni

Scorri verso il basso fino alla sezione Content, che visualizza un'anteprima del contenuto Page Builder vuota, e fai clic su Edit with Page Builder. Quindi, completa le seguenti attività:

Attività 1: Aggiungi un'immagine di sfondo

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

  2. In Appearance ​scegliere Full Bleed.

  3. Per Minimum Height, immettere 400px.

  4. Scorri fino alla sezione Background ​e imposta Background Image ​facendo clic su Select from Gallery ​e scegliendo l'immagine wide-banner-background.png caricata nella prima esercitazione.

  5. Nell'angolo superiore destro fare clic su Save per applicare le impostazioni e tornare all'area di lavoro Page Builder.

    Riga con immagine {width="600" modal="regular"}

Attività 2: Aggiungi colonne

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

Trascinamento del tipo di colonna nella riga

La riga è ora divisa in due colonne di uguale larghezza.

Attività 3: Aggiungi testo

  1. Nel pannello Page Builder, espandi Elements e trascina un segnaposto Testo nella seconda colonna.

    Trascinamento di una casella di testo nella seconda colonna {width="600" modal="regular"}

  2. Immetti nell’editor le tre righe di testo seguenti:

    Even more ways to mix and match.

    Buy 3 Luma tees and get a 4th free.

    Shop Tees >

    Inserimento di testo per la colonna {width="600" modal="regular"}

  3. Selezionare tutte e tre le righe di testo e utilizzare la barra degli strumenti per impostare Altezza riga su 40px.

    Impostazione dell'altezza della riga {width="600" modal="regular"}

  4. Impostare Font Size per ogni riga come segue:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Linea Dimensione font
    Riga 1: 28px
    Riga 2: 24px
    Riga 3: 18px

    Poiché questo blocco può essere posizionato in qualsiasi punto della pagina, utilizza lo stile di paragrafo predefinito, anziché i livelli di intestazione. Inoltre, non preoccuparti che il testo non venga ancora disposto correttamente nella colonna.

    Testo formattato {width="600" modal="regular"}

Attività 4: Aggiungi un collegamento

Nel primo esercizio hai imparato a utilizzare il tipo di contenuto Button per creare un collegamento. Questo esempio mostra come inserire un collegamento dalla barra degli strumenti dell’editor.

  1. In un’altra scheda del browser, apri la vetrina e passa alla pagina che deve essere la destinazione del collegamento.

    Puoi utilizzare l’URL completo o un URL relativo che omette il riferimento al dominio dello store.

    URL completo
    : https://mystore.com/women/tops-women/tees-women.html

    URL relativo
    : ../women/tops-women/tees-women.html

  2. Torna alla scheda dell'area di lavoro Page Builder e all'editor di testo, seleziona il testo Shop Tees > nella terza riga e scegli Bold ( Bold button ) nella barra degli strumenti dell'editor.

  3. Con il testo Shop Tees > nella terza riga ancora selezionato, scegli Inserisci/modifica collegamento ( Inserisci/modifica collegamento pulsante ) nella barra degli strumenti dell'editor.

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

  4. Per URL, immettere il collegamento relativo preparato.

  5. Imposta Target su None.

    Questa impostazione consente di aprire la pagina nella stessa finestra del browser, anziché aprire una nuova scheda.

  6. Per Title, immettere Shop Tees.

    L’attributo di collegamento Titolo viene utilizzato da alcuni browser come descrizione comando.

  7. Per salvare il collegamento e tornare all'area di lavoro Page Builder, fare clic su OK.

    Dettagli collegamento {width="600" modal="regular"}

  8. 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 il blocco dinamico con l'anteprima visualizzata.

  9. Nell'angolo superiore destro fare clic su Save.

Passaggio 3: aggiungere una regola di prezzo

  1. Apri di nuovo il blocco dinamico Tee Shirt Promo in modalità di modifica.

  2. Espandere Il selettore di espansione nella sezione Related Promotions e fare clic su Add Cart Price Rules.

    Promozioni correlate {width="600" modal="regular"}

  3. Nella pagina Aggiungi regole prezzo carrello correlato, seleziona la casella di controllo per Acquista 3 magliette e ottieni la quarta regola di prezzo gratuita, quindi fai clic su Add Selected.

    Aggiunta di una regola del prezzo del carrello correlata {width="600" modal="regular"}

    La regola prezzo viene visualizzata nella sezione Promozioni correlate in Regola prezzo carrello correlato. È possibile associare più regole di prezzo a un blocco dinamico. Tuttavia, questo semplice esempio ne utilizza solo uno.

    Regola prezzo carrello selezionato {width="600" modal="regular"}

  4. Nell'angolo superiore destro fare clic su Save.

Passaggio 4: aggiungere il blocco dinamico a una pagina

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

  2. Trovare la pagina semplice creata nel primo esercizio di procedura dettagliata e aprirla in modalità di modifica.

  3. Espandere Il selettore di espansione nella sezione Content e fare clic su Edit with Page Builder.

  4. Passa il puntatore del mouse sulla riga superiore con la stessa immagine del blocco dinamico per visualizzare la casella degli strumenti e l'icona Rimuovi ( Icona Rimuovi {width="20"} ).

    Per confermare la rimozione della riga dalla pagina, fare clic su OK.

  5. Nel pannello Page Builder sotto Layout, trascina un nuovo segnaposto Row ​nella parte superiore dell'area di visualizzazione.

  6. Nel pannello Page Builder, espandi Add Content e trascina un segnaposto Dynamic Block nella nuova riga.

    Trascinamento di un blocco dinamico sulla riga {width="600" modal="regular"}

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

    Casella degli strumenti blocco dinamico {width="600" modal="regular"}

  8. Nella pagina Edit Dynamic Block, fare clic su Select Dynamic Block.

    Seleziona blocco dinamico {width="600" modal="regular"}

  9. Trovare il blocco dinamico Tee Shirt Promo ​creato e fare clic su Select.

    Di seguito viene visualizzato un riepilogo delle informazioni sul blocco dinamico.

    Informazioni blocco dinamico {width="600" modal="regular"}

  10. Accettare Template, Dynamic Block Block Template predefiniti.

  11. Al termine, fare clic su Save per salvare le impostazioni e tornare all'area di lavoro Page Builder.

    Blocco dinamico nell'anteprima della pagina {width="600" modal="regular"}

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

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

La seconda parte dell'esercizio Blocca è stata completata. Assicurati di conservare il tuo lavoro come riferimento.

Parte 3: Aggiornare il blocco dinamico

In questa parte finale dell’esercizio modificherai un blocco dinamico mentre la pagina è attiva nel tuo store. Quindi, accedi al negozio come membro del segmento del cliente per far apparire il blocco.

Blocco dinamico di esempio nella vetrina

Passaggio 1: modificare il blocco dinamico

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

  2. Trova il blocco dinamico Tee Shirt Promo ​nella griglia e aprilo in modalità di modifica.

  3. Espandere Il selettore di espansione nella sezione Content e fare clic su Edit with Page Builder.

  4. Modifica la larghezza delle colonne:

    • Passa il cursore del mouse sul bordo tra le due colonne.

    • Tenere premuto il pulsante del mouse e trascinare il bordo di due divisioni verso sinistra.

      Divisioni griglia {width="600" modal="regular"}

      La prima colonna è ora quattro su 12 (4/12) divisioni di griglia, e la seconda colonna è otto su 12 (8/12) divisioni di larghezza.

      Due colonne non uguali {width="600" modal="regular"}

  5. Modificare il colore del testo:

    • Selezionare le prime due righe di testo.

    • Sulla barra degli strumenti dell'editor, scegliere Text Color e fare clic sul campione White.

    Colore testo {width="600" modal="regular"}

  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 il blocco dinamico con l'anteprima visualizzata.

  7. Nell'angolo superiore destro fare clic su Save.

Passaggio 2: visualizzare il blocco dinamico

Poiché questo blocco dinamico è visibile solo ai membri di uno specifico segmento di clienti, è necessario accedere come cliente membro del segmento di clienti per visualizzare la promozione. In questo esempio, il blocco viene visualizzato solo ai clienti di sesso femminile.

  1. Apri una finestra del browser nella vetrina.

  2. Per visualizzare la pagina di esempio, modifica l’URL nella barra degli indirizzi come segue:

    mystore.com/sample-page

    Se l’archivio è configurato per includere il suffisso html, includi il suffisso come segue:

    mystore.com/sample-page.html

  3. Accedi come cliente donna:

    • Nell'angolo superiore destro della home page, fare clic su Sign In.

    • Se i dati Luma di esempio sono installati nel sistema, usa le seguenti credenziali:

      Email - roni_cost@example.com

      Password - roni_cost3@example.com

    • Fare clic su Sign In.

    • Torna alla pagina di esempio per visualizzare il blocco dinamico creato con la promozione Tee Shirt.

    Blocco dinamico visualizzato per un segmento cliente {width="700" modal="regular"}

Hai completato l'esercizio Blocca. Assicurati di conservare il tuo lavoro come riferimento.

Quando sei pronto, procedi alla Parte 3: Contenuto catalogo

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