Texte de la vidéo
Bonjour à tous et bienvenue dans ce nouveau tutoriel. Aujourd’hui, je vais vous apprendre à créer un site avec les intelligences artificielles d’Hostinger. Alors, ce site en question, vous le voyez maintenant apparaître à l’écran. Tout a été créé par l’intelligence artificielle. J’ai donc imaginé le site d’une créatrice de bijoux pour cette première vidéo. Vous avez vu, je fais très simple : une page accueil, une page à propos et une page contact. Mais dans les prochains tutos, rassurez-vous, on va rajouter carrément une boutique en ligne, on va également rajouter une page de blog avec des articles, et bien sûr, au fur et à mesure des vidéos, on va étudier en détail tous les outils. Et je vais même vous présenter des outils externes qui vont grandement vous aider et qui sont totalement gratuits.
Allez, on perd pas davantage de temps, on attaque directement ce premier site.
Nous voici sur ma page de Hostinger. Vous avez probablement la même, sauf que si vous venez de vous inscrire, vous n’avez pas encore de nom de domaine gratuit. Personnellement, moi, le nom de domaine, je l’ai déjà pris : toptutopro.fr. Ça me sert entre autres pour les tutoriels. Alors, très important : vous travaillez avec le créateur de site d’Hostinger. N’utilisez pas votre nom de domaine gratuit tout de suite. Pour l’instant, on va travailler avec un nom de domaine temporaire automatique qui va vous être donné par Hostinger. Et au moment où votre site sera prêt, que vous voulez qu’il soit visible par tous, à ce moment-là, vous pourrez utiliser votre nom de domaine gratuit afin que votre site soit visible par tous.
Alors, pour créer un site, moi j’ai déjà utilisé cet hébergement plusieurs fois. Je monte ici sur la gauche, vous avez « web », vous cliquez sur la petite flèche pour ouvrir le sous-menu, et vous aurez « liste des sites et migration ». Vous sélectionnez « liste des sites ». J’ai tout nettoyé, j’ai supprimé tous les sites qui m’avaient servis pour les tutoriels précédents. Normalement, c’est ici que vous avez tous vos sites qui s’affichent.
Donc maintenant, je vais sur le petit onglet ici : « ajouter un site web ». Un nouveau sous-menu qui s’ouvre. On a plusieurs options. Vous voyez, on peut créer des sites avec WordPress. Ce qui nous intéresse ici, c’est d’utiliser le créateur de site de Hostinger. Je sélectionne. Nous arrivons sur une nouvelle page, et c’est là que tout va se jouer.
D’abord, saisir le nom d’une marque. Alors, je vous ai dit, j’ai imaginé une créatrice de bijoux, j’ai également imaginé le nom d’une marque. Le nom de la marque, c’est Dokuso. C’est un terme japonais, et je n’ai pas trouvé ça tout seul. En fait, j’ai utilisé une intelligence artificielle autre que Hostinger pour m’aider à créer tous les éléments que vous allez trouver dans ce site web. Il m’a aidé à créer des prompts pour justement créer des images. Il m’a aidé à créer des prompts pour créer des bijoux, et je lui ai même demandé de créer un prompt qu’on va rédiger juste ici dans la description du site.
Alors, cet outil gratuit, je vais vous en parler dans un prochain tutoriel — peut-être le prochain tutoriel. Allez, le prochain tuto, je vous parle de cette intelligence artificielle gratuite, et vous allez voir, c’est un assistant incroyable. Vous allez l’utiliser au quotidien, que ce soit pour créer un site web, pour vous aider à avoir des idées, ou tout simplement pour répondre à des questions que vous pourriez vous poser. Donc n’hésitez pas à vous abonner. Le prochain tuto, je crois que ça va vous décoiffer.
Alors donc, du site, je vais tout simplement coller le prompt qui m’a été créé par l’intelligence artificielle. Donc clic droit de la souris, coller. Et là, regardez, dans le prompt, on a le droit de mettre jusqu’à 700 caractères, et justement, j’ai dit à l’intelligence artificielle : « J’ai donné cette limite, il faut me faire un prompt avec 700 caractères maximum. » Je vous le lis rapidement : « Créer un site web simple et élégant pour une jeune créatrice de bijoux nommée Dokuso. Alors, là, je dois modifier, parce qu’il me met un accent sur le haut. Je ne veux pas de l’accent. Alors, le site doit inclure une page accueil, une page à propos, une page de contact. Style demandé : épuré, minimaliste, inspiré de l’esthétique japonaise et du bouddhisme moderne. »
On descend. « Utilise une palette de couleur douce : blanc cassé, gris clair, noir mat, touche de doré pâle. » On descend. « Intègre des éléments visuels subtils rappelant la culture japonaise : formes géométriques, symboles discrets, calligraphie stylisée, sans en faire de trop. Les photos futures montreront des bijoux minimalistes inspirés par les caractères japonais. » Donc là, il marque quelques styles, porter de manière lifestyle, ça la rigueur, j’en ai pas besoin. Porter de manière lifestyle, je vire, et la dernière partie non plus, je n’en ai pas besoin. Je vais supprimer. Voilà, avec ça, je pense que c’est largement suffisant.
On a 519 caractères sur 700, et maintenant on va voir un petit peu ce que ça donne. Grand suspense ! Je clique sur « créer mon site ». On laisse Hostinger travailler un petit peu. Il est en train de préparer le contenu, de créer des images, enfin il crée toute la mise en page. On va le retrouver dans moins d’une minute. Hé bien, voyez, regardez, il est déjà en train de tout mettre en place. Boum, ça y est, c’est déjà prêt.
Alors, pour l’instant, qu’est-ce que nous avons ? Une première proposition avec « accueil », « à propos », « portfolio »… Ben ça, j’en ai pas besoin, et « contact ». Ça, la rigueur, portfolio, je pourrais le virer. Alors, je descends, je regarde un petit peu ce qu’il me propose. Il m’a mis des images, des mises en page. Tout est déjà prêt, super. Des avis clients, des bijoux élégants. Alors, avis client, je vais pouvoir le virer aussi pour l’instant, puisque je n’ai pas encore intégré la boutique, mais on va voir dans un prochain tuto.
Donc page d’accueil, c’est prêt. Il va falloir que je modifie ici. C’est une belle couleur, mais je voudrais avoir une photo. À propos, voilà quelques images. Toujours la même chose, images de bijoux. Un petit peu de texte. Portfolio, ben je vais pas m’en occuper, mais en fait, ce seront juste des photos qui vont être proposées. Ça, je pourrais le créer moi-même, un autre portfolio par la suite. Et également la page de contact, ici très minimaliste : un formulaire de contact, une image, une Google Map. De nouveau, une image, et bien sûr, tout le pied de page ici qu’on peut arranger, modifier. Et on a aussi la version téléphone. Je clique sur la version téléphone, je regarde ce que ça donne.
Donc on a bien deux versions qui sont créées : une version pour ordinateur, une version pour le téléphone. Deux options. Je suis satisfait ou pas satisfait ? Si je suis satisfait, je clique sur « continuer », et on va estimer qu’ici, ben je suis pas tellement content sur la palette de couleur qui est donnée, sur les images. Donc je vais tout simplement marquer « créer un nouveau site ». Je reviens donc ici à la description du site, et par exemple, je pourrais marquer ici en bas : « ne pas faire de pages portfolio, juste les trois pages accueil, à propos et contact ». On est toujours en dessous des 700 caractères, et je clique de nouveau sur « créer mon site ».
Il recommence, donc on va juste patienter moins d’une minute, et nous avons une nouvelle proposition. Et cette fois-ci, regardez : accueil, à propos, contact. On a les trois pages. J’aime bien. Il y a une petite vidéo qui est placée, ça peut être assez sympa. On pourra changer la vidéo. Donc là, on est sur la page d’accueil. Il y a déjà directement la possibilité de contacter. On descend. Voilà des bijoux, des couleurs claires, des bijoux minimalistes. Ça me plaît déjà davantage au niveau de la mise en page. On va regarder à propos. Oui, des couleurs claires, sympa, du gris. On va regarder le côté contact, et là, on a déjà vraiment quelque chose. On a déjà une base qui va nous permettre de travailler. Ça va nous éviter d’avoir le fameux concept de la page blanche et se dire : « Ben zut, par quoi je vais commencer ? Comment faire ? » Là, vous avez déjà une structure qui est prête. Je suis satisfait. J’ai quand même vérifié vite la version téléphone. Super, tout est bon au niveau du téléphone. Apparemment, accueil, c’est très bien. Ça donne vraiment très bien. Quelque chose de simple, d’efficace. Éviter les sites internet qui soient trop surchargés. Il faut que les gens puissent véritablement trouver directement l’information qu’ils cherchent.
Donc je vais revenir sur la partie ici ordinateur, et comme je suis satisfait, je vais tout simplement cliquer sur « continuer ». Nous arrivons donc sur un nouvel espace qui va nous permettre de modifier totalement le site internet. C’est ce que nous allons voir dans ce tutoriel : comment modifier les éléments principaux de ce site internet.
Alors, première étape, je vais déjà changer de page. Là, nous sommes sur la page accueil, mais on va être embêté avec cette vidéo qui tourne en boucle. Donc je vais aller, par exemple, sur contact. Voilà, on y voit déjà un peu plus clair comme ça. Et regardez ici, sur la gauche, vous avez plusieurs éléments qui sont disponibles.
Alors, le tout premier élément ici en haut à gauche, c’est juste pour vous aider, vous donner un peu une chronologie dans les différentes étapes pour créer votre site internet. Vous êtes pas spécialement obligé de suivre ça à la lettre. Donc vous cliquez, et là il dit : « Ben voilà, commencer la création de votre site. » Là, il vous propose de modifier le texte d’en-tête, modifier les images, modifier ceci, modifier cela. Enfin, ça n’a pas tellement d’importance. On peut fermer.
On a ici le « + », c’est ça qui va vous permettre de rajouter des différents éléments dans vos sections. Alors, que je vous explique avant ça : qu’est-ce qu’une section ? Là, ici en haut, nous avons ce qu’on appelle l’entête. C’est là qu’on a le logo, c’est là qu’on a tous les éléments du menu : page d’accueil, propos, contact. On pourra également rajouter des réseaux sociaux. On a ici une première section avec un titre, un titre, un formulaire de contact, une photo. Si je continue à descendre, regardez ici, on a une séparation. On passe à l’autre section. Dans l’autre section, on a un titre, on a un texte, on a de nouveau des titres ici, et on a un Google Map. Et ici en bas, vous avez le pied de page. Ce sont des choses qui ne bougeront jamais par rapport aux nouvelles pages que vous allez créer. Vous aurez systématiquement ici le pied de page, et en haut, vous aurez directement l’entête avec le logo et le menu.
Donc on revient sur le fameux « + » ici en question. Ajouter un élément. Et ça veut dire ici : ben on a différents éléments. On peut rajouter du texte, des boutons, ajouter au panier s’il s’agit de la boutique en ligne. On peut rajouter des images, des galeries, des vidéos, s’abonner… Enfin, il y a pas mal de choses qu’on peut rajouter. Il suffit de prendre un élément. Je vais par exemple prendre l’élément texte, et vous le glissez tout simplement dans la section. Vous relâchez, et voilà, vous avez votre élément qui est placé. On en a pas besoin pour l’instant. On va le supprimer.
Donc le « + » ici, ça vous permet de rajouter des éléments dans les sections. En dessous, nous avons le menu du site. Quand je clique sur « menu », et ben on a les trois pages : page accueil, page à propos et la page contact. On peut modifier le menu. Regardez, donc on a accueil, à propos, contact, et je pourrais dire : « Tiens, je voudrais que le contact apparaisse avant propos. » Donc je clique, je le remonte. Je voudrais que le contact apparaisse avant propos, et regardez ici, maintenant on a accueil, contact, à propos. Je vais remettre contact là où il était. Je le redescends. Super. Et là, on a de nouveau accueil, à propos, contact. Et en bas, on a un bouton qui va nous permettre d’ajouter, de créer une nouvelle page.
On a ici le style du site. Donc on a les couleurs. On va pouvoir régler toutes les couleurs qu’on veut. On va pouvoir régler toutes les polices de caractère, ça va nous être très utile. On peut également régler les boutons, donner un style particulier au boutons, et on peut également gérer les animations. Et tout ce qu’on va changer ici va se répercuter sur l’ensemble du site. C’est vraiment un outil très pratique. Je referme.
Alors ici, c’est la bibliothèque avec toutes les intelligences gratuites mises à disposition par Hostinger. Ici, on le verra plus tard. Ça va vous permettre de rajouter une boutique à votre site web si vous désirez rajouter une boutique. Et ici, nous avons plein de paramètres qui sont disponibles. On va les voir par la suite également. Je vais faire des tutos spéciaux. On peut rajouter un blog avec des articles. Ça, ça fera partie d’un autre tutoriel. On peut créer un tableau de réservation. Vous êtes coiffeur, esthéticienne ou un autre boulot du genre, les gens peuvent réserver un rendez-vous directement en ligne, et même payer directement en ligne avant le rendez-vous. Vous avez les formulaires de contact, vous avez des tableaux d’analyse qui vont vous donner des performances par rapport à votre site web. La médiathèque. On peut également faire des sites multilingues : une version française, une version anglaise, une version espagnole, que sais-je encore. Enfin, tout ce menu, on va le voir en détail dans d’autres tutoriels.
Donc vous avez ici sur la gauche tous les éléments qui vont vous permettre de gérer le site et de gérer éventuellement votre boutique en ligne.
Première étape qu’on va faire, c’est déjà s’occuper ici de l’entête. Donc je vous ai dit au niveau de l’entête, il y a le logo et il y a également ici le menu, mais on peut améliorer ça. On peut également améliorer le design. Alors, pour qu’on ne soit pas distrait par des éléments, je vais carrément créer une nouvelle page. Pour se faire, je vais donc ici sur la gauche. Je vais dans « menu du site ». On a le menu avec les trois pages existantes, et je descends ici en bas et je clique sur « ajouter une page ». Rassurez-vous, création de page, création de section. Je vais faire des tutos spécifiques là-dessus.
On a donc à disposition des pages qui sont déjà prêtes à l’emploi, des templates en quelque sorte. Nous ici, on va juste créer une page vide. La page vient d’être créée. Regardez ici, on a bien la barre avec le menu. On a bien dans le menu « nouvelle page vide » qui a été créée. On a pas de section, et on a juste directement le pied de page.
Alors justement, le nom qui doit apparaître dans le menu. Là, on a « nouvelle page vide ». Je vais le nommer « tempo », pour temporaire, puisqu’on va virer cette page par la suite. On va pas s’embêter davantage. On l’a juste nommé. Je vais cliquer sur « sauvegarder ». Vous voyez, on a bien la page « tempo » qui apparaît ici. Je peux maintenant fermer ceci. On va travailler à partir de la page « tempo », et pour y voir plus clair, je vais glisser une section.
Donc regardez, je monte ici légèrement. Bom, j’ai un onglet qui apparaît : « ajouter une section ». Je clique. On retourne sur le même type de menu que pour les pages, avec plusieurs modèles qui sont mis à disposition. Des modèles de section pour à propos, des modèles de section services, des modèles pour des catégories de produits, ça c’est plutôt au niveau de la boutique en ligne, des modèles pour des formulaires de contact, des modèles de témoignage. Enfin, il y a déjà énormément de modèles qui sont prêts à l’emploi avec des designs qui peuvent être assez sympas. Il suffit vraiment de les glisser. Vous choisissez lequel vous plaît, et vous glissez.
Ici, on va juste créer une section vide. Voilà, la section est vide. Regardez en bas de la section, je peux rajouter une nouvelle section, où je peux modifier. Regardez, la double flèche qui apparaît ici. Je peux modifier la taille de la section. Je peux réduire sa hauteur, ou je peux au contraire augmenter sa hauteur. Je vais augmenter sa hauteur pour que ça prenne la pleine page. Je clique sur la section, je clique sur « modifier la section », et donc par défaut, pour l’instant, l’arrière-plan, la couleur, c’est blanc. Je pourrais décider de mettre une image, je pourrais décider de mettre une vidéo. Pour l’instant, on va juste mettre une couleur, et je vais mettre une couleur un peu grisée. Voilà, comme ça, on va y voir plus clair pour les menus qu’on va ouvrir. Ok, c’est bon pour moi.
Et on va maintenant pouvoir s’occuper ici. Regardez, on a l’entête. Donc mon curseur est placé sur « en tête ». Il suffit que je clique soit sur le bouton « en tête », soit n’importe où sur l’entête. Donc sur cette barre ici, je clique, et regardez ici sur la droite, j’ai un menu qui vient de s’ouvrir : « modifier l’entête ». Pour l’instant, on clique sur « modifier l’entête », et là j’ai un nouveau menu qui s’ouvre. Et maintenant, vous comprenez pourquoi j’ai mis un arrière-plan gris : au moins, on n’est pas distrait, et on voit bien le menu.
Alors, au niveau du menu, qu’est-ce qu’on a ? On a d’abord la mise en page. Au niveau de la mise en page, on peut épingler l’entête. D’ailleurs, épingler l’entête est sélectionné. C’est quoi, l’entête d’épinglée ? Regardez, je clique ici sur « aperçu ». Voilà ma page, et quand je descends au niveau de ma page, je peux faire défiler des éléments. Mon menu reste bien ici en haut, et il est visible. Je clique ici sur la gauche, retour à l’éditeur. Voilà, je suis revenu sur mon poste de travail. Je reclique de nouveau sur « en tête », « modifier l’entête », et épingler l’entête, cette fois-ci, je vais le décocher. Je sauvegarde le travail. Je clique sur « aperçu », et cette fois-ci, regardez, mon entête ici, lorsque je descends, mais l’entête disparaît. Voilà, voilà la différence entre épinglé et non épinglé. Moi personnellement, je vais le laisser en épinglé. Donc retour à l’éditeur, « en tête », « modifier l’entête », « en tête épingler ».
En dessous, on peut jouer sur les espacements entre les liens dans le menu. On va pas s’en occuper tout de suite. Ce qui va nous intéresser ici, c’est d’abord la mise en page disponible. On a regardez ici le logo, le menu à droite apparaîtra lorsque vous allez créer une boutique en ligne, le panier pour la boutique en ligne, et ici nous avons les réseaux sociaux qui peuvent apparaître. C’est la configuration que nous avons pour l’instant. On a bien le logo, on a bien le menu, et ici à droite, si on crée une boutique en ligne, on aura le panier qui apparaîtra, et si on rajoute des réseaux sociaux, les réseaux sociaux apparaîtront ici sur la droite.
On peut choisir une autre configuration, c’est-à-dire logo, menu sur la gauche, et le panier et les réseaux sociaux sur la droite. Je sélectionne, et regardez automatiquement mon menu s’est placé à gauche, juste à côté de mon logo. Où je peux décider de centrer logo à gauche, menu au centre, panier et réseaux sociaux sur la droite. C’est l’option que je vais garder. Je vous laisse découvrir les autres options. Vous pouvez également choisir d’avoir le logo en haut, et juste en dessous le menu, avec le panier et les réseaux sociaux sur la droite.
Ensuite, on a un autre élément ici qui s’appelle « élément », afficher le logo. Oui, on affiche le logo pour l’instant. Il est remplacé juste par le titre du site Dokuso, le titre qu’on a noté au moment de la création du site. Il me demande si je veux afficher les icônes sociales, celles qui doivent apparaître à droite, mais oui, bien sûr, je veux les icônes sociales. Et là, par défaut, il m’a mis Facebook, Instagram, LinkedIn et X. Et il me demande également si je veux afficher un bouton. Boum, et là j’ai un bouton qui apparaît. Le bouton, par exemple, ça peut être une inscription à une newsletter, mais bon, ça fait un peu surcharger. Je vire le bouton.
Donc pour l’instant, au niveau de la mise en page, on a bien le logo, on a bien le menu. On n’a pas le panier, mais ça on s’en occupera dans un autre tuto lorsqu’on va créer la boutique en ligne. Mais on a bien les réseaux sociaux. Mise en page, c’est bon. Élément, pour l’instant, c’est bon.
On va attaquer sur « logo ». Je sélectionne « logo ». Pour l’instant, on a aucun logo. L’emplacement du logo est remplacé par le titre. Je veux placer mon logo. Donc je vais cliquer ici sur « remplacer l’image ». L’image par défaut, c’est Dokuso, mais j’ai déjà créé un logo avec toujours une intelligence artificielle gratuite qui est hors de Hostinger, mais je vous en parle dans le prochain tutoriel.
Donc je clique sur « télécharger des fichiers ». Je vais aller sur mon disque dur externe, top tuto web, et pour l’instant, j’ai tout placé dans mes roches numéro 3. On a la vidéo d’introduction, et on a les photos. Voilà les photos. J’ai déjà créé une photo pour les ateliers que je vais ensuite rajouter au site. J’ai également créé des photos de bijoux. Enfin, ce n’est pas moi qui ai créé ces photos de bijoux. Elles ont tout simplement été créées par l’intelligence artificielle. C’est juste histoire de meubler un petit peu la future boutique en ligne. Et avec l’intelligence artificielle, j’ai également demandé de me créer un logo. Voilà le logo en question. Il est sélectionné, et je clique sur « ouvrir », et voilà, il est téléchargé. Maintenant, je peux cliquer sur « sélectionner », et voilà mon logo apparaît.
Enfin, maintenant, ici, au niveau de la largeur du logo, je peux décider de l’agrandir ou de le rétrécir. Je vais mettre à 100, par exemple. Ça me semble très bien comme ça. Si vous n’avez pas de logo, vous pouvez bien sûr remplacer par du texte, et là, vous pourrez choisir la police de caractère, la taille, la couleur du texte, mais nous, on va rester sur une image.
On va ensuite sur « style », et là, au niveau du style, il me donne trois options. On va d’abord travailler sur l’entête. Ensuite, on peut travailler sur le bouton, au cas où on aurait rajouté un bouton ici, mais on en a pas rajouté. Et on peut également travailler sur les icônes sociales.
Pour l’instant, on reste sur « en tête ». Le fond de l’entête, pour l’instant, il est blanc. Je vais le mettre plutôt peut-être en grisé. Donc ici, ce sont toutes les couleurs du site. Lors de la création du site, il a fait des couleurs par défaut. Ce sont véritablement les couleurs du site internet. Où je peux créer ma propre couleur, mais je vais plutôt aller prendre directement dans les couleurs du site. Je vais sélectionner par ce modèle. Cette couleur, c’est très bien. On peut décider que l’entête sera transparent, mais ça, ça ne m’intéresse pas. Alors, on peut également changer les polices de caractère pour le menu qui apparaît ici. Il suffit de cliquer, et vous allez pouvoir choisir votre police de caractère. Vous allez pouvoir également modifier la couleur. Si jamais vous ne voulez pas du noir, vous vouliez que ce soit du blanc ou une autre couleur, vous pouvez également modifier la couleur ici. Mais je vais laisser telle qu’elle. On a également ici un bouton pour modifier les styles de texte, mais ça on va le voir par la suite. C’est vraiment ici dans les réglages du site web. Donc on ne s’en occupe pas pour l’instant.
Donc on a fait l’entête. Je clique sur la petite flèche. Le bouton, on n’en a pas. On ne touche pas maintenant. On va attaquer sur « icône sociale ». Je clique sur « icône sociale ». On peut rajouter un nouveau lien. Je rajoute, par exemple, le lien vers ma chaîne YouTube. Je clique sur « OK », et regardez automatiquement ici, il m’a rajouté le lien. Par contre, j’ai fait une erreur. J’ai marqué « tout tube », donc je clique sur « modifier », « T », « Y », « ok ». Et voilà, comme j’ai bien marqué maintenant « youtube.com », regardez automatiquement le logo de YouTube apparaît bien ici en haut à droite. C’est super.
Donc Facebook, vous rajoutez le Facebook si vous avez. Instagram, LinkedIn. Par contre, Twitter, non. Facebook, je dois vous avouer que je l’aime de moins en moins. Je vais également supprimer. Et vous pouvez choisir bien sûr l’ordre ici. Par exemple, je voudrais que YouTube arrive au début. Je le remonte. Voilà, d’abord YouTube, ensuite LinkedIn, et ensuite Instagram. Donc regardez ici, on a bien YouTube, LinkedIn, Instagram. Les icônes sont un peu petites. Ben, on peut les modifier, et par exemple, les mettre à 22 à la place de 20. Couleur de l’icône en noir. On peut choisir une couleur un peu moins agressive, un petit gris léger, ou encore plus léger. Voilà, un petit gris comme ça. Ça me convient parfaitement.
On peut revenir ici sur « mise en page ». Je peux vous montrer ce que ça donne lorsqu’on place le logo ici en haut. Ça me plaît pas trop. Je vais reprendre un petit peu ce que j’avais choisi. Là, on est sur du logo au milieu, menu à gauche. Oui, pourquoi pas à la rigueur.
Alors, n’oubliez pas qu’on a également les espacements des liens. On a les espacements supérieurs et inférieurs. Voilà, pour donner un peu plus de volume. Comme ça, c’est très bien. Espacement des éléments, on en a aucun. Donc pour l’instant, ça reste tel quel.
Et ben, messieurs dames, je suis heureux de vous apprendre que nous avons terminé avec l’entête du site internet. Je vais cliquer sur « sauvegarder ». On n’a plus besoin de cette page. Je vais donc dans « menu du site ». Voilà la page tempo. Je clique sur les trois petits points, et je clique sur « supprimer », « supprimer ». On est revenu à notre page d’accueil, notre page à propos, et vous voyez le menu fonctionne parfaitement sur les trois pages. Il y a vraiment aucun problème. On clique sur « sauvegarder ».
On va regarder rapidement ce que ça donne au niveau du téléphone. Je vais cliquer sur « modifier l’entête ». Alors, espacement des éléments. Ben là, il joue. Espacement des liens. Je peux peut-être réduire légèrement, mais il faut quand même laisser de l’espace pour que les gens puissent appuyer avec leurs doigts, sans que deux titres du menu se superposent.
Alors, espacement, je peux réduire un petit peu. Voilà pour le menu. Pour la mise en page, donc c’est logo à gauche. Ou je peux choisir l’autre option ici, ou encore l’autre option. Je vais plutôt choisir cette option avec le logo au milieu. Alors, l’alignement des liens des menus à droite. Je vais plutôt mettre à gauche. Au niveau du logo, bah la taille reste telle qu’elle. Et au niveau du style, rien à bouger non plus. Je ferme. Je clique sur « sauvegarder ». Je clique sur « aperçu », et voilà donc hein. J’ai mon logo, j’ai le menu. Je clique, le menu s’ouvre : accueil, à propos, contact, et mes réseaux sociaux.
Je clique maintenant sur l’ordinateur. On a bien le menu, le logo, les réseaux sociaux. Je peux maintenant revenir à l’éditeur. Je retourne sur la page d’accueil, et on va justement s’occuper de modifier un petit peu des éléments au sein d’une section, histoire que vous voyez un petit peu comment fonctionnent les outils. Vous allez voir, c’est extrêmement simple. Vous pouvez modifier chacun des éléments. Je pense que je vais même virer éventuellement la vidéo, histoire d’avoir une image un peu plus statique, parce que faire un tutoriel avec des images qui bougent comme ça sans arrêt, ça peut être un petit peu perturbant et fatiguant.
Nous allons donc effectuer les modifications sur cette première section ici, dans laquelle il y a cette fameuse image de fond qui bouge sans arrêt. Donc je clique tout simplement n’importe où dans la section, et là, j’ai de nouveau un menu qui vient de s’ouvrir avec « modifier la section ». Je sélectionne « modifier la section ». On a justement cette fameuse vidéo ici, où je peux sélectionner « image », où je peux sélectionner « couleur ».
Alors, on va sélectionner « image ». On a une image qui a été placée par défaut, et je vais remplacer cette image. Je vais placer une image que j’ai créé avec l’intelligence artificielle. Donc je clique sur « télécharger des fichiers ». Disque dur externe. Je retourne dans mes roches numéro 3, dans les photos. Et là, j’ai « atelier » et j’ai cette grande photo ici. Je clique sur « ouvrir ». La photo est téléchargée. Je me place sur la photo. Je clique sur « sélectionner », et voilà, la photo remplace la vidéo.
On peut jouer sur l’opacité de l’arrière-plan. Donc là, c’est une opacité à 100 %. On ne voit plus du tout la photo. L’opacité à 0 %, là, on voit la photo telle que vous l’avez créé, mais on peut légèrement assombrir. Voilà comme ça. C’est pas mal, et ça permet de mettre un peu plus le texte en avant, ce qui est important pour la bonne visibilité de vos visiteurs.
On a ici un arrière-plan fixe. Pour l’instant, il n’est pas sélectionné. Je vais sauvegarder. Je vais dans « aperçu », et voici la page. Donc quand je défile, l’image disparaît également au niveau du menu. Remonte tout à fait normalement. Je reviens à l’éditeur. Je vais sélectionner maintenant « arrière-plan fixe ». Je coche la petite case. Je clique de nouveau sur « sauvegarder ». Je clique sur « aperçu », et là, regardez automatiquement l’image reste statique, et puis petit à petit, la section d’en bas couvre la photo qui est statique, donc qui est figée. Ça donne un effet assez sympa. Quoi que je préfère mettre cet effet plutôt sur des sections qui se trouvent au milieu, mais bon, ici en plein début, c’est pas mal non plus. Je vais donc laisser cet effet. Ça me convient très bien.
Je reviens sur « retour à l’éditeur ». Position de la photo : à gauche, milieu, mais ici la photo la pleine dimension de la page. Donc de cette manière, ça me convient parfaitement. Je peux fermer maintenant cette fenêtre, et on va travailler sur chacun des éléments présents sur cette fenêtre.
On a ici, regardez, des petites étoiles qui ont été rajoutées. On a également ici un texte qui a été rajouté. Ici, on a de nouveau un texte. Ici, également du texte. Ici, un bouton. Tous ces éléments, on peut les modifier, on peut également les déplacer.
Donc déjà ici, évaluation des clients. Euh, non, ça ne m’intéresse pas. Donc je clique sur la poubelle. Après avoir supprimé les étoiles, je vais supprimer ici le petit texte. Poubelle. Alors, bijou épuré par Docuso. Je vais le remonter ici, et vous voyez lorsque vous déplacez un élément, vous avez une petite grille qui apparaît en surbrillance. Ça vous permet de positionner, d’avoir des repères qui s’affichent.
On peut bien sûr modifier le texte. Je vais déjà modifier cette partie, par exemple, marquer « no bijou zen ». Je peux virer également « Docuso ». Alors, au niveau du style, je vais pas y toucher. On va voir ça plus tard.
Regardez ici, « titre 1 », « titre 2 », « titre 3 », et automatiquement, il y a des dimensions spécifiques qui sont données. On va pouvoir modifier cela par la suite et définir notre taille de police de caractère pour l’ensemble du site. On a la police de caractère du « outfit ». On peut bien sûr sélectionner une autre. On va, par exemple, mettre du « roboto » en bold. Du coup, c’est un peu trop grand, 72. On va réduire à 64. On peut mettre en gras, en italique, en souligner. On peut également intégrer un lien directement sur le texte.
Donc j’ai fini avec la personnalisation. Je vais descendre « no bijouen ». Je vais cliquer sur le petit « + » ici. Je vous ai déjà expliqué que ça permet de rajouter un élément. Je clique sur le « + », je vais rajouter un élément texte. Je le glisse ici. Je relâche. Je peux maintenant le déplacer, modifier le texte. Je veux un « titre 2 », et je vais mettre « Docuso ». Je vais le monter à 72. Je vais le mettre en blanc. Je pourrais le centrer. Et bien sûr, je peux agrandir ici ou réduire. Mais de cette manière, c’est très bien. Il me semble bien centré par rapport à nos « bijouzen ». Je vais remonter un peu les « bijouzen ».
Alors, on a du texte ici. « Découvrir l’élégance minimaliste de nos créations unique inspiré par la culture japonaise ». Je peux également agrandir, modifier le texte. Il est en 16 pour l’instant. C’est un peu petit. 16. On va le passer à 18. Je vais également le mettre en centré. Peut-être même monter à 24. J’ai agrandi un peu. Oui, comme ça, ça me paraît déjà un peu mieux.
Donc du coup, « non », je vais le centrer également, et « Docuso » également centré. Voilà comme ça, tout est bien centré. Et du coup, je vais bien sûr prendre le bouton « contact » et le centrer avec les autres éléments. Même chose pour le bouton « contact ». On peut modifier le bouton. Donc je clique, « modifier ». Là, on a tous les éléments qu’on va pouvoir rentrer. On va pouvoir également modifier le style. Par exemple, au niveau de la couleur de remplissage, je vais mettre cette couleur. Par contre, la couleur du texte n’est plus visible. Donc je vais tout simplement changer également la couleur du texte. Un petit gris comme ça.
Donc je peux fermer ici. Sur la droite, nous avons le formulaire de contact. Même chose. Il suffit de cliquer sur l’élément. Vous cliquez sur « modifier le formulaire », et vous allez pouvoir modifier tous les éléments : général, champ, bouton, style, animation. Je vais faire un tuto spécial sur ce fameux formulaire de contact.
On continue à descendre. Nous avons « à propos de Docuso ». Vous pouvez modifier de nouveau le texte. Vous avez vu, chaque élément, vous pouvez le modifier, vous pouvez le déplacer, vous pouvez tout changer. Je vais travailler ici, par exemple, sur la photo. Même chose. Je peux décider de modifier l’image. Je vais remplacer l’image. Je vais télécharger à partir de mes fichiers. Je vais aller dans mes bijoux. Je vais prendre n’importe lequel des bijoux. Celui-là, « ouvrir ». Je vais cliquer sur « sélectionner », et voilà le bijou a été remplacé. Là, il a une forme carrée. Ça ne me convient pas tellement. Je vais aller dans « style », je vais réinitialiser les proportions. Là, il m’a mis les réelles proportions de la photo. Donc aucun problème. C’est trop grand. Ben, je vais tout simplement réduire et ensuite je vais placer la photo, peut-être un peu plus sur la droite. Peut-être ici. Toujours dans le style, je vais pouvoir mettre un petit arrondi. Toujours l’opacité possible, mais ici je n’en mets pas. Il y aura possibilité de placer une action sur la photo. Donc lorsque les gens vont cliquer, il peut y avoir une action qui va se passer. On peut jouer également sur la forme. Regardez par exemple. Je vais choisir cette forme, ou cette forme. Donc on a quand même pas mal de designs qui sont à disposition. On va par exemple un léger fondu. Et ça me paraît assez sympathique comme ça.
Ensuite, toujours la même chose, hein. Vous passez sur une section suivante, par exemple. Vous n’êtes pas intéressé par cette section. Bah tout simplement, vous cliquez n’importe où sur la section, et vous cliquez sur la poubelle. Et boum, la section a disparu. Vous voulez la remplacer par une autre section ? Bah tout simplement ici, on revient entre les deux sections. On clique sur le petit bouton qui s’affiche. Une section. Au niveau des sections, on a tous les modèles qui sont présentés. Par exemple, je vais mettre une vidéo. Du coup, il me présente plusieurs modèles disponibles pour présenter mes vidéos. Je vais prendre, par exemple, ce modèle ici où est vidéo à gauche et texte à droite. Je sélectionne, et boum, automatiquement ça a été placé. J’ai ma vidéo à gauche et j’ai mon texte à droite.
Toujours même chose. Je clique. Je peux modifier le texte. Je peux le déplacer. Et au niveau de la vidéo, je clique, « modifier la vidéo ». Il me demande le lien de la vidéo. Je vais sur ma chaîne YouTube principale, par exemple, Top Tut. Je sélectionne la vidéo qui m’intéresse. Je sélectionne le lien. Clic droit, copier. Je reviens sur le site, et dans le lien de la vidéo, je supprime cette partie-là. Je fais un coller, et voilà. Et voilà la vidéo apparaît directement. Et là, on peut faire les réglages pour un démarrage automatique, la diffusion en boucle. On peut également placer une animation, mais comme d’habitude, on verra ça en détail dans d’autres tutoriels beaucoup plus complets sur chacun des outils que je suis en train de vous présenter ici.
Je peux fermer ceci. On a les avis clients. Enfin, vous avez compris un petit peu le principe. Dans un autre tuto, on verra aussi comment aménager ce fameux pied de page. C’est un élément qui est très important également. On va cliquer ici sur « sauvegarder ». On va aller voir directement l’aperçu. Donc voilà la page d’accueil qu’on a légèrement modifié. Je commence à descendre. Les éléments sont bien présents. On a bien ma vidéo qui est présente. Boutique en ligne. Alors attention, tuto ça fonctionne parfaitement avec client. Et ici, le pied de page. Et on a bien une des sections qui a été supprimée. On va bien sûr toujours vérifier, très important, par rapport au téléphone. Est-ce que ça donne bien ? Je descends. Tout à l’air en ordre. Il y a la vidéo, avis client. Tout semble nickel. Il y a vraiment aucun problème. Je peux revenir à l’éditeur. Je peux revenir à la version ordinateur. Et je crois qu’on a quand même fait pas mal de choses dans ce tutoriel aujourd’hui. On a fait le tour des éléments principaux. On va retourner en détail sur chacun des éléments dans d’autres tutoriels.
J’ai bien sûr besoin de votre support pour faire vivre cette nouvelle chaîne. Donc n’hésitez pas à liker. N’hésitez pas à commenter. Et surtout, n’hésitez pas à vous abonner si ce n’est pas encore fait, parce qu’il y a d’autres tutoriels qui vont arriver très bientôt. Et si vraiment c’est un outil, le créateur de site d’Hostinger, si vraiment c’est un outil qui vous plaît, parce qu’il y a vraiment pas mal de potentiel, surtout avec l’hébergement d’Hostinger, vous pouvez créer des sites très simples pour vendre quelques produits. Vous pouvez créer également des sites beaucoup plus complexes, par exemple avec WordPress, Elementor, que je présente dans d’autres tutoriels également. Donc voilà, beaucoup de potentiel avec le créateur de site d’Hostinger.
Si vous prenez un hébergement sur Hostinger, n’oubliez pas de passer par mon lien d’affiliation. Ça aussi, ça soutient fameusement la chaîne, et ça me permet de continuer à proposer gratuitement du contenu et de vous aider, pourquoi pas, à générer vous-même des revenus en ligne. C’est un petit peu ça le but du jeu. Donc n’oubliez pas. Le prochain tutoriel, je vais vous présenter une intelligence artificielle gratuite qui ne dépend pas de Hostinger, mais qui va vous aider énormément pour générer du contenu, pour répondre à vos questions, pour trouver des idées. Enfin, moi personnellement, c’est devenu mon outil du quotidien. Je l’utilise fréquemment. Je pense que cet outil devrait vous plaire. D’ici le prochain tuto je vous souhaite le meilleur qui soit et je vous dis « Byebye »…
