Creare una pagina con un modello iniziale

Puoi usare un modello iniziale per costruire un semplice sito web o una pagina di destinazione. Questo articolo spiega come creare una nuova pagina, personalizzare il design della pagina e pubblicare la pagina utilizzando un modello iniziale.

Nota bene: i modelli di partenza non supportano i contenuti intelligenti, i moduli personalizzati, la personalizzazione, l'accesso al codice sorgente nei moduli rich text, le pagine protette da password, o opzioni avanzate come lo scambio di template 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:

• Naviga verso il tuo 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, fai clic sul menu a discesa Creae selezionaPagina web oPagina di destinazione.
• Nel menu laterale sinistro della schermata di selezione dei modelli, clicca su Tutti i tuoi modelli.
• Per visualizzare i tuoi modelli starter disponibili, clicca sul menu a tendina Filter by sourcee selezionaStarter.

• Passa il mouse su un modello, poi clicca su Anteprima in alto a destra.
• Per creare una pagina con questo modello, fare clic su Usa modello in alto a destra.
• Nella finestra di dialogo, clicca suContinua.
• Inserisci un nome internoper la tua pagina, poi clicca suCreate page.

Modifica il contenuto della tua pagina

I modelli di avvio contengono blocchi di contenuto del sito web chiamati moduli. Puoi disporre questi moduli in righe orizzontali o colonne verticali.

Puoi raggruppare righe e colonne in sezioni di elementi. Raggruppando gli elementi, puoi applicare stili di sfondo a un'intera area della tua pagina. Puoi anche trascinare e rilasciare questi elementi per riorganizzare il layout della tua pagina. Per saperne di più sullamodifica del contenuto della pagina in un'area di trascinamento.

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

Personalizzare i caratteri, i colori e i pulsanti

Per personalizzare gli stili predefiniti del tuo modello di partenza, clicca sulla scheda Tema nell'editor della barra laterale. Puoi anche personalizzare il colore di sfondo o l'immagine per una specifica riga, colonna o sezione

Tipografia

• Corpo del testo: personalizza il carattere, la dimensione del carattere e i colori del carattere per il corpo principale della tua pagina.
  • Clicca sul menu a discesa Testo corpo e seleziona un font

• • Fai clic sui tasti freccia
  per regolare la dimensione del carattere.
  • Clicca sul selezionatore di colori e seleziona un colore per il tuo font. Per impostare un colore personalizzato, clicca sulla scheda Advanced e inserisci un valore esadecimale
.
• Intestazioni: personalizza il carattere e il colore del testo nei moduli con un'intestazione.
  • Clicca sul menu a tendina Headings e seleziona un font
  .
  • Per impostare un colore personalizzato, clicca sulla scheda Advanced e inserisci un valore esadecimale
.
• Testo del link: personalizza i caratteri e i colori applicati ai link della tua pagina.
  • Clicca sul menu a discesa Link text e seleziona un carattere
  .
  • Clicca sul selezionatore di colori e seleziona un colore per il collegamento. Per impostare un colore personalizzato, clicca sulla scheda Avanzate e inserisci un valore esadecimale
  .
  • Fai clic sul menu a discesa e seleziona uno stile

• • Personalizza il colore e la trasparenza dei tuoi link quando passano con il mouse, vengono cliccati e sono già stati visitati:
    
    • Linkhover color: clicca sul selezionatore di colori e seleziona un colore per quando un visitatore passa sopra il link. Per cambiare la trasparenza del colore, inserisci un valore percentuale
    
    

• • • Colore attivo del link: clicca sul selezionatore di colori e seleziona un colore per quando il link viene cliccato. Per cambiare la trasparenza del colore, inserisci un valore percentuale

• • • Colore del link visitato: clicca sul selezionatore di colori e seleziona un colore di link per quando il link è già stato cliccato da un visitatore. Per cambiare la trasparenza del colore, inserisci un valore percentuale

Moduli e pulsanti

• Colore di sfondo dei pulsanti: personalizza il colore applicato allo sfondo dei tuoi pulsanti.
  • Inserisci un valore esadecimale o clicca sul selezionatore di colori e seleziona un colore
  .
  • Per impostare la trasparenza del colore di sfondo dei tuoi pulsanti, inserisci un valore percentuale
nel campo.
• Button text color: personalizza il colore applicato al testo dei pulsanti sulla tua pagina.
  • Inserisci un valore esadecimale o clicca sul selezionatore di colori
  per selezionare il colore del testo.
  • Per impostare la trasparenza del colore di sfondo dei pulsanti, inserisci un valore percentuale
nel campo.
• Raggio d'angolo dei pulsanti: personalizza il modo in cui i pulsanti della tua pagina appaiono rotondi o quadrati.
  • Inserisci unvalorenel campo o clicca e trascina ilcursore
  in una nuova posizione.
  • Un valore più alto significa che i pulsanti sulla tua pagina avranno bordi più rotondi, mentre un valore pari a zero significa che i tuoi pulsanti saranno rettangolari.

Nota: HubSpot raccomanda di mantenere colori, caratteri e stili coerenti in base alle impostazioni della scheda Design. Puoi sovrascrivere gli stili predefiniti per un singolo modulo nella scheda Opzioni

Anteprima e pubblicazione della pagina

Prima che la tua pagina venga pubblicata, clicca su Anteprima in alto a destra per testare come apparirà la tua pagina sui dispositivi desktop e mobili.Una volta che sei soddisfatto dell'anteprima della tua pagina, clicca su Pubblica