Trova rapidamente risposte e informazioni generali sullo
strumento Design Manager di HubSpot. Questa risorsa include anche collegamenti ad altre risorse per i progettisti che lavorano sul CMS.Per saperne di più sulla progettazione in HubSpot, consultate la certificazioneGrowth Driven Design della HubSpot Academy e ladocumentazione sul CMS di HubSpot
.La certificazione sul design è gratuita e comprende una formazione video e una pratica di design.
La documentazione sul CMS di HubSpot comprende:
La migliore risorsa per interagire con la comunità di designer di HubSpot è ilforum di design di HubSpot
. Questo forum è monitorato dai designer di HubSpot e dagli utenti di HubSpot esperti di design.Per domande sullo sviluppo delle API di HubSpot, consultate ilforum Sviluppatori
.A partire dal 27 maggio 2020, l'FTP è stato abbandonato e sostituito dalla CMS CLI. Per saperne di più su questo annuncio.
Mentre i moduli globali possono esserericonvertiti in un modulo locale
, i gruppi globali non possono. Per modificare un gruppo globale per un singolo template, clonare il gruppo globale e aggiungere il clone al template.L'editor di layout di HubSpot utilizza un sistema digriglie a 12 colonnebasato suBootstrap 2.x per consentire ai progettisti di template di creare rapidamente pagine web completamente reattive all'interno dellapiattaforma di contenuti HubSpot
.Tutti i layout HubSpot drag and drop includonoautomaticamentelayout.css
per rendere i moduli responsive. Se si desidera utilizzare una griglia reattiva diversa o personalizzata, come Bootstrap 3, è necessario sovrascrivere il CSS in layout.css o utilizzare template codificati, in cui layout.css non è allegato.I moduli di contenuto del blog consentono dimodificare il markup del post e il layoutdell'inserzione
per controllare la posizione dei vari elementi di un post.Tutti i layout dei modelli, i file codificati e lepagine hanno una cronologia dellerevisioniche consente di tornare indietro a qualsiasi versione di un modello o di un contenuto. Per i modelli o i file codificati, fare clic suAzioni>
Visualizza revisioni per accedere alla cronologia delle revisioni.Il framework dei moduli v1 faceva riferimento ai campi dei moduli usando . Il framework v2 fa riferimento ai campi del modulo usando .
Tuttavia, l'uso di nel framework v2 continuerà a funzionare come previsto. Non è necessario aggiornare i moduli personalizzati per fare riferimento a "module".
Invece di usare "get_public_template_url"per accedere aifile JavaScript eCSS, questi file possono ora essere allegati direttamente nell'editor della barra laterale del modulo, nellasezione Filecollegati. Ifile CSS e JS inclusi in questa sezione saranno caricati automaticamente nelle pagine che utilizzano il modulo.
I moduli HTML e HubL sono stati rimossi. Questi moduli fornivano agli sviluppatori un modo rapido per aggiungere frammenti di HTML e HubL a un template. Tuttavia, potevano rendere i template difficili da comprendere e modificare. Per rendere i template più prevedibili e manutenibili, questi moduli sono stati rimossi in favore del mantenimento di tutto il codice nel contesto dei moduli personalizzati.
Se è necessario aggiungere HTML a livello di pagina di un sito web, il modulo HTML può essere scaricato dalMarketplace di HubSpot.
Se si utilizza uno script di terze parti, si collega il file di script allasezione Filecollegatinell'editor dei moduli. Quindi si puòattivare il plugin nella sezione JS dell'editor di codice. Se è necessario passare dei parametri al plugin, si possono usare gli attributi di dati nella sezione HTML + HubL dell'editor per memorizzare questi valori.
Se si utilizza un modulo personalizzato in un'e-mail, le sezioni CSS e JS non appariranno nell'editor, perché i fogli di stile e JavaScript non sono supportati dalla maggior parte dei client di posta elettronica. Per i moduli e-mail, è comunque possibile includere lo stile necessario nei tag <style>.
Se si utilizza un modulo nelle pagine o nei post del blog, le sezioni JS e CSS appariranno come previsto.
I moduli nella versione 2 del design manager sono racchiusi in tag <div>, mentre nel vecchio design manager erano racchiusi in tag <span>. Questo cambiamento avrà un impatto sul modulo solo se si fa riferimento allo span del modulo in un foglio di stile. Ad esempio, la seguente dichiarazione non sarà applicabile nel nuovo design manager:
span #hs_cos_wrapper_widget_5038393204 {
Colore: blu;
}
È possibile sostituire il tag <span> con un tag <div>.Tuttavia, non è consigliabile affidarsi ai wrapper predefiniti di HubSpot per scrivere il proprio CSS. È meglio utilizzare classi CSS personalizzate, come "my-custom-module".
Per saperne di più su come identificare e risolvere un errore di modulo annidato.Per i moduli annidati utilizzati in più modelli, è meglio clonare primail moduloper evitare la perdita di contenuto a livello di pagina. Quindi, si risolvono gli errori nel modulo clonato e si utilizza il clone nei template successivi.
Invece di usare nel modulo personalizzato per aggiungere un gruppo globale, si può aggiungere un campo menu al modulo o modificare il contenuto globale del modulo.
Sì, èpossibile modificare tutti i moduli legacy nell'editor dei moduli. Verranno visualizzati avvisi di convalida e suggerimenti per il codice non supportato dal framework dei moduli v2, ma sarà possibile continuare a modificare e utilizzare questi moduli in HubSpot.
Sebbene sia possibile mantenere tutti i moduli personalizzati esistenti, non sarà possibile creare nuovi moduli utilizzando il vecchio framework. Se si clona un modulo legacy, il modulo clonato verrà creato nel nuovo framework di moduli.