Ottenere il tuo sito Web attivo e funzionante non deve essere complicato. Infatti, è possibile creare un sito aziendale semplice ma efficace con l'aiuto di un modello di sito Web di una pagina. L'utilizzo di un modello a una pagina ti consente di dare alla tua attività una presenza online tanto necessaria e di presentare tutte le informazioni sui servizi o prodotti che offri.

Un ulteriore vantaggio è il fatto che le persone interessate alla tua attività possono vedere immediatamente tutti i dettagli di cui hanno bisogno senza dover fare clic su più pagine. E poiché i siti di una pagina spesso presentano più inviti all'azione, hai una maggiore possibilità di convertire i visitatori in potenziali acquirenti.

In questo tutorial ti illustreremo i passaggi della configurazione del tuo sito web con un modello HTML di una pagina. Tratteremo gli strumenti necessari, i dettagli tecnici sulla personalizzazione del modello e su come caricarlo sul tuo server. Ti forniremo anche alcuni importanti suggerimenti su come rendere efficaci i siti web di una sola pagina. Cominciamo!

Prima di iniziare

Prima di creare il sito Web di una sola pagina, ci sono alcune cose che ti serviranno. Andiamo su di loro di seguito.

1. Nome dominio

La scelta più ovvia è utilizzare il nome della tua attività commerciale per il tuo dominio. Nel caso in cui il nome è preso, si potrebbe provare ad aggiungere parole come società, agenzia o studio e quindi acquistare il nome di dominio.

Si consiglia inoltre di utilizzare un'estensione .com poiché è una delle estensioni più vecchie e più credibili. Tuttavia, se non è possibile ottenere un nome adatto con l'estensione .com, è utile prendere in considerazione l'estensione .net.

2. Società di hosting

Trovare una buona compagnia di hosting potrebbe sembrare un compito impossibile all'inizio. In generale, si desidera cercare un host con buone recensioni sui siti Web di terzi poiché è più probabile che siano imparziali. Presta attenzione a ciò che le persone dicono dei loro tempi di attività, dell'assistenza clienti e della facilità d'uso.

3. Modello HTML

Il prossimo passo è trovare un modello per il tuo sito web. Un buon posto per iniziare la tua ricerca è il mercato ThemeForest. Puoi scegliere tra centinaia di modelli professionali di siti di una sola pagina che soddisfano una varietà di nicchie o sfogliare la nostra selezione di alcuni dei migliori: 

4. Editor di codice e client FTP

Poiché è necessario modificare il modello per sostituire le informazioni con il proprio, è necessario un editor di codice. Evidenzierà la sintassi del codice e renderà più facile trovare le parti del codice che devono essere modificate.

Per questo tutorial, userò Sublime Text che può essere usato su Mac, Windows e Linux e viene fornito con una versione di prova gratuita.

Avrai anche bisogno di un client FTP come FileZilla per connetterti al tuo server e caricare i file del sito web senza doverli caricare uno per uno. FileZilla è gratuito e disponibile per tutti i sistemi operativi.

Ora esaminiamo i dettagli su come creare un sito Web di una pagina, iniziando con il download e impostando il modello del sito.

Come modificare il contenuto del modello del sito Web

Dopo aver raccolto tutti i file e gli strumenti necessari, ora è il momento di modificare il modello HTML. Per questo tutorial, userò il modello di sito web di Wander. Inizia scaricando i file modello dalla pagina Download su ThemeForest. Estrai il contenuto della cartella zippata e apri la cartella. Noterai che contiene una cartella della documentazione e tutti i file del modello del sito.

Dato che questo è un modello multiuso, ha al suo interno alcuni file. Il tuo modello può venire solo con un singolo file HTML e cartelle che contengono i fogli di stile, i file di script e le immagini.

Per modificare il modello a tuo piacimento, dovrai modificare il file HTML solitamente chiamato index.html. Nel caso di Wander, modifico il file chiamato casa-un-page.html, come stiamo facendo un sito web di una pagina.

Lavorare con HTML

Se non hai mai lavorato prima con un modello HTML, il file sembrerà probabilmente intimidatorio se provi ad aprirlo in Sublime Text o in qualsiasi altro editor. Mentre un tutorial HTML completo è fuori dallo scopo di questo articolo, copriamo le basi di ciò che è HTML e come appare.

