Page Builder Workspace

Quando Page Builder è abilitato, la sezione Content ​e il processo di creazione dei contenuti vengono modificati per sfruttare gli strumenti avanzati Page Builder per le pagine, prodotto e categoria pagine, blocchi e blocchi dinamici CMS. Questa sezione include un campo_ Intestazione contenuto _, un'anteprima del contenuto e un accesso semplificato all'area di lavoro Page Builder a schermo intero.

Sezione contenuto con Page Builder anteprima

Intestazione contenuto

Poiché i motori di ricerca cercano le intestazioni di livello 1 (H1), l’aggiunta di un’intestazione di livello 1 rappresenta un modo semplice per garantire che la pagina venga indicizzata correttamente.

NOTE
Il campo Content Heading ​visualizzato nella parte superiore della pagina è un campo legacy che supporta il contenuto creato con le versioni precedenti di Commerce. Non fa tuttavia parte di Page Builder. Content Heading è formattato come intestazione H1 in base al foglio di stile associato al tema corrente. È posizionato appena sopra l'area del contenuto attivo definita dalla fase Page Builder.

Per un controllo ottimale del posizionamento e del formato delle intestazioni di tutti i livelli, è consigliabile lasciare vuoto il campo Content Heading ​e utilizzare il tipo di contenuto Page Builder Intestazione.

Intestazione contenuto e altri titoli

Anteprima

Quando si espande la sezione Content ​ed è presente contenuto creato con Page Builder, viene visualizzata un'anteprima del contenuto come apparirebbe in una pagina. Fare clic su Edit with Page Builder ​o all'interno dell'area di anteprima del contenuto per aprire l'area di lavoro Page Builder, in cui è possibile apportare gli aggiornamenti necessari.

Anteprima descrizione prodotto

NOTE
Per i moduli prodotto e categoria, questa anteprima del contenuto è abilitata per impostazione predefinita, ma può essere disabilitata. Se le prestazioni risultano ridotte a causa del caricamento dell'anteprima, è possibile disabilitare l'anteprima nelle impostazioni della configurazione di gestione dei contenuti.

Fase

Quando si apre l'area di lavoro Page Builder dall'anteprima, la fase è l'area di lavoro principale in cui è possibile creare e formattare il contenuto e anche apportare modifiche rapide al contenuto live. L'area di visualizzazione è inizialmente vuota e consente di trascinare righe, colonne e schede dal pannello di sinistra.

NOTE
A partire dalla versione 2.4.1, la modifica del contenuto ora avviene a schermo intero solo per tutte le aree controllate da Page Builder: pagine CMS, pagine di prodotti e categorie, blocchi e blocchi dinamici. La modifica a schermo intero consente di mettere a fuoco i contenuti e offre una visualizzazione che corrisponde meglio all'esperienza utente nella vetrina.

Fase con contenuto pagina

NOTE
Se si apportano modifiche significative al contenuto di Page Builder, è consigliabile aumentare la durata della sessione di amministrazione per evitare il timeout della sessione mentre si lavora.

Riquadri di visualizzazione

Un riquadro di visualizzazione è l'area visibile di una pagina Web visualizzata dall'utente. In modalità progettazione a schermo intero, i pulsanti del riquadro di visualizzazione vengono visualizzati sopra la fase Page Builder per mostrare il contenuto così come viene visualizzato dall'utente del sito nella vetrina.

Pulsanti del riquadro di visualizzazione

Page Builder definisce anche i punti di interruzione per i riquadri di visualizzazione. I punti di interruzione definiscono le larghezze minima e massima entro le quali vengono applicati determinati stili. I riquadri di visualizzazione Page Builder forniscono i seguenti punti di interruzione di contenuto:

  • Punto di interruzione desktopmin-width: 1024px. Questo punto di interruzione applica gli stili definiti per le larghezze dei riquadri di visualizzazione che misurano 1024 pixel e più.
  • Punti di interruzione mobilemax-width: 768px, min-width: 640px. Questi punti di interruzione applicano gli stili definiti per larghezze del riquadro di visualizzazione comprese tra 768 e 640 pixel.

I riquadri di visualizzazione Page Builder offrono due funzionalità: anteprime contenuto e impostazioni punto di interruzione.

Anteprime contenuto

