Come utilizzare il rich text editor per i contenuti

Questa pagina è stata stampata il Apr 19, 2024. Per la versione aggiornata, visita https://help.shopify.com/it/manual/shopify-admin/productivity-tools/rich-text-editor?utm_source=gurucopy&utm_medium=link&utm_campaign=Gurus.

Il rich text editor di Shopify consente di formattare e modificare il contenuto visualizzato nel tuo negozio online.

Su questa pagina

Per cosa si utilizza il rich text editor

Puoi utilizzare il rich text editor per aggiungere o modificare il testo in più punti del tuo negozio:

Se utilizzi un tema Online Store 2.0, puoi aggiungere sezioni di rich text alle pagine o ai modelli con l'editor del tema.

Aggiungi contenuto HTML con il rich text editor

Il rich text editor consente di inserire contenuto HTML per gli articoli del blog, le pagine, le descrizioni dei prodotti e le descrizioni delle collezioni.

Clicca sul pulsante </> Mostra HTML per visualizzare il codice HTML del contenuto all'interno del rich text editor.

Nella vista HTML, puoi apportare numerose modifiche al contenuto nel rich text editor. Puoi aggiungere immagini, video o tabelle utilizzando l'HTML, eseguire il debug o perfezionare il layout e lo stile del contenuto.

Incorpora un widget multimediale

Per incorporare un widget video o musicale, è prima necessario effettuarne l'hosting su un servizio come Youtube, Vimeo o SoundCloud. Questi servizi generano un codice di incorporamento che puoi copiare e incollare nel rich text editor del pannello di controllo Shopify.

Procedura:

  1. Cerca il codice di incorporamento dei contenuti multimediali che desideri incorporare.

  2. Seleziona tutto il codice di incorporamento cliccando su di esso e premendo ctrl + A su un PC o command + A su un Mac.

  3. Copia il codice di incorporamento premendo ctrl + C su un PC o command + C su un Mac.

  4. Nel pannello di controllo Shopify, clicca sul pulsante Mostra HTML nel rich text editor relativo al contenuto che stai modificando.

  5. Incolla il codice di incorporamento premendo ctrl + V su un PC o command + V su un Mac.

  6. Clicca su Salva.

Formatta testo con il rich text editor

Con il pulsante Formattazione puoi creare rapidamente paragrafi, titoli o citazioni. L'utilizzo dei giusti livelli di formattazione e titolazione rende più semplice per le persone e i motori di ricerca leggere il contenuto del tuo sito web.

Per scegliere un formato per il testo, evidenzia il testo e clicca sul pulsante Formattazione.

Opzioni di formattazione

  • Paragrafo

  • Titolo (1-6)

  • Citazione

Testo in grassetto

Per formattare il testo in grassetto, evidenzialo e clicca sul pulsante Grassetto.

Testo in corsivo

Per formattare il testo in corsivo, evidenzialo e clicca sul pulsante Corsivo.

Testo sottolineato

Per sottolineare il testo, evidenzialo e clicca sul pulsante Sottolineato.

Elenco puntato

Per creare un elenco puntato, clicca sul pulsante Elenco puntato.

Puoi digitare la prima voce dell'elenco puntato. Per creare nuove voci dell'elenco, premi il tasto enter o return. Per completare l'elenco, premi il tasto enter o return due volte.

Creazione di un elenco numerato

Per creare un elenco numerato, clicca sul pulsante Elenco numerato.

Puoi digitare la prima voce dell'elenco numerato. Per creare nuove voci dell'elenco, premi il tasto enter o return. Per completare l'elenco, premi il tasto enter o return due volte.

Creare un rientro per il testo

Il rientro di un paragrafo crea un margine sul lato sinistro. Per far rientrare un paragrafo, clicca sul pulsante Rientro.

Eliminare il rientro di un testo

La riduzione del rientro di un paragrafo rimuove ogni eventuale margine presente. Per ridurre o annullare il rientro di un paragrafo, clicca sul pulsante Riduci rientro.

Allineare il testo

Per allineare il testo, selezionalo, clicca sul pulsante Allineamento e scegli Allinea a sinistra, Allinea al centro o Allinea a destra.

Cambia i colori del testo con il rich text editor

Procedura:

  1. Evidenzia il testo e clicca sul pulsante Colore.

  2. Clicca su un colore o inserisci un codice esadecimale per assegnare il colore scelto al testo evidenziato.

Cambia i colori dello sfondo del testo

