Riutilizzare contenuti con il widget Hero

L'elemento Hero è spesso la prima cosa che i visitatori vedono sul tuo sito web, quindi è un ottimo spazio per presentare i contenuti che desideri mettere in evidenza. 

Lo stile visivo e il messaggio conciso definiscono il tono dell'esperienza del visitatore e lo invitano a esplorare ulteriormente il sito. Hero è un elemento prominente, e gli editor devono avere la possibilità di personalizzarne il contenuto per adattarlo ai diversi pubblici del sito web. In questa guida, vedrai come un widget Hero banner personalizzato aiuta gli editor a mantenere l'area Hero sempre aggiornata e coinvolgente.

Mostrare contenuti riutilizzabili nei widget

Puoi usare i widget per mostrare contenuti esistenti durante la creazione di una pagina. Non è necessario creare o copiare i contenuti quando stai popolando diversi widget con content item riutilizzabili. Basta indicare al widget di visualizzare, ad esempio, un articolo, un'immagine o un elenco di vantaggi, e il widget salverà il riferimento al content item archiviato nel Content hub. A seconda delle opzioni di configurazione del widget, puoi anche definire l'aspetto dei contenuti visualizzati e creare un messaggio visivo che soddisfi le tue esigenze.

Vediamo un esempio da Kbank: il widget Hero banner.

Xperience ti consente di riutilizzare qualsiasi contenuto archiviato in un content item all'interno di diversi widget. Ad esempio, la pagina del Prestito personale (Personal loan page) utilizza il content item Personal loan in vari widget. 

Il Product content type, utilizzato per memorizzare i dati del Personal loan, include il nome del prodotto, l'immagine, la descrizione, i benefici e altre informazioni. A seconda del widget, puoi mostrare diverse informazioni sul prodotto nel tuo sito web. Ad esempio:

• L'Hero banner mostra le informazioni di base sul prodotto: nome, descrizione o immagine
• Il Benefits widget mostra i benefici del prodotto
• Il Product comparator widget mostra le caratteristiche del prodotto, e così via
  
  

L'Hero banner può riutilizzare le informazioni dal Product content type. Vediamo come è possibile visualizzare i dati attraverso l'Hero banner widget sul sito Kbank.

Utilizzare l'Hero banner widget per visualizzare i dati della pagina prodotto

L'obiettivo di ogni pagina prodotto è vendere prodotti o servizi online. 

Oltre alle informazioni di base come il nome, l'immagine del prodotto e una breve descrizione, la pagina deve evidenziare i vantaggi per i clienti e le caratteristiche distintive che rendono il prodotto unico rispetto alla concorrenza.

Seleziona il content type da aggiungere al canale del sito web

Quando crei una Product page, seleziona un content type che definisce i dati che la pagina conterrà.

Scegli il template per visualizzare i dati del prodotto

Il template di pagina aiuta a mantenere un aspetto coerente tra le pagine create dagli editor grazie a un layout predefinito. Puoi creare il template da zero o salvare una pagina esistente come template.

Aggiungere un prodotto dal Content hub alla nuova pagina

Nel passaggio successivo, scegli il prodotto che desideri visualizzare. Xperience crea un riferimento a questo elemento riutilizzabile nel Content hub e i developer si assicurano che la pagina recuperi correttamente i dati dal content item selezionato.

Verifica che l'Hero banner widget mostri i dati della pagina corrente

Apri l'Hero banner sulla tua pagina, e in Selected hero widget mode, assicurati che la configurazione del widget mostri i dati della pagina prodotto corrente.

Il sito di Kbank fornisce istruzioni per la configurazione dell'Hero banner, permettendoti di risparmiare tempo nella ricerca e nel copia-incolla delle informazioni. Inoltre, puoi essere certo che il contenuto visualizzato sulla pagina seguirà le linee guida del design.

Utilizzare l'Hero banner per mostrare dati da qualsiasi pagina prodotto

Potresti voler promuovere un prodotto nell'Hero banner su una pagina che non utilizza il content type Product page. Un esempio tipico potrebbe essere la Home page o una landing page di una campagna. 

• L'Hero banner è un widget, ovvero un componente del Page Builder, e può essere utilizzato su qualsiasi tipologia di pagina,
• Non è limitato esclusivamente alle pagine di informazioni o promozione dei prodotti,
• Può essere inserito nella home page o nelle landing page delle campagne per evidenziare un prodotto,
• Non è necessario ricreare le informazioni del prodotto nel Content hub. I developer hanno configurato l'Hero banner widget per recuperare i dati da qualsiasi pagina prodotto

Aggiungere una nuova pagina per la promozione del prodotto

Per creare una landing page per una campagna, scegli il content type Content page. Content page è una pagina libera.

Cosa significa questo? Non fa riferimento direttamente a un prodotto specifico dal Content hub. Tuttavia, puoi utilizzare i suoi widget per visualizzare elementi dal Content hub o altri contenuti provenienti da pagine del sito web.

Configura l'Hero banner per visualizzare i dati da una pagina prodotto specifica 

Apri la configurazione dell'Hero banner e seleziona la modalità Select product page per l'hero widget mode. Successivamente, scegli la pagina prodotto che desideri visualizzare tramite l'Hero banner. I developer hanno garantito che Xperience recuperi i dati dalla pagina prodotto collegata e li inserisca nell'Hero banner widget della tua campagna.

Personalizza l'Hero banner con un Hero content type dedicato

Questa opzione ti consente di aggiungere contenuti creati su misura. Se non vuoi aggiungere un Hero banner che esiste già su una pagina, puoi selezionare un hero content item. Questo mostrerà i contenuti provenienti da un Hero content item indipendente che non fa parte di un prodotto.

Regola lo stile dell'Hero banner

L'Hero banner ha una configurazione predefinita. Tuttavia, in base all'implementazione dei tuoi sviluppatori, puoi regolare il suo design per farlo risaltare rispetto ad altre pagine. Gli esempi di Hero banner seguenti provengono dal sito demo Kbank e mostrano cosa puoi ottenere configurando lo stesso Hero banner in modo diverso.

• Questa è la configurazione predefinita per l'Hero banner - colore del testo scuro e immagine in un cerchio
  
  
  
  
• Puoi passare a un colore del testo chiaro e a un'immagine sullo sfondo del banner
  
  
  
  
• Puoi anche rimuovere l'immagine e mostrare invece i benefici del prodotto
  
  
  
  

Sfrutta al massimo i widget di Xperience

I widget in Xperience by Kentico, come l'Hero banner widget, sono pensati per aiutarti a lavorare con contenuti riutilizzabili. 

Una volta che i tuoi sviluppatori preparano i widget in base ai requisiti del progetto, puoi collegare i contenuti già preparati senza preoccuparti dello styling. E potrai goderti una tazza di caffè invece di controllare se ogni singolo dato è corretto.