Quando si tratta di creare il tuo sito web aziendale, ci sono diversi modi per farlo. Puoi optare per un site builder, puoi avere uno sviluppatore per progettare un sito per te, oppure puoi usare un CMS come WordPress. Anche se non c'è nulla di sbagliato in queste opzioni, possono essere troppe se tutto ciò di cui hai bisogno è un semplice sito web per mostrare ciò che è la tua azienda e fornire a potenziali clienti e clienti un modo per contattarti.

Se non hai bisogno di caratteristiche fantasiose e non prevedi di fare regolarmente blog o vendere online, allora un modello di sito Web HTML reattivo è proprio quello di cui hai bisogno. Qui, ti guideremo attraverso i passaggi di installazione in modo da poter iniziare in un attimo. 

Come creare un sito Web reattivo in HTML

La bellezza dei modelli di siti Web aziendali HTML reattivi è che sono facili da usare e non richiedono alcuna conoscenza tecnica speciale per caricarli sul server di hosting. Sono anche più facili da modificare rispetto ad altri costruttori di siti Web e CMS.

In questo tutorial, ti mostreremo come modificare e caricare un modello di sito Web HTML reattivo sul tuo server in modo da poter creare facilmente un sito web aziendale reattivo.

Prima di iniziare

Prima ancora di iniziare con la modifica del modello di sito web reattivo, ci sono alcune cose che ti serviranno. Includono un nome di dominio e un piano di hosting, un programma FTP e un editor di codice, un modello di sito Web aziendale HTML reattivo e, infine, contenuti e immagini che andranno sul tuo sito. Diamo un'occhiata migliore a ciascuno di quelli sotto.

1. Nome dominio e hosting

La prima cosa che devi fare è acquistare un nome di dominio e un piano di hosting in modo che il tuo sito web possa essere trovato online. Nella maggior parte dei casi, sarai in grado di ottenere un nome di dominio gratuito quando ti iscrivi a un piano di hosting con la maggior parte dei provider. Quando si tratta del tuo nome di dominio, una buona idea sarebbe quella di usare il nome della tua attività come nome di dominio.

Se possibile, cerca di ottenere un'estensione .COM in quanto è la più popolare, ma tieni presente che trovare un nome di dominio eccezionale con una .COM non è così semplice oggi come una volta. In tal caso, potresti voler guardare altre estensioni come .CO o un dominio locale come .US.

Quando si tratta di hosting provider, puoi trovare pacchetti di hosting che partono da $ 5 al mese. Ti consigliamo di leggere le loro domande frequenti per vedere come gestiscono il servizio clienti e ottenere un senso dei loro termini e condizioni. Inoltre, considera di leggere le recensioni di un particolare host su altri siti Web di terze parti per vedere cosa dicono di loro i clienti.

2. Client FTP ed editor di codice

I prossimi elementi sulla nostra lista sono un client FTP come FileZilla e un editor di codice come Sublime Text. Lo scopo di un client FTP è connettere il tuo computer al server di hosting e caricare facilmente i file del tuo sito web tutto in una volta, invece di caricarli uno per uno attraverso il pannello di controllo dell'host. Un editor di codice, d'altra parte, ti aiuterà a modificare i file del modello e renderà più facile trovare diverse parti del codice che necessitano di modifiche.

Sia Sublime Text che FileZilla possono essere scaricati gratuitamente e possono essere utilizzati su computer Mac, Windows e Linux.

3. Il tuo modello di sito web HTML reattivo scelto e il contenuto del sito web

Infine, avrai bisogno di un modello HTML e del contenuto che desideri aggiungere al tuo sito web. È possibile trovare una pletora di modelli HTML reattivi realizzati appositamente per siti Web aziendali su marketplace come Envato Elements. Una volta trovato quello che ti piace, basta scaricarlo, decomprimere la cartella e salvarla da qualche parte a cui puoi accedere facilmente.

Per quanto riguarda il contenuto, considera la copia che andrà sulle pagine del tuo sito e spiega cosa fa la tua azienda, chi serve e come aiuta i clienti con prodotti e servizi. Puoi anche aggiungere informazioni sulle persone chiave della tua azienda. Non dimenticare elementi visivi come immagini e loghi.

Come personalizzare il contenuto del modello

