Salta al contenuto
Nota bene: la traduzione in olandese 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 responsabile del design

Ultimo aggiornamento: agosto 4, 2021

Si applica a:

Marketing Hub Professional, Enterprisee
CMS Hub Starter, Professional, Enterprisee
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 dando ai marketer la flessibilità che desiderano quando creano contenuti.

In questo articolo, avrete un tour di tutte le caratteristiche del design manager.Se stai cercando esempi di codice specifici e documentazione di riferimento, controlla la documentazione per sviluppatori di HubSpot documentazione per gli 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 i tuoi file, modelli, moduli e cartelle.
  • Layout Editor- un editor drag and drop per strutturare i tuoi modelli di pagina, blog, email e sistema.
  • Inspector- qui è dove puoi modificare le proprietà di un layout, modulo o gruppo.
  • Editor di codice- un ambiente di sviluppo integrato (IDE) per tutto il tuo codice frontend (CSS, Javascript, o anche i tuoi modelli HTML).
  • Module Editor- moduli personalizzati riutilizzabili che puoi impostare per aggiungere funzionalità avanzate al tuo sito che può ancora essere gestito da utenti non tecnici.
  • File Manager- un sistema di hosting di file per tutte le risorse del tuo sito.

Naviga al tuo design manager per esplorare questi strumenti.

Finder

Il finder è uno spazio per gestire tutte le vostre cartelle, modelli, moduli e file codificati. Puoi organizzare i tuoi file e le tue cartelle come vuoi usando l'interfaccia drag and drop del finder. Cliccando 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 tuoi temi e moduli predefiniti, compresi i moduli email drag and drop. Questi temi e moduli sono di sola lettura, ma possono essere clonati se vuoi personalizzarli. Per saperne di più sulla personalizzazione di temi e moduli predefiniti.

design-manager-hubspot-folder

Fai clic su Fileper creare nuovi file o cartelle o per intraprendere azioni sulla risorsa attualmente selezionata nel finder, come eliminare, clonare o rinominare la risorsa. Usa le opzioni sotto Vistaper gestire la disposizione dei tuoi file e cartelle. È possibile comprimere 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 tue 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, clicca su quella cartella nel Finder. Per creare un nuovo file o una nuova cartella al di fuori di tutte le cartelle esistenti, clicca su Visualizza, quindi seleziona Deselezionatutto.

IlAzionisarà attivo solo se un file o una cartella è attualmente selezionato, e fornisce opzioni contestuali per quel tipo di risorsa. Si può anche fare clic con il tasto destro del mousedirettamente sulla risorsaper fare una delle seguenti cose:

  • Clone: fare una copia del vostro file, cartella o modello.
  • Sposta: seleziona una nuova cartella per la tua risorsa.
  • Rinomina: dà un nuovo nome alla risorsa.
  • Clone to HTML: crea una copia della tua risorsa interamente codificata in HTML.
  • Copia sulportale: crea una copia della tua risorsa e inviala ad un altro account HubSpot a cui hai accesso.
  • Crea pagina/email: crea un nuovo contenuto usando questo modello.
  • Mostra le dipendenze: vedi una lista di tutti i contenuti HubSpot che utilizzano il file.
  • Mostra la storia delle revisioni: rivedere la storia delle versioni salvate.
  • Copia snippet: usalo per copiare rapidamente il codice del tuomodulo codificato negliappunti. Questa opzione apparirà solo quando sicliccacon il tasto destrosu unmodulo.
  • Blocca cartella: blocca una cartella per impedire agli utenti di modificarne il contenuto nel gestore di progettazione. I contenuti delle cartelle bloccate possono essere modificati solo all'interno del tuo ambiente di sviluppo locale.
  • Elimina- cancella questo file, cartella, modello o modulo.

right-cilck

Schede

Quando clicchi sul nome di un modello, modulo o file codificato, si apre la tua selezione in una scheda nell'editor. Le schede rendono facile il multi-task e il passaggio tra i vari modelli e file codificati. Puoi cliccare con il tasto destro su qualsiasi schedaper rivelare leopzioni per gestire le tue schede nell'editor. Puoi rivedere un elenco completo delle schede aperte cliccando sullafreccia in basso adestra.

Per darti più spazio per lavorare nell'editor di layout, puoi cliccare primasull'iconadi collasso perfarcollassare ilfinder. Puoi espandere di nuovo il finder cliccando sull'iconadella cartella.

Creare nuovi modelli e file

