Share
Lorsque vous vous apprêtez à lancer un nouveau site Web, un produit ou un service, vous avez besoin d'un emplacement dédié pour envoyer des clients potentiels. Cependant, votre site Web n'est peut-être pas encore prêt à accueillir de nouveaux visiteurs. Dans ces cas, un modèle de page de destination HTML5 est le choix idéal..
Un modèle HTML5 est rapide et facile à installer. Contrairement à un CMS qui peut utiliser un langage de programmation complexe, un modèle HTML est facile à modifier, même pour les débutants..
Dans ce didacticiel, je vais expliquer les avantages de l’utilisation des modèles de page de départ HTML et vous expliquer comment en créer un. Ne vous inquiétez pas: c'est rapide et sans douleur.
Comme je l'ai déjà mentionné, vous pouvez installer et configurer les pages de destination assez rapidement. Mais il y a quelques autres avantages à en utiliser un:
Maintenant que j'ai couvert les avantages des modèles HTML, passons au didacticiel..
Pour les besoins de ce tutoriel, je vais utiliser le modèle Pure. C'est un modèle propre et minimal qui peut être utilisé à diverses fins. Il est accompagné d'un formulaire de contact de travail et d'un formulaire d'inscription à MailChimp..
En plus du modèle, vous aurez besoin de quelques autres outils pour pouvoir modifier le modèle et rendre votre site actif:
Avant de sélectionner un modèle pour votre page de destination, vous devez acheter un nom de domaine et vous inscrire à un plan d'hébergement. De nos jours, vous pouvez acheter un forfait d’hébergement à partir de 5 $ / mois et la plupart des sociétés d’hébergement vous fourniront le nom de domaine gratuitement lors de votre inscription. Certaines sociétés d'hébergement offriront un espace et une bande passante illimités, tandis que d'autres limiteront les ressources disponibles..
Assurez-vous de faire votre recherche et de lire quelques critiques indépendantes sur les sociétés d’hébergement qui suscitent votre intérêt. Voir à quel point leurs clients précédents sont satisfaits peut être un excellent indicateur des services offerts et de la qualité du support client.
Le prochain élément de votre liste devrait être un client FTP. Il vous permettra de vous connecter à votre serveur d'hébergement et de télécharger les fichiers de modèle..
Il existe de nombreux clients FTP disponibles pour différents systèmes d'exploitation. FileZilla est une plateforme FTP populaire pouvant être utilisée sur toutes les plateformes. Il est également gratuit de télécharger et d'utiliser.
Vous aurez besoin d'un éditeur de code pour modifier votre modèle. L'utilisation d'un éditeur de code vous permettra de trouver plus facilement le code que vous devez modifier, car ils utilisent une coloration syntaxique spéciale. Vous pouvez utiliser Notepad ++ si vous êtes un utilisateur Windows ou TextWrangler si vous êtes un utilisateur Mac. Une autre option consiste à utiliser Sublime Text 3, qui peut être utilisé à la fois sur des ordinateurs Windows et Mac, ainsi que sur Linux, et offre un essai gratuit..
Enfin, vous devrez acheter et télécharger un modèle de page de destination et préparer le contenu qui sera placé sur votre page de destination. Vous pouvez trouver de nombreux modèles de pages de destination HTML sur Envato Elements spécialement conçus pour les pages de destination. Une fois que vous avez trouvé un modèle que vous aimez, achetez-le et téléchargez-le sur votre ordinateur. Assurez-vous de décompresser le dossier et de le sauvegarder dans un endroit facilement accessible..
Rassemblez toutes les images et le texte que vous souhaitez ajouter à votre page de destination. Tout garder au même endroit facilitera son ajout au modèle et le transfert des images sur votre serveur..
Lorsque tout est en place, il est temps de personnaliser le modèle et d'y ajouter vos informations. Commençons par nous familiariser avec la structure du modèle.
Comme mentionné précédemment, j'utilise le modèle de page de destination Pure HTML.
Après avoir décompressé le dossier, vous pouvez constater que le modèle de page de départ d'amorçage contient plusieurs sous-dossiers et plusieurs fichiers HTML. Voici à quoi ressemble la structure:
Vous remarquerez également plusieurs fichiers HTML, qui représentent différentes versions de démonstration des modèles de page de renvoi HTML. Vous pouvez cliquer avec le bouton droit de la souris ou double-cliquer sur chacun des fichiers HTML pour les ouvrir dans votre navigateur préféré et voir à quoi ils ressemblent. Lorsque vous avez trouvé la version de démonstration que vous aimez, fermez tous les autres onglets..
Je travaillerai avec le modèle index-normal-scroll-countdown.html dans le reste du tutoriel..
Maintenant que le modèle de page de destination HTML que vous avez choisi est ouvert dans votre navigateur, il est temps de remplacer les informations par les vôtres. Pour ce faire, le moyen le plus simple consiste à comprendre quelle partie du code du modèle doit être modifiée. Commençons par cliquer avec le bouton droit de la souris sur la première ligne de texte sous le compteur et en cliquant sur Inspecter..
Un nouveau panneau apparaîtra au bas de la fenêtre de votre navigateur. Vous remarquerez qu'il affiche le code HTML qui constitue notre modèle à gauche ainsi que le CSS qui fournit les styles pour le modèle à droite..
Comme vous pouvez le voir sur la capture d'écran, la phrase sélectionnée se situe entre balises qui représentent des paragraphes. La plupart des balises en HTML consistent en des paires de balises qui ont une balise d'ouverture et de fermeture. Le contenu doit être placé entre ces balises pour apparaître sur une page Web:
opacity-0 "> Avant le lancement, profitez d'un Opportunité très limitée en vous abonnant à notre newsletter.
Cliquez sur le bouton suivant pour obtenir plus d'informations sur notre projet..
Pour remplacer les informations factices dans le modèle, il vous suffit de savoir quelles balises contiennent les informations que vous souhaitez modifier. Ensuite, vous pouvez trouver ces balises dans l'éditeur de code et insérer votre propre texte.
Maintenant que vous savez comment rechercher le code qui nécessite une édition, revenez au dossier de modèles, cliquez avec le bouton droit sur le fichier HTML de votre choix et sélectionnez Ouvrir avec,et choisissez l'éditeur de code que vous avez téléchargé précédemment. Vous devriez voir le code HTML complet qui compose votre modèle.
Faites défiler l'éditeur de code jusqu'à trouver la même ligne de code que celle que nous avons surlignée dans le navigateur. Il devrait être autour de la ligne 75-76. Ensuite, cliquez à l'intérieur du
marque, mettez le texte en surbrillance et remplacez-le par votre.
Pour éditer le reste du modèle, vous pouvez simplement répéter les étapes ci-dessus jusqu'à ce que toutes les informations souhaitées soient incluses..
Vous pouvez également supprimer des sections du modèle si vous ne souhaitez pas qu'elles apparaissent. De même, vous pouvez également dupliquer des sections si vous souhaitez inclure plus d'informations. Il suffit de sélectionner la partie du modèle en commençant par la balise d'ouverture et en soulignant tout jusqu'à la balise de fermeture de cette partie, puis de supprimer ou de copier-coller cette section ci-dessous..
Lorsque vous avez terminé de remplacer le contenu, il est temps de remplacer les exemples d'images par les vôtres. Pour faciliter ce processus, examinez les noms des images dans le dossier img du modèle, puis nommez vos images en utilisant les mêmes noms. Sélectionnez ensuite toutes les images d’espace réservé, supprimez-les et placez-les dans le dossier img..
Il est maintenant temps de modifier l'apparence de votre modèle et de modifier les styles en CSS. Par défaut, le modèle Pure est fourni avec différentes feuilles de style pour les versions sombre et claire du modèle:
Pour savoir quelle feuille de style vous devez éditer, regardez votre fichier HTML dans l'éditeur de code et recherchez la ligne semblable à celle-ci:
Accédez au dossier de votre modèle et ouvrez la feuille de style correspondante dans l'éditeur de code..
Pour voir quelle ligne de code et style vous devez éditer, vous pouvez répéter le même processus que celui utilisé pour éditer le code HTML..
Dans votre navigateur, cliquez avec le bouton droit sur l’élément que vous souhaitez styler, puis sélectionnez Inspecter. Regardez à droite et vous verrez les styles utilisés pour cette partie du modèle:
Comme vous pouvez le voir sur la capture d'écran, le Inspecteur nous montre les styles utilisés pour le texte du paragraphe. Basculez vers l'éditeur de code et le fichier de feuille de style. Faites défiler la liste jusqu'à ce que vous trouviez une ligne de code commençant par p.
Ici, vous pouvez changer les polices utilisées, la taille de la police, ainsi que la couleur du texte.
Si vous souhaitez modifier la couleur d'arrière-plan du modèle, recherchez la ligne de code indiquant le corps, suivi des accolades, puis entrez le code de couleur HEX après
la partie qui lit la couleur de fond.
N'oubliez pas de sauvegarder toutes les modifications que vous avez apportées en cliquant sur Enregistrer dans votre éditeur de code..
Après avoir modifié le modèle à votre convenance, vous devrez le télécharger sur votre serveur d'hébergement. Votre fournisseur d'hébergement vous enverra un e-mail avec toutes les informations dont vous avez besoin pour transférer des fichiers avec FTP.
Lancez votre programme FTP comme FileZilla. Vous remarquerez la barre du haut où vous pouvez entrer le nom du serveur, votre nom d'utilisateur et votre mot de passe. En utilisant les informations fournies par votre hôte, connectez-vous à votre serveur en cliquant sur QuickConnect.
Sur le côté gauche de la fenêtre de FileZilla, localisez le dossier contenant votre modèle sur votre ordinateur et cliquez dessus pour le développer. Sélectionnez tous les fichiers et dossiers et faites-les glisser vers la droite de l'écran dans le dossier public_html..
Une fois tous les fichiers téléchargés, ouvrez votre navigateur et entrez votre nom de domaine. Félicitations, votre site est maintenant en ligne!
Une page de destination peut faire des merveilles pour votre entreprise ou votre produit alors que vous vous préparez pour le lancement. Voici quelques conseils qui vous aideront à tirer le meilleur parti de vos modèles de page de départ HTML et vous aideront à créer du battage publicitaire:
Pour en savoir plus sur les modèles de page de départ HTML ou les modèles de page de départ Bootstrap, consultez ces didacticiels:
À l'aide d'un modèle HTML, vous pouvez rapidement et rapidement utiliser votre page de démarrage bootstrap. Commencez par sélectionner l'un de nos modèles de page de départ HTML dans Envato Elements ou l'un des modèles de page de départ bootstrap de ThemeForest. Ensuite, utilisez notre tutoriel pour vous guider tout au long du processus de configuration..
Accentsconagua