Carrello
0
0,00 €
Come inserire una pagina HTML già pronta
Puoi integrare una pagina HTML già creata nel sito usando il builder no-code in pochi passaggi. In genere hai due opzioni: caricare il file HTML oppure copiare e incollare il codice in un blocco dedicato. Prima di iniziare, assicurati che il tuo file sia ben strutturato (doctype, <head>, <body>) e che eventuali risorse esterne (CSS, immagini, script) siano raggiungibili online.
1. Caricamento del file HTML
Se il builder lo permette, vai nella sezione dedicata ai file o alle pagine personalizzate e carica il tuo file .html. Dopo il caricamento, il sistema ti mostrerà un percorso o un URL (ad esempio /pagina-personalizzata.html) che potrai usare nei menu o nei link interni del sito.
2. Copia/incolla del codice HTML
In alternativa, crea una nuova pagina o sezione e aggiungi un blocco “codice” o “HTML personalizzato”. Apri il tuo file con un editor di testo, copia tutto il codice HTML e incollalo nel blocco. Salva le modifiche: il builder mostrerà l’anteprima della pagina direttamente nell’editor.
3. Impostazione del percorso / URL
Dopo aver caricato il file o inserito il codice, imposta un URL chiaro e breve (es. /landing-offerta). Di solito puoi farlo nelle impostazioni della pagina: qui scegli anche se la pagina deve comparire nel menu principale, nel footer o solo tramite link diretto.
4. Anteprima e test
Usa la funzione di anteprima del builder per controllare come appare la pagina. Verifica che testi, immagini e link funzionino e che non compaiano errori di stile. Prova la pagina anche da dispositivi diversi (desktop, tablet, smartphone) per assicurarti che sia leggibile e usabile.
Limitazioni e requisiti tecnici
- CSS esterni: se la tua pagina usa file CSS esterni, assicurati che i percorsi siano assoluti (es. https://tuodominio.com/css/stile.css) o che i file siano caricati nello stesso spazio del sito. Alcuni builder bloccano o modificano i link a risorse esterne.
- Script JavaScript: non tutti gli script sono consentiti. Alcuni builder limitano <script> per motivi di sicurezza o potrebbero rimuoverli automaticamente. Funzioni avanzate (tracciamenti, widget, librerie pesanti) potrebbero non funzionare o richiedere l’inserimento in aree specifiche (es. “codice nel <head>” o “prima di </body>”).
- Responsive design: il builder non può rendere responsive un HTML che non lo è. Assicurati che la tua pagina usi un layout flessibile, il meta tag viewport e media query CSS. In caso contrario, su mobile potrebbero comparire barre di scorrimento orizzontali o testi troppo piccoli.
- Conflitti di stile: i CSS del tuo HTML possono entrare in conflitto con quelli del tema del sito (colori, font, margini). Per ridurre i problemi, usa classi specifiche e nomi univoci, evitando regole troppo generiche come body { ... } o p { ... }.
- Limiti del builder: alcuni elementi (popup, moduli complessi, integrazioni esterne) potrebbero non essere supportati o richiedere piani a pagamento. Controlla sempre la documentazione del builder per sapere quali tag, script e dimensioni di file sono consentiti.
Una volta verificato tutto in anteprima, pubblica il sito: la tua pagina HTML sarà raggiungibile all’URL impostato e potrai collegarla da pulsanti, menu o banner come qualsiasi altra pagina creata con il builder.
Guida rapida per personalizzare la tua pagina HTML
Segui questi passaggi per integrare in modo ordinato la tua pagina HTML esistente nel template del sito, collegare correttamente i fogli di stile, aggiungere immagini, adattare il layout e verificare la compatibilità mobile.
- 1. Collega il foglio di stile principale del sito
Apri il file HTML e, all’interno del tag<head>, aggiungi il link al CSS del template del sito, ad esempio:<link rel="stylesheet" href="/css/main.css">. Assicurati che il percorso sia corretto rispetto alla posizione del file HTML. - 2. Rimuovi o unifica i CSS duplicati
Se la pagina ha già un proprio CSS, valuta se mantenerlo, rinominarlo o incorporarlo nel foglio di stile principale. Evita regole duplicate o in conflitto (stessi selettori con proprietà diverse) per non ottenere risultati grafici imprevisti. - 3. Inserisci le immagini con percorsi coerenti
Posiziona i file immagine nella cartella prevista dal template (ad esempio/images/). Nel codice HTML usa percorsi relativi coerenti, ad esempio:<img src="/images/header-banner.jpg" alt="Descrizione immagine">. Compila sempre l’attributoaltper accessibilità e SEO. - 4. Adatta la struttura al layout del template
Individua nel template i contenitori principali (ad esempio.container,.row,.col). Avvolgi il contenuto della tua pagina all’interno di questi elementi, mantenendo la stessa gerarchia di sezioni, colonne e blocchi usata dal resto del sito per ottenere un aspetto uniforme. - 5. Usa le classi esistenti per titoli, testi e pulsanti
Applica alle tue sezioni le stesse classi tipografiche del template (es..page-title,.btn-primary,.text-muted). In questo modo colori, font e spaziature saranno coerenti con le altre pagine senza dover riscrivere nuove regole CSS. - 6. Rendi il layout responsive con la griglia del sito
Se il template usa un sistema a griglia (ad esempio classi tipo.col-12 .col-md-6), applicalo anche ai tuoi contenuti. Suddividi le sezioni in righe e colonne seguendo lo stesso schema, così il layout si adatterà automaticamente a desktop, tablet e smartphone. - 7. Aggiungi il meta tag per il viewport
Nel tag<head>verifica la presenza di:<meta name="viewport" content="width=device-width, initial-scale=1">. Questo tag è essenziale perché la pagina venga visualizzata correttamente sui dispositivi mobili. - 8. Verifica la compatibilità mobile con gli strumenti del browser
Apri la pagina nel browser, attiva gli strumenti di sviluppo (ad esempio F12) e usa la modalità di simulazione dispositivi. Controlla che testi, immagini e pulsanti siano leggibili, che non ci siano scroll orizzontali e che gli elementi cliccabili siano sufficientemente distanziati. - 9. Testa su più browser e risoluzioni
Visualizza la pagina su almeno due browser diversi (es. Chrome e Firefox) e prova varie dimensioni della finestra. Correggi eventuali problemi di allineamento o sovrapposizione regolando margini, padding e larghezze in CSS. - 10. Mantieni il codice pulito e commentato
Rimuovi porzioni di codice non più utilizzate e aggiungi brevi commenti dove hai fatto modifiche importanti (es.<!-- Adattamento layout al template principale -->). Questo renderà più semplice aggiornare la pagina in futuro.
