Il primo approccio ad Helix3

Helix3 è un framework per Joomla! che ti consente di creare siti web in modo veloce ed intuitivo, attraverso funzionalità e opzioni predefinite.
È adatto sia per i principianti che vogliano creare siti responsive senza coding, sia per web designer esperti che desiderino accelerare il processo di sviluppo, avendo sotto mano un sito già preimpostato ed altamente personalizzabile.

Questa è una guida al primo approccio con Helix3, passeremo in rassegna le funzionalità base del framework di casa JoomShaper.
Se vuoi conoscere dei Tricks and Tips su Helix3, clicca qui.


Come si installa Helix3

Helix3 si installa come una qualunque estensione di Joomla. Recati in primo luogo a questo indirizzo; Bisogna essere registrati su JoomShaper per poter scaricare Helix3. L'iscrizione è gratuita e semplicissima. Una volta registrato e loggato ti si sbloccheranno i buttons di download.

guida helix3 page download

Come puoi vedere JoomShaper ti fornisce due opzioni:

  • Quickstart Pack
  • Template

Il Quickstart Pack ti occorre se hai un dominio in cui non è installato Joomla. Questo package comprende infatti anche i componenti del CMS.
Nella maggior parte dei casi,quindi, occorre scaricare semplicemente il template e installarlo nel tuo sito in Joomla.
Puoi scaricare il package sul tuo pc oppure copiare l'url del template facendo l'installazione da url.
Recati quindi in Estensioni>Gestione>Installa.
Se hai scaricato il pacchetto in locale clicca sulla scheda "Installa da file - pacchetto compresso" e carica il file .zip.
Se invece preferisci installarlo con l'url, sulla pagina download di JoomShaper fai tasto destro sul bottone di download e clicca su "Copia indirizzo link".


 Dopodiché ritorna nell'area installazione estensioni di Joomla, clicca sulla scheda "installa da url" ed incolla il link.
Ora Helix è installato, e puoi visualizzarlo e renderlo predefinito in Estensioni>Template>Stili.


La Dashboard di Helix3

Dopo aver installato Helix3, cliccando su shaper_helix3-predefinito sarà possibile accedere alla Dashboard.
La pagina che vi si apre ha nove schede.

La scheda Basic

Nella scheda basic è possibile modificare varie impostazioni del sito.

 

Nella prima sezione, taggata Global, puoi attivare un Pre loader, ovvero la classica iconcina di caricamento, ogni volta che c'è un refresh del browser o si naviga su un'altra pagina.

Cos'è il preloader? Eccotene un esempio:

guida helix3 pre loader esempio

 

Puoi poi attivare anche il Go to top, ovvero un'icona che permette all'utente di ritornare all'inizio della pagina.

 guida helix3 go to top

 

 

Nella seziona Header è possibile attivare lo Sticky Heder, per farsì che la barra del menu avanzi in basso con lo scroll del mouse. Puoi poi impostare un boxed layout, ovvero ridurre la larghezza del body-content

Nella casellina Faviscon, puoi inserire un logo che diventi l'iconcina che vedi di fianco al title del tuo sito, nella scheda del Browser.

guida helix3 header boxed layout

Nella sezione Logo possiamo inserire la nostra immagine logo (attenzione alle dimensione vi consiglio altezza massima di 100px) oppure inserire una scritta, facendo click su Text.

Se posizionate il logo in una position in cui è presente un modulo personalizzato, potete decidere se il logo venga visualizzato prima o dopo il modulo personalizzato.

Inserite, anche lo stesso logo, per mobile (tutti gli smartphones e tablets) e retina (iphone), Helix3 provvederà a ridimensionarlo secondo lo screen.

guida helix3 basic logo

Possiamo, nella sezione Background image, semplicemente inserire un'immagine di background e le sue caratteristiche. Se volete che l'image background non sia posizionata anche nel body content, a meno che non lo facciate in CSS, c'è bisogno di selezionare il boxed-layout. Vi consiglio poi di mettere l'Attachment su fixed, così da creare un effetto parallasse.

guida helix3 body background footer

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Le sezioni Footer e Social Icons ci permettono rispettivamente di inserire i dati del copyright e attivare le social icons, impostando le destinazioni.

Nota che se vuoi inserire immagini nel footer non puoi farlo dal basic ma devi farlo creando un modulo personalizzato e posizionarlo nella posizione footer1, oppure, come vedremo quando parleremo del layout manager, in una posizione che avrai impostato creando il layout del sito. 

