[Tutoriel] Comment créer un site Internet à l’aide d’un thème pré-construit

Bonsoir,

Ce soir, je vais vous expliquer comment utiliser un thème (ou un template en Anglais) pré-construit pour créer un site internet.

Contexte
Tout d’abord, pourquoi cet article ?
Cela fait bientôt maintenant 4ans que je construis des sites internet de tout genre : e-commerce, blog, vitrine… j’ai donc avec toute cette expérience appris quelques rudiments technique mais peu de design (mise à part le CSS). Je suis actuellement en plus en recherche d’un nouveau design pour le blog (oui il est peu vieux aussi). Alors je me suis dit : pourquoi ne pas partager mon expérience avec vous !

Avant de choisir un thème…
Avant de vous poser la question du design, la question est de savoir ce que vous allez mettre sur votre site. En effet, murissez votre projet de site web avec quelques questions :
– qu’est ce que j’attends de mon site ?
– quel nom je vais donner à mon site ?
– quels informations je vais donner à mes visiteurs ? Comment ?
– qui va s’occuper de la mise en ligne ? Des mises à jours ?

Une fois que vous aurez répondu à toutes ces questions, vous aurez un petit aperçu d’un cahier des charges. Si vous êtes encore là, c’est que vous envisagez de créer vous-mêmes le design. Et de nos jours, pas besoin de connaître le langage HTML pour ça !

Thèmes gratuits ou payants, avantages et inconvénients
Vous avez décidé de créer votre site avec un thème pré-construit.
Aujourd’hui il existe deux types de thèmes pré-construit :
– les gratuits
– les payants

Chacun de ces 2 types de thèmes ont des avantages et des inconvénients.
Les thèmes gratuits sont gratuits mais peuvent être limités en terme de modifications : pas de fichier source, peu de fonctionnalité développé, pub… Mais comme ils sont gratuits, vous pouvez choisir de partir sur un thème gratuit pour commencer et investir dans un thème plus développé plus tard.
Les thèmes payants sont plus sophistiqués et contiennent davantage de ressources que les gratuits : fichier source, script, images, police…Mais ils sont payants.

L’avantage non négligeable d’un thème payant par rapport à un thème gratuit est la liberté. Comme tous les fichiers sources sont fournis, vous pouvez modifier ce dernier à l’infini. Par exemple : vous pouvez modifier le texte du bouton sans modifier l’image qui est derrière…Mais cette manipulation peux exiger d’avoir un éditeur d’images comme Gimp ou photoshop.

Certains fournisseurs de thèmes ne fournissent pas les images sources. Par exemple, sur le site templatemonster.com, les thèmes n’incluent pas les images sources car tout le texte est écrit directement en code HTML. Cela vous permet de modifier tout le contenu sans être forcé d’utiliser un éditeur des images. La conséquence de choix est que les images du thème ne sont pas modifiables.
Cependant, les thèmes ne sont pas créés pour un domaine précis. Un modèle peut être utilisé quelque soit le secteur d’activité. A la différence de thèmes payants qui sont souvent créés pour une catégorie de sites. Par exemple, les thèmes de sites des hébergeurs peut inclure des photos non adapté à votre besoin: une image d’un serveur dans l’en-tête alors que vous préférez inclure la photo des gens dans les costumes lors de la réunion d’entreprise.
Enfin, même si ce côté « absence de catégorisation » est très pratique, le risque est que ce thème ne soit pas unique. Il peux donc être repris par un concurrent. Donc avant de vous lancer, réfléchissez-bien : thèmes gratuit ou thème payant ?

Première étape: Trouver et télécharger un thème
La première étape est de chercher un modèle qui vous plaise.
Rapelez-vous du travail préalable.
Rendez-vous sur des sites de template (comme ThemeForrest par exemple ou templatemonster). Choisissez un thème qui vous convient et qui semble le plus facile pour vous à intégrer (gratuit, payant, sans ou avec les fichiers sources…).
Sur la page des modèles, vous avez des images miniatures qui vous donne un aperçu du thème.

Vous pouvez aussi accéder aux informations du thème ne cliquant dessus tout simplement.
Vous trouverez le lien de téléchargement (ou plusieurs s”il y a des versions différentes de ce thème), l’information sur la taille du fichier téléchargé, la date de réalisation du modèle et le lien à une démo en direct de ce modèle.

Si vous avez trouvé le thème qui vous plaît, achetez (si payant) et cliquez sur le lien de téléchargement pour télécharger le modèle sur votre ordinateur. Les thèmes sont livrés dans l’archive .zip, et utilisable immédiatement.

Deuxième étape: Installer le thème
La plupart des sites de thèmes proposent des thèmes compatibles pour les grands CMS comme WordPress, Prestashop, joomla…
Lorsque vous avez téléchargé le thème, vous devez décompresser le fichier .zip. Vous allez y trouver, la plupart du temps, les dossiers avec la documentation, les screenshots et le site. C’est à partir de là que commence le travail de personnalisation.
Si vous utilisez un CMS (WordPress…), importez votre thème non décompressé: le CMS se charge du reste !

Troisième étape: Modifier le thème
Si vous posséder un CMS, vous pouvez directement modifier le thème à l’aide de l’éditeur visuel prévu dans le CMS. Pour WordPress, c’est l’Editeur. Pour Prestashop, c’est Thèmes.

Pour les autres sites, vous devrez sans doute passer par un éditeur HTML.
Il y existe deux types d’éditeurs différents que vous pouvez utiliser.
Le premier est un éditeur HTML visuel qui ouvre le thème de même manière que s’il était ouvert dans un navigateur web tout en vous permettant de rédiger le contenu. Les rédacteurs visuels sont souvent appelés les WYSIWYG (“What You See Is What You Get” = ce que tu vois est ce que tu auras). Je vous conseille notamment NVU editor qui est gratuit et disponible pour Windows, Linux et Mac).

Le deuxième est un éditeur de code. A la différence de l’éditeur visuel qui présente le design, l’éditeur de code ne montre que le code HTML et CSS. Le code n’est principalement qu’un simple texte. Tout éditeur de texte peut être utilisé pour le modifier. En utilisant ce type d’éditeur, vous avez la complète maîtrise de votre site en langage brute.

J’espère que cet article aura pu vous aider. Vous pouvez créer un site avec des thèmes wordpress gratuit que vous pouvez trouver sur Internet.

Bonne soirée.

Julie