Crea una pagina prodotto.

Impara DXPR BuilderCrea le pagineSegui un tutorial

Qui crei una pagina per un prodotto. Una foto sta accanto a nome, prezzo e pulsante Buy now, seguiti da tre funzionalità, un elenco di specifiche e un invito all’azione commerciale. Usala per qualsiasi cosa vendi. Per confrontare più piani, aggiungivi una tabella prezzi.

Il video crea la pagina di un prodotto hardware chiamato Insight Hub.

Prima di iniziare

  • Il tuo ruolo ha il permesso Edit with DXPR Builder.
  • La libreria multimediale contiene una foto del prodotto.
  • La pagina è aperta nel builder. Per una nuova, vai in Content > Add content > Landing Page (/node/add/landing_page) e fai clic su Save.
  • I nuovi elementi arrivano in cima alla loro colonna. Ecco perché la colonna di destra si costruisce dal pulsante in su.

Passaggio 1: aggiungi il prodotto

  1. Fai clic su Add Elements sulla pagina vuota e scegli Section dalla scheda Layout.
  2. Fai clic su + sulla sezione e scegli Row; arriva con due colonne uguali.
  3. Fai clic su + nella colonna di sinistra e scegli Image. Fai clic su Select Image, seleziona la foto del prodotto e fai clic su Insert selected. Digita l’Alt attribute nel pannello SEO e fai clic su Save.
  4. Fai clic su + nella colonna di destra e scegli Button. Imposta Title su "Buy now", Link sul tuo negozio, Type su Primary e Size su Large, poi fai clic su Save.
  5. Fai di nuovo clic su + nella colonna di destra e scegli Text; arriva sopra il pulsante. Digita il prezzo come Heading 2 e fai clic su Save.
  6. Fai ancora clic su + e scegli Text; arriva in cima. Digita il nome del prodotto come Heading 2, aggiungi una riga di descrizione e fai clic su Save. Il tema stampa il titolo della pagina come Heading 1 della pagina. Per rendere invece questa intestazione l’Heading 1, vedi Crea pagine SEO-friendly.

Passaggio 2: aggiungi le funzionalità

  1. Passa sopra alla sezione e fai clic su Add Section Below. Dai alla nuova sezione la classe Align text center.
  2. Fai clic su + sulla sezione e scegli Row. Fai clic sulla sua icona griglia (Column layout), scegli il preset 1/3 + 1/3 + 1/3 e fai clic su Save.
  3. Fai clic su + nella prima colonna e scegli Text. Digita il nome della funzionalità come Heading 3, aggiungi una riga e fai clic su Save.
  4. Fai clic su + nella stessa colonna e scegli Icon; arriva sopra il testo. Scegli il set Font Awesome Free Solid, cerca plug e fai clic sull’icona. Imposta Size su Very Large (3x), apri Icon utilities, imposta Style su Circle e fai clic su Save.
  5. Ripeti per la seconda colonna con cloud e la terza con battery-full.

Passaggio 3: aggiungi le specifiche

  1. Aggiungi una terza sezione con Add Section Below. Apri il suo More > Settings, scegli un Background grigio chiaro nel pannello Style e fai clic su Save.
  2. Fai clic su + sulla sezione e scegli Text. Digita "Specifications" come Heading 2, poi una specifica per riga, e fai clic su Save.

Passaggio 4: aggiungi l’invito all’azione

  1. Aggiungi una quarta sezione e apri il suo More > Settings. Scegli Align text center in HTML classes, poi il Background viola e il Font color bianco nel pannello Style. Fai clic su Save.
  2. Fai clic su + sulla sezione e scegli Button. Imposta Title su "Talk to sales", Link su /contact, Type su Light e Size su Large, poi fai clic su Save.
  3. Fai di nuovo clic su + e scegli Text; arriva sopra il pulsante. Digita "Insight Hub from 249 euro" come Heading 2 e aggiungi una riga. Imposta Font color su bianco e fai clic su Save.

Passaggio 5: salva e vedi l’anteprima

  1. Fai clic su Save nella barra degli strumenti del builder.
  2. Apri il menu vista (l’icona occhio) e scegli Preview.

Per approfondire

Non mostrato nel video:

  • Tabella specifiche: inserisci una tabella con il pulsante Table nella barra degli strumenti del testo invece di una riga per specifica.
  • Galleria: sostituisci la singola foto con un Image carousel di scatti del prodotto.
  • Piani: collega il prezzo a una tabella prezzi.

Cosa vedi

La foto del prodotto riempie la metà sinistra, con nome, prezzo e pulsante Buy now a destra. Seguono tre funzionalità centrate, ciascuna un’icona cerchiata sopra nome e riga. Le specifiche stanno su una banda grigia, e una banda viola chiude la pagina con Talk to sales.

Se non vedi la pagina come mostrata

  • Nome, prezzo e pulsante sono nell’ordine sbagliato. Sono entrati dall’alto in basso e i nuovi elementi arrivano in cima alla loro colonna. Trascinali al loro posto dalla maniglia di trascinamento sulla loro barra dei controlli.
  • Le icone non hanno il cerchio. Style sta nel pannello Icon utilities, non in General. Apri le impostazioni dell’icona, apri Icon utilities e imposta Style su Circle.
  • L’intestazione resta scura sul viola. L’elemento Text non ha un Font color proprio. Apri il suo pannello Style e imposta Font color su bianco.
  • Le tue modifiche non ci sono più dopo un ricaricamento. Hai lasciato la pagina prima di fare clic su Save nella barra degli strumenti del builder. Se Save mostra un errore, vedi Le modifiche non si salvano.

E adesso?