le formule magiche

I layout di base

Basic layouts

Layout di base pronti da personalizzare.

Caratteristiche:
  • HTML5, CSS, JS
  • W3C validation
  • Mobile responsive

Contenuto:
  • index.html
  • pag1.html (solo layout parallax)
  • cartella styles
  • cartella js
  • cartella img
  • cartella doc (privacy, informativa)

Funzionalità:
  • Cookie script
  • Google analytics
  • Adjust iFrames
  • Social buttons

Opzioni:
  • Sommario titoli pagina
  • Collegamento a Search console

Indicazioni

Il metatag di verifica di Search Console va inserito nella pagina index, prima della chiusura </head>, dove indicato.
Il codice di Google Analytics si trova nel file utils.js, nella cartella js. Basta inserire il proprio ID al posto delle x in questa linea:
ga('create', 'XXXXXXXXXXXXXXX', 'auto');

Il sommario può essere inserito nelle pagine con questo codice:
<!-- sommario-->
     <div class="summary shadow-page">
       <span>Sommario:</span>
         <ul id="tocList">
         </ul>
     </div>
<!-- end sommario-->

Gli iFrame sono resi automaticamente responsive grazie allo script apposito che si trova nel file utils.js.
Affinchè lo script possa funzionare, è necessario che nell'iFrame siano indicate la larghezza e l'altezza di base.
Esempio con iFrame per YouTube:
<iframe width="600" height="400" allowfullscreen src="https://www.youtube-nocookie.com/embed/XXXXXXXXX" >
</iframe>

Promemoria cookie script:

Fonte: https://github.com/Corsidia/it_cookie_law

Per creare un banner semitrasparente a tutta pagina che impedisca l'interazione dell'utente, cambio il primo blocco di regole di stile (style.css) in questo modo:
.cookies-container {
    width: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    background-color: rgba(0, 0, 0, 0.8);
    font-family: 'arial', sans-serif;
    padding: 1em 1.8em;
    margin: 0px;
    position: fixed;
    left: 0px;
    top: 0px;
    box-sizing: border-box;
    z-index: 999999;
    height: 100vh ;
}


Per creare un pulsante che cancella il cookie di consenso, uso questo codice:
<input type="button" onclick="eraseCookie()" value="Delete Cookie">


Avviso per IE vecchi che non supportano jQuery:
<!--[if lte IE 6]>
<div style="border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; padding: 10px; position: relative; font-family:'arial', sans-serif;">AVVISO: Stai usando un browser obsoleto e il blocco dei cookie non pu&ograve; essere attuato tramite lo script in uso su questo sito.
<br>Tutti i cookie del sito verranno, quindi, caricati sul tuo browser.
<br>Potrai, se vuoi, cancellarli manualmente dopo aver lasciato il sito.
<br>Per info leggi: <a href="/doc/informativa">Informativa estesa</a>
<div style="position: absolute; right: 4px; top: -18px"><a style="text-decoration:none; font-size: 3.0rem; padding:0" href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'>&Cross;</a></div></div></div>
<![endif]-->


Layout classico

Anteprima
Anteprima + download (member only)

Layout a due colonne

Anteprima
Anteprima + download (member only)

Layout a tre colonne

Anteprima
Anteprima + download (member only)

Layout full page

Anteprima
Anteprima + download (member only)

Layout parallax semplice

Anteprima
Anteprima + download (member only)

Layout parallax avanzato

Anteprima
Anteprima + download (member only)



NOTA: nel "Layout parallax semplice", l'immagine panoramica di bg a scorrimento può essere sostituita da un'immagine normale ferma, omettendo le regole indicate in rosso (style.css):
.parallax {
    height: 600px;
    background-attachment: fixed;
    background-size: cover;
    background-image: url("../img/bg-para1.jpg");
    -webkit-animation: parallax 500s linear infinite;
    animation: parallax 500s linear infinite;


Esci dalla membership

Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 

Modulo di contatto per i membri

Argomenti del sito correlati: