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: gennaio 27, 2021

Si applica a:

Marketing Hub  Professional, Enterprisee
CMS Hub  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 di design manager. Se stai cercando esempi di codice specifici e documentazione di riferimento, controlla la documentazione per sviluppatori di HubSpot 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 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.
  • Code Editor - 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 nel tuo design manager per esplorare questi strumenti. Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.

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 Marketing Hub Professional e Enterprise e CMS Hub 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 File per 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 Vista per 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 Deseleziona tutto.

Il Azioni è attivo solo se un file o una cartella sono attualmente selezionati e fornisce opzioni contestuali per quel tipo di risorsa. Si può anche fare clic con il tasto destro del mousesu direttamente sulla risorsa per 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 a un altro account HubSpot a cui hai accesso.
  • Crea pagina/email: crea un nuovo contenuto usando questo modello.
  • Show dependents: vedere una lista di qualsiasi contenuto HubSpot che utilizza il file.
  • Mostra la storia delle revisioni: rivedere la storia delle versioni salvate.
  • Copia snippet: usalo per copiare velocemente il codice del tuo modulocodificato negli appunti. Questa opzione apparirà solo quando clicca con il tasto destro delmouse su un modulo.
  • 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 - elimina 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 multitasking e il passaggio tra i vari modelli e file codificati. Puoi cliccare con il tasto destro su qualsiasischeda per rivelare le opzioni per gestire le tue schede nell'editor. Puoi rivedere un elenco completo delle schede aperte cliccando sullafreccia verso il basso sulla destra.

Per darti più spazio per lavorare nell'editor di layout, puoi fare clic sull'icona di collasso prima per far collassare il finder. Puoi espandere di nuovo il finder facendo clic sull'icona della cartella folder.

Creare nuovi modelli e file

Per creare un nuovomodello , unmodulo o unfile codificato , clicca su File > Newfile nell 'angolo in alto a sinistra del 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 Undo e Redo nell'angolo in alto a sinistra per aiutarti a ripristinare rapidamente le tue modifiche. Puoi anche fare clic con il tasto destro del mouse su un modulo per raggruppare, clonare o cambiare rapidamente un tipo di modulo, oppure usarelescorciatoie da tastiera per ottenere le stesse azioni. Fai clic sul pulsante Anteprima nell'angolo superiore destro per vedere l'anteprima del tuo lavoro e testare il tuo layout su diverse dimensioni dello schermo.

Tutti i layout dei template 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 alcuni CSSintegrati .

Per saperne di più su creare e modificare i modelli e aggiungere stili al 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.La schedaEdit 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 modelli e i moduli HTML & HUBL codificati personalizzati, puoi usare l'ispettore per aggiungere nuovi campi o collegamenti ai file codificati. Puoi anche aggiungere tag filtro per indicare il tipo di contenuto e la funzione dei tuoi modelli 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 permette di codificare file CSS, file Javascript, e anche modelli HTML. Mentre codifichi o modifichi i tuoi fogli di stile, puoi vedere in anteprima gli effetti dei tuoi cambiamenti 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.

Per saperne di più su come usare l'editor di codice.

design-manager-code-editor-example

Editor di moduli

Mentre i template drag and drop di HubSpot sono dotati di un certo numero di moduli standard tra cui scegliere, i designer possono occasionalmente avere bisogno di una soluzione di design più personalizzata. Imoduli sono componenti riutilizzabili codificati su misura e composti da HTML e HubL campi, CSS e Javascript. Questi moduli possono essere aggiunti ad 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

HubSpot's file manager memorizza tutte le risorse che si utilizzano per creare contenuti. Questo strumento consente 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