Per impostazione predefinita, Page Builder fornisce due anteprime dei riquadri di visualizzazione:

  • Desktop - Visualizza l'anteprima del contenuto senza una larghezza predefinita. Gli stili definiti dal desktop (che utilizzano una larghezza minima del punto di interruzione di 1024 pixel) vengono ancora applicati alla pagina. Tuttavia, la larghezza del riquadro di visualizzazione Desktop è definita dalle impostazioni per i tipi di contenuto del contenitore, come Righe. Selezionando il riquadro di visualizzazione Desktop viene visualizzato lo stile del contenuto nella vetrina quando la larghezza della pagina del browser è pari o superiore a 1024 pixel.

    Anteprima riquadro di visualizzazione desktop con larghezza minima di 1024 pixel {width="500" modal="regular"}

  • Dispositivo mobile: visualizza l'anteprima del contenuto con una larghezza predefinita di 768 pixel. A differenza del riquadro di visualizzazione Desktop, il riquadro di visualizzazione Mobile mostra il contenuto della pagina con una larghezza di 768 pixel, insieme agli stili definiti per le larghezze dei punti di interruzione di 768 pixel (massimo) e 640 pixel (minimo).

    Anteprima riquadro di visualizzazione mobile con larghezza minima di 768 pixel {width="500" modal="regular"}

Impostazioni punto di interruzione

I pulsanti del riquadro di visualizzazione consentono inoltre di applicare stili di punto di interruzione diversi ai tipi di contenuto in base al riquadro di visualizzazione selezionato. Per impostazione predefinita, Page Builder fornisce le impostazioni dei punti di interruzione per i campi Minimum Height ​di Rows, Columns, Tabs, Tab Items, Banners, Sliders e Slides. Quando selezioni il riquadro di visualizzazione mobile e apri l’editor per uno di questi tipi di contenuto, puoi immettere valori di campo specifici per i punti di interruzione del riquadro di visualizzazione mobile. I campi del tipo di contenuto che consentono impostazioni specifiche dei punti di interruzione visualizzano un'icona a destra del campo, simile all'esempio seguente per una riga:

Indicatore icona per impostazione punto di interruzione

Pannello

Il pannello Page Builder si trova a sinistra dell'area di visualizzazione e contiene tipi di contenuto che è possibile trascinare nell'area di visualizzazione. Viene quindi visualizzato un contenitore specifico per il tipo di contenuto con una casella strumenti di opzioni. I tipi di contenuto sono organizzati nel pannello come segue:

Layout

La sezione Layout ​del pannello Page Builder viene utilizzata per aggiungere righe, colonne o schede all'area di visualizzazione. Quando trascini un tipo di contenuto dal pannello all’area di visualizzazione, viene visualizzato un contenitore con una casella degli strumenti contenente le opzioni specifiche per il tipo di contenuto.

Per impostazione predefinita, la fase Page Builder è vuota. Mentre trascini i tipi di contenuto layout dal pannello all’area di visualizzazione, puoi posizionarli sopra, sotto o all’interno di altri contenitori layout sulla pagina. Le righe possono essere aggiunte solo direttamente all'area di visualizzazione.

Pannello Page Builder con tipi di contenuto layout e fase {width="600" modal="regular"}

Tipo di contenuto layout
Descrizione
Riga
Una nuova riga può essere trascinata solo dal pannello all’area di visualizzazione e posizionata sopra o sotto un’altra riga, scheda o gruppo di colonne. È inoltre possibile utilizzare l'opzione Duplica per creare una copia di una riga esistente.
Colonna
Una colonna può essere trascinata dal pannello all’area di visualizzazione, oppure a righe e schede. Il numero massimo di colonne che è possibile aggiungere è determinato dal numero di divisioni della griglia specificato nella configurazione.
Schede
Una singola scheda può essere trascinata dal pannello allo stage o a righe e colonne. È possibile aggiungere altre schede dalla casella degli strumenti.

Elementi

Utilizzare la sezione Elements ​del pannello Page Builder per aggiungere testo, intestazioni, pulsanti, divisori e codice HTML a qualsiasi contenitore di layout nella Page Builder fase. Quando trascini un tipo di contenuto dal pannello a una riga o colonna o a un set di schede sullo stage, viene visualizzato un contenitore. Utilizzare la casella degli strumenti tipo di contenuto per accedere alle impostazioni specifiche del tipo.

