Créer et concevoir un site internet interactif avec Webflow flow

1. Introduction: Holy Gus, êtes-vous intéressé par la création et conception d'un site Web TreEd interactif à l'aide de Webflow ? Si la réponse est oui, le cours est peut-être pour vous. Donc, tout d'abord, nous allons obtenir notre modèle Tree D auprès de Spline Ensuite, nous allons intégrer le modèle Tree D au site Web. Ensuite, nous allons également animer le modèle Tree D. Regardez ça, les gars. Très cool, non ? Dans le premier projet, nous allons donc créer un site Web de portfolio professionnel. Alors regarde ça. Dans le deuxième projet, nous allons créer une page d'accueil pour un produit. Regarde ça. Et dans le troisième projet, nous allons créer un site Web pour un restaurant. Regarde ça. En outre, nous allons également créer un formulaire de réservation en ligne pour le site Web de notre restaurant à l'aide de Typeform Donc, si vous cliquez sur ce bouton, passez une commande, vous serez redirigé vers le formulaire de réservation en ligne. OK. Une fois le site Web créé, nous allons également effectuer un audit SEO à l'aide de SEOptimer et Zambras et nous allons également créer un site Web de profil d'entreprise à l'aide de Webflow AI nous allons également effectuer un audit SEO à l'aide de SEOptimer et Zambras et nous allons également créer un site Web de profil d'entreprise à Site Builder Il vous suffit de rédiger un simple bal et de cliquer sur Générer et en moins d'une minute, IA va vous générer un beau site Web comme celui-ci. Regarde ça. 2. Trouver un modèle 3D sur une spline ine: Bon sang, bon retour sur le parcours. Dans cette vidéo, nous allons créer des modèles Tre à l'aide de Spline OK, alors maintenant, commençons. Tout d'abord, vous devez créer votre compte. Donc, je vais juste m' inscrire en utilisant mon compte e-mail, les gars. OK, comme vous pouvez le voir maintenant, nous allons être redirigés vers le tableau de bord. OK, donc si vous faites défiler la page vers le bas, il y a plusieurs tutoriels vidéo. Donc, si vous avez du temps libre, je vous recommande vivement de regarder ces vidéos. Ils sont très utiles. Et ici, nous avons également plusieurs projets intéressants que nous utilisons tous les deux avec Spline Donc, si vous êtes curieux, vous pouvez cliquer sur l'un de ces projets, les gars. OK, maintenant commençons. En fait, deux options s'offrent à vous. La première option consiste donc à créer le modèle de tendance à partir de zéro. Et la deuxième option consiste à utiliser l'un des modèles Triny dans les sections de la bibliothèque, puis à le personnaliser comme bon vous semble Tu peux changer la couleur, tu peux changer le style. Vous pouvez modifier la taille. Tu peux faire ce que tu veux, non ? Il suffit donc de cliquer sur Nouveau fichier, et vous serez redirigé vers la page d'édition. Si vous voulez repartir de zéro, suffit de cliquer sur cette icône, il vous suffit de cliquer sur cette icône, et vous pouvez commencer par plusieurs formes . Par exemple, comme un rectangle, ellipse, un triangle, une étoile du Pentagone Vous pouvez choisir la forme que vous voulez. Mais si vous n'avez pas d'expérience préalable dans la création de modèles TreeD, je vous recommande vraiment d' utiliser la bibliothèque, n'est-ce pas ? Il suffit donc de cliquer sur Bibliothèque. Comme vous pouvez le constater, il existe de nombreux modèles TD que vous pouvez utiliser. Bien, nous allons maintenant explorer le modèle TD que nous voulons utiliser pour notre projet, n'est-ce pas ? Eh bien, en fait, vous pouvez également ouvrir la bibliothèque ici, alors cliquez simplement sur Bibliothèque. Et je vais l' ouvrir dans l'autre onglet. Comme vous pouvez le constater, il y a deux sections principales. La première section est donc consacrée aux péchés et la seconde à l'objet. Je vais donc simplement sélectionner un objet, les gars, et il existe de nombreuses catégories différentes. Par exemple, comme les icônes de Trey, le dos, les bouteilles, les boîtes, les bâtiments, les personnages, ménage de Noël, les vêtements, les cosmétiques, tasses, les emoji, l'environnement et bien d'autres encore OK, donc dans cet exemple, je vais sélectionner des personnages. Et faites défiler l'écran vers le bas, les gars. Il existe plusieurs modèles en trois D, les gars. Regarde ça. Des modèles TRed très sympas. OK, je vais donc sélectionner les trois modèles. N'hésitez pas à sélectionner le modèle TD que vous aimez. OK, il suffit de cliquer sur ce modèle Tree D, puis vous serez redirigé vers la page d'édition. D'accord ? Le processus peut prendre quelques secondes, il suffit donc d'attendre. Très bien, c'est la page d'édition, les gars. Nous allons donc maintenant restructurer un peu ce modèle Tren D. La première chose à faire est donc de regrouper tous ces composants. Comme vous pouvez le constater, ce modèle T D est composé de plusieurs composants tels que des chaussures, des écouteurs, une chaise, un ordinateur, une jambe, corps, un cylindre et un chauffage. Nous allons donc bloquer tous ces composants et appuyer simplement sur Ctrl G si vous êtes sous Windows. Toutefois, si vous utilisez un MacBook, appuyez simplement sur la commande G. OK. OK Ce que nous allons faire ensuite, c'est personnaliser ce modèle en trois D. Ainsi, dans les tronçons du métro, il y a plusieurs composants tels que des peaux, des stylos, des chaussures Par exemple, je veux changer la couleur des chaussures. Il suffit de cliquer sur Shouse , puis sur Dev, puis sur Color Okay Supposons que je veuille changer la couleur en bleu OK, donc ça va ressembler à ça, les gars. D'accord, vous pouvez donc vous sentir libre de le personnaliser comme vous le souhaitez. Tu peux changer de couleur. Une fois que vous avez terminé, vous pouvez cliquer sur Exporter, puis sur Ambit intégré Donc, ce que nous allons faire, c'est copier et coller ce code, n'est-ce pas ? Donc, lorsque vous allez intégrer ce modèle en trois D à votre site Web Webflow, vous aurez besoin de ce code, n'est-ce pas ? Assurez-vous simplement de vous en souvenir. OK, les gars, je crois que c'est ça. C'est tout ce que tu as besoin de savoir. Je vous verrai dans la prochaine vidéo. Au revoir 3. Exploration des fonctionnalités de Webflow: Bon sang, bon retour au cours. Dans cette vidéo, nous allons explorer toutes les fonctionnalités de la page d'édition de Webflow Vous allez donc apprendre à ajouter du contenu, à télécharger des images, à changer de couleur, changer de style, de design, etc., n' est-ce pas ? Vous allez donc apprendre beaucoup de choses. Assurez-vous donc de porter une attention particulière à cette vidéo. OK, donc la première chose que vous devez faire est de vous inscrire, alors cliquez simplement sur Commencer. D'accord, vous avez donc la possibilité de inscrire en utilisant un compte GML Je vais donc cliquer sur S' inscrire avec Google, non ? Je m'inscris donc en utilisant mon compte GML. OK, allons-y. Comme vous pouvez le voir maintenant, nous allons être redirigés vers le tableau de bord. D'accord. Bien, c' est votre espace de travail, les gars Comme vous pouvez le constater, j' ai un projet ici. C'est donc un site web que j'ai créé comme l'année dernière. OK, donc pour créer un nouveau site Web, vous pouvez cliquer sur Nouveau site, et vous serez redirigé vers cette page. Et il vous suffit de cliquer sur Marketplace et modèles. Il existe donc de nombreux modèles que vous pouvez utiliser. Il y a de nombreuses options, les gars. Certains d'entre eux sont gratuits, d' autres ne le sont pas. Assurez-vous donc que vous aimez le modèle gratuit, n'est-ce pas ? Parce que vous ne voulez pas dépenser d'argent sur ce modèle. Dans ce projet, nous allons donc créer un portfolio professionnel. Je vais donc juste taper comme un portfolio comme celui-ci. Et juste des cerds. Il y a de nombreuses options, les gars. Je vais donc sélectionner la version gratuite. Il suffit donc de taper gratuitement comme ça, et nous allons trouver le modèle gratuit, non ? OK, donc je suis intéressé par ce modèle, je vais donc simplement cliquer sur le modèle Si vous voulez vous asseoir, à quoi cela ressemble, cliquez simplement sur Aperçu dans le navigateur, n'est-ce pas ? Il va ouvrir ce modèle dans l'autre onglet. OK, donc ça a l'air très cool, non ? Regarde ça. OK, maintenant je vais cliquer sur Utiliser gratuitement. OK, alors cliquez simplement sur Créer un côté. Tu peux lui donner un nom. Je vais le nommer portfolio professionnel comme celui-ci et cliquer simplement sur le côté Créer. Et vous serez redirigé vers la page d'édition, non ? Le processus peut prendre quelques secondes , alors attendez. J'espère que cela ne prendra pas trop de temps. OK, allons-y. OK, nous allons maintenant explorer toutes les entraves disponibles sur ces régimes chez les enfants, n'est-ce pas Vous n'avez pas besoin de savoir, chacun d' entre eux, car ils sont trop nombreux et vous pourriez être débordés. Je vais donc juste vous apprendre les entraves que nous utiliserons dans les projets, n'est-ce pas ? Alors, assurez-vous de faire très attention. OK, donc le premier est le navigateur, non ? Donc, comme vous pouvez le voir ici, vous avez un corps, une barre de navigation, un curseur Vous avez quatre sections. Il s'agit de la première, de la deuxième section, troisième section et des quatre sections, n'est-ce pas ? Cela vous permettra donc de naviguer plus facilement sur ce site Web. Ainsi, par exemple, si vous souhaitez modifier les premières sections, cliquez simplement sur les premières sections, droite, et vous serez redirigé vers cette page. OK, donc si vous cliquez sur les premières sections, il y a des sous-composants Par exemple, un conteneur. Si vous cliquez sur Container, ce sont les gars du conteneur, et à l'intérieur du conteneur, nous avons des colonnes. Nous avons deux colonnes, comme la colonne 1 et la colonne 2. Dans la première colonne, il y a un titre, non ? C'est donc comme le sous-composant de la première colonne. Et dans la deuxième colonne, nous avons le graphe Br et aussi le groupe de compétences. OK, donc c'est le groupe de compétences, les gars. Ainsi, lorsque vous souhaitez modifier l'une de ces sections, vous pouvez sélectionner Wiport que vous souhaitez modifier Par exemple, dans ce cas, je souhaite modifier le paragraphe, il vous suffit de cliquer sur Paragraphe, n'est-ce pas ? Il suffit de double-cliquer pour modifier le texte. OK, maintenant vous allez cliquer sur l'élément. Il y a donc de nombreux éléments, les gars. Par exemple, comme le bouton d'un élément, la typographie, quoi d'autre ? C'est le plus important, Guy. Si vous souhaitez télécharger une image , une vidéo ou une vidéo YouTube, vous pouvez utiliser ce filtre. Si vous ne faites pas défiler la page, il existe des formulaires. Quoi d'autre ? Entrée. Case à cocher de la zone suivante, capture Vous pouvez également aimer le code intégré ici. Bon, maintenant je vais t'apprendre à télécharger une image, non ? Il suffit donc d'aller dans les sections médias, faire défiler un peu la page vers le bas et de cliquer sur Image. OK, donc ici, vous pouvez cliquer sur Juste une image. Et deux options s'offrent à vous. Vous pouvez soit télécharger votre propre image, n'est-ce pas ? Il suffit donc de cliquer sur cette icône. Et dans cet exemple, je vais télécharger une image aléatoire, les gars. Peut-être cette image, non ? Il suffit donc de cliquer sur Ouvrir. Ou la deuxième option consiste à utiliser l'image de la bibliothèque, n'est-ce pas ? Cela dépend donc entièrement de vous. OK, comme vous pouvez le voir, nous avons téléchargé l'image avec succès. Bon, maintenant nous allons apprendre à changer les couleurs de fond. Nous allons apprendre à changer le type de téléphone et aussi le style. OK, alors maintenant, commençons par le type de téléphone. Comme vous pouvez le voir, le type de téléphone est Roboto. Si vous souhaitez le modifier, il vous suffit de cliquer dessus et de nombreuses options s'offrent à vous. Par exemple, je souhaite le remplacer par impact. Il suffit donc de cliquer sur Impact. Ou peut-être que tu veux le changer en amer. Il suffit donc de cliquer sur Bitter, non ? OK, c'est donc le type de police. OK, supposons que vous souhaitiez également modifier la taille de police. Comme vous pouvez le voir, à l'heure actuelle, la taille de la police est de 14. Supposons que je veuille l'agrandir un peu, je vais le changer à 16, non ? Allons-y. Il a l'air un peu plus grand, non ? OK, donc si vous souhaitez changer la couleur de police, cliquez simplement dessus. Dans cet exemple, je vais changer la couleur de police du gris au bleu foncé, suffit donc de cliquer sur le bleu foncé. OK, allons-y. Comme vous pouvez le constater, nous avons maintenant changé avec succès couleur du téléphone en bleu foncé, n'est-ce pas ? OK, donc si vous souhaitez également modifier la position du texte en ce moment, le texte est sur la gauche. Si vous voulez le placer au centre, suggérez de cliquer dessus. Si vous voulez le faire sur la droite, suggérez de cliquer dessus. OK, donc je vais juste mettre le texte sur la gauche, les gars. Et ici, vous pouvez également personnaliser le style. OK, alors faites défiler l'écran un peu vers le bas. Nous allons maintenant changer les couleurs de fond, non ? OK, il suffit de cliquer dessus et vous aurez de nombreuses options. Supposons que je veuille changer la couleur en vert clair, non ? Regarde ça. Très cool, non ? Ou peut-être que je veux le changer en bleu clair. Donc ça va ressembler à ça, les gars. OK, donc si vous souhaitez personnaliser la bordure, cliquez simplement sur Bordure, puis vous pourrez la personnaliser. Avec vous pouvez également personnaliser la couleur. Pour le moment, il est noir. N'hésitez pas à le modifier si vous le souhaitez. OK, enfin, vous pouvez personnaliser les effets. heure actuelle, l'effet est normal, mais vous pouvez faire des expériences avec ces effets. Par exemple, comme obscurci, multipliez les couleurs, brûlé, éclairci, filez les couleurs Vous avez de nombreuses options, les gars, non ? Je vais juste utiliser l'effet normal, non ? Vous pouvez également ajouter des transitions. Donc, si vous souhaitez animer le site Web, vous pouvez utiliser ces transitions. Ne t'inquiète pas Je vais expliquer cela dans les prochaines vidéos, non ? OK, donc si vous voulez publier ces sites Web, les gars, cliquez simplement sur Pablis, non l'heure actuelle, le site Web n'a pas encore été publié, mais si vous souhaitez le publier, cliquez simplement sur Publier dans le domaine sélectionné, n'est-ce pas ? Vous pouvez également ajouter un domaine personnalisé si vous possédez votre propre domaine. OK, donc c'est comme ça que vous publiez le site. Mais évidemment, dans ce cas, nous n'allons pas publier ces sites Web, n' est-ce pas, parce que nous n'avons pas fini de modifier ce site Web. OK, donc je pense que c'est ça, les gars. C'est tout ce que tu as besoin de savoir. Je vais voir le gaz dans la prochaine vidéo où nous allons démarrer le projet proprement dit, n'est-ce pas ? Nous allons donc créer des sites Web de portfolio professionnels. J'y verrai de l'essence. 4. Intégrer un modèle 3D au site Web de portfolio professionnel: Bonjour, les gars. Bienvenue dans le cours. Dans le premier projet, nous allons créer un site web de portfolio professionnel, et je ne veux pas repartir de zéro, car cela va prendre beaucoup de temps, n'est-ce pas ? Nous allons donc simplement choisir un modèle, et nous allons cloner ce modèle, n'est-ce pas ? Donc, comme vous pouvez le voir, nous avons de nombreux modèles différents. Je vais donc simplement sélectionner ce modèle, les gars. Le créateur de ce modèle est Zack Kendall. Modèle très cool, les gars. Donc, ce n' est pas parce que j' utilise ce modèle que vous devez nécessairement me suivre en utilisant ce modèle. Vous avez de nombreuses options, alors n'hésitez pas à choisir le modèle que vous souhaitez, n'est-ce pas ? OK, donc pour cloner ce modèle, c'est très simple. Il vous suffit de cliquer sur cloner dans Webflow. Mais avant cela, il est préférable que vous ouvriez d' abord ces sites Web dans l'autre onglet , juste pour vous assurer que vous aimez vraiment ce site Web, n'est-ce pas ? OK, alors allons-y. Regardez ça, les gars. C'est très cool, non ? C'est un peu minimaliste, mais j'aime beaucoup le style, pour être honnête avec vous D'accord, nous allons maintenant cloner le modèle. Il suffit donc de cliquer sur cloner dans Webflow. OK, allons-y. Alors maintenant. Cliquez simplement sur Créer un côté. Et ne vous inquiétez pas, les gars, c'est totalement gratuit, et vous devrez nommer ce site Web. Je vais juste saisir un projet de portfolio professionnel, non ? Ce sera donc le nom. Il suffit donc de cliquer sur Créer un côté. OK, alors attendez le processus peut prendre quelques secondes. J'espère que cela ne prendra pas trop de temps. OK. Nous allons maintenant être redirigés vers la page d' édition de Webflow, n'est-ce pas ? La première chose que nous allons faire ici est d'intégrer les trois modèles D que nous avons créés à trois modèles D que nous avons l'aide de Spline à ce site Web Et ne t'inquiète pas. Le processus est très simple. OK, je vais donc cliquer sur Ajouter un élément et faire défiler la page. OK, donc dans les sections médias, il suffit de cliquer sur Scènes Spline, non ? Il suffit donc de cliquer dessus. Comme vous pouvez le voir, nous venons de créer une Spline depuis. Bien, passons maintenant à votre compte Spline. Si vous vous souvenez, nous avons créé ce modèle d'arbre, n'est-ce pas ? Il suffit donc de cliquer dessus. Et maintenant, nous allons copier-coller le code, non ? Nous allons intégrer le code. Juste ici. OK, alors attendez, les gars. Il est toujours en cours de traitement. OK, très cool. Il ne nous reste plus qu'à cliquer sur Exporter et à copier-coller. Ce code. OK, donc ce que nous allons faire, c'est cliquer sur Copier intégrer, et je vais coller le code ici, non Et je vais copier-coller cette partie. Et revenons à la page d'édition de Webflow. Et ici, dans les sections URL, il suffit de mettre ce code en page. OK. Alors maintenant, il suffit de cliquer sur Fournir et envoyer. Comme vous pouvez le constater, nous avons intégré avec succès ces trois modèles en D au site Web. OK, donc ce que nous allons faire ensuite est de nommer la classe, il suffit donc de cliquer sur Nouvelle classe. Le nom sera Spline. Le modèle D. Tu peux le nommer comme tu veux. Cela dépend entièrement de vous. Ensuite, je vais juste appuyer sur Entrée, les gars. OK, nous avons donc créé cette classe avec succès. La prochaine chose que nous allons faire est de l'agrandir un peu. Comme vous pouvez le constater, ce modèle en trois D est trop petit. Je vais donc simplement modifier les hauteurs. Je vais taper 100 fg, comme ça. OK, alors nous allons maintenant diriger cela vers le haut. OK. Ensuite, nous allons changer de position. Donc pour le moment, il est statique, donc je vais le remplacer par du stick, non ? Nous avons intégré avec succès ces trois modèles au site Web. Je vous verrai dans la prochaine vidéo où nous allons animer ce site Web, et nous allons apporter d' autres modifications Nous allons rendre ce site plus beau. OK, alors je vous y verrai. Au revoir. 5. Animer un modèle 3D sur un site Web de portfolio professionnel: Bon sang les gars, bon retour au cours. Dans cette vidéo, nous allons ajouter des animations à ce modèle tridimensionnel. Mais avant d'ajouter les animations, nous allons d'abord apporter quelques modifications. Comme vous pouvez le constater, ce modèle en trois D est trop proche de la bordure supérieure. Nous allons donc déplacer le modèle à trois D vers le centre OK ? Il suffit donc de faire défiler la page un peu vers le bas. Dans ces sections de position, cliquez simplement sur Auto, et je vais sélectionner 50. Ou peut-être 100, non ? Comme vous pouvez le voir, maintenant, ce modèle en trois D est au centre, n'est-ce pas ? OK, donc c'est mieux. Et cliquons sur ce bouton en argile. Cela vous donnera un aperçu du site Web. OK, il est donc toujours en cours de chargement. Comme vous pouvez le constater, ce modèle en trois D a été intégré à ce site Web, et si vous faites défiler la page vers le bas, ce modèle en trois D reste en arrière-plan, n'est-ce pas ? C'est donc très cool. Le seul problème que nous avons est la couleur du texte. Il est noir, mais le fond est également noir, vous ne pouvez donc pas vraiment lire ce texte, n'est-ce pas ? Nous allons donc corriger cela dans la prochaine vidéo, les gars. Ne t'inquiète pas. Bon, revenons maintenant à la page d'édition. Très bien, nous allons maintenant animer ces modèles en trois D. Il suffit donc de cliquer sur le modèle Spline Three D, puis de cliquer sur Interactions. Et sur la piterisation, il suffit de cliquer dessus et de cliquer La plupart se déplacent dans Viewport. OK, alors ensuite, cliquez simplement sur Sélectionner les actions puis sur Lire la plupart des animations, n'est-ce pas ? OK, alors cliquez simplement sur Ajouter une animation. À présent, vous devez nommer les animations. Tu peux le nommer comme tu veux. Cela dépend entièrement de vous. Dans ce cas, je vais le nommer trois animations en modèle D. OK, alors appuyez simplement sur Entrée et maintenant je vais cliquer dessus et cliquer sur Spline parce que nous avons obtenu ce modèle en trois D de Spline, n' parce que nous avons obtenu ce modèle en trois D de Spline, OK, maintenant tu peux faire défiler la page un peu vers le bas. Ensuite, nous allons sélectionner l'objet que nous voulons animer. Dans ce cas, nous voulons animer le groupe, il suffit donc de cliquer sur le groupe OK, donc je vais faire pivoter ce modèle en trois D sur l'axe blanc, non ? Je vais donc le diriger un peu vers la droite. Je vais le régler sur 1,5. OK, il ne reste plus qu' à cliquer sur la deuxième couche. Et nous allons faire de même. Donc, pour l'objet, il suffit de cliquer sur le groupe. Et nous allons faire le contraire, les gars. Nous voulons donc faire pivoter ces trois modèles dans les directions opposées, n'est-ce pas ? Je vais donc diriger cela vers la gauche. Je vais donc régler ce paramètre sur moins 1,5. OK, nous avons donc terminé. Maintenant, il suffit de cliquer sur Aperçu en direct, non ? Donc, comme vous pouvez le voir, si je place ma souris vers la droite, alors ces modèles en trois D se déplaceront vers la droite. Et pareil, si je dirige mon maximum vers la gauche, ces modèles en trois D se déplaceront vers la gauche, n'est-ce pas ? Regarde ça. Très cool, non ? OK, alors maintenant, n' oubliez pas de le sauvegarder. Il suffit donc de cliquer sur Enregistrer. OK, nous avons donc enregistré ces animations avec succès. OK, alors ensuite, il suffit de cliquer sur le bouton d'affichage, et nous allons voir à quoi ressemble l'animation sur le site Web, n'est-ce pas ? OK, très cool. Regarde ça. OK, donc si vous voulez faire défiler la page vers le bas, ça va ressembler à ça, les gars. Des animations sympas gratuites, non ? Très bien, les gars, je pense que c'est tout pour cette vidéo. Je vous verrai dans la prochaine vidéo où nous allons ajouter du contenu au site Web. Nous allons télécharger des images sur le site Web et le rendre plus beau. OK, alors je vous y verrai. Au revoir. 6. Ajout de contenu à un site web de portfolio professionnel: Bon sang, les gars. Bienvenue dans le cours. Dans cette vidéo, nous allons ajouter du contenu à ce site Web, et nous allons également télécharger de nouvelles images sur ce site Web. OK. Tout d'abord, nous allons apporter quelques modifications, il suffit donc de cliquer sur NAP. Et je vais changer la couleur du conteneur, il suffit donc de cliquer sur Conteneur et de les faire défiler un peu. Je vais donc changer la couleur du blanc au bleu clair, non ? OK, très cool. Comme vous pouvez le constater, nous avons réussi à changer la couleur en bleu clair. OK, alors ensuite, je vais changer la couleur de cette boîte, non ? Il suffit donc de cliquer sur le bouton. Et comme vous pouvez le voir, pour le moment, la couleur est violette, donc je vais la changer en noir. Donc, il suffit de le faire défiler un peu et cliquer dessus et je vais sélectionner le noir, non ? Alors maintenant, comme vous pouvez le voir, la couleur de ces blocs est le noir. OK, alors revenons en arrière. Et ce que nous allons faire ensuite, c'est ajouter du contenu à ce site Web, n'est-ce pas ? Il suffit donc de cliquer sur Intro. Cliquez simplement sur continuer et sur Intro parent, n'est-ce pas ? Il suffit donc de cliquer sur OK, donc si vous souhaitez modifier ce texte, double-cliquez dessus. OK, donc dans cet exemple, je vais taper. Bienvenue dans mon portfolio, non ? Eh bien, il semble que c'est trop gros, alors je vais le réduire. Je vais donc changer la taille de la police, il suffit donc de faire défiler la page un peu vers le bas. OK, donc c'est plus petit. OK, alors maintenant nous allons remplacer cette image par la mienne, non ? Très bien, maintenant il suffit de cliquer sur Image d' introduction et nous allons remplacer cette image par ma propre image Il suffit donc de faire défiler la page un peu vers le bas. Et cliquez simplement sur Supprimer l'image, puis sur Image, puis sur Juste une image. OK, je vais donc utiliser cette image. J'ai généré cette image en utilisant AI Guys, cliquez dessus et cliquez simplement sur Juste une image. Et cliquez simplement sur Cover. Bon, alors revenons arrière. Ça a l'air très cool, non ? D'accord, nous allons maintenant ajouter du contenu à ce site Web. Tout d'abord, nous allons ajouter du contenu à cette session d'introduction. OK, j'ai donc mon document ici. J'ai généré ce paragraphe d'introduction en utilisant Chat GPT. OK, donc je vais juste le copier-coller. OK, revenons donc à la page d'édition. Il suffit de double-cliquer et je vais le remplacer par mes présentations. OK, très cool. OK, alors ensuite, nous allons modifier ces sections. OK, donc d'abord, je vais remplacer cette image par ma propre image. Il suffit donc de cliquer dessus, de cliquer sur Supprimer l'image, de cliquer sur Ajouter une image et de cliquer sur Choisir une image. Et je vais télécharger ma propre image, les gars. OK, je vais donc sélectionner cette image. Il suffit donc de cliquer sur Ouvrir et j'ai généré cette image en utilisant AI deux gars. OK, alors attendez les gars. Maintenant, il est toujours en train de télécharger l'image. Le processus peut prendre quelques secondes. J'espère que cela ne prendra pas trop de temps. OK, alors allons-y. OK, maintenant je vais cliquer sur la couverture. OK, très cool. Regarde ça, non ? D'accord, nous allons maintenant modifier le contenu. OK, donc dans les sections, je vais mettre en valeur mes compétences et mon expertise, n'est-ce pas ? Dans cet exemple, j'ai trois compétences principales. Le premier est le design web. Le deuxième est le développement Web, et le troisième est la science des données. OK, modifions maintenant ce contenu. Je vais juste le copier-coller, non ? Il suffit de double-cliquer dessus, de le bloquer, de le copier-coller. OK, très cool. Ensuite, nous allons modifier la deuxième compétence. Il suffit donc de cliquer sur le deuxième parent du projet. OK, donc d'abord, je vais remplacer cette image par ma propre image. OK ? Je vais donc simplement double-cliquer dessus. Et je vais cliquer sur Supprimer l'image, puis sur Image, sur Joe Image, et maintenant je vais télécharger l'image. OK, donc cette fois je vais télécharger cette image sympa, j'ai générée cette image en utilisant des gars de l'IA. Pour information, l'outil que j' utilise est Leonardo AI. Il est très similaire à Mid journey. OK, alors n'oubliez pas de cliquer sur la couverture. OK, alors modifions le contenu. OK, alors cliquez simplement sur le texte du projet. Allons-y. OK, donc je vais copier et coller ces gars, non ? C'est ma deuxième compétence, le développement web. Alors double-cliquez dessus et collez-le ici, non ? Bon, maintenant nous allons faire de même pour la troisième compétence. Il suffit donc de cliquer sur Project parent, puis sur Project Child. Je vais donc remplacer cette image par ma propre image, il suffit de cliquer dessus. D'accord. Et je vais cliquer sur Supprimer l'image, puis sur Aimage OK, maintenant il suffit de cliquer sur Jose Image et je vais télécharger ma propre image. OK, donc cette fois, je vais télécharger cette image, il suffit de cliquer sur Ouvrir. OK, maintenant il télécharge l'image, les gars. Alors, attendez. Le processus peut prendre quelques secondes. J'espère que cela ne prendra pas trop de temps, non ? Et n'oubliez pas de cliquer sur Cover. OK, très cool. D'accord, nous allons maintenant modifier le contenu. Ma troisième compétence n'est pas la photographie. C'est de la science des données. Tapez Data Science, non ? Allons-y. Et maintenant, nous allons le copier-coller et faire la même chose. Il suffit donc de le bloquer et de le coller. OK, très cool. OK, donc c'est terminé. Je vais maintenant cliquer sur Aperçu. Très bien, les gars, c'est notre modèle Tre. Si vous faites défiler la page vers le bas. Nous avons la séance d'introduction. Je suis Chris Raharja, fils de grands professionnels spécialisés dans la conception Web, développement Web et la science des données Au-delà de mes compétences techniques, mes compétences générales, notamment le souci du détail, notamment le souci du détail, résolution créative des problèmes et les communications efficaces, sorte que chaque projet dépasse Collaborez pour transformer les idées en solutions numériques percutantes, c' est très cool Et ici, je souligne mes compétences. Le premier est le design web. Le deuxième est le développement Web, et le troisième est la science des données. Très cool, non ? Bien, revenons maintenant à la page d'édition de Webflow. OK, les gars, enfin, je vais corriger les positions de l'image. Je vais le rendre plus beau, alors il suffit de cliquer sur « Contenir », non ? Donc ça va ressembler à ça. OK, alors maintenant, cliquons sur le bouton d'affichage. Et si vous voyez cette image, elle est bien meilleure que la précédente, non ? Regarde ça. Très cool. Akka, nous en avons donc terminé avec le premier projet Donc, dans la prochaine vidéo, c'est Askas où nous allons démarrer le deuxième projet Dans la vidéo suivante, nous allons donc créer une page de destination pour un produit. Alors je vous verrai là-bas. Au revoir. 7. Intégrer le modèle 3D à la page d'accueil du produit: Saint hôte, bon retour au cours. Dans cette vidéo, nous allons créer un modèle T D à l'aide de Spline, et nous allons intégrer le modèle TD au site Web Webflow Pour votre information, dans le cadre du deuxième projet, nous allons créer une page d'accueil pour les baskets ou S. D'accord, alors d'abord, cliquez simplement sur Bibliothèques. Sélectionnez des objets et cliquez sur des vêtements. OK, donc dans ce cas, je cherche un modèle en trois D pour. Je vais sélectionner celui-ci. Si vous souhaitez choisir trois autres modèles D, n'hésitez pas à le faire. OK, alors maintenant il ouvre ce modèle en trois D sur la page de l'éditeur. Attendez donc, car le processus peut prendre quelques secondes. J'espère que cela ne prendra pas trop de temps. Bien, comme vous pouvez le voir, le modèle TriT est ren Nous allons maintenant personnaliser la couleur. OK, il suffit de cliquer sur ce modèle Trine, et je vais changer la couleur de fond B du blanc au bleu clair, non Il suffit donc d'aller sur Google et de taper le code couleur pour le bleu clair. OK, alors copiez-collez ceci. OK, c'est parti. Très cool. Nous allons maintenant changer la partie rouge en noire. Il suffit donc de taper la couleur de la robe pour le noir. Vous pouvez le changer pour n'importe quelle couleur, les gars, donc c'est à vous de décider, non ? OK, alors copiez-collez ceci. D'accord, ça ressemble à ça. Très cool. Et maintenant, ce que nous allons faire ensuite, c'est exporter ces trois modèles en D. Il suffit donc de cliquer sur Exporter. Cliquez simplement sur FEWR car nous aurons besoin de ce code d'intégration. OK, alors attendez les gars, le traitement est toujours en cours, et maintenant cliquez sur Copier intégrer, n'est-ce pas Et je vais l'ouvrir comme un Google Docs. OK, donc c'est terminé. La prochaine chose que nous allons faire est de trouver les bons modèles pour la page de destination du produit. OK, alors allez simplement sur le marché Webflow et tapez simplement des chaussures ou des baskets, non Vous trouverez de nombreux modèles, certains sont gratuits, d'autres ne le sont pas, alors assurez-vous de sélectionner le modèle gratuit. OK, je vais donc sélectionner ce modèle. J'aime bien, les gars. Et si vous faites défiler l'écran vers le bas et cliquez simplement sur Informations sur le droit d'auteur, assurez-vous que ce modèle possède une licence de domaine public commun créative, n'est-ce pas ? Cela signifie que ce modèle peut être utilisé pour des travaux personnels et commerciaux. OK, alors il suffit de cliquer. J'ai compris. Donc, si vous souhaitez cloner ce modèle, cliquez simplement sur cloner dans Webflow OK, alors cliquez dessus, les gars. OK, alors maintenant cliquez simplement sur Créer un site, et ici, vous devrez nommer le site. Je vais l'appeler Page de destination du produit. Tu peux le nommer comme tu veux. Cela dépend entièrement de vous. OK, alors cliquez simplement sur Créer un site. Nous allons maintenant être redirigés vers la page d'édition de Webflow, non ? OK, donc la prochaine chose que nous allons faire est intégrer le modèle en trois D à ce site Web. OK, donc si vous vous souvenez, nous avons déjà copié et collé le code de l'amplet depuis Spline Nous allons donc copier le sport. D'accord, nous allons faire la même chose, comme nous le faisions avant vous. Il suffit donc de cliquer sur cette icône et de la faire défiler un peu. Et dans les sections médias, nous allons cliquer sur Scène Spline, n'est-ce pas ? Et nous devrons copier-coller le code. OK, alors cliquez simplement sur Recharger, scène Spline. D'accord, comme vous pouvez le constater, nous avons intégré avec succès le modèle en trois D au site Web. Alors maintenant, je vais creuser ça jusqu'en haut. Je vais le mettre sous NafBar. Donc, si vous faites défiler l'écran vers le haut, vous verrez le modèle en trois D en haut. Ce que nous allons faire ensuite, c'est modifier un peu ce modèle en trois D. Alors faites défiler la page vers le bas. Et comme vous pouvez le constater en ce moment, la position est statique, donc nous allons la remplacer par « sticky », n'est-ce pas ? C'est exactement la même chose que ce que nous avons fait précédemment. Et il suffit de cliquer sur Auto, et je vais en sélectionner 5 100. OK, allons-y. OK, donc c'est terminé, les gars. Nous avons intégré avec succès ce modèle en trois D au site Web. Je vais voir Gus dans la prochaine vidéo, où nous allons animer ce modèle en trois D. Je vous y verrai. Au revoir. 8. Animer un modèle 3D sur la page d'accueil d'un produit Page: Bon sang, les gars. Bienvenue dans le cours. Dans cette vidéo, nous allons animer ces modèles en trois D. OK, alors commençons maintenant. Tout d'abord, il suffit de cliquer sur Scène Spline. Cliquez ensuite sur Interactions. Dans les sections Bittreer, il suffit de cliquer dessus, puis de cliquer sur Déplacer la souris dans OK, alors cliquez simplement sur Sélectionner une action puis sur Lire les animations de la souris. Ensuite, il suffit de cliquer sur Animations. OK, donc ici, vous devrez nommer les animations. Tu peux le nommer comme tu veux. Cela dépend entièrement de vous. Dans ce cas, je vais l'appeler house Animations. Et appuyez simplement sur Entrée. OK, alors ensuite, il suffit de cliquer dessus. Et nous allons sélectionner Spline parce que nous avons obtenu ces trois modèles chez Spline Il suffit donc de cliquer dessus. D'accord, nous allons maintenant spécifier l' objet que nous voulons animer. Il suffit donc de cliquer sur Sélectionner et je vais sélectionner la teinte courante. D'accord, ici, vous avez de nombreuses options. Vous pouvez faire pivoter ce modèle en trois D sur l'axe X. Vous pouvez faire pivoter ce modèle en trois D sur l'axe Y. Vous pouvez également faire pivoter ce modèle en trois D sur l'axe Z. Donc ça dépend entièrement de vous. OK, donc dans ce cas, je vais faire pivoter ce S sur l'axe y, non ? Je vais donc le diriger vers la droite. Je vais le régler à trois. Et passons à la deuxième couche. Nous allons faire de même, il vous suffit de sélectionner l'objet que vous souhaitez animer. Donc dans ce cas, il va y avoir des teintes diffuses, et le sens de rotation sera le contraire, n'est-ce pas ? Je vais donc le diriger vers la gauche, et je vais le régler sur moins trois. OK, maintenant il suffit de cliquer sur Aperçu de Life. Donc ça va ressembler à ça, les gars. Très cool, non ? N'oubliez pas de l'enregistrer, il vous suffit de cliquer sur Enregistrer. Bon, nous allons maintenant tester ces animations. OK, alors maintenant, cliquons sur les boutons d'affichage. Comme vous pouvez le voir, tout cela à travers le modèle a été animé, n'est-ce pas ? Regarde ça. Regardez les rotations. Très cool, non ? OK, alors maintenant faisons-les défiler un peu. OK, donc dans la prochaine vidéo, nous allons ajouter du contenu à ce site Web, et nous allons également remplacer ces images par nos propres images, n'est-ce pas ? Et dans ce projet, nous créons une page de destination. Donc, comme vous le savez, la page de destination est très simple. Vous affichez votre produit ainsi que les descriptions des produits, et c'est tout. Nous allons donc supprimer les parties inutiles de ce site Web, n'est-ce pas ? C'est donc ce que nous allons faire dans la prochaine vidéo. OK, les gars, je crois que c'est ça. C'est tout ce que tu as besoin de savoir. Je vous verrai dans la prochaine vidéo. Au revoir. 9. Ajouter du contenu à la page d'accueil d'un produit: Bon sang, bon retour sur le parcours. Dans cette vidéo, nous allons ajouter du contenu à la page de présentation du produit, et nous allons également remplacer les images du produit par nos propres images. OK, alors maintenant, commençons. La première chose que nous allons faire ici est remplacer le nom du produit par le nom de notre propre produit. OK, dans ce cas, le nom de mon produit est Comfy Sneaker Il suffit donc de le remplacer par des baskets Comfy. OK, allons-y. Et je vais le supprimer. C'est bon, les gars. Nous allons donc remplacer l' image du produit par notre propre image. Il suffit donc de cliquer sur les sections des héros et de cliquer sur les photos des héros, n'est-ce pas ? OK, il suffit de le faire défiler un peu et cliquer sur Supprimer l'image, puis de cliquer sur Ajouter une image et de cliquer sur OS Image. OK, je vais donc remplacer cette image du produit par ma propre image. Pour votre information, j'ai généré cette image en utilisant AI Guys. OK, donc je vais sélectionner la couverture ou peut-être le contenu, non ? Il suffit donc de cliquer sur Contenu. D'accord, nous allons maintenant modifier l'effet d'éclairage de ces modèles à trois D. Il suffit donc de cliquer sur Scène Spline et de faire défiler la page jusqu'en bas Et pour le mélange, nous allons passer de normal à color bom, n' OK, alors maintenant, ce que nous allons faire ensuite est de modifier le contenu. Donc, pour vous faciliter la tâche, nous allons d'abord masquer le modèle à trois D. OK, il suffit de cliquer sur Spline Send et de faire défiler haut. Nous allons vers le haut. Nous allons cliquer sur Afficher tous les paramètres , puis sur Masqué, n'est-ce pas OK, alors ne vous inquiétez pas, les gars. À la fin, nous allons le rendre à nouveau visible, mais maintenant nous allons modifier le contenu, alors masquez-le d'abord, n'est-ce pas ? OK, il ne vous reste plus qu'à cliquer sur les sections des héros et sur le contenu des héros. Cliquez simplement sur le titre 3 en haut. OK, vous pouvez donc le modifier. Je ne vais rien changer, les gars, mais je vais changer le nom du produit, non ? Parce que dans ce cas, le nom de ma marque est Comfy Sneakers, pas Nike ou Jordan, non ? suffit donc de double-cliquer dessus, et je vais le remplacer par Comfy Snikers D'accord, vous pouvez donc vous sentir libre de changer la couleur du téléphone. N'hésitez pas à modifier la taille du téléphone. Cela dépend entièrement de vous. OK, donc ici bas, nous allons écrire les descriptions des produits. J'ai donc généré une description de produit à l'aide de JA JPT. Vous pouvez donc faire la même chose, donc je vais juste le copier-coller et le mettre ici, non ? OK, allons-y. Et ici, nous avons les boutons de la collection C. Donc, si vous souhaitez modifier le texte, cliquez simplement sur le bouton et double-cliquez. Et vous pouvez modifier ce texte, mais je ne vais rien changer, les gars. Très bien, nous en avons terminé avec ces sections, et passons maintenant aux sections suivantes OK, alors maintenant, cliquons sur «  À propos des sections ». Cliquez simplement sur À propos de nous. Titre de la section. OK, je vais donc modifier ce texte. Donc évidemment, dans ce cas, nous ne vendons pas Eri Jordan. Nous vendons des baskets à café, non ? Il suffit donc de le remplacer par des collections de baskets à café. D'accord, vous pouvez donc également modifier ce texte. Je vais juste taper, genre, un truc au hasard, les gars. Cup in sneakers s'engage à produire des baskets convertibles de haute qualité. OK. Peut-être que vous pouvez ajouter le slogan de votre produit ou quelque chose comme ça. OK, nous en avons donc fini avec les sections. Passons maintenant aux sections suivantes. Il suffit donc de cliquer sur les sections horizontales, de cliquer sur les cadres. Comme vous pouvez le constater, il existe de nombreux articles. Chaque article représente donc le produit qu' ils vendent. Donc, dans ce cas, nous n'allons répertorier que deux produits sur cette page de destination, nous allons donc supprimer la plupart de ces articles, n'est-ce pas ? Supprimez-le donc. Je vais le supprimer un par un, les gars. Nous allons donc simplement partir en deux objets, non ? OK, il suffit de cliquer dessus et première chose que nous allons faire est de remplacer l'image par l'image de notre produit. OK, c'est bien. Supprimez donc simplement Hover Div Image six et Image huit OK, alors ensuite, il suffit de cliquer sur l' élément et de faire défiler l'écran un peu vers le bas. Nous allons cliquer sur Image, à droite, et nous assurer que vous placez l'image au-dessus de l'emballage du contenu. OK, donc ici. Il suffit double-cliquer sur l'image et de cliquer sur l'image, et je vais utiliser cette image du produit, n'est-ce pas ? Pour ton information. J'ai généré cette image de produit à l'aide de l'IA. OK, donc si vous souhaitez modifier la taille de cette image, vous pouvez saisir la taille ici. OK, donc on en a fini avec ça. Maintenant, nous allons remplacer la deuxième image du produit par notre propre image de produit, n'est-ce pas ? Nous allons donc faire la même chose. Il suffit donc de cliquer sur le deuxième élément, et nous allons supprimer le DIF surligné Nous allons supprimer l' image 9 et l'image 6. OK, alors faites la même chose, les gars. Il suffit de cliquer sur les éléments et de les faire défiler un peu, et nous allons cliquer sur l'image, n'est-ce pas ? Et assurez-vous de placer l'image au-dessus de la capture de contenu. Il suffit donc de le faire glisser vers le haut. OK, allons-y. Et il suffit de double-cliquer sur l' image et de cliquer sur l'image. Je vais maintenant télécharger l'image de mon produit. Il suffit donc de cliquer dessus et je vais télécharger ces images, non ? De très belles baskets. OK, alors maintenant il télécharge l'image des baskets. Alors attendez, les gars. J'espère que cela ne prendra pas trop de temps. OK, allons-y. Tu as presque terminé. OK, très cool. Vous pouvez également modifier la taille de l'image si vous le souhaitez, vous pouvez saisir la taille ici. Cela dépend entièrement de vous. OK, alors maintenant, je vais modifier le contenu. Je vais modifier le nom du produit. Donc dans ce cas, ce n' est pas Eric Jordan W. Donc je vais juste taper un nom au hasard, les gars. Sneaker Lego, non ? Parce que le schéma ressemble à de l'ego. Et le prix sera en dollars américains. Donc ce snicker va être vendu à 120$, non ? D'accord, je vais donc également modifier cela. Le nom du produit est donc Puzzle Sneaker, un nom aléatoire, les gars Et le prix sera également en dollar américain. Le prix de cette basket puzzle est donc de 85,99$. OK, maintenant je vais changer la couleur de ces arrière-plans, alors faites défiler un peu la page vers le bas. Je vais cliquer dessus et je vais le faire passer du bleu foncé au bleu clair, non ? Allons-y. OK, très cool. OK, nous en avons donc fini avec ce sport. Ce que nous allons faire, c'est supprimer les sections pern et vidéo autocollantes parce que nous n'en avons pas besoin, n'est-ce Parce que nous construisons simplement comme une page de destination, et je veux que ce soit simple. Donc je vais juste le supprimer et aussi supprimer les sections vidéo, d'accord ? OK, alors n'oubliez pas, les gars. Auparavant, nous masquions le modèle T D, alors maintenant nous allons le rendre visible à nouveau. Il suffit donc de cliquer sur Scène Spline. Et il suffit de cliquer sur l'icône des paramètres et de cliquer sur Afficher tous les paramètres. Comme vous pouvez le voir en ce moment, le modèle T D est masqué, alors maintenant nous allons cliquer sur Visible, non ? Nous allons le rendre à nouveau visible. OK, c'est fini maintenant, il suffit de cliquer sur ce bouton de lecture pour voir à quoi ressemble le site Web. Il suffit donc de cliquer dessus. Et faisons défiler la page jusqu'en haut. OK, comme vous pouvez le voir, c'est le modèle TD. Il a été entièrement animé. Et si vous faites défiler un peu la page, voici l'image de notre produit ainsi que les descriptions des produits. Cf Sneakers présente une chaussure sportive et styliste qui allie harmonieusement performance et mode grâce à son design élégant, à sa palette de couleurs éclatantes et à sa technologie de confort Ces baskets sont le compagnon idéal pour les activités actives et les sorties décontractées à la mode Et ici, nous avons les sections à propos de nous. Comme vous pouvez le voir, c' est le slogan de ma marque. CofInker s'engage à produire des baskets convertibles de haute qualité, très cool et Nous avons le catalogue de produits, donc ce sont deux produits que je vends des baskets Logo et des baskets Puzzle Le prix est de 120,80$ à 5,99$ . OK, les gars. Nous avons donc acheté avec succès cette page de destination en utilisant Webflow. Très cool, non ? OK, donc je pense que c'est ça, les gars. Je vous verrai bientôt. 10. Intégration et animation d'un modèle 3D de pizza: Holy Gas, bienvenue dans le cours. Dans cette vidéo, nous allons démarrer le troisième projet. Dans le troisième projet, nous allons donc créer un site Web pour un restaurant. Nous allons donc faire la même chose, Gas. Nous allons nous procurer le modèle TD auprès de Spline. Ensuite, nous allons intégrer le modèle TD au site Web, et nous allons animer le modèle TD OK, alors commençons maintenant. Donc, dans ce cas, la nourriture que je vais vendre est de la pizza, non ? Alors, procurez-vous d'abord le modèle T D pour la pizza. Cliquez simplement sur Bibliothèque et sélectionnez Objets, et je vais taper pizza. OK, allons-y. Comme vous pouvez le constater, nous avons trois options. Je vais donc sélectionner celui-ci. Pizza Pizza, il suffit de cliquer dessus et vous serez redirigé vers la page d'édition de Spline OK, nous allons donc apporter quelques modifications, puis nous allons les exporter via le modèle, n'est-ce pas ? Nous allons obtenir le code d'intégration. OK, alors attendez, les gars, le processus peut prendre quelques secondes. OK, allons-y. Voici donc notre pizza. Je vais donc tout bloquer. Et si vous êtes sous Windows, vous pouvez appuyer sur Ctrl G. Mais si vous utilisez Macbook Clock me, vous pouvez appuyer sur Commande G, n'est-ce pas ? D'accord, nous avons maintenant regroupé tous les composants. Ce que nous allons faire ensuite, c'est modifier un peu la couleur, d'accord ? Donc, comme vous pouvez le voir, la couleur principale est le jaune. Il y a peut-être beaucoup de fromage. Je ne suis pas vraiment là, les gars. D'accord, donc si vous souhaitez modifier la couleur, c'est très simple. Il suffit de cliquer sur la pizza et de cliquer dessus. Cliquez simplement sur la couleur, et vous pouvez modifier la couleur. Regarde ça. OK, donc je vais faire en sorte que ce soit jaune clair parce que je veux que le fromage ait l'air un peu fondu, non ? Ça ressemble un peu à du fromage Marella, je suppose. OK, donc ce que nous allons faire ensuite est de changer la couleur de fond du gris foncé au transparent, n'est-ce pas ? Il suffit donc de cliquer sur la couleur Bkgroen et de la diriger vers la gauche OK, comme vous pouvez le voir, maintenant le fond est transparent. OK, alors ensuite, cliquez simplement sur Exporter, puis sur Paramètres de lecture, et nous allons masquer l'arrière-plan. Il suffit donc de cliquer sur Masquer et cliquer sur Mettre à jour l'URL publique, n'est-ce pas ? OK, alors maintenant nous allons cliquer sur Aperçu et nous allons obtenir le code d'intégration. OK, alors allons-y. Il suffit donc de cliquer sur FEWR car nous allons utiliser ce code pour intégrer le modèle en trois D au site Web de Webflow, Il suffit donc de cliquer sur Copier Embit. OK, alors maintenant c'est terminé. Ouvrez simplement Google Docs. Il suffit de coller le code ici. OK, alors ensuite, nous allons trouver les modèles complets humides. D'accord, comme vous pouvez le constater, il existe de nombreux modèles gratuits pour un restaurant ou un café. Je vais donc choisir ce modèle. Les gars, n'hésitez pas à choisir le modèle que vous voulez. Sachez simplement que certains modèles sont gratuits. Il y en a d'autres qui ne sont pas gratuits. Donc, si vous ne voulez pas dépenser d'argent, assurez-vous simplement de sélectionner le modèle gratuit, n'est-ce pas ? D'accord, nous allons donc utiliser ce modèle. Si vous faites défiler l'écran vers le bas et cliquez simplement sur Informations sur le droit d'auteur, comme vous pouvez le lire ici, nous pouvons les utiliser librement pour des travaux personnels ou commerciaux. OK, alors cliquez simplement sur OK. D'accord, nous allons maintenant cloner ce modèle. Il suffit donc de cliquer sur cloner dans Webflow. Ensuite, nous serons redirigés vers cette page. Et ce que nous allons faire ensuite est de cliquer sur le site RID, et nous devrons nommer le site. Donc dans ce cas, je vais l'appeler le site Bits, non ? Parce que c'est la nourriture que je vais vendre. OK, alors cliquez simplement sur RED Site. Ensuite, nous serons redirigés vers la page d'édition de Webflow. OK, donc ce que nous allons faire ensuite, c'est intégrer les trois modèles, non ? Le processus sera exactement le même que celui que nous avons fait précédemment. Nous allons donc obtenir ce code d'intégration. Donc je vais juste copier et coller ces gars, non ? C'est la seule partie dont nous avons besoin, alors il suffit de la copier. OK, alors passons à la page d'édition de Webflow, et nous allons créer une scène Spline, et nous allons créer une scène Spline, n'est-ce pas ? Alors, on y va. OK, il suffit maintenant de cliquer sur Ajouter un élément et de faire défiler la page un peu vers le bas. Et dans les sections médias, il suffit de cliquer sur Scène Spline. Allons-y. OK, nous allons maintenant copier et coller le code intégré, puis cliquer sur Recharger la scène Spline OK, donc c'est terminé. Comme vous pouvez le constater, nous avons intégré avec succès ce modèle en trois D au site Web. OK, donc ce que nous allons faire ensuite, c'est diriger ça vers le haut, non ? OK, allons-y. Très cool OK, alors ensuite. Nous allons modifier ce modèle en trois D, il suffit donc de faire défiler la page un peu vers le bas. OK, donc dans les sections de position, nous allons passer de statique à autocollant, n'est-ce pas ? Et il suffit de cliquer sur Auto. Je vais sélectionner 50 et 60. OK, allons-y. Nous allons maintenant animer ce modèle en trois D. OK, il suffit donc de cliquer sur cette scène Spline et de cliquer sur Interactions Et nous allons cliquer dessus et simplement cliquer sur Déplacer la souris dans la fenêtre d'affichage, n'est-ce pas ? Et cliquez simplement sur Sélectionner les actions, puis sur Lire les animations de la souris. OK, il suffit maintenant de cliquer sur Ajouter des animations. Et vous devrez nommer les animations sur ce boîtier. Je vais juste l'appeler Pizza Animations, non ? Tu peux le nommer comme tu veux. Cela dépend entièrement de vous. Et appuyez simplement sur Entrée, je vais cliquer dessus et je vais sélectionner Spline car nous avons obtenu ce modèle Trini de OK, alors maintenant il suffit de faire défiler la page vers le bas. D'accord, nous devrons donc sélectionner l'objet que nous voulons animer. Dans ce cas, nous voulons animer ce modèle de sapin à pizza, n'est-ce pas ? Il suffit donc de cliquer sur Slec et je vais sélectionner un groupe, non ? D'accord, il y a donc de nombreuses options, les gars. Vous pouvez faire pivoter cette pizza sur l'axe X. Vous pouvez le faire pivoter sur l'axe Y. Vous pouvez également le faire pivoter sur l'axe Z. Donc ça dépend entièrement de vous. Dans ce cas, je vais faire pivoter cette pizza sur l'axe Y, non ? Donc ça va être comme ça. Je vais le diriger vers la droite. Je vais le définir à cinq, puis cliquer sur la deuxième couche. Nous allons faire de même, les gars. Il suffit donc de sélectionner l'objet que nous voulons animer. Donc, dans ce cas, ce sera un groupe. Et pour le sens des rotations, ce sera le contraire, non ? Je vais donc diriger cela vers la gauche. Et ça va être moins cinq, non ? OK, cool. Alors maintenant, il suffit de cliquer. Aperçu en direct. Donc ça va ressembler à ça, les gars. Très cool, non ? Vous pourrez donc retourner la pizza. Très cool Regarde ça. OK, je vais donc cliquer sur Enregistrer. Nous allons maintenant tester ces animations, non ? Il suffit donc de cliquer sur les boutons d'affichage. OK, comme vous pouvez le voir, ces animations fonctionnent. Très cool OK, les gars, je crois que c'est ça. C'est tout ce que tu as besoin de savoir. Comme dans la prochaine vidéo où nous allons ajouter du contenu à ce site Web, et nous allons également télécharger nos propres images sur ce site Web, n'est-ce pas ? OK, donc Asi est là. Au revoir 11. : Ajouter du contenu au site Web du restaurant.: Bon sang, les gars. Bienvenue dans le cours. Dans cette vidéo, nous allons ajouter du contenu au site Web de ce restaurant, et nous allons également remplacer les images par nos propres images. OK, maintenant commençons. La première chose que nous allons faire est changer la couleur de la Snap Bar. Il suffit donc de cliquer deux fois sur Nath Bar, et comme vous pouvez le voir, la couleur est bleue, nous allons donc la changer en jaune. OK, il suffit de cliquer dessus, et je vais changer la couleur en jaune foncé. D'accord, nous allons maintenant modifier le contenu de ce site Web. Donc, pour vous faciliter la tâche, nous allons masquer cela dans le modèle. OK, il suffit de cliquer sur Scènes Spline cliquer sur les icônes de réglage et de cliquer sur Afficher tous les paramètres OK, donc pour le moment nous allons le cacher. Il suffit donc de cliquer sur Hiddent et à la fin, nous allons le rendre à nouveau visible, n' OK, alors commençons maintenant, les gars. OK, donc je vais double-cliquer sur cette partie, et je vais la remplacer par le slogan de mon restaurant, non ? Ce sera donc une pizza spatiale. Pour tout le monde. Ok, ça va être mon slogan, non ? Et je vais supprimer cette image. OK, donc je vais juste le faire en majuscules, les gars. OK, alors allons-y. OK, nous en avons donc terminé avec ces sections. Passons maintenant aux sections suivantes, les gars. Alors maintenant, nous allons remplacer cette image par notre propre image, non ? OK, donc je vais supprimer ce texte car je ne pense pas que nous ayons besoin. Je vais donc simplement supprimer. I. OK, donc ce que nous allons faire ensuite, c'est remplacer cette image par notre propre image, n'est-ce pas ? Il suffit donc de cliquer dessus. Et nous allons cliquer sur Remplacer l'image. Et maintenant je vais télécharger ma propre image, non ? Il suffit donc de cliquer dessus, et je vais ouvrir mon dossier de projets. Il suffit donc de cliquer sur le site Web de Pizza. Pour votre information, j'ai généré ces images en utilisant AI Guys. Il suffit donc de cliquer sur Ouvrir, non ? Alors maintenant, il télécharge l'image. Attendez, les gars. Le processus peut prendre quelques secondes. J'espère que cela ne prendra pas trop de temps. OK, allons-y. OK, très cool. Regarde ça. Je vous parle de pizza, les gars. OK, passons maintenant aux sections suivantes. OK, donc ici, je vais modifier un peu le texte. Je vais le remplacer par le DLC Spizzo pour tout le monde. OK, alors passons à ces sections. Et vous pouvez modifier cette taxe si vous le souhaitez, mais dans ce cas, je vais simplement la laisser telle quelle. OK, passons maintenant aux sections suivantes. Eh bien, je ne pense pas vraiment que nous ayons besoin de ces sections, donc je vais juste les supprimer , les gars. Je vais donc simplement cliquer sur Supprimer. Et passons aux sections suivantes. OK, alors maintenant nous allons télécharger les images de la pizza, non ? OK, donc je vais juste retirer cette partie à Gus parce que je ne pense pas que ce soit nécessaire. Il en va de même pour cette partie. Je vais également supprimer ce tableau. D'accord, nous allons maintenant modifier un peu ces sections. Très bien, les gars, alors cliquez dessus. Cliquez simplement sur Petting Global et cliquez sur le menu favori ici OK, et il suffit de cliquer sur cette image, non ? Et il suffit de cliquer sur cette icône de réglage. Et décochez simplement cette case, les gars. OK, alors maintenant nous allons cliquer sur l'image de Jo. Je vais télécharger ma propre image. Le premier menu est donc une pizza garnie d'épinards. OK, alors cliquez simplement sur Ouvrir. Alors maintenant, il télécharge l'image. Alors attendez, les gars. Le processus peut prendre quelques secondes. J'espère que cela ne prendra pas trop de temps, non ? Nous allons donc afficher ici quatre menus. OK, très cool. Regarde ça. OK, alors maintenant nous allons faire de même pour le second. Il suffit donc de décocher cette case et de cliquer sur J Image, et je vais télécharger le deuxième menu Ce sera donc la pizza. Pizza au fromage garnie de fruits de mer. OK, alors cliquez simplement sur Ouvrir. Nous téléchargeons maintenant l'image. Attendez, les gars. OK, la deuxième image a donc été téléchargée avec succès. Nous allons maintenant faire de même pour la troisième image. Il suffit donc de cliquer dessus et de cliquer sur l'icône de réglage, décocher cette case et de cliquer simplement sur l'image Nous allons maintenant télécharger la troisième image. Le troisième menu est donc le Pizza Guys, une pizza au fromage garnie de tomates. Il suffit donc de cliquer sur Upend. OK, nous sommes en train de télécharger cette image Alors attendez, les gars. Le processus peut prendre quelques secondes. J'espère que cela ne prendra pas trop de temps. OK, allons-y. La troisième image a été téléchargée avec succès, et enfin, nous allons faire la même chose pour la quatrième image. Il suffit donc de cliquer sur cette image, cliquer sur cette icône de paramètres décocher cette case et de cliquer sur cette image, et nous allons télécharger l'image Le quatrième menu est donc une pizza au fromage garnie de pepperoni. Donc ça a l'air très délicieux, non ? Alors cliquez simplement sur Ouvrir, les gars. OK, maintenant nous téléchargeons l'image. Attendez, les gars. Le processus peut prendre quelques secondes. J'espère que cela ne prendra pas trop de temps. OK, allons-y. Comme vous pouvez le constater, nous avons téléchargé ces images avec succès. OK, alors ensuite, nous allons modifier ces manuels, non suffit donc de double-cliquer dessus, et nous allons changer le nom en Spina Pizza, n'est-ce pas ? Et je vais également modifier le prix, il suffit donc de décocher cette case. OK, donc le prix sera de 15$, non ? Et vous pouvez également ajouter, par exemple, les descriptions de la pizza aux épinards. Il suffit donc de décocher cette case et double-cliquer sur ces manuels Donc je vais juste taper quelque chose au hasard, les gars. Cette pizza aux épinards est faite de fromage et d'épinards OK, nous allons donc faire la même chose pour le deuxième menu, non Il suffit donc de cliquer dessus. Cliquez simplement sur les icônes de ce paramètre, cochez cette case et double-cliquez simplement sur la zone de texte. OK, comme vous pouvez le voir, c'est une pizza aux fruits de mer, alors tapez simplement une pizza aux fruits de mer. Comme ça. Je vais également modifier le prix, alors décochez cette case. Et le prix sera exprimé en dollars américains. Donc, la pizza aux fruits de mer coûte 15$ ou peut-être 20$, c'est vrai, parce que les fruits de mer sont un peu plus chers, je suppose D'accord, nous allons maintenant modifier la description des aliments. suffit donc de double-cliquer dessus et de décocher cette case, et modifions le texte Donc je vais juste taper, genre, dix gars au hasard, la pizza aux fruits de mer est faite de fromage, de beurre et de fruits de mer. Bien, nous allons maintenant modifier le troisième menu. Il suffit donc de cliquer sur les icônes de réglage, de cocher cette case. Double-cliquez sur cette zone de texte. Et comme vous pouvez le voir, c'est une pizza aux tomates. Bon, maintenant nous allons modifier le prix, cliquer sur les icônes de réglage, décocher cette case. Et le prix sera en dollars américains. La pizza aux tomates va être un peu moins chère, donc je vais la vendre à 8$, non ? D'accord, nous allons maintenant modifier les descriptions des aliments. Il suffit donc de décocher cette case et de double-cliquer sur les manuels Donc je vais juste taper , genre, un jour au hasard. Cette pizza est composée d'ail et de tomates. OK, nous allons maintenant modifier le quatrième menu, double-cliquer dessus, décocher cette case, double-cliquer sur la zone de texte Comme vous pouvez le voir, c' est une pizza au pepperoni. Je vais modifier un peu le prix. Il suffit donc de décocher ces livres. Et le prix sera en dollars américains, et je vais vendre cette pizza à 12 dollars, non ? Enfin, je vais modifier les descriptions des aliments. Il suffit donc de décocher ces livres. Double-cliquez sur ces manuels. Je vais juste taper un truc au hasard, les gars. Cette pizza est donc faite de fromage, de beurre et de pepperoni. OK. OK, donc la dernière chose que nous allons faire est de rendre le modèle TD visible. Si vous vous souvenez précédemment, nous cachons le modèle TD, non ? Alors, cliquons sur la scène Spline, puis sur les icônes des paramètres puis sur Afficher les paramètres, et nous allons passer de la visibilité masquée à la visibilité visible, n'est-ce pas ? OK, alors maintenant, cliquons sur ce bouton de lecture. OK, alors maintenant, faisons défiler la page vers le haut. OK, très cool. Regardez ça, les gars. Les animations fonctionnent donc. Maintenant, faisons défiler la page un peu vers le bas. Une pizza spéciale pour tout le monde, non ? C'est donc une pizza très délicieuse, les gars. Regarde ça. OK, alors maintenant faisons défiler la page vers le bas. D'accord, de délicieuses pizzas pour tout le monde. Et voici notre menu, les gars. Très cool. Regarde ça. Nous avons donc une pizza aux épinards, une pizza aux fruits de mer, une pizza aux tomates et une pizza au pepperoni Très cool. OK, donc c'est terminé. Je vous verrai dans la prochaine vidéo. Garçon. Je suis vraiment désolée, les gars. Il y a une chose que j'oublie, les gars. Donc, si les clients veulent passer une commande, vous allez cliquer sur ce bouton, n'est-ce pas ? Et il suffit de cliquer sur les icônes de réglage, et vous avez plusieurs options, n'est-ce pas ? Vous pouvez connecter ce bouton à Google Form. Vous pouvez également saisir votre adresse e-mail. Donc, si quelqu'un souhaite commander votre pizza, il vous enverra un e-mail, ou vous pouvez également ajouter votre numéro de téléphone ici. Donc, si quelqu'un souhaite commander la pizza, il peut vous contacter via ce numéro de téléphone. OK, les gars, je crois que c'est ça. C'est tout ce que tu as besoin de savoir. Je vous verrai dans la prochaine vidéo. Au revoir. 12. Creating Online Reservation Form for Restaurant Website: Bonjour, les gars. Bienvenue dans le cours. Dans cette vidéo, nous allons créer un formulaire de réservation en ligne pour le site Web de notre restaurant. OK, alors commençons maintenant. Tout d'abord, il suffit de cliquer sur Marketplace. Cliquez ensuite sur Vue d'ensemble. Cliquez ensuite sur Applications. Vous allez être redirigé vers cette page. Il suffit de faire défiler la page un peu vers le bas. Cliquez ensuite sur Service client et Engagement communautaire. Cliquez ensuite sur Forms and Surface. D'accord, nous allons donc utiliser Typeform. Il suffit donc de cliquer dessus et de cliquer sur le site Web de FE. OK, alors ne vous inquiétez pas, les gars. Typeform est totalement gratuit Ts. OK, alors cliquez simplement sur Commencer. Vous devez donc vous inscrire à OptionSCS en utilisant votre compte Gmail Vous pouvez également vous inscrire à l'aide de votre compte Microsoft. Cela dépend donc subtilement de vous. Dans ce cas, je vais m'inscrire en utilisant mon GML.com, Il vous suffit donc de cliquer sur S'inscrire avec Google. OK, allons-y. Comme vous pouvez le voir, j'ai été redirigé vers mon tableau de bord. OK, donc je vais juste cliquer sur quelques plans. Comme vous pouvez le constater, Type Form propose un plan gratuit. De toute évidence, il existe certaines limites. En ce qui concerne le plan gratuit, par exemple, vous ne pouvez avoir que dix réponses, c'est donc votre limite maximale. Les gars, assurez-vous d'être pleinement conscients de ces limites. OK, alors maintenant, revenons au tableau de bord. OK, il suffit maintenant de cliquer sur Créer un nouveau formulaire. Trois options s'offrent à vous. La première option est de repartir de zéro. La deuxième option consiste à importer des questions. Par exemple, si vous avez déjà un formulaire Google, vous pouvez l'utiliser, et la troisième option consiste à créer le formulaire à l'aide de l'IA. OK, dans ce cas, je vais sélectionner la troisième option. Je vais créer le formulaire à l'aide de l'IA. Et ne vous inquiétez pas, le processus est très simple. Donc, tout d'abord, vous devrez écrire le prom décrivant le type de formulaire que vous souhaitez créer. Dans ce cas, je souhaite créer un formulaire de conservation en ligne pour les pizzerias OK. Alors maintenant, je vais continuer. D'accord, vous devez maintenant spécifier les questions ou les sujets que vous devez poser dans votre formulaire. D'accord, parce que dans ce cas, nous créons un formulaire de réservation en ligne pour une pizzeria, nous devrons donc évidemment leur demander leur nom, leur adresse e-mail. Numéro de téléphone, car nous devons les contacter. Quoi d'autre ? Type de pizza. Parce que nous voulons savoir quel type de pizza vous souhaitez commander. Enfin, nous voulons également savoir quand ils arriveront, n'est-ce pas ? OK, maintenant je vais cliquer sur Générer quatre. OK, il suffit de cliquer dessus . Le processus peut prendre quelques secondes, les gars. J'espère que cela ne prendra pas trop de temps. Alors, attendez. OK, donc maintenant Typeform génère le formulaire pour nous. OK, c'est le formulaire, les gars. C'est comme la première page. Quel est ton nom ? Il s' agit de la deuxième page. Quelle est ton adresse e-mail ? Il s'agit de la troisième page. Quel est ton numéro de téléphone ? Et voici la troisième page. Quel type de pizza souhaitez-vous réserver ? Voici la cinquième page. Quand arriverez-vous au restaurant ? Bien, nous allons maintenant apporter quelques modifications à ce formulaire. Il suffit donc de cliquer dessus. Comme vous pouvez le constater à l'heure actuelle, c'est toujours facultatif, et je veux le rendre obligatoire Il suffit donc de l'activer. D'accord, nous allons donc faire la même chose pour l'e-mail. Alors, rendez-le obligatoire. Et nous allons également faire la même chose pour le numéro de téléphone. Rendez-le également obligatoire. Et pour le type de pizza, je vais changer le type de données du menu déroulant au choix multiple. OK, donc nous allons avoir quatre options, non ? Si vous vous souvenez, nous avons quatre menus, n'est-ce pas ? Le premier est donc SinuchPizza. Alors tapez simplement Spina Pizza, les gars. La deuxième option est la pizza aux fruits de mer. Il suffit donc de taper une pizza aux fruits de mer. La troisième option est la pizza aux tomates, il suffit donc de taper une pizza aux tomates. Et la troisième option est la pizza au pepperoni, non ? Il suffit donc d'ajouter une pizza au pepperoni. Allons-y. OK, donc si vous souhaitez ajouter d'autres options, cliquez simplement sur Ajouter un choix. D'accord, il ne reste plus qu'à cliquer dessus. Enfin, je vais changer le type de données de calently à date. Il suffit donc de cliquer sur la date. Dans ce cas, le client va saisir la date à laquelle il arrivera au restaurant, n'est-ce pas ? OK, donc je pense que c'est terminé. Il vous suffit maintenant de cliquer sur Publier. OK, comme vous pouvez le voir, nous avons publié ce formulaire avec succès, n'est-ce pas ? Alors maintenant, il suffit de cliquer ici. Vous avez deux options, les gars. La première option consiste donc à intégrer le code à votre site Web Webflow Il suffit donc de cliquer sur intégrer dans une page Web et de cliquer sur Commencer l'intégration Et dans ce cas, nous créons le site Web à l' aide de Webflow, il vous suffit donc de cliquer sur Webflow Vous pouvez donc copier ce code puis le coller dans les sections du code d' intégration, n'est-ce pas ? Il suffit donc de cliquer dessus et de faire défiler légèrement l'écran vers le bas et de cliquer sur Intégrer le code Toutefois, ce filtre n'est pas disponible pour les utilisateurs du forfait gratuit. Donc, malheureusement, si vous êtes sur le plan gratuit, vous ne pouvez pas utiliser ce filtre, n'est-ce pas ? Mais ne vous inquiétez pas, les gars. Il y a une autre alternative, non ? Voilà donc les premières options. Vous aurez besoin d' un plan de base, non ? Et ça va te coûter environ 14$ par mois. Toutefois, si vous optez pour le forfait gratuit, ne vous inquiétez pas. Il existe d'autres options. OK, donc il vous suffit de cliquer sur Partager le lien et de copier ce lien, les gars. accord ? Copiez simplement ce lien. Et revenons à la page d'édition de Webflow. Et faites simplement défiler la page vers le bas. Et cliquez simplement sur ce bouton, les gars, non ? Il suffit de cliquer sur ce bouton et cliquer sur ces icônes de réglage. Et ce que vous devez faire , c'est de copier-coller le lien ici. OK, donc si le client clique sur ce bouton, il sera redirigé vers le formulaire, n'est-ce pas ? Alors testons cela. Je vais publier ce site Web, il suffit donc de cliquer sur Publier dans le domaine sélectionné. OK, donc la publication de ce site Web peut prendre quelques secondes , les gars. Alors, attendez. OK, comme vous pouvez le voir, ce site Web a été publié. Alors maintenant, il suffit de cliquer dessus. OK, donc c'est le site Web, les gars. OK, c'est donc le modèle T D. Et comme vous pouvez le constater, l' animation fonctionne toujours. OK, très cool. Alors maintenant, si vous cliquez sur ce bouton, passez une commande. suffit donc de cliquer dessus, puis vous serez redirigé vers le formulaire de réservation en ligne. OK, alors quel est ton nom ? Je vais taper mon nom, Chris. Quelle est ton adresse e-mail ? Je vais donc simplement saisir mon adresse e-mail. Allons-y. Quel est ton numéro de téléphone ? Juste un numéro de téléphone aléatoire, les gars. OK, alors quel type de pizza, que souhaitez-vous réserver ? OK, donc je veux manger des aliments sains, alors je vais choisir une pizza aux épinards. D'accord, alors quand arriverez-vous au restaurant. D'accord, donc ce mois-ci, le 25 ou peut-être le 27, 2024 cette année. OK, alors cliquez simplement sur Soumettre. D'accord, au fur et à mesure que vous lisez, merci d'avoir rempli ce formulaire de saisie Et j'ai reçu les notifications par e-mail, les gars. Très cool, non ? OK, c' est comme ça que vous créez un formulaire de réservation en ligne, les gars. Bien, maintenant, revenons au bord Type Form et cliquez simplement sur Résultat. Comme vous pouvez le constater, nous avons reçu une réponse ici. C'est pour moi, non ? OK, les gars, je crois que c'est ça. C'est tout ce que tu as besoin de savoir. Je vous verrai dans la prochaine vidéo où nous allons optimiser le référencement. Alors je vous verrai là-bas. Au revoir 13. Conducting SEO Audit with SEOptimer & Semrush: Bon sang, bon retour sur le parcours. Dans cette vidéo, nous allons effectuer un audit SEO sur notre site Web. Les outils que nous allons utiliser sont donc les optimiseurs de référencement et les SNBRS Vous vous demandez peut-être quel est l'objectif d' un audit SEO ? Eh bien, l'objectif est d' évaluer les performances du site Web et d'identifier les domaines à améliorer en matière d'optimisation des moteurs de recherche. Ce processus aide les entreprises à améliorer leur visibilité, expérience utilisateur et leur présence en ligne globale. OK, non, commençons, les gars. Et ne t'inquiète pas. Le processus est très simple. Il vous suffit de publier votre site Web Webflow. Il suffit donc de cliquer sur Publier. Dans ce cas, j'ai déjà publié ce site Web, copiez et collez l'URL, copiez et collez le lien vers ce site Web, et je l'ai simplement mis ici, n'est-ce pas ? Et il suffit de cliquer dessus. OK, les gars, le processus peut prendre quelques secondes. J'espère que cela ne prendra pas trop de temps. Je vais sauter cette partie, et je reviendrai une fois le processus terminé. C'est bon, les gars. Voici donc le résultat. La note globale est C. Et en bas, nous avons la répartition. Donc, pour le référencement non rémunéré, le score est C moins pour le lien. Le score est un plus pour l'utilisabilité. Le score est C pour la performance, le score est A plus, et pour le social, le score est F. Vous vous demandez peut-être pourquoi ? Eh bien, parce que nous n'avons pas ajouté le contexte des réseaux sociaux au site Web, les gars. C'est la raison pour laquelle nous avons obtenu F. D'accord, il y a donc 23 recommandations pour améliorer le référencement, il suffit de cliquer dessus. Comme vous pouvez le voir ici, nous avons de nombreuses recommandations. La première consiste donc à inclure un texte de description de méthode. C'est une priorité absolue. Et le second consiste à implémenter un fichier TXT de robot. C'est une priorité moyenne chez Canonical Tech. Priorité moyenne également. Quoi d'autre ? Supprimer le texte H en double, priorité moyenne. Et nous avons également d'autres recommandations, par exemple, comme ajouter tous les attributs à toutes les images, mais ce n'est pas une priorité, n'est-ce pas ? Créez et liez votre page Facebook, créez et liez votre profil Twitter. Et ces deux-là ne sont pas non plus prioritaires, les gars. D'accord, utilisons maintenant les SMR pour effectuer un audit SEO. OK, alors allez sur ce site Web, sembrs.com supprime l'audit du site, et nous allons faire la même chose, les gars Il suffit donc de copier et coller l' URL de votre site Web, n'est-ce pas ? Il suffit de mettre le lien ici et de cliquer sur Démarrer l'audit. Et ne vous inquiétez pas, c' est totalement gratuit. OK, il suffit maintenant de cliquer sur Démarrer l'audit du site. OK, donc le processus peut prendre quelques minutes, les gars. J'espère que cela ne prendra pas trop de temps, alors attendez. Très bien, les gars, voici le résultat. La santé du site est de 89 %, ce qui est plutôt bon, à mon avis Il n'y a aucune erreur, 24 avertissements, 100 % de capacité. Pour les annonces DTPS, c'est 99 %. OK, donc pour les performances secondaires, c'est 98 %, ce qui est très bien. Pour le maillage interne, c'est 100 %. Pour les marquages, cela n'a pas encore été implémenté. Et il en va de même pour les principaux violons du Web. Il n'a pas encore été mis en œuvre non plus, les gars. OK, alors c'est le résultat ? Je crois que c'est ça, les gars. C'est tout ce que tu as besoin de savoir. Je vous verrai dans la prochaine vidéo. 14. Créer un site Web de profil d'entreprise avec Webflow AI Site Builder: Bon sang, les gars. Bienvenue dans le cours. Dans cette vidéo, nous allons créer un site Web de profil d'entreprise à l'aide d'AI Site Builder. Il s'agit de l'un des derniers chargeurs de Webflow. OK, commençons. Tout d'abord, vous devrez vous connecter et écrire le bal de fin d'année. Créez un site Web de profil d'entreprise pour le service de gestion Wat. Cette société propose trois services principaux. Le premier est Way Set up trois fois par semaine. Le deuxième domaine est recyclage des déchets, l'élimination des déchets médicaux. Rendez le design de l'interface utilisateur moderne, styliste et professionnel OK, donc c'est mon bal de fin d'année, un bal très simple. Et cliquons sur Générer OK, maintenant l'IA va générer le site Web. Et voici la structure de votre site Web. Et cliquez sur Générer le site. OK, maintenant l'IA construit le site Web. Cela prendra quelques minutes, peut-être deux ou trois minutes. Alors attendez, les gars. J'espère que cela ne prendra pas trop de temps et je suis très impatiente de voir le résultat. Eh bien, ça n'a pas pris trop de temps, les gars. Cela n'a pris qu'une minute , voire moins d'une minute. OK, voici le site web. Ok, regardez ça, les gars. Voici donc la page d'édition. Vous pouvez modifier le site Web. Vous pouvez modifier le texte. Vous pouvez modifier l'image. Vous pouvez modifier la couleur du Bground. Tu peux faire ce que tu veux. Cela dépend entièrement de vous. Et vous pouvez également changer d'équipe, n'est-ce pas ? Vous pouvez le personnaliser comme vous le souhaitez. OK, maintenant faisons défiler la page un peu vers le bas. Voici donc le site Web, la gestion des déchets, la garantie de conformité, ramassage professionnel des déchets, le recyclage et l'élimination médicale pour les entreprises, ainsi que des solutions fiables, conformes et écologiques adaptées à vos opérations OK, très cool. Nous avons donc deux boutons ici, demander un devis et quelques services. J'aime beaucoup ce style. Regarde ça. La gestion moderne des déchets simplifie. Il met donc en évidence tous les services proposés par cette entreprise. Par exemple, les collectes programmées des déchets, services de recyclage avancés, la gestion des déchets médicaux. OK, très cool. Et il montre également quelques statistiques ici, ce qui est très important. Faisons défiler la page vers le bas. Et en bas, nous avons également les sections Q et 8. OK, très cool, les gars. Je pense que c'est ça. C'est tout ce que tu as besoin de savoir. Je vous verrai dans la prochaine vidéo. Garçon. 15. Conclusion et résumé: Les gars de Holi, bon retour sur le cours. Dans cette vidéo, je vais résumer tout ce que nous avons appris dans ce cours, et je vais également voir nos trucs et astuces V sur façon d'améliorer la qualité de votre site Web. Bien, commençons par le premier sujet, le référencement ou l'optimisation pour les moteurs de recherche. Vous devez donc mettre en œuvre des pratiques respectueuses du référencement, notamment l' utilisation appropriée des méta-textes, des URL descriptives et du DTML sémantique Cela permet aux moteurs de recherche de comprendre et d'indexer le contenu de manière efficace. Donc, si vous souhaitez augmenter le trafic vers votre site Web, vous devez vous assurer que votre site Web est facile à découvrir. L'un des moyens les plus efficaces consiste à optimiser le mot clé. Utilisez le bon mot clé. Par exemple, vous pouvez utiliser des outils tels que eTRF et simplement taper le mot clé Par exemple, gestion des déchets, et cliquez simplement sur Rechercher des mots clés. Et AdSRF va afficher tous les mots clés optimisés pour OK, voici la liste des mots clés, et vous pouvez voir la difficulté des mots clés. Cela vous donne donc des indications sur la difficulté classer dans les dix premiers résultats de recherche organiques. Et vous pouvez également voir le volume. C'est donc comme le volume de recherche. Donc, si vous utilisez le bon mot clé, vous aurez plus de chances de vous classer dans la recherche Google. Bien, revenons maintenant à la carte mentale, et parlons du deuxième sujet Trois intégrations de modèles en D. Vous devez vous assurer que les trois modèles D sont réactifs et s'adaptent bien aux différentes tailles d'écran. Testez le modèle sur différents appareils pour garantir une présentation cohérente et visuellement attrayante. Pour les techniques d'intégration, deux options s'offrent à vous. Vous pouvez utiliser le code personnalisé Webflow ou vous pouvez l'intégrer à des visionneuses tierces, en particulier si vous ajoutez des animations à votre modèle en trois D de cette manière, vous devez vous assurer que l' animation fonctionne parfaitement Et si vous utilisez Spline pour obtenir votre modèle 3D, il est très important que vous vérifiiez le format de fichier car tous les formats de fichier ne sont pas compatibles avec Webflow Bien, passons maintenant au troisième sujet. Typographie, bonnes pratiques. D'accord, vous devez porter une attention particulière aux choix de typographie, y compris le style amusant, les tailles et l'espacement texte cohérent et lisible améliore la lisibilité et contribue à une conception cohérente De plus, vous devez également garantir le contraste des couleurs. Par exemple, si l' arrière-plan est noir, n'utilisez pas de couleur foncée pour le texte. N'utilisez pas de brun ou de gris car il sera difficile pour les gens de lire votre texte. Assurez-vous d'utiliser une couleur claire comme le blanc, le jaune ou l'orange. Et vous devez également éviter la surcharge décorative. N'ajoutez pas trop de choses à votre site Web car cela peut potentiellement embrouiller les gens. OK, c'est donc la fin du cours. Merci beaucoup, et je vous souhaite tout le meilleur. Au revoir.