DocumentazioneCommercePage Builder

Elementi - Codice HTML

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 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

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

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.

    code language-html 
    <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 {width="600" modal="regular"}

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

  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 {width="500" modal="regular"}

  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.

Passaggio 3: visualizzare l’anteprima della pagina

  1. Nella sezione Currently Active, impostare Enable Page ​su Yes.

    Abilitazione della pagina {width="600" modal="regular"}

  2. Nell'angolo superiore destro fare clic sulla freccia Save e scegliere Save & Close.

  3. Trovare la pagina nella griglia e selezionare View nella colonna Actions.

    Visualizza l'anteprima delle intestazioni di pagina con la nuova famiglia di caratteri {width="700" modal="regular"}

Modificare le impostazioni del codice HTML html-settings

  1. Passa il puntatore del mouse sul contenitore HTML per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( Icona Impostazioni {width="20"} ).

  2. Nella casella di testo modificare il codice in base alle esigenze.

    Sono supportati i codici HTML, CSS e JavaScript. I frammenti di codice che appartengono alla sezione <head> della pagina possono essere immessi qui.

    L’editor fornisce anche pulsanti per inserire elementi speciali nel codice:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Pulsante Descrizione
    Inserisci widget… Fate clic su per inserire un widget nella posizione del cursore nella casella di testo HTML.
    Inserisci immagine… Fare clic per inserire un'immagine caricata o un'immagine dalla raccolta nella posizione del cursore nella casella di testo HTML.
    Inserisci variabile… Fare clic per inserire una variabile nella posizione del cursore nella casella di testo HTML.

  3. Aggiornare le impostazioni di Advanced ​in base alle esigenze.

    • Per controllare il posizionamento del codice all'interno del contenitore padre, scegliere un Alignment:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
      Opzione Descrizione
      Default Applica l'impostazione predefinita di allineamento specificata nel foglio di stile del tema corrente.
      Left Allinea l'elenco lungo il bordo sinistro del contenitore principale, tenendo conto di eventuali spaziature specificate.
      Center Allinea l'elenco al centro del contenitore padre, tenendo conto di eventuali spaziature specificate.
      Right Allinea il blocco lungo il bordo destro del contenitore principale, tenendo conto della spaziatura specificata.

      Nell'esempio seguente, le opzioni sono impostate per utilizzare un allineamento centrale per il blocco di codice sottoposto a rendering.

      Divisore con allineamento al centro {width="600" modal="regular"}

    • Imposta lo stile Border applicato a tutti e quattro i lati del contenitore di codice:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2
      Opzione Descrizione
      Default Applica lo stile di bordo predefinito specificato dal foglio di stile associato.
      None Non fornisce alcuna indicazione visibile dei bordi del contenitore.
      Dotted Il bordo del contenitore viene visualizzato come una linea tratteggiata.
      Dashed Il bordo del contenitore viene visualizzato come una linea tratteggiata.
      Solid Il bordo del contenitore viene visualizzato come linea continua.
      Double Il bordo del contenitore viene visualizzato come una doppia riga.
      Groove Il bordo del contenitore viene visualizzato come una linea scanalata.
      Ridge Il bordo del contenitore viene visualizzato come una linea scanalata.
      Inset Il bordo del contenitore viene visualizzato come una linea interna.
      Outset Il bordo del contenitore viene visualizzato come una linea di contorno.

    • Se si imposta uno stile di bordo diverso da None, completare le opzioni di visualizzazione del bordo:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Opzione Descrizione
      Border Color Specificate il colore scegliendo un campione, facendo clic sul selettore del colore oppure immettendo un nome di colore valido o un valore esadecimale equivalente.
      Border Width Immettere il numero di pixel per lo spessore della linea del bordo.
      Border Radius Immettere il numero di pixel per definire la dimensione del raggio utilizzato per arrotondare ogni angolo del bordo.

    • (Facoltativo) Specificare i nomi di CSS classes dal foglio di stile corrente da applicare al contenitore.

      Separare più nomi di classe con uno spazio.

    • Immettere i valori, in pixel, per Margins and Padding per determinare i margini esterni e la spaziatura interna del contenitore del codice.

      Immettere i valori corrispondenti nel diagramma.

      table 0-row-2 1-row-2 2-row-2
      Area contenitore Descrizione
      Margins Quantità di spazio vuoto applicata al bordo esterno di tutti i lati del contenitore. Opzioni: Top / Right / Bottom / Left
      Padding Quantità di spazio vuoto applicata al bordo interno di tutti i lati del contenitore. Opzioni: Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d