Pannello Page Builder con tipi di contenuto elemento {width="600" modal="regular"}

Tipo di contenuto elemento
Descrizione
Testo
Aggiunge un contenitore di testo e un editor all'area di visualizzazione.
Intestazione
Aggiunge un contenitore di intestazione all'area di visualizzazione.
Pulsanti
Aggiunge all'area di visualizzazione un contenitore per un singolo pulsante o un insieme di pulsanti.
Divisore
Aggiunge all'area di visualizzazione un contenitore per un divisore.
Codice HTML
Aggiunge all'area di visualizzazione un contenitore per il codice HTML.

Media

Utilizzare la sezione Media ​del pannello Page Builder per aggiungere immagini, video, banner, cursori e Google Maps a qualsiasi contenitore di layout sulla Page Builder fase. Quando un tipo di contenuto multimediale viene trascinato dal pannello all’area di visualizzazione, viene visualizzato un contenitore con una casella degli strumenti contenente le opzioni specifiche per il tipo di contenuto.

Pannello Page Builder con tipi di contenuto multimediale {width="600" modal="regular"}

Tipo di contenuto multimediale
Descrizione
Immagine
Aggiunge un contenitore di immagini all'area di visualizzazione.
Video
Aggiunge un contenitore video all'area di visualizzazione.
Banner
Aggiunge un contenitore di banner all'area di visualizzazione.
Cursore
Aggiunge un contenitore cursore allo stage.
Mappa
Aggiunge un contenitore Google Maps alla fase.

Aggiungi contenuto

Utilizzare la sezione Add Content ​del pannello Page Builder per aggiungere contenuto esistente alla Page Builder fase. Quando trascini un tipo di contenuto multimediale dal pannello all’area di visualizzazione, viene visualizzato un contenitore. Utilizza la casella degli strumenti del tipo di contenuto per accedere alle_ Impostazioni _specifiche per il tipo.

Pannello Page Builder con Aggiungi tipi di contenuto {width="600" modal="regular"}

Tipo di contenuto
Descrizione
Blocca
Aggiunge un blocco esistente alla fase.
Blocco dinamico
Aggiunge un blocco dinamico esistente allo stage.
Prodotti
Aggiunge un elenco di prodotti alla fase.
Solo Adobe Commerce Recommendations di prodotto
Aggiunge un'unità di consigli alla fase.

Casella strumenti

Ogni contenitore di contenuto sullo stage dispone di una casella strumenti di opzioni. Le opzioni variano in base al tipo di contenuto, ma in genere includono Sposta, Impostazioni, Nascondi/Mostra, Duplica e Rimuovi.

Mostra casella strumenti

Passa il cursore del mouse sul contenitore per visualizzare la casella degli strumenti e scegli un’opzione.

Opzioni casella strumenti riga

Opzioni della Casella degli strumenti

Opzione
Icona
Descrizione
Sposta
Icona Sposta {width="25"}
Sposta il contenitore di contenuto corrente in un'altra posizione sullo stage.
Aggiungi
Icona Aggiungi {width="25"}
Aggiunge elementi figlio come pulsanti, diapositive o tabulazioni.
(etichetta)
Identifica il tipo di contenuto del contenitore.
Impostazioni
Icona Impostazioni {width="25"}
Apre le proprietà del contenitore di contenuto in modalità di modifica.
Nascondi
Icona Nascondi {width="25"}
Nasconde il contenitore di contenuto corrente.
Spettacolo
Mostra icona {width="25"}
Mostra il contenitore di contenuto corrente.
Duplica
Icona duplicata {width="25"}
Crea una copia del contenitore di contenuto corrente.
Rimuovi
Rimuovi {width="25"}
Elimina il contenitore di contenuto corrente dall'area di visualizzazione.
NOTE
Gli elementi nascosti vengono memorizzati nel database e invisibili ai clienti. Tuttavia, questi elementi sono visibili ai motori di ricerca e ad altri bot che eseguono la ricerca per indicizzazione del sito. Vengono inoltre restituiti come parte del contenuto se richiesto tramite una chiamata API con un attributo di invisibilità, a meno che non vengano rimossi dall’area di visualizzazione.
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d