Infine abbiamo una sezione per inserire i Contatti; una sezione in cui possiamo impostare una pagina Coming Soon, nel caso il sito fosse off-line; una sezione per modificare la 404 ErrorPage, inserendo il logo e un background (se ti interessa sapere come creare una Custom ErrorPage 404 clicca qui).

guida helix3 coming contact error page

La scheda Presets e Layout Manager

In questa scheda è possibile sia impostare dei presets di colore preimpostati, oppure impostare dei valori custom.

C'è da dire che personalmente ho notato che Helix3 non aggiorna facilmente le impostazioni di colore dalla Dashboard, senza ricorrere a ripulire la catche sia di Joomla! che del browser, quindi il mio consiglio è cercare di utilizzare quanto più possibile il CSS.

guida helix3 presets

In Layout Manager siamo nel cuore del nostro sito.

Quello che in un semplice template visualizzeremmo con il position preview nella lista dei template, con Helix3 possiamo personalizzarlo senza intervenire sul codice distribuendo le posizioni del nostro sito, impostando colonne (columns) e righe (rows), come se fosse una tabella per intenderci.

guida helix3 layout manager
Con Add Row possiamo inserire una nuova riga (1); Add columns ci permette invece di inserire nuove colonne (2).
Clicchiamo su Settings (3) così da accedere alla sezione Row Settings. Qui possiamo dare un nome alla nostra row e customizzarla impostando un background color o una background image, e relativi parametri. Possiamo inoltre impostare link color e hover color (ovvero, per chi non lo sapesse, rispettivamente i colori dei link e dei link passandoci il mouse sopra).

guida helix3 row settings
Cosa importante è che si può decidere la visualizzazione responsive nascondendo la singola row solo su determinati device.
Vi faccio un esempio: mettiamo il caso che volessimo inserire in una row preimpostata un slide-show, che sappiamo non essere responsive, possiamo, grazie alle funzioni messe a disposizione in row settings, escludere tale slide-show da determinati devices.
Si può infine impostare il margin e il padding della vostra row, o assegnare un suffisso di classe per poterla personalizzare col CSS.


Clicchiamo ora sull'icona 4, così da aprire la casella Column Settings.

guida helix3 column settings
Qui si può in primo luogo rendere la sezione Component Area, ovvero la posizione in cui verrà visualizzato il contenuto dei vostri articoli, nel caso non sia stata già assegnata ad un altra colonna.
Possiamo assegnare una posizione alla singola colonna, cosicchè quando ci assegneremo un modulo, Helix3 lo posizionerà automaticamente lì.

Anche per la singola colonna poi abbiamo la gestione della responsive view, e possiamo anche assegnare, grazie alle classi del Grid System di Bootstrap 3, un diverso width a seconda del device.
Qualora vogliate approfondire l'argomento, potete consultare la doc di Bootstrap.
Se volete invece sapere come creare un layout per lingue RTL, consultate il mio articolo Ticks and Tips.

Le schede Menu e Typography

La scheda Menu è molto intuitiva: ci permette infatti di decidere qual'è il menu principale, e se visualizzare sia quello in offcanvas che quello header.
Possiamo poi decidere delle animazioni per l'apertura dei sottomenu e del menu off canvas.

La scheda Typography gestisce i fonts del tuo sito.

guida helix3 typography
Puoi stabilire per ogni tag:

  1. La font-family;
  2. Lo spessore del font (font-weight);
  3. Il font-subset, così da variare le funzionalità tipografiche del singolo tag;
  4. Il font-size del tag;
  5. Potete decidere poi se attivare o disattivare la personalizzazione, cosicchè Helix3 passerà automaticamente ai web safe fonts.

Se vi interessa sapere come inserire un custom font in Helix3, date sempre uno sguardo al mio articolo Tricks and Tips.

La scheda Custom Code

Nella scheda Custom Code è possibile inserire codice custom nella sezione head, per esempio lo script di analytics o il pixel di facebook e gli open graph; inserire nuovi tags e div HTML che saranno posizionati prima della chiusura del tag body; puoi poi personalizzare il CSS con la sezione Custom CSS ed aggiungere JS scripts nella textarea Custom Javascript.

 guida helix3 custom code

Le schede Advanced, Blog e Assignment

La scheda Advanced riguarda le compressioni dei file CSS e JS, e si può attivare la compilazione dei file LESS in CSS se vi siete creati un file custom.less.
Personalizza poi le impostazioni della scheda Blog, se stai costruindo un Blog-site.
La scheda Assignment ti permette di assegnare o non assegnare le voci del menu al singolo template: consigliata insomma in casi di siti multilingua.