Modifica il contenuto della pagina in un'area di trascinamento

Nell'editor di pagina drag and drop, gli utenti possono riorganizzare e applicare stili personalizzati a diverse sezioni di una pagina. L'editing drag and drop è disponibile per le pagine create con modelli di avvio, alcuni modelli di tema e modelli codificati con aree di trascinamento.

Capire l'editor drag and drop

Le aree di trascinamento sono composte da moduli, che sono blocchi di contenuto del sito web. I moduli possono essere disposti in righe orizzontali o colonne verticali, che possono poi essere raggruppate in sezioni.

Creando righe, colonne e sezioni, puoi riorganizzare o applicare lo stile a più moduli contemporaneamente. Scopri di più sulla personalizzazione degli stili per il contenuto drag and drop.

1. Modulo: un blocco individuale di contenuto del sito web. Alcuni moduli, come i moduli rich text, possono contenere più tipi di contenuto.
2. Fila: una fila orizzontale di moduli. Puoi applicare lo stile a un'intera riga o riorganizzare la sua posizione su una pagina.
3. Colonna: una pila verticale di più moduli. Puoi applicare uno stile a un'intera colonna o riorganizzare la sua posizione in una pagina.
4. Sezione: un gruppo di più righe o colonne che copre l'intera larghezza della pagina. Puoi applicare lo stile a un'intera sezione o riorganizzare la sua posizione nella pagina.

Aggiungere sezioni

Gli sviluppatori possono creare sezioni di pagina riutilizzabili che sono disponibili nell'editor di trascinamento. Scopri di più sulla creazione di sezioni riutilizzabili nella nostra documentazione per sviluppatori. Nell'editor di trascinamento sono disponibili anche layout vuoti per le sezioni.

• Naviga verso il tuo contenuto:

  • Website Pages: 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.
• Passa con il mouse su una pagina e clicca su Edit.
• Nell'editor di contenuti, passa il mouse tra due sezioni e clicca sull'icona + più.

• Per aggiungere una sezione personalizzata, nel pannello di destra, seleziona lasezione.

• Per aggiungere un layout vuoto, nel pannello di destra, clicca sullaschedaLayouteseleziona un layout. Puoi quindi aggiungere moduli alle aree vuote del layout.

Modificare righe, colonne o sezioni

• Nell'editor di pagina, passa il mouse sulla riga, colonna o sezione, quindi cclicca sul pulsante modifica modifica icona.
• Per personalizzare l'imbottitura e i margini intorno alla riga, colonna o sezione, clicca su Allineamento e spaziatura nell'editor della barra laterale.
• Per modificare lo sfondo di un'area, fai clic su Sfondonell'editor della barra laterale e seleziona un'opzione di stile:
  • Nessuno:rimuove qualsiasi colore di sfondo o immagine.
  • Colore: impostaun singolo colore come sfondo. Inserisci unvalore esadecimaleo cliccasul selezionatore dicolorie seleziona un colore, quindi inserisci un valore ditrasparenza.
  • Immagine: imposta un'immagine come sfondo. Per aggiungere una nuova immagine, clicca su Caricaperaggiungere un'immagine dal tuo computer, oppure clicca su Sfoglia immagini perselezionare un'immagine daituoi file.
  • Gradiente: imposta due colori in dissolvenza insieme come sfondo. Clicca sulDirezionemenu a tendina e selezionate undirezione del gradiente. Per ogni colore, inserisci unvalore esadecimale, oppure fai clicsul selezionatore dicolorie seleziona un colore, quindi inserisci un valore ditrasparenza.

• Per fare una copia di un elemento esistente, passa il mouse sull'elemento e clicca sull'icona duplica ccclone.
• Per rimuovere un elemento dalla pagina, passail mouse sull'elemento e clicca sull'icona dicancellazione .

Aggiungere e modificare i moduli

• Naviga al tuo contenuto:

  • Website Pages: 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.
• Passa il mouse su una pagina e clicca su Edit.
• Nell'editor dei contenuti, fai clic sul modulo nell'editor della barra laterale, quindi trascinalo in posizione nella pagina.
• Per regolare la larghezza di un modulo, clicca sul divisore verticale tra le colonne e trascinalo in posizione.

• Per personalizzare il contenuto di un modulo, passa il mouse sul modulo e clicca su un'icona:

• • modifica Modifica modulo: modifica il contenuto del modulo
  • clonduplica Clona modulo: crea una copia di questo modulo nella pagina.
  • delete Cancella modulo: rimuove questo modulo dalla pagina.