HTML è un linguaggio di markup composto da tag come

,

,

, e altri. I tag vengono in coppia, ognuno dei quali ha un'apertura e una chiusura. Aiutano il browser a capire come dovrebbe visualizzare cosa c'è tra questi tag.

Un paragrafo in un documento HTML sarà simile a questo:

Questo è il mio paragrafo.

. Un'intestazione sarà circondata da un h etichetta accompagnata da un numero da 1-6 che significa livello di intestazione 1 attraverso il livello di intestazione 6.  

Quando si modifica un modello HTML, non è necessario modificare alcun tag, ma solo il testo tra di essi. Tuttavia, se desideri copiare una parte del codice o eliminarla, dovrai selezionare l'intera parte dal tag di apertura al tag di chiusura, quindi copiarla o eliminarla.

Il modo più semplice per modificare il modello è aprirlo in un browser e quindi ispezionare il codice. Innanzitutto, fai doppio clic sul file HTML per aprirlo nel browser predefinito. A prima vista, vedrai che è necessario modificare il testo nella sezione dell'intestazione. Fare clic con il tasto destro sulla frase che legge Facciamo BRANDS Shine e selezionare Ispezionare.

Ispezione di HTML in un browser web.

Un pannello apparirà in basso che ti mostrerà il codice HTML del nostro modello. La linea che ha la frase selezionata sarà sul lato sinistro del pannello Inspector. Vedrai che la frase è avvolta in a

tag con la classe di grande mt20.

Ora, apri il modello nell'editor di codice facendo clic con il pulsante destro del mouse sul nome del modello e seleziona Apri con testo sublime. Trova la stessa riga di codice che hai visto nel pannello Inspector, seleziona il testo tra i tag e sostituiscilo con lo slogan aziendale.

Modifica del codice HTML.

Per modificare il paragrafo direttamente sotto il titolo che hai appena sostituito, torna al tuo browser, fai clic con il tasto destro sul paragrafo e seleziona Ispeziona. Questa volta, la frase è in mezzo

tag con la classe di bianca. Torna al tuo editor di codice, trova la riga di codice corrispondente, fai clic tra i tag e aggiungi le tue informazioni.

Continua con questi passaggi finché non avrai sostituito tutti i contenuti demo con i tuoi. Elimina le sezioni indesiderate selezionando tutto dall'apertura al tag di chiusura di una particolare sezione di codice.

In modo simile, se si desidera duplicare una parte del modello, trovare il codice che contiene quella sezione e selezionare tutto compreso i tag di apertura e di chiusura, quindi copiarlo e incollarlo nel punto in cui si desidera visualizzare il contenuto.

Nello screenshot qui sotto, volevo aggiungere un'altra testimonianza, quindi ho selezionato il codice per la terza testimonianza e l'ho copiato immediatamente sotto.

Si noti che nella maggior parte dei casi, le sezioni del codice verranno incluse

tag prima di incappare in tag di intestazione e di paragrafo. Se si desidera duplicare o eliminare quella sezione, è necessario selezionare il

tag anche; in caso contrario, i tuoi contenuti non verranno visualizzati correttamente.

Dopo aver finito di modificare il contenuto, è necessario sostituire le immagini. Il modo più conveniente per disattivarli è prendere nota dei nomi delle immagini nella cartella del modello e quindi assegnare un nome alle immagini allo stesso modo. Una volta che le immagini sono state correttamente denominate, copiarle nella cartella delle immagini.

Come modellare il modello di una pagina Web

C'è ancora una cosa da fare prima di caricare i file sul tuo server, e questo è lo styling del modello per abbinare il tuo marchio esistente. Gli stili si trovano nella cartella CSS. Nel caso di Wander, ci sono diversi fogli di stile insieme alla cartella denominata Colori.

Per iniziare a modificare il file CSS, puoi seguire la stessa procedura usata per modificare il file HTML. Per scoprire come viene disegnato uno specifico elemento, fai clic con il tasto destro su di esso nel tuo browser e fai clic Ispezionare. Questa volta, guarda sul lato destro e noterai lo stile corrispondente per quell'elemento. Lo stesso pannello avrà anche il nome del file di stile che è necessario modificare insieme alla riga in cui si trova quel codice.

