Da quando si è presentato ai programmatori online come linguaggio in grado di definire la formattazione o il layout delle pagine, il CSS è diventato un fedele compagno del più antico HTML, capace di presentare in modo più interattivo i contenuti di una pagina. Possiamo pensare all’HTML come l’ossatura vera e propria su cui si basa il sito mentre il Cascading Style Sheets, prima definito per brevità CSS, come invece l’involucro, la pelle che rende unica la presentazione della pagina agli utenti. Avendo ben separati questi due aspetti il lavoro di programmazione risulta estremamente facilitato e chiaro sia agli utenti che agli autori delle pagine, che hanno anche la possibilità di riutilizzare il codice e di averlo ben separato dal resto in caso sia necessaria una manutenzione dello stesso. Hubspot, il famoso CMR, è la soluzione in grado di combinare i due linguaggi, permettendo in modo più semplice di creare file e successivamente modificarli sia per l’una che per l’altra tipologia. Ma vediamo come poterlo fare in modo semplice e veloce.
Creare un file CSS su HubSpot
Partiamo intanto col vedere come HubSpot rende estremamente facile la creazione di fili in CSS, un risultato ottenibile in pochi e semplici passa, che sono:
- Accedendo al proprio account HubSpot ci si dovrà recare nella sezione dedicata al Marketing e successivamente fare click prima sulla voce File e Modelli e poi su quella che riporta la scritta Strumenti di progettazione;
- Facendo click sull’icona che riporta l’immagine del carrello nella zona in alto a sinistra si potrà espandere il menù, in modo da visualizzare l’opzione File che dovrà essere cliccata scegliendo Nuovo File;
- Verrà aperta ora una nuova scheda di dialogo in cui si dovrà scegliere come soluzione Foglio di stile CSS di cui verrà richiesto di inserire il nome prima di poter finalizzare l’operazione cliccando su Create.
Modificare il file CSS su HubSpot
È possibile una volta creato il file o anche in un secondo momento procedere a modificarlo direttamente nell’editor di codice. Un editor che oltre ad includere il classico CSS permette anche di inserire codici HubL e macro che contribuiscono a rendere più ordinata la pagina e quindi più semplice la manutenzione. Prima di poter passare alla pubblicazione delle modifiche, HubSpot permette anche di vedere un’anteprima del HubL, tramite il pulsante Show output in cima all’editore, ed evidenzia anche tutti gli errori di codice. Errori che verranno visualizzati nella console in fondo all’editor, sul lato sinistro dello schermo e nella barra di scorrimento di destra, facilmente riconoscibili perché evidenziati in rosso. Una volta apportati i dovuti aggiustamenti sarà possibile fare clic su Publish changes in alto a destra nella pagina con la possibilità anche di chiamare questo foglio di stile in un altro modello codificato, copiando l’URL del foglio e cliccando Actions per poi fare Copy public URL nel menu della barra laterale sinistra.