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, presentato nel primo esercizio di procedura dettagliata e non correlato alla funzionalità del banner precedente. Precedentemente l'opzione Banner in Menu Contenuto, è ora Blocco dinamico.

Blocco dinamico nella vetrina {width="700" modal="regular"}

Questo esercizio presuppone che tu abbia completato Parte 1: pagina semplice, compresi 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 al Page Builder nella versione 2.4.1. Se utilizzi una versione precedente di Adobe Commerce, utilizza Page Builder esercizi inclusi nel Commerce 2.3 Guida utente.

Parte 1: Creare un blocco semplice

In questo esercizio di procedura dettagliata, creerai un blocco semplice con il contenuto di Google Maps. I blocchi semplici vengono talvolta chiamati 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. Il giorno Amministratore barra laterale, vai a Content > Elements>Blocks.

  2. Nell’angolo superiore destro, fai clic su Add New Block.

  3. Per Block Title, immetti Google Map.

  4. Per Identifier, immetti google-map.

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

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

  6. Nell’angolo superiore destro, fai clic su Save.

Passaggio 2: aggiungere una Google Map

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

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

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

    Viene visualizzata una mappa con la posizione del negozio se Google Maps è configurato per il tuo archivio.

    Google Map configurato per lo store {width="600" modal="regular"}

    Viene visualizzata una mappa segnaposto se Google Maps non è ancora configurato per lo store.

    Google Maps segnaposto {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 ​sezione per il blocco con l’anteprima visualizzata.

  4. Nell’angolo in alto a destra, fai clic su Save freccia e scegli 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. Vai a 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 la sezione istruzioni nel Google Maps documentazione.

  4. Copia la chiave API negli Appunti.

  5. Torna a Commerce Amministra e vai a Stores > Settings>Configuration.

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

  7. Espandi Selettore di espansione Advanced Content Tools.

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

    Per ulteriori informazioni su Content Management Advanced Tools opzioni di configurazione, vedi Guida di riferimento alla configurazione.

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

  9. Clic Test Key.

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

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

Passaggio 4: aggiungere il blocco a una pagina

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

  2. Nella griglia, individua Simple Page ​creato nel primo tutorial e seleziona Edit ​nel​ Action colonna.

  3. Espandi Selettore di espansione il Content e fai clic su Edit with Page Builder o all'interno dell'area di anteprima dei contenuti.

  4. In Page Builder pannello in Layout, trascina un Row ​segnaposto all'inizio dello stage.

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

  5. In Page Builder pannello, espandere Add Content e trascina un Block segnaposto per la nuova riga.

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

    Casella degli strumenti Blocca {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/Ritorna per trovare il blocco creato.

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

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

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

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

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

Congratulazioni! La prima parte dell'esercizio Blocca è stata completata. 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 {width="600" modal="regular"}

Passaggio 1: creare un nuovo blocco dinamico

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

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

  2. Nell’angolo superiore destro, fai 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 a Yes.

    • Per Dynamic Block Name, immetti Tee Shirt Promo.

    • Imposta Dynamic Block Type a Content Area e fai clic su Done.

      Il tipo di blocco dinamico determina dove layout di pagina che il blocco sia posizionato. Quando imposti un blocco dinamico per il punto vendita, considera sia il layout di pagina che il tema, in modo da sfruttare al meglio 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 Dynamic Block Type {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 cliente 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 di clienti {width="600" modal="regular"}

Passaggio 2: completare le impostazioni

Scorri verso il basso fino a Content, che visualizza una sezione vuota Page Builder anteprima del contenuto 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 Impostazioni ( Icona Impostazioni {width="20"} ).

  2. Sotto Appearance, scegli Full Bleed.

  3. Per Minimum Height, immetti 400px.

  4. Scorri fino a Background ​e impostare Background Image ​facendo clic su Select from Gallery ​e la scelta della wide-banner-background.png immagine caricata nella prima esercitazione.

  5. Nell’angolo superiore destro, fai clic su Save per applicare le impostazioni e tornare al Page Builder Workspace.

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

Attività 2: Aggiungi colonne

In Page Builder pannello in Layout, trascina un Column ​segnaposto sulla riga.

Trascinamento del tipo di colonna nella riga {width="600" modal="regular"}

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

Attività 3: Aggiungi testo

  1. In Page Builder pannello, espandere Elements e trascina un Testo segnaposto per la 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 del testo per la colonna {width="600" modal="regular"}

  3. Seleziona tutte e tre le righe di testo e utilizza la barra degli strumenti per impostare Altezza riga a 40px.

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

  4. Imposta il Font Size per ciascuna 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 imparerete a utilizzare Pulsante tipo di contenuto 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 a Page Builder scheda workspace ed editor di testo, selezionare Shop Tees > testo nella terza riga e scegliere Bold ( Pulsante grassetto ) nella barra degli strumenti dell’editor.

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

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

  4. Per URL, immetti il collegamento relativo preparato.

  5. Imposta Target a None.

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

  6. Per Title, immetti Shop Tees.

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

  7. Per salvare il collegamento e tornare al Page Builder Workspace, fai clic su OK.

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

  8. 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 ​sezione per il blocco dinamico con l’anteprima visualizzata.

  9. Nell’angolo superiore destro, fai clic su Save.

Passaggio 3: aggiungere una regola di prezzo

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

  2. Espandi Selettore di espansione il Related Promotions e fai clic su Add Cart Price Rules.

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

  3. Il giorno Aggiungi regole prezzo carrello correlato , selezionare la casella di controllo per Acquista 3 magliette e ottenere il 4° gratis regola di prezzo e fai clic su Add Selected.

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

    La regola del prezzo viene visualizzata nel Promozioni correlate sezione, sotto 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, fai clic su Save.

Passaggio 4: aggiungere il blocco dinamico a una pagina

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

  2. Trova il Pagina semplice che hai creato in primo esercizio di procedura dettagliata e aprilo in modalità di modifica.

  3. Espandi Selettore di espansione il Content e fai 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 Rimuovi ( Icona Rimuovi {width="20"} ).

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

  5. In Page Builder pannello in Layout, trascina un nuovo Row ​segnaposto all'inizio dello stage.

  6. In Page Builder pannello, espandere Add Content e trascina un Dynamic Block segnaposto per la 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 Impostazioni ( Icona Impostazioni {width="20"} ).

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

  8. Il giorno Edit Dynamic Block ​pagina, fai clic su Select Dynamic Block.

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

  9. Trova il Tee Shirt Promo ​blocco dinamico creato e fai clic su Select.

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

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

  10. Accetta il valore predefinito Template, Dynamic Block Block Template.

  11. Al termine, fai clic su Save per salvare le impostazioni e tornare a Page Builder Workspace.

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

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

  13. Nell’angolo in alto a destra, fai clic su Save freccia e scegli 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.

Esempio di blocco dinamico nella vetrina {width="600" modal="regular"}

Passaggio 1: modificare il blocco dinamico

  1. In Amministratore barra laterale, vai a Content > Elements>Dynamic Blocks.

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

  3. Espandi Selettore di espansione il Content e fai 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, scegli Text Color e fai clic su White campione.

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

  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 ​sezione per il blocco dinamico con l’anteprima visualizzata.

  7. Nell’angolo superiore destro, fai 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

    • Clic Sign In.

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

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

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

Quando sei pronto, procedi a Parte 3: Contenuto del catalogo

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