Ispezione dei CSS in un browser web. 

Apri il file nel tuo editor di codice. In questo caso lo è theme.css. Dal momento che voglio modificare il colore di sfondo della seconda sezione che ha tutte le funzionalità, ho bisogno di trovare il linea 5378 nel file theme.css. Passiamo al nero:

Regola rapidamente il colore di sfondo nei CSS. Se vuoi regolare rapidamente il colore, devi solo sostituire il foglio di stile nella testa del file HTML con il nome del tuo file CSS preferito.

Cerca la riga di codice che dice:

Cambiare il nome in green.css cambierà i colori di pulsanti, collegamenti e icone:

Modifica dei colori dei pulsanti del file CSS.

Per cambiare i caratteri, ispeziona qualsiasi testo e guarda la parte destra del pannello Inspector. Vedrai il nome del carattere utilizzato dal testo e la riga di codice in cui puoi cambiarlo in un font che preferisci.  

Individuazione del codice CSS per i caratteri.

Come caricare il tuo modello di sito sul server

Ora che hai modificato e stilizzato il tuo modello di sito web con una sola pagina, puoi caricarlo sul tuo server di hosting. Il tuo host ti fornirà il nome utente e la password necessari per utilizzare la connessione FTP.

Per iniziare il processo di caricamento, apri FileZilla e inserisci il nome del server, il nome utente e la password nella barra in alto, quindi fai clic su QuickConnect.

Individua la cartella con il modello sul tuo computer sul lato sinistro dello schermo e fai clic su di essa per espanderla. In basso a sinistra, seleziona tutti i file e le cartelle e trascinali sul lato destro dello schermo nella cartella principale del tuo server di hosting situato nel public_html cartella.

Trasferimento del modello di sito Web di una pagina tramite FTP.

5 suggerimenti importanti per migliori siti Web con una sola pagina

Ora che il tuo sito web è in diretta, ecco alcuni suggerimenti chiave da tenere a mente.

1. Rendi il tuo messaggio sintetico

A differenza di un sito tradizionale, un modello di una pagina ha uno spazio limitato a disposizione, quindi ciò significa meno spazio per far passare il messaggio. Ecco perché è fondamentale eliminare tutto il gergo e i dettagli non necessari, lasciando solo le informazioni più rilevanti. Spiega chiaramente cosa hai da offrire e i vantaggi offerti dal tuo prodotto o servizio.

2. Utilizzare Strong call to Action

Dato lo spazio limitato, il tuo invito all'azione deve essere forte e convincente. Devi anche includerlo diverse volte per ottenere il massimo effetto. Per impostazione predefinita, la maggior parte dei modelli di siti Web di una pagina contiene già più sezioni che includono un invito all'azione, quindi sfruttale al meglio. Visitate direttamente i visitatori di una sezione che ha i piani tariffari o un modulo di contatto dove possono mettersi in contatto con voi.

3. Mantieni la navigazione accessibile e semplice

Imposta la navigazione per passare a diverse sezioni del tuo sito web. Sarai un passo avanti al gioco se opti per un modello che ha già una navigazione appiccicosa che rimane sul posto mentre un visitatore scorre verso il basso. Includi solo i collegamenti alle sezioni del tuo sito web ed evita di posizionare link esterni in modo tale da gettare via chiunque visiti la tua pagina.

4. Usa Visual

L'uso di immagini o video ti aiuterà a raccontare la tua storia e condividere di più su ciò che offri senza occupare troppo spazio. Nel caso di siti Web di una pagina, le immagini sono il tuo migliore amico.

5. Gestisci gerarchia

Inserisci le informazioni più importanti nella parte superiore del tuo sito e quindi guida lentamente l'utente verso il basso nella pagina per informazioni più specifiche che supportano il tuo messaggio principale. Ciò ti aiuterà a mantenere la gerarchia e presentare le informazioni in modo logico.

Inizia con il tuo sito Web di una sola pagina

Se hai seguito questo tutorial, ora hai le conoscenze per creare rapidamente un sito web di una pagina utilizzando un modello reattivo. Inizia il tuo viaggio con il modello di sito web giusto e fai riferimento a questo tutorial per aiutarti a configurarlo velocemente.

Attività commerciale