Framer : apprendre à créer de beaux sites Web en quelques minutes avec l'IA

1. Introduction: Bienvenue dans un voyage extraordinaire dans le futur du design. Bienvenue chez Framer aujourd'hui. Je suis ici pour dévoiler l'innovation qui distingue Framer des autres Et tout se résume à une fonctionnalité qui change la donne, la puissance de l'IA Bonjour, je m'appelle Ellis, je travaille dans le domaine de la conception Web depuis plus de deux ans et j'ai un diplôme en médias numériques. J'ai utilisé de nombreuses plateformes différentes, allant de wakes à Square Space en passant par Webflow Et Framer se démarque vraiment, une plateforme qui comprend votre vision avec un simple accessoire En quelques instants, vous avez à portée de main un site Web entièrement fonctionnel et personnalisé. C'est la magie de l' IA de Framer. Mais ne nous arrêtons pas. Laissez-moi vous présenter rapidement ce que vous allez apprendre en créant des sites Web personnalisés, en exploitant sans effort la puissance de l'IA pour la gestion de contenu afin de gestion de contenu afin Voici votre feuille de route pour devenir un gourou du design. Nous aborderons tout, de la création de blocs avec l'aide du chat GPT à la personnalisation fluide des éléments de votre site Web Pour une touche vraiment unique, vous plongerez conception, de l' amélioration de la navigation, du perfectionnement des sections et même de la maîtrise de l'intégration et même Êtes-vous donc prêt à saisir le pouvoir du cadrage et à suivre la vague d'innovation en matière de design basée sur l'IA Ce voyage est sur le point de transformer à jamais la façon dont vous créez des sites Web Il est temps de laisser libre cours à votre créativité. 2. Histoire du design UX d'UI: Dans cette vidéo, nous allons donc faire un voyage dans le passé, où nous allons nous plonger dans l'histoire intéressante de l' évolution du design UI UX au fil du temps. Il s'agit d'un voyage entre les débuts de la technologie les interfaces élégantes et conviviales dont nous jouissons aujourd'hui Voici l'histoire de l'interface utilisateur et de la conception de l' expérience utilisateur. Très bien , commençons. Dans les années 1960, à l'époque, des personnes comme Douglas Engelbart jetaient les bases de ce qui allait devenir nos C'était l'ère des machines maladroites et des graphismes basiques. Bien loin de ce à quoi nous sommes habitués maintenant. Dans les années 1980, les pommes produisaient des déchets avec le Macintosh C'est à ce moment-là que ces icônes cliquables et Windows ont commencé à devenir une réalité Soudain, l'informatique est devenue beaucoup plus visuelle alors que nous arrivons dans les 2000, les téléphones portables occupent le devant de la scène. Souvenez-vous de ces bons téléphones Nokia, ils ont été les pionniers de l'interface utilisateur mobile L'époque des textos à Nine Style. Un peu original mais tellement nostalgique. Mais attendez, nous sommes en 2007 et Apple lance les écrans tactiles de l'iPhone Bomb et pincer pour zoomer devient à la mode. C'est comme si nous avions sauté dans le futur, non ? Les appareils mobiles commencent à changer complètement le jeu de l'interface utilisateur. Et devinez quoi ? Nous voici aujourd'hui avec réseaux sociaux Abscalore et les gadgets qui nous parlent Les concepteurs d'expérience utilisateur travaillent d'arrache-pied pour rendre notre vie numérique fluide et agréable. Il s'agit de faire en sorte que cette application fonctionne parfaitement lorsque vous appuyez sur l'écran. Pour ce qui est de l'avenir, nous avons des choses folles qui nous attendent. La réalité augmentée et la réalité virtuelle arriveront bientôt au coin de la rue Il ne s'agira pas simplement de taper et de balayer. Vous faites peut-être signe à vos gadgets pour faire bouger les choses Tout au long de tout cela, ce sont les designers qui ont été les véritables MVP, ils ont créé façon dont nous interagissons avec la technologie, en veillant à ce qu'elle soit non seulement fonctionnelle, mais aussi esthétique. Alors voilà. L'histoire de l' interface utilisateur et de la conception de l'expérience utilisateur. J'espère que vous vous amuserez à parcourir la chronologie technique avec moi et je vous verrai dans la prochaine vidéo 3. Pourquoi Framer ?: Dans cette vidéo, nous plongeons en profondeur dans le monde de la création de sites Web. Nous explorerons des options populaires telles que Quick Square, Space, Webflow et un nouveau venu doté d'un cadreur AI Twist Framer À la fin de cette vidéo, vous aurez une idée plus précise de ce que propose chaque plateforme et des raisons pour lesquelles Framer pourrait se démarquer Alors allons-y directement. Lorsqu'il s'agit de créer des sites Web, vous disposez d'une multitude d'options. Wick et Square Space sont des choix conviviaux, parfaits pour ceux qui ne possèdent pas de compétences approfondies en codage Ils proposent des interfaces Dragon Drop, modèles préconçus et des outils faciles à utiliser pour que votre site soit rapidement opérationnel Ensuite, il y a Webflow, un outil puissant pour ceux qui veulent plus de contrôle Avec Webflow, vous travaillez dans une interface visuelle tout en ayant accès à la personnalisation au niveau du code C'est comme un pont entre le design et le développement, offrant flexibilité et liberté de création. C'est là que les choses deviennent intéressantes. Framer, traditionnellement connu pour ses prouesses en matière de prototypage, a bouleversé a Imaginez que vous tapez une simple invite et le tour est joué, et l'IA génère un site Web entièrement modifiable pour C'est un concept qui change la donne. Pourquoi choisir Framer plutôt que les autres ? Eh bien, imaginez les possibilités qu'offre l'IA de Framer, vous ne vous contentez pas de choisir des modèles Vous générez des mises en page personnalisées en fonction de vos idées. Vous n'êtes pas limité aux styles prédéfinis. Vous avez un point de départ qui vous est propre. Bien que Wicks, Square Space et Webflow aient leurs points forts, approche basée sur l'IA de Framer apporte une Vous pouvez commencer par les mises en page générées par l' IA , puis les affiner à la perfection. C'est comme avoir un assistant de design personnel toujours prêt à expérimenter et à itérer. Mais il y a plus d'encadreurs qui ne se limitent pas au design. Il comble le fossé entre le design et développement grâce à la possibilité de publier de vrais sites Web. C'est comme avoir un guichet unique pour la création et le lancement. La commodité est indéniable au final. La plateforme que vous choisissez dépend de vos besoins. Si vous recherchez des configurations rapides et simples, les mèches et les espaces carrés sont peut-être vos amis Webflow est la solution idéale pour ceux qui recherchent un contrôle et un cadrage avancés Eh bien, c'est le choix avant-gardiste pour ceux qui recherchent la magie d'un site Web modifiable et alimenté par l'IA Alors que vous vous lancez dans la création de votre site Web, réfléchissez à ce qui correspond à votre style et à vos objectifs. Merci de m'avoir rejoint dans cette exploration des créateurs de sites Web et je le verrai dans la prochaine vidéo. 4. Tarification de Framer: Alors, combien coûte réellement commencer à utiliser Framer ? Eh bien, j'ai une bonne nouvelle. Vous pouvez publier votre propre site Web gratuitement. Ensuite, le plan suivant ne coûte que 5$ par mois. Il ajoute une page d'accueil, 44 modèles de pages et un domaine personnalisé. Ensuite, nous avons le plan de base , recommandé pour les sites personnels. Vous pouvez créer un nombre illimité de pages. Vous pouvez également protéger votre site Web par mot de passe et vous avez un plafond de visiteurs plus élevé pour 30$ par mois. Vous bénéficiez du plan pro. Il est recommandé pour les grands sites et propose des analyses détaillées du site Web et propose dix collections de systèmes de gestion de contenu. Vous avez également une limite de recherche de 300 pages et un plafond de visiteurs très élevé. Si vous descendez ci-dessous, nous avons en fait les tarifs de l'équipe pour 20$ par mois Vous pouvez avoir jusqu'à cinq éditeurs sur votre site Web et vous disposez d'un historique des versions de sept jours. Vous pouvez également collaborer en direct avec tous les votre équipe en même temps pour 40$ par mois Vous obtenez tout ce qui est inclus dans le plan de base de l'équipe pour 20$ et vous pouvez gérer les autorisations du projet. Et vous pouvez également avoir dix éditeurs et disposer d'un espace de stockage de fichiers beaucoup, beaucoup plus important. Il existe également un historique des versions de 30 jours, ce qui est très utile pour un projet de grande envergure. Si vous voulez vraiment prendre du recul , voici un petit conseil. Tous ces prix sont en fait les prix que vous obtenez par mois si vous payez le tout en gros pendant un an. Donc, si vous souhaitez modifier et voir les prix, les prix mensuels sans aucune condition, si vous souhaitez annuler après un mois, voici les prix que vous payez réellement. Ils sont donc un peu plus chers. Pour le Team Basic, c'est environ 5$ de plus. Et pour le Team Pro, c'est 50$ , donc 10$ de plus. Et là aussi, vous pouvez le réactiver et le désactiver, et vous pouvez voir que le Mini ne coûte que 5$. Le modèle de base coûte cinq dollars également, et le pro, dix Et la gratuité reste gratuite, heureusement. Et voici également un autre conseil que je recommande vivement de consulter. Donc, en fait, si vous faites défiler la page vers le bas, vous pouvez avoir la description de chaque plan dans la description détaillée de ce que tout offre d'une manière vraiment très conviviale, vous pouvez voir une représentation visuelle des types de services proposés dans chaque package. Donc, en fait, voici la chose à laquelle vous devez faire attention. Par exemple, dans le plan de base, il est indiqué qu'il n'y a qu'une collection de systèmes de gestion de contenu, n'est-ce pas ? Donc, si vous n'êtes que sur cette page et que vous ne l'avez pas encore fait défiler la page vers le bas, vous pourriez vous dire : oh, d'autres forfaits comme celui-ci ne le contiennent pas déjà, alors dois-je acheter le Et tu cliques dessus pour obtenir le plan ? Mais en fait, si votre priorité est d' avoir une collection CMS, vous pouvez faire défiler la page vers le bas et voir que la collection gratuite et la mini-collection contiennent déjà cette collection CMS. Et vous pouvez payer beaucoup moins, ou même vous n'avez rien à payer pour avoir cette collection. Donc, vous savez, c'est un peu trompeur, un peu de désinformation à mon avis Ensuite, vous pouvez voir une description détaillée des éléments du CMS, et vous pouvez voir la description détaillée de tous les services offerts aux entreprises. Honnêtement, je ne pense pas vraiment que tu en aurais besoin, mais tu sais, on ne sait jamais. Et il est toujours bon de connaître les options qui s'offrent à vous. Donc oui, attention à ça, c'est sûr. Et si vous faites défiler la page un peu plus bas, trouverez une section FAQ pour tout ce qui concerne les finances et les prix. Et celles-ci pourraient en fait répondre à certaines de vos questions. Alors, jetez-y un coup d'œil également avant de prendre des décisions importantes concernant le plan. Donc oui, le service gratuit est idéal pour essayer le service et voir ce qu'il a à offrir. Et puis, si vous souhaitez réellement publier votre propre site Web ou le site Web d'une entreprise, vous pouvez opter pour le mini, à mon avis, juste pour avoir ce domaine personnalisé. Mais bien entendu, explorez vos options et explorez vos besoins, par exemple en écrivant les fonctionnalités que vous souhaitez, par exemple quels sont vos besoins, puis comparez-les dans ce tableau détaillé. Et faites correspondre cela et choisissez l'option la moins chère. Je pense que ce serait également le moyen le plus pratique d'économiser de l'argent. Alors oui, merci d'avoir regardé cette vidéo et je vous verrai dans la prochaine. 5. Pour commencer: Pour commencer à créer votre propre site Web sur Framer, vous devez d'abord savoir où trouver des informations sur Framer et vous familiariser avec Commençons par le site Web lui-même et ce qu'il a à offrir ici sur la page principale. Vous pouvez commencer immédiatement par l'invite, mais vous devrez ensuite entrer dans les détails et connaître réellement l'interface afin de personnaliser l' invite basée sur l'IA et ce qu'elle a produit. Voyons ce qu'il y a ci-dessous. Voici un peu de promo, mais ce n' est pas vraiment ce sur quoi je voulais me concentrer. Nous avons à nouveau l'invite de l' IA, mais si vous faites défiler l'écran vers le bas, vous pouvez également explorer vous pouvez également explorer les modèles avec lesquels vous pouvez commencer. Regardons les nouveautés et les versions gratuites ici. Vous pouvez avoir de nombreux modèles créés à l'aide de Framer Certains d'entre eux ont peut-être été assistés par l'IA, d' autres sont entièrement produits par des designers. Vous avez les options payantes et vous avez également de nombreuses options gratuites. Ici, dans l'onglet gratuit, vous n'avez que les trois options à explorer. Maintenant que c'est réglé, je voulais également vous montrer les modèles de sites Web basés sur l'IA, et nous pouvons voir ici quelques exemples. Il existe également des choix et des recommandations du personnel provenant uniquement des concepteurs. Quoi qu'il en soit, pour vos ressources. Outre ce cours, il existe bien sûr de nombreuses ressources que vous pouvez apprendre. Si vous avez des questions, vous souhaitez entrer dans les détails d' un sujet qui vous intéresse pour commencer et connaître l' interface à laquelle nous voulons nous connecter. Une fois que vous avez accédé à votre compte, le tableau de bord est au centre de votre création. Vous devez utiliser des boutons de démarrage et vous pouvez commencer par un I, commencer à créer votre propre site Web en un instant. Vous pouvez également coller votre design depuis Figma, ou vous pouvez regarder des didacticiels autres que celui-ci , bien sûr, et apprendre Framer with Framer En dessous, vous avez votre propre projet récent. J'en ai déjà un couple qui est une toile vierge et quelque chose que je viens d'essayer. Vous pouvez également voir la dernière fois qu'il a été consulté, la dernière fois qu'il a été modifié. Vous pouvez également le lister, ou j'ai les icônes et l'aperçu. Vous avez également la barre de recherche pour rechercher votre propre projet. Vous pouvez le trier par dernière consultation par moi, dernière modification et par ordre alphabétique pour créer votre propre projet. Vous pouvez également le faire. Ici, sur la partie gauche, nous avons notre compte personnel et notre pause personnelle archivés Si vous cliquez ici, vous avez les paramètres du compte, le mode nuit et le mode jour entre lesquels vous pouvez basculer Vous avez l'application de bureau que vous pouvez télécharger. Vous pouvez également démarrer l'application pour importer depuis Figma et esquisser vos propres prototypes Vous pouvez également masquer cette section de démarrage en cliquant ici. Vous pouvez également accéder à la page d'accueil et demander à la communauté d'assistance, et c'est également là que vous vous inscrivez. Si vous accédez aux archives, vous pouvez voir vos projets d' archives qui ne sont plus utilisés. Ici. Vous avez également l'onglet Mon équipe. Si vous cliquez sur les trois points, vous avez les paramètres de l'équipe. Vous pouvez inviter des membres, copier, inviter, lien et créer un nouveau dossier pour rester organisé. Si vous allez sur tous, nous avons en fait le même tableau de bord parce que je suis toute seule ici. Malheureusement, je ne travaille avec personne d'autre. Nous pouvons accéder aux modèles, vous pouvez voir vos modèles ici, ou vous pouvez créer vos propres modèles que vous pouvez partager avec les membres de votre équipe. Si nous passons aux archives, nous avons le projet d'archivage de l'équipe. Passons aux pauses, et passons à un canevas vide ici, supprimons-le. Nous avons en fait pas mal de choses à explorer. Allons-y un par un. En haut à gauche, nous avons le logo du cadreur et nous avons la possibilité d' accéder au tableau de bord Nous avons les actions rapides. Nous avons également un tas d'options différentes. Où vous pouvez créer un nouveau fichier et toutes les options associées à ce fichier. Vous pouvez également modifier, par exemple copier, coller, sélectionner. Tous ont leurs propres raccourcis qui sont des raccourcis clavier classiques. Sur n'importe quel ordinateur portable, je n' entrerai pas dans les détails. Ensuite, vous avez la vue. Nous pouvons changer les modes ici. Encore une fois, nous pouvons zoomer ou dézoomer Vous pouvez également le faire avec votre tapis de souris, votre souris, ce que vous voulez. Vous pouvez styliser votre texte ici, ce qui est également possible sur le côté droit Plus pratique, je vous le montrerai plus tard. Ensuite, il y a les groupes. Groupes. Nous pouvons inverser des éléments, créer des composants et créer des composants à partir du code. Nous pouvons prévisualiser, nous pouvons également créer des composants de code. Nous avons ici quelques préférences pour les paramètres du site. Nous avons des paramètres de site plus avancés, tels que les domaines personnalisés, les redirections et les analyses, ainsi que vos plans et la version de l'historique de votre site Web pour toute question que vous pouvez adresser à l'aide Vous pouvez également accéder de nouveau à votre compte. Maintenant que nous avons exploré cela en haut, nous avons le nom du projet et le plan sur lequel se trouve le site Web. Sur la droite, nous avons le logo du compte. Nous avons les paramètres du site. Nous avons également le bouton de prévisualisation en direct, qui vous montre la version du site Web lors de sa publication. Vous pouvez également inviter des collaborateurs ici. Vous pouvez publier et mettre en ligne votre site Web ici. Si nous allons vers la gauche, vous avez vos pages, vos couches et vos actifs, ce qui ressemble en gros à un arbre allant du plus large au plus étroit. Tout d'abord, vous avez vos pages. Nous n'avons plus qu'une page, notre page d'accueil, vous auriez également votre CMS ici, et vous pouvez créer un canevas lorsque vous souhaitez créer un prototype. Supprimons cela. Lorsque vous créerez réellement votre site Web, vous travaillerez ici avec des couches. Nous avons en fait quelques textes dont nous n'avons pas besoin. Vous pouvez voir que vous pouvez commencer par l'IA. Et nous allons créer un tas de couches différentes que nous aborderons dans les vidéos suivantes. Ici, tous vos actifs, tels que les images le code et les différentes stylisations, seront intégrés ici En haut, vous pouvez insérer vos éléments. Vous pouvez commencer avec l'IA, insérer des sections, des en-têtes. Vous créez votre CMS ici et importez tous vos éléments, tels que les formulaires multimédias, les icônes ici. Ensuite, nous avons la mise en page. Vous pouvez personnaliser la mise en page de la page Web. Vous pouvez également créer un texte qui modifie le curseur. Tu peux taper ce que tu veux. En fait, sur la gauche apparaît la fenêtre que nous pouvons voir ici Voici toutes les options d' alignement disponibles ici. Vous pouvez également créer un lien vers quelque chose. Vous pouvez également personnaliser la position du texte de cette manière. Vous pouvez également cliquer dessus et le faire glisser ici, et nous modifierons automatiquement les chiffres ici. Vous avez également le type de positionnement qui est avancé et dépend essentiellement de la façon dont le texte est positionné en fonction du contenu du site Web. Nous avons également la taille du texte. Nous pouvons ajouter des effets au survol, la pression. Vous pouvez avoir une boucle. Peut avoir différents styles, on peut le cacher, changer la capacité. Ensuite, nous avons la couleur de police, la police réelle. Tu peux le remplacer par n'importe quoi. Vous pouvez également modifier la taille de la police, son alignement et certaines options d'accessibilité. Ici, en bas, vous avez les options de votre curseur. Celui-ci ne fait que glisser le curseur sur le canevas. Celui-ci est juste votre curseur normal pour sélectionner et faire glisser des éléments. C'est pour commenter. Ici, vous pouvez également changer de mode. En haut, après le texte, vient le CMS, par exemple. Vous pouvez ajouter votre propre blog, ou vous pouvez importer votre propre fichier CSV pour importer votre propre collection CMS. Vous pouvez également avoir vos propres actions ici, qui ne sont que des raccourcis vers certaines actions du site Web. Par exemple, créez avec l' IA ou lancez une page Web, créez un composant, etc. Il s'agissait d'une introduction à votre interface destinée à vous familiariser avec votre espace Et je vous verrai dans la prochaine vidéo. 6. Pratique : créer un compte: Votre toute première mission d'encadreur consiste donc simplement à créer un compte et à créer votre site Web Donc, sur la page principale, vous cliquez sur S'inscrire. Vous choisissez votre méthode de connexion, vous cliquez sur votre option, inscrivez-vous avec Google ou inscrivez-vous par e-mail. Ensuite, après avoir confirmé et activé via l'e-mail que vous recevez et votre boîte de réception, vous êtes prêt à partir. Et si tu veux t'entraîner, tu peux le faire toi-même ou tu peux suivre cette vidéo et le faire avec moi. Je vous verrai donc dans la prochaine vidéo. 7. Aperçu des chapitres: Dans ce chapitre, nous avons donc commencé à explorer Framer, l'histoire de l'interface utilisateur et de la conception de l'expérience utilisateur Qu'est-ce que c'est, pourquoi il est si important d' avoir des concepteurs UI UX là où tout a commencé. Où tout a commencé, où nous en sommes aujourd'hui et ce que l'avenir nous réserve en termes de design UI UX. Nous avons également exploré l' interface de Framer, où se trouvent les choses, ce que vous pouvez faire, une petite personnalisation du texte Nous avons exploré un peu le décor de Framer. Nous avons également examiné les modèles. Framer est peut-être le choix pour vous, c'est pourquoi vous voudriez utiliser un créateur de site Web basé sur l' IA Pourquoi vous n' utiliseriez pas, par exemple, Wicks Square Space ou Webflow, qui sont tous au top de leur forme Mais Framer est un nouveau venu et crée tellement d'innovations en même temps que je ne me demande vraiment pas pourquoi vous n'essaieriez pas, moins en tout cas. Dans le résumé du chapitre, nous avons examiné tout cela, nous avons également appris à créer votre propre compte et à démarrer Dans le chapitre suivant, nous allons créer votre propre site Web. Et ce ne sera pas n'importe quel site Web, mais ce sera un site basé sur l'IA. qui signifie que vous allez apprendre à rédiger votre propre message. Et comment être le plus détaillé possible. Voici quelques conseils pour obtenir le meilleur résultat possible avec l'IA. Nous apprendrons également comment personnaliser des éléments, comment modifier votre police, comment jouer avec les couleurs et la mise en page de la page. Nous explorerons également certains outils externes dont je parlerai dans le prochain chapitre. Je t'y verrai. 8. Introduction de chapitre (votre premier site Web): Bienvenue dans le chapitre suivant. Je vous en ai déjà donné un petit aperçu. Dans la vidéo de synthèse du dernier chapitre, je vous ai également donné une idée des autres éléments que nous allons utiliser avec Framer En fait, il s'agit d'un sélecteur couleurs et d'un assistant de palette vous aident à prendre les meilleures décisions couleur pour votre site Web Si vous n'êtes pas satisfait de ceux générés par l'IA, vous pouvez également vous en servir comme guide. Comme je l'ai déjà mentionné dans ce chapitre, nous allons examiner votre première invite à créer un site Web. Nous allons nous entraîner en faisant une mission plus tard ensemble. Je vais également vous fournir quelques conseils et détails sur la façon de rédiger un message détaillé pour obtenir les meilleurs résultats avec l'IA. Je vous verrai dans la prochaine vidéo. 9. Écrire votre première invite: Apprenons réellement à utiliser l'IA et à produire les résultats les plus efficaces pour votre propre site Web personnalisé. Voici donc quelques conseils pour rédiger une invite détaillée pour votre site Web si le premier est spécifique. Fournissez des instructions claires sur le type de site Web que vous souhaitez créer. Incluez des détails sur l'objectif, public cible et les fonctionnalités spécifiques que vous souhaitez. Viennent ensuite les éléments de conception. Décrivez les éléments visuels que vous avez en tête. Mentionnez la couleur, la palette, la typographie, les préférences et tous les éléments de marque Vient ensuite l'expérience utilisateur. Expliquez l'expérience utilisateur que vous recherchez. Vous recherchez un design épuré et minimaliste ou quelque chose de plus vivant et dynamique ? gardant cela à l'esprit, écrivons un exemple d'invite. Alors écrivons, je cherche à créer un site Web de portfolio. Nous voilà en train d'indiquer ce que nous voulons réellement créer et quels sont nos désirs pour mon activité de photographe. Encore une fois, il est bon d' être aussi détaillé que possible sur le type d' entreprise que je prévois de créer, mon site Web. C'est vraiment une bonne idée, montrer de quel type d' entreprise il s'agit et à quoi il sert réellement est vraiment formidable pour que l'IA vous comprenne Ensuite, écrivons, je veux un design épuré et qui reflète mon style créatif. Nous passons ici à la stylisation. Nous avons indiqué que nous voulions un design épuré et moderne et je voulais également refléter mon style créatif. Et nous allons décrire notre style créatif dans les phrases suivantes. Écrivons, la palette de couleurs doit être un mélange de pastels sourds Nous décrivons déjà ici nos préférences personnelles, nos styles créatifs tels que mentionnés précédemment. Et nous lui donnons également une palette de couleurs avec laquelle travailler. Et cette description devrait nous être utile pour commencer. Et ici, nous pouvons voir la barre remplie décrivant le niveau de détail de votre description. Et si c'est assez bon pour que l'IA puisse bien l'exécuter. Donc, si nous cliquons sur Démarrer, création de votre site Web commencera réellement. C'est à cela que sert la prochaine vidéo. Je ne veux donc pas que tu te laisses avec un accroche-falaise, mais je te verrai dans la prochaine vidéo 10. Après l'invite: La vidéo précédente. Nous l'avons laissé de côté en écrivant une description assez détaillée et huit volets Cliquons donc sur Démarrer et voyons ce que cela génère. Vous pouvez voir le progrès de la création, n'est-ce pas ? Au fur et à mesure de sa création, vous pouvez voir qu'il crée immédiatement les versions optimisées du site Web pour tablette et pour Ici, vous êtes invité à choisir votre domaine gratuit avec le point de terminaison, et nous allons cliquer sur « Non Maintenant, ce qui est étonnant, c'est que l'IA génère également du texte pour vous et pour tous les en-têtes. Ainsi, même si vous n'êtes pas sûr de ce que vous allez écrire sur votre site de photographie, y trouverez déjà la suggestion de Judas sur ce que vous pouvez approfondir Nous avons donc ici quelques photos fictives, quelques descriptions des photos Et il a utilisé différents éléments pour rendre le site Web plus agréable visuellement. Et vous avez les critiques tout en bas, comme tout site Web classique, vous savez, basé sur les services. Tout en bas, nous avons un petit pied de page avec icônes des réseaux sociaux et les droits d'auteur Donc j'aime bien cette invite et je pense que nous allons suivre. Et vous pouvez voir que les versions optimisées sont vraiment bien optimisées et qu'il n'y a rien à faire vraiment. Si vous êtes satisfait du design, vous pouvez immédiatement insérer vos images au lieu des espaces réservés et peut-être modifier légèrement le texte Et ce serait bien d' aller joindre les liens ici, évidemment. Donc oui, c'est vraiment incroyable, et je vais voir dans la prochaine vidéo comment nous pouvons personnaliser tous ces éléments. 11. Personnaliser votre premier site Web: Maintenant que vous avez votre propre site Web créé par l'IA, essaie en fait de l' adapter encore plus et de tout faire exactement comme il faut. Ainsi, pour personnaliser votre site Web, il vous suffit de cliquer sur l' élément que vous souhaitez modifier. Et vous pouvez soit utiliser l'IA pour le changer, soit vous pouvez aller vers la droite et vous pouvez changer. Par exemple, changeons la couleur de la texture, rouge, en allant vers la droite. Et vous pouvez cliquer ici, Couleur, vous pouvez changer la couleur ici. Vous pouvez également faire glisser le pointeur autour de l'élément pour modifier sa position . Par exemple, je veux le faire ici et cela ressemble à une couverture de journal et je pense que c'est parfait pour un site Web de photographie ici, par exemple. Je peux aussi écrire autre chose, par exemple, Space and Explore Now pourrait rester comme ça. Et nous pouvons mettre à jour cette date si nous le voulons. Mais il est actuellement à jour. Donc, pour celui-ci, nous changeons la position de l'image. Et si on y va, tu pourras vraiment tout changer ici. Vous pouvez modifier à nouveau la position du paragraphe dans le, le titre ici. Par exemple, si vous double-cliquez, cela vous amène à l'image, un effet s' y applique. Ainsi, par exemple, vous pouvez sélectionner différents modes de fusion. À l'heure actuelle, c'est en termes de luminosité et d'échelle de gris, c'est pourquoi c'est comme ça Mais lorsque vous double-cliquez dessus, l'image est en fait comme ça. Si vous passez à la normale et que vous notez l'échelle de gris, nous avons l'image normale. Et vous pouvez également sélectionner différents remplissages au lieu d'une image. Et vous pouvez remplacer et choisir votre propre image en cliquant ici. Vous pouvez également modifier la résolution, le dimensionnement et ajouter du texte alternatif pour des raisons d'accessibilité En outre, stockez des photos et des images que vous pourriez utiliser et vous pouvez utiliser la fonction de recherche ici. Vous pouvez également recadrer l'image si vous le souhaitez. Passons donc à autre chose. Descendez et c'est à peu près pareil. Nous avons encore quelques éléments que nous pouvons modifier. Et ici, nous pouvons changer le texte, les icônes. Tout cela est personnalisable et vous pouvez toujours le modifier. Et ici, vous pouvez également voir le thème créé pour nous. Et nous pouvons le mélanger vers le haut, et nous pouvons sélectionner les éléments que nous voulons mélanger, et il sera mélangé et il sera mélangé Voilà pour cette vidéo, et je vous verrai dans la prochaine. 12. Sélecteur de palette de couleurs: Dans cette leçon, je voulais vous montrer un outil externe que j'utilise lorsque je crée mes propres sites Web et lorsque je dois choisir des couleurs et une palette de couleurs, en particulier lorsque je dois le faire conformément à l'accessibilité. En général, c'est un très bon outil pour vous aider à les bonnes décisions en matière de couleur tout en restant sur mesure pour vous et pour ce que vous voulez réellement. Au début, cela peut sembler difficile pour un simple sélecteur de couleurs, mais il existe en fait toute une théorie des couleurs qui sous-tend le choix des bonnes couleurs pour votre site Web ou pour tout ce que vous faites, quelle que soit la conception graphique que vous réalisez Commençons par regarder la page principale. Pour être clair, il s'agit d'Adobe Color, un outil externe que j' utilise pour choisir mes couleurs. J'ai utilisé uniquement mon compte Adobe pour utiliser cet outil. Voici un exemple de palette de couleurs, juste pour vous aider à démarrer. Ici, vous pouvez voir que nous avons la roue chromatique. Nous avons des outils d'extraction, de thème , d'extraction, de dégradé et d'accessibilité. Commençons par la roue chromatique. Cela vous est probablement familier. Il s'agit d'une roue chromatique. Et regardez ce qui se passe lorsque je prends l'un de ces nœuds et que je le déplace, cela change les couleurs associées à cette palette de couleurs. La raison pour laquelle cela se produit, ce changement se produit, c'est en fait à gauche, c'est l'harmonie qui règne. Il existe de nombreuses règles d' harmonie différentes, et vous pouvez voir l' explication ici. Les règles de couleur garantissent un équilibre harmonieux des couleurs en fonction de la couleur que vous avez définie comme couleur de base. Par exemple, pour le moment, c'est notre couleur de base. Nous pouvons choisir la couleur de base simplement en cliquant dessus, et cela basera votre décision sur cette couleur. Il existe différentes règles. Par exemple, le monochrome, c'est choisir les mêmes couleurs dans la même gamme, juste des pastels différents Et vous pouvez également ajouter des nœuds ici. Vous pouvez avoir une triade, vous pouvez avoir des couleurs complémentaires, non ? C'est vraiment sympa. Split complémentaire, double division, complémentaire. Et tous agissent de différentes manières. Tout est fait pour que vous puissiez le composer automatiquement. Donc oui, il existe différents types de règles et vous pouvez également définir vos propres règles personnalisées, en ajoutant simplement des nœuds et en jouant. Et cela n'est pas vraiment basé sur des règles, vous devriez donc faire attention à cela. Je recommande dans un premier temps de m' en tenir à celles-ci, aux prédéfinies , par exemple, j'aime bien celle-ci, et je peux enregistrer cette palette de couleurs dans ma bibliothèque. Je peux aussi le nommer, par exemple, mon vert. Et je peux également ajouter des tags pour que ce soit plus facile à trouver. Je peux l'enregistrer et je le publie également pour que les gens puissent voir et consulter ma palette de couleurs. Au centre, vous pouvez voir les nuances et vous pouvez choisir la teinte principale. Vous pouvez également choisir le mode dans lequel vous vous trouvez, juste ici. Et vous pouvez également modifier les valeurs ici, ce qui changera également complètement la palette de couleurs. Vous pouvez jouer avec les valeurs Argu avec la luminosité En gros, tout est personnalisable. Vous disposez également d'un outil de sélection de couleurs. Vous pouvez créer une palette en fonction de cela. Vous pouvez ici extraire un thème d'une photo que vous fournissez. Cela peut vous donner une palette de couleurs ici. Vous pouvez faire de même et obtenir un dégradé ici. Vous pouvez en fait vérifier le contraste et l'accessibilité de votre palette de couleurs. Souvenez-vous de ma palette de couleurs un peu confuse. Vous pouvez, vous pouvez réellement choisir la palette de couleurs conformément à ces règles. Voir par exemple, C et D sont en conflit. Ces deux éléments déplacent les échantillons sur roue chromatique pour distinguer les couleurs et protéger les daltoniens Une personne daltonienne ne sera peut-être pas en mesure de différencier ces deux couleurs. Nous devons changer cela, aucun conflit n'est détecté. Lorsque nous le changeons en cela, nous avons le simulateur de daltonisme et nous pouvons réellement voir à quoi ressembleraient ces couleurs du point de vue d'une personne daltonienne. Nous avons le coffre-fort pour daltoniens et le correcteur de contraste Vous pouvez vérifier que vous avez les différents niveaux d'accessibilité. Il est plus facile de se qualifier pour Aa que pour AAA. Allons-y avec AA. Et nous pouvons choisir la couleur ici et la rendre plus foncée et plus claire. Et nous pouvons constater que ce rapport de contraste est bon. Mais si nous le retirons et le rendons plus sombre, tout échoue et le rapport de contraste n'est pas pris en compte. Vous pouvez voir ici, vous pouvez changer cela peut-être de cette façon. Mais non, même si vous le rendez plus lumineux, cela ne fonctionnera pas ici. Par exemple, dans les petites polices, cela échoue, mais dans les polices supérieures, c'est très bien. Ici, vous pouvez réellement avoir des suggestions de contraste qui changeront. Par exemple, nous pouvons définir un rapport de contraste. Il nous fournira des suggestions. Par exemple, un mauvais contraste, cela vous donnera cela aussi. Nous pouvons l'enregistrer dans des bibliothèques. Ici en haut, nous avons encore quelques choses amusantes à découvrir. Peut avoir la page Explorer où vous pouvez explorer les palettes de couleurs de différentes personnes et vous pouvez voir où elles ont été utilisées et où elles ont été extraites. Ensuite, nous avons les tendances. De cette façon, vous pouvez regarder autour de vous et voir les tendances des couleurs dans le monde en matière de mode, illustration, de graphisme. De cette façon, vous pouvez rester à jour avec la palette de couleurs populaire. Ensuite, nous avons des bibliothèques dans lesquelles vous avez votre propre palette de couleurs que vous avez créée. Ensuite, vous avez le sélecteur de thème. Vous pouvez également avoir un petit jeu de couleurs, et vous devez vous souvenir de la séquence dans laquelle il s'est joué, par exemple, ici, ici. Et vous avez également une minuterie. C'est amusant de jouer avec, d'explorer, peut-être de découvrir de nouvelles couleurs que vous aimez, et d'en prendre note. Cela devient de plus en plus difficile. Faisons cette dernière. Oh, je ne sais pas si je me souviens de celui-ci. Et Game over. Vous pouvez également tweeter votre meilleur score. Vous n'avez ici que quelques boutons d'assistance supplémentaires, tels que les commentaires sur le forum d'aide, votre propre compte, différentes applications Adobe et Adobe Cloud C'est tout ce que je voulais vous montrer pour le sélecteur de couleurs. J'espère que cela vous a plu et je vous verrai dans la prochaine vidéo. 13. Pratique : créer votre premier site Web: Dans cette pratique, nous allons créer notre propre premier site Web à partir de zéro. Si tu veux, tu peux l' essayer par toi-même, ou si tu veux, tu peux me suivre. Et nous pouvons le faire ensemble. Je vais cliquer sur Démarrer. Avec l'IA. Pour commencer, je vais écrire un message pour nous. Dans mon cas, nous allons concevoir un site Web pour Yeti Learn Mais il peut s'agir de ce que vous voulez pour votre site Web personnel ou d'un site Web de portfolio. Ça peut être ce que tu veux. Je vais commencer à écrire mon invite, un site Web pour Yet Learn. Une plateforme d'apprentissage qui propose des cours disponibles sur différents types d'enseignement, sur différentes plateformes de cours. Les cours portent sur Creative Coding, Spline, Unity, Unity, Do Firefly, Adores Express et Journey Essayons cette invite. Vous pouvez le voir, mettre le titre, notre nom au centre. Vous trouverez les prix dans une page FAQ. En fait, j'ai écrit un texte sur ce que vous avez appris dans nos cours. Je tiens à mentionner ces couleurs. La palette de couleurs est précisons qu'il s' agit de la couleur principale. Voyons ce que cela génère lamentablement. Nous pouvons voir ce que cela a généré pour nous. Nous pouvons voir que seule votre unité intérieure a du texte ici. Des cours de pointe pour différents niveaux de compétence. Nous avons ici quelques cours comme le cours Sublime, le cours Firefly et le cours Unity Nous avons les tarifs qui supprimeront cette section car nous ne vendons pas réellement de cours sur ce site Web C'est juste informatif. Je n'aime pas ça par exemple. Je peux le régénérer. Je n' aime vraiment aucune d'entre elles, nous pouvons donc simplement taper FAQ. Nous avons des questions que les gens pourraient se poser. Maintenant que nous avons la mise en page de base ici. Nous devrions également supprimer les prix à partir de là. Les cours se dérouleraient ici, FAQ pourrait nous y mener. Et je pense que je suis plutôt content des couleurs. Et maintenant, nous pouvons réellement l'utiliser comme point de départ pour personnaliser complètement notre site Web Par exemple, des cours ici. Oui, je suis plutôt content de cette page. Nous aborderons plus en profondeur personnalisation, l'ajout de sections et la suppression , les navigations et la création de plusieurs pages dans les vidéos qui apparaîtront dans le chapitre suivant 14. Résumé de chapitre (votre premier site Web): Dans ce chapitre, nous avons donc créé votre propre premier site Web. Nous avons d'abord commencé par rédiger une invite, comment rédiger une invite, et quelques conseils et astuces sur la façon de rédiger la meilleure invite détaillée et sur les limites, vous savez, des limites de l'IA des framers Néanmoins, je pense que c'est plutôt bien, comme si c'était toujours de l' IA et qu'elle créait un site Web fonctionnel pour vous à partir d'une seule invite. Je vous ai également montré un outil de sélection de couleurs qui vous aide à choisir les couleurs de votre site Web pour peu près tout ce que vous voulez dans le monde numérique Vous pouvez l'utiliser en design graphique. Vous pouvez l'utiliser dans la conception de sites Web. Et je voulais juste vous montrer un outil vraiment utile qui espérons-le, facilitera un peu votre flux de travail. Ensuite, je vous ai montré quelques personnalisations des polices, comment changer les couleurs des éléments et comment changer une image. Comment modifier le texte. Comment réellement se régénérer avec l'IA. Si vous n'êtes pas satisfait du résultat, mais que vous voulez vraiment réessayer. Oui, nous avons créé votre tout premier site Web qui est également entièrement fonctionnel. Dans le chapitre suivant, nous examinerons le CMS, un système de gestion de contenu. J'expliquerai en détail ce que c'est dans la prochaine leçon d'introduction, mais j'espère vous voir dans la prochaine vidéo 15. Introduction de chapitre (CMS): Ce chapitre est donc entièrement consacré aux CMS. Vous allez me demander, qu'est-ce qu'un CMS ? Eh bien, il s'agit d'un système de gestion de contenu, qui est essentiellement un système qui vous aide à gérer la création de votre contenu, qu'il s'agisse de blogs, d' offres d'emploi ou de pages marketing. Tout cela est géré par des systèmes de gestion de contenu. Dans CMS et Framer, il existe des collections qui vous permettent d' afficher du contenu et de gérer facilement le contenu de votre site Web. Une collection dans Framer agit comme une simple base de données dans laquelle vous utilisez un ensemble de champs différents, chacun avec un type spécifique, pour collecter une liste d'éléments pouvant être stockés et référencés sur le site Web Cela permet une plus grande flexibilité et un meilleur contrôle du contenu de votre site Web. Accédez facilement à des informations actualisées et pertinentes sans toucher au design de votre site. Les pages CMS vous permettent d'afficher du contenu tel que des articles de blog, articles d' aide, des mises à jour des offres d'emploi basées sur des éléments du CMS. Nous allons donc entrer dans le détail de toutes les fonctionnalités du CMS. Nous allons donc détailler le système de gestion de contenu dans ce chapitre et vous en apprendrez plus au fur et à mesure. Je vous promets que ce n'est pas si compliqué, c'est simplement plus facile de le faire que de l'expliquer et de l'apprendre par la pratique Alors allons-y et je vous verrai dans la prochaine vidéo. 16. Créer un site Web de blog: Dans cette vidéo, nous allons voir comment créer votre propre CMS. Cela signifie créer votre propre premier blog, qui sera stocké dans un système de gestion de contenu. Revenons à notre site Web que nous avons créé dans le chapitre précédent, titre d'exemple que nous avons utilisé. Voici notre site Web et nous voulons cliquer sur CMS. Nous pouvons soit importer un fichier CSV pour avoir une collection CMS, soit ajouter un blog. Ici, nous avons différents sujets. À titre d'exemple, nous avons cinq blogs différents ici. Ici, à gauche, nous avons les collections elles-mêmes dont je parlais dans la vidéo précédente. Dans l'introduction, nous pouvons ajouter d'autres collections CMS. Si vous avez un forfait supérieur, vous pouvez en ajouter d'autres. Vous pouvez également avoir, par exemple, offres d'emploi, etc. Vous pouvez utiliser le CMS dans toutes sortes de situations. Nous allons simplement nous en tenir au blog que nous voulons. En haut, nous avons l'indicateur qu'il s'agit bien d'un CMS. Ensuite, nous pouvons ajouter un nouvel article sur le blog. Nous pouvons modifier les champs ou les importer. Essayons d'ajouter un nouvel article. Vous entrez ici votre titre, par exemple, exploration spatiale. Il génère automatiquement pour vous un slug que vous pouvez bien sûr modifier si vous le souhaitez Par exemple, je l' ai changé en espace uniquement. Ensuite, nous pouvons dater, par exemple, le 31 août d'aujourd'hui. Nous pouvons choisir une image pour représenter notre article de blog. Nous pouvons définir la résolution et ajouter un texte alternatif pour l'accessibilité et le référencement. Ou nous pouvons en choisir une parmi les images de stock. Par exemple, je veux rechercher de l'espace, nous pouvons choisir, par exemple, celui-ci. Allons-y. Il est maintenant importé dans le blog. Ensuite, vous voulez réellement écrire le blog ou le coller. Si vous l'avez écrit ailleurs, vous pouvez le styliser Par exemple, je vais lui donner un titre consacré à l'exploration spatiale. Je peux modifier la taille du titre comme un markdown normal Choisissons-le ici, votre véritable publication en bloc sera publiée. Vous pouvez également lier quelque chose au texte. Vous pouvez le mettre en gras ou en italique. Vous pouvez également en faire un extrait de code et ajouter une liste à puces. Tu peux le numéroter. Vous pouvez ajouter des images, vous pouvez ajouter des vidéos. Vous pouvez également intégrer du code HTML. Par exemple, si vous souhaitez intégrer une vidéo Youtube, vous pouvez le faire ici. Ouais. Ensuite, une fois que vous avez terminé, vous cliquez sur Safe dans votre article de blog se trouve ici, par exemple. Nous devrions peut-être aller ici et voir quels sont les exemples qu'ils ont. Maintenant que vous pouvez également modifier les champs, vous pouvez changer le titre, vous pouvez avoir une zone de texte de remplacement Vous pouvez également modifier le nom de la date. Voici ce que nous sommes en train de modifier. Par exemple, je ne veux pas que ce soit un rendez-vous. Je veux que ce soit daté, par exemple. Ou comme la date de publication, quelque chose comme ça. Tout dépend de toi. Le contenu peut être modifié. Par exemple, des articles de blog ce moment où vous avez réellement le CMS. Et nous allons laisser ces exemples ici pour le moment. Nous voulons revenir en arrière et nous avons une page séparée appelée blog, et tous nos articles de blog sont ici. Voici même celui que nous avons créé, même s'il est contrôlé par un CMS. Vous pouvez double-cliquer sur n'importe lequel d' entre eux et modifier les propriétés. Cela vous y emmènera directement. Vous pouvez même le styliser ici. modification de l'un des éléments du CMS les modifiera tous. Dans le billet de blog que nous avons à la maison, nous avons un blog par exemple. Je veux lier ceci par exemple. Je souhaite écrire un article de blog. Je vais juste le laisser comme ça pour le moment. Mais nous le modifierions en fait. Ensuite, je veux lier ceci au blog. Lorsque je le prévisualise, je fais défiler la page vers le bas. Je clique ici et cela nous mènera aux blogs. Nous allons charger les images. Vous pouvez cliquer sur n'importe lequel d'entre eux et consulter le contenu qui nous a entièrement fait revenir en arrière. Je voulais juste y retourner. Vous pouvez cliquer et lire votre message bloqué, juste ici. Oui, c'est ainsi que vous créez votre propre première collection de CMS. Il existe de très nombreuses possibilités quant à ce que vous pouvez en faire. J'ai un plan plus élevé, mais c' est à peu près pareil. C'est la même idée que vous créiez un blog ou, par exemple, une offre d'emploi. Et il vous suffit de saisir vos valeurs et d'écrire le contenu ici. Je vais voir dans la prochaine vidéo. 17. Écrire facilement: Maintenant que nous savons comment créer votre propre collection de blogs, nous voulons la remplir, vous savez, non pas d'écrits préfabriqués, non pas d'écrits préfabriqués, mais de quelque chose d'original et de quelque chose qui nous appartient. Hein ? Nous allons donc écrire, cliquer et supprimer tous ces modèles et articles de blog prédéfinis. Très bien, nous allons passer à Chat PT. Je vais vous donner des conseils sur la façon d'écrire vos propres blogs avec l'aide de Chat PT. Vous souhaitez vous inscrire si vous n'avez pas encore de compte ou vous souhaitez vous connecter comme je le ferai dans mon cas, vous souhaitez vous connecter et vous pouvez utiliser votre adresse e-mail. Vous pouvez continuer avec Google, votre compte Microsoft ou Apple. Je vais continuer avec Google. Regardons ce qu'est réellement un GPT. Il s'agit d'un grand modèle linguistique basé sur Chappot, développé par Open II et lancé le 30 novembre 2022 Cela vous donne à peu près la réponse à tout, à tout ce que vous demandez. Bien sûr, il contient des filtres et des bugs et il peut être lent et halluciner L'IA ouverte le dit elle-même, il est important de noter qu' elle n'est peut-être pas toujours correcte sur le plan factuel, car il s'agit d'une coupure de connaissances Regardons ensemble que nous sommes en septembre 2021. Il est peut-être obsolète, il ne le sait même pas. Il connaît Framer en tant qu'outil de prototypage comme Figma, mais il ne connaît pas Moi, nous allons l' aider et nous allons le laisser nous aider. J'ai un blog, cinq articles de journal de bord, sur l'exploration spatiale. L'une d'entre elles devrait porter le nom d'exploration spatiale. Nous devons être aussi précis que possible lorsque décrivons au Tchad GPT ce que nous voulons Parce que dans la vidéo précédente, nous avons créé l'exploration spatiale. Je voulais juste le remplir également, sous le seul nom d'exploration spatiale. Le texte va être envoyé ici. Voyons ce que cela nous donne. Il entre assez rapidement, nous n'avons donc pas à attendre aussi longtemps. Voyons voir. En fait, il n'en existe pas vraiment un qui ne porte que le nom d'exploration spatiale. Je suppose que cela précise simplement plus en détail ce dont il va parler, par exemple, dévoiler le cosmos au-delà Ils sont courts, mais je voudrais les allonger un peu , juste pour qu'ils durent trois à quatre minutes de lecture au lieu d' un paragraphe. Les articles de blog sont un paragraphe. Les articles de blog lus pendant trois à quatre minutes, il suffira de les taper davantage. Nous pouvons voir qu'il n'a pas réellement suivi les instructions et qu'il réécrit ce qu'il a écrit Parce que je ne sais vraiment pas si cette section devrait être lue en trois minutes. Disons-le différemment. Je voulais dire créer chaque article de blog. Allons-y. Nous pouvons voir que c'est plus long et plus précis. En fait, j'aime bien leur longueur, mais maintenant, il n'y a qu'un seul article de bloc, si vous voulez que je le voie, en nous demandant si nous voulons la suite avec le reste du billet de bloc, disons. Oui, je le sais. Parfois, il peut geler un peu. Laissez-le réfléchir un peu et nous partirons. On peut le voir pour deux autres. Et je tiens à dire qu' il me le demande encore une fois. Je vais simplement préciser que, oui, étendez chacun des articles de blog. Nous pouvons en fait voir que chacun des articles de blog compte désormais 400 500 mots. Peut-être que celui-ci est un peu plus long, juste 400 mots. Maintenant que nous l'avons, examinons le contenu dont il a été question ici. Il s'agit de dévoiler le cosmos au-delà. En fait, au lieu de les parcourir, nous pouvons demander un résumé. Fournissez-moi un bref résumé de chaque article de blog. Regardons les critiques du billet de blog. premier traite de l'impact profond de l'exploration spatiale, retraçant son histoire et en soulignant son importance. Oui, j'aime bien ça, et je vais passer à ça ensuite. Nous avons des icônes de l'ingéniosité humaine hommage aux visionnaires qui ont uni voyage dans l'espace Ce billet rend hommage à des personnalités comme Udi Ga Guiden ou Neil Armstrong . J'aime bien ça. Ensuite, nous abordons le sujet de la quête de mondes habitables, la compréhension de l'univers, potentiel de vie extra-terrestre et de la découverte d' exoplanètes habitables Le suivant est en fait un peu controversé. Ou ce n'est pas controversé, on en parle beaucoup en ce moment, voyages et des missions spatiales de colonisation vers Mars Il s'agit en fait projets ambitieux liés au sexe spatial. Mais comme il est dépassé, je ne pense pas qu'il s'agisse d'exemples récents, mais peut-être de ceux qui se sont produits avant 2021. Le dernier concerne l'exploration spatiale par rapport aux considérations éthiques. Trouver un équilibre délicat entre protection de la planète et préservation culturelle, tout en préservant l'intégrité des environnements célestes. J'aime beaucoup tous ces articles de blog. Maintenant que nous avons tout le contenu dont nous avons besoin pour notre blog, nous pouvons réellement commencer à le mettre en ligne. C'est ce que nous allons faire dans la prochaine vidéo. 18. Remplir votre blog: Maintenant que nous avons nos articles de blog et notre contenu, il est temps de le mettre sur notre site Web, celui qui s'appelle exploration spatiale. Allons-y et prenons le tout premier article de blog. Assurons-nous de choisir la bonne version, la version étendue Nous allons le prendre, le mettre ici, le copier. Mets ça ici. Nous avons notre en-tête. Nous pourrions en fait vouloir, par exemple, discuter en PT, disons pour un article de blog. Comme il est si long divisé en sections, je veux juste vous montrer quelques mises en forme que vous pourriez faire avec le chat PT et le framer Laissez-le attendre et réfléchissez un peu. Allons-y. Nous avons nos sections du blog maintenant, elles seraient plus faciles à digérer. J'ai l'impression que même dans le climat actuel avec Tiktok et tout le reste, j'ai juste collé le nom de la section Je vais le sélectionner et choisir Heading to, par exemple, le voyage cosmique commence. Nous allons en fait le supprimer. Tout est propre et sans répétitions. Nous allons sélectionner un titre pour le coller. Il suffit d'entrer et de taper, eh bien, en fait, vous pouvez le faire encore plus facilement et plus rapidement. Nous avons donc déjà deux sections. Nous allons coller les autres. Nous allons supprimer la partie de la section. J'ai reçu une lettre supplémentaire. Nous sélectionnons simplement chacun des mots de la section, assurez-vous qu'il n'y a pas d'espaces. Ensuite, je pourrais soit le mettre en gras en utilisant le raccourci sur Mac ou le contrôle sur Windows, simplement entrer et sélectionner le titre deux pour chacun d'eux. Allons-y. Nous avons notre premier article de blog. Nous avons déjà nos photos. Nous avons la date publiée. Modifions le slug pour qu' il soit un peu plus précis. Ce n'est pas ce que nous voulions faire. Nous allons le coller ici. Mais nous allons faire de l' exploration spatiale ici. Le slug est plus court, il est déjà enregistré. C'est tout ce que nous devons faire. Maintenant, si vous entrez, voici votre article de blog. Vous devez le faire pour chaque article de blog que nous avons créé et que vous avez créé. Et faisons-le réellement. Ajoutez donc un nouvel article. Demandons à Chachi Pet de diviser chacun des articles de blog en sections, diviser chacun des articles de blog comme vous l'avez fait dans ce cas Inutile de me demander de continuer. Je le veux pour chaque article de blog que nous avons. J'essaie donc d'être aussi précis que possible pour que ça ne bloque pas et qu'il n' attende pas que je réponde. Mais est-ce que tout est fait en une seule fois ? En fait, je n'ai pas compris et je n'ai écrit que pour notre deuxième article de blog, divisé en sections, billet de blog numéro 345. Attendons simplement qu'il produise les résultats, espérons-le, ceux que nous voulons. Voyons donc s'il l' a réellement fait pour chaque article de blog. Et oui, nous pouvons en voir 543 et nous en avons deux ici. Nous avons déjà ajouté le premier. Ce que nous voulons faire, c'est cliquer sur Créer un nouvel article. Copiez le titre. Date de publication. Faisons de même. Changeons la photo. Quelque chose en rapport avec l'espace. Copions ce blog ici. Supprimer. Supprimez le Ne rien laisser derrière vous qui ne sélectionne pas pour une raison quelconque. Voilà, vas-y. Soulignons la dernière section de ce blog et nous voulons voir les modifications. Et nous avons un autre blog que vous souhaitez faire pour chaque blog que vous avez créé. Pour faire court, je ne le fais que pour deux personnes, mais j'espère que vous avez maintenant une idée de la façon de le faire et que vous l'avez mise en œuvre, espérons-le. Et je vous verrai dans la prochaine vidéo. 19. Pratique : créer votre propre blog: Bienvenue dans une nouvelle vidéo d'entraînement. Nous voulons en fait rassembler tout ce que vous avez appris dans ce chapitre, le site Web que nous avons développé dans le chapitre précédent que nous avons commencé. Permettez-moi de vous le montrer très rapidement, apprenez. Je veux avoir un blog qui décrira les cours que nous proposons. Je vais me tourner vers Chad GPT pour obtenir de l'aide. Une fois au Tchad GPT, nous voulons demander de l'aide Nous avons un cours Unity, un cours de codage créatif et un cours d'application sur lesquels je voudrais écrire Dans le blog que je souhaite écrire, je crée un blog sur les cours proposés par notre entreprise. Nous nous appelons Unity Learned. Nous proposons des cours en ligne éducatifs axés sur l'innovation. Nous allons donc écrire pour Fate of Coding et Unity, nous voulons trois articles en bloc. Je veux trois articles en bloc sur les sujets. Cela en fait trois blocs de poteaux. Il spline, il le mélange parfois avec le terme mathématique, spline les trois D, le logiciel d'animation et de modélisation et le codage créatif Ces blogues constitueront une introduction au cours et décriront ce qui les attend. Le résultat de l'apprentissage est de préciser, ne pas le rendre trop long et de voir ce qu'il en résulte. Allons-y. Voici nos articles de blogue. Ils devront être modifiés en fonction de nos cours actuels, mais c'est un bon point de départ. Je souhaite l'ajouter à notre collection de blogs. Supprimons celui-ci et ajoutons, nous supprimerons les modèles. Ajoutons un nouvel article. Notre titre est Creativity with Unity Game Development Course. Ensuite, nous allons en parler ici. Elles sont déjà en gras. C'est comme ça qu'il l'a copié. Choisissons une image. Nous allons donc choisir cette photo comme couverture. Maintenant que nous avons notre premier article de blog, importons le reste. Entrez le titre Date, Rechercher une image. Ensuite, vous voulez le coller. À voir cette fois. Pour une raison ou une autre, il n'a pas collé les paragraphes. Ce qui est bizarre parce que c'est le cas dans celui-ci, non ? C'était bizarre. Je ne sais pas pourquoi c'est arrivé ici. Et nous allons écrire en code créatif, peut-être que nous allons simplement taper code parce que ce n'est pas vraiment répandu. Eh bien, je préfère celui-ci. Allons-y. Nous voulons maintenant l'ajouter à notre page. Ici, nous avons le blog. Laissez-le simplement charger. Je sais pourquoi cela n'a pas été mis à jour. Ce n'est pas ce que nous voulons, nous devons donc l'ajouter. La raison pour laquelle il n' apparaît pas ici, que nous devons ajouter une nouvelle page Désolé, je ne suis pas là pour le moment. Il a été mis à jour. Allons-y. C'est épouvantable. Rien n' est réellement lisible. Alors changeons cette couleur en blanc pour la rendre un peu plus belle, un peu plus blanche. Désolée. Faisons en sorte que ce soit blanc également. C'est bien mieux. L'autre version était vraiment très mauvaise. Restons-en aux pages bloquées que nous n'utilisons pas ici. Nous devons également changer, voyons voir. OK, donc nous l' avons, nous allons y aller, nous allons le personnaliser. Changez cela en blanc, changez-le en un peu plus blanc. Le texte est là, mais il est tellement difficile à lire. Je ne l'ai pas vraiment remarqué. C'est pourquoi il est important de choisir de bonnes couleurs. Je clique sur « Cliquez sur le contenu, où », c'est parti. Je vais chez Body. Je vais sur Modifier. De cette façon, tout le corps du texte des blogs sera modifié sans qu'il soit nécessaire d'accéder à chaque page et de changer la police ou la couleur. Au lieu de cela, je veux juste en avoir un qui dira blog et nous suivrons nos cours. Lions ceci au blog. La raison pour laquelle je voulais juste vérifier, c'est que c'est le parent de ceux-ci. Lorsque nous établissons un lien, tous les éléments contenus dans cette boîte renvoient également à cette page de blog. Maintenant, si nous prévisualisons réellement ce défilement vers le bas, cliquez sur Blog. Voici notre blog, entièrement responsive, parfait pour votre tablette et pour votre iphone ainsi que pour votre ordinateur. Allons-y. C'est notre blog qui a été créé. J'espère que tu as pu t' entraîner par toi-même. Si ce n'est pas le cas, vous avez suivi notre tutoriel pratique. Et c'est tout à fait bien aussi. Et je vous verrai dans la prochaine vidéo. 20. Aperçu des chapitres (CMS): Dans ce chapitre, nous avons donc tout appris sur le CMS, qui signifie Content Management System. Comme vous vous en souvenez sûrement déjà, nous avons examiné la création d'un blog, la manière d'ajouter un blog et d' intégrer votre blog votre site Web que vous avez créé précédemment. Et nous avons également examiné l'aide de ChatchPT et comment nous pouvons créer des blogs avec l'aide de ChachPT Et nous avons étudié comment les importer dans Backinto Framer Et nous nous sommes également entraînés en créant notre propre blog, et nous nous y sommes un peu entraînés. Et nous avons personnalisé le texte et les polices et nous avons rencontré quelques problèmes vraiment confus. Mais au final, nous avons réussi à les résoudre. Et j'espère que vous avez également tiré des leçons de ces petits problèmes Et je vous verrai dans le chapitre suivant où nous aborderons le niveau avancé, et je vous verrai dans le chapitre suivant où nous aborderons personnalisation avancée, qui porte essentiellement sur les effets, différentes sections, les en-têtes, tout cela, tout ce que vous attendiez Tout ce qui est personnalisable concerne le framer Une fois que vous aurez créé votre site Web par IA, sont les éléments qui vont vraiment affiner et rendre votre site Web unique Bien sûr, cela n'est pas alimenté par l'IA, mais il est bon de savoir comment procéder afin de pouvoir personnaliser vous-même votre site Web après avoir créé votre modèle de base par l'IA. Je vous verrai donc dans le prochain chapitre. 21. Introduction de chapitre (Cutomizations avancées): Bienvenue dans le chapitre suivant qui traite des personnalisations avancées Nous examinerons la possibilité de créer une personnalisation avec des sections d'effets, des en-têtes ajout de vos propres formulaires et médias, ainsi que toutes les bonnes choses que nous aborderons dans ce chapitre Cela vous aidera vraiment à créer un site Web vraiment unique et à l' adapter à vos propres besoins et à la façon dont vous souhaitez créer votre site Web. Et nous examinerons non seulement la possibilité d'utiliser chaque élément séparément, mais également de tout combiner pour créer un élément cohérent Nous allons également pratiquer cela et l'ajouter à notre site Web que nous avons développé tout au long du cours. 22. Pourquoi la personnalisation est importante: Je voudrais donc expliquer en détail pourquoi la personnalisation est vraiment importante et pourquoi il est important de personnaliser votre site Web et d'adapter vos éléments à vos besoins adaptation des sections et la personnalisation des sections vous permettent d' afficher les informations de manière à ce qu'elles correspondent à vos objectifs Si vous améliorez votre navigation, par exemple, personnalisez votre en-tête. Il simplifie le processus de navigation sur le site Web pour votre visiteur, améliorant ainsi l'expérience utilisateur Ensuite, il reflète l'image de marque. Si tous vos éléments sont conçus de la même manière et conçus de la même manière, cela reflète le message de votre marque et renforce votre image de marque Les formulaires multimédias personnalisés et l'interactivité rendent en fait plus attrayant pour le visiteur Il optimise également les fonctionnalités, ce qui favorise la convivialité, la cohérence et le professionnalisme, renforce confiance des utilisateurs et favorise enfin l'interaction Les icônes personnalisées, les modèles et l'intégration sociale encouragent l'engagement. Ce ne sont donc que quelques raisons pour lesquelles la personnalisation est importante sur votre site Web. Et j'espère que vous resterez dans les parages pour regarder notre chapitre et voir comment réellement adapter votre site Web à vos besoins. Je vous verrai donc dans la prochaine vidéo. 23. Sections: Cette vidéo explorera la première personnalisation que nous allons examiner, à savoir les sections. Passons à notre exemple de site Web avec lequel nous avons déjà travaillé auparavant. Ce que nous allons vouloir faire, c'est aller dans Insérer. Ici, nous avons notre section intitulée Notions de base. Ici, nous avons un tas d'options de section parmi lesquelles nous pouvons choisir. Bien entendu, tout cela se fait également par clic et par glisser-déplacer. Vous pouvez obtenir ceci à partir de ceci ou cela à partir de cela. Peu importe ce que vous choisissez. Vous pouvez également le créer à partir de zéro. Regardons du haut et travaillons jusqu'en bas. Tout en haut, nous avons notre première option. Voyons voir, il va s' insérer tout en bas. Nous pouvons également en modifier la position en cliquant et en faisant glisser Par exemple, je l'ai mis ici, tout est cliquable et personnalisable Ici, nous avons deux boutons, nous avons du texte. C'est l'une des sections que nous avons. C'est un exemple très simple, nous pouvons simplement passer à autre chose. Ensuite, nous avons la même section, mais juste pour l'arrière-plan, vous pouvez ajouter une image. Ajoutons quelque chose à partir de Unsplash. Par exemple, dans celui-ci, nous avons la même chose, juste avec un arrière-plan d'image Si nous allons plus loin, nous en avons quelques-uns qui sont une image à droite et des textes à gauche, nous avons tout le contraire. L'image est à gauche, le texte à droite. Il y en a une autre que nous avons ici. Nous avons deux images, nous avons du texte ici, et nous avons du texte ici. Il s'agit en fait de promouvoir le plugin Figma, que nous examinerons plus tard Par exemple, nous pouvons le saisir et le déplacer dans cette zone de texte. Vous êtes libre de faire ce que vous voulez, mais il est en fait plus facile de choisir une section que vous aimez à partir d'ici. Regardons-en quelques autres. Par exemple, il s'agit de deux images disposées horizontalement. Ici, nous avons une option pour 46 images. Désolé, ici, cela fait la promotion de ce que nous avons sur Framer. Ensuite, nous avons des formes irrégulières, des jouets importés à double clic Commandons Z et annulons. Allons-y. Nous avons ici quatre espaces réservés pour les images et quatre zones de texte Vous pouvez cliquer dessus, développer couches et personnaliser le tout. En fait, vous pouvez aussi. Ensuite, regardons-en plus. Nous en avons qui ressemblent à des cartes comme celle-ci. Nous pourrions également l'utiliser pour, par exemple, cours que nous avons promus dans l'une de nos pratiques que nous pouvons revoir Nous pouvons avoir de nombreuses critiques ici. Nous pouvons personnaliser la largeur de chaque colonne. Nous pouvons changer la place de ceci et de cela, et nous pouvons jouer comme ça. Ensuite, nous avons quelques critiques. Ensuite, nous avons une critique dans une grande section. Nous avons également importé deux fois notre formulaire de contact, essentiel pour notre page de contact. Encore une fois, ici vous n' avez que le nom, l'e-mail et le message, vous pouvez nous contacter directement, comme sur le site Web. Ensuite, nous avons quelques prix. Nous avons une section FAQ que vous pouvez également personnaliser. Vous pouvez également vous rendre ici et personnaliser la section FAQ. Tu as cette table. Vous pouvez trouver la question et la réponse ici. Vous pouvez modifier votre question. Ensuite, nous avons notre section de confiance. Vous pouvez simplement les remplacer par un logo, des entreprises qui vous font confiance et vous montrent leur soutien. Enfin, nous avons une inscription aujourd'hui qui est très similaire à la toute première que nous avons examinée, qui se trouve ici. En fait, je pense que c'est exactement pareil. Juste sans le texto. Oui, ce sont à peu près toutes de petites personnalisations de base. Ils se ressemblent tous. Ils utilisent et utilisent tous les mêmes éléments. Mais c'est agréable de voir une certaine variété et de voir que tout est déjà prêt, je le verrai dans la prochaine vidéo 24. Navigation: Nous examinerons la navigation, qui sont essentiellement des en-têtes et des pieds de page, dans ce cas, ils les appellent barres supérieures. Supprimons quelques sections qui restent de la leçon précédente. C'est un peu moins compliqué. Allons-y. Nous allons quitter le blog. Je vais laisser celui-ci. J'aime bien l'image. Nous allons insérer et nous passons à la navigation. Nous sélectionnons une barre supérieure que nous voulons utiliser et qui l'a effectivement placée tout en bas Nous voulons donc la faire glisser vers le haut et la placer tout en haut. Sur la gauche, nous avons le logo et sur la droite nous avons la section « contact » et « inscription ». Il s'agit en fait d'un aperçu. C'est le cas ici. Tout en haut, vous pouvez voir ces boutons dans le logo. Bien entendu, vous pouvez le personnaliser à nouveau. Vous pouvez cliquer dessus, vous pouvez voir qu'il existe plusieurs options pour différents cas d'utilisation lesquels nous voulons cliquer ici. Ici, nous pouvons réellement tout changer sans le rendre obsolète et rester à jour ici. Au lieu d'un texte, nous pourrions mettre notre logo ici. Nous pouvons en fait lier ces informations à, par exemple, à propos et contact, mais nous n'avons pas ces pages pour le moment. Revenons à la navigation. Nous avons en fait regardé la version noire ici. Il existe également une version blanche. Il existe également une version avec logo. Si vous cliquez dessus tout en bas. Allons-y jusqu'au sommet. Supprimez le premier, cliquez dessus. Allons-y. Nous pouvons modifier l'image ici. Nous pouvons en fait ajouter d'autres composants, autant que nous le voulons. En fait, si je dis que vous pouvez réaliser n'importe quoi à partir de n'importe quel modèle, c'est parce que si nous cliquons sur Desktop, nous allons sur la droite. Vous savez qu'il existe deux versions du noir et blanc. Vous pouvez en fait aller ici et changer la couleur à partir d' ici et obtenir le même résultat que le précédent. Si nous cliquons ici et que nous l' associons, c'est parti. Il faudrait changer ce texte ici, il est lisible, voire le faire. Cliquons ici. Choisissez la couleur. Il va falloir le faire pour chacun d'entre eux. Je vais les déplacer, les sélectionner toutes et changer complètement de couleur. J' utiliserais bien sûr ce noir si mon logo était blanc ou coloré. Dans ce cas, nous utiliserions en fait un blanc ou un blanc plus clair qui répond aux exigences de contraste. Regardons maintenant le pied de page. Cliquons ici. Voyons où est importé. Allons-y. En fait, je vais le faire glisser ici. Non, ce n'est pas ce que je veux faire. C'est comme ça. Et cliquez sur Insérer. Allons-y. De cette façon, la version de bureau sera principale, puis nous optimiserons pour le reste. Ici, nous pouvons voir toutes les différentes pages vous souhaiteriez ou pourriez créer, et aucune d'entre elles n'est liée pour le moment, mais si vous cliquez dessus, puis cliquez à nouveau, et vous pouvez toutes les lier ici. De même avec le pied de page blanc, la seule différence est la couleur et non la fonctionnalité réelle du modèle Maintenant que nous avons clarifié les touches et les pieds de page ci-dessous, il est temps de passer aux pages 25. Pages: J'ai examiné la navigation. Passons en fait à des pages entières. C'est ainsi que vous pouvez littéralement créer une page en un seul clic. J'ai cliqué sur le tout premier sans expliquer. Je le sais. Mais voici la page de destination. Rapide et facile, vous avez tout ce dont vous avez besoin pour la plupart des sites Web. Nous avons l' espace réservé à l'image au milieu. Nous avons un bouton, du texte. Nous avons les logos fiables. Nous avons quelques sections qui vous permettront d' approfondir votre connaissance du site Web. Nous avons notre section FAQ où vous pouvez modifier les éléments. Nous avons le droit de nous inscrire aujourd'hui grâce à notre simple pied Ce que je remarque ici, c'est qu'il n'y a pas d'en-tête négatif , je recommande d'en ajouter un. Après avoir exploré les pages, ajoutez simplement un en-tête dans celle-ci. Si vous décidez d'utiliser cette page, tout est optimisé et le design est adaptatif. Regardons encore quelques pages. Nous avons de nombreuses options à examiner. Je ne vais pas entrer dans les détails de chacun d'entre eux, car je veux que vous l'exploriez également vous-même et que vous jouiez avec. Et vous savez déjà que nous pouvons tout personnaliser, changer les polices, les logos, les couleurs et changer les images honnêtement. C'est à peu près tout ce que tu as besoin de savoir. Nous avons ici une page de portfolio où vous pouvez présenter votre projet. Vous pouvez voir que les pages que nous ajoutons se trouvent toutes ici dans la section Pages. Ensuite, regardons le teaser. C'est comme une promo, un peu restez connectés et inscrivez-vous, vous l'avez indiqué dans votre e-mail. Et voici un petit teaser. Il peut s'agir d'une vidéo ou d'une photo. Cela peut être n'importe quoi. Tu veux un blog. Nous connaissons déjà les blogs. Vous pouvez également en ajouter un ici. Vous pouvez ajouter un article de blog distinct sans la collection de blogs. Si vous le souhaitez, nous pouvons ajouter une barre latérale qui est essentiellement un en-tête de barre latérale Nous avons différents types de projets ici, ce qui nous incite à en voir d'autres Après la barre latérale, nous avons notre page de projet, qui est assez similaire aux autres que nous avons déjà examinées Nous avons également une page blanche. Voyons s'il se charge correctement. Page blanche juste pour vos créations. Prévisualisons-le. Ici, nous avons un long carrousel complet lequel vous pouvez jouer Nous avons également un blog d'images ici, qui ressemble un peu à un journal documentaire illustré. Nous avons un classique de quatre pages. Juste pour avoir un lien cassé, si vous avez un endroit où le visiteur ne veut pas être redirigé, il vous suffit de le mettre. Ensuite, nous avons quelques portefeuilles. Nous avons une page de teaser pour Coming Soon. Nous avons encore une fois une introduction. La plupart d'entre eux sont destinés à un usage personnel, pour les blogs, mais vous pouvez aussi toujours les changer pour un usage professionnel et être plus professionnel que décontracté ici. Mais tout dépend de toi. Vous pouvez même modifier vos pages comme vous le souhaitez. Vous pouvez le faire glisser ici, faire glisser et voir ce qui se passe. Je sais que ce n'est pas aussi flexible, mais d'une certaine façon, c'est le cas lorsque vous regardez vraiment, que vous essayez, jouez avec des choses, que vous voyez si vous l'aimez et que bien parce que cela peut donner de si bons résultats. Je voudrais juste lui donner un peu de temps pour voir ce qui se passe et continuer à utiliser Framer en attendant car vous ne savez jamais ce qui va se passer ni quelle tâche vous aurez Oui, c'était des pages. N'hésitez pas à le personnaliser et à regarder autour de vous. Je vous verrai dans la prochaine vidéo. 26. Les médias: Nous allons maintenant examiner les médias ici. Je sais que cela peut être un peu accablant, mais ils sont tous assez similaires. Examinons d'abord ces sous-catégories dans les médias. Vous pouvez importer une image, une vidéo animée ou un fichier audio. Commençons par une simple image. Nous allons cliquer sur Iff et le faire glisser dans notre section. Et vous pouvez voir qu'il s'est ajouté à la section sur laquelle nous voulons cliquer dans Surge Gif. Après avoir importé le Gif en tant que support, vous pouvez cliquer dessus et vous aurez un bouton Surge ici. Vous pouvez simplement saisir ce que vous voulez. Cela donnera juste ce look à quel point c'est mignon. Chaque fois que vous le rechercherez, ce sera différent. Je l'ai supprimée. Je vais taper à nouveau chat. Ce sera une image complètement différente. Je suis désolée, c'est trop mignon pour ne pas être distrait. Nous allons le laisser là. Allons regarder le formulaire suivant. Nous avons des vidéos. Nous pouvons soit importer une vidéo directement depuis notre ordinateur portable, soit importer une vidéo en utilisant un cadre depuis Youtube ou importer depuis Vimeo Cliquons sur Youtube car personne n'utilise Vimeo. Ici, nous avons le joueur. Nous devions avoir un exemple de lien ici. Nous pouvons activer et désactiver la lecture automatique. Par exemple, je l'ai mis en boucle. Nous pouvons désactiver ou rétablir le son et décider de la couleur du joueur Nous pouvons également avoir des bordures. Cliquez sur Publier. Sélectionnons-les toutes ces commandes X. Donc, coupez. Je publierai tout cela sur la page ici. Nous avons juste un exemple que j'ai collé. Et maintenant, nous pouvons les prévisualiser. Tout en bas de page, vous pouvez voir que le Jeff joue tout de suite. Nous pouvons jouer à l'intégration Mayo. Je ne sais pas ce qui est arrivé à celui d'Instagram ici, car il est un peu essentiel. Il s'agit toujours de vérifier que le Wi fonctionne et que tout se charge. Regardons ensuite les animations. Cliquons sur Lotti. lotti sont essentiellement des animations rapides qui sont vraiment peu coûteuses Vous n'utilisez pas vraiment presque toute l'optimisation de l'ordinateur portable ou de bureau, et c'est en fait très léger. Après avoir importé le lot, nous pouvons sélectionner le lien à partir duquel nous obtenons le lot. Nous avons les instructions de jeu, la source. Téléchargez-le, et vous verrez que le loto joue très bien. Nous avons la direction à suivre. Regardons ensuite le son. Ici, vous pouvez choisir parmi un tas d' options différentes, de Spotify à Apple Music en passant par le podcast Apple, Sound Cloud, Simple Cast et Simple P Three que vous pouvez importer depuis votre ordinateur portable. Voici toutes les options multimédias pour le framer, je vais le voir dans la vidéo suivante 27. Formulaires: Dans cette vidéo, examinons les formulaires en tant qu'éléments. Examinons d'abord les entrées. Nous pouvons ajouter une entrée. De cette façon, un visiteur du site Web peut saisir votre e-mail. Par exemple, cliquez sur S'abonner. Maintenant que nous avons leurs informations, nous pouvons double-cliquer. Nous pouvons utiliser un service différent pour la saisie à partir de boucles, Spark Mail, de Chimp et d'obtenir du poids en moins Nous pouvons également rediriger le visiteur une fois qu' il a cliqué sur s'abonner. Nous pouvons également changer le mot pour cela. Regardons le reste des formulaires. Ce ne sont que les mêmes formulaires pour différents services. Par exemple, examinons les types Form et Calendly. Dans Calendly, vous pouvez connecter votre compte Calendly et vous pouvez prendre rendez-vous sur le formulaire de saisie Vous pouvez remplir un formulaire de saisie directement sur votre site Web. C'est tout pour les formulaires et je vous verrai dans la prochaine vidéo. 28. Icônes: Regardons ensuite les icônes. Nous avons ici un tas d' icônes différentes que vous pouvez utiliser pour personnaliser votre site Web et ajouter des illustrations personnalisées pour ajouter une touche d'originalité. Prenons l'exemple des humains. L' importation prendra un peu de temps et si nous double-cliquons dessus, nous pouvons le personnaliser ici même, ce qui est assez étonnant. Vous pouvez changer de position, vous pouvez changer de corps, c'est absolument génial. Vous pouvez changer la direction ici, vous pouvez changer la couleur de la peau ici. Tout est très personnalisable si vous recherchez une icône humaine rapide. Passons maintenant à Twinmoi, en fait des icônes emoji au même endroit Nous pouvons rechercher un emoji ici, nous pouvons simplement le mettre comme ça Cherchons-le et il nous donnera l' icône équivalente en emoji Passons maintenant à Mogi. Vous avez différentes variantes, en fait toutes les variantes de Mogi, vous pouvez le personnaliser complètement Et vous pouvez continuer à chercher et trouver exactement ce que vous recherchez. Vous pouvez modifier le rayon du cercle. Vous pouvez faire pivoter le visage. Vous pouvez modifier le caractère et la couleur d'arrière-plan. Passons maintenant à Feather. Dans celui-ci, si nous cliquons dessus, nous avons une très grande liste d'icônes que nous pouvons utiliser. Par exemple, Wi Fi et ça devient Wi Fi. Vous pouvez le refléter. Rien ne se passera car ce n'est pas comme une icône miroir ici Si nous voulons réellement le refléter, vous pouvez également modifier la couleur de votre icône. Ensuite, regardons Hero. Ici, nous avons juste une liste différente de nombreuses icônes différentes. Ici, l'icône Wi-Fi, encore une fois, est un peu différente. Vous pouvez choisir celui que vous voulez à votre goût, ils se croiseront et auront la même chose. Par exemple, celui-ci a également une maison différente de celle-ci. vous suffit de regarder le style que vous souhaitez et de décider quel type d'icône vous souhaitez réellement utiliser pour votre site Web. Regardons les deux derniers. En fait, je ne vais pas le changer, donc nous pouvons voir la différence. Ici, nous avons à nouveau la liste, juste différents styles d'icônes. Le dernier, le phosphore, est encore une fois un peu plus arrondi, nous avons notre liste juste ici C'était notre exploration de nombreuses icônes différentes. Il y en a vraiment des chouettes, tu sais, des plus drôles. Et vous pouvez le personnaliser comme vous le souhaitez. Vous pouvez l'ajouter à votre site Web simplement en le faisant glisser, et il s'ajoutera comme par magie Vous pouvez cliquer, faire glisser et le positionner n' importe où sur la page que je vais voir dans la vidéo suivante. 29. Interactifs: Passez à Interactive. Par exemple, examinons la barre de recherche. Il suffit de cliquer et de le faire glisser n'importe où sur le site Web. Pour l'ajouter , nous avons le bouton de recherche. Il est en fait petit. Emmenons-le quelque part où il sera un peu plus visible. Allons-y jusqu'au sommet. Parlons-en d'abord ici. Insérons-le, par exemple, ici. Et réduisez le rembourrage pour qu'il soit un peu plus intégré. Si nous faisons défiler la page vers le bas, cliquez sur la recherche. Vous pouvez effectuer une recherche sur votre site Web de cette façon. Regardons le ticker. Il suffit de le faire glisser n'importe où sur notre site Web, cliquer dessus, de cliquer dessus deux fois, et nous pouvons sélectionner nos enfants ici. Il va juste falloir alterner entre tous ces éléments. Par exemple, j'ai choisi Material on Feather et Hero. Voyons ce que cela fait, car vous pouvez voir des boucles infinies entre toutes ces icônes Et c'est un très beau bloc-notes, donc ça a l'air naturel. Revenons en arrière et je vais vous montrer comment le personnaliser. Nous double-cliquons ici. Nous pouvons modifier la vitesse de rotation. Nous pouvons changer de direction. Nous pouvons l'aligner au centre gauche ou à droite. Nous pouvons élargir cela ici, cela couvre l'ensemble de la page. Nous pouvons ajouter un écart plus important. En fait, changez de direction ici, alignez-la vers le centre. Vous pouvez changer le rembourrage, ce que je ne veux pas faire. Nous pouvons sélectionner la taille des objets. Nous pouvons l'étendre ou le laisser en mode automatique. Nous pouvons également choisir le découpage. C'est le joli bloc-notes qui est en train d'être ajouté. Et je veux le laisser comme ça au survol, par exemple. Je veux le ralentir. Voyons ce que cela donne. Comme vous pouvez le voir sur Hover, vos icônes ralentissent. C'est vraiment cool de montrer vos logos juste pour mettre en valeur ce que vous voulez. Il bouclera à l'infini. Je trouve que ça a l'air vraiment sympa. Passons à autre chose. Regardons le diaporama ici. Il fonctionne de la même manière. Nous choisissons le contenu. Par exemple, le phosphore humain. Choisissons-en une troisième, Feather. Regardons ce qu'il fait. Si vous cliquez ici, nous passerons de l'un à l'autre avec une belle animation. Laissez-moi vous montrer comment le personnaliser. Nous pouvons choisir la direction, sélectionner la lecture automatique, modifier l'intervalle de lecture automatique, fréquence à laquelle il change Nous pouvons choisir si l' image est déplaçable Quand c'est comme un JPEG ou un PNG, parfois sur un site Web, votre image traîne et je trouve Je vais dire non. Vous pouvez également modifier la capacité, l'échelle et la perspective, puis les faire pivoter. Vous pouvez l'aligner en haut, au centre et en bas. Vous pouvez sélectionner le nombre d'éléments affichés à la fois. Vous pouvez sélectionner l'écart. Par exemple, s'il y en a deux, vous pouvez sélectionner l'écart. Vous pouvez ajouter ou supprimer un rembourrage, vous pouvez modifier le rayon, vous pouvez modifier la transition à laquelle ils effectuent la transition Vous pouvez entièrement personnaliser. Et vous pouvez prévisualiser l'animation ici, ce qui est assez étonnant à mon avis. Vous pouvez constater une énorme différence. Vous pouvez sélectionner la rigidité et l'amortissement et vous pouvez voir la courbe Vous pouvez voir l'animation ici, ce qui est très pratique si vous n'êtes pas du tout familiarisé avec les animations. Vous pouvez ajouter un délai, mais nous n'allons pas le faire. Voyons ce que notre animation a fait. Cela semble horrible, mais c' était juste à des fins de démonstration. Ensuite, regardons Carol, qui est honnêtement similaire. Importons-le ici. Cliquez alors sur Sélectionner le contenu. Allons-y. Sommes-nous sûrs qu'il s'agit d'un Sol ? Je ne suis pas sûr que ce soit un Sol. Allons-y, c'est un sol. Supprimons ceci. Prévisualisons ceci. Voici le Sol car il n'est pas plein. Cela ne fait rien pour ajouter quelques objets supplémentaires. Nous pouvons donc voir ses fonctionnalités en cliquant ici, nous pouvons voir l'animation et tout le reste. Alors, on y va. Telles étaient nos interactions. Des trucs vraiment amusants avec lesquels jouer. Et si vous savez ce que vous voulez faire, c'est vraiment agréable et facile de réaliser des choses simplement en utilisant ces outils. Et je vous verrai dans la prochaine vidéo. 30. Social: Regardons les réseaux sociaux. Ici, nous avons toutes sortes de réseaux sociaux, Instagram, Facebook, Twitter, Google Maps, Trustpilot et tag and bed Commençons par Instagram. Voyons voir, vous pouvez ajouter un lien vers une publication Instagram, et voici la publication Instagram sur votre site Web. C'est aussi simple que ça. Ensuite, regardons Facebook. Celui-ci fonctionne de la même manière. Malheureusement, le lien ici n'est pas disponible. Mais ici, il vous suffit d'importer le lien et il affichera votre publication sur Facebook. Ensuite, regardons Twitter, qui va être la même chose. Ça va juste afficher le tweet. Bien que ce ne soit plus Twitter mais X, le lien fonctionne toujours. Quoi qu'il en soit, passons à Google Maps. Cela pourrait être en fait plus utile que ceux que nous avons examinés précédemment. Vous pouvez simplement importer vos coordonnées. Il affichera cet emplacement. À l'heure actuelle, il affiche un lieu à Amsterdam. Vous pouvez l'agrandir, cela agrandira simplement la carte autant que vous le souhaitez. En haut à gauche, vous avez les coordonnées. Oui, c'est assez étonnant à mon avis. Ensuite, nous passons à autre chose. Passons à TrustPilot. Vous devez avoir un compte Trustpilot et un identifiant professionnel pour que cela fonctionne Enfin, regardons le tag et le lit. Voyons ensemble ce qu'est le tag et le pari. Il vous permet d'importer très facilement des flux provenant d'Instagram , de Facebook et de tous les réseaux sociaux. Nous avons ici toutes les intégrations. Nous n'avons même pas Framer sur cette liste car Framer n'est apparemment pas très populaire Oui, c'était l'étape sociale, et je le verrai dans la prochaine vidéo. 31. Utilitaires: Regardons l'utilité. Ici, nous avons un tas d'options différentes, options utilitaires à ajouter à notre site Web. Commençons par les jus de citron. Importez-le partout où nous avons notre bouton « maintenant », nous pouvons en fait avoir un lien vers Lemon Squeeze. Et on change le style du bouton. Nous pouvons, nous pouvons choisir la police et nous pouvons choisir un effet au survol. Regardons ensuite Gum Road. Road est un excellent site de vente si vous recherchez des modèles, si vous recherchez des polices, des effets ou des superpositions différents, vous pouvez créer un lien vers votre produit ici Nous pouvons ajouter un bloc de code directement sur votre site Web. Nous avons mis le code ici. Nous pouvons choisir la langue dans laquelle le formater. Nous pouvons choisir si vous voulez du statique ou du dynamique, nous pouvons choisir un thème, nous pouvons choisir à nouveau la police, ainsi que la couleur de police, les bordures et le rembourrage Nous pouvons également intégrer du contenu à l'aide de l'option d'intégration. Vous pouvez l'ajouter ici à l'aide d'un URL, ou vous pouvez ajouter votre code HTML ici. Par exemple, vous souhaitez intégrer non pas en utilisant l'intégration de vidéos Youtube, mais en utilisant e frame. Par exemple, si vous souhaitez importer un court-métrage, cela peut être une meilleure option pour qu'il fonctionne. Il s'agit de l'option que vous utilisez. Ensuite, nous avons notre bloc-notes et nos boutons de téléchargement. Nous pouvons écrire quel contenu est copié lorsque vous cliquez sur le bouton, ce qui est franchement plutôt cool. Par exemple, si vous avez un tas de code que vous ne voulez pas que les gens sélectionnent, vous pouvez simplement l'avoir en bas de la page. Vous pouvez coller ce code dans ce bouton. Lorsque vous cliquez dessus, c'est exactement ce est copié, ce qui est assez étonnant. Ensuite, examinons le bouton de téléchargement. Vous pouvez choisir un fichier qui sera téléchargé ici, ou vous pouvez insérer une URL, par exemple un PDF. Vous pouvez également, dans n'importe lequel d'entre eux, personnaliser votre police, votre icône et votre style. Passons à la table ouverte. Je n'ai pas de compte de table ouvert, mais vous pouvez faire des réservations en utilisant ce compte. Ensuite, il y a la chasse aux produits, le Fork Event, tout cela. Si vous les utilisez, ils pourraient être très utiles. Mais comme ce n'est pas le cas, je ne les trouve pas vraiment utiles. Mais sur le produit, vous pouvez sélectionner un produit qui sera affiché ici. Examinons rapidement le fork et l'événement. Vous pouvez réserver une table à l'aide de la fourchette. Demandez aux clients de réserver une table en utilisant votre compte The Fork. Vous pouvez également acheter des billets auprès d'Event Bright si vous vendez des billets. Passons enfin au sticker et au logo. Collant. Vous pouvez avoir des notes autocollantes et un logo. Vous pouvez insérer votre logo et ce n'est qu'une image, honnêtement, mais c'est un logo. Et vous pouvez choisir le nom de l'entreprise, le rayon sur les notes autocollantes. Lorsque vous passez en direct, les gens peuvent réellement écrire leurs notes ici. Cela ne fonctionne pas pour le moment, je ne sais pas pourquoi. Peut-être si on le met sur une vraie page. Voyons voir. Maintenant, passons en direct. Hmm, je ne sais pas pourquoi cela ne fonctionne pas. Euh, vous pouvez simplement, vous savez, l' ajouter comme note autocollante, comme décoration à votre site Web, peu importe. Désolé de vous avoir presque mal informé, je m'excuse. Ouais Il s'agissait tous d'utilitaires et il est maintenant temps pour nous d'expérimenter tous ces éléments dans le cadre de la personnalisation. 32. Mettre tout en œuvre: Il est temps de les assembler tous. Revenons au tableau de bord et commençons par créer rapidement un nouveau site Web. Par exemple, il s' agira d'une société de marketing. C'est du design extérieur. En fait, créons un magasin de surf spécialisé dans toutes sortes de sports de surf, de la vague à la planche à voile, en passant par le cite surf et le win foil, rendre coloré et dynamique tout en gardant un surfeur Voyons ce qu'il en résultera. C'est également une bonne mise à jour pour nous Maintenant que la génération est terminée, examinons-le La première chose que je vois, c'est une image d'arrière-plan aléatoire qui, apparemment, je ne pense pas qu'elle puisse la générer. C'est bizarre qu'il ait fait ça. Ici, nous pouvons voir que pour le kitesurf, il faut en fait mettre des kits qui ne sont pas liés au kitesurf En planche à voile, on a intégré le wakeboard au surf normal, probablement parce que c'est plus répandu qu'autre chose, mais là n'est pas vraiment le but Regardons les éléments que nous pourrions ajouter pour personnaliser la page. Tout d'abord, je souhaite insérer une barre de navigation tout en haut. Je pense que je veux ajouter celui-ci. Faisons-le simplement glisser vers le haut. Cliquons dessus ici. Je souhaite ajouter Home on. Je vais aller à Icones, je vais aller à Hero. Ici, nous avons une petite icône, rendons-la bleue, elle correspond à l'ambiance Rendons-le un peu plus petit, mettons-le sur la gauche. Laissons le logo, nous n'avons pas de logo et nous voulons créer un lien Je ne pense pas que nous puissions réellement lier cette icône à notre page d' accueil comme je le souhaite. Supprimons cela, mais nous avons notre en-tête maintenant, revenons en arrière. Mettons notre logo, retirons notre icône. Revenons à notre page d'accueil. Par exemple, insérons une vidéo Youtube sur le surf. Je veux l' insérer pour le faire, l'étendre sur toute la page. Allons sur Youtube. Allons sur Youtube et recherchons des vidéos. Copions simplement ce lien et importons-le ici. Activons la lecture automatique. Maintenant, lorsque nous le prévisualisons, nous avons notre en-tête ici. Nous avons notre vidéo juste ici. Retournons en arrière. Ajoutons autre chose. Ajoutons par exemple un formulaire de contact. Ajoutons un formulaire. Je souhaite ajouter un formulaire de saisie. Eh bien, maintenant je veux ajouter Calendly. Par exemple, si la boutique organise des événements, elle peut les afficher ici. Vous pouvez choisir le compte Calendly pour vous connecter. Mais passons également à nos pages. Passons à nos sections. Faites défiler la page vers le bas, ajoutons le formulaire de contact ici. Le client peut rester en contact s'il le souhaite. Vous pouvez le personnaliser et choisir les différentes couleurs en fonction de votre palette de couleurs. Oui, ici, nous avons juste mélangé quelques éléments pour pimenter votre site Web. Vous pouvez évidemment ajouter des éléments fonction de vos besoins et de la façon dont vous souhaitez le personnaliser, mais ce n'était qu' un petit exemple pour vous aider à démarrer. Je vous verrai dans la prochaine vidéo. 33. Pratique : utiliser n'importe quel élément: Dans cette pratique, nous utiliserons deux éléments pour améliorer notre site Web que nous avons créé tout au long du cours. Passons à notre site Web. Voyons voir. La principale chose qui manque à coup sûr est un en-tête. Je n'arrête pas de l'appeler header, mais on l' appelle en fait une barre supérieure ici. Je vais entrer et importer, par exemple, celui-ci en cliquant dessus et en le faisant glisser Double-cliquez pour entrer. Tapons Get Learn ici. Et nous n'avons pas vraiment d'autres pages. Je vais juste le supprimer ou je peux le laisser. Par exemple, j'ai oublié que nous avons un blog, je crois. Je vais simplement les supprimer et laisser le blog ici. Je vais le lier au blog. Ne le rendons pas bleu. Il est déjà clair qu'il s'agit d'un bouton. Voici notre premier élément. Si nous le prévisualisons, vous pouvez cliquer sur Blog, et notre blog apparaît. Je ne suis donc pas content de ce qui se passe lorsque vous cliquez dessus. Cliquez sur Let's click sur Link puis sur Hover. On pourrait le rendre un peu gris, rien de moins, sans le souligner. n'est pas ce que je veux. Prévisualisons-le maintenant. Vous pouvez voir qu'il devient gris. Allons-y. Retournons en arrière. C'est notre premier élément. Qu'est-ce qui se passe ? Je n'ai aucune idée de ce qui se passe en ce moment. Retournez chez vous. Je pense que nous sommes bloqués. Alors rechargeons. Cela a sauvé notre barre supérieure. En ce qui concerne le deuxième élément, voyons voir, je veux réellement ajouter notre vidéo Youtube. Ajoutons-le juste ici. Nous l'ajoutons dans la section. Découpons-le et mettons-le ici. En fait, c'est un peu plus petit. Donc c'est possible. Supprimons cela. En fait, je veux me contenter de ce côté. Cliquons dessus. Nous avons notre vidéo Youtube. Optimisons cela pour les autres plateformes. Plus petit, plus petit, plus c'est blanc. Et faites en sorte que ce soit blanc également. Cela change ici, réduisez-le , il s'adapte horizontalement. Et pose-le comme ça. Allons-y. Je veux principalement me concentrer sur la version Dextop pour le moment. Si nous en avons un aperçu, nous avons notre vidéo ici. y a deux choses que je veux changer, c'est de les mettre dans notre vidéo. Tapons, copions ceci, lions-le ici. Activez la lecture automatique. Parfait Ça me coupe un peu ici. Nous souhaiterons peut-être ajuster cela, mais vous savez que ce sont des détails et que vous pourriez y remédier plus tard. Mais l'essentiel était que je voulais ajouter une vidéo et un en-tête à ma page Web, et nous l'avons fait avec succès. C'était notre habitude. J'espère que vous avez apprécié ce chapitre et que vous l'avez essayé par vous-même, ou que vous avez suivi cette pratique. Et j'espère que tu as appris quelque chose. Je vous verrai dans la prochaine vidéo. 34. Aperçu de chapitre (Cutomizations avancées): Dans ce chapitre, nous avons examiné personnalisation avancée et l'utilisation d'éléments pour, vous savez, personnaliser votre site Web en fonction de vos besoins réels. Nous avons examiné les en-têtes, les pieds et un tas d'intégrations différentes avec les formulaires, Google Maps, comment ajouter des icônes, comment ajouter de petites boucles, de petites animations à votre site Web Et je pense que c'était vraiment amusant et que vous pouvez vraiment personnaliser votre site Web. Par exemple, le défilement du logo est l' un de mes préférés C'est tellement facile à faire, mais quand je consulte différents sites Web, lorsque je navigue sur le Web , je le vois et je me comment ont-ils fait ? Mais avec Framer, c'est tellement simple Et ce n'est peut-être pas si simple, vous savez, avec différentes plateformes, comme celles qui circulent, les mèches ou l'espace carré Et faire de telles animations est un peu plus difficile, ou c'est comme la courbe d'animation. Et l'exemple d'animation montre exactement comment votre animation se comportera avec les éléments. Et le simple fait de vous donner une idée générale de l'animation est vraiment incroyable. Et je ne l'ai jamais vraiment vu ailleurs auparavant, pas du moins chez les concepteurs de sites Web. Et je trouve cela vraiment très utile lorsque vous essayez, vous savez, de modérer cette animation. Mais tu ne sais pas ce qui ne va pas. Et tu essaies toujours de changer les chiffres, mais ça ne marche pas. De cette façon, il est réellement visible et vous pouvez obtenir le bon effet simplement en le regardant et en le peaufinant Voici donc ce chapitre, et nous avons ajouté quelques éléments à notre site Web que nous avons développés tout au long du cours. Et je ne sais pas si vous faites de même, si vous développez un site Web ou si vous en créez un tas de différents pour chaque pratique. Mais j'espère que cela vous a été utile et amusant, que vous apprenez quelque chose de nouveau et que cela vous simplifie un peu le processus Je vous verrai donc dans le prochain chapitre où nous explorerons les détails du cadreur, tels que les réglages de hauteur. Tu sais, ça peut être ennuyeux. Comme on pourrait le dire, tout est un peu ennuyeux. Mais vous savez, ce sont les choses que nous devons réellement savoir pour utiliser le site Web à son plein potentiel. Et, vous savez, certains paramètres sont essentiels pour savoir lorsque vous créez votre propre site Web. Nous allons donc examiner cela dans le chapitre suivant. Je t'y verrai. 35. Introduction de chapitre (Nitty Gritty): Bienvenue donc dans notre prochain chapitre qui traite des détails de l'encadreur, qui représente essentiellement, vous savez, les détails du cadreur que vous ne voudriez peut-être pas examiner au début Parce que tu es juste comme, oh, il y a l'IA. Il y a comme, vous savez, une IA qui crée mon site Web qui, vous savez, oh, pourquoi ai-je besoin de paramètres de page ? Mais il est en fait très important de les regarder. Et nous allons simplement détailler ce que vous pouvez y faire, quelles sont les fonctionnalités qu'il contient, ainsi que quelques éléments divers utilisant des actions pour simplifier le processus de développement et l' accélérer Nous examinerons également le plug-in Figma pour Framer. C'est en fait très utile et comme Framer était autrefois un outil de prototypage, il est vraiment intéressant d'examiner l'intégration Nous allons donc examiner, choisir un prototype dans Figma et essayer de l'importer sur Framer Je vous verrai donc dans la prochaine vidéo. 36. Explorer la page et les paramètres du site: Explorons maintenant les paramètres de la page et du site, qui se trouvent ici. Ici, vous pouvez voir un tas de choses différentes. Sur la gauche, nous avons d' abord les paramètres du site , puis les paramètres de page. Commençons par les paramètres du site. Nous pouvons passer à l'étape générale où nous pouvons changer le titre du site, définir la langue du site. Nous pouvons également ajouter une description du site qui facilitera notre référencement. Nous pouvons désactiver les animations de transformation et de mise en page si l'utilisateur préfère réduire les mouvements pour des raisons d'accessibilité. C'est ici que nous pouvons également dépublier notre site Web de tous les domaines Comme nous ne l'avons pas publié, il n' y a rien à dépublier C'est ici que vous pouvez également ajouter un Favicon. Ce petit truc s' appelle Favicon. Vous pouvez voir que c'est Framers One en ce moment. De même, lorsque vous partagez, par exemple, un lien vers un site, cette image apparaît, par exemple, sur Discord, comme l'image apparaît lorsque vous envoyez un lien depuis le site Web Vous pouvez donc le configurer de manière personnalisée, définissez-le ici. Vous pouvez ajouter une protection par mot de passe à votre site Web si vous le souhaitez , dans le cadre d'un forfait supérieur. Nous avons également des paramètres avancés comme Canonical Ural. Vous pouvez connecter votre identifiant Google Analytics pour suivre les performances de votre site Web. Vous pouvez également ajouter du code et des scripts personnalisés à votre site Web. Vous pouvez ajouter une étiquette de début de tête. Fin de l'étiquette avant. Au début du body tag. À la fin de l'étiquette corporelle. En fait, si vous voulez vous lancer dans des choses avancées avec Framer, vous pouvez ajouter votre propre code Examinons ensuite les domaines. Notre domaine de base à l' heure actuelle serait les cours de Creative Coding. Framer, je veux dire, je pourrais le changer pour qu'il ressemble à Yeti Learn Framer Et nous pourrions le publier à ce moment-là. Faisons-le réellement. Nous pouvons constater qu' il est désormais en ligne à Yetiarnframi Vous pouvez voir que le site Web est publié et optimisé. Nous pouvons également ajouter un domaine personnalisé. Si nous effectuons une mise à niveau, nous pouvons réellement ajouter un domaine personnalisé. Nous pouvons également ajouter des redirections. Au lieu de créer une nouvelle page, si vous voulez simplement rediriger, au lieu de créer une nouvelle page et de dire « OK, c'est la nouvelle page », vous pouvez rediriger votre ancienne URL vers une nouvelle URL. Nous avons également des mises en scène et des versions. C'est ainsi que vous pouvez suivre les sauvegardes. Par exemple, si vous activez la mise en scène, vous pouvez sélectionner la version de votre site Web que vous souhaitez publier. Nous avons ici différentes versions. Pour le moment, nous n'en avons qu'une, celle de la scène et celle du live. Ensuite, nous pouvons analyser le site Web et vous pouvez voir le nombre de visiteurs uniques et total de pages vues et vous pouvez voir la durée. Normalement, si nous avions des spectateurs, cela ressemblerait à un graphique linéaire ascendant et descendant. Mais pour le moment, parce que nous venons de le publier, nous n'en avons pas. Nous pouvons également voir les principales sources de visiteurs sur Google, Twitter, Facebook, Linton ou Framer Ils seront mis à jour en fonction de la provenance des visiteurs. Nous pouvons également voir nos meilleures pages qui fonctionnent bien. Si nous optons pour des plans, c'est là que vous pouvez mettre à niveau votre site Web et votre site Web personnel ou en faire un plan d'équipe. Ensuite, si nous allons dans les paramètres de la page d'accueil, vous pouvez modifier le titre de la page d'accueil, le slug, l'URL, mais c'est la page d'accueil, donc vous ne la modifiez pas Vous pouvez ajouter une description de page. Vous pouvez également ajouter une recherche dans les moteurs de recherche. Cela apparaîtra si vous effectuez une recherche ou si vous pouvez le désactiver à nouveau, vous pouvez ajouter une image de page au lieu de l'image du site et également ajouter du code personnalisé. Les paramètres sont à peu près les mêmes pour toutes vos pages. Oui, c'étaient les paramètres de la page et du site. J'espère que vous les comprenez un peu clairement . Je vous verrai dans la prochaine vidéo. 37. Utiliser des actions: En actions visant à simplifier votre processus de création. Comme vous pouvez le constater, ce ne sont que des raccourcis pour faire des choses à votre place. Par exemple, vous pouvez saisir du texte pour parcourir les pages ou effectuer une recherche. Par exemple, nous pouvons créer une section. Certaines des actions que vous pouvez réellement entreprendre sont la création d'une page Web, la création avec l'IA, la création d'un composant, vous pouvez publier votre site Web. De là, vous pouvez ouvrir le site Web, voir la version de l'historique ou inviter des collaborateurs. Vous pouvez également parcourir la bibliothèque de l'équipe. Je souhaite visiter notre page de blog. Si je mets une barre oblique, nous pouvons voir les pages du blog, par exemple Si je consulte les pages du blog, cela m'amène à ce blog. Si je le mets, cela m' amène sur des blogs. Tous les blogs que nous avons écrits précédemment. Honnêtement, je ne pense pas que ce soit très fonctionnel ou populaire. Je voulais juste vous le montrer parce qu'il existe et qu'il peut être utilisé si vous le souhaitez. Honnêtement, tout est conçu de manière à ce que l'expérience utilisateur soit tellement conviviale que je n'ai pas vraiment pensé à l'utiliser avant de commencer à créer ce cours. Et comme quelque chose dont je devrais parler. Oui, c'est ici, par exemple, l'historique des versions. Cela pourrait être utile car je ne sais pas où le trouver. Je peux voir toutes les modifications apportées au blog, par exemple. Il y a environ 3 heures, la page du blog n'était pas là, maintenant elle est là. Nous avons changé des choses de ceci à cela. Vous pouvez réellement voir les changements, ce qui est assez étonnant. Vous pouvez en fait revenir à cette version, mais en sélectionnant et en copiant couches et en les collant ici Oui, c'était une courte vidéo sur les actions. Faites-moi savoir, s'il vous plaît, si vous trouvez cela utile, je suis vraiment curieux de savoir comment vous pourriez trouver des cas d'utilisation pour cela. Mais honnêtement, je préfère simplement entrer dans les paramètres ou entrer dans l'insertion et tout faire moi-même, car c'est littéralement à deux clics. Oui, je vais voir dans la prochaine vidéo. 38. Plugin Figma: Dans ce didacticiel, nous examinerons intégration de Figma à Framer Cliquons sur Get the Figma plug in. Cliquons sur Try it Out. Connectons-nous avec Framer. Cliquons sur Essayer à nouveau. Trouvons un exemple de site Web que nous souhaiterions peut-être importer. Allumons-le. Nous allons sélectionner une couche à copier. Nous avons sélectionné une couche, maintenant nous la copions dans le presse-papiers Il ne nous reste plus qu'à créer un nouveau site web design. On colle, voilà, aussi simple que ça. Vous pouvez voir en bas qu'il est en cours de téléchargement depuis Figma et vous pouvez voir que notre couche est juste là Sélectionnons en fait une autre page. Nous allons sélectionner la page d'accueil. Copions cette copie dans le presse-papiers. Maintenant, il suffit de le coller. Vous pouvez constater que tous ces éléments sont entièrement personnalisables. Il vous suffit de l'importer, un prototype, dans un site Web entièrement fonctionnel en seulement 10 secondes. Tout est cliquable. Vous pouvez choisir une image, modifier votre texte, personnaliser vos éléments. Tous ces éléments sont distincts. Tout comme Figma, vous pouvez modifier les formes. Aucun de ces éléments ne ressemble à des images, mais ce sont en fait des éléments que vous pouvez modifier. Oui, c'est plutôt incroyable. Ensuite, vous pouvez cliquer sur Publier. Prévisualisons-le. Ici, vous en avez un complet, je sais pourquoi je ne peux pas le faire défiler. Revenons en arrière une seconde. Quelques ajustements peuvent être nécessaires pour que ce soit incroyable. Par exemple, il ne s'agit pas d'un formulaire, il faudrait donc le remplacer par un formulaire réel. Passer à l'insertion de formulaires et ajouter l'un des formulaires ici, ajouter une section ici. Mais oui, c'est vraiment incroyable à mon avis. Allons sur le site Web et vérifions-le. L'ordinateur de bureau est là. Nous voulons le prendre et le faire glisser ici. 1 seconde. Nous sommes presque là pour l'essayer un peu plus, juste pour l' adapter à l'ensemble de notre page. Voyons voir, je pense que c'est une bonne chose. Maintenant, si nous allons sur le site Web, nous devons d'abord le mettre à jour, puis accéder à la page. Nous avons maintenant notre design Figma. Ils se sont un peu embrouillés dans notre encadreur et c'est un site Web entièrement fonctionnel Oui, c'est plutôt incroyable. Voilà. Ouais. Je viens de m'étirer. Ce n'est pas grave. Peut le rendre plus petit. Mets-le ici. Allons-y. C'est ainsi que vous intégrez votre figma à Framer Je vous verrai dans la prochaine vidéo. 39. Vendre des modèles de cadreur Partie 1: Familiarisez-vous avec Framer. Et comment faire les choses dans Framer. Comment créer votre propre site Web. Comment même importer votre prototype depuis Figma. Comment personnaliser votre site Web de manière avancée. Comment vraiment ajouter, par exemple, une image, une vidéo, un carrousel, toutes ces choses Comment animer et comment ajouter des fichiers de lot. Vous avez appris ce qu'est un fichier lot, comment créer votre propre blog. Toutes ces connaissances que tu as maintenant. Oui, vous vous demandez peut-être, que dois-je faire de toutes ces connaissances maintenant ? Comment puis-je l'appliquer ? La conception de sites Web est très importante en ce moment et elle ne fait que s' agrandir de jour en jour. Beaucoup de gens conçoivent des modèles. Ici, je veux d'abord vous montrer la section des modèles. Ici, nous avons beaucoup de boutons de recherche pour le modèle ou vous pouvez faire défiler la page vers le bas et nous avons ici différentes catégories de modèles. Il existe une agence d' intelligence artificielle gratuite pour le personnel , directives relatives à la marque de blogs, journal des modifications commerciales, un commerce électronique, etc. Il en existe de nombreuses différentes. Examinons quelques modèles de pré-sites Web. Ouvrons-en, par exemple, quelques-unes dans des genres différents. C'est donc comme la modélisation 3D du jeu 3. Celui-ci a un style très corporatif. Ouvrons-en également un pour un portfolio de photographies. Faisons défiler la page vers le bas. Voici quelques blocs-notes et nous les examinerons un peu plus tard. Regardons le tout premier, le jeu comme tel. Voyons voir, c'est très moderne. Peut-être une vraie tablette. Design convivial. Ou iPhone aussi. Comme n'importe quel téléphone, honnêtement. Nous avons ici différentes configurations du site Web. Nous avons juste trois personnages différents du modèle D. Voyons voir, c'est un site Web de la collection NFT. Nous pouvons le prévisualiser. En fait, allons sur le site Web. Voyons voir, nous avons un bouton de message, un bouton Twitter. Nous avons le menu, et c'est ce qui nous amène ici. Nous avons ici une jolie petite animation. Nous avons leur compte Instagram, et nous avons des avantages de messagerie pour les détenteurs, quelques blocs de texte, quelques attributs. La section FAQ de la feuille de route avec une petite animation, j'aime beaucoup cette police. Rencontrez l'équipe. Nous avons le pied de page. C'est très bien fait. Tous ces liens fonctionnent et nous mènent aux différentes sections du site Web. Voici une petite description du site. Nous avons les fonctionnalités réellement utilisées, les effets de défilement, les textiles, les points d'arrêt et les cibles de défilement Vous pouvez en apprendre davantage sur chacun d'entre eux ici, il n'y a pas de barrière dans le cadre d'une communauté. Cela est officiellement confirmé. Si vous entrez dans le modèle, ils vous disent littéralement ce qu'ils utilisent. Vous pouvez donc essayer de recréer cet effet pour votre propre site Web Vous pouvez également apprendre et ne pas simplement vous demander comment ils ont fait cela. Vous pouvez même contacter le créateur du modèle, je suis passé à un nouveau modèle, comme si nous en avions assez de celui-ci. Nous avons la liste des pages ici, encore une fois, la description. Nous pouvons signaler ce modèle. Nous pouvons voir comment fonctionnent les modèles. C'est un point de départ débutant pour tout le monde. Nous pouvons réellement vendre notre modèle. C'est ce que nous étudions en ce moment. Regardons celui-ci. Nous pouvons également le prévisualiser. Juste une petite inspiration pour ce que je vais vous expliquer. Je sais que je n'ai pas dit grand-chose, mais ici vous pouvez faire défiler la page vers le bas. Voici quelques animations. C'est très sympa. On peut cliquer dessus, il y a aussi une petite animation. Elles sont vraiment chouettes. Ici, nous avons un peu plus des icônes, des listes d'attente. Allons vers le haut, vous pouvez faire défiler la page vers le bas pour accéder aux avantages. Regardons le dernier, un site Web de portfolio de photographie pour une agence ou si vous êtes un créatif ou un professionnel. Au lieu de regarder les photos, prévisualisons-les à nouveau. Je peux voir que ce sont de très belles photos, des études de cas vraiment différentes montrant la variété des photos. Si on clique dessus, on passe en fait à la photo. Et une photo détaillée, des informations détaillées sur la photo quand elle a été prise. Chronologie, le rôle que nous pouvons jouer sur le site Web, c'est assez incroyable. Nous pouvons voir quelques photos supplémentaires, quelques prises de vue détaillées de la photo. On voit ici, on peut retourner à la page d'accueil. Nous pouvons accéder à ces liens. C'est assez étonnant. Vous pouvez voir chacun d'entre eux, notez à quel point ce modèle est détaillé, comme s' ils avaient écrit ce texte. Mais ce n'est qu'un modèle. C'est probablement généré par l'IA. Mais c'est comme si l'effort était là. Ce n'est pas juste comme un texte Lom Ipsen. Il s'agit en fait d'une histoire pour le modèle, ce qui donne un peu de vie au modèle lui-même. Je suis vraiment curieux de connaître celui-ci. Une entreprise de pop-corn ici. Regarde ça. Une jolie photo. Pourquoi est-ce que je vous le dis et vous montre tous ces modèles ? Eh bien, parce que vous pouvez réellement créer vos propres modèles avec Framer et les vendre. Vous pouvez également les distribuer gratuitement. Vous pouvez toujours gagner de l'argent en créant vos modèles gratuitement. Vous obtenez un lien d'affiliation et vous en tirez de l'argent. Mais vous pouvez voir que les modèles sont également en vente. Et ils vont de 40$ à 20$ à 100$. Si vous voulez voir ce qu'il a à offrir pour 100$, voyons voir Vous pouvez cliquer ici et cela nous amène à un blog que nous savons réellement comment créer. Revenons en arrière. Voyons voir, il y a de la documentation. ne nous mène nulle part, ça commence, ça nous amène à la tarification. Et si nous cliquons ici, il y a de très belles animations. Vous pouvez le constater, nous l'avons littéralement appris. Et il suffit de cliquer et de faire glisser, n'est-ce pas ? Tu sais exactement comment le créer . Voyons voir quoi d'autre. Voici un menu déroulant. C'est vraiment sympa. Les animations de flèches, les fenêtres contextuelles et quelques icônes. Mais c'est très facile à ajouter. Vous pouvez regarder cela et vous dire, d'accord, d' accord, cela peut être un peu difficile, mais c'est faisable, et cela coûte 100$. Nous pouvons recréer cela avec ce que vous avez appris, avec ce que vous avez Et vous pouvez expérimenter, allons-y. Et vous pouvez toujours faire défiler la page vers le bas pour voir ce qu'ils ont utilisé, apprendre par vous-même ce qu'ils ont utilisé et recréer ce modèle Ce que j'essaie de dire, c'est que vous pouvez gagner de l'argent en créant des modèles. Comment créez-vous réellement un modèle ? Nous regardons ce cours en entier. Vous apprenez à concevoir et à encadrer un site Web. Vous allez maintenant passer aux modèles. Vous faites défiler l'écran vers le bas, c'était un peu trop. Oh mon dieu. Il existe un créateur de modèles. Vous pouvez cliquer sur Soumettre un modèle ici. Vous avez d'abord besoin d'un lien d'achat de Lemon Squeeze ou de Gum Road. Regardons d'abord le jus de citron. Ce sont deux plateformes sur lesquelles vous pouvez vendre vos produits. Cliquons sur Commencer gratuitement, vous suffit de vous inscrire ici. Inscrivons-nous. Après votre inscription, vous recevrez un e-mail de confirmation. Ensuite, le lien qui s'y trouve vous redirigera vers cette page. Il est écrit : « Bienvenue à un membre du conseil d'administration ». Créez maintenant votre boutique. Donnons un nom à notre boutique. Par exemple, Crafts. Je veux que notre boutique L soit Es Crafts. Artisanat. Je ne peux pas te le dire. Pourquoi pas ? Sélectionnez Notre pays, la Turquie, puis cliquez sur Créer ma boutique. Le magasin Ul a été pris. Je vais faire comme tout le monde et ajouter une autre lettre. Vous êtes maintenant dans votre boutique. Vous devez suivre quelques étapes pour que votre boutique soit opérationnelle. Nous devons ajouter un logo, un e-mail de contact, et nous devons activer les paiements en direct et toutes les fonctionnalités. Vous pouvez le faire à votre rythme. Je voulais juste vous montrer comment vous inscrire et vous connecter réellement. Vous devez ajouter votre logo, vous devez modifier certaines choses, mais cela ne devrait pas prendre autant de temps. 40. Vendre des modèles de cadreur Partie 2: Maintenant que nous avons exploré un peu le jus de citron, je voudrais vous montrer Gum Road. J'adore Com Road moi-même. Il existe de très nombreuses ressources utiles. Et nous nous sommes penchés un peu sur Gum Road lorsque nous avons examiné la personnalisation interne et avancée Et je pense que c'est un excellent marché. Je vais d'abord cliquer sur Commencer à vendre. Et une fois que vous êtes connecté, vous avez votre compte. Et j'adore le design web de Gum Road. Et voici quelques trucs que j'ai déjà téléchargés. Voyons voir, je peux réellement avoir mes propres produits. Nous examinons le design ici. La couleur est tout simplement géniale. Il contient également des textes encourageants. J'adore Gum Road. Je vous promets que ce n'est pas une publicité, mais votre premier produit n'a pas besoin d'être parfait. Il suffit de le mettre dehors et de voir s'il colle. Nous voulons donc cliquer sur un nouveau produit, qui serait un produit numérique, car nous allons vendre notre modèle. Nous avons besoin du nom du produit. Ce sera un modèle, vous ferez quelques sélections, remplirez quelques cases et serez mis en ligne en quelques minutes. Mon premier modèle de produit numérique. Nous allons sélectionner le prix. C'est mon premier modèle de serveur, alors gagnons neuf dollars Je ne pense pas que ce soit si grave. Cliquons sur Suivant. Ici, nous avons d' autres informations à remplir. Le nom est toujours modifiable. Vous pouvez ajouter une description. Voici mon premier modèle de Cramer. Vous voyez sur leur droite qu'il se met à jour en direct pendant que je tape. Profitez-en. Nous pouvons écrire, par exemple, que c'est notre modèle pour les services liés aux produits numériques, pas comme Gum Road, mais que nous vendons des cours en ligne. Ce modèle est entièrement consacré cours en ligne et à leur introduction. Ils ne vendent donc pas de produits numériques en les promouvant. Ce modèle vous offrira votre entreprise une visibilité et une attention dans le cyberespace. Tu peux écrire ce que tu veux, c'est du chewing-gum. Réécrivez cette description complète à l'aide du chat. Vous pouvez également le rendre épicé en ajoutant une image. En insérant un bouton, vous pouvez répondre à un texte, vous savez, bonjour tout le monde, vous savez Tapons sur Youtube.com Vous pouvez ajouter un bouton. Ici, vous cliquez sur un très joli bouton. Vous serez redirigé vers Youtube.com où nous pourrons personnaliser l'URL Mon premier modèle, c'est le numéro du magasin, je crois. Je ne sais pas si vous pouvez le modifier, mais vous pouvez vérifier. Vous pouvez changer le couvercle. Ça va entrer ici. Ce sera, par exemple, la capture d'écran du modèle. Vous savez, la page principale, la page d'accueil et la page d'accueil supérieure. Ce serait ta couverture. Ma recommandation se trouve dans ce mail. Peut-être que cela pourrait être un logo d'encadrement ou tout ce que vous voulez, des informations sur le produit. Appel à l'action. Vous pouvez avoir différents appels à l'action. Je le garderais. Je veux ce résumé. Vous aurez une très belle place ici. Nous avons des informations supplémentaires dans lesquelles vous pouvez ajouter des attributs et des valeurs. Par exemple, vous savez, cela peut même être cette description de choses qu'il a utilisées dans Framer Comme dans le modèle, votre effet de défilement était l'un d'entre eux. Vous pouvez ajouter al ah, vous pouvez voir sur la droite. Donc, sur la droite, vous pouvez voir l'effet de défilement et vous pouvez y ajouter n'importe quelle valeur, MA, effet pop up, insane, etc. Vous savez, vous pouvez en avoir une forme, à mon avis. Vous pouvez inviter vos clients à rejoindre la communauté Circle ou un serveur Discord Nous n'avons plus de communauté circulaire, ce n'est pas applicable, sinon ils peuvent payer ce qu'ils veulent. Nous pouvons ajouter un montant suggéré et un montant minimum que nous pouvons modifier. Dans la page précédente, nous pouvons proposer des variantes du produit. Si vous avez, par exemple, un modèle dans différentes combinaisons de couleurs, vous pourriez peut-être le faire. Mais ils peuvent le prendre dans le cadre et le modifier quand même. Mais cela dépend vraiment de votre imagination et nous pouvons modifier la quantité, mais il s'agit peut-être d'un produit numérique. Ne fais pas ça. Et un montant supplémentaire, combien cela coûte d' avoir cette extension ou une version différente. Voici quelques paramètres qui nous permettent de limiter les ventes de produits, permettre aux clients de choisir une quantité, afficher le nombre de ventes, une licence unique, une clé, un produit par vente sous forme de publication. Pour des raisons liées à politique de remboursement spécifiée par les taxes, vous pouvez, si vous le souhaitez, bénéficier d'une réduction. Bien ici, T là-bas, vous pouvez le voir ici. Politique cinématographique. La politique cinématographique est là. Et si vous passez la souris dessus, vous voyez ce beau texte juste ici pouvons saisir le contenu que nous ne voulons pas vendre et nous pouvons télécharger ici les informations suivantes. Nous pouvons changer cela. Il existe deux éditeurs de contenu différents. Nous le partageons également après que vous ayez publié votre produit qui était gomme et du jus de citron. Après avoir publié votre produit sur Lemon Squeeze ou Gum Bro, vous obtiendrez un lien de partage que vous utiliserez dans ce type de formulaire. Pour soumettre votre modèle à Framer. Vous devez saisir votre nom, votre adresse e-mail. Vous n'avez pas besoin d'un profil de débutant, si vous le souhaitez, vous le pouvez. Votre URL publiée se trouve ici, puis vous la soumettez. Ensuite, il y a certaines exigences pour le modèle et vous pouvez être rejeté. Mais voici dans la liste les raisons pour lesquelles il pourrait être rejeté. Si cela est accepté, ce que vous obtenez, les avantages sont là, gagnez de l'argent avec des modèles gratuits, comme expliqué également. Pour que vous puissiez voir des informations détaillées sur tout cela sur Framers, soumettez un modèle de page J'espère donc que cela a été utile, et je vous verrai bientôt. 41. Aperçu des chapitres (Nitty Gritty): Dans ce chapitre, nous avons donc exploré tous les détails concernant Framer, certains paramètres de page et certains paramètres du site Nous avons également exploré l' incroyable plug-in Figma, qui vous permet d'importer n'importe quel design de Figma dans Et cela devient en fait, vous savez, un site Web entièrement stratifié, un site Web fonctionnel. Et il différencie, vous savez, le texte de l'image aux éléments et vous pouvez tout personnaliser Nous avons également examiné un peu les actions que je n'utilise pas vraiment, ne vais pas vivre, mais comment vous pouvez peut-être simplifier le processus de création de choses dans Framer Et ce sont un peu comme des raccourcis et comment rechercher des pages à l'aide d'une action. Voilà, c'est tout pour ce chapitre et je vous verrai bientôt. 42. Projet du cours: Dans cette pratique, notre objectif est donc de créer un site Web et d'utiliser simplement l'une des techniques de personnalisation avancées qui nous font défaut dans le jeu Premies Chop N'hésitez pas à l'essayer vous-même et à le réaliser vous-même ou à venir avec nous, mais essayez, vous savez, le changer un peu sur le pouce. Nous allons donc commencer par I, donc nous allons créer un nouveau site Web et nous allons cliquer sur Kramer Nous allons donc écrire notre Rome juste ici. Et réfléchissons. Je vais écrire ceci pour une marque de soins pour chiens. Notre produit inclut des articles d'entretien. Montrez le produit. OK, essayons ça. Bien, une fois notre site web généré, voyons voir. Il suffit d'ajouter un élément, un élément avancé. Oublions un élément avancé du didacticiel. Et nous serons prêts. J'aimerais ajouter Carousel. Ajoutons les éléments au carrousel. Sortons-les de Canvvast, montons dans le Allons-y. Étendons un peu les choses. Prévisualisons ceci. Allons-y. Nous avons ici notre carrousel, qui a fait l'objet de compétences avancées au cours de notre cours Enfin, j'aimerais simplement le publier et le nommer en l'honneur de Po Care, par exemple. Pourquoi pas ? Maintenant, notre site Web est publié et en ligne et tout le monde peut y accéder et voir nos soins, il suffit de voir ce que l'IA a généré à propos de notre marque. Oui, c'est tout pour cette vidéo.