Come creare un layout in cinque minuti per il nostro blog

Fabrizio Cannatelli

Vediamo in pochi passi come creare un template per il nostro blog sulle piattaforme Blogger, WordPress e Joomla!

Benchè la maggior parte delle piattaforme di pubblicazione e dei Cms diano la possibilità di personalizzare il layout del proprio blog o sito, sono pochi gli utenti capaci di crearne uno. Questo perchè, tecnicamente la creazione di un layout non è cosa semplice.

Da questo punto di vista, il tool Artisteer si propone come uno strumento semplice, rapido e dagli ottimi risultati. Attraverso una serie di modelli personalizzabili tracciamo l’idea progettuale di partenza e modifichiamone tutti gli attributi grafici, compresi i caratteri e i colori. Al termine poi trasferiamo il progetto sul sito via FTP.

Andiamo sul sito di Artisteer e clicchiamo su Download scegliendo una versione. Clicchiamo su Salva File all’apertura della finestra di salvataggio e dopo aver scelto una cartella clicchiamo su Salva per eseguire il Download.

Clicchiamo sull’icona del file di setup, scegliamo la lingua e accettiamo i termini d’uso indicandogli la cartella di destinazione. La procedura prevede di estrarre e a installare tutti i file. Al termine clicchiamo sul pulsante Fine per lanciare il programma.

1. Creiamo un Layout personale definendo ogni singolo dettaglio dell’aspetto grafico, dai caratteri ai colori

Lanciamo Artisteer e clicchiamo sul pulsante Prova l’edizione Standard se stiamo usando la trial. Si apre, così, l’interfaccia del programma. Nella maschera introduttiva, clicchiamo sul pulsante relativo alla piattaforma sulla quale desideriamo pubblicare il layout.

La prima operazione per la creazione del nostro layout è scegliere l’idea progettuale di partenza. In alto a sinistra, clicchiamo ripetutamente sul pulsante Suggerisci disegno fino a individuare il tema che più riteniamo adatto al nostro sito.

Colori e Font .. Suggeriti

Clicchiamo, subito dopo, sul pulsante Suggerisci colori per trovare la combinazione che meglio si adatta ai nostri gusti e allo scopo del sito. Ciò fatto, provvediamo alla scelta della combinazione di font (caratteri), sempre cliccando ripetutamente sul relativo pulsante.

Impostiamo i Colori

Clic su Colori & Font, nel menu in alto per impostare le tinte. Cliccando, poi, su Colora Temi, si apre una tendina in cui scegliere, tra quelle presenti, la combinazione di colori, divise per tipo di sfondo. Man mano che scorriamo l’elenco, possiamo osservare l’anteprima.

..E la luminosità

Clicchiamo adesso sulle tre icone dei colori: possiamo modificarli singolarmente. Cliccando su Regola (icona a forma di lampadina), scegliamo una tra le numerose combinazioni di luminosità proposte. La voce Dipinto ci permette di accedere alle classiche slide di Luminosità e Saturazione.

Adesso i Caratteri

Dal riquadro Font, invece, possiamo scegliere la tipologia di caratteri, cliccando sulla voce Impostazioni e selezionando dall’elenco. Con un clic su Tipografia, possiamo modificarne la tipologia mentre con Valori possiamo agire sulle dimensioni del carattere.

Layout, Sfondo, Foglio…

Dal riquadro Idee, cliccando sul pulsante Suggerisci layout ripetutamente, possiamo scegliere la disposizione dei contenuti (numero delle colonne, posizione dei menu, ecc..). Clicchiamo su Suggerisci sfondo per modificare il tema di sfondo e su Suggerisci foglio per scegliere le dimensioni del formato.

Scegliamo il Layout

Clicchiamo sulla scheda Layout, risulta possibile impostare, dalla voce Imposta Layout, la posizione del menu principale. Cliccando, invece, su Colonne, abbiamo la possibilità di scegliere la suddivisione delle aree della pagina. In fondo al menu pop-up di questa voce, cliccando su Opzioni larghezza, possiamo agire sui valori.

Il Background

Clicchiamo a questo punto, sulla scheda Sfondo: possiamo, così, scegliere se adoperare una trama oppure una variazione di luce per lo sfondo. Per farlo, clicchiamo su una delle tre icone a disposizione. Cliccando su Luce, possiamo scegliere il tipo di effetto luminoso. La voce Immagine o trama ci permette di caricare e usare un file nostro.

Infine, la Pagina

Clicchiamo sulla voce Foglio. Selezionando una delle icone disponibili, possiamo impostare le dimensioni dell’area dei contenuti. Cliccando su Ampiezza, possiamo impostarne il valore in pixel. Con gli altri parametri, possiamo agire sui bordi, sugli spessori, sulla trasparenza, sulle distanze, sul colore di riempimento, sull’effetto ombra, sulla distanza dal limite superiore.

Intestazione Suggerita