Procedura:

  1. Evidenzia il testo e clicca sul pulsante Colore.

  2. Clicca sulla scheda Sfondo.

  3. Clicca su un colore o inserisci un codice esadecimale per assegnare il colore scelto allo sfondo del testo evidenziato.

Cancella la formattazione nel rich text editor

Per rimuovere la formattazione da testo o immagini, evidenzia il contenuto e clicca sul pulsante Cancella formattazione.

Inserisci tabelle con il rich text editor

Il rich text editor consente di inserire tabelle negli articoli del blog, nelle pagine, nelle descrizioni dei prodotti e delle collezioni. Dopo aver creato una tabella, è possibile inserirvi testo, immagini o persino video.

Procedura:

  1. Nel rich text editor clicca sul pulsante Inserisci tabella.

  2. Per inserire una tabella, clicca su Inserisci tabella. Viene creata una tabella con una riga e una colonna.

Dopo aver creato la tabella, clicca ancora sul pulsante Inserisci tabella per modificarne le righe e le colonne:

  • Inserisci riga sopra: posiziona il cursore su una riga e clicca su questo pulsante per inserire una nuova riga sopra.
  • Inserisci riga sotto: posiziona il cursore su una riga e clicca su questo pulsante per inserire una nuova riga sotto.
  • Inserisci colonna prima: posiziona il cursore in una colonna e clicca su questo pulsante per inserire una nuova colonna prima di quella selezionata.
  • Inserisci colonna dopo: posiziona il cursore in una colonna e clicca su questo pulsante per inserire una nuova colonna dopo quella selezionata.
  • Elimina riga: posiziona il cursore su una riga da eliminare e clicca su questo pulsante.
  • Elimina colonna: posiziona il cursore su una colonna da eliminare e clicca su questo pulsante.
  • Elimina tabella: posiziona il cursore in un qualsiasi punto della tabella e clicca su questo pulsante per eliminare l'intera tabella.

Inserisci link con il rich text editor

Il rich text editor consente di inserire link (collegamenti ipertestuali) negli articoli del blog, nelle pagine, nelle descrizioni dei prodotti e delle collezioni. Puoi aggiungere link che indirizzano i clienti alle pagine del tuo negozio online Shopify e ad altri siti web. È anche possibile aggiungere link che aprono messaggi email o effettuano telefonate, per aiutare i clienti a contattarti.

Procedura:

  1. Evidenzia il testo o l'immagine che vuoi trasformare in un link.
  2. Clicca su Inserisci link.

  3. Inserisci l'URL di destinazione del link nel campo Link a:

    • Per collegarti a un sito web esterno al tuo negozio Shopify, inserisci https:// seguito dall'indirizzo web, ad esempio https://www.example.com.
    • Per collegarti a una pagina all'interno del tuo negozio online Shopify, inserisci l'URL breve, ad esempio /collections/summer-collection.
    • Per creare un link che apre un messaggio email, inserisci mailto: seguito dall'indirizzo email, ad esempio mailto:example@example.com.
    • Per creare un link che effettua una chiamata, inserisci tel:, seguito dal numero di telefono, ad esempio tel:+0-123-456-7890.

  4. Inserisci una breve descrizione del link nella casella Titolo del link.

  5. Nel menu Apri questo link, scegli il tipo di apertura del link:

    • nella stessa finestra: il link si aprirà in una finestra o in una scheda del browser già aperta.
    • in una nuova finestra: il link si aprirà in una nuova finestra o scheda del browser.

  6. Clicca su Inserisci link per convertire il testo evidenziato in un link.

Aggiungi link interni ed esterni con il rich text editor

I link alle pagine che fanno parte del tuo negozio Shopify sono chiamati link interni. Per creare link interni puoi utilizzare URL brevi. Ad esempio, l'URL /collections indicherà la pagina di collezione del tuo negozio.

Per collegarti a una pagina specifica del tuo negozio online, come la pagina di un prodotto o di una collezione, utilizza il formato di URL /page-type/page-handle. Per collegarti, ad esempio, a una collezione da te creata che si chiama Summer Collection, utilizza l'URL /collections/summer-collection.

I link ai siti web esterni al tuo negozio Shopify sono chiamati link esterni. I link esterni devono essere inseriti per intero e iniziare con http://.

Dopo aver caricato un file, puoi collegarlo al contenuto nel rich text editor per renderlo disponibile per il download dalla descrizione di un prodotto o di una collezione, da una pagina web o da un articolo del blog.

