Modifica dei contenuti della pagina in un'area di trascinamento

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

Conoscere l'editor di trascinamento

Le aree di trascinamento sono composte da moduli, ovvero 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, è possibile riorganizzare o applicare lo stile a più moduli contemporaneamente. Per saperne di più sulla personalizzazione degli stili per i contenuti trascinati.

1. Modulo: un blocco individuale di contenuti del sito web. Alcuni moduli, come quelli di testo ricco, possono contenere più tipi di contenuto.
2. Riga: una fila orizzontale di moduli. È possibile applicare lo stile a un'intera riga o riorganizzarne la posizione nella pagina.
3. Colonna: una pila verticale di moduli multipli. È possibile applicare lo stile a un'intera colonna o riorganizzarne la posizione nella pagina.
4. Sezione: un gruppo di più righe o colonne che copre l'intera larghezza della pagina. È possibile applicare lo stile a un'intera sezione o riorganizzarne la posizione nella pagina.

Organizzare i contenuti

Nell'editor della barra laterale è possibile vedere una panoramica delle sezioni, delle righe, delle colonne e dei moduli del contenuto. Da qui è possibile rinominarli, modificarli, clonarli, eliminarli o nasconderli:

• Navigare verso i contenuti:

  • 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.
• Passare il mouse su una pagina e fare clic su Modifica.
• Nell'editor della barra laterale, fare clic sulla scheda Contenuto .
• Nell'editor della barra laterale è possibile controllare quali elementi della pagina sono visibili:
  • Per visualizzare solo le sezioni della pagina, fare clic su Chiudi tutto. In questo modo, tutte le righe, le colonne e i moduli saranno collassati, in modo che nell'editor della barra laterale siano visibili solo le sezioni.
  • Per visualizzare tutto il contenuto della pagina, fare clic su Espandi tutto. In questo modo verranno mostrate tutte le sezioni, le righe, le colonne e i moduli nell'editor della barra laterale.
  • Per visualizzare un singolo elemento o contenitore della pagina, fare clic sul segno + più accanto al suo nome.
  • Per nascondere un elemento o un contenitore, fare clic sul segno - meno accanto al suo nome.
• È inoltre possibile modificare, rinominare, clonare, eliminare e nascondere gli elementi della pagina:
  • Per modificare un elemento, fare clic sul suo nome.
  • Per rinominare un elemento, fare clic sulle ellissi con tre punti accanto al suo nome, quindi selezionare Rinomina [elemento]. Nella finestra di dialogo, inserire un nome per l'elemento, quindi fare clic su Salva.
  • Per clonare un elemento, fare clic sui tre puntini ellittici accanto al suo nome, quindi selezionare Clona. In questo modo si crea una copia esatta dell'elemento originale adiacente ad esso.
  • Per eliminare un elemento, fare clic sulle ellissi con tre puntini accanto al suo nome e selezionare Elimina.
  • Per nascondere un modulo, fare clic sulle ellissi con tre puntini accanto al suo nome, quindi selezionare Nascondi questo modulo. Il modulo verrà nascosto nell'anteprima della pagina, ma non nell'editor della barra laterale. Per visualizzare un modulo nascosto nella pagina, fare clic sui tre puntini ellittici accanto al suo nome e selezionare Mostra questo modulo.

Utilizzare le sezioni

Nell'editor di trascinamento è possibile creare sezioni di pagina riutilizzabili trascinando i moduli su un layout di sezione vuoto. Anche gli sviluppatori possono creare queste sezioni utilizzando la nostra documentazione per sviluppatori. Una volta create, le sezioni possono essere utilizzate in qualsiasi pagina che supporti la modifica tramite trascinamento. Le sezioni salvate che contengono regole intelligenti utilizzeranno tali regole quando verranno aggiunte a una pagina.

Attenzione:dall'editor di trascinamento non possono essere salvate più di 50 sezioni riutilizzabili alla volta. Per salvare una nuova sezione riutilizzabile, eliminare una sezione riutilizzabile esistente.

Creare una sezione

È possibile salvare una sezione per renderla riutilizzabile in altre pagine che utilizzano lo stesso tema.

• 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.
• Passare il mouse su una pagina e fare clic su Modifica.
• Nell'editor dei contenuti, passare il mouse tra due sezioni e fare clic sull'icona + più.

• Nel pannello di destra, fare clic sulla scheda Layout e selezionare un layout per la sezione.

• Nell'editor dei contenuti, trascinare un modulo sul layout e posizionarlo. Ripetere l'operazione per ogni modulo della sezione.

• Passare il mouse sulla sezione e fare clic sull'icona giùCarat giù, quindi selezionare Salva sezione.

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

• Nel pannello di destra, inserire un nome e una descrizione per la sezione, quindi fare clic su Salva.

Aggiungere o eliminare una sezione

• Navigate nel vostro 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.
• Passare il mouse su una pagina e fare clic su Modifica.
• Nell'editor dei contenuti, passare il mouse tra due sezioni e fare clic sull'icona + più.

• Nel pannello di destra, passare il mouse su una sezione e fare clic su Seleziona. Le sezioni salvate dall'editor di trascinamento appariranno sotto Sezioni salvate, mentre quelle create dagli sviluppatori appariranno sotto Sezioni a tema.
• L'aggiunta di una sezione salvata che contiene regole intelligenti applicherà tali regole alla nuova sezione aggiunta. Queste sezioni saranno etichettate come intelligenti.
• Per eliminare una sezione, fare clic sull'icona + più per aggiungere una sezione, quindi passare il mouse sulla sezione e fare clic sull'icona Elimina. Nella finestra di dialogo, fare clic su Elimina.

Modifica di righe, colonne o sezioni

• Nell'editor di pagina, passare il mouse sulla riga, sulla colonna o sulla sezione, quindi fare clic sull'icona di cancellazione.lccare l'icona modifica modifica icona di modifica.
• Per personalizzare il padding e i margini intorno alla riga, colonna o sezione, fare clic su Allineamento e spaziatura nell'editor della barra laterale.
• Per modificare lo sfondo di un'area, fare clic su Sfondo nell'editor della barra laterale e selezionare un'opzione di stile:
  • Nessuno: rimuove qualsiasi colore o immagine di sfondo.
  • Colore: imposta un singolo colore come sfondo. Immettere un valore esadecimale oppure fare clic sul selezionatore di colori e selezionare un colore, quindi immettere un valore di trasparenza.
  • Immagine: imposta un'immagine come sfondo. Per aggiungere una nuova immagine, fare clic su Carica per aggiungere un'immagine dal computer o su Sfoglia immagini per selezionare un'immagine dai propri file.
  • Gradiente: imposta due colori che sfumano insieme come sfondo. Fare clic sulDirezionee selezionare un coloredirezione del gradiente. Per ogni colore, inserire un valore esadecimale, oppure fare clic sul selezionatore di colori e selezionare un colore, quindi inserire un valore di trasparenza.

• Per creare una copia di un elemento esistente, passare il mouse sull'elemento e fare clic sull'icona duplica ccclone.
• Per rimuovere un elemento dalla pagina, passare ilmouse sull'elemento e fare clic sull'icona di cancellazione .

Aggiungere e modificare moduli

• 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.
• Passare il mouse su una pagina e fare clic su Modifica.
• Nell'editor dei contenuti, fare clic sul modulo nell'editor della barra laterale, quindi trascinarlo in posizione sulla pagina.
• Per regolare la larghezza di un modulo, fare clic sul divisorio verticale tra le colonne e trascinarlo in posizione.

• Per personalizzare il contenuto di un modulo, passare il mouse sul modulo e fare clic su un'icona:

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