Adesso facciamo clic in modo ripetuto sul pulsante Suggerisci Intestazione per cambiare lo sfondo oppure l’immagine dello spazio di intestazione del sito. Possiamo modificare l’immagine o la trama scelta e proseguire nelle impostazioni dello sfondo. Per farlo, clicchiamo sulla relativa voce del menu principale.

Se non ci piace Modifichiamola

Le frecce di selezione, posizionate accanto alle icone di sfondo, ci permettono di accedere a un menu pop-up nel quale scegliere la trama o l’immagine tra quelle disponibili. Cliccando su Posizione. possiamo spostare la parte inquadrata ed effettuare zoom. Clic su File, infine, per caricare un’immagine nostra.

2. Come modificare tutte le altre impostazioni del layout: menu, articoli, pulsanti, piè di pagina

Cliccando sulla scheda Menu, accediamo alle impostazioni di quello principale. Cliccando sulle icone possiamo sceglierne lo stile, oppure selezionarlo da un elenco, cliccando sulla voce Stile. Possiamo modificare i colori, i riempimenti e, persino, lo stile dei menu a discesa, agendo sui relativi pulsanti.

Articolo principale

Dalla scheda Articoli, invece, possiamo modificare le impostazioni relative al primo articolo presente in home page. Possiamo definire la grandezza e la posizione dell’immagine, indicare l’allineamento del testo e selezionare lo stile dei caratteri. Cliccando su Intestazione, infine, possiamo modificare le impostazioni del titolo.

Gli altri Post

Facciamo clic sulla voce Articolo Secondario e accediamo alle impostazioni degli articoli meno recenti presenti nella home page del nostro sito. Come per l’articolo principale possiamo modificarne tutte le impostazioni. Cliccando su Stile, ad esempio, abbiamo la possibilità di decidere il tipo di impaginazione degli articoli.

Le scelte secondarie

La scheda Menu verticale permette di modificare le impostazinoi relative al menu di secondo livello. Anche qui possiamo agire sui colori, forme, riempimenti, ecc. Con un clic su Stile, decideremo il tipo di intestazione e di disposizione dei contenuti del menu.

Pulsanti e Piè di Pagina

La scheda Pulsanti permette la modifica di tutte le impostazioni relative ai vari pulsanti presenti sul sito. La scheda Footer, infine, consente di cambiare le impostazioni del piè di pagina della homepage: riempimento, colore, tipo di bordo, stile ed allineamento del testo, trasparenza, ecc..

Salviamo ed Esportiamo

Al termine delle modifiche, clic sul pulsante Salva per memorizzare il progetto sul Pc ed apportare successivamente ulteriori modifiche. Cliccando su Esporta possiamo salvare il Template in una cartella, per il trasferimento via FTP, o in formato compresso per il caricamento del layout.

3. Vediamo come caricare il template creato in Joomla!

Per caricare il template appena creato portiamoci nel pannello di controllo di Joomla! e provvediamo ad autenticarci come amministratori. Dobbiamo caricare prima di tutto il template come estensione di Joomla. Dal menu in alto clicchiamo sulla voce Estensioni. Dal menu a discesa clicchiamo sulla voce Installa/Disinstalla. Se il file è in formato zip nell’area Carica file pacchetto clicchiamo sul pulsante sfoglia e selezioniamo il file. Clicchiamo prima su Apri e poi su Carica File & installa per effettuare il trasferimento. Se riscontriamo dei problemi di permessi esportiamo il template all’interno di una cartella. Al termine trasferiamo l’intero contenuto via client FTP nella cartella Templates presente nella directory principale di Joomla!. Dalla pagina delle estensioni clicchiamo su Template per individuare il template caricato e clicchiamo sul relativo radio button per selezionarlo. Andiamo in home page e visualizziamo la nuova grafica.

4. Vediamo come caricare il template creato in Blogger

Apriamo Artisteer ed entriamo nell’interfaccia principale del programma. Nella finestra Nuovo documento clicchiamo sul pulsante Blog su Blogger.com per proseguire la creazione del layout in modo che il risultato sia compatibile con tale piattaforma. Dall’interfaccia del programma clicchiamo su Suggerisci disegno e ripercorriamo tutti i passaggi sopra descritti. Salviamo il lavoro e trasferiamo il layout sul nostro blog cliccando su Pubblica. Nella nuova finestra immettiamo le credenziali di accesso al nostro account Blogger. Il programma tenta una connessione e propone il nome del blog. Scegliamo quello da modificare.

Immessi i dati clic su Pubblica. Inizia così il trasferimento dei file sul nostro account Blogger, del quale, visualizziamo l’avanzamento grazie a una barra. Al termine un messaggio evidenzia il corretto trasferimento e comparirà un link per guardare il risultato.

Artisteer si può scaricare in versione trial, la versione Home costa 49,95 dollari mentre la versione completa (Standard Edition) 129,95 dollari.