Procedura:

  1. Dal pannello di controllo Shopify vai su Contenuti > File.
  2. Copia l'URL del file da collegare.
  3. Nel pannello di controllo Shopify, clicca sul prodotto, la collezione, la pagina web o l'articolo del blog in cui vuoi aggiungere il file.
  4. Nel rich text editor, inserisci o scegli il testo del link.
  5. Seleziona il testo del link.
  6. Clicca su Inserisci link.
  7. Nel campo Link a, incolla l'URL del file che vuoi collegare.
  8. Clicca su Inserisci link. Nel rich text editor, il testo collegato viene visualizzato in blu ed è sottolineato.
  1. Nell'app di Shopify tocca il pulsante …, quindi tocca Impostazioni.
  2. Nella sezione Impostazioni negozio tocca File.
  3. Copia l'URL del file da collegare.
  4. Nel pannello di controllo Shopify, clicca sul prodotto, la collezione, la pagina web o l'articolo del blog in cui vuoi aggiungere il file.
  5. Nel rich text editor, inserisci o scegli il testo del link.
  6. Seleziona il testo del link.
  7. Clicca su Inserisci link.
  8. Nel campo Link a, incolla l'URL del file che vuoi collegare.
  9. Clicca su Inserisci link. Nel rich text editor, il testo collegato viene visualizzato in blu ed è sottolineato.
  1. Nell'app di Shopify tocca il pulsante …, quindi tocca Impostazioni.
  2. Nella sezione Impostazioni negozio tocca File.
  3. Copia l'URL del file da collegare.
  4. Nel pannello di controllo Shopify, clicca sul prodotto, la collezione, la pagina web o l'articolo del blog in cui vuoi aggiungere il file.
  5. Nel rich text editor, inserisci o scegli il testo del link.
  6. Seleziona il testo del link.
  7. Clicca su Inserisci link.
  8. Nel campo Link a, incolla l'URL del file che vuoi collegare.
  9. Clicca su Inserisci link. Nel rich text editor, il testo collegato viene visualizzato in blu ed è sottolineato.

Inserisci immagini con il rich text editor

Esistono tre modi per inserire un'immagine utilizzando il rich text editor, ovvero:

Carica delle immagini

Procedura:

  1. Nel rich text editor clicca sul pulsante Inserisci immagine.

  2. Nella finestra di dialogo Inserisci immagine, clicca sulla scheda Immagini caricate.

  3. Fai clic su Carica file.

  4. Scegli dal tuo computer un file immagine WebP, HEIC, SVG, GIF, JPEG o PNG.

  5. Clicca sull'immagine caricata per selezionarla.

  6. Dal menu Dimensione, seleziona le dimensioni di visualizzazione dell'immagine. Per inserire l'immagine senza alterarne le dimensioni di visualizzazione, seleziona Originale.

  7. Clicca su Inserisci immagine per posizionare l'immagine nel rich text editor.

Scegli tra le immagini del prodotto

Procedura:

  1. Nel rich text editor clicca sul pulsante Inserisci immagine.

  2. Nella finestra di dialogo Inserisci immagine, clicca sulla scheda Immagini del prodotto.

  3. Clicca sull'immagine che desideri inserire.

  4. Dal menu Dimensione, seleziona le dimensioni di visualizzazione dell'immagine. Per inserire l'immagine senza alterarne le dimensioni di visualizzazione, seleziona Originale.

  5. Clicca su Inserisci immagine per posizionare l'immagine del prodotto nel rich text editor.

Utilizzare l'URL di un'immagine

Per inserire un'immagine utilizzando un URL pubblico:

  1. Nel rich text editor clicca sul pulsante Inserisci immagine.

  2. Nella finestra di dialogo Inserisci immagine, clicca sulla scheda URL.

  3. Inserisci l'URL pubblico del tuo file immagine.

  4. Clicca su Inserisci immagine per inserire l'immagine nel rich text editor con le sue dimensioni originali.

Sposta e ridimensiona un'immagine nel rich text editor

Dopo aver aggiunto un'immagine alla descrizione di un prodotto o di una collezione, a una pagina web o a un blog, puoi spostarla in un'altra posizione all'interno del contenuto.

Procedura:

  1. Nel pannello di controllo Shopify, clicca sul prodotto, la collezione, la pagina web o l'articolo del blog in cui vuoi aggiungere l'immagine.
  2. Nel rich text editor, clicca sull'immagine:

  3. Effettua una delle operazioni seguenti:

    • Per spostare l'immagine, selezionala e trascinala in un'altra posizione nel campo Contenuti.
    • Per ridimensionare l'immagine, seleziona e trascina uno degli angoli.

  4. Clicca su Salva.