Ora è il momento di modificare il contenuto all'interno del modello e sostituire le informazioni fittizie con le proprie. Ai fini di questo tutorial, userò il modello Moose. Questo modello di sito Web reattivo presenta un design piatto e reattivo e include diversi modelli di pagina adatti a proprietari di aziende, agenzie creative, studi digitali e altro.

1. Comprendere come il modello di sito Web reattivo è strutturato

Prima di iniziare a modificare il modello, è importante comprendere la struttura in modo da sapere quali file devi modificare. Come puoi vedere dallo screenshot qui sotto, la cartella decompressa ha tre sottocartelle.

Quello chiamato modello è la sottocartella che contiene tutti i file che costituiscono il nostro modello di sito Web reattivo e alcune sottocartelle aggiuntive. Se stai utilizzando un modello diverso, potresti non vedere tutti questi file e queste sottocartelle, ma generalmente, puoi aspettarti di trovare:

• Cartella immagini che contiene tutte le immagini demo utilizzate nel modello.
• Cartella JS o JavaScript con tutto il codice JavaScript necessario per il corretto funzionamento del modello. In generale, non è necessario modificare il contenuto di questa cartella poiché JavaScript viene utilizzato per funzionalità extra come l'animazione o la convalida del modulo.
• Cartella CSS o Stili che contiene i file CSS che dovrai modificare per personalizzare font, colori e altri stili visivi.
• Vari file HTML per pagine diverse sul tuo sito come index.html, about.html, contact.html e altri.

2. Sostituisci il contenuto fittizio

Fare doppio clic sul file index.html o fare clic con il tasto destro del mouse e selezionare Apri in Chrome (o qualunque browser stai usando). Quando guardi il modello nel tuo browser, puoi vedere che c'è uno slider in cui devi sostituire le immagini e le didascalie, una sezione di servizi in cui devi aggiungere le tue informazioni e altro.

Il modo più semplice per trovare dove modificare queste informazioni è fare clic con il pulsante destro del mouse sul testo e fare clic su Ispezionare collegamento.

Apparirà la finestra Inspector e potrai vedere il codice HTML utilizzato nel modello di sito Web HTML reattivo sul lato sinistro della finestra e il codice CSS responsabile dello stile visivo del modello sul lato destro. lato della finestra dell'Inspector.

Guarda il codice HTML e vedrai che la riga di codice che contiene il testo selezionato è evidenziata. Nell'esempio della schermata, l'intestazione che sto ispezionando e che è evidenziata nella finestra dell'Inspector si trova tra il

tag, che sono i tag HTML. I tag in HTML consistono in un tag di apertura e chiusura e costituiscono una coppia di tag che contiene elementi HTML corrispondenti. Per esempio,

i tag vengono chiamati tag di intestazione e vengono utilizzati per contenere un'intestazione di livello 1. allo stesso modo,

i tag contengono l'elemento HTML del paragrafo.

Per modificare il modello, è necessario sapere quali tag contengono il testo che si desidera modificare e ritrovarli nell'editor di codice. Quindi, puoi sostituire il testo con il tuo.

Ora che sappiamo quali tag dobbiamo modificare, è ora di aprire il file index.html in un editor di codice come Sublime Text. Fare clic con il pulsante destro del mouse sul file e fare clic Apri con testo sublime (o qualsiasi altro editor di codice).

Con il file HTML aperto nell'editor di codice, scorrere verso il basso fino a trovare lo stesso testo che si stava ispezionando nel browser. Quindi, fare clic su tra il

tag, elimina il testo fittizio e inserisci il tuo.

Quindi, fai clic su tra il tag, elimina il testo e inserisci una breve tagline o un testo descrittivo. Puoi anche eliminare parti del modello di sito Web reattivo di cui non avrai bisogno. Se guardi lo screenshot qui sotto, noterai che ho sostituito il testo dell'intestazione e ho eliminato la riga inferiore dei servizi.

Per modificare il resto della home page e altre pagine nel modello, è sufficiente ripetere questa procedura più e più volte.

Ora, spieghiamo come sostituire facilmente le immagini fittizie. Innanzitutto, è necessario posizionare tutte le immagini nella cartella delle immagini nella cartella del modello di sito Web HTML reattivo. Quindi, torna al tuo browser e ispeziona una parte della pagina con un'immagine.

