Solo PaaS

Elementi - Codice HTML

Ultimo aggiornamento: 5 maggio 2025
  • Argomenti:

Creato per:

  • Principiante
  • Intermedio
  • Utente

Utilizza il tipo di contenuto Codice HTML per aggiungere snippet di codice HTML, CSS e JavaScript in Page Builder stage. Ad esempio, potrebbe essere utile aggiungere HTML personalizzati, dichiarare una classe CSS che può essere applicata a un elemento della pagina. In alternativa, è possibile aggiungere uno snippet di codice per un logo, un pulsante o un banner ricevuto da un provider di terze parti.

Casella degli strumenti Codice HTML

Casella degli strumenti Codice HTML

StrumentoIconaDescrizione
Sposta Icona Sposta Sposta il contenitore Codice HTML in un altro punto valido della pagina.
Impostazioni Icona Impostazioni Apre la pagina Modifica codice HTML, in cui è possibile modificare le proprietà del contenitore.
Nascondi Icona Nascondi Nasconde il contenitore Codice HTML.
Spettacolo Mostra icona Mostra il contenitore Codice HTML nascosto.
Duplica Icona duplicata Crea una copia del contenitore Codice HTML.
Rimuovi Icona Rimuovi Elimina dall’area di visualizzazione il contenitore Codice HTML e il relativo contenuto.
NOTA
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.

Aggiungi codice HTML

Nell'esempio seguente viene illustrato come incorporare il codice Google Font e dichiarare classi di intestazione personalizzate che hanno la precedenza sul foglio di stile corrente.

Passaggio 1: scegliere un tipo di carattere Google

  1. Visita il sito Google Fonts e scegli la famiglia di caratteri che desideri utilizzare.

  2. Copiare il codice generato da incorporare nella sezione <head> della pagina e incollarlo temporaneamente in un editor di testo.

    • Incorpora codice font
    • Regola CSS

  3. Aggiungere la regola font-family a ogni classe di intestazione, racchiudendo le classi di intestazione in un tag <style>.

    Questo codice è incollato in Page Builder.

    <style>
   h1 {color: teal; font-family: 'Khand', sans-serif; }
   h2 {color: teal; font-family: 'Khand', sans-serif; }
   h3 {color: teal; font-family: 'Khand', sans-serif; }
</style>

Passaggio 2: aggiungi il codice alla pagina

  1. Nella barra laterale Admin del tuo archivio, passa a Content > Elements>Pages.

  2. Individuare la pagina in cui deve essere disponibile il tipo di carattere e aprirla in modalità di modifica.

  3. Scorri verso il basso ed espandi la sezione Content.

  4. Nel pannello Page Builder, espandi Elements e trascina un segnaposto HTML Code in una riga, colonna o set di schede sull'area di visualizzazione.

    Utilizza la linea guida rossa per posizionare il divisore prima o dopo un altro contenitore di contenuto nella riga, nella colonna o nel set di schede.

    Trascinamento di un segnaposto di codice HTML nell'area di visualizzazione

  5. Passa il puntatore del mouse sul contenitore HTML per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( Icona Impostazioni ).

  6. Nella casella di testo incollare il codice Google Fonts da incorporare e le dichiarazioni di stile preparate.

    Per semplificare la lettura, è possibile inserire alcuni spazi per applicare un rientro al codice.

    Codice HTML e stili

  7. Aggiornare le impostazioni rimanenti in base alle esigenze (vedere Modificare le impostazioni del codice HTML per ulteriori dettagli).

  8. Nell'angolo superiore destro fare clic su Save per applicare le impostazioni e tornare all'area di lavoro Page Builder.

    Il nuovo font viene riprodotto quando la pagina viene visualizzata tramite un browser.