La mise en ligne de votre site Web ne doit pas nécessairement être compliquée. En fait, vous pouvez créer un site commercial simple mais efficace à l'aide d'un modèle de site Web d'une page. L'utilisation d'un modèle d'une page vous permet de donner à votre entreprise une présence en ligne fort nécessaire et de présenter toutes les informations sur les services ou les produits que vous proposez..

Un avantage supplémentaire est le fait que les personnes intéressées par votre entreprise peuvent voir immédiatement tous les détails dont elles ont besoin sans avoir à cliquer sur plusieurs pages. Et comme les sites sur une seule page comportent souvent plusieurs appels à l'action, vous avez beaucoup plus de chances de convertir les visiteurs en acheteurs potentiels..

Dans ce didacticiel, nous vous expliquerons les étapes de la configuration de votre site Web avec un modèle HTML d’une page. Nous couvrirons les outils dont vous aurez besoin, les détails techniques de la personnalisation de votre modèle et la façon de le télécharger sur votre serveur. Nous vous donnerons également quelques conseils importants sur la manière de créer des sites Web d'une page efficaces. Commençons!

Avant de commencer

Avant de créer votre site Web d'une page, vous aurez besoin de quelques éléments. Allons les voir ci-dessous.

1. Nom de domaine

Le choix le plus évident consiste à utiliser le nom de votre entreprise pour votre domaine. Si le nom est pris, vous pouvez essayer d’ajouter des mots comme société, agence ou studio, puis d’acheter le nom de domaine..

Il est également recommandé d'utiliser une extension .com car il s'agit d'une des extensions les plus anciennes et les plus crédibles. Toutefois, si vous ne pouvez pas obtenir un nom approprié avec l'extension .com, l'utilisation d'une extension .net vaut la peine d'être envisagée..

2. Société d'hébergement

Trouver une bonne société d'hébergement peut sembler une tâche impossible au premier abord. En général, vous souhaitez rechercher un hôte qui publie de bonnes critiques sur des sites Web tiers, car ceux-ci sont plus susceptibles d'être impartiaux. Faites attention à ce que les gens disent à propos de leurs temps de disponibilité, du support client et de la facilité d'utilisation.

3. Modèle HTML

La prochaine étape consiste à trouver un modèle pour votre site Web. Le marché ThemeForest est un bon point de départ pour votre recherche. Vous pouvez choisir parmi des centaines de modèles de sites professionnels d’une page qui répondent à une variété de niches, ou parcourir notre sélection organisée des meilleurs 

4. Éditeur de code et client FTP

Étant donné que vous devrez modifier le modèle pour remplacer les informations par les vôtres, vous avez besoin d'un éditeur de code. Cela mettra en évidence la syntaxe du code et facilitera la recherche des parties du code qui doivent être modifiées.

Pour ce tutoriel, j'utiliserai Sublime Text qui peut être utilisé sur Mac, Windows et Linux et est fourni avec une version d'évaluation gratuite..

Vous aurez également besoin d’un client FTP tel que FileZilla pour vous connecter à votre serveur et télécharger les fichiers du site Web sans avoir à les télécharger un par un. FileZilla est gratuit et disponible pour tous les systèmes d'exploitation..

Voyons maintenant comment créer un site Web d'une page, en commençant par le téléchargement et la configuration de votre modèle de site..

Comment modifier le contenu de votre modèle de site Web

Une fois que vous avez rassemblé tous les fichiers et outils dont vous avez besoin, il est temps de modifier le modèle HTML. Pour ce tutoriel, je vais utiliser le modèle de site Web Wander. Commencez par télécharger les fichiers de modèle à partir de votre page de téléchargements sur ThemeForest. Extrayez le contenu du dossier compressé et ouvrez-le. Vous remarquerez qu'il contient un dossier de documentation ainsi que tous les fichiers de modèle de site..

Puisqu'il s'agit d'un modèle polyvalent, il contient plusieurs fichiers. Votre modèle ne peut contenir qu'un seul fichier HTML et des dossiers contenant les feuilles de style, les fichiers de script et les images..

Pour modifier le modèle à votre guise, vous devez modifier le fichier HTML, généralement appelé index.html. Dans le cas de Wander, je vais éditer le fichier appelé home-one-page.html, comme nous faisons un site web d'une page.

Travailler avec HTML

