Autore Topic: Trasformiamo il nostro template Helix3 in One-Page!  (Letto 174 volte)

Offline fabrizium

  • Nuovo arrivato
  • *
  • Post: 4
    • Mostra profilo
Trasformiamo il nostro template Helix3 in One-Page!
« il: 29 Apr 2017, 18:18:30 »
Salve a tutti,
sono Fabrizio e questo é il mio primo topic e spero di essere nella sessione corretta per dare un mio piccolo contributo a questa bella comunitá. Ultimamente sono incappato in questa problematica utilizzando Joomla 3.6 con installato il framework Helix3 col relativo template shaper-helix. Come fare a costruire una home page divisa in sezioni dove ad ogni voce di menu corrispondesse una sezione della stessa pagina?...é facile ragazzi, basta avere un pó di Jqueries...un pó di html/php una birra fresca ed il gioco é fatto:


1)ingredienti principali: procuratevi questi 3 file jqueries che sono> jquery.nav.js, main.js, e lo smoothscroll.js che serve a rendere fluido e progressivo lo scorrimento.


Una volta recuperati questi 3 scripts caricateli nella cartella JS del vostro template Shaper_helix3..ok perfetto.
Ora giá che siete con filezilla sul vostro server apritevi l''index.php del vostro template che é situato proprio nella cartella radice del template..ci siete?Ok
Ecco quá premetto che quando modifico qualsiasi file, prima scarico la copia sul pc la modifico e prima di caricarla aggiungo un OR al nome di quel file perché cosí abbiamo sempre il nostro file originale e lo lascio lá cosí si fá presto a ripristinare la situazione!.


Aprite il file e nella sezione dove il codice php dice quali file js da caricare aggiungete i nomi completi dei file jqueries precedentemente caricati..in pratica li state richiamando nel file php
riga 141 o giú di li´troverete stá "roba", ho evidenziato i nuovi nomi dei file da aggiungere :


->addJS('bootstrap.min.js, jquery.sticky.js, main.js, jquery.nav.js, smoothscroll.js') // JS Files


Ok ci siamo quasi.
Andiamo nel nostro pagebuilder visto che questo FrameW. lo ha incluso e andate ad aprire la Home Page.
Editate la "row" o riga che corrisponde alla sezione che volete linkare nel menu...quindi nel tab General in basso vi troverete un'interessante campo che é il section ID che semplicemente attribuisce un identificativo unico a questa parte della pagina, ecco lá dentro inserite il nome che corrisponderá anche alla voce di menu..."miasezione"....il PageB. poi nell'output creerá un ID  lo vedrete anche con l'editor di firefox..un bel <div id="miasezione"..e quindi poi lí potrete anche applicare le vostre regole css per quella zona, ok ma questa é un'altra faccenda.


Una volta scritto il nome nella sezione-id del builder chiudete e salvate ed andiamo alle voci di menu, essí perché la nostra voce menu deve andare da qualche parte:-)


Nelle voci di menu, ammettendo che giá le abbiate create dovrete andrete ad applicare la tipologia URL esterno alla vostra voce e quindi nel link sottostante inserirete...cosa?:-)..faccio una parentesi:


se i vostri menu non includono voci esterne inserite solo #miasezione
se i vostri menu hanno un link esterno dovete mettere il percorso assoluto, altrimenti una volta aperto il link esterno non tornate piú agli altri links:-))..per tanto: htttp//:www.miosito.xxx/index.php#miasezione
Cmq col percorso assoluto funziona sempre, period!.
Cancellate le cache del browser con ctrl-shift-del o da browser e divertitevi con vostro Helix one page.


Spero tanto di essere stato chiaro!


ciao e a presto


Fabrizio





 

Torna su