Share
Quando ti stai preparando a lanciare un nuovo sito Web, un prodotto o un servizio, hai bisogno di un luogo dedicato per inviare potenziali clienti e clienti. Ma il tuo sito web potrebbe non essere ancora pronto per accogliere nuovi visitatori. In questi casi, un modello di pagina di destinazione HTML5 è la scelta perfetta.
Un modello HTML5 è veloce e facile da installare. A differenza di un CMS che può utilizzare un linguaggio di programmazione complesso, un modello HTML è facile da modificare anche per i principianti.
In questo tutorial, spiegherò i vantaggi dell'utilizzo di modelli di pagina di destinazione HTML e ti mostrerò come impostarne uno. Non preoccuparti: è veloce e indolore.
Come ho già detto, puoi installare e configurare le pagine di destinazione piuttosto rapidamente. Ma ci sono alcuni altri vantaggi nell'utilizzarne uno:
Ora che ho coperto i vantaggi dei modelli HTML, passiamo al tutorial.
Ai fini di questo tutorial, userò il modello Pure. È un modello pulito e minimale che può essere utilizzato per una varietà di scopi e viene fornito con un modulo di contatto di lavoro e il modulo di iscrizione MailChimp.
Oltre al modello, ci sono alcuni altri strumenti di cui avrai bisogno per poter modificare il modello e far vivere il tuo sito:
Prima di selezionare un modello per la pagina di destinazione, è necessario acquistare un nome di dominio e registrarsi per un piano di hosting. Al giorno d'oggi, è possibile acquistare un pacchetto di hosting a partire da $ 5 / mese e la maggior parte delle società di hosting fornirà il nome di dominio gratuito quando ti iscrivi per il loro piano. Alcune società di hosting offriranno spazio illimitato e larghezza di banda, e alcune limiteranno le risorse disponibili.
Assicurati di fare la tua ricerca e leggere alcune recensioni indipendenti sulle società di hosting che suscitano il tuo interesse. Vedere quanto sono soddisfatti i loro precedenti clienti può essere un ottimo indicatore dei servizi offerti e della qualità dell'assistenza clienti.
L'elemento successivo nell'elenco dovrebbe essere un client FTP. Ti permetterà di connetterti al tuo server di hosting e caricare i file del modello.
Esistono numerosi client FTP disponibili per vari sistemi operativi. FileZilla è una piattaforma FTP popolare che può essere utilizzata su tutte le piattaforme. È anche gratuito da scaricare e utilizzare.
Avrai bisogno di un editor di codice per modificare il tuo modello. L'uso di un editor di codice faciliterà la ricerca del codice da modificare poiché utilizzano l'evidenziazione speciale della sintassi. Puoi usare Notepad ++ se sei un utente Windows o TextWrangler se sei un utente Mac. Un'altra opzione è l'uso di Sublime Text 3 che può essere utilizzato sia su computer Windows e Mac, sia su Linux, e offre una prova gratuita.
Infine, dovrai acquistare e scaricare un modello di pagina di destinazione e preparare il contenuto che andrà sulla tua pagina di destinazione. È possibile trovare molti modelli di pagina di destinazione HTML su Envato Elements che sono stati progettati specificamente per le pagine di destinazione. Una volta trovato il modello che ti piace, acquistalo e scaricalo sul tuo computer. Assicurati di decomprimere la cartella e salvarla da qualche parte dove puoi facilmente accedervi.
Raccogli tutte le immagini e il testo che desideri aggiungere alla tua pagina di destinazione. Mantenere tutto in un unico posto renderà più semplice aggiungerlo al modello e trasferire le immagini sul server.
Con tutto ciò che è a posto, è il momento di personalizzare il modello e aggiungere le tue informazioni ad esso. Iniziamo familiarizzandoci con la struttura del modello.
Come accennato in precedenza, sto utilizzando il modello di pagina di destinazione in puro HTML.
Dopo aver decompresso la cartella, puoi vedere che il modello di pagina di destinazione bootstrap contiene diverse sottocartelle e un numero di file HTML. Ecco come appare la struttura:
Noterai anche diversi file HTML, che rappresentano diverse versioni dimostrative dei modelli di pagina di destinazione HTML. Puoi fare clic destro o doppio clic su ciascuno dei file HTML per aprirli nel tuo browser preferito e vedere come sono. Quando hai trovato la versione demo che ti piace, chiudi tutte le altre schede.
Lavorerò con il modello index-normal-scroll-countdown.html nel resto del tutorial.
Ora che il tuo modello di pagina di destinazione HTML scelto è aperto nel tuo browser, è ora di sostituire le informazioni con le tue. Il modo più semplice per farlo è capire quale parte del codice nel modello deve essere modificata. Iniziamo facendo clic con il pulsante destro sulla prima riga di testo sotto il contatore e facendo clic su Ispeziona.
Un nuovo pannello verrà visualizzato nella parte inferiore della finestra del browser. Noterai che mostra il codice HTML che costituisce il nostro modello sul lato sinistro e il CSS che fornisce gli stili per il modello sul lato destro.
Come puoi vedere dallo screenshot, la frase selezionata si trova tra il tag che rappresentano paragrafi. La maggior parte dei tag in HTML consistono in coppie di tag che hanno un tag di apertura e chiusura. Il contenuto deve essere inserito tra questi tag per essere visualizzato su una pagina Web:
opacity-0 "> Prima del lancio, divertiti a Opportunità molto limitata iscrivendoti alla nostra newsletter.
Clicca sul pulsante successivo per ottenere maggiori informazioni sul nostro progetto.
Per sostituire le informazioni fittizie nel modello, è sufficiente sapere quali tag contengono le informazioni che si desidera modificare. Quindi, è possibile trovare questi tag nell'editor di codice e inserire il proprio testo.
Ora che sai come trovare il codice che deve essere modificato, torna alla cartella dei modelli, fai clic con il pulsante destro del mouse sul file HTML scelto e seleziona Aperto con,e scegli l'editor di codice che hai scaricato in precedenza. Dovresti vedere il codice HTML completo che costituisce il tuo modello.
Scorri verso il basso l'editor di codice fino a trovare la stessa riga di codice che abbiamo evidenziato nel browser. Dovrebbe essere intorno alla linea 75-76. Quindi, fare clic all'interno del
tag, evidenzia il testo e sostituiscilo con il tuo.
Per modificare il resto del modello, puoi semplicemente ripetere i passaggi precedenti fino a quando tutte le informazioni che desideri siano incluse.
Puoi anche eliminare sezioni del modello se non vuoi che vengano visualizzate. Allo stesso modo, puoi anche duplicare sezioni se vuoi includere più informazioni. Seleziona semplicemente la parte del modello iniziando dal tag di apertura e evidenziando tutto fino al tag di chiusura per quella parte e eliminando o copiando e incollando la sezione sottostante.
Quando hai finito di sostituire il contenuto, è il momento di sostituire le immagini di esempio con le tue. Per semplificare questo processo, dai un'occhiata ai nomi delle immagini nella cartella img del modello e quindi dai un nome alle tue immagini usando gli stessi nomi. Quindi, seleziona tutte le immagini segnaposto, eliminale e posiziona le immagini nella cartella img.
Ora è il momento di modificare l'aspetto del modello e modificare gli stili in CSS. Per impostazione predefinita, il modello Pure viene fornito con diversi fogli di stile per la versione scura e leggera del modello:
Per scoprire quale foglio di stile devi modificare, guarda il tuo file HTML nell'editor di codice e cerca la linea che è simile a questa:
Vai alla cartella del tuo modello e apri il foglio di stile corrispondente nell'editor di codice.
Per vedere quale linea di codice e stile devi modificare, puoi ripetere lo stesso processo utilizzato per modificare l'HTML.
Nel browser, fai clic con il pulsante destro del mouse su qualsiasi elemento che desideri modificare e seleziona Ispeziona. Guarda a destra e vedrai gli stili usati per quella parte del modello:
Come puoi vedere dallo screenshot, il Ispettore ci mostra gli stili usati per il testo del paragrafo. Passa all'editor del codice e al file del foglio di stile. Scorri verso il basso fino a trovare una riga di codice che inizia con p.
Qui puoi cambiare i caratteri usati, le dimensioni del carattere e il colore del testo.
Se si desidera modificare il colore di sfondo del modello, cercare la riga di codice che indica il corpo seguito da parentesi graffe e quindi immettere il codice colore HEX dopo
la parte che legge il colore di sfondo.
Non dimenticare di salvare tutte le modifiche apportate facendo clic su Salva nell'editor di codice.
Dopo aver modificato il modello a tuo piacimento, dovrai caricarlo sul tuo server di hosting. Il tuo provider di hosting ti invierà un'email con tutte le informazioni necessarie per trasferire file con FTP.
Avvia il tuo programma FTP come FileZilla. Noterai la barra in alto nella quale puoi inserire il nome del server, il tuo nome utente e la password. Utilizzando le informazioni fornite dall'host, connettersi al server facendo clic su QuickConnect.
Sul lato sinistro della finestra di FileZilla, individuare la cartella con il modello sul computer e fare clic su di essa per espanderla. Seleziona tutti i file e le cartelle e trascinali sul lato destro dello schermo nella cartella public_html.
Una volta caricati tutti i file, apri il browser e inserisci il tuo nome di dominio. Congratulazioni, il tuo sito è ora attivo!
Una pagina di destinazione può fare meraviglie per la tua azienda o il tuo prodotto mentre ti stai preparando per il lancio. Ecco alcuni suggerimenti che ti aiuteranno a ottenere il massimo dai tuoi modelli di pagina di destinazione HTML e ti aiuteranno a creare hype:
Per ulteriori informazioni sui modelli di pagina di destinazione HTML o sui modelli di pagina di destinazione bootstrap, consulta queste esercitazioni:
Con l'aiuto di un modello HTML, è possibile ottenere rapidamente la pagina di destinazione bootstrap. Inizia selezionando uno dei nostri modelli di pagina di destinazione HTML da Envato Elements o uno dei modelli di pagina di destinazione bootstrap da ThemeForest. Quindi, utilizza il nostro tutorial per guidare l'utente attraverso il processo di installazione.
Accentsconagua