Per creare un nuovomodello, moduloo filecodificato,clicca su File> New filenell'angoloin alto a sinistradel finder. Hai la possibilità di creare uno dei seguenti tipi di risorse:

  • Drag and drop: un template costruito aggiungendo moduli in un'interfaccia intuitiva di drag and drop.
  • HTML & HUBL: un template codificato personalizzato creato nell'editor di codice usando HTML, CSS e Javascript.
  • Stylesheet: un file CSS codificato che può essere usato per dare stile a moduli e file.
  • JavaScript: un file codificato di Javascript che può essere applicato a moduli e file.
  • Modulo: un modulo personalizzato codificato che può essere aggiunto a un template.

Editor di layout

L'editor di layout è un'interfaccia drag and drop per la struttura e il contenuto predefinito delle tue pagine ed e-mail. Vedrai i nomi dei tuoi moduli e gruppi, insieme alla classe del corpo applicata ad ogni componente. Puoi modificare ogni modulo o gruppo cliccandolo per la modifica nell'ispettore sul lato destro, o cliccando con il tasto destro sul componente per accedere alle funzionalità dell'ispettore.

Trascina e rilascia i componenti nell'editor di layout per regolare il loro posizionamento e le loro dimensioni sul tuo modello. Ci sono i pulsanti Annullae Ripristinanell'angolo in alto a sinistra per aiutarti a ripristinare rapidamente le tue modifiche. Puoi anche fare clic con il pulsante destro del mouse suun modulo per raggruppare, clonareo cambiarerapidamenteun tipo di modulo, oppure usare le scorciatoie da tastiera per ottenerele stesseazioni. CliccasulpulsanteAnteprimanell'angolo in alto a destra per vedere l'anteprima del tuo lavoro e testare il tuo layout su schermi di diverse dimensioni.

Tutti i layout dei template di HubSpot sono reattivi, il che significa che si adattano automaticamente alle diverse dimensioni dello schermo. Questo editor compila i tuoi moduli drag and drop in un markup HTML pulito che è reso reattivo da alcuniCSSintegrati.

Impara di più su comecreare e modificare i modelli e aggiungere stilial tuo modello.

Ispettore

L'ispettore permette di aggiungere e modificare componenti in un modello o modulo. Dipende contestualmente dal compito che si sta eseguendo e dal tipo di file. Per esempio:

  • Quando un componente è selezionato nell'editor drag & drop, l'ispettore mostrerà 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 permette di modificare e aggiungere campi.

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

Per i modelli drag and drop, la scheda+ Add èusata per aggiungere nuovi componenti al tuo layout. LaschedaModifica dell'ispettore può essere usata per assegnare classi CSS personalizzate, modificare il contenuto predefinito o allegare file codificati.

L'ispettore include una navigazione breadcrumb nella parte superiore per aiutarti a navigare rapidamente tra la risorsa, il modulo, il gruppo e il modello su cui stai lavorando.

Per i template e i moduli HTML & HUBL codificati personalizzati, puoi usare l'ispettore per aggiungere nuovi campi o link a file codificati. Puoi ancheaggiungere tag filtro per indicare il tipo di contenuto e la funzione dei tuoi template e moduli codificati per renderli più facilmente ricercabili nel finder. Puoi anche trovare snippet e maggiori dettagli su come queste risorse codificate personalizzate possono essere utilizzate nei tuoi modelli.

Editor di codice

L'editor di codice di HubSpot è un potente IDE che ti permette di codificarefile CSS,file Javascripte persino modelliHTML. Mentre codifichi o modifichi i tuoi fogli di stile, puoi vedere in anteprima gli effetti delle tue modifiche su una varietà di dimensioni dello schermo. L'editor di codice sfrutta anche molte altre utili caratteristiche 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ù su comeusare l'editor di codice.

design-manager-code-editor-example

Editor di moduli

Anche se i template di HubSpot sono dotati di una serie dimoduli standardtra cui scegliere, i designer possono occasionalmente avere bisogno di una soluzione di design più personalizzata. Imoduli sonocomponenti riutilizzabili codificati in modo personalizzatoche comprendono campi HTML e HubL, CSS e Javascript. Questi moduli possono essere aggiunti a un template e personalizzati nell'editor di pagina senza alcun codice.

Usa l'ispettore per aggiungere campi, allegare file codificati o aggiungere tag per organizzare le tue risorse. Proprio come nell'editor di codice, puoi vedere in anteprima il tuo lavoro su una varietà di dimensioni dello schermo mentre vai. Puoi anche specificare il contenuto predefinito per i campi del tuo modulo, bloccare il contenuto predefinito o rendere obbligatori campi specifici del modulo.

Gestore di file

Il filemanagerdi HubSpot memorizzatutte le risorse che usi per creare contenuti. Questo strumento ti permette di caricare PDF, immagini, video, file audio, font e altro ancora. Puoi accedere alle tue risorse creative o caricare rapidamente nuovi file senza dover lasciare l'app.

file-manager