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.

Usare le sezioni

Nell'editor di trascinamento, puoi creare sezioni di pagina riutilizzabili trascinando i moduli su un layout di sezione vuoto. Gli sviluppatori possono anche creare queste sezioni usando la nostra documentazione per sviluppatori. Una volta create, le sezioni possono essere utilizzate su qualsiasi pagina che supporti la modifica con il drag and drop. Le sezioni salvate che contengono regole intelligenti useranno queste regole quando vengono aggiunte a una pagina.

Si prega di notare che:non si possono salvare più di 25 sezioni riutilizzabili dall'editor di trascinamento in una sola volta. Per salvare una nuova sezione riutilizzabile, elimina una sezione riutilizzabile esistente.

Creare una sezione

• Naviga al tuo contenuto:

  • Website Pages: Nel tuo account HubSpot, naviga su Marketing > Sito web > Pagine del sito web.
  • Landing Pages: Nel tuo account HubSpot, naviga su Marketing > Landing page.
• Passa con il mouse su una pagina e clicca suEdit.
• Nell'editor di contenuti, passa il mouse tra due sezioni e clicca sull'icona +più.

• Nel pannello di destra, clicca sulla scheda Layoutse seleziona unlayout per la tua sezione.

• Nell'editor di contenuti, trascina unmodulo sul layout e mettilo in posizione. Ripeti per ogni modulo della tua sezione.

• Passa con il mouse sopra la sezione e clicca sull'icona con la freccia verso il basso, quindi selezionaSalva sezione.

Nota bene:anche le sezioni di pagina esistenti e quelle create senza un layout possono essere salvate come sezioni riutilizzabili.

• Nel pannello di destra, inserisci unnome e una descrizione per la tua sezione, poi clicca suSalva.

Aggiungere una sezione

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

• Nel pannello di destra, passa il mouse su una sezione e clicca su Select. Le sezioni salvate dall'editor di trascinamento appariranno sotto Saved sections, mentre quelle create dagli sviluppatori appariranno sottoTheme sections.
• Aggiungendo una sezione salvata che contiene regole intelligenti , queste verranno applicate alla sezione appena aggiunta. Queste sezioni saranno etichettate come Smart.
• Per eliminare una sezione, clicca sull'icona +più per aggiungere una sezione, poi passa sopra la sezione e clicca sull'icona di cancellazione. Nella finestra di dialogo, clicca suElimina.

Modificare righe, colonne o sezioni

• Nell'editor di pagina, passa il mouse sulla riga, colonna o sezione, quindi clcliccare l'icona 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 suSfondo nell'editor della barra laterale e seleziona un'opzione di stile:
  • Nessuno:rimuove qualsiasi colore di sfondo o immagine.
  • Colore:imposta un singolo colore come sfondo. Inserisci unvalore esadecimale oclicca sulselezionatore di colorie seleziona uncolore,quindi inserisci unvalore di trasparenza.
  • Immagine: imposta un'immagine come sfondo. Per aggiungere una nuova immagine, clicca suCaricaper aggiungere un'immagine dal tuo computer, oppure clicca suSfoglia immaginiper selezionare un'immagine dai tuoifile.
  • 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 clic sulselezionatore di colorie seleziona uncolore,quindi inserisci unvalore di trasparenza.

• 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 suEdit.
• 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.