Si vous n'avez jamais travaillé avec un modèle HTML auparavant, le fichier sera probablement intimidant si vous essayez de l'ouvrir dans Sublime Text ou dans tout autre éditeur. Bien qu'un didacticiel HTML complet n'entre pas dans le cadre de cet article, couvrons les bases de ce qu'est le HTML et de quoi il a l'air..

HTML est un langage de balisage composé de balises telles que

,

,

, et d'autres. Les étiquettes viennent par paires, chacune ayant une ouverture et une fermeture. Ils aident le navigateur à comprendre comment il doit afficher ce qu'il y a entre ces balises..

Un paragraphe dans un document HTML ressemblera à ceci:

Ceci est mon paragraphe.

. Une rubrique sera entourée d'un h tag accompagné d'un numéro de 1-6 qui signifie niveau de cap 1 par niveau de rubrique 6.  

Lorsque vous modifiez un modèle HTML, vous ne devez modifier aucune des balises, mais uniquement le texte qui les sépare. Toutefois, si vous souhaitez copier une partie du code ou le supprimer, vous devez sélectionner la partie entière de la balise d'ouverture vers la balise de fermeture, puis la copier ou la supprimer..

Le moyen le plus simple de modifier votre modèle consiste à l'ouvrir dans un navigateur, puis à inspecter le code. Tout d’abord, double-cliquez sur le fichier HTML pour l’ouvrir dans votre navigateur par défaut. Dès le départ, vous verrez que vous devez modifier le texte dans la section d'en-tête. Faites un clic droit sur la phrase qui se lit Nous faisons briller les marques et sélectionnez Inspecter.

Inspection HTML dans un navigateur Web.

Un panneau apparaîtra en bas qui vous montrera le code HTML de notre modèle. La ligne contenant la phrase sélectionnée sera sur le côté gauche du panneau Inspecteur. Vous verrez que la phrase est enveloppée dans un

tag avec la classe de grand mt20.

Maintenant, ouvrez le modèle dans votre éditeur de code en faisant un clic droit sur le nom du modèle et en sélectionnant Ouvrir avec du texte sublime. Recherchez la même ligne de code que celle que vous avez vue dans le panneau Inspecteur, sélectionnez le texte entre les balises et remplacez-le par le slogan de votre société..

Modification du code HTML.

Pour modifier le paragraphe directement sous le titre que vous venez de remplacer, revenez dans votre navigateur, cliquez avec le bouton droit de la souris sur le paragraphe et sélectionnez Inspecter. Cette fois, la phrase est enveloppée entre

balises avec la classe de blanc. Retournez dans votre éditeur de code, trouvez la ligne de code correspondante, cliquez entre les balises et ajoutez vos informations..

Continuez avec ces étapes jusqu'à ce que vous ayez remplacé tout le contenu de la démo par le vôtre. Supprimez les sections indésirables en sélectionnant tout, de l'ouverture à la balise de fermeture d'une section de code particulière.

De la même manière, si vous souhaitez dupliquer une partie du modèle, recherchez le code qui contient cette section et sélectionnez tout, y compris les balises d'ouverture et de fermeture, puis copiez-le et collez-le à l'endroit où vous souhaitez afficher le contenu..

Dans la capture d'écran ci-dessous, je voulais ajouter un autre témoignage. J'ai donc sélectionné le code du troisième témoignage et je l'ai copié immédiatement ci-dessous..

Notez que dans la plupart des cas, des sections du code seront encapsulées dans

balises avant de rencontrer des balises d'en-tête et de paragraphe. Si vous souhaitez dupliquer ou supprimer cette section, vous devez sélectionner le

balises aussi; sinon, votre contenu ne s'affichera pas correctement.

Une fois le contenu modifié, vous devez remplacer les images. Le moyen le plus pratique de les désactiver est de noter les noms des images dans votre dossier de modèles, puis de nommer vos images de la même manière. Une fois vos images correctement nommées, copiez-les dans le dossier images..

Comment styliser votre modèle de site Web à une page

Avant de télécharger les fichiers sur votre serveur, il vous reste encore une chose à faire: personnaliser le modèle en fonction de votre marque existante. Les styles sont situés dans le dossier CSS. Dans le cas de Wander, il existe plusieurs feuilles de style ainsi que le dossier nommé Couleurs.

Pour commencer à modifier le fichier CSS, vous pouvez suivre les mêmes étapes que nous avons utilisées pour modifier le fichier HTML. Pour savoir comment un élément particulier est stylé, cliquez dessus avec le bouton droit de la souris et cliquez sur Inspecter. Cette fois, regardez à droite et vous remarquerez le style correspondant à cet élément. Le même panneau aura également le nom du fichier de style que vous devez éditer ainsi que la ligne où se trouve ce code.

