Le formule magiche

Basic HTML5 layout

Layout HTML5 di base

Information on accessing these resources Informazioni sull'accesso a queste risorse

Member contact form Modulo di contatto per i membri
Per aiuto e segnalazioni

Membership index

NOTICES

2023/04/28 - The template images have been uploaded with the support of the new avif format to meet Google's parameters. 2022/03/31 - For custom templates with contact form: on mobile devices, the user agent style sheet can contain rules that determine the color of the input fields. Recommended to add the text color (with the preferred color) for the .button class in the contact.css file (Ex: color: # 000 !important;).
2022/02/28 - The cookie consent script, used in the templates, has been updated to comply with the new browser safety regulations.

COMUNICATI

28/04/2023 - Le immagini dei template sono state caricate con il supporto del nuovo formato avif per soddisfare i parametri di Google. 31/03/2022 - Per i template personalizzati provvisti di modulo di contatto: sui dispositivi mobili, il foglio di stile dello user agent può contenere regole che determinano il colore dei campi input. Consigliato aggiungere il colore del testo (con il colore preferito) per la classe .button nel file contact.css (Es: color: #000 !important;).
28/02/2022 - Lo script per il consenso dei cookie, in uso nei template, è stato aggiornato in ottemperanza alle nuove norme di sicurezza dei browser.
NOTE: NOTA: Downloads reserved for members can also be made without registration with a free donation in support of the site. I download riservati ai membri possono essere effettuati anche senza registrazione con una donazione libera in sostegno del sito.

List of downloadable sresources with donationLista delle risorse scaricabili con donazione

Basic layouts ready to customize.

Layout di base pronti da personalizzare

INTRODUCTION: layouts and templates are periodically updated to always comply with Google parameters. For this reason, there may be slight differences between the preview graphics and the downloaded products. PREMESSA: i layout e i template vengono periodicamente aggiornati per essere sempre conformi ai parametri di Google. Per questo motivo, potrebbero esserci leggere differenze tra la grafica delle anteprime e i prodotti scaricati.

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

Content: Contenuto:
  • index.html
  • pag1.html (only parallax layoutsolo nei layout con parallax)
  • styles foldercartella styles
  • js foldercartella js
  • img foldercartella img
  • doc foldercartella doc (privacy, cookie informative)

Functionality: Funzionalità:
  • Cookie script
  • Adjust iFrames
  • Social buttons

Options: Opzioni:
  • Summary of page titles Sommario dei titoli della pagina
  • Google Search Console connection Connessione a Google Search Console

Indications:

Indicazioni:

The Search Console verification meta tag must be inserted in the index page, before closing the </head>, where indicated. Il metatag di verifica di Search Console va inserito nella pagina index, prima della chiusura </head>, dove indicato.
The summary can be inserted in the pages with this code: 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-->

The iFrames are automatically made responsive thanks to the special script found in the utils.js file.
For the script to work, the base width and height must be indicated in the iFrame.
Example with iFrame for YouTube: 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>

Social buttons

I bottoni dei social

The social buttons are implemented with an overlay function and global url to be set in the script at the bottom of the page. Links are not working in preview.
UPDATE on November 15, 2022. Some changes have been made to meet the new Google Speed Insights metrics.
The html code of the buttons must be compiled, as follows, with the addition of the title tag and href="#".
The href="#" value should not be changed, except in the buttons for Instagram and YouTube where the URL of the relative page must be entered, as these social networks do not have a sharing link. I bottoni dei social sono implementati con funzione overlay e global url da impostare nello script a fondo pagina. I collegamenti non sono funzionanti in anteprima.
AGGIORNAMENTO al 15 novembre 2022. Sono state apportate alcune modifiche per soddisfare i nuovi parametri di Google Speed Insights.
Il codice html dei bottoni va compilato, come di seguito, con l'aggiunta del tag title e di href="#".
Il valore href="#" va lasciato così com'è. Fanno eccezione i bottoni di Instagram e YouTube nei quali va compilato inserendo l'URL della pagina relativa, non avendo questi social dei codici di condivisione.
<a title="facebook" class="fb-btn icon icon-facebook" href="#"></a>

Cookie script reminder:

Promemoria cookie script:

Find all the information on the implementation of the script for blocking cookies by downloading the complete zip file on the page "Various resouces" Trovate tutte le indicazioni sull'implementazione dello script per il blocco dei cookie scaricando il file zip completo nella pagina "Risorse varie"

Mobile menu settings

For templates: two columns, three columns and full page.
It is possible to modify the style rules in order to open the dropdown menu by moving the page content downwards, rather than superimposing the menu items on the content.
To obtain this result, just activate the rules indicated and obscured in the style sheet.

Impostazioni menu su mobile:

Per i template: due colonne, tre colonne e full page.
È possibile modificare le regole di stile al fine di far aprire la tendina del menu spostando il contenuto della pagina verso il basso, anzichè sovrapporre le voci di menu al contenuto.
Per ottenere questo risultato, basta attivare le regole indicate e oscurate nel foglio di stile.

13a-Classic HTML5 layout

13a-Layout HTML5 classico

Preview + download


13b-Two columns HTML5 layout

13b-Layout HTML5 a due colonne

Preview + download


13c-Three columns HTML5 layout

13c-Layout HTML5 a tre colonne

Preview + download


13d-Full page HTML5 layout

13d-Layout HTML5 full page

Preview + download


13e-Sidebar HTML5 layout

13e-Layout HTML5 con sidebar

Preview + download


13f-Horizontal scroll layout

13f-Layout HTML5 a scroll orizzontale

Preview + download


NOTE: currently (2020), the parallax scroll effect is not properly supported by the Apple Safari browser, both desktop and mobile.
For this reason, there is a script, in the advanced parallax code, that disables the effect for Apple devices. NOTA: attualmente (2020), l'effetto scroll del parallax non è supportato correttamente dal browser Safari dei dispositivi Apple, sia desktop che mobile.
Per questo motivo, nel codice dei parallax avanzati, c'è uno script che annulla l'effetto per tali dispositivi e che potrà essere rimosso quando non più necessario.

13g-Simple HTML5 parallax layout

13g-Layout HTML5 parallax semplice

Preview + download


13h-Simple HTML5 parallax layout with double background

13h-Layout HTML5 parallax semplice con backgound doppio

Preview + download


13i-Advanced HTML5 paralax layout

13i-Layout HTML5 parallax avanzato

Preview + download




NOTE: in the "Simple parallax layout", the scrolling panoramic image of bg can be replaced by a still normal image, omitting the rules indicated in red (style.css) 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;

Custom template examples (downloadable)

Esempi di template personalizzati (scaricabili)

  • Home page + 1 page.
  • Docs pages
  • Contact form
  • Social buttons with global url
  • Cookie script
  • Home page + 1 pagina.
  • Pagine documenti
  • Modulo di contatto
  • Bottoni social con url globale
  • Script per il blocco dei cookie

13l-Template 1

Preview + download

13m-Template 2

Preview + download

13n-Template 3

Preview + download

13o-Template 4

Preview + download


Useful files

File utili

Mappa html

html map example (member only)

Special files

File speciali

File htaccess

The htaccess file contains settings for the server. It is iimportant for any website on NCSA compatible servers that support mod_write modules (like Apache). Il file htaccess contiene impostazioni per il server. È importante per qualunque sito web su server NCSA compatibili che supportano moduli mod_write (come Apache).
I provide an example to download, with the premise that it must be submitted to the approval of a technician of your hosting service. Fornisco un esempio da scaricare, con la premessa che deve essere sottoposto all'approvazione di un tecnico del vostro servizio di hosting.
htaccess example (member only)

File robots.txt

The robots.txt file contains settings for the search engines. Il file robots.txt contiene impostazioni per i motori di ricerca.
I provide an example to download that contains the site scan permission (Disallow :) with the exclusions of some folders and the indication of the path of the sitemap.xml Fornisco un esempio da scaricare che contiene il permesso di scansione del sito (Disallow:) con le esclusioni di alcune cartelle e l'indicazione del percorso della sitemap.xml
robots.txt example (member only)

File sitemap.xml

The sitemap.xml contains the list of site pages to be crawled and indexed. La sitemap.xml contiene l'elenco delle pagine del sito da scansionare e indicizzare.
I provide an example to download and complete with all the pages of the site for which indexing is required.
Also: example of images sitemap, example of index sitemap (for multiple sitemaps).
For videos see the official guide: https://developers.google.com/search/docs/advanced/sitemaps/video-sitemaps
The sitemap can then be sent to Google Search Console, or to other search engines, in addition to inserting the crawl indication in the robots.txt file. Fornisco un esempio da scaricare e completare con tutte le pagine del sito per le quali è richiesta l'indicizzazione.
Inoltre: esempio di sitemap per immagini, esempio di sitemap index (per più sitemap).
Per i video consulta la guida ufficiale: https://developers.google.com/search/docs/advanced/sitemaps/video-sitemaps?hl=it
La sitemap potrà poi essere inviata a Google Search Console, o ad altri motori di ricerca, oltre ad inserire l'indicazione di scansione nel file robots.txt.
sitemap.xml example (member only).

Membership index


Argomenti del sito correlati:
Mappa del sito
Mappa del sito