Inspector ti dirà il nome dell'immagine e quali tag contengono quell'immagine. Ora puoi tornare all'editor di codice e cercare quel pezzo di codice. Quindi, sostituisci il nome dell'immagine con il nome della tua immagine e salva le modifiche.

Come modellare il modello di sito web reattivo

Ora che hai inserito i tuoi contenuti, discutiamo su come modellare il modello. Nel mio caso, il modello Moose include alcuni schemi di colori pre-impostati che si trovano nel stile> CSS> colore sottocartella. Ciò significa che posso facilmente cambiare i colori semplicemente cambiando il foglio di stile nella parte iniziale del documento per il mio foglio di stile preferito.

Trova la seguente riga di codice nel modello HTML:

La modifica del nome in blue.css cambierà il colore rosso del modello in una tonalità blu:

Puoi anche modificare il foglio di stile principale chiamato style.css e includere i tuoi font e colori preferiti.

Segui semplicemente il principio di modifica HTML: innanzitutto, ispeziona l'elemento che desideri applicare allo stile, quindi cercalo nel file style.css ed esegui esperimenti con valori diversi.

Come caricare i tuoi file sul server

L'ultimo passaggio per creare un sito Web reattivo è caricare i file sul server di hosting. Il tuo provider di hosting dovrebbe averti inviato via email immediatamente dopo esserti iscritto con le informazioni necessarie per il trasferimento di file FTP.

Avrai bisogno di avviare FileZilla (o un altro programma FTP) e poi inserire le informazioni richieste nella barra in alto. Ciò significa che è necessario inserire il nome del server, il nome utente e la password, quindi fare clic su QuickConnect:

Quindi, ti consigliamo di individuare la cartella del modello di sito Web HTML reattivo sul lato sinistro del programma FTP ed espanderlo facendo clic su di esso. Nella finestra sottostante, seleziona tutti i contenuti e trascinali sul lato destro della schermata FTP. Trascina i file nella cartella principale del tuo server di hosting, che di solito è la cartella public_html.

Attendi il completamento del processo di caricamento, quindi apri il browser e inserisci il nome del tuo dominio. Il tuo sito dovrebbe ora essere attivo.

4 Elementi chiave Il tuo sito web aziendale reattivo dovrebbe includere

Ora che il tuo sito è attivo, è essenziale includere le informazioni cruciali che ogni sito Web aziendale dovrebbe avere.

1. Informazioni e pagina dei servizi. Una pagina dedicata racconta ai visitatori la storia del marchio e li aiuta a capire come i tuoi servizi possono aiutarli. Da lì, puoi naturalmente collegarti alla pagina dei tuoi servizi che dovrebbe fornire una breve descrizione di tutto ciò che è incluso nel servizio così come il prezzo di ogni pacchetto.
2. Pagina di contatto. Inutile dire che hai bisogno di una pagina di contatto in modo che i visitatori possano contattarti per pianificare una chiamata o per scoprire di più su di te. La tua pagina di contatto dovrebbe includere un semplice modulo di contatto, ma puoi anche elencare i tuoi profili di social media o un numero di telefono.
3. Prova sociale. Pezzi di testimonianze sociali come testimonianze, recensioni o caratteristiche in altre pubblicazioni sono molto importanti per stabilire la tua credibilità e competenza. Prendi in considerazione l'inclusione di alcuni di questi nella home page e la creazione di una pagina dedicata che ospiterà tutte le lodi attuali e future che riceverai.
4. Chiamare all'azione. Infine, non dimenticare che è necessario renderlo chiaro per i tuoi visitatori cosa vuoi che facciano. Mostrare semplicemente i tuoi servizi non farà molto per incoraggiarli a prenotare effettivamente una chiamata. Includi diversi inviti all'azione sulla tua home page e su tutto il resto del tuo sito che rendono più semplice l'azione dei visitatori.

Crea il tuo sito web aziendale reattivo oggi

Creare un sito Web aziendale reattivo è facile una volta comprese le parti che costituiscono la struttura del modello e come trovare le informazioni che è necessario modificare. Utilizza il nostro tutorial per configurare il tuo sito web aziendale e non dimenticare di consultare la nostra raccolta di modelli HTML business reattivi per trovare quello perfetto per il tuo sito.