Cours accéléré sur les cadres : publiez votre site Web de portfolio

1. Intro: Bonjour, bienvenue dans mon cours Frame of Crash. Je m'appelle Jeremy Mia et je crée des marques et des sites Web depuis dix ans. Je veux vous montrer comment vous pouvez l'utiliser pour créer votre propre site Web de portfolio. Et si vous êtes un designer qui souhaite se lancer dans le développement, ce cours est idéal pour vous, car je vais vous montrer toutes les bases, les bases, et vous montrer comment ajouter des animations utiliser des styles de typographie En gros, tout ce que vous devez savoir pour créer des sites Web non seulement pour vous-même, mais également pour vos clients. Ce cours spécifique sera un court cours sur la création un site Web de portefeuille que vous pourrez partager avec vos clients où nous aurons des éléments de votre portefeuille. Ce sera une simple page de destination d'une page, puis nous aurons une page de projet que nous créerons. Et je vais détailler toutes les étapes. Je vais vous donner mes raccourcis, mes plugins que j'adore utiliser, et vous donner d'autres ressources et sites Web que j'aime consulter pour m'inspirer. Je vais vous montrer comment rendre le site Web réactif pour qu'il fonctionne sur mobile. Donc oui, si vous êtes un designer ou un développeur qui souhaite apprendre le framer ou la plateforme Neo sans connaître le code, alors ce sera un excellent cas pour vous Inscrivez-vous au cours aujourd'hui et consacrons-nous à la création d'un site Web génial 2. Les bases de Framer: Donc, pour la première leçon, je souhaite partager les bases de Framer et comment démarrer J'utilise donc Framer sur mon bureau. Si vous utilisez Mac OS, vous pouvez le télécharger sur ce site ou l'utiliser dans le navigateur. J'aime l'avoir dans mon document, alors je l'utilise sur mon bureau. Et voici l' espace de travail principal, comme ils l'appellent. Tous vos projets se trouvent donc dans cet espace de travail. Vous pouvez renommer votre espace de travail. Si vous allez en haut, vous pouvez voir que vous êtes dans mes espaces de travail Vous pouvez donc également ajouter un espace de travail. Peut-être s'agit-il d'un espace de travail séparé pour les clients ou peut-être avez-vous un membre de l'équipe qui utilise un espace de travail distinct. Vous pouvez ajouter un espace de travail. Vous pouvez également créer un dossier. Peut-être que vous avez certains projets. Ainsi, par exemple, j'ai mis clients 2024 ici, et j'ai quelques sites Web de clients que j'ai créés ici. J'ai un autre dossier contenant des modèles gratuits que je télécharge à partir, vous savez, de sites Web ou de la boutique Framer, et puis vous avez également l'archive Donc, si vous supprimez quelque chose, il sera affiché ici. côté gauche, vous avez également votre compte, vous pouvez donc modifier votre profil. Vous avez obtenu la session des paramètres de l'espace de travail. Si vous cliquez sur les paramètres, vous pouvez inviter des membres. Vous pouvez également consulter vos plans. Comme vous pouvez le voir, vous avez obtenu des autorisations, vous avez des polices, et vous pouvez voir le nom de l' espace de travail. Vous pouvez réellement changer cela ici, vous pouvez même télécharger une image. Donc, ce que je vais faire, c'est aller dans le coin supérieur droit. Cliquez sur Nouveau projet. Maintenant, lorsque vous faites cela, vous pouvez voir en haut que vous avez des onglets. C'est donc très similaire à Figma ou à Illustrator, vous avez différents onglets, et vous pouvez simplement les parcourir comme suit. Maintenant, c'est votre canevas principal ou votre principal, vous savez, votre pad de travail, votre espace de travail. Sur le côté gauche, vous avez des menus. Vous avez donc des pages, des sections. Vous avez également les collections CMS. Vous avez d'autres éléments tels que des comptes à rebours, des tickers et des lits, des formulaires, des icônes, et des lits, des formulaires, des icônes, des éléments interactifs, ce qui est cool Et puis une fois que vous allez en haut à gauche, vous avez le menu que vous connaissez, outil d'édition de fichiers. Tu sais, passe en revue ça et vérifie les choses. Vous avez également Lay, donc vous avez des cadres, lignes, des colonnes, des grilles, des images, des vidéos , vous avez également des textes, vous avez également un CMS et des plug-ins intégrés au framer En haut, vous avez le nom de votre page. Je peux donc appeler ce portefeuille un portefeuille il changera de nom et vous pourrez voir que je suis abonné au forfait gratuit. Si tu cliques dessus, je passe aux plans. Et puis, sur le côté droit, vous avez la personne qui le regarde. Donc évidemment, je suis en train de le regarder, vous pouvez inviter quelqu'un et lui donner simplement accès à certaines choses, comme dans les collections ou simplement le design. Vous voulez peut-être limiter ce que voit le client. Par exemple, vous pouvez copier le lien du projet et l'envoyer à un ami ou à un client, et il peut copier le design exact et le mettre dans son espace de travail, ce qui est cool. Et c'est un excellent moyen de transférer des sites. C'est ce que je fais lorsque je transmets des projets à des clients. Vous y avez la localisation. Si vous cliquez sur cette icône mondiale, vous aurez accès à d'autres paramètres du site, donc à une sorte de référencement naturel, comme vous pouvez le voir ici. Et en général, vous avez les favicons et la protection par mot de passe, ainsi que le code personnalisé que vous pouvez saisir pour ce site en particulier Vous avez également les analyses ou le coin supérieur droit. De toute évidence, nous n'avons rien fait d'analytique sur ce site . Vous avez également le bouton de prévisualisation, vous permet de jouer à des jeux, puis vous avez le bouton de publication également le bouton de publication lorsque nous aurons terminé le design. Maintenant, lorsque nous cliquons sur le design de notre site principal, ici, la page principale, la page d'accueil. Nous avons des pages, des couches et des ressources. Si vous appuyez sur Alt un, deux ou trois, il passera d'un menu à l'autre, comme vous pouvez le voir. Nous avons des pages, des couches et des ressources. Si vous souhaitez créer une nouvelle page, il vous suffit de cliquer sur le bouton Plus. Vous pouvez créer une nouvelle page, une page CMS, qui ajoutera une collection automatique pour vous, sous forme d'espace réservé que vous pourrez modifier Vous pouvez également ajouter un dossier et placer des pages dans des dossiers, ce qui est une fonctionnalité intéressante. Si vous allez dans les couches, vous pouvez voir toutes vos couches. Ainsi, vos piles, vos formes, vos éléments, tout ce que vous avez trouvé dans la conception du site, se trouveront dans le panneau Calques Ensuite, dans les actifs, vous avez les composants, les styles et le code. Les styles sont similaires à ceux de Figma, façon dont vous avez les textiles, les styles de couleurs, etc., comme dans Adobe Illustrator C'est comme avoir des échantillons ou des styles graphiques. C'est similaire. C'est juste que la plupart sont des couleurs, typographie et d'autres choses de ce genre . Ensuite, vous avez également des composants. Vous pouvez donc créer des composants qui ne sont que des éléments définis que vous créez. Par exemple, s'il s'agit d'une barre de navigation, elle figurera sur chaque page Cela ne fait que faciliter les choses, rendre plus fluides, car si vous apportez une modification, cela affectera l'emplacement de tous ces composants. De plus, lorsque je clique sur la page, vous aurez votre design ou vos outils de style sur le côté droit. Vous avez donc une mise en page, des effets, du style, afin que nous puissions changer la couleur Comme vous pouvez le voir, nous avons des remplacements de code et des exportations, afin que vous puissiez exporter des PNG et des JPEG, Ensuite, nous avons également les points de rupture. Voilà donc toutes les bases de cette leçon. Dans la leçon suivante, nous allons créer ce design que j'ai créé dans Illustrator. Je vais vous montrer comment créer cette page de ainsi que cette simple page de destination, pour un portefeuille de projets. 3. Créer des styles: Dans cette leçon, nous allons commencer à travailler sur la page d'accueil du portfolio et créer cette section principale consacrée aux héros. abord, j'ai créé mon design dans Adobe Illustrator, donc voici ce que j'ai créé, et j'ai créé un design de 1920 pixels. Et pour ce qui est du texte et des éléments que je peux modifier dans Framer, je n'ai pas besoin d'un design parfait Et ce qui est cool avec Framer c' est que vous avez l'impression de travailler dans un outil de conception tel que Figma ou Illustrator, car les outils de conception sont très similaires et l'interface utilisateur est simple à utiliser Je vais donc cliquer sur cette barre supérieure, et vous pouvez voir qu'il est écrit Desktop 1 200. Il s'agit du point de rupture du bureau. Maintenant, les points d'arrêt se produisent essentiellement lorsque la taille du navigateur atteint une certaine résolution, le design change Ainsi, lorsque vous réduisez le point d'arrêt à 450 pixels, par exemple pour un téléphone portable, le design se transformera probablement en un design à colonne unique Vous pouvez donc avoir plusieurs points d'arrêt. Vous pouvez voir que vous pouvez appuyer sur le bouton plus et que vous pouvez créer un point d'arrêt sur un téléphone ou une tablette, comme vous pouvez le voir Mais pour l'instant, je vais juste le supprimer parce que je n'en ai pas besoin. Je vais cliquer dessus et aller en haut à droite, et nous pourrons accéder à la section des points d'arrêt Je vais régler le fouet à 19 ou 20 pixels, puis la hauteur, on peut peut-être me laisser passer à 1080 parce que je pense que c'est ce qu'était la hauteur Nous avons maintenant cet ordinateur de bureau. Évidemment, vous cliquez et vous pouvez également faire glisser la hauteur. L'une des premières choses que je vais faire est créer des styles juste pour gagner du temps. Celui que j'utilise pour cela est le figuier, et j'ai aussi quelques atouts. J'ai un logo et certaines de ces images que j'ai déjà téléchargées. Et puis nous avons cette couleur ici. Je vais copier la couleur, accéder à mes ressources et accéder aux styles. Désormais, dans les styles, vous pouvez ajouter des styles spécifiques pour les titres et les paragraphes. Vous avez des styles de liens, guillemets, des couleurs et un CMS. Je vais créer un nouveau style de couleur, et je vais copier le code hexadécimal d'Illustrator, et nous allons appeler cela B black ou quelque chose comme ça et créer, et ça va créer automatiquement un dossier, ce qui est cool Ensuite, je vais simplement copier les codes hexadécimaux d'ici et créer ces autres couleurs Je suis donc allée de l'avant et vous pouvez voir que j'ai créé chaque couleur individuellement. Vous pouvez toujours revenir à ces styles et les modifier, et cela changera les styles globaux pour tout. J'ai donc plusieurs designs sur mon site Web avec cette couleur verte, et je change la couleur verte en rouge. Cela affectera tous les objets auxquels ce style est appliqué. Nous allons faire de même pour le texte. Je vais envoyer un texto, et je vais choisir le titre 1. Et pour le premier titre, je vais le faire. Donc figuier audacieux. Alors je me dirige ici et allons voir le figuier. Ils l'ont trouvé magnifique. Je vais donc sélectionner cela et nous voulons changer le poids en gras. Vous pouvez passer en italique. Vous avez de la couleur, transformez-la. J' aime généralement capitaliser. Vous avez des décorations, des outils d' alignement, un trait, un équilibre et des variables en type ouvert. Vous avez probablement déjà vu ces outils, comme dans Figma, ils devraient donc vous être familiers Nous avons le H, puis je vais passer à un paragraphe et avec celui-ci, figuier, taille moyenne pour le corps, et nous voulons passer à la taille moyenne. Vous pouvez également écrire, cliquer sur les styles et les dupliquer ou les renommer Comme pour les couleurs. Vous pouvez également le faire pour les couleurs , juste pour gagner du temps. Nous avons donc le corps du texte 23. Passons donc à la taille, et nous voulons changer cela pour dire 23. Et pour ce qui est de la taille du titre, c'était environ le double. Changez donc votre taille à 80. Oh, je vais en faire une autre copie. On peut appeler ça une liste. Donc, pour cette liste, je pense qu' elle est de la même taille. OK, nous utilisons le même. Celui-ci, en gras 20. Non, pour ces audacieux. Nous allons donc passer aux sous-titres. Figuier, nous allons passer à moitié audacieux. Et vous pouvez même y ajouter de la couleur, le vert, et cette fois, nous pouvons en obtenir 26, et je peux les déplacer par glisser-déposer pour les déplacer vers le haut afin de les rendre plus propres. J'ai donc mes styles, ce qui devrait me faire gagner du temps. L'autre chose que j'aime faire est de faire glisser toutes mes images de mes dossiers et de les transférer dans Framer Donc, dans Illustrator, en général, je les exporte simplement. J'appuie sur Control Shift OT E, cela vous amène aux actifs, comme vous pouvez le voir, et vous pouvez exporter tous les actifs en une seule fois. Je peux sélectionner le logo, cliquer avec le bouton droit de la souris et cliquer sur Cc pour l' exporter en tant que ressource unique, et vous pouvez voir que je peux l'intégrer ici, puis l'exporter au format JP, PNG, PDF ou SVG ou même sur un Web P, ce qui est cool Illustrator possède donc une bonne fonctionnalité dans Figma. Tu peux faire la même chose. Vous n' exportez que lorsque vous sélectionnez une image. Cliquez avec le bouton gauche sur les images et faites-les simplement glisser et déposez-les comme ceci. N'oubliez pas que, comme vous pouvez le constater, le téléchargement est limité à 5 mégaoctets Vous devrez donc mettre à jour votre site ou réduire la taille des images. En général, j'utilise quelque chose comme Topaz Labs pour réduire la taille Vous pouvez donc voir que j' ai ces images. Un branchement rapide que j'aime utiliser s'appelle Tidy. Vous pouvez donc voir le rangement. Je vais cliquer dessus. Et si vous avez beaucoup d'icônes d'objets, de formes ou quelque chose comme ça, vous pouvez tout ranger Vous pouvez donc voir ce plugin ici. Vous pouvez le remplacer par une grille horizontale. Vous changez de position, vous faites l'écart, peut-être que je n'en ai pas 25 ou quelque chose comme ça, puis vous cliquez sur Trier, et vous pouvez voir que toutes ces images seront placées dans une belle forme horizontale ou si vous ne voulez pas l'horizontale, vous pouvez créer une grille, comme vous pouvez le voir, et cela changera facilement cela Cela le rend donc un peu plus net. C'est un plugin sympa que vous pouvez utiliser, qui est 4. Conception d'une page d'accueil: Eh bien, je vais donc commencer à créer le design que nous avons ici. Cliquez dessus, sur le dessin principal, descendez dans mon style de remplissage et cliquez sur les couleurs, comme vous pouvez le voir. Je vais passer à la mise en page. Et ce que je veux faire, c'est créer un cadre, comme vous pouvez le constater. Je compresse donc F, puis je le fais glisser et nous pouvons voir que nous avons un cadre. Et puis en haut à droite, j' ai mon outil d'alignement pour que je puisse le centrer pour m' assurer qu'il est centré. Et puis vous pouvez arrondir le coin comme vous pouvez le voir, il y a un petit truc blanc. Il en va de même pour une Figma illustrée. Tu peux juste l'arrondir comme ça. Ou si vous allez sur le côté droit de vos styles, où il est écrit rayon. Vous pouvez voir que je peux le modifier ici, ou je ne peux arrondir certains angles que si je le souhaite. Il suffit de l'arrondir ou peut-être d'environ 30 pixels. Ensuite, je vais changer la couleur pour cette couleur. Nous avons donc la base de notre design ici. Maintenant, dans ce cadre, je vais aller dans mon panneau de couches, vous pouvez voir que vous avez le bureau, puis nous avons le cadre. Ce que nous pouvons faire, c'est ajouter une pile. Vous pouvez donc cliquer avec le bouton droit de la souris ou utiliser le raccourci Ctrl Entrée pour ajouter une pile, ou vous pouvez ajouter un cadre. Une pile est donc essentiellement comme une boîte flexible. Vous pouvez le manipuler pour créer des colonnes, et c'est mieux pour un liger. C'est la même chose que la mise en page automatique, mais en termes Web, elle utilise évidemment le HTML et Flexbox pour ce faire Je vais donc ajouter une pile dans le cadre. Comme vous pouvez le constater, vous pouvez également glisser-déposer, cadres et des piles les uns dans les autres Et au sein de cette pile, je vais en faire une grille. Vous pouvez créer une grille avec deux colonnes et une seule ligne. Donc, sur le côté droit, allez du côté de la mise en page et vous pouvez simplement passer d'une grille à l'autre, comme vous pouvez le voir. Ensuite, je vais faire glisser mon image principale ici. Je vais le faire glisser comme ça dans cette pile, et il l'a déjà ajouté dans cette colonne. C'est ce que nous allons faire, je vais ajouter le logo. Je vais faire glisser le logo. Comme vous pouvez le constater, nous pouvons le réduire en le faisant glisser comme ça L'essentiel est que vous vouliez mettre les choses dans une pile pour que ce soit chouette Je vais donc appuyer sur Ctrl Enter pour ajouter une pile. Ce logo est dans une pile, maintenant nous pouvons le faire changer de position. Donc, en haut à droite, on peut ajuster la position. Quel que soit l'objet contenu dans cette pile, il ira à l'intérieur de cette boîte. Dans ce cas, nous avons deux colonnes. Donc, dans cette colonne sur le côté, cela va se déplacer à l'intérieur de celle-ci. Je vais donc déplacer la pile, comme vous pouvez le voir, nous pouvons la placer au centre ou sur le côté, et nous voulons nous assurer qu'elle n'est pas relative. Cela se rapporte donc à la grille mère. Ainsi, quels que soient les ajustements que nous apportons à la grille extérieure, cela ajustera le logo et images à l'intérieur de cette colonne ou de la pile. J'ai le logo. Maintenant, ce que je veux faire ajouter ces petits éléments clés E. Donc, vous pouvez appuyer sur T pour le texte complet afin d'ajouter du texte. Vous appuyez sur T, puis cliquez avec le bouton gauche de la souris et tapez, cela devrait l'ajouter. Et je vais mettre le texte en blanc parce que vous ne pouvez pas le voir pour le moment. Je vais juste le faire glisser dans la pile. Assurez-vous que les couches visibles se trouvent à l'intérieur de la pile, comme nous pouvons le voir, et que ce que vous voulez faire, c'est placer le logo sur le côté gauche. Ce que je suis prêt à faire, c'est que nous pouvons également dupliquer ce texte, donc nous allons obtenir ce texte. Je vais aller dans Illustrator et simplement le copier-coller car tout ce texte est dans une pile. Comme Figma, qui est une mise en page de commande, je peux littéralement ajuster le rembourrage et voir que je peux simplement le faire glisser, et il va ajuster ce Faites comme la taille 80. Je vais double-cliquer sur le logo pour le réduire. Et ce que je vais faire, c'est ajouter du rembourrage. Alors allez sur le côté droit, cliquez sur la mise en page, et nous avons le rembourrage Je vais ajouter du rembourrage sur le dessus, donc je veux cliquer sur le bouton que vous pouvez voir à côté de ces deux carrés L'un d'eux nous permet d' ajuster uniquement la taille en haut, en bas à gauche ou à droite. Donc, dans ce cas, je vais faire les 50 premiers pixels. C'est un peu trop. Peut-être que j'en ferai 25, ce qui est génial. Nous avons donc maintenant cette pile, qui est cool, la distribution de chaque texte. Donc, si vous commencez, cela l'amènera vers la gauche, si vous le centrez ou si vous le centrez, ou nous pouvons faire de l'espace entre les deux, de l' espace autour ou de l'espacer uniformément. ce qui est de la façon dont vous voulez le faire, dans ce cas je vais juste le laisser au centre, puis je vais contourner cet écart comme celui-ci. Vous pouvez donc voir l'espacement. Double-cliquez sur le texte pour le modifier. Assurez-vous donc de modifier le texte. C'est bon. Et ce que je vais faire, c'est passer aux styles, aux textiles, comme vous pouvez le voir, et j'ai mon titre enregistré. J'ai le titre, le sous-titre et le corps du texte, comme vous pouvez le voir Pour cela, je vais m' occuper du corps, et je dois ajuster le fil. Je peux donc réellement ajuster le style. Si vous passez ensuite dans les textiles, passez votre souris dessus et vous y verrez le bouton d' édition. Je vais cliquer dessus, et ce que nous pouvons faire, c'est ajuster la lettre. Je vais donc mettre la lettre zéro, pour ne pas ajuster le crénage Ensuite, l' interligne ou l'interligne, si vous êtes graphiste, vous pouvez voir que nous pouvons ajuster la ligne comme ça J'ai reçu ce texto, mais il ne ressemble pas exactement à ce que nous voulions. Je dois donc y aller. Je vais revenir aux styles, et je vais changer de couleur, pour que nous soyons sur la bonne couleur. Et si je voulais simplement personnaliser ce texte ici, le réduire un peu ? Donc, ce que nous pouvons faire, c'est créer un autre style à la volée en cliquant sur un nouveau style dans les textyles sur le côté droit, et nous pouvons dire paragraphe et corps petit, cliquez sur Modifier Si vous double-cliquez, vous devriez pouvoir le renommer comme nous pouvons le voir Je l'appellerai BiliSmall, cliquez sur Modifier, puis nous le réduirons Peut-être 18 et au lieu de la moyenne, nous passerons à la normale, peut-être 16 comme ça. Nous avons ce texte spécifique avec un corps petit et ce texte avec un corps. Donc, dans cette même zone de texte, nous avons deux styles différents qui fonctionnent. Il est donc très facile de faire ce boom, comme vous pouvez le constater. Donc, une fois que nous aurons notre section principale ici, je vais ajouter trois autres piles Donc, dans la pile principale, nous avons le logo. Nous avons le projet, et connectons-nous. Donc, dans celui-ci, je vais accéder à Layers et appuyer sur Control Enter. Pour créer une autre pile, je souhaite également faire de même pour les deux autres blocs de texte. Maintenant, dans cette pile, je vais juste y déposer du texte. Et ce que je veux faire, c'est faire en sorte que cette pile soit dans le sens vertical. Et je vais mettre ça au sommet, juste comme ça. Cool. Maintenant, nous pouvons voir que nous pouvons également combler l'écart. Mais d'abord, nous devons changer cette pile ici. Donc, pour la hauteur, je vais la remplacer par remplissage, et elle devrait remplir tout cet espace de ce côté de la pile principale. Maintenant, ce que je vais faire également, sélectionner cette pile. Désolé, je veux aligner sur le haut, et je vais aussi ajouter un peu de rembourrage à partir des 50 premiers pixels, et à partir de la gauche, nous passerons à 50 pixels, comme ça Ce que je vais faire, c'est maintenant si j'ajoute un espace, comme vous pouvez le voir, je fais simplement glisser le pointeur depuis le petit séparateur violet Maintenant, nous pouvons voir que ce texte est en train de descendre et nous avons cette belle colonne ici. Je vais aligner vers la gauche, donc sur le côté droit du panneau de mise en page, vous pouvez cliquer sur Aligner vers la gauche. Ce texte doit donc être placé à gauche de la boîte ou à gauche de la pile. Je vais maintenant changer le style de ce texte pour le sous-titre L'une des choses intéressantes, c'est que vous pouvez cliquer sur une pile dans le panneau des couches et vous pouvez également copier le style. Vous pouvez copier le CSS, les effets, etc. Vous pouvez donc tout copier et le coller dans une autre pile. Donc, si je le colle ici, vous pouvez voir qu'il reproduit le même effet que celui que j' ai déjà créé dans cette autre pile, et je le ferai également pour l' autre Donc, coller va passer au style de collage. Il existe un CV de contrôle en mode raccourci. Et permettez-moi d'y coller ce texte. Et maintenant, vous pouvez voir que nous avons cet effet. Vous pouvez également faire glisser le pointeur comme ceci et vous pouvez voir que vous n'êtes pas obligé de le faire dans le panneau des calques, faites-le. Tellement cool. Nous avons maintenant les trois colonnes, et tout devrait être aligné. Évidemment, il y a le logo dedans, donc l'alignement sera un peu décalé. Donc, ce que nous pouvons faire, c'est créer une autre pile ou une autre boîte, et nous pouvons définir et je vais juste l' aligner sur la boîte. Ça devrait être une ligne maintenant. ce que je veux faire, c'est pour les projets, je veux créer une fenêtre contextuelle dans laquelle, lorsque vous placez votre souris dessus, une partie du projet sera affichée, et lorsque vous cliquerez dessus sous forme de lien, vous serez redirigé vers le projet P. Je vais donc en faire une autre pile ici. Alors contrôlez-le Enter. Et vous pouvez voir que l' alignement le place au centre. Il suffit de le distribuer et de le distribuer, changer pour démarrer, afin qu'il commence au début de la pile. Laisse-moi juste le copier. Et excuse-le, fais-en une verticale, et ensuite on pourra l'aligner vers la gauche. Et ce texte, je vais le remplacer par un style corporel normal. Et pour celui-ci, je vais l'appeler Sensor Pages dans le cadre de mes projets. Maintenant, ce que je peux réellement faire, c'est dans les couches, vous pouvez le voir, ce n'est qu'un texte. Mais ce que nous pouvons faire maintenant, c'est en faire un lien. Je vais donc aller dans le coin supérieur droit et cliquer sur le lien plus, et nous pouvons le mettre dans une page. Parce que tu n'as pas cette page, je vais y aller 5. Interactions et effets: Sur cette diapositive, je vais vous montrer rapidement comment ajouter des interactions et des animations au site pour le rendre fluide Mais nous l'avons. Maintenant, ce que je veux faire, c'est ajouter un effet de superposition Je vais donc passer aux superpositions, et je vais cliquer sur relatif, vous pouvez voir, c'est une fenêtre contextuelle. Je vais cliquer dessus. Et ce que vous pouvez faire, c'est que sur cette superposition, je vais aller sur le côté droit, et je veux en faire une image Je vais donc cliquer sur le bouton de remplissage, au lieu du remplissage, vous pouvez évidemment faire des dégradés. Vous pouvez y faire des trucs sympas, mais je vais cliquer sur l'image. Et puis je vais trouver l'image de mon projet comme celle-ci, ce qui est cool. Nous avons les coins arrondis et ce que nous pouvons réellement faire. Maintenant, si je le teste rapidement, vous pouvez voir ce texte lorsque je passe ma souris dessus, cette image va apparaître, ce qui est cool. De plus, ce texte, comme le lien texte n'a pas de style, je vais cliquer sur le lien. Allez en haut de la section des liens, cliquez sur Modifier, sur le style du lien et nous pouvons le modifier. Je veux donc y aller, nous pourrions le rendre vert. Je vais également m'en tenir à la couleur claire , car c'est la couleur du texte que nous voulons. Nous ne voulons pas de soulignement parce que je trouve cela de mauvais goût Mais sur Hova, nous pouvons le rendre vert et je pense que c'est tout Si j'appuie sur Play, vous pouvez voir à quoi cela ressemble. Cool. Le texte est modifié, puis je peux toujours revenir en arrière et le modifier puis faire la transition, le rendre plus facile à saisir et à sortir. Retournons en arrière. Très lisse. Boum. Cool. Nous pouvons également ajouter un effet Hover. Si vous allez dans le panneau Effets, cliquez dessus avec le bouton gauche de la souris. Tu vas voir Hover. Je peux cliquer sur Hover, et ce que nous pouvons réellement faire, c'est que vous pouvez modifier l'échelle, vous pouvez modifier l'opacité C'est vraiment à vous de décider ce que vous voulez faire. Vous pouvez le faire pivoter, vous pouvez également l'incliner Si tu veux. Vous pouvez donc jouer avec n'importe lequel d'entre eux. Tu peux le compenser. Vous pouvez ajouter une ombre, et vous pouvez également modifier l'atténuation. Donc, au lieu du printemps, j'aime me détendre, puis vous pouvez jouer avec ces barres pour les rendre un peu plus fluides. Vous pouvez vraiment modifier le délai comme bon vous semble. Je vais peut-être faire une rotation de, disons, moins deux. Et maintenant, si j'appuie sur le bouton de prévisualisation et que je place ma souris ici, vous pouvez voir qu'il fait une petite rotation. Il produit l'effet Ha Glow, puis l'image apparaît également. Donc, lorsque je clique dessus , je vais accéder à la page de mon portfolio, comme vous pouvez le voir. Évidemment, je ne l'ai pas encore stylisé, mais c'est ainsi que vous allez procéder Et maintenant, il ne nous reste plus qu'à le dupliquer, pour pouvoir l'appeler, vous savez, Keystone scalable Vous pouvez donc avoir d'autres projets que je devrai intégrer au CMS. Maintenant, ce qui est cool avec Framer, c'est que vous pouvez empiler les effets les uns sur les autres, donc je peux ajouter un autre effet Vous pouvez ajouter des boucles, faire glisser, appuyer. Tu sais, tu peux faire tout un tas de choses. Je vais revenir à la superposition, et je veux cliquer sur la superposition, et vous verrez que nous pouvons réellement en changer la position Je peux donc le déplacer et le faire pivoter. Si je place une souris dans le coin, nous pouvons le faire pivoter, alors peut-être que vous voulez qu'il ressemble à ça. Si je vais le prévisualiser, maintenant je mets ma souris dessus, vous pouvez voir qu'il a un aspect différent de celui d'avant. Il sort sur le côté, alors que ceux-ci apparaissent simplement en dessous. C'est ainsi que vous personnalisez l'apparence de cette fenêtre contextuelle. Et puis, évidemment, la superposition a un effet d' apparence sur elle, donc vous pouvez voir l'effet s'estomper, ou elle peut être redimensionnée, vous savez, nous pouvons modifier l' opacité, la Je veux remplacer le ressort par l' assouplissement et nous pouvons le personnaliser pour assouplissement et nous pouvons faciliter l'entrée , la sortie ou la rentrée. Mais je peux entrer et sortir facilement, c'est bien. L c'est lisse et ça marche. Entrez facilement. Cool. Alors laisse-moi juste retourner jouer. Tu peux voir. Vous pouvez voir comment il zoome un peu lentement, comme s'il avait cet effet d'échelle On dirait que c'est un peu lent pour moi. Donc, ce que nous pouvons faire, c'est mettre le temps à zéro. Allons-y 2 secondes, puis je ferai de même pour la sortie. OK, donc celui-ci est également de 0,2. Alors revenons en arrière. C'est donc un peu plus rapide. Super cool. J'adore ça. Vous pouvez donc avoir des hélas différents pour chacun d'entre eux. Hé, tout ce que tu as à faire c'est entrer dans chacune de ces superpositions et de changer l'image Et encore une fois, vous pouvez toujours simplement copier l'effet. Donc, si je vais copier des effets, cliquez avec le bouton droit sur l'autre, puis je passe à l'autre superposition, cliquez dessus avec le bouton droit de la souris, et nous voulons coller les effets Il copiera donc les mêmes effets, donc je n'ai pas à recommencer l'assouplissement. Alors, boum, boum et boum. Vous pouvez donc voir que c'est un peu bogué. De toute évidence, sur le site publié, ce ne serait pas aussi bogué. Boum, boum. Ceux-ci n'ont pas le survol. Cela, il faut l'ajouter. Cool. Et c'est ainsi que vous ajoutez ce petit effet. Il ajoute simplement ces petits détails à votre site Web. L'ajout d'animations petites interactions peut faire une très grande différence. ne vous reste plus qu' à copier ce texte ou ces piles dans les autres colonnes, puis à le personnaliser comme vous le souhaitez Nous avons donc fait quelques petites interactions. Pourquoi ne pas ajouter des animations à l'image globale ? Ce que nous pouvons réellement faire, c' est sélectionner le cadre principal. Et je vais passer aux effets, et je veux faire des relations publiques. Ainsi, sur un P, vous pouvez le faire sur un P lors du défilement, couche dans la vue ou d'une section dans la vue. Donc, si vous faites défiler la page et que cela s'affiche, quelque chose se produira, et une action ou un déclencheur aura lieu Nous voulons que vous puissiez voir qu'il peut s'estomper. Je peux glisser. Je vais faire glisser le curseur depuis le bas juste pour vous montrer l'effet. Et je voudrais faire un peu d'assouplissement, mais peut-être que nous devrions accentuer un peu plus cette courbe de cette façon Et le temps suffira peut-être 3 secondes. Ensuite, je vais appuyer sur Play. Maintenant, vous pouvez le voir se charger, c'est un peu rapide, alors ralentissons-le un Nous allons revenir à l'assouplissement, et nous allons passer à 0,5 seconde. Vous pouvez également ajouter un petit délai, donc si j'ajoute 1 seconde de délai. Le temps correspond donc à la durée de l'animation, exemple au temps qu'il faut pour terminer l' animation. Ensuite, le délai est un délai avant le début de l'animation ou de l'effet. Maintenant, si nous revenons à l'aperçu, vous pouvez voir que c'est beaucoup plus lent, mais le tout glisse vers le haut depuis le bas. Un effet assez simple, mais ça le rend juste beaucoup plus cool. Ensuite, nous pouvons continuer et ajouter des effets à n'importe laquelle des piles Je peux donc sélectionner la pile, passer à l'effet, et nous pouvons refaire un P. Et je vais copier l'effet de cadre. N'oubliez pas de cliquer avec le bouton droit de la souris sur Copier et de copier les effets. Ensuite, je vais simplement les ajouter aux piles, afin que nous puissions coller les effets Je vais coller des effets et coller des effets. Maintenant, quand nous jouons, boum, vous pouvez tous les voir apparaître. Mais ce que je veux faire, c'est ajouter un peu de retard sur les piles, puis ralentir un peu Je vais donc passer à la transition. Celui-ci peut avoir un délai de deux secondes, celui-ci, peut-être 3 secondes, comme vous pouvez le voir, c'est différent et celui-ci peut-être 4 secondes. Je vais cliquer sur Prey. Et juste comme ça, c'est vraiment facile boum, boum et boum. Cool. J'adore ça. Ça a l'air super. Ils vont bien. Nous pouvons donc également ajouter quelque chose à l'image, et nous allons personnaliser tout cela. Je vais donc mettre à jour tout ce texte, puis nous allons travailler à la finalisation de ce portfolio. 6. Collection de CMS: Les pages et cliquez sur Plus. Et ce que nous voulons faire, c'est créer une nouvelle page CMS. Je vais cliquer sur Ajouter un échantillon, et la création du CMS devrait commencer. Et c'est là que nous allons placer tous les projets de notre portefeuille. Ainsi, lorsque nous ajoutons simplement les données dans le CMS, nous remplissons automatiquement une page avec ce nouveau projet. Je vais donc cliquer sur celui-ci, et nous pouvons voir tous les détails sur cette droite. Vous avez le titre, le slug, qui fait partie de l'URL, la date, l'image, les catégories et le contenu Nous pouvons évidemment modifier cette collection CMS. Modifiez les champs en allant en haut. Il y a un bouton, une petite flèche. Cliquez dessus et nous pouvons réellement modifier ces champs, comme vous pouvez le voir, pour les rendre obligatoires. Vous pouvez modifier l'espace réservé. Vous pouvez en faire une zone de texte. Vous pouvez donc ajuster toutes ces différentes catégories. Vous pouvez également cliquer sur ce petit bouton en forme de plus en haut pour ajouter des champs. Il peut donc s'agir de texte brut, d'une galerie, d'une bascule, d'un numéro, d'un fichier Vous pouvez également faire référence à d'autres articles. Mais je ne veux pas entrer trop en profondeur. Pour l'instant, je vais cliquer sur Commencer et nous appellerons cela Sense Pay. Je vais cliquer sur cette image ici et nous allons la modifier. Modifie également les textes. Je vais me débarrasser de ce texte, puis afficher sur le site. J'ai donc un clic sur Publier sur le côté droit, c'est très bien. Maintenant, nous avons un CMS, et je vais double-cliquer sur la collection de gauche et l' appeler portfolio. Catégorie également. Nous n'avons pas à nous inquiéter. Je peux juste continuer et supprimer ceci. Comme il est utilisé dans certaines de ces applications, il ne sera pas supprimé pour le moment, mais nous pouvons simplement le laisser. Maintenant, si je reviens en arrière, vous pouvez voir à quoi ressemble réellement la page du blog du portfolio. Nous pouvons donc l'appeler portefeuille. Hein ? Il s'agit donc d'une page CMS. Et comme vous pouvez le constater, lorsque vous cliquez sur la page, c'est ce qu'elle souhaite. Nous devons donc personnaliser le design et le faire ressembler à ceci. Mais je vais retourner à la page d'accueil. Maintenant, ce que nous voulons faire, c'est revenir au lien, et nous pouvons mettre le lien vers le portfolio et le slug Je vais accéder au CEnSAP Comme vous pouvez le voir, vous cliquez sur ce slug pour accéder à tous les éléments du portfolio que vous avez créés dans cette collection Je peux donc cliquer sur celui du CenSAP, ce qui est cool. Ce que je veux faire, c'est, eh bien, vous pouvez voir que le texte est coupé. Ce que nous pouvons faire, c'est ajouter une hauteur minimale. Je vais donc y aller, Min Max. C'est écrit ici. Cliquez sur ce bouton. Nous allons cliquer sur la hauteur minimale. La hauteur minimale doit être d'au moins 25 pixels. C'est donc le minimum que cette zone de texte peut contenir, et c'est ainsi que vous évitez les problèmes liés évolution des choses. Par exemple, si vous passez au mobile, vous vous assurez qu'elle est lisible afin qu'elle reste à cette taille, la taille minimale Si vous optez pour la taille maximale, taille du texte ou de l'image contenue dans cette statistique sera limitée . 7. Conception de page de portfolio: Dans cette leçon, nous allons créer la page d' accueil de notre projet l'aide des fonctionnalités du CMS de Framer Nous avons donc notre page d'accueil, exactement à quoi elle ressemble. Nous allons maintenant passer au portfolio. Donc, si vous cliquez sur la page principale du portfolio, il s'agit de la collection CMS. Vous pouvez donc voir le texte ici. C'est juste un blog normal, mais nous n'essayons pas de créer un blog, nous voulons juste des pages de portfolio. Je vais donc cliquer sur le portfolio 2. Vous voyez, l'icône ressemblera à ce genre de pile de pièces. C'est la collection CMS. Mais cette page est le paiement de Sensei, et en haut à gauche, vous pouvez voir dans la section des pages, en haut, vous pouvez voir qu'il est écrit CenSep. Si je clique sur ce lien et que je clique sur Keystone, passerai à l' autre Donc, pour accéder au CMS, vous devez aller dans le menu supérieur à côté du texte et vous connecter, vous devez cliquer sur CMS. Et nous avons deux entrées ici. Nous avons le projet Sensei Pay, puis celui de Keystone. Et nous pouvons en ajouter d'autres. Fw, nous allons simplement conserver les deux projets. Je vais y retourner, et une fois que nous aurons apporté une modification à la conception de la page dans le CMS, elle s'appliquera au même design et à la même couche sur tous les autres nouveaux projets que nous ajouterons. Je vais aller ici et commencer à concevoir. Il se peut donc que je doive créer de nouveaux styles. Je vais créer un nouveau style. Ce H est foncé, donc je vais prendre un H, mais je l'appellerai H un blanc. Et puis pour celui-ci, je vais changer de couleur comme ça. Pour les autres, on peut utiliser les autres styles. Mais nous devons faire le design comme celui-ci. Je vais aller sur la page d'accueil, et je peux effectivement copier le cadre. Je vais donc passer à mes couches. Je vais copier ce cadre. Je vais donc juste prendre cette pile et la mettre dans le cadre. Nous avons donc cette couche de cadre de base, comme vous pouvez le voir. Donc, si vous souhaitez modifier le texte avant de mettre à jour la mise en page, vous pouvez double-cliquer pour accéder à la collection CMS ouverte dans la barre latérale droite, et nous pouvons personnaliser le texte ici. Hum, et si vous appuyez sur Inside, vous pouvez voir que cela sera mis à jour. De toute évidence, l'essentiel est de simplement mettre à jour dans le CMS au lieu de le faire directement sur la page, puis cela affectera ces modifications, vous pourrez donc modifier les images, etc. Je vais juste ajuster cette pile, et je vais la faire glisser utilisant simplement les cases, pour que les choses restent très simples. Maintenant, nous avons cette image haut du dessin, et nous ne voulons pas que le bas soit arrondi. Donc, pour cette image, je vais aller dans le rayon et cliquer sur les quatre petites lignes et uniquement en haut à gauche et en haut à droite. Donc je pense que c'est environ 25 ans, je crois. Donc, comme il est déjà dans le cadre, nous n'avons même pas besoin de l'arrondir. Vous pouvez le voir et ce fond est un peu plat, ce qui est génial. Maintenant, ce que je vais faire, c'est que nous n'avons même pas besoin de ce texte. Je peux simplement le supprimer , comme vous pouvez le voir. Et maintenant que ce paragraphe est en tête, c'est trop, donc je vais devoir passer à un nouveau style, body body medium, et nous allons simplement sélectionner la couleur de la lumière. Je vais augmenter la taille. Passons à 20 lettres zéro et interligne. Nous allons peut-être passer à zéro, 1,4. Paragraphe, on peut le laisser. Et maintenant, je peux également supprimer ce portfolio. Je ne veux pas ça là-dedans. Et maintenant, ce que nous voulons faire c'est mettre ce contenu dans cette pile ici. Et puis cette pile, nous voulons sélectionner la pile et la ligne à gauche. Nous allons également aligner le texte sur le titre, puis sur la date. Nous descendons donc le texte et cliquons sur une ligne, qui devrait tout aligner vers la gauche. Nous pouvons voir qu'il y a une pile en bas si vous le souhaitez. Par exemple, si nous cliquons sur ce bouton ici, nous vous redirigerons vers le projet suivant, comme vous pouvez le voir. Ils nous l'ont donc déjà donné. Pour l'instant, je vais juste... je veux juste réduire l' opacité, la laisser là pour le moment, ou nous pourrions simplement la supprimer Maintenant, ce que je veux faire, c'est simplement faire glisser cette boîte, et maintenant nous avons ce truc sur le côté. Nous devons créer une nouvelle pile pour le titre et la date. Et nous allons passer à l'espace entre les deux. Cela va donc créer un écart entre ceci et la date. Et nous allons aligner cette mise en page vers le bas. Et maintenant, vous pouvez voir que c'est en bas, puis nous voulons modifier la croissance. Au lieu de la hauteur automatique, nous pouvons la changer en largeur automatique, et elle se trouve sur le côté droit de cette boîte ou de cette pile, désolée. Nous avons donc obtenu la date. Je crois que la date était grande, donc je vois que la taille est 44. Je vais juste me débarrasser des styles qui y trouvent, puis nous allons les personnaliser. Passons à 40 et à la couleur claire. Je vais passer à la deuxième section de notre page de portfolio. Maintenant, ce que je vais faire d'abord c'est sélectionner la pile de héros, Control C et Control Vita la coller. Ensuite, je vais créer une nouvelle pile en appuyant sur Control Shift, Control Alt et Enter. Et je vais également faire glisser cette section dans la pile. Et cette pile, nous allons nous assurer qu'elle est verticale, puis l'écart peut être de 25 pixels, donc il y a un espace entre les deux. Et évidemment, vous pouvez ajuster l'écart pour l'augmenter. Je vais renommer la deuxième pile en galerie, et je vais simplement supprimer le texte ici parce que nous n'avons pas besoin d'aller le texte ici parce que nous n'avons pas besoin d' mon CMS et d'aller dans Modifier les champs Maintenant, ce que j'ai fait ici, c'est que j'ai ajouté deux galeries Vous pouvez donc appuyer sur le bouton plus et ajouter une galerie ou simplement des images simples. Maintenant, la raison pour laquelle j' ajoute deux galeries est que lorsque vous ajoutez une galerie, vous ne pouvez pas faire les deux colonnes. Vous ne pouvez pas répartir l'image sur deux colonnes. C'est pourquoi je fais deux galeries. Tout ce que vous allez faire est de télécharger vos images. Il vous suffit donc de choisir l'image et de la télécharger J' ai donc ces deux images ici, puis la galerie deux sera là. Mais si vous souhaitez renommer le champ, il vous suffit d'accéder aux champs et de le renommer ici Voyez ce que deux galeries disent deux charbons pour deux colonnes. Ensuite, je vais retourner à notre pile ici. Et je vais aller en haut à droite et cliquer sur Ajouter du contenu. Donc, pour tous les champs que vous avez créés dans ce CMS, nous avons la galerie d'images un et la galerie deux, comme vous pouvez le voir, puis les autres sections. Je vais donc aller de l'avant et faire glisser la galerie dans cette pile. Et vous pouvez voir que ces images apparaissent déjà depuis notre CMS, car nous les avons déjà téléchargées dans notre collection ici. Il s'agit donc simplement d'extraire les images de cette collection. Nous l'avons. Maintenant, sur le côté droit, vous pouvez voir deux colonnes. Vous pouvez voir que je peux le remplacer une ou deux colonnes comme celle-ci, mais vous ne pouvez pas avoir plusieurs lignes. Cela ne fonctionne tout simplement pas pour le moment. Comme vous pouvez le constater, vous pouvez effectuer une correction automatique. Vous pouvez également créer une largeur fixe pour, vous savez, la mise en page avancée, mais cela ne vous donne tout simplement pas cette option. Donc, ce que je fais habituellement c'est d'avoir les deux colonnes pour cela. Et comme notre design comporte deux colonnes, puis une colonne s'étend sur les deux, il est nécessaire d'avoir les deux galeries Mais à l'avenir, ils le mettront probablement à jour. Je vais à nouveau accéder à Ajouter du contenu, et je vais faire glisser la colonne deux, juste en dessous de l'autre, comme vous pouvez le voir, et la placer en dessous. Je vais juste le mettre dedans. Je vais sélectionner la pile supérieure et la rendre verticale. Je vais simplement agrandir le cadre principal, comme vous pouvez le voir, puis nous en aurons le design. Et évidemment, je peux aller dans la galerie, et vous pouvez voir que nous n'avons qu'une seule colonne. Ensuite, je peux accéder à l' image et je peux la modifier pour l' adapter , l'étirer ou la mosaïquer. Évidemment, le remplissage fonctionne généralement, et j'ai juste besoin de changer la hauteur pour le déverrouiller, et nous voulons nous assurer que vous pouvez voir que la hauteur est une hauteur personnalisée. Je veux donc simplement changer cela, comme vous pouvez le voir. Je voulais juste en dire plus sur ce point. Maintenant, ce que nous pouvons faire si nous allons dans le CMS et disons, vous savez, que nous mettons à jour d'autres images, par exemple, si vous modifiez ces images, elles seront rechargées et téléchargées ici, comme vous pouvez le voir Je vais également réduire l'écart ici à 25 pixels, ainsi que l'écart sur le cadre principal. Nous aurons ainsi tout l'espace qui ressemble à ceci, le CMS. Maintenant, si nous allons sur une autre page comme Keystone, vous pouvez également voir la même chose Et si vous allez sur une autre page, vous pouvez voir que si vous n'avez rien dans le CMS, il ne se chargera pas correctement. Donc, si je reviens au CMS, passe au format évolutif, n'oubliez pas de vous assurer de télécharger vos images. Maintenant, par exemple, si nous ajoutons une seule image dans cette galerie et que j'y retourne, vous pouvez voir qu'elle ne remplira que cet espace, cette colonne parce que nous n'avons pas les autres images. Assurez-vous donc, lorsque vous définissez une certaine limite, de télécharger la bonne quantité, afin qu'elle corresponde à l'espace pour lequel vous concevez. Maintenant, si je reviens juste en arrière, vous pouvez voir qu'il occupe cet espace maintenant Et c'est ainsi que vous créez cette section de galerie avec le CMS. 8. Pied de page: Et je peux littéralement copier cette pile, et elle devrait être collée ci-dessous. Cool. J'ai mon logo ici. Doux. Je veux ajouter un bouton, donc je vais simplement créer une nouvelle pile, et il vaut mieux créer un bouton en utilisant une pile. Vous pouvez utiliser la section de boutons prédéfinie, mais ce n'est pas la meilleure solution lorsque vous souhaitez personnaliser quelque chose. Je vais donc appeler ce livre de boutons « core dans mon panneau de couches. Ensuite, nous pouvons passer au remplissage et le changer en dégradé. Et puis pour cela, je vais cliquer sur le point et celui-ci pourra alors rencontrer la lumière. Alors ce sera comme ça. Et ce bouton, la largeur, nous allons le faire autour de 200 pixels, puis 100, comme ce rayon pour arrondir les coins, sera de 20 Appuyez sur l'outil de saisie, réservez un appel, et nous voulons que nous puissions atteindre 25 pixels. Changez-le en couleur foncée, changez-le en figuier et passez à la couleur moyenne. Peut-être que nous passerons à moitié en gras et que nous pourrons arrondir le tout, et voilà à quoi ça ressemble. Oups. Ajustez un bouton comme ça. Cool. J'ai donc obtenu ce bouton, et maintenant, ce que je veux faire, c'est changer la direction en horizontale. Je veux le mettre dans cette pile ici. Donc celui-ci est horizontal. La pile principale peut être verticale. Celui-ci sera horizontal. Débarrasse-toi de cette pile. Certains éléments renfermaient les choses en l'air. Je vais vérifier vos couches parce que certaines choses vont être foirées. De là, ligne vers le bas, mettez peut-être 50 pixels en bas, à gauche, nous en avons 50. Et c'est vrai, nous en aurons 50. Nous venons donc d'ajouter du rembourrage à l'intérieur de cette pile. Comme vous pouvez le voir, je peux peut-être le réduire un peu. Cool. Nous avons donc créé cet élément ici. Évidemment, le rembourrage ne l'est pas exactement, mais c'est très bien. Ensuite, nous pouvons simplement ajouter I'll stack. Je vais donc simplement revenir à la page d'accueil, et je peux simplement copier l'une de ces piles ici, coller dans la pile principale comme ceci Super cool. Et je veux m'assurer que j'ai également le même rembourrage Donc je crois que c'était 50. Nous pouvons le réduire. Nous pouvons également ajuster la largeur qui sera fixée. Nous allons donc y aller, à ce sujet. Ensuite, je vais le mettre dans une autre pile. Cette pile sera horizontale. Ensuite, nous pouvons coller des cerceaux, coller ces trois piles, puis sélectionner la pile principale dans puis sélectionner la pile principale laquelle je viens de placer ces trois piles, et nous voulons modifier la distribution par le début pour la ramener vers la gauche Et maintenant, c'est ce que nous avons. Et oui, nous avons donc le pied de page. Maintenant, je veux appuyer sur Play. J'ai une partie du texte pleine. C'est très bien Mais nous avons notre page maintenant, puis le bouton. Ce que nous voulons faire, c'est cliquer sur le lien en haut, puis, vous savez, cela peut accéder au lien macaw ou à la page d'accueil ou autre. Il peut donc accéder à la page d'accueil, par exemple. Et nous pouvons ajouter des animations comme nous le faisions auparavant. Vous pouvez voir les liens ajoutés ici. Celui-ci va sur Instagram, et celui-ci va à ma vache lorsque je clique sur ces petits liens texte. Vous pouvez donc littéralement créer un lien à partir de texte, n'importe quoi en fait. Une fois que vous aurez terminé votre pied de page, je vais vous montrer comment créer un composant Un composant est un moyen rapide de créer des objets, des boutons, des objets récurrents que vous utilisez plusieurs fois. Vous pouvez donc modéliser des choses. C'est à ce moment-là que vous devez créer un composant. Ainsi, par exemple, je vais sélectionner ma pile de pieds de page principale. Vous pouvez cliquer dessus avec le bouton droit de la souris et créer un composant. Le raccourci est également Control Old K. Mais nous voulons cliquer sur Créer un composant, et nous voulons simplement appeler le pied de page principal ou quelque chose de simple sous lequel vous pouvez vous en souvenir Et maintenant, nous avons un composant ici. Nous avons également cette variante, qui est la variante téléphone, comme vous pouvez le voir, et une variante n'est qu' un composant secondaire vous pouvez passer au cas où, par exemple, sur un téléphone, il sera d'une taille différente. Alors peut-être souhaitez-vous créer une version différente, ou peut-être souhaitez-vous avoir un mode sombre. Donc, si je clique sur ce composant, je peux descendre ici. Et je peux créer une version Ha Ha ou une version pressée. Vous pouvez donc voir sur le nom qu'il indiquera Ha, et peut-être que certains auront une faible opacité ou quelque chose Et nous pouvons également personnaliser et créer d'autres variantes. Donc, si vous allez vers la droite, vous pouvez voir que vous pouvez créer une autre variante. Donc, cette variante peut peut-être avoir, juste le logo en lui-même. Et nous pouvons appeler cette variante trois ou nous pouvons la renommer autrement. Nous pouvons l'appeler variante trois, logo. La variante téléphonique, ce serait génial pour un téléphone. Ce que nous voulons faire, c'est le réduire. Disons peut-être 450 pixels. C'est évidemment petit, il suffit passer à 550 pour l'instant juste pour montrer un exemple. Ce que nous voulons faire, c' est tout réduire et nous devrons peut-être faire passer la pile à la verticale, modifier l'alignement, puis créer l'espacement, modifier légèrement l'écart Et nous devrions avoir quelque chose comme ça. Je peux également changer le rembourrage. Je peux diminuer la taille. Je pense qu'en fait, nous sommes en train de nous aligner au milieu comme ça. Ensuite, pour celles-ci, il s'agit de trois piles distinctes, nous voulons passer à la votical, puis nous voulons augmenter ce chiffre, mais augmentons simplement la taille globale C'est ce que nous allons faire. Ensuite, nous allons le supprimer. Et puis si vous remarquez que des objets sont cassés, par exemple, comme si cette pile devait être alignée. Je vais donc m'assurer que cette pile est une ligne. Je vais donc le modifier pour le remplir. La taille remplira donc l'espace de largeur, comme vous pouvez le voir ci-dessous. Et je veux aussi m'assurer que je vais sélectionner une pile dans cette variante, puis simplement augmenter l'écart de cette façon. Cool. Et maintenant, nous avons cette variante de téléphone. Nous en avons un duplicata. Je vais juste le supprimer. Je vais donc double-cliquer sur le titre et l'appeler Téléphone. Maintenant, nous avons l' ordinateur de bureau principal, nous avons le téléphone, puis nous avons cet autre. Alors maintenant, si je vais sur la page du portfolio, et que je passe à la section téléphone ici, vous pouvez voir que celui-ci utilise la variante de bureau. Si vous allez sur le côté droit, vous pouvez voir un composant sera surligné en violet, et vous pouvez voir que je peux aller ici et sélectionner la variante du téléphone et il devrait utiliser celle-ci. Vous avez donc cette variante. Ainsi, par exemple, si je vais sur le bureau et que je choisis cette variante, sur le bureau et que je choisis cette variante, celle-ci ne comportera que le logo, et si je choisis celle du téléphone, elle fera celle du téléphone. Et de toute évidence, à l'heure actuelle, il ne s'adapte pas correctement. Je dois donc m'assurer que cela fonctionne correctement. Je peux donc toujours revenir en arrière pour modifier la variante et m'assurer que vous pouvez voir que tout est réglé sur corrigé. Donc je vais juste tout mettre en place. Cela doit être relatif, relatif, relatif, puis celui-ci doit également être rempli et rempli. OK, cool. Alors maintenant, si j'y retourne, oui, ça devrait fonctionner correctement. Et je réduis simplement la taille de ce logo, et vous pourrez le voir se mettre à jour. Partout où se trouve ce composant , il va le mettre à jour. Il est plus facile de modifier les variantes if, et je recommande de créer des variantes. Ensuite, si vous voulez y accéder, vous allez dans les ressources, puis vous avez les composants ici, comme vous pouvez le voir, disons, par exemple, le pied de page principal, et il y a aussi un bouton de téléchargement que Freema possède automatiquement, et vous le glissez et déposez comme ceci, vous pouvez le placer n'importe où, même sur la page d'accueil ou où vous le Si vous voulez le mettre quelque part, nous pouvons le faire également. 9. Conception réactive pour les mobiles: X. Petit cours, je vais vous montrer comment rendre votre site responsive. Nous avons notre page d'accueil. Maintenant. Ce que nous pouvons faire, c'est ajouter un point d'arrêt et nous allons simplement utiliser le téléphone 390 de base Maintenant, vous pouvez voir que ce n'est pas ce que nous aimerions voir. Le texte est en train de disparaître de la page. Donc, ce que nous devons faire, c'est changer la direction de la pile en direction verticale, pour qu'elle soit empilée une par une comme ceci au lieu de l'empiler horizontalement Ce que je vais faire, c'est passer en revue les couches et garder à l'esprit modification que vous apportez au point d'arrêt du téléphone ou au point d'arrêt la tablette n'affectera pas le point d'arrêt du bureau C'est pourquoi je commence toujours par ordinateur de bureau , puis par le téléphone plus tard. Parce qu'il y aura différents changements. Et généralement, lorsque vous apportez une modification sur un ordinateur de bureau, elle se répercute automatiquement sur la tablette et le téléphone. Je vais sélectionner la pile principale, et nous allons la changer en verticale. Vous pouvez donc voir que tout est inversé. Vous pouvez également déplacer le téléphone. Vous pouvez le déplacer vers le bas sur le côté, afin que nous puissions le déplacer. Vous pouvez également maintenir les touches Alt et Shift enfoncées, et cela se dupliquera, ce qui est une autre astuce intéressante. Ajustez le cadre, introduisez-le, comme vous pouvez le voir. Ensuite, je dois également changer les autres piles. Cette pile doit donc être verticale. Euh, il y en a déjà un qui est vertical et celui-ci, un emballage de texte vertical, et je vais juste augmenter la taille Le cadre global, je vais devoir passer à ce cadre, je vais devoir l'agrandir comme ça. Toute cette image correspond à cette section. Si tu veux régler le téléphone, je vais peut-être choisir 450, l' agrandir un peu, le changer 10. Édition: Maintenant, dans cette section, je vais vous montrer comment faire du référencement et publier votre site Web afin que vous puissiez le rendre opérationnel dans le monde entier. Une fois que vous avez terminé, vous pouvez accéder à la page d'accueil ou au portfolio, puis cliquer sur Paramètres. Et dans les paramètres, vous pouvez voir que vous souhaitez ajuster cela avant de publier, afin que le référencement dans Google et quel que soit le navigateur utilisé par les utilisateurs soit correct. Nous pouvons donc parler du portfolio de Mirror et de l'URL, que nous pouvons laisser car il est connecté au CMS. Si vous souhaitez afficher des pages dans les moteurs de recherche, nous allons cocher cette case. un aperçu de ce à quoi cela ressemblera dans le moteur de recherche utilisé par les utilisateurs , alors vous voulez un aperçu social. 1 200 x 30 pixels. D'habitude, je me contente de me lancer dans Illustrator, créer un plan de travail, 1 200 x 630, par exemple, je peux simplement vérifier comme une image Ce que je veux, vraiment. Vous pouvez créer n'importe quel type d'image. Je vais juste l'enregistrer pour que vous puissiez voir les paramètres. Sauvegardez-le au format JPEG à 100 %. 90 % de qualité, c'est bien. Il suffit de le sauvegarder. Et voilà. Faites-le en 2 secondes. Donc, chaque fois que vous partagez ce lien sur les réseaux sociaux, cette image sera chargée Vous savez donc comment les gens obtiennent l'image lorsque vous la téléchargez. Et c'est en gros ça. Ensuite, je vais cliquer sur Enregistrer. Et puis assurez-vous de le faire pour chaque page. Donc aussi la page d'accueil. Vous voulez changer votre OL, une fois cela fait, vous pouvez faire en sorte que Framer vous donne un domaine gratuit Comme vous pouvez le voir, voici l'URL, quelle serait. Vous pouvez évidemment le modifier. Ici, disons Jeremy Mirror, concevez pour le moment et appuyez sur Entrée, et le site Web sera le suivant. Donc, le domaine personnalisé, évidemment, si vous souhaitez mettre à jour un domaine, vous devez en acheter un. J'utilise généralement Go Daddy. Ou un nom bon marché. Vous avez donc un nom bon marché. Les domaines bon marché sont probablement deux excellents sites. Donc oui, tu as un nom pas cher ici. Vous avez des noms de chiens bon marché que vous pouvez rechercher et Go Daddy aussi. avez des domaines que vous pouvez acheter pour environ 20 dollars, selon le nom. Je vais aller en haut à droite, cliquer sur Publier, et vous pouvez voir que nous l'avons mis à jour il y a 23 heures, et qu'il y a eu six modifications. Je peux donc voir les changements ici. Comme vous pouvez le voir, je vais juste vous donner une ventilation approximative, vous donner tout cela. Ce que vous pouvez faire avant de publier, si vous cliquez sur les 23 heures, je vous redirigerai vers cette page de mise en scène. Vous pouvez le voir avant de le publier en ligne, vous devez simplement tout vérifier avant qu'il ne soit complètement mis en ligne. Vous pouvez donc voir qu'il y est mis en scène de manière optimisée. Et voici la dernière version. Évidemment, vous devez passer au plan de site payant avant de pouvoir le faire. Publiez ClickUdate et le site Web a été mis à jour. Je peux cliquer sur Ouvrir le lien, et comme vous pouvez le voir, voici le site Web que nous avons créé, qui est super cool. Je vais donc cliquer sur Sense pay, cela devrait s'ouvrir sur cette page du projet. Cool. Et voilà, et c'est comme ça que vous le faites. Nous pouvons évidemment régler ce problème et peu importe, mais c'est ce que nous allons faire. Alors évidemment, vous obtiendrez le badge de cadreur en bas du site, comme vous pouvez le voir, c'est ainsi que vous publiez votre site Web 11. Concevoir avec des plugins: Si vous allez en haut à gauche, vous pouvez voir qu'il y a un menu de plug-ins. Vous voulez cliquer dessus. Et vous avez déjà quelques uns que vous avez utilisés récemment ici. Vous en avez quelques-unes en vedette ici, certaines des plus populaires. Et vous pouvez également cliquer sur Bows pour accéder au site Web de Framer, et je vais vous montrer tous les plugins actuels Ils en ont en fait 130, ce qui est insensé. Ils ont des icônes. Ils ont, vous savez, des trucs d' IA, des images, comme plein de plugins différents, ce que je trouve vraiment génial. Vous pouvez même injecter des éléments de commerce électronique comme le frameship. Et je vais aller au plugin et je veux rechercher Lumi. Et une fois que vous aurez un plugin , vous aurez comme une fenêtre Vous pouvez le déplacer sur votre toile. Et pour celui-ci, il s'agit essentiellement d'images gratuites, mais ils ont un plan pro. Mais, par exemple, je peux cliquer avec le bouton gauche de la souris sur une image. Donc, dans mes couches, j'ai sélectionné cette image cubique, et j'en veux peut-être une autre. Je peux cliquer sur Lumi, et il devrait injecter cette image juste là Il y a évidemment un mot-symbole parce que je n'ai pas la version pro, mais c'est un moyen très simple d' ajouter des images dans votre canevas Juste comme ça. Vous pouvez donc voir mes images, elles y ont été injectées. Loom est génial parce qu' il contient des illustrations. Il y a trois D, il y a plein de trucs sympas. Nous pouvons même sélectionner des outils et des effets, passer à Duotone et sélectionner notre propre thème de couleurs bicolore, comme vous pouvez le voir . Peut-être que nous voulons ce bleu avec ce flamant rose ou quelque chose comme ça Ça a l'air plutôt cool. C'est donc un plug in que j'adore utiliser. Vous en avez également d'autres avec lesquels vous pouvez jouer. Je recommande donc, vous savez, regarder certains des plugins avec lesquels vous voulez jouer. Par exemple, vous avez celui-ci DIA qui est très amusant. Alors peut-être que j'aurai mon image de profil, et je voudrais ajouter un effet différent. Je vais cliquer sur DIA et je vais créer ce type d'effet de motif unique, qui modifie l'image, afin que nous puissions insérer une image. Et puis nous l'avons. Nous obtenons comme cette distorsion des pixels, effet de tergiversation, qui est vraiment cool Et nous pouvons évidemment personnaliser la pixellisation. Il s'agit donc essentiellement d' effets de pixels différents. Je peux changer la luminosité. Vous pouvez jouer avec la quantification, la résolution. Nous allons l'augmenter un peu. C'est donc un petit plugin amusant, avec lequel j'aime jouer si je veux obtenir un effet étrange. Phosphi est également très bon. Donc, si vous voulez de très bonnes icônes, j'adore utiliser du phosphure juste pour ajouter des icônes rapides Vous pouvez donc simplement cliquer avec le bouton gauche le déposer ou vous pouvez cliquer et faire glisser, puis vous pouvez le sélectionner, accéder à votre fond et changer de couleur, comme vous pouvez le voir. Alors peut-être que tu veux, tu sais, couleur verte ou autre. Ils en ont des tas Ils ont des remplissages, ils ont deux tons, comme vous pouvez le voir, puis nous avons simplement changé de couleur. C'est donc totalement gratuit. Donc c'est génial, donne-toi quelques idées rapides. Vous avez également une version allégée. Et vous pouvez les redimensionner et les faire pivoter. Jouez avec certains des plug-ins. Je vais vous dire si c'est gratuit ou si c'est payant. Gardez donc cela à l'esprit. Il y a plein de plugins gratuits ici. Essayez-le et commencez à créer des choses amusantes. 12. Outro: Merci d'avoir suivi le cours. Je l'apprécie vraiment. J'espère que vous avez appris tout ce dont vous avez besoin pour commencer à créer des sites Web encadrés et j'espère que vous aurez plus confiance en vous pour simplement vous lancer et créer des choses, vous savez ? Par exemple, je n'ai pas créé trop de projets, mais plus on crée, même en jouant avec des modèles, c'est un excellent moyen de s'entraîner et de s'habituer à créer. Pour le projet de classe, je veux que vous créiez quelque chose de similaire à ce que nous avons fait pour le portfolio. Vous pouvez suivre exactement ce que j'ai fait ou créer quelque chose de similaire avec votre ambiance, faire votre propre style personnel L'objectif principal est donc de simplement créer une page de destination d'une page avec certains éléments de votre portfolio. Il peut s'agir simplement de travaux d'étudiants ou faux projets. C'est très bien. Ensuite, téléchargez-le dans le cours Skillshare et je vous ferai part de mes commentaires dès que possible Et si vous avez d'autres éléments de portfolio et que vous souhaitez avoir des commentaires, je serais ravie de vous en faire part. Il suffit de mettre votre lien dans les discussions ou le chat. Si vous souhaitez en savoir plus sur l' identité de marque ou le design de logo, j'ai plus de 30 cours sur Skillshare J'ai 30 autres cours sur Skillshare que tu peux Et si vous voulez d'autres ressources, vous pouvez aller sur mon site jeremymor.com ou regarder certains de mes tutoriels sur YouTube, vous pouvez vous Merci beaucoup, je te verrai la prochaine fois.