--- title: Content Library con HubDB tables e filtri in HubSpot description: Content Library con HubDB tables e filtri in HubSpot --- [Skip to content](https://www.hubspotlove.com/knowledge/content-library-con-hubdb-tables-e-filtri-in-hubspot#main-content) English Show submenu for translations [Contact us](https://www.hubspotlove.com/knowledge/kb-tickets/new?hsLang=en) ![AND logo white.png\]](https://www.hubspotlove.com/hs-fs/hubfs/AND%20logo%20white.png?height=29&name=AND%20logo%20white.png) Open main navigation Close main navigation - English Show submenu for translations - [Contact us](https://www.hubspotlove.com/knowledge/kb-tickets/new) - Go to the website Go to the website How-To Resource Repository - There are no suggestions because the search field is empty. 1. [Help Center](https://www.hubspotlove.com/knowledge?hsLang=en) 2. [Website from A to Z](https://www.hubspotlove.com/knowledge/website-from-a-to-z?hsLang=en) 3. [HubDB](https://www.hubspotlove.com/knowledge/website-from-a-to-z?hsLang=en#hubdb) # Content Library con HubDB tables e filtri in HubSpot **Ultimo aggiornamento:** Luglio 2026 **Tempo medio:** 3–4 ore (prima volta) | 20 min (gestione quotidiana) --- Questa guida copre come creare un listing di contenuti dinamico (Content Library) in HubSpot usando: - **HubDB table** per i dati - **Modulo HubL personalizzato** per la visualizzazione - **Filtri lato client** (Progetto, Tipo, Anno, Tag) Il processo si divide in **quattro fasi**: creazione tabella → creazione modulo → inserimento in pagina → gestione quotidiana. --- Fase 1: Creare la tabella HubDB ### Dove **HubSpot** → menu laterale **Marketing** → **Content** → **HubDB** ### Come **Step 1 — Creare la tabella** 1. Clicca **"Create table"** in alto a destra 2. Dai un nome significativo (es. "Content Library", "Resources 2026") 3. Clicca **"Create"** **Step 2 — Aggiungere le colonne** Clicca **"Add column"** e aggiungi queste colonne nell'ordine indicato: | Colonna | Tipo | Obbligatoria | Note | | --- | --- | --- | --- | | PROGETTO | Select (multi) | ✅ Sì | Es: \[Marketing, Sales, Corporate, Risorse Umane\] | | TITOLO PAGINA | Text | ✅ Sì | Il titolo che appare nella card | | SOTTOTITOLO | Text | ⭐ Consigliata | Breve descrizione (max 100 car) | | COVER | Image | ⭐ Consigliata | Immagine hero della card (1200x630 px ideale) | | URL | Text/Link | ✅ Sì | Link relativo (/it/nome-pagina) o assoluto | | TIPO | Text | ✅ Sì | Es: Landing page, Articolo, Evento, Case study | | TAG | Text | ⭐ Consigliata | Tag separati da virgola (es: "AI, automazione, CRM") | | ANNO | Number | ✅ Sì | Anno di riferimento (es: 2026) | | LINGUA | Select (singola) | ✅ Sì | Opzioni: IT, EN, DE, FR (adatta al sito) | **⚠️ Regola importante per Select (PROGETTO e LINGUA):** Quando aggiungi una colonna di tipo Select, HubSpot ti chiede di definire le opzioni *subito*. Fallo con attenzione — le opzioni che metti qui compariranno nei filtri del sito. Se sbagli, ritroverai duplicati ("marketing" e "Marketing" come valori diversi). **Step 3 — Abilitare la pubblicazione** 1. Fai clic sull'ingranaggio ⚙️ → **Table settings** 2. Assicurati che "Publishing" sia **ON** 3. Salva le impostazioni **Step 4 — Annotare il Table ID** Troverai il Table ID in uno di questi posti: - Ingranaggio → **Table settings** (sezione "General") - URL della tabella: `...?tableId=XXXXX` (numero lungo) **Esempio:** `1234567890` 📌 **Salva questo numero — serve per collegare la tabella al modulo.** --- Fase 2: Creare il modulo HubL personalizzato ### Dove **HubSpot** → **Marketing** → **Content** → **Design Manager** (oppure cerca "Design Manager" nella barra di ricerca in alto) ### Come **Step 1 — Creare un nuovo modulo** 1. Clicca l'icona **"+"** (nuovo file) in alto a sinistra 2. Seleziona **"Module"** **Step 2 — Configurare il modulo** Nella schermata di setup: - **Spunta le aree di utilizzo:** - ✅ Landing pages - ✅ Blog listing pages - ✅ Site pages - ✅ (altre aree rilevanti per il tuo sito) - **Module content scope:** lascia su **"Local module"** - **File name:** dai un nome chiaro - Es: `content-library-listing`, `risorse-prodotti-listing` - **File location:** verifica che sia nella cartella del tema attivo - Clicca **"Create"** Si apre l'editor con tre sezioni: **HTML (con HubL)** | **CSS** | **JavaScript** **Step 3 — Inserire il codice** ⚠️ **Importante:** Il codice HTML, CSS e JavaScript completo **varia da progetto a progetto** e si aggiorna quando aggiungi funzionalità. Chiedi al referente tecnico del progetto il codice aggiornato. Dove incollare: - **Campo 1 (HTML + HubL):** Il codice HTML e HubL - **Campo 2 (CSS):** Gli stili - **Campo 3 (JavaScript):** La logica dei filtri **Step 4 — Aggiornare il Table ID nel codice** Cerca nel codice HTML questa riga (o simile): ``` hubdb_table_rows('XXXXX', ...) ``` Sostituisci `XXXXX` con il **Table ID annotato nella Fase 1**. Es: cambia da `hubdb_table_rows('1234567890', ...)` a `hubdb_table_rows('9876543210', ...)` **Step 5 — Salvare il modulo** Clicca **"Save"** in alto. Se il salvataggio non funziona, controlla la console del browser (F12) per eventuali errori di sintassi nel codice. --- ``` Fase 3: Inserire il modulo in una pagina ``` ### Dove Nella pagina dove vuoi che compaia il listing (Landing page, Site page, template Blog) ### Come 1. Apri la pagina in edit 2. Clicca **"Add module"** (di solito nel pannello laterale sinistro) 3. Cerca il modulo per nome (es: "content-library-listing") 4. Trascinalo nel punto desiderato della pagina 5. Pubblica la pagina Se la pagina è già pubblicata e stai solo testando, usa **"Preview"** prima di pubblicare. --- ``` Fase 4: Gestione quotidiana dei contenuti ``` Questa è la parte che il team farà più spesso una volta che tabella e modulo sono impostati. ### Aggiungere un contenuto **Step 1 — Accedere a HubDB** - **HubSpot** → **Marketing** → **Content** → **HubDB** - Apri la tabella **Step 2 — Clicca "Add row"** **Step 3 — Compila le colonne** | Colonna | Cosa fare | Errori comuni | | --- | --- | --- | | **PROGETTO** | Seleziona dal menu a tendina (non scrivere a mano) | ❌ Digitare "Marketing" invece di selezionare → crea valori duplicati nei filtri | | **TITOLO PAGINA** | Testo della card (max 60 car per visual appeal) | ❌ Titoli troppo lunghi rompono la card | | **SOTTOTITOLO** | Breve descrizione (max 100 car) | ⚠️ Facoltativi ma consigliati | | **COVER** | Carica l'immagine (o seleziona da libreria) | ❌ Immagini a caso ruinano il design. Usa dimensioni coerenti (1200x630 px) | | **URL** | Link alla pagina reale (es: `/it/nome-pagina` o `https://...`) | ❌ URL errati → link rotti | | **TIPO** | Tipo di contenuto (es: "Landing page", "Articolo") | ❌ Scrivere inconsistente ("Articolo" vs "articolo") → crea filtri sbagliati | | **TAG** | Tag separati da virgola (es: "AI, automazione") | ⚠️ Facoltativi ma utili per la ricerca | | **ANNO** | Anno numerico (es: 2026) | ❌ Numero intero senza lettere | | **LINGUA** | Seleziona dal menu a tendina (IT, EN, DE, etc) | ❌ Se vuota, il contenuto non compare | **Step 4 — Clicca "Publish"** ⚠️ **Fondamentale:** senza pubblicare, le modifiche restano in bozza. ### Contenuti multilingue Se un contenuto esiste in più lingue (es: same articolo in IT e EN): 1. **Aggiungi una riga per ogni lingua** 2. Usa gli stessi valori per: PROGETTO, TIPO, ANNO, TAG 3. Cambia solo: TITOLO, SOTTOTITOLO, COVER, URL, LINGUA 4. Pubblica entrambe le righe Esempio: | PROGETTO | TITOLO | LINGUA | URL | | --- | --- | --- | --- | | Marketing | "Come sfruttare l'IA" | IT | `/it/ia-guida` | | Marketing | "How to leverage AI" | EN | `/en/ai-guide` | ### Aggiornare un contenuto 1. Apri la tabella HubDB 2. Fai clic sulla riga da modificare 3. Aggiorna i campi 4. Clicca **"Publish"** --- ``` Fase 5: Risoluzione problemi ``` | Problema | Possibile causa | Soluzione | | --- | --- | --- | | **Un contenuto non compare sul sito** | Tabella non pubblicata dopo l'ultima modifica | Vai su HubDB, apri la tabella, clicca "Publish" in alto | | **Un contenuto compare nella lingua sbagliata** | Colonna LINGUA vuota o con valore non riconosciuto | Verifica che LINGUA sia riempita con IT/EN/DE/FR (esatto) | | **I filtri mostrano valori strani** (es: "marketing" minuscolo, "marketing-2", etc) | PROGETTO/TIPO scritti a mano invece di selezionati dal menu | Cancella la riga, creane una nuova, seleziona dal menu a tendina | | **L'immagine COVER non appare nella card** | Colonna COVER vuota | Carica un'immagine | | **Il modulo non carica nulla / pagina bianca** | Table ID nel codice del modulo non corrisponde più | Verifica il Table ID corrente (Ingranaggio → Table settings) e aggiorna il codice HTML | | **I filtri non funzionano** | JavaScript disabilitato o errore nella console | Controlla la console (F12 nel browser) per errori. Se persiste, contatta il referente tecnico | | **Un tag/tipo/progetto "strano" compare nei filtri** | Errore di digitazione / spazio in più | Pulisci la riga e ricrea con i valori corretti | ### Contattare il supporto Se il problema non è in questa tabella: - **Raffa** (raffa@andergroup.com) — lead di progetto - **Referente tecnico del progetto** — codice del modulo --- ``` Note tecniche ``` ### Come funziona il modulo 1. **Caricamento dati:** HubL (`hubdb_table_rows()`) legge i dati dalla tabella **lato server** → niente CORS, niente token API 2. **Filtri:** JavaScript lato client filtra le card già presenti nella pagina 3. **Paginazione:** Carica 18 elementi alla volta (numero configurabile nel JS) ### Performance - ✅ Ottimizzato: carica solo i dati rilevanti per la lingua - ✅ Responsive: funziona su mobile e desktop - ✅ SEO-friendly: i dati sono nel markup HTML, non nascosti in XHR ### Limiti - ❌ Max 5000 righe di dati (limite HubSpot HubDB) - ❌ I filtri lato client non sono SEO-crawlable (ma la prima pagina sì) --- ``` Checklist finale — prima di lanciare ``` - \[ \] Tabella creata e pubblicata - \[ \] Modulo creato e salvato - \[ \] Table ID nel codice del modulo verificato - \[ \] Modulo aggiunto alla pagina - \[ \] Almeno 3 contenuti di test inseriti - \[ \] Verifica che la pagina compaia correttamente su desktop e mobile - \[ \] Verifica che i filtri funzionino - \[ \] Verifica che i link URL siano corretti - \[ \] Verifica che le immagini COVER si vedano - \[ \] Pagina pubblicata - \[ \] Comunicato il Table ID al referente tecnico per future manutenzioni --- ``` Riassunto veloci per il team ``` ### 20 sec: Aggiungere un contenuto 1. HubSpot → Marketing → HubDB → apri tabella 2. "Add row" → compila i campi (PROGETTO da menu, TIPO coerente, LINGUA) 3. "Publish" ### Errori da evitare - ❌ Scrivere i valori di PROGETTO a mano (usa il menu) - ❌ Dimenticare di pubblicare - ❌ Lasciare LINGUA vuota - ❌ Titoli lunghissimi che rompono la card ### FAQ veloce - **Q:** Voglio cambiare il PROGETTO di una riga? **A:** Modifica la riga, seleziona il nuovo PROGETTO dal menu, pubblica. - **Q:** Voglio aggiungere una nuova opzione al filtro PROGETTO? **A:** Vai su Table settings → Table structure → seleziona colonna PROGETTO → aggiungi opzione. Pubblica la tabella. - **Q:** Il contenuto non si vede anche dopo aver pubblicato? **A:** Controlla che LINGUA sia riempita correttamente (IT/EN/DE). Se persiste, contatta Raffa. --- ``` Versione documento ``` - **v1.0** — Luglio 2026 - Basato su implementazioni Ander Group (2024–2026) - Mantieni aggiornato quando il processo cambia o si aggiungono funzionalità - [Admin Resources](https://www.hubspotlove.com/knowledge/admin-resources?hsLang=en) - [Branding Team](https://www.hubspotlove.com/knowledge/branding-team?hsLang=en) - [Performance Team](https://www.hubspotlove.com/knowledge/performance-team?hsLang=en) - [Website from A to Z](https://www.hubspotlove.com/knowledge/website-from-a-to-z?hsLang=en#main-content) - [HubDB](https://www.hubspotlove.com/knowledge/website-from-a-to-z?hsLang=en#hubdb) [![Chill listening crop-3](https://www.hubspotlove.com/hubfs/AND%20logo%20black.svg "Chill listening crop-3")](https://3927991.hs-sites.com/home-page-demo?hsLang=en) Help Center Copyright © 2026, Beetroot