Creare una pagina con un modello iniziale

È possibile utilizzare un modello iniziale per creare un semplice sito web o una pagina di destinazione. È possibile creare una nuova pagina, personalizzare il design della pagina e pubblicare la pagina utilizzando un modello iniziale. Per saperne di più sulla creazione di tutti i tipi di pagine in HubSpot.

Attenzione: i modelli di partenzanon supportano i contenuti intelligenti, i moduli personalizzati, la personalizzazione, l'accesso al codice sorgente nei moduli di testo ricco, le pagine protette da password o le opzioni avanzate come la sostituzione dei modelli e l'accesso all'HTML dell'intestazione.

Creare una pagina con un modello iniziale

Per creare una nuova pagina di destinazione con un modello iniziale:

• Navigare nel proprio contenuto:

  • Pagine del sito web: Nel tuo account HubSpot, naviga su Marketing > Sito web > Pagine del sito web.
  • Pagine di destinazione: Nel tuo account HubSpot, naviga su Marketing > Landing page.

• In alto a destra, fare clic sul menu a discesa Crea e selezionare Pagina web o Pagina di destinazione.

• Nella schermata di selezione dei modelli, i modelli del tema attivotema attivoappariranno nella parte superiore della pagina, mentre tutti gli altri modelli saranno nella sezioneAltri modelli in basso. Se non è stato selezionato untema attivo, verrà richiesto di selezionarne uno o di fare clic suPassa ai modelli per scegliere un modello esistente.
• Per creare la pagina con il modello selezionato, fare clic suSeleziona questo modello in alto a destra. Per visualizzare l'anteprima della pagina su mobile o desktop, fare clic su Anteprima.

Modificare il contenuto della pagina

I modelli di partenza contengono blocchi di contenuti del sito web chiamati moduli. È possibile disporre questi moduli in righe orizzontali o in colonne verticali.

È possibile raggruppare le righe e le colonne in sezioni di elementi. Raggruppando gli elementi, è possibile applicare gli stili di sfondo a un'intera area della pagina. È anche possibile trascinare e rilasciare questi elementi per riorganizzare il layout della pagina. Per saperne di più sulla modifica del contenuto della pagina in un'area di trascinamento.

Per personalizzare l'aspetto della pagina sui dispositivi mobili, fare clic sull'icona ediEditfor mobile nell' editor della barra laterale.

Personalizzare font, colori e pulsanti

Per personalizzare gli stili predefiniti del modello iniziale, fare clic sulla scheda Tema nell'editor della barra laterale. È inoltre possibile personalizzare il colore o l'immagine di sfondo per una riga, una colonna o una sezione specifica della pagina.

Tipografia

• Testo del corpo: personalizzare il carattere, la dimensione e i colori dei caratteri per il corpo principale della pagina.
  • Fare clic sul menu a discesa Testo del corpo e selezionare un font.

• • Fare clic sui tasti freccia per regolare la dimensione del carattere.
  • Fare clic sul selezionatore di colori e selezionare un colore per il font. Per impostare un colore personalizzato, fare clic sulla scheda Avanzate e inserire un valore esadecimale.
• Titoli: personalizzare il carattere e il colore del testo nei moduli con un tag titolo.
  • Fare clic sul menu a discesa Intestazioni e selezionare un carattere.
  • Per impostare un colore personalizzato, fare clic sulla scheda Avanzate e inserire un valore esadecimale.
• Testo dei link: personalizzare i font e i colori applicati ai link della pagina.
  • Fare clic sul menu a discesa Testo dei collegamenti e selezionare un carattere.
  • Per impostare un colore personalizzato, fare clic sulla scheda Avanzate e inserire un valore esadecimale.
  • Fare clic sul menu a discesa e selezionare uno stile da applicare al testo del collegamento.

• • Personalizzate il colore e la trasparenza dei vostri link quando vi passano sopra, vengono cliccati e sono già stati visitati:
    
    • Colore del passaggio del link: fare clic sul selezionatore di colori e selezionare un colore per il link quando un visitatore vi passa sopra. Per modificare la trasparenza del colore, inserire un valore percentuale nel campo di testo.

• • • Colore del link attivo: fare clic sul selezionatore di colori e selezionare un colore per il link quando viene cliccato. Per modificare la trasparenza del colore, inserire un valore percentuale nel campo di testo.

• • • Colore del link visitato: fare clic sul selezionatore di colori e selezionare un colore per il link che è già stato cliccato da un visitatore. Per modificare la trasparenza del colore, inserire un valore percentuale nel campo di testo.

Moduli e pulsanti

• Colore di sfondo dei pulsanti: personalizzare il colore applicato allo sfondo dei pulsanti.
  • Immettere un valore esadecimale o fare clic sul selezionatore di colori e selezionare un colore.
  • Per impostare la trasparenza del colore di sfondo dei pulsanti, inserire un valore percentuale nel campo.
• Colore del testo dei pulsanti: consente di personalizzare il colore applicato al testo dei pulsanti della pagina.
  • Immettere un valore esadecimale o fare clic sul selezionatore di colori per selezionare il colore del testo.
  • Per impostare la trasparenza del colore di sfondo dei pulsanti, inserire un valore percentuale nel campo.
• Raggio d'angolo dei pulsanti: consente di personalizzare l'aspetto rotondo o quadrato dei pulsanti della pagina.
  • Inserite un valore nel campo o fate clic e trascinate il cursore in una nuova posizione.
  • Un valore più alto significa che i pulsanti della pagina avranno bordi più rotondi, mentre un valore pari a zero significa che i pulsanti saranno rettangolari.

Nota bene: HubSpot consiglia di mantenere colori, font e stili coerenti con le impostazioni della scheda Design. È possibile sovrascrivere gli stili predefiniti per un singolo modulo nella scheda Opzioni del pannello di sinistra.

Anteprima e pubblicazione della pagina

Prima di pubblicare la pagina, fare clic su Anteprima in alto a destra per verificare come apparirà la pagina sui dispositivi desktop e mobili. Una volta soddisfatti dell'anteprima della pagina, fare clic su Pubblicare in alto a destra.