Modifica un'immagine nel rich text editor

All'interno del rich text editor, è possibile modificare le dimensioni, la disposizione del testo e l'allineamento di un'immagine. Puoi anche modificare l'URL dell'immagine oppure aggiungerne o modificarne il testo alternativo.

Procedura:

  1. Nel rich text editor, fai doppio clic sull'immagine per aprire la finestra di dialogo Modifica immagine.

  2. Utilizza le opzioni relative a dimensioni e allineamento per modificare l'immagine:

    • Per cambiare le dimensioni dell'immagine, seleziona un'opzione relativa alle dimensioni.
    • Per migliorare la SEO e l'accessibilità del tuo negozio online, aggiungi o modifica il testo alternativo dell'immagine.
    • Per aggiungere spaziatura, indica il numero di pixel di spazio da inserire su ciascun lato.
    • Per modificare l'allineamento dell'immagine, seleziona una delle icone che rappresentano l'allineamento a sinistra, al centro o a destra.
    • Per aggiungere la disposizione del testo, seleziona Disponi il testo intorno all'immagine.

  3. Clicca su Modifica immagine per salvare le modifiche.

Inserisci video con il rich text editor

Il rich text editor consente di inserire o incorporare video negli articoli del blog, nelle pagine, nelle descrizioni dei prodotti e delle collezioni.

Per incorporare un video che hai creato, occorre innanzitutto caricarlo su un sito di streaming video come YouTube o Vimeo.

YouTube non ti consente di disabilitare i video correlati, ma puoi specificare se questi debbano provenire dallo stesso canale del video appena riprodotto.

Procedura:

  1. Copia l'URL del video premendo ctrl + C su un PC o command + C su un Mac.
  1. Visita la pagina di Embed Responsively. Embed Responsively è uno strumento che fornisce un codice di incorporamento avanzato per i video.

  1. In Embed Responsively, clicca per selezionare il sito web in cui si trova il tuo video.

  2. Incolla l'URL del video che hai copiato nella casella dell'URL della pagina su Embed Responsively premendo ctrl + V su un PC o command + V su un Mac.

  3. Clicca su Embed. Embed Responsively creerà il tuo codice di incorporamento.

  4. Se si tratta di un video di YouTube e vuoi mostrare solo i video correlati provenienti dallo stesso canale YouTube, trova l'URL del video nel codice di incorporamento. Alla fine copia e incolla ?rel=0 tra virgolette.

  5. Copia tutto il codice nella casella Embed code.

  6. Nel pannello di controllo Shopify clicca sul pulsante Inserisci video nel rich text editor.

  7. Incolla il codice incorporato nella casella presente nella finestra di dialogo Inserisci video.

  8. Clicca su Inserisci video.

  9. Al termine, clicca su Salva per salvare le modifiche apportate.

Inserisci file audio con il rich text editor

Il rich text editor consente di inserire o incorporare file audio in articoli del blog, pagine, descrizioni dei prodotti e di collezioni.

Procedura:

  1. Nel pannello di controllo Shopify, clicca su Impostazioni e su File.
  2. Clicca su Carica file per caricare il file audio da inserire o incorporare nel negozio.
  3. Dalla sezione Negozio online, apri il rich text editor relativo alla pagina o all'articolo del blog in cui inserire il file audio.
  4. Copia <div id="player"><audio controls="controls"> e incolla il codice nel rich text editor per incorporare un lettore audio nella pagina.

  5. Copia il seguente codice:

    • <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>

  6. Incolla questo codice nel rich text editor dopo il codice per il lettore audio e sostituisci https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 con l'URL che hai creato per il tuo file audio quando lo hai caricato su Shopify. L'URL del file audio è sempre disponibile nella pagina File.

  7. Clicca su Salva.

  8. Clicca su Visualizza per verificare che il tuo file audio funzioni correttamente.

Aggiungi o rimuovi commenti interni con il rich text editor

Puoi usare tag di commento <!-- e --> per il testo interno che non desideri pubblicare nel tuo negozio.

Procedura:

  1. Nel rich text editor, clicca sul pulsante Mostra HTML.

  2. Per aggiungere un commento interno, racchiudi il testo che desideri mantenere nascosto tra <!-- e -->. Ad esempio: <!--yourtext-->.

  3. Clicca su Salva.

I tag HTML inclusi nei tag di commento vengono salvati come testo interno. Per far sì che tali tag HTML funzionino correttamente, devi rimuovere i tag di commento <!-- e --> intorno ad essi.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis