Salta al contenuto
Nota bene: la traduzione in italiano di questo articolo è fornita solo per comodità. La traduzione viene creata automaticamente tramite un software di traduzione e potrebbe non essere stata revisionata. Pertanto, la versione inglese di questo articolo deve essere considerata come la versione di governo contenente le informazioni più recenti. È possibile accedervi qui.
Design Manager

Un rapido tour del design manager

Ultimo aggiornamento: giugno 15, 2022

Si applica a:

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Legacy Marketing Hub Basic

Il design manager di HubSpot combina tutti gli strumenti di cui i designer hanno bisogno per costruire siti web all'avanguardia, pur offrendo ai marketer la flessibilità che desiderano nella creazione dei contenuti.

In questo articolo, vi illustreremo tutte le caratteristiche del design manager.Se cercate esempi di codice specifici e documentazione di riferimento, consultate la documentazione di HubSpot per gli sviluppatori. documentazione per sviluppatori.

Strumenti inclusi nel design manager

Il design manager aggrega diversi strumenti importanti in un'unica potente applicazione:

  • Finder: uno spazio per creare e organizzare file, modelli, moduli e cartelle.
  • Editor dilayout- un editor drag and drop per strutturare i modelli di pagine, blog, e-mail e sistemi.
  • Ispettore: qui si possono modificare le proprietà di un layout, di un modulo o di un gruppo.
  • Editordi codice- un ambiente di sviluppo integrato (IDE) per tutto il codice del frontend (CSS, Javascript o anche i propri modelli HTML).
  • Editor di moduli- moduli personalizzati riutilizzabili che potete impostare per aggiungere funzionalità avanzate al vostro sito, che possono essere gestite anche da utenti non tecnici.
  • File Manager- un sistema di hosting di file per tutte le risorse del sito.

Per esplorare questi strumenti, navigare nel proprio design manager.Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.

Cercatore

Il finder è uno spazio per gestire tutte le cartelle, i modelli, i moduli e i file codificati. È possibile organizzare i file e le cartelle come si preferisce, utilizzando l'interfaccia di trascinamento del Finder. Facendo clic su un file è possibile espandere o comprimere i file contenuti.

Tutti Hub del marketing Professionale ed Enterprise eHub CMS Gli accountProfessional ed Enterprise hanno una cartella @hubspot nel design manager per impostazione predefinita. Questa cartella contiene tutti i temi e i moduli predefiniti, compresi i moduli email drag and drop. Questi temi e moduli sono di sola lettura, ma possono essere clonati se si desidera personalizzarli. Per saperne di più sulla personalizzazione dei temi e dei moduli predefiniti.

design-manager-hubspot-folder

Fare clic suFile per creare nuovi file o cartelle o per eseguire azioni sulla risorsa attualmente selezionata nel Finder, come eliminare, clonare o rinominare la risorsa. Per gestire la disposizione dei file e delle cartelle, utilizzare le opzioni della sezioneVisualizza. È possibile chiudere rapidamente tutte le cartelle o richiamare le risorse modificate o eliminate di recente.

design manager collapse and deselect folders

Nota: il Finder è contestuale, il che significa che le azioni saranno sempre relative alle cartelle e ai file selezionati. Per creare un nuovo file o una nuova cartella all'interno di una cartella specifica, fare clic su tale cartella nel Finder. Per creare un nuovo file o una nuova cartella al di fuori di tutte le cartelle esistenti, fare clic su Visualizza, quindi selezionareDeseleziona tutto.

IlAzioniè attivo solo se è selezionato un file o una cartella e fornisce opzioni contestuali per quel tipo di risorsa. È anche possibilefare cliccon il pulsante destro del mousedirettamente sulla risorsa per eseguire una delle seguenti operazioni:

  • Clona: crea una copia del file, della cartella o del modello.
  • Sposta: selezionare una nuova cartella per la risorsa.
  • Rinomina: assegna un nuovo nome alla risorsa.
  • Clona in HTML: crea una copia della risorsa interamente codificata in HTML.
  • Copia nelportale: create una copia della risorsa e inviatela a un altro account HubSpot a cui avete accesso.
  • Crea pagina/email: crea un nuovo contenuto utilizzando questo modello.
  • Mostra le dipendenze: visualizza un elenco di tutti i contenuti HubSpot che utilizzano il file.
  • Mostra la cronologia delle revisioni: consente di rivedere la cronologia delle versioni salvate.
  • Copia snippet: consente di copiare rapidamente negli appunti lo snippet di codice delmodulopersonalizzato. Questa opzione appare solo quando si fa cliccon il pulsante destro del mousesu un modulo.
  • Blocca cartella: blocca una cartella per impedire agli utenti di modificarne il contenuto nel design manager. I contenuti delle cartelle bloccate possono essere modificati solo nell'ambiente di sviluppo locale.
  • Elimina: elimina questo file, cartella, modello o modulo.

right-cilck

Schede

Quando si fa clic sul nome di un modello, di un modulo o di un file codificato, la selezione viene aperta in una scheda dell'editor. Le schede facilitano il lavoro multi-task e la possibilità di passare da un modello all'altro e da un file codificato all'altro. È possibile fare clic con il tasto destro del mouse su una schedaper visualizzare le opzioni di gestione delle schede nell'editor. È possibile esaminare l'elenco completo delle schede aperte facendo clic sulla frecciain bassoa destra.

Per avere più spazio per lavorare nell'editor di layout, è possibile fare clic sull'icona dichiusura perchiudere il Finder. È possibile espandere nuovamente il finder facendo clic sull'iconadellacartella.

2021-12-16_16-33-42 (2)

Creare nuovi modelli e file

Per creare un nuovomodello,modulo ofile codificato, fare clic su File>Nuovo filenell'angolo superiore sinistro del Finder. È possibile creare uno dei seguenti tipi di risorse:

  • Drag and drop: un modello costruito aggiungendo moduli a un'intuitiva interfaccia drag and drop.
  • HTML & HUBL: un modello personalizzato creato nell'editor di codice utilizzando HTML, CSS e Javascript.
  • Foglio di stile: un file CSS codificato che può essere utilizzato per lo stile di moduli e file.
  • JavaScript: un file codificato di Javascript che può essere applicato a moduli e file.
  • Modulo: un modulo codificato in modo personalizzato che può essere aggiunto a un modello.

Editor di layout

L'editor di layout è un'interfaccia a trascinamento per la struttura e il contenuto predefinito delle pagine e delle e-mail. Si vedranno i nomi dei moduli e dei gruppi, insieme alla classe del corpo applicata a ciascun componente. È possibile modificare ciascun modulo o gruppo facendo clic su di esso per modificarlo nell'ispettore sul lato destro, oppure facendo clic con il pulsante destro del mouse sul componente per accedere alle funzionalità dell'ispettore.

Trascinare e rilasciare i componenti nell'editor di layout per regolarne il posizionamento e le dimensioni sul modello. Nell'angolo in alto a sinistra sono presenti i pulsantiAnnullaeRipetiche consentono di ripristinare rapidamente le modifiche.È anche possibile fare clic con il pulsante destro del mouse su unmoduloper raggruppare, clonare o modificare rapidamente un tipo di modulo, oppure utilizzare lescorciatoie da tastieraper eseguire le stesse azioni. Fare clic sul pulsante Anteprimanell'angolo in alto a destra per visualizzare un'anteprima del lavoro svolto e testare il layout su schermi di diverse dimensioni.

Tutti i layout dei template HubSpot sono responsive, cioè si adattano automaticamente alle diverse dimensioni dello schermo. Questo editor compila i moduli trascinati in un markup HTML pulito, reso reattivo da alcuniCSS integrati.

Per saperne di più sullacreazione e la modifica dei modelli e sull'aggiunta di stili al modello.

Ispettore

L'ispettore consente di aggiungere e modificare i componenti di un modello o di un modulo. Dipende dal contesto in cui si opera e dal tipo di file. Ad esempio:

  • Quando si seleziona un componente nell'editor di trascinamento, l'ispettore mostra tutte le caratteristiche e le opzioni di quel componente.
  • Quando nessun componente è selezionato nell'editor di trascinamento, l'ispettore mostrerà le opzioni per il modello stesso.
  • Quando si modifica un modulo, l'ispettore consente di modificare e aggiungere campi.

A seconda del tipo di modulo selezionato nel modello, possono essere disponibili diverse opzioni nell'ispettore.

Per i modelli trascinabili, la scheda+ Aggiungiserve per aggiungere nuovi componenti al layout.Lascheda Modificadell'ispettore può essere usata per assegnare classi CSS personalizzate, modificare il contenuto predefinito o allegare file codificati.

L'ispettore include una navigazione a briciole di pane nella parte superiore per aiutarvi a navigare rapidamente tra le risorse, i moduli, i gruppi e i modelli su cui state lavorando.

Per i modelli e i moduli HTML e HUBL codificati in modo personalizzato, è possibile utilizzare l'ispettore per aggiungere nuovi campi o collegamenti ai file codificati.È anche possibile aggiungere tag di filtro per indicare il tipo di contenuto e la funzione dei modelli e dei moduli codificati, in modo da renderli più facilmente ricercabili nel Finder. È inoltre possibile trovare snippet e ulteriori dettagli su come queste risorse codificate personalizzate possono essere utilizzate nei vostri template.

Editor di codice

L'editor di codice di HubSpot è un potente IDE che consente di codificarefile CSS,file Javascript e persinomodelli HTML. Durante la codifica o la modifica dei fogli di stile, è possibile visualizzare l'anteprima in tempo reale degli effetti delle modifiche su una varietà di dimensioni dello schermo. L'editor di codice sfrutta anche molte altre utili funzioni dell'IDE, come le classi codificate a colori, il controllo degli errori, l'evidenziazione della sintassi, il salvataggio automatico, la chiusura automatica dei tag, l'indentazione automatica e altro ancora.

Per saperne di più sucome utilizzare l'editor di codice.

design-manager-code-editor-example

Editor del modulo

Mentre i template drag and drop di HubSpot sono dotati di una serie di modulistandardtra cui scegliere, i designer possono occasionalmente avere bisogno di una soluzione di design più personalizzata. Imodulisono componenti personalizzati riutilizzabili composti da campi HTML eHubL, CSS e Javascript. Questi moduli possono essere aggiunti a un modello e personalizzati nell'editor di pagina senza alcun codice.

Usate l'ispettore per aggiungere campi, allegare file codificati o aggiungere tag per organizzare le risorse. Come nell'editor di codice, è possibile visualizzare l'anteprima del proprio lavoro su schermi di diverse dimensioni. È anche possibile specificare il contenuto predefinito per i campi del modulo, bloccare il contenuto predefinito o rendere obbligatori campi specifici del modulo.

Gestore di file

Ilfile manager diHubSpot archivia tutte le risorse utilizzate per creare contenuti. Questo strumento consente di caricare PDF, immagini, video, file audio, font e altro ancora. È possibile accedere alle risorse creative o caricare rapidamente nuovi file senza dover lasciare l'applicazione.

file-manager

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.