Inspection de CSS dans un navigateur Web. 

Ouvrez le fichier dans votre éditeur de code. Dans ce cas c'est theme.css. Puisque je veux éditer la couleur de fond de la deuxième section qui a toutes les fonctionnalités, je dois trouver le ligne 5378 dans le fichier theme.css. Changeons-le en noir:

Ajustez rapidement la couleur d'arrière-plan dans CSS. Si vous souhaitez ajuster rapidement la couleur, il vous suffit de remplacer la feuille de style située dans l'en-tête du fichier HTML par le nom de votre fichier CSS préféré..

Recherchez la ligne de code qui dit:

Changer le nom en green.css changera les couleurs des boutons, des liens et des icônes:

Changer les couleurs des boutons du fichier CSS.

Pour changer les polices, examinez le texte et examinez la partie droite du panneau Inspecteur. Vous verrez le nom de la police que le texte utilise, ainsi que la ligne de code où vous pouvez le changer pour une police que vous préférez..  

Localisation du code CSS pour les polices.

Comment télécharger votre modèle de site sur le serveur

Maintenant que vous avez modifié et mis en forme votre modèle de site Web à page unique, vous pouvez le télécharger sur votre serveur d'hébergement. Votre hôte vous fournira le nom d'utilisateur et le mot de passe nécessaires pour utiliser la connexion FTP..

Pour commencer le processus de téléchargement, ouvrez FileZilla et entrez le nom du serveur, le nom d'utilisateur et le mot de passe dans la barre du haut, puis cliquez sur QuickConnect.

Localisez le dossier contenant votre modèle sur votre ordinateur à gauche de l'écran et cliquez dessus pour le développer. Dans le coin inférieur gauche, sélectionnez tous les fichiers et dossiers et faites-les glisser vers la droite de l'écran dans le dossier racine de votre serveur d'hébergement situé dans le répertoire. public_html dossier.

Transfert de votre modèle de site Web à une page via FTP.

5 conseils importants pour de meilleurs sites Web d'une page

Maintenant que votre site Web est en ligne, voici quelques conseils clés à garder à l'esprit..

1. Gardez votre message succinct

Contrairement à un site traditionnel, un modèle d'une page a un espace limité, ce qui signifie moins d'espace pour faire passer votre message. C'est pourquoi il est crucial d'éliminer tout le jargon et les détails inutiles, en ne laissant que les informations les plus pertinentes. Expliquez clairement ce que vous avez à offrir et les avantages de votre produit ou service.

2. Utilisez des appels forts à l'action

Compte tenu de l'espace limité, votre appel à l'action doit être fort et convaincant. Vous devez également l'inclure plusieurs fois pour obtenir un effet maximal. Par défaut, la plupart des modèles de site Web d’une page comportent déjà plusieurs sections qui intègrent un appel à l’action. Profitez-en donc au maximum. Dirigez les visiteurs vers une section qui a les plans de tarification ou un formulaire de contact où ils peuvent vous contacter.

3. Garder la navigation accessible et simple

Configurez votre navigation pour accéder aux différentes sections de votre site Web. Vous aurez une longueur d'avance sur le jeu si vous optez pour un modèle qui possède déjà une navigation difficile à conserver qui reste à la place du défilement d'un visiteur. N'incluez que les liens vers les sections de votre site Web et évitez de placer des liens externes, cela risquerait d'éloigner les visiteurs de votre page.

4. Utiliser des visuels

Utiliser des images ou des vidéos vous aidera à raconter votre histoire et à en dire plus sur ce que vous avez à offrir sans prendre trop de place. Dans le cas de sites Web d'une page, les visuels sont votre meilleur ami..

5. Maintenir la hiérarchie

Placez les informations les plus importantes en haut de votre site, puis guidez lentement l'utilisateur vers le bas de la page vers des informations plus spécifiques prenant en charge votre message principal. Cela vous aidera à maintenir la hiérarchie et à présenter les informations de manière logique..

Commencez avec votre propre site Web d'une page

Si vous avez suivi ce didacticiel, vous avez maintenant les connaissances nécessaires pour créer rapidement un site Web d'une page à l'aide d'un modèle réactif. Commencez votre voyage avec le bon modèle de site Web et consultez ce didacticiel pour vous aider à le configurer rapidement..

Affaires