Webflow niveau avancé et CMS

1. Introduction du cours: Pour le cours avancé Webflow. Ce cours vous fera découvrir le monde des pages dynamiques créées à l'aide de Webflow, ainsi que ses fonctionnalités les plus avancées. Vous avez probablement déjà pu prédire le cours complet Web de base. Celui-ci est la continuation. Nous allons étendre les possibilités des sites précédemment créés pour travailler avec le contenu dynamique du module CMS. Cette fois, vous apprendrez à créer sites Web complexes tels que des blocs et des pages de produits, et des sites Web qui peuvent être édités par votre client directement dans le navigateur. Dans le cours, nous examinerons certains aspects avancés importants du travail dans Webflow. Pour l'instant, notre projet ne contient qu'une seule page, mais nous allons créer un guide de style pour générer rapidement de nouvelles pages de notre site Web. Plus tard, vous pouvez itérer cette idée pour créer des systèmes de conception encore plus avancés. Deuxièmement, nous allons nous concentrer sur le CMS. Workflow vous permet de créer des structures de données complexes qui s'exécutent en tant que base de données. Tout d'abord, nous allons définir les structures pour le blog. Workflow génère automatiquement un certain nombre de pages pour nous, où l'utilisation des données dynamiques se résume à quelques clics. Par la suite, nous préparerons l'ensemble des sites Web à utiliser une telle structure de données modèle, créer un système de blogs complet. Enfin, je vais vous montrer comment utiliser CMS pour gérer le contenu du site Web à partir du niveau du navigateur que votre client pourra utiliser et ajouter du contenu dynamique qui ajoute de nouvelles entrées. On peut tout faire sans coder. En outre, j'ai trouvé un certain nombre de leçons qui vous permettront d'ajouter une logique métier à votre site Web, mais sans la nécessité d'utiliser plusieurs langues, va construire un moteur de recherche basé sur la recherche élastique, le meilleur ouvert système d'indexation et de retour des résultats. Et nous allons également créer un certain nombre d'intégration utile est basée sur un sans code des solutions telles que Zapier ou tégument. De nos jours, vous pouvez créer des fonctions avancées précédemment réservées aux développeurs back-end et front-end. Et vous pouvez le faire sans une seule ligne de code. Alors, qui bénéficiera de ce cours ? Tout d'abord, ceux d'entre vous qui connaissent déjà un peu de Webflow, si vous pouvez construire une couche, mais vous voulez utiliser CMS et des données dynamiques ainsi qu' une approche un peu plus systématique pour créer des sites Web dans Webflow, je pense que cette Bien sûr, c'est pour vous. Ce matériau nécessite une base de Webflow. Je vous recommande donc de prendre part à mon cours de base Webflow d'abord, ce cours est un excellent moyen de créer votre site web, NDP de votre produit ou d'offrir à vos clients phages dynamiques et CMS combinés avec des outils sans code, que tous vont amener vos projets Webflow au niveau supérieur. Plongons dans les premières leçons. 2. assignment Skillshare: Encore une fois, merci d'avoir suivi mon cours de Skillshare. C' est la deuxième classe sur Skillshare que j'ai sur Webflow. Le premier est assez basique. Cependant, si vous n'avez pas de compétences de base, je vous encourage fortement à consulter le cours de base Webflow, puis à passer à ce matériel. C' est très important que vous travailliez avec moi dans le cours. Et j'ai deux propositions pour créer votre propre projet de cours. Le premier est juste de suivre. Tout ce que vous devez faire est de regarder les vidéos , puis de répéter les actions que vous voyez dans la vidéo. Dans Webflow, je pense que cela vous donnera une compréhension assez solide de la façon de créer un site Web comme celui-ci avec CMS et guide de style et beaucoup, beaucoup plus de fonctionnalités avancées. C' est un excellent moyen de pratiquer vos compétences. Et aussi, je vous donne certaines des ressources que vous pouvez utiliser et je les relie juste dans le commentaire à cette leçon. Cela vous permettra de créer un site web sympa et dynamique. Et je vous suggère de vous soumettre comme affectation de cours. Cependant, si vous voulez, ou des compétences au niveau supérieur, je vous encourage à essayer et créer votre propre projet en utilisant les mêmes compétences que vous allez apprendre ici. Par exemple, créer un guide de style, puis travailler avec CMS et aussi abandonner certaines intégrations, peut-être avec Zapier ou Integra Ahmad ayant une mission comme celle-ci, un projet pratique peut être pour un de vos amis ou peut-être pour quelqu'un de votre famille, serait vraiment amener les compétences à un niveau supérieur. Et je vous encourage vivement et vous recommande de le faire. Et évidemment, s'il vous plaît juste soumis comme affectation de cours. Je serais très heureux de voir ce que vous avez fait avec Webflow. Merci beaucoup, et je te verrai dans la prochaine leçon. 3. Configuration de Styleguide: Salut les gars et bienvenue à la prochaine leçon que c'est le début de nos leçons de guide de style. Je vais vous montrer comment créer un guide de style afin que nous puissions facilement réutiliser éléments et des composants sur différentes pages de notre site Web. Et c'est super utile, surtout si vous créez un site Web multi-pages ou si vous avez un guide de marque spécifique et un livre de marque, et que vous voulez rester cohérent avec les composants, les couleurs, typographie, de sorte que nous créons une page séparée avec le guide de style. Et à partir de cette page, nous pouvons définir des composants que nous pouvons utiliser plus tard sur différentes pages de notre site Web. Et cela peut également être un point de départ pour l'ensemble du système de conception que vous pouvez créer pour vos projets. Cela peut être un système de conception pour une marque et les différents projets que vous allez créer pour cette marque. Par exemple, différentes pages de destination. Mais vous pouvez aussi penser à un cadre pour travailler dans Webflow qui vous permettra de créer facilement des projets et de réutiliser des structures et des composants communs. C' est quelque chose que je vais laisser hors de la portée de ce cours parce que c'est un sujet un peu plus avancé, création d'un système de conception. Mais juste pour que vous sachiez, j'ai mon propre cadre de conception. C' est ce qu'on appelle système flow dot co. Et je l'utilise avec chaque nouveau site Web que je crée. Et plus tard, vous pouvez vérifier le code point de flux système pour voir les exemples et tutoriels gratuits sur la façon dont je le fais. Pour l'instant, nous avons le guide de style, et c'est la page simple que j'ai créée dans le cours précédent. Maintenant, il ne contient qu'un seul composant. C' est sève beaucoup bloc et nous l'avons créé afin que nous puissions le réutiliser dans le sous-argent. Mais c'est un excellent début pour notre guide de style. Donc style qui devrait avoir sa page séparée. Et sur cette page, nous allons organiser les composants, mais pas seulement les composants, car nous voulons également créer des jetons de conception que vous pourrez utiliser plus tard. Et ces jetons de conception pourraient être de la typographie. Donc, tous les en-têtes et la navigation, ainsi que les couleurs et les autres éléments que nous allons utiliser sur différentes pages. C' est exactement pourquoi je veux organiser cette page de guide de style un peu mieux pour avoir un composant de navigation. Laissez-moi ajouter la barre de navigation. Et ce composant de navigation contiendra les informations dans les liens qui feront défiler cette page. Et permettez-moi d'ajouter différentes sections telles que la typographie, les couleurs et les composants. Pour l'instant, je vais ajouter une image ici et changer le logo. Et puis laisse-moi aller dans ce conteneur entier. Je vais ajouter un autre look div pour cela et mettre éléments de marque à l'intérieur afin que je puisse avoir les éléments de marque et assez d'argent à l'intérieur du bloc. Et c'est une pratique courante que j'utilise avec navbar car maintenant ce débogage, je peux le renommer en menu et utiliser display flex pour le centrer verticalement et horizontalement. Maintenant, réorganisons les éléments de sorte que j'ai le logo sur le côté gauche. Et pour les systèmes de conception plus complexes et les guides de style, vous pouvez utiliser non pas le menu horizontal, mais le menu vertical. C' est La gauche ou la droite de votre page de guide de style. Mais pour l'instant, je vais juste utiliser ce menu horizontal et aussi changer le positionnement de l'élément pour la classe de base qui sera corrigée de sorte que lorsque je fais défiler la page, le menu reste en place et il est fixé en haut de mon site Web. Et puis je vais créer une autre section, juste une section titre pour mon guide de style afin qu'il soit bien organisé. N' oubliez pas que vous allez revisiter décalé de temps en temps ainsi que votre client probablement, ou peut-être l'équipe de conception qui utilise également le guide de style ou le système de conception que vous avez créé. Donc c'est toujours vraiment sympa aussi. Organisez-le en une sorte de structure et ajoutez des légendes et des conteneurs de sections supplémentaires pour qu'il soit bien organisé. Vous pouvez naviguer dans ce guide de tuiles, surtout quand il évolue vers quelque chose de plus grand, tel que le système de conception, ce serait une bouée de sauvetage. Donc, ce que je fais en ce moment, j'ai créé la section principale et puis à l'intérieur j'ai conteneur. A l'intérieur de cela, je vais créer un autre D-block technique, et ce serait un héros de guide de style. Et dans cette div regarder une autre structure avec des textes de classe. Je vais juste utiliser un wrapper de texte. Et ici, je vais utiliser un titre et aussi un paragraphe afin que je puisse avoir juste une description de ce qui est à l'intérieur de ce guide de style. Laissez-moi utiliser une marge ici. Et ce héros de guide de style aurait un fond blanc ainsi qu'une ombre. Je vais l'ajouter dans une seconde. Ajoutons également le rayon de bordure et un peu de rembourrage à l'intérieur de ce conteneur pour bien positionner le titre et la description. C' est une marge de 44,5 pixels. Maintenant, sélectionnons le conteneur et modifions sa taille de sorte que la largeur de l'élément soit un peu plus grande. Laissez-moi avoir 12 AT, pour la largeur maximale de ce conteneur. Et je veux positionner pour centrer les éléments de position à l'intérieur de l'enveloppe de texte. Donc, sélectionnons l'enveloppe de texte et pour l'espacement des textes rapporteurs, cette petite icône sur le côté droit qui vous permettra de centrer les éléments à l'intérieur d'une balise div. Donc, nous allons cliquer dessus pour que nous ayons des marges automatiques à gauche et à droite. Et maintenant, si nous changeons la largeur à, disons que 50 pour cent l'auront centrée. Alignons le centre du texte et changeons le nom en guide de style ainsi que la description pour définir l'objectif de notre guide de style. Mais c'est une structure typique que j'utiliserais ici, et c'est assez polyvalent. Vous pouvez le copier et le coller partout où vous le souhaitez et vous avez des éléments bien positionnés. Maintenant, ajoutons un peu d'ombre. Ça va faire 20 distance et 30 Blair. Mais changeons la couleur pour qu'elle soit peut-être cinq ou 6% opaque. Et maintenant, ça a l'air assez bien. C' est le début de notre guide de style et la structure que nous avons avec la section de héros de guide de style. Cela va être assez unique, mais nous aurons de telles structures pour pouvoir les copier et les coller partout. Je vais juste supprimer la classe pour l'instant. La structure de base serait la section Guide de style. Et n'oubliez pas de ne pas appliquer beaucoup de styles à cette section tigres elle-même, plutôt à ses conteneurs et regards profonds à l'intérieur afin que nous puissions facilement copier dans changer le nom des classes que nous avons pour les noms de cette section. Et maintenant, créons l'enveloppe de texte à l'intérieur. Je vais me déplacer ici et faire h, h2. Ce sera une description de la première section de notre guide de style. Donc, par exemple, nous allons probablement commencer par la typographie ou les couleurs. Et nous allons avoir le nom de cette section ici. Donc, nous allons le renommer en typographie et avons aussi une description. Ainsi, la typographie peut aider à créer des hiérarchies claires, à organiser les informations et à guider les utilisateurs. Nous avons donc un peu d'informations supplémentaires sur le dessus. Et aussi dans le menu, nous pouvons commencer à cartographier ces sections particulières afin que nous puissions les lier avec un rappel. Sélectionnez la section du guide de style, appuyez sur D sur le clavier pour aller aux paramètres de section. Et comme ID, je vais utiliser la typographie. Et maintenant, assurons que dans le menu j'ai également lié à la section typographie. Allons aux paramètres et choisissez la section vers laquelle nous voulons faire défiler lorsque l'utilisateur clique sur cet élément de menu. La deuxième section peut être sur la couleur. Et le troisième, je vais le renommer en composants. En outre, vous pouvez créer beaucoup plus de sections. Comme je l'ai dit, quand cela évoluera, vous pourriez être prêt à le déplacer sur le côté gauche, mais pour l'instant, il est normal de rester au sommet. Je vais utiliser des sections, et c'est à peu près tout pour la cible la plus simple que je vais créer quatre pour cette page. Maintenant, dans le conteneur, je vais aussi créer un élément de plus et ce serait une sous-section, vous pourriez dire. Donc ça va être une rubrique H3, laissez-moi lui donner un guide de style de nom. Cela va être h tag gel par exemple. Et on va le déplacer dans ce conteneur pour qu'il reste ici. Et changeons aussi un peu de style. Nous devons changer les propriétés de police. Je vais utiliser DM Sans. Utilisons 400 Normal ici et modifions la taille à 16 pixels. Mais je vais créer une grande hauteur de ligne pour cela. Ça va être une ligne, mais j'ai besoin de cette plus grande boîte pour que je puisse appliquer un peu de décoration pour l'instant. Et aussi je veux créer un espacement des lettres de deux pixels. Et maintenant j'utilise cette plus grande boîte pour appliquer une bordure, bordure en bas. Donc, je l'ai réglé sur une bordure en bas de pixel et bordure solide avec cette couleur bleu nuit. Elle est maintenant appliquée à la sous-position. J' ai donc une sorte de sous-section semblable ici. Et pour la typographie, par exemple, je peux l'utiliser pour les en-têtes. La sous-section X serait pour le corps du texte. La prochaine pour les légendes. Je pense que vous comprenez le point. Il est donc maintenant facile d'utiliser ces sections de guide de style pour venir sur C et Command V, copier et coller et créer plusieurs sections différentes de cette cible. On va le faire dans la prochaine leçon. On se voit là-bas. 4. Typographie: Salut les gars, bienvenue à la prochaine leçon et créons d'abord des titres. Et j'ai juste essayé de rendre ça excitant, mais ce n'est pas le cas. Créons le premier titre, copions-le et collons-le quelques fois. Je vais créer six rubriques différentes. Vous pouvez créer uniquement gratuitement et, ou quatre ou cinq, tout ce que vous avez dans le design. Maintenant, modifions les types de titres jusqu'à l'âge de cinq ans. Et aussi, je vais copier et coller une fois de plus et crée cette rubrique spéciale. Je ne vais pas utiliser H6, mais au lieu de cela, laissez-moi créer un H2 spécial que je vais nommer l'en-tête de section. Et cela va être comme un titre supplémentaire un h2 avec une classe supplémentaire que je vais utiliser tout au long de ma mise en page. Maintenant, modifions cette chronométrage pour les en-têtes. Et pour ce faire, sélectionnons le premier et allons au sélecteur et sélectionnez le sélecteur de balises HTML. Ce serait tout H1 cap. Donc, nous voulons que tous les titres H1 ressemblent à peu près à la même chose. Et ce que nous voulons changer ici, ce sont les paramètres de typographie. Donc, nous avons l'affichage Sarah et 400 normaux 5461, car en conséquence de la taille et de la hauteur de la ligne, nous voulons également définir le bas de la marge à 10 pixels et peut-être changer le haut de la marge aussi bien. Maintenant, passons aux paramètres d'en-tête H2 et nous devons faire la même chose ici. Donc, je suis essentiellement en consultation avec la mise en page. J' ai le fichier XD ouvert sur mon deuxième écran et je vérifie simplement si ces valeurs sont correctes. Ce que je dois changer ici, c'est dans les paramètres de topographie que j'ai changé la police en m Serif Display. Et nous allons également appliquer pour des centaines de poids normal et changer la taille à 38 et la hauteur de la ligne, qui sera 44. Donc, de cette façon, nous allons créer un modèle standard pour tous les en-têtes H2. Et je vais le faire pour avoir libre change ces liens d'avoir, pour avoir cinq et le titre spécial que j'ai créé. Maintenant, une autre approche pour les en-têtes peut ne pas utiliser les balises H1, H2, H3 et ces balises HTML. Au lieu de cela, ce que vous pouvez faire est que vous pouvez simplement appliquer certaines classes, par exemple, la classe Heading 1, tête à la classe, ayant la classe libre. Et puis cela ne dépendra pas nécessairement de la balise que vous sélectionnez afin que vous puissiez appliquer différents styles. C' est juste une autre approche pour créer un guide de style avec des en-têtes. Vous pouvez utiliser ce Tous les en-têtes H4 par exemple. Ou vous pouvez simplement créer une classe supplémentaire. Et grâce à cela, cela vous donne un peu plus de flexibilité en termes de référencement car alors vous appliquez juste la classe H4, mais en dessous, vous pouvez le changer en H5 et H6, H1 si vous vouliez que cela soit plus important pour moteurs de recherche et pour Google. Mais c'est juste une note de côté car je change ces valeurs parce que c'est fondamentalement la même chose. Je suis juste en train de vérifier la mise en page. Quels types de valeurs ai-je pour l'espacement et la typographie ? Je ne change rien d'autre en termes de CSS. Donc, je ne change pas de positions et de tailles. Vous savez, je manipule juste avec l' espacement et la typographie et j'ai essayé de rester cohérent. Avec cela, les propriétés CSS ont changé uniquement pour le texte. Maintenant, ce titre de section spéciale va être la réponse de ce jeu pour une normale de 100, puis 46 et 56. Je vais l'utiliser dans certaines occasions, c'est un peu différent des H1 et H2 que j'ai. Et je suppose maintenant que j'ai toutes les rubriques dont j'ai besoin, au moins celles que j'avais dans le fichier de conception. Donc, je peux sélectionner, copier et coller un autre titre de guide de style libre H et le changer en paragraphes. Nous allons donc utiliser un style pour le paragraphe, parfois pour différents projets. J' utilise des styles différents. Et j'ai, d'habitude, j'ai un trois aussi grand, petit et moyen. Et je peux ensuite manipuler les versions du paragraphe. Mais dans ce cas, nous avons une mise en page assez simple et je vais utiliser un seul style de paragraphe. Permettez-moi d'ajuster la marge. Je vais le mettre à 18 pixels de marge inférieure, et aussi changer le poids de la police à 500s moyen. Et le reste des propriétés que je vais laisser telles qu'elles sont parce qu'elles sont définies correctement pour l'ensemble du document. Dans le cours précédent, je viens de sélectionner l'élément body et pour les deux anciennes pages balise, j'ai créé un stylet avec les esperluettes et la taille et la hauteur correctes, la même que dans mon paragraphe. C' est pour ça que ça va maintenant. J' ai légèrement modifié ce bas de marge de guide de style libre H afin qu'il semble mieux. Maintenant, je peux le copier et le coller pour avoir des légendes ci-dessous. Et je vais avoir différentes versions des légendes. Je les ai déjà dans mon document afin de pouvoir faire défiler les sélecteurs et rechercher des légendes. J' ai donc des légendes pour l'auteur et l'en-tête. Commençons par la légende simple que j'ai. Et vous pouvez créer ces types à partir de zéro. Ou si vous avez déjà créé des légendes, des liens dans la mise en page comme nous l'avons fait dans le cours précédent. Je vais juste utiliser ces classes et en fait renommons cette légende afin qu'elles soient les mêmes que le nom des classes. Donc, nous avons capturé et le bec de légende et aussi l'auteur de légende. C' est un peu différent. Choisissons aussi la légende 40 auteur et 40 en-tête. Donc nous allons avoir toutes les légendes ici. Ainsi, soit vous pouvez collecter des éléments sur la page de guide de style soit vous pouvez les créer à partir de zéro et appliquer certains styles. Maintenant, nous allons avoir un autre en-tête de guide de style et donnons-lui un nom de textes de portée. Donc, le dernier élément que nous allons avoir dans le guide de style est atteint. Élément suivant que nous pouvons styler assez différemment de tous les autres éléments. page atteinte x est super importante pour nous parce que c'est la structure du contenu de l'article. Donc, nous aurons atteint des éléments de texte, atteint x chiens dans tous les articles de blog. Ce qui est assez unique pour l'élément de texte riche est que vous pouvez appuyer sur retour à l'intérieur et vous aurez cette petite icône plus. Et la même chose vaut pour l'éditeur pour les gens qui viennent de lire des articles pour votre blog. Et puis vous pouvez incorporer certains éléments, créer une portée minimale, une vidéo ou une image. Cliquez sur l'image et une image à l'intérieur de l'élément de texte enrichi, comme vous pouvez le voir, il a quelques options supplémentaires. Ainsi, nous pouvons changer la position de l'image. Nous pouvons modifier d'autres paramètres. Par exemple. Déplacez-le vers la gauche à partir du texte ou vers la droite. Ou nous pouvons même aller plus loin pour explorer certains paramètres de taille de base et de lien. Nous pouvons vérifier la taille de l'image, probablement besoin d'une compression, par exemple, en utilisant l'image opt-in d'abord, puis la position est ici. Et en dehors de cette position standard que nous avions, nous avons aussi cette taille. Par exemple, nous pouvons utiliser Custom Size et la définir à 30 pour cent de la largeur de l'image d'origine, comme ceci. Et nous pouvons également changer les valeurs de pourcentage en pixels. Nous pouvons également ajouter le lien et tout est disponible à partir de l'éditeur. Donc, pour les personnes qui ajoutent simplement des éléments à votre collection CMS. Donc assez cool, mais aussi toutes les classes ici, toutes les classes de texte riche sont disponibles pour vous de modifier et de changer. Et vous pouvez même créer cette structure imbriquée de classes. Ainsi, par exemple, ne stylisez que les paragraphes qui se trouvent à l'intérieur de l'élément de texte enrichi. De cette façon, le contenu de vos articles peut être entièrement différent en termes de style, même s'il contient les mêmes éléments tels que les paragraphes que la page entière. Donc, vous avez des légendes différentes ici, vous avez des en-têtes différents, des paragraphes différents. Et pour l'ensemble de l'élément de texte de portée, vous pouvez lui donner un nom de classe de, disons article de bloc. Et c'est comme une structure séparée à l'intérieur de notre structure définie de HTML. C' est donc comme un autre document imbriqué dans un document. Donc, par exemple, si vous avez des en-têtes H2 ici et que nous avons déjà déterminé ces tuiles, ces liens pour les en-têtes H2 seraient hérités, ok ? Mais voici la possibilité d'imbriquer ce sélecteur de cap H2 à l'intérieur de l'article bloc. Donc, si vous utilisez cette fonction, vous avez tous les titres H2 style différemment quand ils sont à l'intérieur de l'article de bloc. Donc, nous pouvons avoir une taille de police différente. Par exemple, si nous la modifions en 36, vous verrez que les en-têtes n'ont pas changé dans le document principal. Même si nous éditons tous les titres H2. Mais maintenant, nous changeons cela seulement si cela est imbriqué dans l'élément de texte enrichi. C' est la même chose que nous pouvons faire pour les paragraphes. C' est comme des paragraphes. Et puis quand ceux-ci sont imbriqués à l'intérieur des textes de bloc, nous pouvons changer le style pour les paragraphes de la même façon que nous pouvons faire pour les figures, pour les légendes, pour les images. Et sélectionnons toutes les légendes de figure lorsqu'elles sont imbriquées dans l'article de bloc. Ça a légèrement changé la couleur. Peut-être modifions aussi la taille de la police et le poids de la police. Et tout cela est indépendant de la structure documentaire que nous avons. Et ce genre de a du sens parce que l'article lui-même est une sorte d'entité différente de notre document. Donc, nous, nous pourrions vouloir styler, par exemple, ou toutes les images différemment. Supposons que nous voulons ajouter un rayon de bordure uniquement pour les images qui sont à l'intérieur de nos articles de blog. Donc, à l'intérieur de l'élément de texte riche et toutes les autres images, bien que nous utilisons la balise HTML, resteront intacts et nous pouvons les styler différemment pour notre interface utilisateur, pour l'interface utilisateur du site Web. Donc c'est tout pour la typographie. se voit dans la leçon suivante. 5. Travailler avec la couleur: Salut là et bienvenue à la prochaine leçon. Et dans celui-ci, parlons de couleurs. Donc, ici, nous avons la section NoveLink à colorier dans notre guide de style. Il peut s'agir d'une version simplifiée du guide de style, un début d'un système de conception. Et je ne peux pas imaginer qu'il manque des couleurs. Alors maintenant, nous allons créer un autre style, le titre et le guide de style, H gratuit, afin que nous puissions changer la typographie en couleur et créer des couleurs pour le texte pour la typographie, ainsi que pour l'arrière-plan, comme vous le savez, et CSS. Nous avons des propriétés distinctes pour les couleurs d'arrière-plan ci-dessus et les couleurs de texte. Et c'est une approche sur la façon dont vous pouvez changer ces couleurs et les définir dans Webflow que vous pouvez facilement les utiliser et réutiliser les classes qui vont créer plus tard. Donc, ici, nous avons des actions et pour la couleur de fond et de texte, j'ai créé des sections séparées. La chose est de créer une classe séparée pour les couleurs d'arrière-plan ainsi que les couleurs de texte. Et dans cette classe de couleur d'arrière-plan, nous allons également définir la couleur du texte qui correspond à l'arrière-plan. C' est l'approche que j'utilise habituellement pour les guides de style simples et pour les guides plus compliqués, je vais généralement avec des classes séparées pour toutes les différentes couleurs, où j'ai des arrière-plans séparés et des couleurs de texte séparées. Quoi qu'il en soit, ce que je vais faire, c'est créer un bloc de couleurs. Et c'est juste à des fins de style, pour le guide de style lui-même, sorte que notre couleur soit belle ici et peut être facilement trouvée dans ce guide de tuiles. Et en outre, je voudrais créer la section qui contiendrait à la fois le nom de la couleur, la couleur elle-même, sa couleur de texte correspondante. Donc contraste couleur pour le texte ainsi que la valeur hexadécimale. Alors maintenant, je suis juste en train de créer ce porte-place pour la couleur. Je lui ai donné le nom de bloc de couleurs, c'est la classe. Et il a un rayon de frontière et une frontière. Et je vais ajouter deux manuels à gauche et à droite. Je l'ai fait pour être flexbox, donc je peux facilement distribuer ceux avec une sorte de rembourrage sur le côté gauche, je vais ajouter le nom de la couleur. Et sur le côté droit, il y aura la valeur hexadécimale de la couleur. Donc, quand quelqu'un publie ce guide de style et qu'il suffit de le parcourir sur le web, il peut être facilement copié, fois avec l'hexadécimal et le nom. C' est donc le bloc de couleurs. Donc, comme je l'ai dit, en ce moment, ce que nous voulons faire est de créer des classes séparées que nous pouvons appliquer sur tout ce qui devrait être, je devrais avoir cette couleur en arrière-plan. Donc, nous allons créer une autre classe et ce serait, par exemple, marque une couleur ou marque une couleur de fond, bg. Mais si nous avons créé comme ça, ce sera une classe combo pour le bloc de couleurs. Cela signifie que pour tout élément particulier que nous voulons appliquer cette classe, nous devrions d'abord définir la classe de bloc de couleurs car ce serait la marque 1 BG serait imbriquée à l'intérieur de ce bloc de couleurs en tant que classe de combo. Donc, c'est quelque chose que nous ne voulons pas vraiment. Je vais supprimer cette classe. Je vais créer la marque 1 BG sans cette première classe. Et maintenant je peux changer les couleurs. Je vais donc changer la couleur de fond. À ma couleur bleu nuit. C' est une couleur pour moi. Et aussi je veux changer la couleur du texte à la couleur correspondante qui serait appliquée pour les éléments qui a cette couleur de fond de la marque 1 afin que j'ai une couleur de texte contrastée. Ce n'est vraiment pas nécessairement, vous pouvez simplement sauter la couleur du texte et le définir séparément comme un séparé, mais je suis juste en train de simplifier ici. Et maintenant ce que je fais, c'est que je vais d'abord supprimer cette classe, appliquer cette classe de blocs de couleurs que j'ai créée pour le rayon de bordure et des choses comme ça. Et puis je peux appliquer ceci en tant que classe combo globale afin que je puisse utiliser la marque 1 BG en plus de cela. Ce n'est plus une classe combo pour le livre de couleurs, donc je peux l'appliquer à tout ce que je veux et je peux l'appliquer sur le dessus. Donc, c'est la façon dont je vais structurer les choses dans le guide de style en termes de couleur. Et la même chose que je vais faire pour les textos. Donc, je vais utiliser le texte de marque un comme nom de la classe pour ma marque une couleur. Maintenant, je peux changer la couleur en bleu nuit à ma marque une couleur. Et pour la convention de dénomination, celle-ci est vraiment assez simple. Si vous voulez créer quelque chose de plus sophistiqué ou quelque chose de plus systématique, vous voulez probablement commencer par, par exemple, C ou couleur que T ou texte, puis lui donner un nom, par exemple, utiliser la marque 14 couleurs. Mais nous créons un guide de style très simple. Je pense que c'est bon pour l'instant. Et vous allez simplement développer votre propre style en termes de nommage des classes et de la convention que vous allez utiliser ici. Donc, c'est assez simple, je suppose, en termes de couleur lorsque vous créez un guide de style, je vais généralement avec deux ensembles de couleurs distincts, un pour l'arrière-plan et 14 textes. Et je crée des classes séparées afin que je puisse utiliser ces classes n'importe où pour l'arrière-plan et le texte. Maintenant, pour cette classe, si vous voulez créer des marques à BG, vous devez d'abord supprimer la classe, puis créer une marque à BGN. Maintenant, je vais utiliser une autre couleur de la mise en page que j'ai. Collons-le en arrière-plan. C' est de couleur bleu clair. En fait, vous ne pouvez pas vraiment le voir car il est de la même couleur que l'arrière-plan de cette page cible. Mais ce sont nos marques à la couleur, le bronze à l'arrière-plan. Et maintenant tout ce que je dois faire est juste de créer la couleur de texte appropriée pour cet élément particulier. Je vais juste sélectionner le bleu nuit et je vais le renommer en une seconde pour cette montre. Mais maintenant j'ai cette structure pour la marque à BG. J' ai la couleur du texte ainsi que la couleur de fond. C' est donc une approche pour une approche différente. Vous pouvez simplement appliquer la couleur d'arrière-plan séparément à la classe séparée et le score de test deux classes distinctes. Ce que je vais faire, c'est utiliser cette structure pour créer plus de kilohertz. Donc, d'abord, je vais supprimer cette classe, créer un bloc de couleurs et appliquer la marque à BG. Et puis je vais juste copier ça et créer plus de variations de couleurs, combinaisons de couleurs pour mes couleurs. Ce sera la marque 3 4 arrière-plans ou la marque 3 BG. Et encore une fois, je devrais utiliser la couleur de fond ainsi que la couleur du texte ici. Et je veux aussi mentionner les échantillons. Donc maintenant, laissez-moi coller la valeur hexadécimale pour la troisième couleur. Et c'est cette couleur vert clair. Et il n'est pas présent dans cette poussée juste pour l'instant. J' ai donc besoin de l'ajouter parce que je veux que toutes mes couleurs soient présentes dans ces eaux afin que je puisse soit utiliser une classe plus tard et l'appliquer comme une classe d'arrière-plan ou une classe de couleur de texte. Ou je peux simplement le sélectionner dans les échantillons. Alors donnons-lui un nom propre. Ce sera le nom majuscule, lettre majuscule marque 3. Et au fait, renommons nos autres couleurs. Ce bleu nuit devrait être notre marque, 1, et la couleur bleu clair devrait être la marque. Pour que nous ayons des couleurs mappées aux nuanciers ainsi que nous les avons dans des classes séparées. C' est la solution la plus polyvalente car je peux utiliser des échantillons ou je peux utiliser des classes. Et une fois que j'ai changé la couleur de cette nuance, donc j'ai ajouté cette montre, elle la changera automatiquement sur tout le site Web parce que tout le site Web utilise cette montre, mais en plus, cette classe est en utilisant également l'échantillon, sorte que la couleur changera en conséquence. Maintenant, je peux créer plus de classes de textes. Ainsi, par exemple, les marques à taxer ou le texte libre de la marque. Et je peux facilement appliquer cette couleur à partir d'échantillons. Je n'ai pas besoin de copier et coller les valeurs hexadécimales. Je veux faire une erreur de cette façon. Donc, toujours plus facile d'ajouter vos couleurs aux nuanciers d'abord, puis peut-être en plus de cela, créer les classes appropriées. En outre, j'ai la valeur hexadécimale qui est copiée sur le côté droit. Donc, lorsque je publie le guide de style, vous pouvez facilement copier la valeur hexadécimale. Maintenant, laissez-moi accélérer les choses, grâce à la magie de la vidéo, je n'ai pas vraiment à perdre votre temps jusqu'à ce que je copie et colle la même chose et fasse les mêmes opérations pour les autres couleurs. Donc, ici, nous avons sept couleurs différentes. C'est vraiment beaucoup. Donc, généralement, j'utilise la couleur primaire et secondaire, donc deux couleurs, peut-être une de plus, mais j'ai ajouté une palette de couleurs que vous pouvez voir quoi cela ressemble avec des valeurs hexadécimales appropriées. J' ai également ajouté ces couleurs à mes nuances dans Webflow. Et aussi en plus de cela, j'ai un avertissement d'erreur et j'accepte les couleurs d'état. Donc, dans la notification de l'utilisateur, je peux utiliser cet avertissement de couleur, BG, BG. Et puis nous avons ces cours de textes. Nous avons la couleur accepter les textos et les erreurs. Donc, je peux rester cohérent et ajouter ces couleurs à différents états de mon application, notification différente pour l'utilisateur. Et c'est la palette de couleurs de base que vous allez utiliser dans votre projet. Et selon que vous voulez créer une palette supplémentaire pour les couleurs sombres et les couleurs blanches et noires. Tu peux le faire ici. Ou vous pouvez simplement utiliser votre échelle de couleur grise dans des échantillons au lieu de cette fois que Donc généralement j'ai ajouté au guide de style et je finis avec cinq entre 510 couleurs, allant de la couleur très claire à la couleur très sombre. Il peut être noir ou blanc et quelques reines. Ou il pourrait être juste, vous savez, couleur claire et la couleur foncée et peu d'entre-eux. ce moment, j'ajoute ces intercalaires ainsi que mes couleurs blanches et noires aux Nuancier uniquement. Et parfois je le fais comme ça. Parfois, je crée des classes séparées si je veux les utiliser largement sur mon site Web et les ajouter au guide de style également. Donc, c'est ici que nous avons différentes couleurs que nous pouvons appliquer. Réinitialisons celui-ci. Et je pense que notre structure de couleur est maintenant prête. Nous avons tout mis dans les échantillons ainsi qu'au moins les couleurs principales. Nous les avons définis dans des classes séparées. Nous avons cette couleur noire sombre, très sombre et très blanc, couleur blanc clair. Et utilisez-le pour notre interface utilisateur, peut-être quelques arrière-plans des éléments parce que ce n'est que l'échantillon. Et en gros, c'est que je voulais te montrer. Les couleurs sont réductionnistes, prêts dans le guide de style ? Et passons à la leçon suivante. Merci. 6. Composants: D' accord, on dirait que dans la leçon précédente, j'ai fait une petite erreur. J' ai donc cette section décalée dans laquelle nous avons à la fois la typographie en couleur et le texte. J' ai donc besoin de me débarrasser de cet élément, de changer le conteneur, créer et de copier tout le personnel à la section et de jeter les éléments inutiles afin que j'ai deux éléments. Et voici la section couleur. Ici, nous avons la section typographie. Et d'accord, c'est ce dont nous avons besoin parce que pour cette section, nous devons lui donner un nom. Ce ne sera pas la topographie, mais la couleur ici. Et maintenant, nous allons lier ceci à la section spécifique. Nous devons le lier à la couleur. Et je pense que nous sommes presque prêts à créer une nouvelle section. Alors créons une copie de ceci. Supprimez tous les éléments de ce conteneur dont nous voulons vraiment avoir besoin en ce moment. Et créons une autre section, que l'une sera quatre composants. Alors passons à la section Standard et pour IB, allons le changer en composants. Et nous allons rapidement lié dans un lien dans le menu. Cela va lier deux composants. Ici, nous l'avons. Ok, alors on change de nom. Nous avons cette rubrique 2 qui placera les composants à l'intérieur et nous aurons quelques informations sur ce que les composants font de nos côtés. Donc, ce sont quelques éléments de base, des blocs de construction pour notre site Web, par exemple, des boutons. Alors créons la première section, quatre boutons. Et si nous allons sur notre page d'accueil, explorons ce que nous avons ici. On a quelques boutons là-dedans, on a des structures. Et si nous sélectionnons l'élément, vous pouvez réellement voir qu'il s'agit d'un composant dans le Webflow. Et il y a quelques raisons d'utiliser des composants dans le web cependant. Et parfois, vous pourriez être prêt à ne pas utiliser de composants mais toujours mettre quelque chose dans le guide de style, mais utilisez simplement la classe. Donc, pour les composants, vous avez tous ces champs de remplacement que vous pouvez activer pour que l'utilisateur puisse modifier, par exemple, dans la vue de l'éditeur. Vous pouvez également effectuer des remplacements sur les instances des composants maîtres. C' est donc un concept assez puissant et je l'ai expliqué en détail dans le cours de base. Mais d'un autre côté, vous pouvez penser aux composants comme quelque chose qui est réutilisable. Et ceux-ci ne doivent pas nécessairement être des composants de barre oblique de symbole dans Webflow. Parce que si vous jetez un oeil à cette classe de blocs d'entités, elle est assez universelle pour transporter des informations sur l'arrière-plan et toutes les choses qui vous permettront de créer ce type de boîte, ce type de carte. Ainsi, vous pouvez facilement réutiliser cet élément en fonction de la classe uniquement. C' est donc à vous de créer des composants ou simplement de travailler avec des classes. En fin de compte, si vous souhaitez apporter des modifications aux composants en dehors de la portée des remplacements que vous créez. Vous dissociez simplement le composant, puis vous appliquez des modifications aux classes. Et quand même, si ce sont des changements CSS, il sera appliqué sur tout le site Web. Donc, ce que je dis, c'est que vous n'avez pas vraiment à penser en termes de Webflow, de tout être un composant ici, parce que vous pouvez facilement utiliser des classes. Et rappelez-vous simplement que les classes qui sont utilisées dans toute la structure du document changeront en conséquence ou sur chacune de vos pages. N' oubliez pas que vous pouvez toujours ajouter le composant au-dessus d'une classe. Ensuite, vous avez la puissance des composants de sorte que vous pouvez créer override ainsi que vous pouvez imbriquer d'autres composants à l'intérieur de ce composant. Et vous pouvez également utiliser le menu de ces composants pour insérer les composants. Donc, si vous allez à deux composants, il a une icône séparée dans le menu en ce moment dans Webflow. Mais si vous allez dans les composants, vous pouvez simplement cliquer sur le composant et il sera automatiquement placé dans votre mise en page. Cependant, si vous voulez copier et coller des éléments qui ne sont basés que sur des classes, vous devrez trouver cet élément, par exemple , ce bouton, puis vous devez commander C, le copier, puis le baser sur la page que vous voulez utiliser, pour exemple ici. Il y a donc beaucoup d'avantages différents de l'utilisation de composants. Mais il y a un inconvénient si vous voulez le modifier en dehors des écritures, vous devez d'abord le dissocier. Mais c'est, je suppose que le seul inconvénient et vous pouvez facilement partir avec ça. Donc ici, nous avons différents boutons et maintenant je vais créer une autre section. Et puis cette section, Utilisons peut-être cette fonctionnalité et blocs et copiez et collez tous les blocs que nous avons sur la page d'accueil. Je pense que ces éléments peuvent aussi être réutilisables. Avant de copier et coller ces éléments, Allons au bloc de fonctionnalités et créons un diblock à l'intérieur afin que ceux-ci puissent être soigneusement organisés, comme les couleurs. Donnons-lui un wrapper de composant de classe. Et cet emballage de composants obtiendra bientôt quelques rembourrages ou marquages. Mais maintenant, nous pouvons copier et coller tous les blocs de fonctionnalités que nous avons sur notre page d'accueil ou juste un blog de fonctionnalité parce que c'est assez similaire, mais je vais simplement les copier et les coller tous. Et pour que nous ayons ce composant wrapper, nous pouvons maintenant facilement distribuer la taille et les marges sont des paddings entre ces éléments, fait des blocs de fonctionnalités, et nous pouvons utiliser ce composant, se référer à tous nos composants aussi. Donc ici, nous pouvons appliquer une marge à cette classe, mais aussi nous pouvons créer la structure pour nos boutons qui est à peu près la même. Jetons donc un coup d'oeil ici et utilisons le composant de classe proprement dit. Et puis mettons un bouton à l'intérieur. Ou je vais simplement copier et coller. Nous pouvons simplement utiliser le concepteur pour saisir le fond. Je vais supprimer celui-ci et le mettre dans son propre emballage de composants. Cette structure est donc plus lisible maintenant et lorsque nous publions le guide de style, il sera plus facile de naviguer à travers ces éléments. Et aussi nous pouvons le faire avec du texte si vous voulez. Couleurs, plutôt sympa. Tout comme le début de notre guide de style, il va finalement grandir en taille, mais pour l'instant, copions et collez une autre section. Créons celui qui contiendra des éléments FAQ. Et c'est une autre chose que nous pouvons réutiliser depuis notre page d'accueil. Je pense que les éléments FAQ sont un bon candidat pour aller au Guide de style parce que ceux-ci sont avec une animation cool et ils révèlent quelques textes. Peut-être que nous allons utiliser cette structure dans d'autres pages. Nous allons donc copier et coller cet élément dans le guide de style. Et en attendant, il vaut la peine de remarquer que dans cette section des composants, j'ai essayé d'utiliser la conception atomique. J' ai essayé de copier et coller des atomes et des molécules. Je n'utilise pas toute la structure ici telle que les mises en page, car c'est trop pour les composants. Donc, si nous revenons à la page d'accueil et nous avons des structures qui sont comme le pied de page ou le menu. Nous voulons nécessairement copier et coller le menu entier dans les composants, va créer une section séparée. Mais à partir de ce menu, nous pouvons évidemment créer des parties, des bits et des morceaux, des atomes et des molécules, tels que des liens en panne ou de navigation, sorte que nous les ayons dans notre section des composants. Ici, j'ai le symbole, le blog de sous-menu que j'ai créé dans le cours précédent. Et je pense que c'est un excellent candidat de le mettre dans la section des composants. C' est une molécule qui fonctionne comme un sous-nombre d'éléments. Donc, créons un autre H3 pour ce bloc de nombreux. Et nous allons coller le soleil beaucoup bloc ici à partir de symboles que je peux simplement double-cliquer et, et l'utiliser là-dedans. Donc, ce que je veux dire par ceci, comme j'ai essayé de diviser toute la mise en page sur ou des sections à partir de composants que je peux utiliser pour créer ces sections. Vous pouvez utiliser différents bits et pièces comme composants, en particulier les éléments formés et toutes les autres choses que vous utiliserez comme atomes ou molécules sur votre site Web. Mais je ne vais pas les ajouter maintenant. Je vais créer un autre élément de sections à ceux-ci. Je les ai nommés sections, mais ce sont des mises en page en fait les structures qui contiennent beaucoup d' atomes différents ou de molécules liés ensemble et ils créent toute la navigation du menu, peut-être pied de page ou un héros éléments sur notre page. Et il a également travaillé pour créer dans notre guide de style un endroit séparé pour ces schémas pour ces mises en page. Nous avons cette section de mise en page ici dans Webflow. Ce sont des mises en page prédéfinies. Et comme vous pouvez le voir, cela contient des images et des cartes et peut-être des titres. Donc, certains atomes et molécules se sont réunis pour former une section. Nous pouvons donc avoir ces sections à portée de main. Nous pouvons créer des composants à partir des sections, puis les réutiliser à nos fins. Surtout si vous créez quelque chose qui est un guide de style un peu plus élaboré. Donc une sorte de système de conception. Ces sections sont vraiment, vraiment importantes parce que vous allez probablement utiliser ce système de conception pour différentes applications et sites Web que vous allez créer. Ensuite, vous pouvez réutiliser les sections d'un projet à un autre. Laissez-moi utiliser la section d'en-tête que nous avons ici et placez-la là-dedans. Donc, la section d'en-tête est un bon candidat pour y aller. Aussi, créons une autre section. Il suffit de dupliquer celui que nous avions et d'avoir cette section d'en-tête et de pied de page ici. Donc, les grands éléments de bloc tels que navbar et pied de page devraient y aller. Et cela est particulièrement utile si vous considérez cela comme un composant et puis peut-être imbriquer un autre composant dans l'en-tête et le pied de page. Et maintenant Webflow est capable de le faire. Ainsi, vous pouvez imbriquer le composant logo dans l'en-tête et le pied de page. Et puis si vous voulez changer le logo pour l'ensemble du site, si vous appliquez des changements de marque et vous devez le remplacer. Et ces composants imbriqués peuvent vraiment vous aider à accomplir cela dans toute la portée de tous les, tous les éléments qui contiennent les éléments du logo. Nous allons maintenant copier et coller le pied de page dans notre guide de style. Et parfois, vous obtenez l'information que éléments de section ne peuvent pas être imbriqués les uns aux autres. Cliquez sur l'élément de corps et maintenant Commande V pour coller le pied de page. Maintenant, nous avons à la fois l'en-tête et le pied de page, à la fois l'élément de navigation et le pied de page en place dans nos sections. Et c'est vraiment utile de les avoir dans le guide de style, ainsi que d'autres mises en page que vous pourriez utiliser. Donc, le début de notre guide de style est prêt et stylet, C'est quelque chose qui devrait évoluer avec votre projet, avec vos sites Web. Il finit par devenir système de conception. Mais à moins que vous ayez déjà un système de conception en place que vous souhaitez le transférer à Webflow. Vous ne devriez pas vraiment passer beaucoup de temps à penser différentes options de typographie et couleurs que vous pourriez ajouter plus tard, il est préférable d'avoir déjà quelques mises en page, puis ajouter des éléments au guide de style sur la route. Comme vous pouvez le voir, quelqu'un peut prévisualiser toutes les interactions et animations dans le guide de style sur la page de guide de style, il peut copier et coller des valeurs hexadécimales de couleurs, prévisualisé cette topographie. C' est donc un endroit idéal pour vérifier le style de votre site Web, mais aussi c'est la seule source de vérité pour tous les éléments de la page. Donc, si vous voulez changer la typographie, il suffit d'aller au guide de style, changer les en-têtes et ils changeront sur toute la page. Il en va de même pour les composants. Vous pouvez modifier les composants à partir de là et ils seront mis à jour en conséquence sur toute la page. Malheureusement, il s'agit d'un seul projet. Donc, si vous voulez créer plusieurs pages ou pages de destination en fonction du guide de style, ce que vous devez faire est de dupliquer ce projet encore et encore, puis supprimer les pages que vous n'utilisez pas de guide de style steve, ou tout simplement créer un projet avec un guide de style comme base et dupliquez-le. Et puis vous pouvez commencer à partir de là et créer d'autres pages. Ce n'est pas vraiment pratique si vous voulez changer la typographie dans tous les projets ou peut-être le logo parce que vous devriez aller à chaque individu. Mais nous espérons que Webflow viendra parfois avec une solution qui nous permettra d'avoir ce système de conception lien vers l'ensemble du projet. Alors gardez un œil sur ça. Et en ce qui concerne la section du guide de style, je pense que c'est à peu près tout. Aussi une option qui vaut la peine de noter comme la possibilité de partager ce projet. Vous pouvez inviter des collaborateurs. Donc, si vous travaillez sur un guide de style ou un système de conception avec vos coéquipiers, C'est vraiment utile parce que lorsque vous avez un plan d'équipe pour Webflow, vous pouvez les inviter et vous pouvez travailler complètement. Et vous avez également la possibilité de partager le projet avec le lien en lecture seule afin que quelqu'un puisse prévisualiser toutes les couches et les choses que vous avez dans le document. Il suffit de copier ce lien qui a été créé et de l'envoyer à n'importe qui. Vous voulez pouvoir le vérifier dans le concepteur, mais ne pas pouvoir le modifier. Donc, c'est à peu près tout pour créer la structure de guide de style. Et ce n'est qu'une approche. C' est assez simple si vous voulez voir un jeu plus sophistiqué et avancé sur le guide de style et les systèmes de conception. S' il vous plaît checkout système flow.com. Vous y trouverez des tutoriels ainsi que des cadres prêts à l'emploi pour Webflow que vous pouvez utiliser pour créer et travailler sur un système de conception qui est vraiment, vraiment vaste. Pour l'instant, souvenez-vous de ces options de partage et nous sommes prêts pour les prochaines leçons car nous venons de créer notre premier guide de style. Merci pour l'attention et à vous voir dans la prochaine leçon. 7. Aperçu du projet: Salut les gars et bienvenue à la première leçon de ce cours. Je suis super excité de t'avoir ici. Et c'est le cours avancé sur Webflow, qui signifie que nous ne traiterons pas autant de la mise en page et du style. Je vais vous montrer quelques fonctionnalités plus avancées de Webflow ainsi que la création de la structure de notre site Web, par exemple, avec CMS, ainsi que la création d'un guide de style simple. Et qu'est-ce que vous regardez en ce moment, c'est un site Web que nous avons créé dans le cours de base. Donc, si vous voulez créer une page de destination, un site Web comme celui-ci, allez de l'avant et vérifiez le cours de base, puis vous apprenez tout sur la structure HTML et la mise en page. Ce que nous allons faire dans ce cours, ça pourrait être une sorte de continuation et nous allons utiliser CMS créer une structure de blogs pour ce site, pour étendre ce site Web et créer un bloc en plus de cela. Pour l'instant, nous avons une structure simple ici. Il s'agit d'un site d'une page avec seulement des en-têtes simples et quelques sections que nous avons créées. Et aussi la première chose que je vais vous montrer dans la leçon suivante est comment créer un guide de style qui nous permettrait essentiellement de travailler un peu plus facilement dans Webflow et de créer toutes les autres pages en un rien de temps. Je veux dire, en utilisant, en réutilisant les éléments que nous avons déjà créés. Donc, laissez-moi aussi rapidement passer à la structure que j'ai préparée pour les pages suivantes que nous allons créer ceci comme une simple maquette d'un blog que nous allons créer. Je ne me sentais pas dans les photos parce que nous allons utiliser un pour CMS pour sentir tous les éléments bancaires ici et pour charger les photos. C' est la mise en page que j'ai créée dans Adobe XD. Vous pouvez trouver ce fichier dans les fichiers source de ce cours. Ce que nous avons ici est la page d'accueil simple pour le blog. Vous verrez que nous avons logo et menu simple en haut avec quelques catégories que nous allons créer. Et puis nous avons cette section de héros avec article vedette. Et toutes les données qui seront affichées proviendront du CMS. Nous avons donc cette balise de fonctionnalité et nous avons aussi l'en-tête, le nom de l'article, l'extrait, ainsi que lié à cet article et sur le côté droit. Nous avons également une photo que nous allons charger dynamiquement à partir du CMS. Ci-dessous, cela va créer quelques sections qui contiendront également nos données de CMS. Et cela afficherait des articles récents. Et puis nous avons aussi des logiciels. Donc, fondamentalement, tout cela vient de nos catégories et nous allons juste afficher les derniers articles à l'intérieur de la catégorie. Aussi, nous avons un tagué comme indiqué pour certains des éléments. Et vous pouvez voir que c'est une structure très simple où nous avons fondamentalement quelques données de CMS. Donc, une image 40 pour l'article ainsi que le titre ici est l'extrait. Et aussi nous avons les informations sur l'auteur ainsi que la catégorie à laquelle appartient ce post. Cette catégorie est également affichée sous la forme du projet de loi, la petite bulle en haut de la vignette. Et c'est fondamentalement tout pour la page d'accueil. C' est super simple, mais cela nous permettra d'utiliser tous les différents concepts du CMS. Ensuite, nous avons une autre page, c'est la page de catégorie. Et c'est super cool, c'est que Webflow génère automatiquement ces pages de catégorie pour nous et le remplit avec les données de cette catégorie. Donc, tous les messages qui sont dans la catégorie, nous allons également ajouter ce petit drapeau vedette à la publication afin que nous puissions les réorganiser. Enfin, le point de page présente un seul article dans notre blog avec la date, l'auteur, ainsi que la catégorie et le titre. Ici, nous avons l'observation et le contenu de l'article sur le côté droit, nous avons aussi un simple formulaire d'inscription à la newsletter ainsi que le partage des médias sociaux. Donc, tout est assez simple, mais je pense que c'est une structure assez soignée qui nous permettra explorer CMS dans Webflow ainsi que d'autres choses. Donc, fondamentalement ici, nous serons en mesure d'afficher facilement différents messages qui sont dans la même catégorie que celui que nous lisions de sorte que lorsque quelqu'un finit de lire, il peut aller à un autre matériel et autre article qui pourrait être intéressant. Mais oui, donc ce sont des pages gratuites qui vont explorer, créer à partir de zéro et vous CMS pour alimenter avec les données, ainsi que de créer la page de l'éditeur pour quiconque va ajouter le contenu à notre blog afin que cette personne puisse facilement ajouter de nouveaux messages directement depuis le navigateur. Et je vais vous montrer le rédacteur en chef aussi. Ce que nous allons faire dans Webflow, c'est que nous allons commencer avec ce projet existant que nous avons, mais c'est super simple. Encore une fois, je vous recommande de consulter le cours de base si vous voulez voir comment j'ai fait ce projet. Mais ce qui est important dans ce projet, c'est qu'il y a une page de guide de style que nous avons commencé à créer. Donc, ici, nous avons un simple SAP nombreux blog que nous avons créé. Et je l'ai fait juste pour vous montrer comment créer des composants. Mais maintenant, nous allons travailler sur cette page de guide de style parce que c'est, notre site va avoir de plus en plus de pages. Il est tellement plus facile d'organiser une sorte d'un structuré avec des composants afin que vous puissiez réutiliser les éléments que vous avez déjà créés et qu'ils restent cohérents sur toute la page, ainsi qu'il est super facile de les utiliser glisser-déposer sur les autres pages, dans ce cas les pages de blog que nous allons créer. C' est la structure à partir de laquelle nous allons commencer. En outre, vous trouverez le lien vers cette structure vers votre, dans vos fichiers source pour ce cours. Vous pouvez donc commencer par dupliquer ce projet. Et nous allons nous attaquer au guide de style et créer une sorte de guide de style. Ou peut-être le début d'un système de conception dans la prochaine leçon. Et puis nous allons créer une structure pour la base de données, la structure CMS qui alimentera notre gars avec les données, ainsi que plus tard nous allons explorer quelques intégrations, peut-être des outils sans code et Zapier, je vais vous montre comment développer ce site Web et ajouter des fonctionnalités supplémentaires sur le Web pour ces fonctionnalités avancées. J' espère que vous êtes heureux de ce qui va se passer dans la prochaine leçon. Alors passons directement à ça. Je te vois dans la prochaine. 8. Première collection: Bienvenue à cette prochaine leçon. Et dans celui-ci, nous allons créer une configuration de collection pour notre CMS dans Webflow. C' est super important et cela définira la structure de données pour notre blog et les relations entre les éléments dans le bloc. Pensez-y donc comme une base de données parce qu'il s'agit en effet d'une base de données qui sera en cours d'exécution sur ces serveurs. Et cette base de données contiendra différents types de données et nous pouvons créer les liens entre les éléments qui vont créer. Ainsi, par exemple, aller à créer des catégories, puis des billets de blog et des auteurs et nous obtenons le lien entre eux ensemble. Si vous travaillez avec une sorte de base de données, que ce soit MySQL ou une base de données SQL, ou même avec des feuilles de calcul simples dans Excel ou Google Sheets ou peut-être une table aérienne. Ce sera une sorte de structure similaire. Ce qu'on va faire, c'est la première carrière, créer notre première collection CMS. Et ici, vous avez quelques modèles de collection. Ainsi, par exemple, vous pouvez sélectionner parmi les catégories et les projets et les clients. Mais au lieu de cela, laissez-moi simplement créer la collection à partir de zéro. Donc, ce que nous devons définir ici, c'est le nom de la collection. C' est assez important, car cela nous permettra de savoir quel type de données se trouvent dans la collecte. Mais aussi il créera automatiquement les URL de notre page Web avec le nom de cette collection particulière. Je vais vous montrer comment ça marche si vous commencez par des noms de catégorie. Donc ce que nous allons faire ici, c'est créer des catégories. Et j'utilise le pluriel exprès parce que ce serait toutes nos catégories. Et la version singulière est créée automatiquement par Webflow, vous pouvez les modifier si quelque chose ne va pas et ce n'est pas grammaticalement correct. Mais le pluriel est des catégories, et le singulier est la catégorie. Et nous allons parler de cette collection de cette façon. Donc, nous allons avoir toutes les catégories dans la collection et l'entrée unique serait catégorie. Donc maintenant l'URL de la collection est automatiquement générée et c'est le nom du dossier dans lequel vos pages de catégorie seront stockées sur le serveur. Donc, si vous jetez un oeil à la structure URL, ici vous avez le nom des catégories, puis sera une page de catégorie qui sera automatiquement créée par Webflow. Vous pouvez changer ce nom. Vous pouvez modifier l'URL de la collection indépendamment du nom de votre collection. Par exemple, si vous voulez l'avoir comme mon blog website.com slash. Mais nous allons juste rester avec les catégories. Je pense que c'est bon. Donc, nous aurons toutes les pages de collection automatiquement générées sous catégories, puis les catégories de page de catégorie pour les blocs sont assez courantes. Nous voulons créer des sections différentes pour notre blog. Différents thèmes qui contiendraient, par exemple, articles de technologie ou de marketing ou de blockchain. Et puis nous allons créer une autre collection CMS avec des billets de blog réels. Et nous allons lier ces catégories à des articles de blog. Mais je vais te montrer comment le faire plus tard. Mais lorsque vous définissez une nouvelle collection CMS, vous devez également définir les champs de collection. Ces deux champs, informations de base, sont ajoutés par défaut par Webflow. Donc, c'est le nom et le laitier. Celles-ci sont nécessaires. Vous pouvez vous asseoir un petit astérisque à côté du nom. Et comme vous pouvez le voir, ce mou ici est nécessaire pour créer une URL unique qui mènera à votre catégorie. Par exemple, le marketing de la catégorie slash mettra en valeur tous les messages du marketing. Alors modifions cette information de base d'abord, je vais cliquer sur cette petite icône à droite et nous pouvons créer le nom de l'étiquette ici et aussi quelques textes d'aide. Et ça. Apparaissez pour nos collaborateurs et les collections CMS. Mais aussi, nous pouvons créer et ajouter des champs personnalisés à cette catégorie. Alors imaginez avoir une feuille de calcul et dans la rangée nous avons cette collection avec le nom, mais alors nous pouvons avoir différentes colonnes avec différents champs, par exemple, du texte et des images et des vidéos. Donc, ce que nous avons est la possibilité d'ajouter des champs personnalisés à la catégorie. Par exemple, nous voulons que cette catégorie ait une image ou une couleur spécifique, ou peut-être un lien. On peut le faire. Nous pouvons définir le type du champ personnalisé qui va créer. Et dans ce cas particulier, je veux créer un autre champ de texte simple parce que je veux ajouter une description à notre catégorie. Ce champ n'est donc pas obligatoire. Je vais laisser cette case à cocher vide et je vais lui donner une étiquette, un nom pour cette catégorie qui serait une description. Et vous pouvez sélectionner une ligne simple ou multiligne si cela doit être long texte, vous pouvez le définir comme multiligne. Et puis dans l'éditeur, le champ de texte serait un peu plus grand. Et aussi, vous pouvez avoir ce nombre de caractères maximum et minimum, et c'est tout. J' ai donc créé un autre champ personnalisé. Vous pouvez créer jusqu'à 30 champs pour chaque collection. Et puis vous avez ces champs de base supplémentaires avec le nom et le mou. Et vous avez aussi trois champs qui sont automatiquement générés par Webflow. Il s'agit de la date d'accueil, de la date, de la modification et de la publication, et ceux-ci seront automatiquement ajoutés. Vous pouvez supprimer la collection. Pour supprimer la collection, vous devez d'abord vous assurer qu' aucune instance de cette collection ne se trouve sur le concepteur, mais nous allons l'explorer plus tard. Pour l'instant, nous avons notre collection CMS simple avec trois champs. Je vais le créer. Et Webflow vous permettra de générer des données factices, mais nous ne voulons pas le faire pour l'instant. Nous allons donc créer une nouvelle barre de catégorie par nous-mêmes. Et donnons-lui un nom. La première catégorie de notre livre serait Blockchain. Collons-le là-dedans. Et ce décalage est généré automatiquement avec des majuscules changées en minuscules. Et aussi si vous ajoutez des caractères spéciaux, par exemple, la barre d'espace. Si vous appuyez là dans le nom, vous verrez que Webflow le transforme en tiret. Et c'est parce qu'il crée l'URL pour cette catégorie particulière et la page de catégorie en fonction du laitier que vous pouvez modifier indépendamment. Maintenant, payons quelque chose dans le champ de description et créons le. Mais avant de le faire, vous pouvez cliquer sur cette petite flèche et l'enregistrer tant que brouillon afin de créer différentes catégories, mais si vous ne voulez pas encore la publier sur votre site Web, vous pouvez créer des brouillons. Mais même si vous avez créé maintenant, il n'est pas automatiquement publié. Ainsi, les modifications sont visibles sur le site Web de votre éditeur. Au lieu de cela, il a ce brouillard spécial, c'est un statut spécial. Et maintenant, c'est une orange. Il dit qu'il est mis en scène pour publication. Qu' est-ce que ça veut dire ? Eh bien, si vous publiez votre site Web soit sur le sous-domaine Webflow ou votre propre domaine, ces modifications et collections CMS seront publiées tous ensemble. Vous pouvez donc les laisser sous forme de brouillons si vous ne voulez pas les publier, ou vous pouvez les mettre en scène pour la publication. En outre, vous avez exporté des boutons importants. Ceux-ci sont vraiment pratiques si vous voulez créer beaucoup d'entrées. Par exemple, vous pouvez maintenant exporter le fichier CSV afin de voir la structure. Ensuite, vous pouvez créer d'autres entrées et ensuite, enregistrer le fichier et l'importer. Donc, vous n'avez pas à voir avec si ces interface utilisateur. Aussi, vous pouvez migrer des fichiers, migrer des données à partir d'autres systèmes, tels que Shopify ou d'autres messages de blog de WordPress ou ce que vous avez. Donc, si vous allez à, si vous sélectionnez la première colonne dans Excel, puis allez à Données, puis allez à convertir du texte en colonnes. Vous pouvez le définir pour être délimité. Le délimiteur est une virgule. Alors finissons maintenant et vous pouvez voir que nous avons toutes les données dans différentes colonnes. Il est donc facile d'ajouter plus de catégories ici, puis de l'enregistrer comme fichier CSV. Et puis encore une fois, allez au flux web et nous pouvons importer cela tout à fait. Mais pour notre but spécifique, nous n'avons pas vraiment besoin de le faire parce que nous n'avons que quelques collections à créer. Donc, nous allons créer d'autres catégories sont quelques catégories de collections. Ceux-ci iront tous dans la même collection CMS. Et voici le second, mobile. Allons de l'avant et créons ça. En passant, si vous avez fait une erreur, vous allez juste sélectionner. Vous pouvez sélectionner tout ce que vous avez créé. Et maintenant, vous pouvez le supprimer ou vous pouvez changer son statut en brouillon afin qu'il ne soit pas mis en scène pour publication. Il ne va pas être publié à moins que vous venez d'indiquer et le site de l'éditeur. Maintenant, cette croyance, une catégorie de plus, et c'est le marketing. Je vais juste copier et coller la même description pour l'instant. Donc nous avons quelque chose ici. Et le dernier, la dernière catégorie va créer pour notre bloc seraun la dernière catégorie va créer pour notre bloc sera logiciel avec des articles sur le développement logiciel probablement. Créons-le, et c'est à ça que ça ressemble. Maintenant, ce que nous voulons créer dans la leçon suivante c'est l'autre structure en dehors de la catégorie. Alors fermons tout de suite. Et je te vois dans la leçon suivante. 9. Configuration de collection: Salut les gars et bienvenue à cette prochaine leçon. Dans celui-ci, j'aimerais vous montrer comment créer toutes les collections pour notre CMS et Webflow. Nous allons donc créer une collection d'articles et les auteurs et tous les différents qui nous aideront à structurer des données dynamiques sur notre page web. Cependant, si vous suivez juste le long des vidéos, je pense que vous pourriez trouver un peu difficile de comprendre pourquoi exactement j'ai trouvé telles conventions et propriétés de nommage et pourquoi est-ce que je crée ces structures ? Je pense que si vous suivez juste le long, pourrait être un peu difficile, mais si vous essayez de faire avec vous-même et essentiellement envelopper votre tête autour de l'idée de créer un blog et sa structure. Je pense que ce sera assez évident. Eh bien, tout d'abord, a essayé de définir le point de départ au plus petit morceau de données dynamiques. Mais vous voulez avoir, par exemple, sur ce billet de blog, nous avons toutes les différentes données ici et tout doit être dynamique. Donc, le titre ainsi que le contenu du billet de blog est cette dynamique. Ensuite, nous avons cette image ainsi que du contenu statique sur le côté droit. Donc, à partir de là, nous allons penser à quels éléments devraient définir notre article qui devrait être imagé et titre et auteur, ainsi que le contenu et peut-être quelques balises. Et nous avons aussi quelque chose qui s'appelle en vedette ici. Donc, ce TikTok sur le côté gauche de l'image nous dit juste que nous voulons également présenter certains des billets de blog au moins. Et c'est un excellent exemple de la façon dont nous pouvons penser à créer cette structure en vedette. Donc, si vous prenez ce petit élément en vedette et nous aurons aussi des tags ici. Ainsi, par exemple, nous avons ici la conception et le développement et la typographie, et nous avons aussi différentes catégories. Nous devons donc réfléchir à la façon de le créer dans CMS pour que cela ait vraiment du sens. Donc, la fonctionnalité est fondamentalement oui, non. Donc, cela appartient à l'article. C' est vrai, fausse déclaration. Et cela pourrait être un champ simple que nous allons juste basculer dans l'article pour dire qu'il est en vedette. Plus tard, nous pouvons décider que cet article qui est présenté sera, par exemple, présenter sur la page principale. Ensuite, nous avons des balises, et ensuite nous devons également décider si nous voulons créer des balises dans nos articles, articles blog, ou si nous voulons créer une collection distincte pour les balises telles que la typographie de conception, , et ainsi de suite. Et c'est une décision importante en termes de CMS parce que soit nous la divisons en différentes collections, soit nous créons simplement une collection et nous allons ajouter cette taxe, par exemple, dans un champ de texte et peut-être les séparer avec un point-virgule ou un coma ou quoi que ce soit. Mais dans ce cas, pour la taxe, au moins je pense qu'il serait préférable d'avoir une structure distincte pour la taxe, surtout que je veux créer des couleurs différentes pour chacun d'eux. Donc, je veux l'onglet Design à, disons avoir la couleur bleue et ensuite le développement aura la couleur verte. Donc, cela signifie que je dois penser à utiliser deux propriétés différentes. Donc deux champs différents, un pour le texte de contenu réel et le second pour la couleur. Donc, dans ce cas particulier, il serait préférable de créer une collection séparée avec des balises. Et puis chaque pile aura le nom et la couleur, sorte que je n'ai pas à me souvenir de toutes les valeurs hexadécimales de couleur pour chaque post que je crée. Je relie juste cet élément de collection spécifique à la deuxième collection, la collection de l'article. Donc, ce que Webflow nous permet de faire, c'est si vous créez différentes collections, que vous pourriez penser comme, disons des feuilles de calcul Excel. Nous avons donc différentes feuilles de calcul pour les articles et les tags et pour les auteurs. Et puis vous pouvez les relier ensemble. C' est une sorte de si vous utilisez Airtable, vous pouvez relier différentes feuilles ensemble et différents enregistrements. Et c'est une idée similaire. Vous serez en mesure de lier les deux articles de taxe. Et puis lors de la création d'un article spécifique, il suffit de lier à la balise spécifique ou à la taxe avec des champs spéciaux, ils sont appelés champ de référence ou de référence multiple dans Webflow, CMS. Donc, nous allons l'explorer dans une seconde. Je vais vous montrer comment définir la structure de notre blog. Et c'est vraiment important concept que vous exécutez avant commencer à développer votre site Web avec Webflow, ce que vous faites est de faire défiler votre mise en page et de penser à différentes connexions ainsi que la structure du CMS. Donc, d'abord, vous pensez ce qui devrait être statique et ce qui devrait être dynamique. Par exemple, les éléments de menu, marketing logiciel, mobile et blockchain. Vous pouvez créer un menu statique, à droite, comme ceci. Mais si vous l'avez dans le CMS en tant que catégories, vous pouvez lier ces catégories à des billets de blog et ensuite vous pouvez afficher automatiquement ces éléments dans le menu de sorte que lorsque vous changez quelque chose ou peut-être que vous ajoutez une autre catégorie, il sera automatiquement mis à jour. Et puis vous commencez également à penser aux relations entre les différentes collections. Donc, par exemple, pour les auteurs, devrais-je créer une collection distincte s'il n'y a qu'un seul auteur ici et qu'il n'y a qu'un nom de cet auteur. Peut-être que ce devrait être l'élément ce champ dans les collections d'articles. Mais en pensant à l'avenir, je pense que nous devrions créer une collection avec des auteurs afin que nous puissions ajouter une photo ou une bio. Et puis nos clients veulent créer, disons une page séparée avec l'extérieur. Nous serons en mesure de le faire avec cette collection spécifique. Et même si vous avez du mal à envelopper la tête autour du personnel de collecte et que toutes ces données réfléchissent, je suppose que c'est juste une question de commencer et créer des collections parce que vous pouvez toujours les modifier plus tard. Alors allons de l'avant et ouvrons notre CMS dans Webflow et créons une autre collection. Nous avons 14 catégories. Et maintenant, créons une collection avec des balises. Je pense que la taxe devrait être perçue séparément parce qu'elle a des couleurs et des noms distincts. Donc le nouveau nom de la collection serait taxe au pluriel, et nous avons aussi la version singulière. Et dans l'URL, je pense que je vais rester avec tag. Singulier. La taxe est un peu bizarre. Nous allons avoir ce contribuable est une page de balise unique et qui sera automatiquement généré avec Webflow. Je vais vous montrer comment ces pages fonctionnent en une seconde, mais vous avez juste besoin de l'URL de collecte pour taxer ou, ou renommer et le nom de l'info de base et le mou, nous allons le laisser, mais nous allons en ajouter un de plus et ce sera la couleur. Donc, en dehors du nom, nous allons également appliquer cette couleur personnalisée à chaque étiquette que nous allons créer. Par exemple, la topographie tag ou peut-être Designer. Tout ce que nous voulons créer en tant que tag. Et ça va être une couleur tuck, et j'ai besoin de ce champ. Sauvegardons ce champ. C' est tout pour notre première, deuxième collection. Créons cette collection. Et encore une fois, nous pouvons initier cela avec des données. Je vais l'ignorer pour l'instant et juste créer quelques balises simples que j'ai déjà un presse-papiers avec leurs couleurs. Nous avons donc le développement. Et puis créons un autre qui sera conçu. Et si vous créez des champs personnalisés avec des types de données spécifiques, comme la couleur ici, vous pouvez cliquer sur cette petite icône, icône de dépôt, puis vous pouvez sélectionner la couleur. Dans ce cas, j'ai la couleur de mon design. Et pour le dernier que je vais créer, donnons-lui un nom, une topographie et une typographie. Sélectionnez peut-être la couleur de ce sélecteur de couleur et sélectionnez ce type de couleur rouge orange, enregistrez-le, et c'est tout pour ma deuxième structure. Nous avons donc des catégories maintenant et nous avons aussi des impôts. Créons une autre collection CMS. Et cette fois, nous allons créer des auteurs et utiliser cet ensemble de données prédéfini de Webflow. Si vous cliquez sur les auteurs, vous verrez que le nom de la collection est correct. Ensuite, nous avons l'URL de la collection et les pages spécifiques qui seront générées ont cet auteur préfixe. Et nous avons aussi, dehors des informations de base, certains champs personnalisés tels que bio et résumé et image et e-mail. Bien sûr, nous pouvons sélectionner l'un de ces champs et nous pouvons le changer de ligne simple à multiligne et nous pouvons changer de sorte que les champs sont obligatoires par défaut, tous sont facultatifs. Nous avons également un lien de profil Twitter et le profilage Facebook. Vous pouvez le changer, vous pouvez supprimer ceux dont vous n'avez pas vraiment besoin, mais je vais juste rester avec ceux générés automatiquement. Et sur le côté droit, vous avez également l'aperçu de l'éditeur, ce qui vous donne une idée de ce que sont ces champs. Créons cette collection. Commençons cette collection avec des données afin que je n' ai pas besoin de chercher de Lorem Ipsum et de le coller là dedans. Je vais ajouter cinq éléments au début. Et Webflow s'occupera de générer différents noms pour mon autorisation, ainsi que leurs bios et leurs résumés biographiques. Et nous avons aussi une photo et une photo à ce assez intelligent et Webflow parce que vous avez cette photo avec une personne en fait pour les autres. Ce n'est peut-être qu'une coïncidence, mais le voilà. Et aussi une adresse e-mail, évidemment quelques liens de profil de données imaginaires et pour Facebook et Twitter. Mais ils sont là. Et nous pouvons maintenant utiliser ces données pour concevoir et mettre en valeur ce que nous avons créé. Une autre collection que je vais créer, ce billet de blog, c'est la plus importante. Vous pouvez utiliser la structure prête à l'emploi, mais je vais juste la créer à partir de zéro. Il peut s'agir de billets de blog ou d'articles. Vous pouvez le nommer comme vous le souhaitez. Je suppose que cette URL de collection est un peu bizarre. blog, peut-être que nous allons avoir des articles ici ou tout simplement quitter le blog et c'est très bien. Maintenant, jetons un coup d'oeil aux champs personnalisés. C' est la partie la plus importante. Nous allons définir un grand nombre de champs personnalisés différents pour les articles. Mais nous allons d'abord consulter la mise en page. C' est la source d'inspiration pour ce que nous allons réellement utiliser ici. Et nous avons cette image, c'est un rectangle et nous allons ajouter un autre format, aussi un autre format, des formats d'image pour Instagram. En passant, nous pouvons avoir ce champ d'image multiple et champ d'image multiple est capable accepter jusqu'à 25 images dans un seul champ de la collection afin que plus tard, vous pouvez l'utiliser dans une lightbox. Par exemple, si vous avez des photos de produit pour votre site e-commerce, mais nous allons utiliser uniquement l'image. Ce serait une seule image, mais nous allons créer deux champs comme celui-ci. Le premier serait un rectangle. Donc, avec le rapport d'aspect , une image à une à une. Et puis le second, ce serait celui qui est affiché dans XD, c'est 16 sur 9. Et vous pouvez également ajouter du texte d'aide. Donc, par exemple, si vous préférez, Disons 1600 fois 900. Ceci est également affiché dans l'éditeur précédent dû. Toute personne gérant votre site Web saura quelle est la résolution préférée des images. Et aussi je vais marquer ce champ comme nécessaire car c'est l'image sera utilisée dans les vignettes ainsi que dans le post. Sauvegardons ce champ. Et le champ suivant serait un extrait. Donc, l'extrait est dans différents endroits. Donc, par exemple, dans notre article, c'est ce peu au sommet. Nous l'avons aussi ci-dessous sont les miniatures. Et si cela est présenté, nous avons aussi des lignes libres de l'extrait visible sur la page d'accueil. Donc, créons un autre champ de texte brut, mais assurons qu'il s'agit de plusieurs lignes. Et nous avons besoin de trois lignes de ce texte. Il est donc préférable de consulter la mise en page combien de temps exactement ce texte devrait être pour s'adapter à ce modèle de ligne libre. Donc je vais l'avoir entre cent et cent soixante caractères. Et cela est également nécessaire pour l'étiquette que nous allons utiliser extrait et gardons ce champ. Maintenant, le domaine le plus important pour l'article, ce serait le contenu des articles. Et nous n'utiliserons pas de textes simples avec plusieurs lignes car ici nous n'avons qu'un texte simple. Cependant, dans les billets de blog, nous pouvons également ajouter des vidéos et peut-être nous voulons ajouter quelques images. C' est pourquoi nous allons utiliser du texte enrichi. Et c'est le champ qui nous permettra d'avoir la structure avec des en-têtes et des paragraphes et des images et du contenu incorporé. Et aussi pour les personnes qui gèrent notre contenu dans l'éditeur. Ils auront un bon éditeur WordPress comme pour ce riche champs de texte. Au fait, vous pouvez avoir un nombre minimum de caractères, mais je vais juste le laisser vide, mais ce champ est évidemment nécessaire. Nous avons besoin de contenu pour une introduction en bourse, blog et l'article. Et c'est la structure de base. Donc, au moins, c'est la plupart des choses que nous verrons ici. Mais aussi, nous avons quelques articles qui pourraient être un marqué comme présenté. C' est un champ simple que nous allons utiliser ici. Et nous allons utiliser le commutateur, les commutateurs, simples, vrai-faux. Et donnons-lui un nom de vedette. Enregistrez ce champ. Et jetons un coup d'oeil dans l'éditeur. Donc, quelqu'un serait en mesure d'utiliser la fonctionnalité de la publication par défaut qui serait définie sur Non. Mais je peux définir le drapeau des messages à mettre en vedette. Et puis en fonction de cela, je pourrais laisser dire affiché sur la page d'accueil, ok, et ce serait pour les données statiques pour chaque article. Maintenant, nous voulons utiliser les données que nous avons déjà créées dans différentes collections CMS telles que authorise et tags et catégories. Parce que chaque article, chaque billet de blog devrait avoir son auteur et certains impôts et la catégorie à laquelle il appartient. Donc, nous allons créer un autre champ, et nous allons utiliser champs de référence et de référence multicouche pour accomplir cela, la différence entre les deux est que le lien de champ de référence vers un enregistrement, par exemple, un auteur et un champ de référence multiple peuvent lier plusieurs enregistrements de ces différentes collections en termes de catégories. Donc, nous allons d'abord avoir des catégories, nous allons utiliser un seul champ de référence. C' est simplement parce que nous voulons que chaque billet de blog appartienne à une seule catégorie. Et si vous voulez l'avoir dans l'autre sens, si vous voulez avoir, vous savez, blogs placés dans différentes catégories ou peut-être créer une catégorie pour de nouveaux articles et articles de fond. Vous pouvez le faire, puis créer un champ de référence multiple et le lier. C' est juste une décision d'affaires pour les auteurs. Je vais également utiliser un champ de référence unique parce que dans mon cas, il va être un auteur pour un billet de blog. Mais encore une fois, si vous avez des articles de publication qui ont plusieurs auteurs, vous pouvez simplement créer un champ de référence multiple ici. Et pour la taxe, la question est la même. Donc, nous devons nous répondre si nous voulons utiliser une seule balise pour un article, ou nous allons utiliser un champ de référence multiple et ensuite lier différentes balises à au moins une balise, mais peut-être plusieurs taxes à un article. Et pour moi, ce serait évident d'utiliser le champ de référence multiple ici. Mais juste pour apprendre, je vais m'en tenir à un seul fichier de référence. Et c'est simplement parce que Webflow pour l'instant au moins, certains problèmes avec l'affichage des données dynamiques à partir de champs de référence multiples dans les pages statiques. Pour expliquer cela, je dois vous montrer ces pages statiques ici. Et nous avons aussi ces pages de collection CMS. Ceux-ci sont générés automatiquement, ces pages violettes, pages roses, ils sont automatiquement générés et ils contiennent toutes les données de notre collection. Facilement accessible dans l'interface utilisateur, dans la conception. Mais pour les pages statiques devront utiliser une structure spéciale afin d'accéder à ces données. Et malheureusement, les données du champ de référence multiple, au moins pour l'instant, sont disponibles que pour les pages de collection CMS, donc seulement pour les pages violettes. Mais ce que je sais aussi, c'est que Webflow travaille activement sur l'activation de cela sur les pages statiques. Donc, ce que je vous recommande de faire dans ce cours est juste de suivre. Et si vous créez ce site avec moi, il suffit d'utiliser un seul champ de référence en ce moment comme je le fais. Mais lorsque vous terminez le cours, vérifiez si Webflow a déjà développé une solution pour utiliser ces champs de référence multiples dans les pages statiques. Et s'ils ont essayé de le changer de sorte que nous avons multi référence pour la taxe et ce serait, alors créons cette collection. Et c'est aussi génial parce que nous pouvons initier notre collection avec quelques objets factices. Je veux ajouter 10 articles de blog afin que nous puissions facilement travailler avec des exemples de données telles que des images et du contenu de bloc. Et Webflow fait un excellent travail et remplit les noms des billets de blog. Même. Rappelez-vous juste que nous n'avons pas utilisé cette collection de billets de blog prêts à l'emploi. Nous venons de créer notre propre collection de billets de blog, mais en quelque sorte réussi à le remplir avec quelques données appropriées, quelques belles images, et aussi avec des informations de base que nous avons au lieu de noms de l'extérieur comme nous avions précédemment, précédemment généré, nous ont des noms pour quelques beaux articles comme 20 mythes sur le web design. C' est plutôt cool. Et ici, nous avons cette structure prête avec le champ de contenu. Nous avons ce drapeau en vedette. On peut l'allumer ou l'éteindre. Et pour l'auteur de la catégorie et la balise, vous pouvez voir que ce sont des listes déroulantes. Et c'est simplement parce que nous ne pouvons utiliser que les éléments qui sont déjà définis dans ces collections CMS spécifiques. Ainsi, dans les balises et les catégories d'auteurs , si vous souhaitez gérer ces éléments, vous pouvez sélectionner la collection à gérer, puis ajouter de nouvelles tâches. Vous pouvez, vous pouvez le supprimer. Et si vous n'êtes pas en mesure de supprimer la collection entière, vous devrez voir les connexions qu'elle possède. Nous avons donc déjà fait le lien entre cette catégorie et nos articles de blog. Donc, afin de supprimer, la perception fiscale devra d'abord supprimer la connexion entre les billets de blog et la taxe. Sinon, Webflow ne nous laissera pas le faire. Ok, donc c'est ça. Nous avons défini nos collections et nous pouvons maintenant publier notre site Web parce que toutes les modifications apportées aux collections sont publiées sont maintenant en phase de publication, mais sont publiées sur vos sites Web. Donc, si vous appuyez sur Commande Retour, il s' agit du raccourci pour la publication. Vous serez en mesure de publier leur site Web et maintenant les éléments de la collection sont en ligne. C' est tout pour l'instant et je te verrai dans la prochaine leçon. 10. Le menu de blog: Hé, c'est sympa de te voir dans la prochaine leçon. Et nous y voilà. Nous commençons par créer notre structure de bloc et des pages pour le bloc, nous avons le guide de style prêt, donc maintenant nous pouvons créer une nouvelle page, et ce serait notre page d'accueil de blog. Donnons-lui un nom, un logo. Ça suffit. Créons ça. Et nous avons toujours ce fichier XD qui est un peu de référence pour notre blog. Nous pouvons vérifier le fichier et ici vous pouvez voir la structure de base pour la page d'accueil. Nous avons le menu en haut. Ensuite, il y a un Poston en vedette, quelques articles récents de différentes catégories que nous avons définies et le CMS, comme vous pouvez le voir, c'est vraiment simple et c'est juste une maquette. Donc, je n'essaierai pas de pixel parfait correspondre aux tailles des éléments. Ce genre de choses que vous pouvez vérifier dans le cours de base. Mais ici, ça vaut la peine de créer la structure et le CMS, et je veux vous expliquer tout cela. Donc ce que je vais faire maintenant est d'aller à la page du guide de style et d'emprunter quelques éléments à partir de là. Le premier que nous allons utiliser comme cet élément fixe avec navigation. Nous allons donc copier et coller cela dans le blog. Si c'était un composant, nous pourrions également utiliser le menu des composants, mais ici je suis juste copier-coller. Et le premier élément, ce ne sera pas une page d'accueil plutôt que tous les messages. Donc affichera tous les messages de blog ici. Et pour la page d'accueil aura ce logo bloc de jus. En fait, ce logo est un peu différent du logo standard que nous avons. Et je l'ai dans le fichier XD comme un état pour ce composant. Alors sélectionnons maintenant ce logo de bloc et exportons-le. Maintenant, allons à Webflow et je peux sélectionner le logo, double-cliquer sur le logo pour le remplacer et le remplacer par celui que j'ai exporté à partir d'Adobe XD. Et comme vous pouvez le voir, c'est la bonne taille, 114 x 24 pixels. Cependant, ce n'est pas vraiment si pointu, Ce n'est pas si net. Et c'est surtout à cause des spécificités de mon affichage. J' utilise l'affichage de la rétine et il met à l'échelle le contenu deux fois. Donc, la taille est la même parce que j'ai décidé dans une échelle, cependant, le logo n'est pas si net après l'exportation. Et Webflow a un moyen de gérer ça. Et cela utilise ces images comme hautement BI. Donc, ce que vous pouvez réellement faire est de revenir à Adobe XD et de vous assurer que vous avez cet actif qui était à l'origine dans l'échelle 1 x, exporté dans x. Ensuite, vous devrez le remplacer et l'utiliser comme une image DPI élevée. Donc, ce que je dois faire dans XD est basculé sur le web car cela va exporter deux images. J' ai déclaré que j'ai conçu cette image en une échelle X. Et puis je veux l'exporter à la fois dans un X et deux x en sélectionnant cette version Web. Donc, quand j'ai exporté en tant que logo de bloc juifs, vous verrez que si je veux maintenant importer ces images, j'ai en fait deux images au lieu d'une. Ceci est juste bloc logo à deux x et la version simple, sorte que la version deux oeufs est deux fois la taille. C' est six kilo-octets. Et en dessous, il a deux fois le nombre de pixels, mais sur mon écran de rétine, il semble juste mieux. Ça ne change pas la taille. Donc, ce que je dois faire est juste d'importer ceci dans l'image à l'échelle x , puis de déclarer dans Webflow que je veux utiliser cette image comme API HTTP. Comme vous pouvez le voir, c'est deux fois plus que la taille est 228 par 48 pixels. C' est deux fois la taille en kilo-octets. Mais cela aura l'air mieux lorsque je changerai la propriété en DPI élevé. Donc c'est ce que vous allez faire en termes d'images PNG et JPEG, il se trouve que ce sont des bitmap. Mais dans la plupart des cas, c'est possible. Vous bénéficiez d'avoir des images au format SVG, ce qui est en fait le meilleur pour le web et son vecteur de sorte que vous n' avez pas à utiliser cette image est haute DPI et il suffit de l'exporter à partir d'Adobe XD ou Sketch ou Figma dans ce format SVG approprié. Donc, ce n'est évidemment pas possible pour les photos, mais pour tous les autres éléments, les éléments de l'interface utilisateur, vous pouvez exporter ce bloc de logo de jus en SVG. Et maintenant, si vous téléchargez et remplacez cet actif, vous verrez que la version SVG est seulement un kilo-octet et il peut réellement évoluer dans le navigateur sans perdre de qualité. Il est donc toujours préférable d'utiliser des images SVG. C' est de plus petite taille. Il LOS très rapidement et vous n'avez pas besoin d'utiliser une option DPI élevée. Donc c'est tout pour les images. Il y a quelques autres options. N' oubliez pas d'ajouter la balise alt à toutes les images. Vous pouvez l'ajouter ultérieurement dans le panneau Actifs. Et c'est plutôt joli truc. Et aussi dans les dernières versions de Webflow, vous avez des images configurées pour être chargées paresseux. Et c'est vraiment cool car cela va également accélérer votre site Web. Maintenant, ce que j'aimerais faire, c'est créer d'autres éléments pour notre menu. Mais d'abord, lions celui-ci à notre page de blog. Et ce sera la page d'accueil que j'ai conçue dans XD avec tous les messages en vedette et quelques messages de chaque catégorie. Et ce vieux lien d'impulsion va juste lier à l'autre page que je vais créer en ce moment, créons une nouvelle page avec le nom bloquer tous les messages. Et ce NoveLink particulier ira à ce bloc page de messages anciens où je vais créer la liste de tous les messages sur notre bloc. Revenons au blog. Assurez-vous que tous les messages sont correctement liés à la page des anciens messages du livre et pour les autres pages. Donc, pour les composants de couleur, je dois les renommer en sections appropriées telles que la chaîne de blocs et le marketing. Mais je n'ai pas vraiment besoin d'utiliser des noms statiques là-dedans parce que tout ce que j'ai besoin d'afficher ici, comme dans le CMS, sont des catégories que j'ai créées et déclarées NCAM S. Et je veux utiliser ces catégories et afficher leurs noms dynamiquement, ainsi que je veux que les liens vers ces catégories soient remplis automatiquement afin qu'ils naviguent vers la page appropriée avec listes d'articles de cette catégorie même. Et cela peut être accompli avec un CMS. Je vais te montrer comment le faire plus tard. Si vous deviez mettre à jour le nom de la catégorie ou ajouter une nouvelle catégorie, tout cela sera automatiquement mis à jour. se voit dans la leçon suivante. 11. Collections de menu: Salut là. C'est sympa de te voir dans la prochaine leçon. Et cette fois, nous allons lier les catégories à notre menu. Donc, je veux que tous les noms de notre collection CMS de catégorie soient affichés dans le menu, ainsi que liés aux pages appropriées. Si vous liez ce contenu de manière dynamique à partir de CMS et l'affichez sur votre page, vous devriez être en mesure d'apporter des modifications aux catégories dans le CMS ultérieurement. Et ces modifications seront répercutées sur toutes vos pages à l'aide de ce menu spécifique. Maintenant, supprimons presque tous les liens de navigation. Je vais en laisser un et voyager et vous montrer comment créer du contenu dynamique à partir de notre propre page statique CMS. Pour le faire, vous devez aller à la section CMS des éléments impaires. Donc, nous appuyons sur un sur le clavier, puis NCAM, comme vous avez cette collection le moins, vous devez d'abord utiliser la collection. Et à l'intérieur de cette collection, vous pouvez au moins source de données à partir de CMS. Donc, nous allons double-cliquer pour l'insérer ici. Et ici, vous avez cette collection moins wrapper. Donc, si vous utilisez des pages statiques pour afficher des éléments de collection, vous devrez trouver la collection appropriée. Alors, de quelle collection vous voulez obtenir des données ? Je veux m'approvisionner à partir de catégories. Et à partir des catégories, nous allons juste charger que les données sont chargées automatiquement. Vous pouvez donc le voir et ces quatre éléments sont préchargés avec des données de la collection. Et tout simplement parce que nous avons quatre articles déclarés pour cette collection, nous avons quatre articles. Si vous jetez un oeil à la structure, nous avons des besoins de collection, puis article de collection, c'est la chose la plus importante. Et si nous voulons changer quoi que ce soit, tout style ou apparence de ces éléments ou mettre quelques éléments à l'intérieur le fera pour l'article de collection. L' élément de collection est une sorte de modèle et ce modèle est multiplié par le nombre d'éléments de collection. Et pour que nous ayons quatre catégories là-bas. Il est dupliqué quatre fois. Maintenant, si nous prenons ce NoveLink et simplement le copier et le coller dans les éléments de collection, aura ce NoveLink avec tout son style comme l'élément des éléments de collection. Donc, dans ce modèle d'élément de collection, ce que nous pouvons maintenant faire est que nous pouvons le trouver avec n' importe quel champ que nous voulons afficher à partir de la collection. Si vous jetez un oeil à ce côté droit, vous remarquerez que maintenant ce que nous avons comme juste un lien vers une page statique que nous avons créé bloc 0 messages. Et c'est là simplement parce que nous avons copié le NoveLink et auparavant nous lions ce NoveLink au bloc 0. Publiez la page que nous avons créée et nous voulons répertorier tous les articles sur cette page. Laissez-moi jeter un oeil aux pages. Ici vous avez ce livre oh, messages que nous avons créés. Et c'est assez important parce que c'est à l'intérieur de la catégorie des pages statiques ici. Mais à côté des pages statiques, nous avons aussi des pages utilitaires, des pages e-commerce et ce qui est le plus important pour l'instant, des pages de collection CMS. Ces pages sont générées automatiquement lorsque vous créez la collection. Et par exemple, nous avons ce modèle de catégories et il s'agit d'une page générée automatiquement. Pourquoi ? Pourquoi nous avons créé des catégories CMS collection, cette page, et il est marqué en couleur pourpre. Est disponible pour afficher toutes les données du modèle catergories sans avoir besoin de créer des conteneurs supplémentaires comme nous l'avons fait sur les pages statiques. Donc, sur les pages statiques, nous avons dû créer cette collection moins wrapper et audit à partir d'un autre menu. Mais sur les pages CMS, nous pouvons simplement utiliser les données de cette collection. Maintenant, si vous jetez un oeil aux paramètres du lien, vous voyez également certains champs violets. Et cela signifie que ces champs violets sont liés à la collection et que certaines données dynamiques de la collection peuvent être source pour l'URL. Si nous sélectionnons obtient URL de catégories, nous pouvons lier n'importe quel champ URL qui est dans notre collection. Donc, si nous avons défini, par exemple, pour mobile un champ personnalisé avec URL, alors nous pouvons lier cette URL dynamiquement en utilisant cela, nous obtenir des catégories. Mais nous n'avons pas de liens en ce moment, donc il n'y en a aucun. Alors, comment pouvons-nous exactement lié à la page des catégories afin que nous puissions afficher tous les messages dans, disons, catégorie mobile et logiciel. Eh bien, pour ce faire, nous devons lier à ces pages CMS dynamiques qui ont été générées automatiquement lors de la création de la collection. Et cela est également marqué en violet ici nous avons des pages statiques et aussi des pages dynamiques. Ce sont nos pages de collection CMS. Et à partir de là, nous pouvons lier à la catégorie actuelle. Cela signifie que pour tous les éléments de collection, j'aurai le nx approprié pour mobile et pour logiciel, et cetera. Cela me conduira à la page appropriée générée pour cette collection et je serai en mesure d'afficher tous les messages de, disons mobile ou logiciel. Aussi, j'ai besoin de sélectionner ceci, obtenir des textes de catégories afin que j'ai de grandes étiquettes. Laissez-moi sélectionner le nom. Et maintenant, comme vous pouvez le voir, j'ai tous les noms des catégories comme étiquettes pour nos liens de navigation. Donc, nous avons le marketing logiciel, mobile et blockchain. Et aussi en plus de cela, nous avons 0 messages, ce qui est un simple NoveLink qui mène à notre page statique. Mais tous les éléments ici, tous les liens dans cet élément de collection seront liés à la page de catégorie de courants appropriée générée à partir de CMS. Cela changera donc également en conséquence si nous apportons d'autres modifications à notre structure CMS. Et comme vous pouvez le voir, ce modèle de catégories, c'est exactement le modèle qui sera affiché lorsque nous cliquerons sur le lien. Et ce sera cette page de catégorie actuelle que nous pouvons plus tard sur le style dans Webflow et créer des conteneurs appropriés, des messages d'affichage, etc Ok, pour les paramètres d'emballage de la liste de collection, nous pouvons sélectionner différentes mises en page. Donc, nous avons différents paramètres de colonnes, et aussi nous pouvons changer la balise. Permettez-moi de m'en tenir à ce style de mise en page où cela est étendu. Et Dan, laisse-moi changer la mise en page en Flexbox. Ce que je veux faire est de sélectionner d' abord la liste de collection et je vais changer la mise en page en Flexbox ici. Maintenant, les éléments sont à côté de l'autre. Et pour tout le menu Nav, laissez-moi passer à la flexbox pour centrer ces éléments. Maintenant, ça a l'air plutôt bien. Nous devrons vérifier à quoi il ressemble dans les versions mobiles cependant et la version tablette, nous devons faire quelques ajustements. Sélectionnons le conteneur entier. Nous pouvons changer la mise en page pour fléchir ici aussi et aussi la justifier sur le côté droit. Cela semble assez cool, je pense que pour Mobile, laissez-moi juste prévisualiser comment cela fonctionnerait et développer ce menu dans l'aperçu. Donc oui, ça a l'air assez bien avec besoin de voler, ajuster un peu d'alignement. Mais aussi pour la tablette, nous pourrions simplement essayer d'afficher le menu entier. Nous n'avons que cinq éléments dans le menu, donc je pense qu'ils vont s'adapter horizontalement. Alors laissez-moi sélectionner la barre de navigation, puis ses paramètres. Je peux décider que ce menu mobile est uniquement affiché à partir de la vue du téléphone et ci-dessous. Donc, dans la tablette, nous avons encore cinq articles et le logo. Et je pense que nous sommes tous bons parce que c'est la résolution la plus étroite et au téléphone, nous aurons informé version aura ce menu minifié. Nous avons encore besoin d'ajuster, de positionner, d'aligner. Ce sont des choses que je vous ai dites dans le cours de base. Donc, je vous recommande vraiment de vérifier cours de base et de faire quelques ajustements dans ce cours, je préfère ne pas passer du temps sur la mise en page, mais laissez-moi juste créer rapidement quelques ajustements ici dans cette tuile, j'ouvre ce menu et maintenant nous allons juste un peu d'espacement ainsi que nous voulons changer le positionnement de cette collection entière, au moins pour que la direction soit verticale pour Flexbox et nous allons l'aligner au centre ainsi que ce lien de navigation, nous pouvons aligner le texte sur le centre. Et nous sommes tous bons. Je pense que ce ne sont que des paramètres de base, mais maintenant il semble tellement mieux. Et vous pouvez commencer à partir de là et vous pouvez faire quelques ajustements à la mise en page. Donc, je pense que notre menu est prêt en termes de contenu dynamique. Et vous avez appris à utiliser la collection moins wrapper sur les pages statiques. N' oubliez pas que chaque fois que vous voulez utiliser des données dynamiques sur des pages statiques dans Webflow, vous devez utiliser le rappeur de moins de collection dans le menu Ajouter. Et puis vous pouvez source commandé toutes les données de la collection CMS. Mais pour les pages de collection CMS, celles générées automatiquement, vous pourrez utiliser les données dynamiques de cette collection sans avoir besoin d'utiliser la collection, le moins de caoutchouc. C' est tout pour l'instant. On se voit dans la leçon suivante. 12. Article Featured: Salut là et bienvenue à la prochaine leçon. Dans celui-ci, nous allons travailler sur le contenu dynamique de la page d'accueil. Ajoutons d'abord une section. Cette section doit être en dehors de la barre de navigation fixe. Et dans cette section, je vais ajouter un conteneur de plus ainsi qu' un autre div technique qui contiendra les informations sur les futurs messages. Donc c'est assez unique. Je vais lui donner un titre de livre de noms. C' est donc une classe assez unique que nous allons juste utiliser pour cet élément sur notre page et pour toute la section de la conception, il a une marge d'environ 118 pixels par rapport au haut. Maintenant dans le titre de héros de bloc, ce que nous aimerions ajouter est le contenu de l'article de blog qui est en vedette. Maintenant, supprimons ce héros de bloc intitulé classe. Je vais demander une nouvelle application dans une seconde. Mais d'abord, je vais créer une carte de classe plus générique gros. Et je fais cela parce que je veux que cette voiture soit classe pour avoir quelques propriétés que je peux utiliser dans mon guide de style et spécifiques à beaucoup de cartes différentes que j'ai sur ma page. J' ai donc changé la couleur de fond en blanc ainsi que le rayon de bordure à 12 pixels. Et maintenant, je change les valeurs d'ombre de boîte. Appliquons l'opacité alpha 2, 6 pour cent. Et maintenant, nous allons nous débarrasser de ce bec de carte afin que nous puissions d'abord réappliquer cette classe de héros de bloc. Pour l'instant, il n'a pas de propriétés, mais En plus de cela va juste ajouter la carte grande que nous avons créé comme un coût universel pour ce jeu de cartes et défausse grande classe est approprié pour nous de simplement l'utiliser dans le guide de style. Donc, si nous avons quelque chose que nous pouvons réutiliser plus tard comme ça, nous pouvons aller directement dans les guides de style et ajouter ces éléments. Donc, dans cette cible, nous avons besoin d'une autre section pour certains éléments génériques, quelques sections vides. Et nous allons l'utiliser pour créer différents états et élévations aussi. Permettez-moi d'accélérer ce processus n'est rien de nouveau, mais maintenant j'ai cette section de blocs de construction avec ombres de carte et des élévations juste au-dessus de nos sections. Et j'ai mis cette carte grande perspicacité. Maintenant, je peux revenir à notre page de livre. Et cela restera dans le guide de style afin que je puisse le réutiliser à l'avenir. Maintenant, cette section de la mise en page est assez unique pour toute la page, pour tout le bloc. Donc, nous aurons cette fonctionnalité à Tiktok sur le dessus, puis nous aurons le titre et l'extrait. Et sur le côté droit, nous aurons une image. Donc, d'abord, j'ai besoin d'utiliser cette collection au moins c'est assez important parce que si vous oubliez de créer une liste de collection d'abord et de la lier à la collection appropriée. Dans ce cas, ce sont des billets de blog. Daniel doit refaire l'ensemble du composant. Alors laissez-moi aller aux paramètres de cette collection moins appropriée. Il est déjà utilisé en utilisant blogposts comme source, mais maintenant nous pouvons également utiliser certains filtres et l'ordre de tri afin d'afficher les éléments correctement. Ils exploreront toutes les options plus tard. Mais maintenant, jetons un coup d'oeil à l'option d'éléments limités qui nous permettra montrer seulement un nombre spécifique d'éléments retournés de cette collection. Donc, dans ce cas spécifique, je veux seulement montrer un élément, un billet de blog. Et je vais commencer par un. Dans le cas où j'ai, je ne sais pas, 10 ou 100, je peux choisir un nombre différent, mais aussi en plus de cela, je peux sélectionner l'ordre de tri juste trié en fonction de la date de publication. Donc, cela publié sur comme une propriété qui est automatiquement appliquée à tous les éléments CMS par Webflow, je peux le trier du plus récent au plus ancien et l'enregistrer. Donc, cela aura l'affichage le plus récent billet de blog dans cet élément de liste de collection. Mais si je veux que ces éléments soient présentés, seulement, je peux aller aux filtres dès maintenant et je peux sélectionner le champ approprié. Dans ce cas, je vais utiliser en vedette. Et seulement lorsque la vedette est activée, je vais afficher ces derniers messages. Donc j'ai tout utilisé. J' utilise des éléments de limitation pour montrer un seul élément. Et en plus de cela, nous avons l'ordre de tri appliqué de sorte qu'il n'affiche que les messages les plus récents. Et aussi ce post doit être présenté. Donc, il doit avoir cette fonctionnalité basculer vers, passer à Ohm. Maintenant, ces paramètres généraux et les filtres sont définis sur la collection moins wrapper. Mais maintenant, nous pouvons passer à l'élément de collection et nous pouvons restyle l'élément de collection ainsi que utiliser toutes les données de l'élément de liste de collection renvoyé avec les filtres que nous avons appliqués. Donc, nous avons déjà les données sur ces messages très récents qui est en vedette. Maintenant, nous pouvons utiliser le bloc Lync et dans les paramètres de lien, vous verrez que nous pouvons lier à cette page spécifique, qui est les messages de blog actuels. Et le courant est simplement celui retourné par nos filtres. Alors laissez-moi changer l'affichage pour fléchir. Et ce livre de liens sera tout simplement le conteneur pour tous les autres éléments qu'il liera à l'article. Maintenant à l'intérieur, créons un autre bloc D, et cela tiendra la structure du côté gauche. Je vais lui donner un nom, disons le héros du livre. Et cela contiendrait la description ainsi que le titre et la catégorie. Et sur le côté droit aura l'image. Alors maintenant à l'intérieur de ce bloc, héros va mettre un manuel. Ceci est une légende simple que nous allons utiliser que le titre et ceci est H1 et aussi un paragraphe dans lequel affichera l'extrait de la publication. Maintenant que nous l'avons plus tard, nous allons lier les données appropriées. Nous avons également besoin de cette lecture maintenant, le lien et l'élément entier est lié, donc nous allons juste avoir ce manuel. Et ici, nous allons mettre le message de lecture maintenant. Aussi, jetons un coup d'oeil à ce moment d'autres éléments. Nous allons d'abord ou remplacer le texte dans le manuel afin qu'il ait la fonctionnalité de texte. Ensuite, nous avons en tête un, ce qui est correct en termes de style pour un paragraphe, c'est vraiment un paragraphe spécial sur notre page. Donc, je vais créer une autre classe pour ce paragraphe uniquement. Je veux l'utiliser dans le guide de style car ce n'est qu'une instance de tels textes sur le bloc. Donc, ceci est bloquer votre extrait, et nous allons avoir la marge 12 et 24 pour cet élément Asper notre conception. Ainsi que le poids de la police serait 400 sons DM normaux. Et la couleur de la police est une couleur très spécifique. Nous ne l'avons pas encore dans le guide de style, mais ce n'est encore qu'une instance de cet élément. Donc on va l'avoir comme ça. Nous pouvons plus tard en tant que nuancier ou peut-être utiliser la couleur qui est assez proche du guide de style à cette couleur grise spécifique. Pour l'instant, laissons-le tel quel et concentrons-nous sur le long métrage Tiktok en haut de la rubrique. Cela devrait être remodelé et nous avons déjà une classe de légende que nous pouvons utiliser ici. Alors sélectionnons-le et cela nous donnera toutes les propriétés de police. Et en plus de cela, je vais créer un verre universel pour tous les éléments comme celui-ci parce que cette petite chose de fonctionnalité et puis design comme ou catégories et toutes ces petites factures sont vraiment similaires. Alors créons une autre classe en plus de la corruption. Et ça serait bloqué. Ok, et nous devons changer sa disposition en bloc en ligne afin que nous puissions ajouter du remplissage et des marges. Ce que j'aimerais faire est d'ajouter un rembourrage de huit pixels du côté gauche et droit. Et j'appuie et maintenez Option sur Mac pour ajouter quatre pixels de remplissage de haut en bas et de l'aspirine que la conception et pour le rayon, border-rayon vont utiliser quatre pixels dedans, ainsi que changer la couleur de fond. Et c'est aussi une couleur très spécifique que je n'ai pas déjà. Et le guide de style, donc je peux juste comme ça avec la valeur hexadécimale pour l'instant. Donc, nous avons ce gradient de tuilage, je suppose que c'est à peu près pour le côté gauche de nos listes de collections. Donc, nous avons un héros de bloc qui est presque prêt. Maintenant, nous pouvons trouver le texte de notre collection. Sélectionnons ce GetText à partir des messages de blog. Et ici, nous avons lié la catégorie de collection. Nous n'utiliserons pas les données des catégories, mais vous pouvez voir que ces données sont là. Nous utiliserons ce nom simple et un extrait du billet de blog lui-même. Donc, pour les paramètres de cet extrait de héros bloc aussi, nous allons utiliser les données dynamiques de notre collection. Et ici, nous avons le titre et l'extrait prêts. Ajoutons un peu de rembourrage. Je vais tenir Shift pour que je puisse ajouter un rembourrage de 38 pixels dans tout le héros du bloc. Et un élément est maintenant prêt. Maintenant, nous devons créer un autre élément. C' est déjà Flexbox. Donc, si nous ajoutons un autre bloc D à l'intérieur du bloc Lean, ce sera l'emballage d'image héros des loci héros. Il va être placé automatiquement sur le côté droit et nous aurons notre côté photon. Donc, appuyez sur un et ajoutez une image ici. Et puis nous allons obtenir cette image à partir des billets de blog aussi bien. Nous avons le champ d'image là-dedans, alors sélectionnons ce champ. Nous avons deux images, un carré et cette image de résolution 16 par 9. Nous allons sélectionner celui-ci et nous avons besoin d'une autre classe pour cette image. Nous allons bloquer l'image du héros et changer certaines propriétés, en particulier la hauteur. Nous allons utiliser 100% de hauteur et il faudra que les pieds soient réglés pour couvrir. Donc, si nous l'avons pour le terrain, laissez-moi passer à 100%. Tu verras à quoi ça ressemble. Pas vraiment bon, mais si on passe à la couverture, maintenant c'est vraiment mieux. Mais aussi nous devons définir la largeur. Et la largeur définira un spécifiquement. Selon notre conception, il s'agit de 650 pixels. Donc, nous allons le mettre comme ça, mais aussi nous devons rendre cette structure entière plus large. Et nous avons tout simplement trop d'espace sur le côté gauche et droit de la mise en page dans cette section. Alors passons à cette section maintenant et définissons son nom peut être la section livre héros. C' est bon. Et maintenant, nous allons définir la marge pour être 120 pixels du haut et aussi de 120 du bas. Et pour le conteneur à l'intérieur de cet élément, nous allons définir le maximum. Nous faisons 1282 pixels comme nous l'avons fait, et la conception devra faire la même chose pour le conteneur de menu. Donc, sélectionnons le conteneur pour changer son nom afin qu'il soit plus significatif. Il s'agit d'un conteneur de menu de bloc. Et aussi, définissons l'attente maximale à 12 802 pixels. C'est ça. Donc maintenant, il semble tellement mieux, mais 40 a la mauvaise largeur, bien que nous l'ayons dit explicitement à 650, quelque chose surpasse cette largeur. Et si on jette un coup d'oeil au bloc de liens, c'est réglé à cela par les faits. Et c'est pourquoi ce sont des enfants tels que bloc euro et bloc image héros a cette flex propriétés enfant. Et si vous jetez un oeil au dimensionnement, nous pouvons le régler pour le rétrécir si nécessaire, et nous pouvons également l'étendre. Alors poussez si possible, ainsi que ne rétrécit pas ou ne poussent pas. Donc, ce ne pas rétrécir ou grandir la propriété est la bonne propriété pour être définie à notre image de héros bloc. Il a la bonne taille, mais nous devons le définir pour être juste affiché dans cette taille. Et pour notre héros de bloc, nous pouvons le laisser tel qu'il est, ou nous pouvons même changer sa taille pour qu'il grandisse si possible. Alors, c'est ça. Nous avons, cet élément est prêt et nous avons toutes les données provenant du CMS. Nous avons encore quelques ajustements mineurs, tels que les coins arrondis pour la photo. Sélectionnez l'image du héros de bloc, et divisons les valeurs du rayon. Réglez 12 pics du rayon dans le coin supérieur droit et le coin inférieur droit. Et cela semble assez bon comme dans notre conception, mais nous avons encore cette tablette et les versions mobiles à peaufiner. Et je ne vais pas vraiment passer beaucoup de temps là-dedans parce que je sens que vous le savez déjà à partir de cours de base ortho. Si vous ne le faites pas, je vous recommande vraiment de consulter le cours, mais laissez-moi simplement créer quelques réglages rapides afin qu'il semble assez précis sur différents appareils. Maintenant, pour un héros de livre, je sens que ce rembourrage peut être plus petit sur les tablettes. Donc, maintenez la touche Maj enfoncée pour changer le rembourrage. Et aussi pour le menu, je pense que ce serait beaucoup mieux si nous centrions le menu. Donc c'est tout flexbox, nous pouvons juste le justifier au centre. Et maintenant, il sera centré tout au long des points d'arrêt ici aussi. Donc, permettez-moi de sélectionner ce bloc de lien et de changer la direction à la verticale, ainsi que de changer la position. Permutons l'inverse de l'image et le titre afin que nous puissions sélectionner l'image et modifier ses propriétés. Réinitialisons la largeur à 650. Et puis modifions également les propriétés des coins arrondis, sorte que nous ayons ce rayon de coin supérieur et supérieur gauche, en haut à droite, réglé sur 12. Et après quelques corrections rapides, je pense que nous avons ceci assez précis pour tous les appareils et toutes les résolutions et les données dynamiques les plus importantes. Alors je te vois dans la leçon suivante. 13. Articles récents: Dans cette leçon, nous allons nous concentrer sur la structure des articles récents. Et cette structure est copiée dans toutes les catégories. Nous aurons donc les derniers articles du marketing logiciel et toutes les autres catégories. Et en plus, nous allons juste avoir toutes les catégories et tous les messages récents listés. Alors laissons cette section regarder héros tel qu'il est. C' est super spécifique et ce n'est qu'une seule instance. Donc, au lieu de cela, sélectionnons le corps et créons une autre section qui contiendra le conteneur pour cet élément spécifique qui pourrait être réutilisable pour tous, pour toutes les autres sections. Donc, je vais juste lui donner une section catégorie de livre de noms. Maintenant, définissons quelques propriétés de base pour l'espacement. On va utiliser la marge. Définissons la marge à 100 pixels en haut. Et maintenant à l'intérieur de cette section de catégorie de livre aura conteneur. Dans le conteneur comme d'habitude, modifions la largeur maximale de ce conteneur à 1282 pixels. Et ce conteneur pour cela va être conteneur de contenu de bloc. Et nous allons l'utiliser dans toutes les autres sections aussi. Nous allons laisser l'écran être flexible, mettre à la verticale et l'aligner et le justifier au centre et au milieu. Maintenant, à partir des symboles, nous aurons cette section d'en-tête que nous pouvons utiliser. Et dans la section d'en-tête, nous avons quelques substitutions que nous pouvons faire pour le texte ainsi que pour le titre et la description. Donc, le premier écrasement comme à partir du blog, alors nous avons ce texte et pour la description, nous allons juste le supprimer complètement. Et maintenant, ce texte de description est visible en tant que conteneur, mais seulement dans le concepteur. Ce ne sera pas vraiment réalisable. La page publiée. Donc maintenant, j'appuie sur un, J'ajoute la collection moins wrapper et il sera bientôt lié à tous nos billets de blog. Mais maintenant, sélectionnons la collection le moins. Donc ce conteneur du milieu, et restylons-le. Donc, je vais ajouter les cartes de blog de classe moins à cela et changer son ajout DSpace afin que nous ayons convenu que nous pouvons facilement utiliser Flexbox. Mais à cet effet, je pense que la grille est également vraiment génial afin que nous puissions facilement changer l'écart entre les éléments. Donc, nous allons le mettre à 24, comme dans notre mise en page dans XD. Et nous avons aussi besoin d'une colonne de plus. Nous avons besoin de trois colonnes et d'une seule rangée. Ok, maintenant nous avons la structure 40 éléments. Clôtons cette salutation. Aussi pour la distribution, nous allons laisser ces paramètres par défaut et nous allons double-cliquer sur cet élément pour le connecter à sa source. Ce seront des billets de blog. Maintenant, tout ce que nous devons faire est de limiter le nombre de billets de blog. Donc, pour les cartes de livre, les paramètres que nous avons la source définie sur les billets de blog. Ce que nous devons faire, c'est limiter les articles et nous n'avons besoin que de trois éléments ici. Aussi, led, créez l'ordre de tri de sorte que ce ne sont que les articles les plus récents. Donc, nous allons définir le publié sur et définir les articles pour être nous à commander, le plus récent à l'ordre le plus ancien. Maintenant, définissons les paramètres des éléments enfants grecs. Donc, jusqu'à l'alignement est réglé pour étirer. Et nous avons le contenu qui s'étend de gauche à droite. Et dans cet élément de collection, nous devons également ajouter les éléments qui afficheront des données dynamiques. Encore une fois, d'abord, nous allons ajouter un bloc lien et le lier dynamiquement à l'article de blog actuel. Ce sera le billet de blog retourné par ce filtre que nous avons créé. Et il sera automatiquement lié. Donc, tout le panier mènera à ce post. Maintenant, nous allons avoir un cours pour ça. Donc, il s'agit d'une carte de bloc et aussi d'un élément de collection de cartes de bloc comme parent. Maintenant, ajoutons le contenu. Le bloc, le bloc de lien de carte, et nous aurons quelques informations et défausse. Alors commençons par créer le blog, et cela contiendra tous nos tags. Alors donnons-lui un nom tags, wrapper et InDesign. Nous avons une ou deux taxes ici. Nous allons donc créer un manuel, puis le dupliquer. Donc, le premier sera des éléments en vedette, donc des informations sur les messages en vedette. Et le second serait l'information sur la catégorie. Maintenant, un autre débogage qui contiendra l'image. Donc, c'est le conteneur d'image de cartes. Et à l'intérieur, ajoutons un élément image. Et nous allons le lier à nos articles de blog dans une seconde. Mais d'abord, concentrons-nous sur le style. Ceci est l'image de la carte, alors appliquons cette classe. Un autre bloc d contiendra les informations sur le titre et l'extrait. Et généralement avant d'ajouter du contenu dynamique, je commence par le style. Alors, commençons à commenter. Ce texte de carte de nom de classe. Dans ce contexte aura également deux blocs de congé techniques supplémentaires. Le premier sera notre titre. Alors revenons. Donnez-lui un nom de classe, un titre de carte. Et aussi nous aurons un d-block de plus et ce serait le pied de page de la carte, retour de la commande ou entrer le pied de page de la carte de nom. Donc, la structure de la carte est un peu complexe, mais une fois que nous l'avons, elle, va juste créer une structure de carte et ensuite elle sera automatiquement dupliquée afin que nous ayons des en-têtes partout. Celles-ci sont gratuites. Les en-têtes libres auront également des paragraphes et nous les restylerons un peu plus tard. Donc, nous avons un extrait ici. Et pour le pied de page de la carte, nous allons également ajouter un manuel. Et cela nous permettra d'avoir seulement trois informations sur l'auteur ainsi que le lien vers nos publications. Donc, d'abord, donnons-lui une carte de nom, l'auteur, la deuxième commande texte doc retour. Ceci est un séparateur de panier, juste un simple élément graphique qui ajoutera un peu plus tard. Et aussi la catégorie de cartes que nous aurons tout en bas. Donc, voici, toute la structure d'une carte. Maintenant, tout ce dont nous avons besoin ici comme des données dynamiques. Commençons donc par notre rubrique 3, et c'est le titre de l'article. Alors obtiens des messages de blog et nous avons besoin du nom. Ok, donc c'est super simple. Maintenant, l'extrait et ici jours l'extrait et aussi nous avons un lien de collection en plein air vers les billets de blog. Donc, si vous allez dans les paramètres de ce manuel, vous pouvez le lier au nom de l'auteur. Et puis je vais mettre Just in et puis le nom de la catégorie. Donc, dans cette catégorie, nous pouvons également sélectionner le nom de la catégorie car encore une fois, les catégories sont liées à notre collection de billets de blog. C' est pourquoi nous pouvons obtenir les informations d'ici. Encore une fois, nous allons utiliser 16 images par neuf et celles-ci seront directement reliées à partir de cette collection. Et nous devons lier l'élément de fonctionnalité, les éléments en vedette. Donc, nous allons changer le nom en vedette ainsi que cela va juste être pris à partir du nom de la balise. Donc c'est conçu. Le deuxième est le développement et le troisième, la typographie. Ces tâches sont également liées à notre article de blog. Maintenant, nous allons remodeler l'élément vedette. Il a sous-titré et bloc classe de balise et s'appliquera aux deux manuels. Donc, d'abord la légende, puis la commande Retour une fois de plus ou discrète les données et sélectionnez la balise de bloc. La même chose vaut pour l'autre Tiktok que c'est capturer. Et ensuite, nous allons sélectionner la balise de bloc en tant que classe de combo. Mais ici, ce que nous aimerions faire est de trouver dynamiquement la couleur de cette catégorie. Et juste pour que vous vous souveniez, nous avons ces couleurs définies pour chaque balise et dans les paramètres de style dynamique pour cette légende, nous pouvons obtenir cette couleur d'arrière-plan à partir de. Et c'est la tactique ou est lié à nos articles de blog. Donc il est disponible ici. Maintenant, comme vous pouvez le voir, le développement de la conception et la typographie. Ils ont des couleurs d'arrière-plan provenant de la couleur que nous avons spécifiée dans le CMS et la collection cible. Maintenant, ce que j'aimerais faire est de décider si elle est en vedette légende doit être affichée ou non. Alors passons à ce paramètre de bloc. Et puis dans la visibilité conditionnelle, nous pouvons ajouter la condition. Donc, nous voulons vérifier si le drapeau en vedette est défini pour posséder et seulement dans cette condition l'élément en vedette est présent. Maintenant, nous avons la structure de nos cartes ainsi que quelques sources de données dynamiques du CMS. Dans la leçon suivante, nous ferons cette numérotation. On se voit là-bas. 14. Styles de cartes: Salut là, Bienvenue à la prochaine leçon. Et dans celui-ci, j'aimerais vous montrer comment styliser des éléments à l'intérieur de notre carte bloc. Eh bien, c'est une leçon de style. Donc, si vous connaissez déjà le style du cours précédent, ou si vous vous sentez juste maître dans le style, vous n'avez pas vraiment à regarder cette leçon, mais j'aime vous montrer quelques conseils et astuces en termes de style de cette carte bloc. C' est l'élément le plus important de notre blog car ces cartes seront présentes sur de nombreuses pages différentes. Essayons de le faire, non ? Donc, nous avons un chariot de bloc ici. Et pour les propriétés de cet élément, je voudrais d'abord définir l'affichage sur flex afin que nous puissions aligner les éléments à l'intérieur de ce wrapper. Changons la direction à la verticale afin que les éléments s'empilent les uns sur les autres, puis nous aurons l'alignement réglé sur l'étirement. Je vais laisser justifié tel quel, mais passons à la taille et à la position. Maintenant, ce que nous voulons faire est le premier jour du débordement des éléments. Je vais définir le débordement sur caché au cas où quelque chose se trouve en dehors de la zone de limite de cette carte de bloc. Et c'est très important. Je vais mettre la position sur relative. Et c'est principalement parce que je veux positionner nos tags qui sont en vedette et design ici à l'intérieur de cette carte bloc. Et je vais les positionner obsolètes. Maintenant, passons à quelques paramètres pour l'arrière-plan et changez la couleur d'arrière-plan en blanc. C' est notre couleur de marque 06. Et aussi je vais avoir un rayon de frontière de 12 pixels. Et pour l'ombre de la boîte, j'aimerais ajouter une ombre subtile et la laisser pour 180 angle. La distance serait de 15. Et puis je vais appliquer 30 pixels ours ou 35 peut-être. Mais je vais baisser l'opacité de la couleur noire. Allons donc à Alpha ici et mettons-le à 5 ou 7 %. Et oui, c'est l'ombre que j'aimerais avoir sous mes cartes. Maintenant, nous allons nous assurer que nous avons plus grossier défini sur le pointeur tout au long de cet élément de carte bloc. Ainsi, lorsque l'utilisateur survole cet élément, il sait qu'il s'agit d'un lien. Et allons à l'emballage fiscal. Nous voulons donc positionner ces balises à l'intérieur de l' élément de pièce de journal qui est déjà positionné relatif. Donc, tout ce que nous devons changer, c'est la position de l'emballage fiscal à l'absolu. Donc maintenant, nous avons ces éléments alignés et emballage fiscal est positionné à l'intérieur de l'élément de carte de bloc, qui est relatif. Maintenant, pour le caoutchouc fiscal, je vais définir la distance de haut et de gauche, mais nous allons d'abord l'aligner en haut à gauche, puis changer la distance. Je vais taper 16 et Px. Donc, je vais le changer de pourcentages en pixels. Il s'agira de 16 pixels en haut et de 16 pixels en gauche. Donc aussi, je vais définir cet index Z juste pour m'assurer que vous pouvez toujours voir ces balises. Et je dois sélectionner l'une des légendes et aussi définir une petite marge, par exemple, quatre pixels afin que je puisse répandre les éléments les uns des autres. Maintenant, ça va être intéressant. Sélectionnez l'image de la carte et créons une image de carte qui est entièrement répartie sur l'élément qui contient des éléments. Nous avons donc le blé et la hauteur sont réglés à 100%. Et puis la cinquième propriété, j'irai et je vais la mettre pour couvrir. Maintenant, la partie la plus importante, ce que nous aimerions faire est de changer la position de cet élément de statique à absolu. Ce sera absolument positionné. La taille complète des éléments parents. Donc je le change à plein pour qu'il soit répandu à travers toutes les frontières. Et propres cartes, conteneur d'image, qui est le parent direct de cette image de carte. Je vais définir le positionnement pour être relatif. Aussi pour m'assurer que ce conteneur d'image de coût a la bonne largeur, je vais changer sa largeur à 100% de son élément parent. Et maintenant, grâce à cette magie, ce que vous pouvez faire est de changer le rembourrage sur ce conteneur d'image de carte, puis il révélera la partie de l'image que vous voulez montrer. Maintenant, si vous voulez avoir à des centaines de pixels de hauteur de cette image, vous pouvez simplement définir le remplissage à 200 ou vous pouvez le changer à, disons, 54% pour avoir des valeurs relatives qui vous donneront une meilleure réactivité de cet élément. Et cette structure de l'élément actuel est vraiment cool en termes d'avoir le Carter réactif à travers tous les points d'arrêt et des choses comme ça. Donc je suppose que cela pourrait être utile. Et maintenant pour les autres éléments, pour nos textes de carte, nous avons le titre à l'intérieur et le titre et le paragraphe. Changons la disposition pour fléchir à nouveau et bascule la direction vers la verticale. Pour l'alignement, vous allez le laisser tel quel. Mais pour laisser de l'espace à juste titre, nous allons mettre de l'espace entre afin que nous puissions l'avoir bien réparti sur les éléments à l'intérieur. Et puis ce que j'aimerais faire est de changer ce paragraphe à l'intérieur. Permettez-moi de changer d'abord l'arrière-plan, j'ai besoin de définir la couleur d'arrière-plan sur blanc ou de sélectionner l'une de mes couleurs prédéfinies. Mais ce qui est plus important maintenant, je vais définir les propriétés de ce paragraphe afin que je puisse avoir un peu plus d'espacement entre l'en-tête et le paragraphe. Appuyez sur Command Return et créez une classe distincte pour ce paragraphe. C' est un peu comme un paragraphe spécial pour nous. Donc, nous allons créer une classe d'extrait de carte que nous pouvons appliquer une marge, marge supérieure de huit pixels aussi. Et modifions également d'autres propriétés telles que les propriétés de topographie. Nous avons cette couleur à l'une de nos couleurs parents et nous voulons la changer pour une couleur grise. Et nous pouvons évidemment, vous savez, taper la valeur hexadécimale. Mais ce que nous pouvons aussi faire est d'utiliser nos échantillons prédéfinis. Et il est toujours préférable d'utiliser simplement les couleurs que nous avons dans le système. Ainsi, par exemple, cette couleur gris foncé, au lieu d'en créer un nouveau. Ou si vous en créez un nouveau, n'oubliez pas de le garder dans notre guide de style afin que nous puissions toujours l'utiliser dans toute notre conception. Maintenant, prenons soin du dossier de la carte. Nous avons l'auteur de la carte, le séparateur et la catégorie. Tous ont des classes séparées. Et ce que j'aime faire est de définir la propriété inline-block quatre, tous, parce que je veux les garder dans une ligne et le bloc inline m'aidera à accomplir cela. Tout ce que j'ai à faire, c'est pour ce séparateur de carte, je vais mettre la marge à gauche et à droite. Donc, appuyez et maintenez la touche Option sur Mac et 6,5 pixels ou quatre pixels marge. Et ici, je dois changer certaines propriétés qui changent la taille du texte à 10, puis masquer à 13. Nous allons avoir les mêmes propriétés pour le séparateur de chariot et l'auteur de la carte en termes de topographie. Donc on va le changer en une nuance d'argent. Et maintenant, quand je le regarde, je suppose qu'il devrait être un peu plus sombre pour que nous ayons plus de contraste entre les deux. L' arrière-plan et l'auteur et la pour cette catégorie, nous allons changer la taille, mais nous allons laisser la couleur comme S car ce sera le lien vers la catégorie. Donc, à partir de ce lien, quelqu'un pourrait simplement cliquer sur le lien et aller à la catégorie. Et ce lien pourrait être comme remplacer le lien que nous avons comme une carte de bloc. Maintenant, j'ai légèrement changé la marge afin qu'ils soient plus petits et je suppose que nos cartes sont presque prêtes. Eh bien, nous devons nous assurer que cet article de collection de panier de livres a la mise en page définie pour flex. Et puis pour l'alignement des éléments, nous voulons changer l'alignement pour étirer. Et grâce à cela, nous allons avoir les cartes qui sont réparties de haut en bas de l'article de collection de cartes de bloc. Et la hauteur de l'arrière-plan est la même. Nous avons quatre lignes ici, nous avons trois lignes là-bas. Et tout a l'air bien. On va fixer la position de l'autre dans une seconde. Mais ce que je voudrais faire est juste de prévisualiser ces éléments sur les vues mobiles sur tablette. Et nous pouvons déjà voir que c'est un peu trop bondé, surtout dans la petite taille de la tablette. Donc, ce que nous aimerions faire est probablement sur tablette, changer la mise en page à cela, que nous n'avons qu'une seule carte dans une rangée. Mais d'abord, j'ai remarqué que nous avons cet Arthur et ici et section et pas aligné correctement au fond de cet élément. Et c'est probablement à cause de ce conteneur de textes de carte qui ne se propage pas à toute la hauteur de l'élément parent. Donc, c'est assez facile à réparer parce que l'élément parent, donc cette carte de bloc a la mise en page définie sur les faits dans la direction horizontale. Donc, grâce à cela, nous pouvons définir cette taille de chaque enfant pour grandir. Mais je vais le faire en vue du bureau afin avoir cette propriété héritée à tous les points d'arrêt. Changeons la taille flexible de cet élément pour grandir du texte de la carte. Et maintenant, vous pouvez voir que tout va bien. Nous avons l'auteur et aussi la catégorie affichés en bas du panier. Maintenant, sélectionnons les chariots de bloc le moins, ce qui est convenu. Je vais supprimer deux colonnes. Je vais juste laisser une colonne de la tablette à mobile, horizontal et portrait. Et nous voulons appliquer une sorte de marge ou de rembourrage. Maintenant, nous pouvons appliquer cela une marge pour bloquer les cartes le moins, mais je pense qu'il serait préférable de simplement l'appliquer à l'ensemble du conteneur de contenu. Et ce conteneur de contenu va être répété à travers notre conception et à partir de la tablette ci-dessous, nous allons avoir juste un rembourrage de ce conteneur défini à 12 pixels. Donc, sur les appareils mobiles, nous avons un peu de rembourrage à gauche et à droite. Donc, je suppose que nous sommes prêts avec cela, mais nous pouvons maintenant facilement changer le remplissage du conteneur d'image de panier. Papa, sur différents appareils, nous avons une taille différente de la photo. Et grâce à ce petit truc que nous avons fait avec le rembourrage, vous pouvez voir qu'il est super facile de changer la taille de cette photo. Et par exemple, sur cette vue mobile quand elle est trop petite, nous pouvons simplement appliquer un plus grand rembourrage et nous l'avons ici. C' est donc une façon de créer des cartes de blog Bulletproof dans Webflow. Il y a probablement un million d'autres façons d'aborder cette question, mais je pense que c'est de bonnes solutions, donc je vous encourage à l'essayer et je vous vois dans la prochaine leçon. 15. Sections de page principale: Bonjour à tous, Bienvenue à la prochaine leçon. Dans celui-ci, je voudrais créer des sections pour toutes les sections de catégorie de livre d'éléments que nous avons dans la catégorie. Donc, le marketing logiciel, mobile, et la doctrine. Je veux afficher un post gratuit de chaque catégorie. Et puis ce que je fais en ce moment est d'ajouter un div. Et à l'intérieur de cette div, j'ajoute ce bouton grand afin que je puisse lier à tous les articles de cette catégorie particulière. Ou dans ce cas, nous avons des articles récents. Je veux juste un lien vers tous les articles sur mon blog. J' ai donc ce bouton supplémentaire. Je vais donner à ce d-block un nom de classe d'un wrapper de bouton CTA et peut-être ajouter des propriétés telles que la marge ou peut-être que vous avez un remplissage à l'intérieur de ce wrapper de bouton CTA. Et pour les paramètres du bouton, ce que j'aimerais, c'est comme le Buttonwood que j'aimerais faire, c'est changer les textes pour voir, dans ce cas tous les articles. Et en tant que type de lien, je vais sélectionner la page dont nous avons besoin pour lier à une page spécifique. Dans ce cas particulier, nous devons sélectionner bloquer tous les messages. Et cela montrera juste tous les messages de la section récente de l'article. Mais pour toutes les autres sections, telles que les catégories, le marketing logiciel et le mobile, je vais faire un lien vers la catégorie spécifique. Donc, ce que je peux faire si j'ai cette chaudière de cette section d'article récente, je peux simplement le copier et le coller quelques fois. Nous avons le marketing logiciel, mobile et Blockchain. Nous pouvons donc le coller quatre fois et créer cinq sections. Pour la première section, pensons d'abord aux paramètres de cette section, et nous avons ce titre en haut. Ceci est la section d'en-tête, et ceci est un symbole. Donc, si je vais à l'intérieur du symbole et le change de sorte qu'il lie dynamiquement à l'une de mes sections de CS. Ce sera le même dans toutes les instances. Donc, je dois d'abord cliquer avec le bouton droit de la souris et je dois dissocier ce symbole, le symbole. Donc, appuyez sur Commande, Maj a ou simplement délié comme ça. Maintenant, je peux éditer les propriétés sans craindre qu'elles changent partout dans chaque symbole. Je peux évidemment changer le style et la classe de section d'en-tête restera cohérente dans toutes les sections d'en-tête. Donc, le fait que j'ai réellement détruit le symbole n'est pas si pertinent parce que nous avons toujours les mêmes classes pour tous les titres et ils hériteront de ces propriétés. Donc ce que nous voulons avoir ici, c'est probablement Blockchain, non ? Et comment nous pouvons créer, comment nous pouvons lier cette catégorie aussi, cette section d'en-tête. Eh bien, c'est assez compliqué parce qu'on peut créer une collection moins Robert Wright. Et puis logique serait de lier à des histoires. Cependant, pour ces catégories, nous ne savons pas vraiment laquelle sélectionner ici nous savons, nous ne savons pas vraiment quels messages sont affichés ci-dessous. Nous pouvons évidemment limiter les articles à un seul, de sorte que nous n'ayons qu'une seule catégorie. Et ce que nous pouvons faire est probablement filtrer cette catégorie afin qu'elle affiche la catégorie exacte que nous voulons voir. Donc, la première façon de le faire est peut-être de changer l'ordre de tri pour simplement le créer ou mettre à jour la date ou plus. Laissons le plus récent au plus ancien. Et maintenant, nous avons des logiciels ici, et c'est tout simplement parce que le logiciel est la nouvelle catégorie du CMS. Si nous allons dans les catégories CMS, vous voyez que le logiciel est en tête et c'est juste pour cela qu'il s'affiche comme ça. Donc, ce n'est pas vraiment la meilleure façon d'aborder cela parce que toujours ce n'est pas un lien vers les articles de blog que nous avons. Et le deuxième article de la collection. Et en passant, mettre ce titre à l'intérieur de cette collection moins wrapper avec des billets de blog n'est pas vraiment une bonne idée parce que nous devrions filtrer. Nous avons trois messages, donc il va juste afficher trois titres. Ensuite, nous devrions nous débarrasser de deux autres. Il est donc parfois préférable de créer des collections séparées, mais nous devons trouver un moyen de relier ces collections ensemble. D' accord, mais avant ça, jetons un coup d'oeil à l'emballage de la liste de nos listes de cartes de blocs. Et pour l'élément de collection, Réglons le filtre de sorte que nous avons vraiment le filtre appliqué, sorte que nous avons vraiment des billets de blog de l'une des catégories. Donc, nous allons remplir ça par catégorie. Et nous sommes catégorie égale logiciel, disons, ou nous pouvons sélectionner dans cette liste déroulante toute autre catégorie que nous avons, par exemple, le marketing mobile ou la chaîne de blocs. Sauvons ça. Et maintenant, nous avons des articles blockchain ici. Si nous avons plus d'articles et la doctrine aura jusqu'à trois éléments. Et c'est à l'épreuve des balles. C' est vraiment génial parce que quand, par exemple, quelqu'un change le nom de la catégorie en articles blockchain ou séminaire, cela sera toujours dynamique et cela fonctionnera. Maintenant, nous devons trouver un moyen de lier cette blockchain à notre article de collection avec le titre. Et nous pourrions potentiellement le faire avec les filtres. Si nous ajoutons un filtre ici, nous pouvons évidemment sélectionner la catégorie avec un nom égal. Et nous pouvons taper, nous pouvons simplement taper le nom de la catégorie. Donc, nous avons blockchain ici et évidemment travailler. Maintenant, si nous déplaçons le titre dans cette catégorie et nous pouvons simplement supprimer l'ordre de tri. Et oui, nous pouvons, nous n'avons pas à limiter les éléments parce que nous n'avons qu'un seul élément filtré si nous déplacons ce titre dans cette collection et puis sélectionnons, Obtenir les textes des catégories et nous avons besoin du nom de la catégorie ici nous avons blockchain. Le problème est que ce n'est pas tant une solution pare-balles parce que ce que nous devions faire, comme nous l'avions dit explicitement, que nous voulons la chaîne de blocs comme le nom de cette catégorie. Et si quelqu'un change le nom de blockchain en articles blockchain ? Comme indiqué ici, le nom doit être égal. Ça n'a pas besoin d'être comme ça. Il doit être égal à ce que nous avons mis ici. Donc, ce n'est vraiment pas si génial parce que nous devons explicitement le mettre dans le champ d'entrée. Ce que nous aimerions avoir à la place de ce champ d'entrée, nous aimerions avoir le moins. Parce que lorsque nous en avons le moins , Webflow obtiendra automatiquement les données correctes. Et c'est le moins que nous avions dans la collection de billets de blog. Donc, je suppose que vous savez probablement déjà la solution à ce problème pourrait être. Donc, au lieu de cela pourrait être un peu contre-intuitif. Nous voulons afficher la catégorie, mais nous voulons utiliser la collection de catégorie, mais au lieu de cela, nous allons utiliser la même collection que nous avons utilisée pour les cartes de bloc, moins parce que ce que nous avons ici est la catégorie de lien vers ce post que nous pouvons sélectionner dans la liste. Et en choisissant dans la liste, encore une fois, comme un excellent moyen d'accomplir cela parce que cela restera à l'épreuve des balles. Et chaque fois que nous ou nos clients modifions quelque chose dans le CMS, nous pouvons le changer. Maintenant. Les catégories sont désormais verrouillées, sorte que la source est verrouillée. Nous ne pouvons pas vraiment dire que nous voulons des articles de blog ici et pourquoi il est verrouillé. Eh bien, vous devez comprendre que quand un champ à l'intérieur de cette collection moins wrapper est connecté à l'un des champs dans CMS. Cela regardera notre source et nous ne pouvons pas la modifier. Donc, en d'autres termes, si vous voyez une connexion violette ici à l'intérieur de cette structure, vous avez juste à dissocier les éléments. Donc maintenant, j'ai ce getText de catégories non liées. Et si je retourne à ma collection moins wrapper, je peux maintenant changer les catégories. n'y a plus d'icône de verrouillage ici, donc je peux la changer en billets de blog. Et cela va évidemment afficher autant d'éléments que j'ai des billets de blog dans mon CMS. Mais ce n'est pas un problème parce que je peux évidemment limiter cela avec un seul élément. Montrons un élément et commençons par un. Et maintenant, grâce à cette connexion que j'ai à l'intérieur des billets de blog, que j'ai les catégories lien vers les messages de blog. Je peux sélectionner la référence de catégorie, et maintenant je peux faire référence à la catégorie blockchain. Et c'est pare-balles. Maintenant, je vais avoir le nom que je peux lier. Sélectionnons le titre et obtenons des textes à partir des billets de blog. Et ici, nous avons les champs liés. Allons à la catégorie et nous allons lier le nom de la catégorie. Cela affichera toujours le même nom de catégorie que nous avons ci-dessous pour nos messages. C' est donc la meilleure solution. Et la deuxième solution, la deuxième façon que vous pourriez penser comme juste mettre l' élément H1 à l'intérieur de ce wrapper de liste de collection pour le panier de bloc le moins. Mais encore une fois, c'est parfois, c'est gênant. Parfois, vous voulez avoir des collections séparées en une seule, disons section. Et vous voulez lier ces connexions à différents éléments, mais connecté à une catégorie CMS ou à un élément de liste CMS. Donc, nous l'avons, maintenant c'est fait. allons peut-être diviser cette leçon afin que nous puissions continuer dans la prochaine et changer notre bouton et également dupliqué et créer un plus de catégories. Je te verrai dans la partie suivante. 16. Sections de page principale partie 2: Salut là, Bienvenue à la prochaine leçon. Nous commençons là où nous nous sommes arrêtés dans la précédente. Et maintenant notre défi est d'avoir ce bouton pour lier à tous les messages de la catégorie que nous avons ci-dessus. Donc, ci-dessus, nous avons blockchain pour l'instant, nous allons le changer en logiciel dans une seconde, mais nous avons une catégorie et nous voulons le lier. Et peut-être que nous voulons aussi juste changer le nom afin que nous ayons voir les articles blockchain ici. Et vous savez que lorsque vous sélectionnez quelque chose dans Webflow, certains textes, vous pouvez évidemment créer une plage pour envelopper cela dans une plage. Maintenant avoir une travée nous permettra de créer une collection. Donc, utilisez la collection et injectez le nom de la catégorie ici afin que nous ayons voir les articles de blockchain ou les vues après les articles. Donc, nous avons ce panneau de texte à l'intérieur du bouton et de l'enveloppe de bouton CTA. Dans ce wrapper, Positionnons-nous ici et appuyez sur un pour créer une collection au moins. Ensuite, nous voulons évidemment mettre la liste de collection à l'intérieur de la ville, mais sur wrapper et l'élément de liste de collection ici, nous allons avoir cette longueur ce bouton. Double-cliquez d'abord et reconnectez-le, comme nous l'avons expliqué dans la leçon précédente, nous ne voulons pas vraiment connecter ces deux catégories. Au lieu de cela, nous voulons nous connecter à des articles de blog afin que nous ayons toujours ce lien et qu'il soit lié à des catégories afin que nous puissions afficher le nom qui nomme les articles en un seul. Et puis filtrons ceci pour que nous ayons le nom de la catégorie ici, encore une fois, le même que nous l'avons fait pour le titre. Nous avons la sélection avec blockchain, donc c'est pare-balles, génial. Et le problème serait qu'il est impossible d'utiliser cette collection de données dynamiques dans la durée. Mais mettons d'abord l'élément de collection de fin inférieure. Si vous ne pouvez pas survoler et vous positionner correctement, s'il est rouge, il est parfois préférable de copier et coller l'élément au lieu d'essayer, vous savez, simplement le déplacer. Donc, je vais juste copier le bouton, puis cliquer sur l'élément de collection lui-même et le coller avec la commande V. Maintenant, c'est à l'intérieur et vous pouvez supprimer l'ancien. Donc, sélectionnons-le et supprimez-le. C' est généralement comme ça que je fais quand je ne peux pas vraiment, vous savez, me positionner et le navigateur. Et maintenant, nous avons cette étendue de texte et théoriquement c'est dans la collection et l'élément de collection. Il devrait avoir la source des données que nous avons dans CMS, mais ce n'est pas le cas, donc, oh, ne l'a pas pour l'instant. Peut-être que dans votre version de Webflow, certaines nouvelles versions, cela sera corrigé. Mais pour l'instant, je ne peux pas vraiment m'appliquer à une travée. Au lieu de cela, je pourrais évidemment appliquer cela au bouton gros élément et obtenir le texte du nom du billet de blog et le nom de la collection. Et ici, nous avons blockchain, mais ce n'est pas vraiment intuitif. Il devrait dire Afficher tous les articles blockchain ou afficher les articles blockchain au lieu de juste blockchain. Donc, ce que je peux faire est juste de recréer la structure de ce bouton dans un bloc de liens. Donc, sélectionnons et créons un bloc de liens. Et recréons le fond avec des éléments appropriés. Donc les manuels appropriés que nous allons créer auront un seul manuel dans lequel nous allons dire. Une vue, puis nous aurons les données dynamiques provenant de la collection. Et puis nous avons un autre manuel. Donc, disons ici, passons au style et définissons le bloc inline-avant d'en coller un autre parce que nous voulons copier et coller et nous voulons l'avoir dans une ligne donc il est préférable de l'appliquer d'abord. Et il y aura le nom de la collection, donc XXX pour l'instant et puis il sera voir les articles blockchain. Et maintenant ce que je dois faire, c'est avoir ce lien. Oui, connectons ça aux articles de blog. Et puis connectons ceci au nom de la catégorie. Cela devrait afficher la chaîne de blocs correctement. En outre, j'ai besoin de corriger une faute de frappe et j'ai besoin d' appliquer quelques classes probablement ici, nous avons le bloc de liaison sans la classe, nous devons utiliser la classe de bouton probablement. Donc, nous allons utiliser le bouton big class, et cela va automatiquement créer un joli bouton pour nous. Et pour la zone de texte. Débarrassez-vous de la classe de manuels. Et au lieu de cela, je vais simplement créer une classe de texte bouton avec la couleur blanche et certaines propriétés. Disons afficher inline-block, et utilisons la couleur blanche pour ce texte. Ce que vous pouvez faire est simplement supprimer les anciennes classes des autres manuels, supprimer et appliquer les nouvelles. Donc, le texte du bouton. Et aussi pour le dernier manuel. Pour ce texte de chaîne de blocs du milieu, j'aurais besoin de le sélectionner et d'appliquer une classe de combo afin que nous puissions appliquer un remplissage ou une marge autour d'elle. Donc, disons que ce serait la catégorie, mais sur la catégorie suivante. Et maintenant, appliquons un rembourrage de quatre ou cinq pixels de chaque côté. Donc, je vais appuyer et maintenir Option et, et lui donner un remplissage de cinq pixels. Ok, maintenant on a recréé la restructuration du bouton. Nous pouvons supprimer l'ancien et nous avons ce que nous voulions. Ainsi, la chaîne de blocs est maintenant liée dynamiquement au nom de la catégorie. Et nous avons cette section de catégorie de bloc comme modèle. Nous pouvons réellement utiliser pour tous les autres, pour toutes les autres sections de notre page. Permettez-moi également de créer une classe combo ici, section bloc. Et ajoutons un peu de rembourrage ici, une marge vers le bas. Maintenant, ça a l'air mieux. Nous devons créer ce modèle unique. Nous pouvons nous débarrasser des anciens pour que nous puissions simplement le réutiliser maintenant et copier et coller. Et tout ce que nous avons à faire dans ces sections maintenant est de changer la connexion à la bonne catégorie sur chacun des trois éléments. Donc, nous avons le titre du bouton et aussi le contenu. Et nous devons le changer de sorte que le premier élément de la collection est lié à pas la chaîne de blocs probablement, mais la première catégorie de logiciels RSS, enregistrez-le. Ensuite, nous devons aller à la deuxième collection, moins de caoutchouc et lier cela à des logiciels aussi bien. Et aussi pour le bouton, rappelez-vous que nous devons changer le texte du bouton. Cette vue articles blockchain dans ce wrapper de liste de collection. Sélectionnez le logiciel et cela appliquera automatiquement le nom du logiciel à notre bouton. Nous devons donc répéter ces étapes pour chaque catégorie maintenant. Mais le concept que j'ai créé ici est plus important que de cliquer en ce moment, le concept est que nous avons théoriquement des listes de collection séparées pour le bouton et le titre et les cartes, mais ils sont inextricablement liés ensemble. Et si nous changeons quoi que ce soit, par exemple, le nom de la catégorie ou nous réorganisons les messages. Tout cela sera dynamique et travaillera ensemble. Il ne se cassera pas. Et c'est la chose la plus importante. Si vous avez CMS et que vous avez l'option d'éditeur activée, quelqu'un peut simplement changer le nom des catégories, changer leur nom, les noms des billets de blog, et les réorganiser. Et cela vous obligera toujours à réparer toutes les connexions dans votre, dans votre page. Il est donc préférable de penser à l'avance et la structure discrète qui permettra ces changements et s'adapter dynamiquement. Maintenant, nous avons toutes les catégories liées, nous avons tout en place. Utilisons aussi le symbole. Je vais juste le mettre sur, sur les éléments de mon corps. Je vais utiliser ce symbole de pied de page tout en bas de la page. Et je pense que la structure de la page d'accueil est maintenant prête. On peut prévisualiser cette structure. Nous avons l'article de fond. Toutes les données sont dynamiques. Nous avons le menu qui est Dynamic 2. Tout ce que nous avons à faire est de créer cette page de blog. Nous avons déjà cela lié correctement et nous avons quelques éléments CMS avec des billets de blog, mais nous devons créer le design. Faisons-le dans la prochaine leçon. 17. Page tout : Bonjour, Bienvenue à la prochaine leçon. Je suis vraiment heureux que vous soyez ici, surtout parce que maintenant que nous avons tout en place, nous avons notre guide de style et nous savons déjà comment travailler avec les articles de collection. Il sera super facile de créer de nouvelles pages et d'organiser notre blog. Maintenant, nous avons ce menu. Changons le nom de fixe au menu de bloc et nous pouvons créer un symbole hors de celui-ci. Donc, avant de créer une nouvelle page, n' oubliez pas de créer des symboles, pour ajouter de nouveaux symboles, vous pouvez l'ajouter à partir du menu des symboles et vous pouvez également cliquer avec le bouton droit de la souris sur l'élément pour créer un nouveau symbole, vous avez juste à vous assurer que vous cliquez dans le menu de bloc lui-même, cliquez avec le bouton droit de la souris, puis symbole de creed, créez un symbole de menu. Et de cette façon, nous aurons ce composant. Et ce composant sera le même dans toutes nos sous-pages. Maintenant, nous allons également copier la section bloc héros et allons bloquer tous les messages pour créer cette page. abord, je vais aller aux symboles et utiliser notre menu de blocs que nous venons de créer, puis coller section look héros. De là, nous n'avons pas besoin de cette collection belle wrapper. Supprimons, mais je vais utiliser ce bloc de section et conteneur et réserver votre titre. Et à l'intérieur de ce sélecteur, je vais juste coller ce que j'ai dans mon guide de style. Allons à nouveau aux symboles et utilisons un symbole de section d'en-tête. C' est à peu près parfait car il a la mise en page définie sur Flexbox et nous avons la bonne justification. Donc, cela s'intégrera parfaitement. Et maintenant, allons à ses propriétés. Vous pouvez voir que nous avons tous les remplacements que nous pouvons modifier afin de définir o articles ici pour les textes de légende, nous allons utiliser le blog et le texte de description. Je vais le laisser tel quel pour l'instant. Maintenant, pour ce titre de héros de bloc, ce que nous voulons faire est d'ajouter une autre classe de combo. Donc, créons la classe qui ne détruira pas vraiment toutes les autres instances de cet élément lorsque nous changeons quelque chose. Donc, je copiais toujours des éléments et les collez sur les différentes sous-pages. Mais en plus des classes existantes, si je veux modifier quelque chose comme le remplissage ici, j'ajoute juste une autre classe. Si je le laisse comme il est, il modifiera automatiquement cet élément sur la page d'accueil aussi. Et je ne veux pas vraiment ça. Donc, nous allons avoir un empilage de 80 pixels. Et nous l'avons ici. Maintenant, nous réutilisons trois éléments et nous pouvons réutiliser encore plus d'éléments, y compris cette section de conteneur de contenu de bloc avec moins de caoutchouc de collecte. Chaque fois que je vois quelque chose qui peut être réutilisé sur l'ensemble de mon site Web. Ce que je fais est d'essayer de le mettre dans le guide de style. Quelque part. Dans mes guides de style, je peux avoir des pages séparées pour tous les composants, mais dans notre structure est assez simple. Nous n'avons pas vraiment besoin d'avoir des pages séparées, alors peut-être mettons-les dans ce conteneur pendant que nous avons des cartes. Et maintenant j'ai cet élément réutilisable. Je peux lui donner un nom d'emballage de chariots de bloc et aussi en créer un symbole plus tard afin que je puisse le réutiliser. Mais pour l'instant, il suffit de rester dans mon guide de style. Maintenant, ce que je peux faire est de retourner à la page d'accueil et copié le conteneur de contenu de bloc entier que je vais, ou peut-être toute la section qui le positionnera aussi bien sur cette page de billet de blog et le coller ici. Allons à cette page et nous allons cliquer sur l'élément body pour le sélectionner. Maintenant, Commande V pour coller la section entière. Il est toujours préférable de coller à partir de l'élément body car il n'aura aucun conflit dans les conteneurs. Maintenant que le titre et le bas, et ici nous avons la collection moins wrapper. Tout ce que nous avons réellement besoin de changer dans la collection de ces réglages en caoutchouc est de ne pas limiter les articles parce que nous voulons afficher tous nos articles de blog ici. Donc, j'ai juste décoché les éléments de limite. Et là, nous l'avons, c'est prêt. Le bloc 0 pages de poste presque fait. Ce que je dois faire est d'ajouter une autre classe au-dessus de cette section de catégorie de bloc. Encore une fois, je ne veux pas modifier la section que j' avais sur la page d'accueil afin que j'utilise la classe combo pour le faire. Maintenant, nous avons des margarines à la fois pour la section B, le héros, et la section catégorie. Donc, d'abord, nous devons section héros livre, sélectionner ceci et ajouter une autre classe combo afin que nous puissions nous débarrasser de ce bas de marge. Et nous allons avoir un bloc ou des messages ici. Et ça se débarrasse de la grille intelligente. Nous pouvons nous en débarrasser complètement et, et le réduire à 0 pixels. Et puis à partir de la section catégorie, regardez la section catégorie, nous pouvons changer cette marge. Encore une fois, nous avons une classe combo séparée pour cela donc nous ne changerons rien sur notre page d'accueil. Et maintenant nous avons le Morgan Asper ce design. Qu' est-ce qu'on veut faire d'autre ici ? Eh bien, vous pouvez créer sur cette collection moins de caoutchouc. Vous pouvez également créer la pagination signifie que lorsque vous allez dans les paramètres, vous pouvez vérifier cette option de petits éléments de pagination et ensuite vous serez en mesure décider combien d'éléments de la collection que vous voulez afficher par page, nous avons cinq éléments ici. Vous pouvez prévisualiser deux pages qui ont été générées parce que nous avons 10 messages, donc nous avons deux pages et vous pouvez basculer d'une page à l'autre. Et comme vous pouvez le voir aussi, nous avons tout en bas, les boutons précédents et suivants qui sont affichés par Webflow, nous pouvons avoir neuf éléments afin que nous ayons trois lignes. Ça a l'air plutôt bien. Et aussi lorsque vous cliquez sur ce bouton Suivant, vous allez à la deuxième page. Nous avons seulement un élément ici maintenant, peut évidemment styler les boutons suivants et précédents. Si vous sélectionnez ce bouton, vous pouvez également afficher le nombre de pages, ce qui affichera le nombre de pages en bas du bouton. Donc ici, nous avons 2, deuxième page sur deux, et ici vous avez FirstPage sur deux. Et si vous allez à la page appropriée et sélectionnez ce bouton, vous pouvez le styliser comme vous le souhaitez. Pour nous, nous avons déjà bouton grande classe et aussi la classe de contour que nous pouvons utiliser tout à fait pour créer le bouton selon notre guide de style. Et la même chose que nous voulons faire au bouton précédent, mais afin de l'avoir sélectionné, Allons peut-être à la deuxième page et voyons ce que nous faisons. Encore une fois, appliquez ce bec inférieur de classe, puis combo classe de contour. Et ici, nous avons nos styles de boutons pour ce nombre de pages. Je pense que je n'ai pas vraiment besoin de ça, donc je vais juste le désélectionner, mais vous pouvez le coiffer quand vous voulez. Et pour l'ensemble de l'élément de pagination que vous pouvez sélectionner dans le Navigateur. Maintenant, nous allons définir la classe pour cette nation de sac de livre élément. Et appliquons également la marge au sommet de cet élément. Disons 26 pixels. Maintenant, nous allons prévisualiser notre page précédente et suivante, cela fonctionne. Donc tout est prêt. On est presque prêts. En passant, si vous voulez utiliser une sorte de pagination différente avec des nombres, quelque chose comme ça. Eh bien, ce n'est pas vraiment possible dans Webflow en ce moment, mais la pagination que nous avons en quelques clics, je pense que c'est assez bien. Nous allons également nous assurer que l'ordre de tri est correct pour cette page de blocs de hautbois particulier. Et c'est parce que c'est du plus récent au plus ancien en fonction de la date de publication. Donc, c'est bon. Je n'avais pas vraiment besoin de le changer. Une autre chose que je peux ajouter à ce livre, oh, page des messages est mon pied de page. Et vous pouvez le faire en sélectionnant l'élément de corps et aller dans les symboles. Ou vous pouvez simplement appuyer sur la commande E, puis rechercher le pied de page. C' est un moyen vraiment pratique de trouver des éléments Commande E, puis vous trouvez quelque chose dans Webflow. Comme vous pouvez le voir, j'ai tous les messages sélectionnés en ce moment parce que je suis sur cette page. Et si je veux le changer, c' est un composant. Cela signifie que si j'apporte des modifications au HTML, cela sera disponible sur toute la page. Donc, si je change à 0 articles et retourne à notre page de blog, vous verrez qu'il y a tous les articles ici aussi. Donc, nous sommes à peu près prêts avec cette page. Et comme vous pouvez le voir, réutiliser des éléments et des techniques que nous avons appris est vraiment efficace. se voit dans la leçon suivante. 18. Page de catégories: Salut là et bienvenue à la prochaine leçon. Maintenant, nous allons travailler avec des pages CMS dynamiques. Allons donc aux pages de collection CMS. Et ici, nous avons des catégories modèle, cette page est violet et ce sont des pages spéciales générées par CMS. Ils vous permettront de prévisualiser les éléments individuels. Par exemple, en ce moment, nous affichons un aperçu de la chaîne de blocs et des éléments. Et aussi ces pages ont plus de superpouvoirs. Je vais te les montrer plus tard. ce moment, nous allons créer une structure de base pour ces catégories modèle en ajoutant notre menu ainsi que notre pied de page et entre-deux, je vais juste emprunter quelque chose de bloc ou de messages. Cet en-tête est assez cool. Donc, nous allons sélectionner la section bloc héros, et nous allons coller sur notre modèle de catégories entre le menu de bloc et le pied de page. Maintenant, revenons à bloquer tous les messages afin que nous puissions le copier encore plus. Maintenant, comme vous pouvez le voir, nous sommes un peu paresseux. Nous ne voulons pas vraiment créer de nouveaux éléments. Au lieu de cela, nous copions et collons. Mais c'est vraiment bon parce que nous avons tout en place avec les mêmes classes et les mêmes composants. Lorsque nous le modifions sur une page, il sera automatiquement modifié sur toutes les autres pages. Et on va faire ce héros de bloc de section dans une seconde. Mais d'abord, nous allons nous assurer que nous avons la section de catégorie de blocs liée à la section appropriée. Sélectionnons le wrapper moins de collection. Et ici, nous devons filtrer. Et ces pages violettes, les pages CMS générées automatiquement, ont ce grand avantage qu'elles peuvent fondamentalement lier à l'élément actuel, à l'élément courant dans CMS. Donc, dans ce cas, nous avons des catégories liées, donc nous pouvons lier à la catégorie actuelle. C' est assez unique à cette page pourpre. Et grâce à cela, nous serons en mesure de cliquer à travers le menu sur le marketing logiciel et mobile. Et il obtiendra automatiquement le poste leurs articles de la catégorie des courants. Donc c'est plutôt cool. Nous allons le laisser à la catégorie des courants et l'enregistrer. Et tout ce que nous avons besoin de changer maintenant, c'est la section des anciens articles ici. Nous devons arriver à cet en-tête d'articles anciens et le remplacer par la catégorie actuelle. Mais ce que nous pouvons faire est d'emprunter l'élément de, Je suppose que la page de blog que nous avons créé ici nous avons cette section titres et ce sont des collections et ils lien vers l'élément approprié. Donc nous pouvons emprunter la collection entière du moins d'ici. Mais en passant, nous pouvons utiliser des collections et je le fais pour vous montrer que nous pouvons également utiliser des collections sur la page des catégories. Mais si vous êtes sur la catégorie de salaire sur cette page violette, vous n'avez pas vraiment besoin de collecte. Vous pouvez simplement sélectionner l'en-tête et utiliser les catégories de données tout de suite. Donc, il y a essentiellement deux façons de le faire. Sélectionnez simplement l'en-tête ou, et utilisez les données du nom de la catégorie de collection. Ou vous pouvez utiliser la collection et ensuite vous pouvez le lier, dans ce cas deux catégories de courants et l'afficher comme blockchain. Deux façons. Je voulais juste vous montrer cela, et je veux juste que vous sachiez que vous n'avez même pas besoin de cette collection pour que cela fonctionne, vous devez dissocier l'instance du symbole, sélectionner l'en-tête et le modifier dans les propriétés. L' inverse est d'utiliser la collection. Et vous pouvez également utiliser des collections sur ces pages violettes. Donc là, vous l'avez. Il y a des choses spéciales sur les pages violettes que nous avons explorées en ce moment. Toutes les catégories fonctionnent et affichent des noms corrects ainsi que des articles liés à cette catégorie avec pagination. Donc, nous sommes presque prêts. Ce que nous pouvons faire est également de créer des pages séparées pour les auteurs et les tags. Mais ce serait le même processus que nous nous répétons. Donc je suppose que vous pouvez le faire par vous-même. Et ce que nous allons nous concentrer sur le modèle de billets de blog, qui est la page avec le contenu réel de nos articles. Alors concentrons-nous sur cela dans la prochaine leçon. 19. Page de publication de blog: Salut là, Bienvenue à la prochaine leçon, et nous voici dans XD. Ceci est la maquette de notre blog page unique. En haut, nous avons une image que le contenu. Ensuite, tout en bas, nous avons quelques articles liés probablement de la même catégorie. Il y a aussi un titre et l'information sur moment où ce post a été créé par qui et à droite, nous avons juste une section statique avec newsletter et la section qui nous permettra de partager sur les médias sociaux. Donc, sans plus tarder, commençons et créons notre page de modèle de billets de blog. C' est la page pourpre. Cela signifie que nous pouvons basculer entre les éléments de bloc ici. Ici, nous avons le premier article de livre, mais nous pouvons simplement aller à n'importe quel article que nous avons. Rappelez-vous que ce sont des articles générés automatiquement par Webflow et notre CMS. Donc, nous n'avons même pas besoin de créer des données factices. On pourra basculer entre eux. Créons la structure de base de cette page. Donc, nous allons ajouter un composant qui est notre en-tête, aussi un ESSEC, nous allons ajouter un pied de page, mais entre j'ai besoin de cette section est devenue 0. Donc, je suis juste de copier cette section et je vais la coller sur mon modèle de billet de blog. Et en passant, je vous ai déjà dit dans la leçon précédente que nous n'avons pas vraiment besoin d'utiliser des articles de collection sur des pages violettes. Par exemple, lorsque nous avons, disons en-tête, nous pouvons obtenir du texte à partir de billets de blog pour cet élément sans avoir à avoir ces éléments de collection. Nous pourrions donc le faire dans la leçon précédente aussi. Mais je voulais vous montrer une collection. Mais sur les pages violettes, nous pouvons utiliser les données de la collection directement sans avoir besoin d'avoir cette collection moins rappeur, ce que je vais laisser ici est juste la structure avec l' image de héros de bloc et quatre loci tournés. Je vais ajouter une autre classe combo afin de ne rien modifier sur ma page de livre. Et ce seront des billets de blog. Et maintenant, nous allons changer les propriétés de ceci pour avoir la hauteur de 80 pixels design Asper. Et pour l'image de héros de bloc, je veux aussi ajouter une classe de combo. Créons un blog post-classe. Et faisons que cette image se répande sur tout le conteneur. Donc, nous allons avoir une largeur de 100%. Et aussi, nous devons changer le rayon de la bordure afin que nous ayons un rayon de 12 pixels à chaque coin. Comme nous l'avons copié, cette image est déjà liée à l'article. Donc, lorsque nous changeons l'article, nous pouvons prévisualiser une image différente. Nous avons des photos différentes pour chaque article. Maintenant, ajoutons un autre élément que nous allons créer la section. Et à l'intérieur, nous avons besoin d'un conteneur. Cette section sera la section de notre article. Et je veux le diviser en deux colonnes et créer ceci à partir de zéro. Nous savons à partir des éléments de réutilisation parce que c'est assez unique. Je vais lui donner un nom, la section des billets de blog. Et pour le conteneur lui-même, Créons le contenu des billets de blog pour ce conteneur, Je veux aussi définir la largeur maximale à 1080 parce que je veux qu'il soit légèrement. Plus petit que la page entière. Je veux que le contenu soit lisible. Je vais le diviser en deux colonnes, mais je veux quand même avoir, disons, 70 ou 90 connexions par ligne pour qu'il soit plus confortable à lire. Aussi, j'ajoute 20 pixels de rembourrage à chaque site pour ce conteneur de blog, c'est assez cool parce que dans la tablette et le mobile auront ce rembourrage mis à 20 aussi bien. Et cela sera réactif maintenant, à l'intérieur de ce que nous pouvons utiliser comme colonnes ou nous pouvons utiliser simple d-block avec Flexbox ou nous pouvons utiliser grille. Et je pense que cette grille est un peu la meilleure, la plus polyvalente que l'on ne puisse entendre. Donc nous sommes d'accord avec une ligne et deux colonnes. Maintenant, nous pouvons accéder à cette salutation C'est appliquer ces changements, renommer la classe en section post blog. Changeons-le pour le blog post cupidité. Et maintenant, éditons à nouveau ces grands et changez les fractions, changez la taille des colonnes parce que je veux que cette première colonne soit, disons 1,75 ou deux fractions, et cette dernière soit une fraction afin que nous ayons cette barre latérale de côté qui est plus étroite que le contenu réel. Et à l'intérieur de la grille, nous allons ajouter aux blocs. Le premier sera pour le contenu de notre article de blog. Renommons la classe. Et le second, créons ce D-block. Ça va être pour le jaune. Mettons-le dans les billets de blog, saluer, et ce sera pour notre section côté, côté et bulletin d'information ainsi que des options de partage. Donc, nous avons la bonne structure maintenant, conteneur de section, saluer et ensuite div de contenu. C' est la structure que je principalement, pour la plupart du temps j'utilise pour ce genre de tâches. Et maintenant ce que je veux faire est de recréer ce titre et cette légende, ainsi que des informations sur la date et l'auteur. Donc nous n'avons pas vraiment quelque chose que nous pouvons réutiliser. Donc, nous allons créer un autre bloc d qui va être bloqué de titre de blog post. A l'intérieur de ce bloc de titre, j'ai besoin de la structure de la légende. Donc, je vais utiliser le manuel ici. Ensuite, appuyez à nouveau sur a pour ajouter un autre élément qui serait notre en-tête. Et encore une fois, vous pouvez utiliser la recherche dans Webflow pour ajouter des éléments. Vous n'avez pas vraiment à les sélectionner dans le menu. Vous pouvez appuyer sur Commande E, puis taper paragraphe ou en-tête, et vous allez l'avoir. Ici, nous avons par quelqu'un, par auteur, puis à la date spécifique, par exemple, Gen 5. Maintenant ce que j'aimerais faire, je dois changer. J' ai besoin d'avoir cette dynamique de données. Et comme je vous l'ai déjà dit, Cela ne peut pas être fait, au moins dans ma version de Webflow avec une travée. Donc, ce serait le moyen le plus simple d'envelopper cela avec span, puis aller dans les paramètres, puis se connecter aux données appropriées à partir de CMS. Mais ce n'est pas possible. Donc, j'ai besoin de supprimer cela et j'ai besoin de créer trois éléments comme nous l'avons fait, tout comme nous l'avons fait pour le bouton. Nous devons créer un bloc de texte multiple. Le premier contiendra les informations à ce sujet. Donnons-lui une légende de nom, blog, post. Et le premier aura les informations sur l'auteur. Changeons cela en inline-block. Ensuite, nous allons avoir les informations sur la date. Donc, nous allons nous assurer que nous avons propriété définie correctement avant de copier et coller cela plusieurs fois. Quand utiliser le gris foncé pour cela. Et maintenant, nous pouvons copier et coller ce deux fois ou trois fois encore parce que nous avons besoin de BY et puis le nom de l'auteur. En outre, nous devons le diviser avec du texte sur. Alors on aura la bonne date. D' accord. Donc oui, c'est plutôt gênant qu'on doive le faire comme ça. Mais en tant qu'écrivain, nous avons besoin d'une marge à droite. Quatre ou cinq pixels suffisent généralement pour un espace. Et maintenant notre structure de cap est prête. Nous avons peu de manuels. Choisissons le premier. Ceci est sous-titré, alors appuyez sur Command Return et utilisez notre légende de classe existante du guide de style. Et je pense que le bloc de titre du blog est prêt. Regardons, regardons le contenu du post et ajoutons un autre élément ici qui serait paragraphe. Et ce paragraphe est spécial. Alors créons une classe pour cela, extrait de blogposts. Et créons une marge vers le bas et vers le haut. Nous allons ajouter une marge de 32 pixels. En outre, nous devons modifier certaines propriétés de texte en fonction de notre conception. Donc, modifions la police, le poids et la taille. Utilisons 22. Et pour la hauteur de ligne, nous allons utiliser 32 pixels. Et c'est selon notre conception. Maintenant, nous allons nous positionner à nouveau sur le contenu de l'article de blog et ajouter un élément de texte riche. Nous avons atteint le texte dans notre base de données CMS. Ainsi, le type du champ que nous utilisons pour le contenu de l'article est atteint texte. Donc maintenant, nous pouvons utiliser ce bloc x atteint pour formater toute la structure de l'article. Et c'est assez cool parce que le blog atteint x a en fait des styles séparés et nous pouvons le styliser dans notre guide de style, et nous l'avons déjà fait, nous avons un article de blog comme une classe pour notre élément de texte riche qui devrait être utilisé sur les billets de blog modèle. Sélectionnons ce bloc de texte riche et lui donner une classe d'article de blog et le faire. Nous l'avons donc maintenant copié et les temps sont les mêmes que dans notre guide de style. Et maintenant, notre structure est presque prête. Oh, nous devons faire est d'ajouter un autre composant qui sera notre pied de page et également créer une structure pour les actions du site. Donc, avant de le faire, nous allons peut-être sélectionner les éléments auxquels nous voulons appliquer des données dynamiques. Encore une fois, nous avons cette page pourpre donc nous n'avons pas vraiment besoin de collections afin de le lier aux données de la collection d'articles de blog, nous pouvons obtenir le texte du billet de blog ici. Et ce serait notre légende. Nous devons donc simplement faire défiler le nom de la catégorie. Et en tant que légende, nous allons utiliser le nom de catégorie pour l'en-tête réel. Nous utilisons le nom des messages. Et ici, nous avons aussi quelques données dynamiques, grâce aux connexions que nous avons faites dans notre CMS, nous avons en plein air et tout le reste lié à la collection de billets de blog. Et c'est ainsi que nous pouvons obtenir ces données de CMS pour la date à laquelle nous avons ici deux dates automatiquement ajoutées par CMS, mises à jour et également publiées sur. Dans ce cas spécifique, bien sûr, nous voulons utiliser publié sur et aussi Webflow. Formatons cette date ici nous avons Juin 2006, mais nous pouvons changer la façon dont ces données sont formatées et affichées sur notre bloc. Il y a peu de formats différents que nous pouvons sélectionner. Comme vous pouvez le voir, beaucoup d'entre eux en fait, nous pouvons afficher la date entière. On ne peut utiliser que le mois ou le jour, et oui, on peut faire ce qu'on veut avec cette date. C' est assez polyvalent. Laissons la jambe comme S, et maintenant nous allons obtenir la copie de CMS pour notre extrait de billet de blog. Je vais le lier à l'extrait. Et pour l'article bloc, nous devons lier l'article entier au domaine que nous avons. Et c'est du contenu. Vous pouvez voir que cela est atteint élément de texte. Donc, le type de cette propriété dans le CMS est également un texte riche et cela nous permettra de simplement lier les données de ce champ à notre contenu de blog. Ok, donc ici nous avons des données dynamiques sur le côté gauche de notre page de blog. Si nous changeons les messages, maintenant, vous pouvez voir que nous avons un titre différent, section différente et l'auteur et ainsi de suite. Donc, tout fonctionne correctement. Et de cette façon sur les pages violettes, nous pouvons simplement sélectionner différents éléments de CMS et nous voyons tout. Maintenant, dans la leçon suivante, tout ce que nous devons faire sur cette page est créé actions de site qui seront newsletter et des options de partage. À plus tard. 20. Page de publication à partir de la page: Hey, ravi de te voir dans la prochaine leçon. Et si tu penses que tu pourrais manquer une leçon entre les deux, non, ce n'est pas le cas. Je viens de créer cette newsletter caoutchouc et emballage social juste entre les leçons parce que c'est structure super simple que vous connaissez déjà à partir du cours de base. J' ai donc pensé qu'il serait préférable d'utiliser votre temps non seulement pour créer des conteneurs et des alignements, mais pour vous montrer quelque chose de vraiment important et quelque chose de plus excitant que ça. Et c'est la structure en caoutchouc de la newsletter. Nous avons paragraphe et bloc de formulaire. A l'intérieur de ce formulaire, nous avons juste un email. Ce que j'ai fait, c'est que je viens de copier cela depuis le pied de page et de changer légèrement la taille. Ensuite, nous avons un wrapper social avec paragraphe et d-block avec trois icônes de médias sociaux. Ce sont des liens et en survol, ils ont cet autre état qui va juste changer la couleur de l'icône. C' est ça. Structure super simple et nous pouvons continuer, nous pouvons rendre cette structure fixe sur notre site web. Allons donc à la propriété position et nous pouvons la changer en fixe ou collant. Nous avons utilisé corrigé pour notre menu de navigation pour l'ancrer tout en haut de notre site Web. Mais la différence entre fixe et collant est que collant fonctionnera et juste mettre cet élément en place, en fonction de la vente aux enchères de l'utilisateur, en fonction du défilement, de la position de défilement de notre site Web. Donc, si nous jetons un oeil à ce pixel très haut du navigateur et le pixel Topsy des actions de vue. Nous pouvons simplement faire dépendre l'un de l'autre en changeant cette propriété pour laisser dire 0. Cela le fera coller tout en haut du navigateur. Notre pixel supérieur de ce site actions atteint l'élément supérieur du navigateur. Maintenant 40 alignement je vais utiliser start au cas où cela serait avidité pour que cela fonctionne correctement. Et maintenant, j'ai cette valeur à 0. Donc, lorsque ces sujets action hors site atteint le pixel 0 du navigateur. Donc, le haut du navigateur, il restera collé à cette position même. Ce que nous voulons faire est de compenser cela un peu pour que nous ayons l'espace pour notre menu de navigation ainsi que certains, un peu de rembourrage ci-dessous. Alors, prenons 100. Et cela décalera le point de collage de départ des éléments de séduction à 100 pixels du haut. Donc, quand nous atteindrons 100 du haut, il restera comme S. Donc, il est encore préférable de prévisualiser cela en utilisant notre commande de prévisualisation Shift P. Et ici vous l'avez. Donc maintenant, il est bien amarré sur le côté droit. Et c'est essentiellement tout ce que nous avons à faire pour que cet élément reste à cet endroit. En attendant, j'ai remarqué que dans mon design, j'ai aussi cet élément TOC sur la photo. Donc, je peux emprunter l'élément TOC avec cette collection. Probablement. Faites-le copier et coller sur notre modèle de billet de blog. Amenons cet emballage fiscal ici. Ceci est défini pour être la position absolue 16, 16 pixels. Maintenant, il est positionné sur le corps. Mais si nous changeons la position du héros de bloc, sorte que c'est un parent, maintenant il devient la puissance relative. Et pour cet emballage fiscal, et tout semble vraiment bon. Donc, dans ce balises à l'intérieur, nous affichons la balise ainsi que élément vedette selon que ce post est mis en vedette dans notre CMS. Rappelons-nous, passons à ses paramètres. Et ici, nous avons la condition lorsque la fonctionnalité est activée, elle aura cette fonctionnalité affichée. Voyons si ça marche. Allons à nos articles de blog. Collection et c'est sélectionner ce très à la fois. C' est 15 meilleurs blocs à suivre. Et nous allons changer en vedette pour balayer la fonctionnalité, passer à allumer, Enregistrer. Maintenant, nous n'avons pas vraiment besoin de publier pour voir cela dans notre concepteur. Et en vedette est maintenant affiché afin que tout fonctionne correctement. Mais si vous voulez voir cela sur votre page de travail, vous devez publier ceci, puis vous pouvez prévisualiser. Ok, maintenant l'autre chose que je voudrais faire est au bas du post, je voudrais afficher la liste de post.html vaut bien la peine d'être lu. Donc, je vais aller à la page du blog et copier toute cette catégorie de bloc et le coller à notre modèle de billet de blog. Donc, sélectionnons l'élément de corps, collez-le tout en bas. Et voyons cette section. Cette section est faite sur la base de la collection, au moins des articles et je n'ai pas nécessairement à utiliser collection au moins sur les pages violettes, mais je peux. Alors pourquoi pas ? Donc maintenant, je dois changer cette rubrique. Je ne veux pas que ce soit dynamique. Décochons donc ce getText du billet de blog. Et disons que ça va être continuer à lire trois points et supprimer le bas. Je n'ai pas besoin du bouton. Repositionnons cette section au-dessus du pied de page. Et maintenant tout ce que je dois faire est de m'assurer que j'ai le bon post affiché ici. Si je vérifie les paramètres de collection moins, vous verrez qu'il obtient les messages de catégories, logiciels, ce que je dois faire, et je ne peux pas le faire quand je suis sur le côté violet, est de sélectionner cette catégorie de blog actuel postes. Donc, il saura automatiquement intelligemment que je suis sur ce logiciel dans la catégorie logiciel ou blockchain ou marketing. Et si je le change, disons à ce post, nous avons ici les messages du logiciel. Si je le change à l'autre, c'est une catégorie indifférente. Maintenant, nous pouvons voir les messages de marketing. Donc c'est plutôt cool. De toute évidence, vous pouvez déterminer le nombre d'éléments que vous souhaitez afficher ici et vous pouvez déterminer l'ordre de tri, qui est maintenant le plus ancien à la date de publication. Alors nous allons, publions notre site Web et nous allons prévisualiser cela dans le navigateur. Après avoir publié, vous pouvez aller à la page d'accueil et vous pouvez voir que nous avons ce post en vedette, le plus récent avec le drapeau en vedette qui s'affiche dynamiquement. Nous avons également tous les articles récents et articles de différentes catégories ici. Ensuite, nous avons ci-dessous des articles, des articles récents seulement de catégories spécifiques. Et nous avons également des liens et des boutons qui pointent vers la page appropriée qui nous permettra d'afficher soit tous les articles sur notre blog ou les articles de catégorie spécifique à cette catégorie, vous pouvez également aller de la menu. Et enfin, si vous voulez prévisualiser le post exact, l'article exact, il suffit de cliquer sur cet article et encore une fois, toutes les données ici sont dynamiques. Vous avez le contenu de la publication et des informations photo sur d'autres messages qui valent la peine d'être lus. Et je suppose que la structure de base de notre site est maintenant prête. Et vous savez, tout sur les collections CMS et les pages CMS. 21. Configuration de recherche: Salut là, Bienvenue à la prochaine leçon et accédez à notre navbar. C' est donc un composant de menu de type type. A l'intérieur de celui-ci, nous avons la section Menu avec la marque et le menu de navigation. Et dans cette section, je voudrais ajouter un composant spécifique à partir de l'autre menu. Il s'agit de composants de recherche, alors cliquez sur Rechercher. Ajoutez-le ici, et maintenant nous pouvons le restyle et nous pouvons modifier les paramètres de recherche. C' est donc une surtension qui nous permettra de rechercher les éléments CMS et de l'afficher sur la page de résultats de recherche séparée. Je vais vous montrer comment personnaliser à la fois le composant de recherche et cette page de résultats de recherche. Maintenant, ce que nous voulons faire comme positionner les éléments, donc nous avons cette poussée et à l'intérieur il y a une entrée et des boutons. Donc, pour la décharge, nous pouvons afficher, régler l'affichage sur flex, puis aligner et le justifier au centre et au milieu. Ici, nous avons un rembourrage supplémentaire que nous pouvons réinitialiser. Il suffit d'opter pour cliquer sur l'élément pour le réinitialiser sur ce nombre, ou simplement sélectionner 0 ici. Et pour le bouton de recherche, nous voulons également réinitialiser le rembourrage ou légèrement modifié afin que nous ayons un remplissage de sept ou six pixels. Ceci est donc en ligne avec le champ de saisie de recherche. Maintenant, pour l'ensemble du composant, je suppose que nous avons un rembourrage supplémentaire ici aussi. Réinitialisons. Il est dit sélectionner 0. Et maintenant, nous pouvons le restyle légèrement afin que nous ayons un style agréable pour cet élément, fois pour son état statique ainsi que pour son état de vol stationnaire. Ce que j'aimerais faire est de définir le style de la bordure sur solide. Et je veux définir la bordure solide au bas de l'entrée de recherche. Choisissons ce peut-être gris foncé, gris foncé, et la couleur. Ok, aussi le même style pour la bordure que j'aimerais avoir pour le bouton de recherche. Oh, d'accord. Je dois mettre le style à solide, n'est-ce pas ? Et pour le bouton de recherche, je vais faire la même chose. Et nous allons changer la couleur en transparent, cette couleur de fond. Et définissons le fond de la bordure pour être uniquement et cette couleur gris foncé, ok, et plus tard, je vais changer l'opacité de cet élément en fonction du survol de l'utilisateur sur l'élément de recherche. Mais ce que j'aimerais faire maintenant est de changer le bouton de recherche en une icône. Je vais aller dans Paramètres de projet pour mon site de workflow et aller dans les polices. J' ai besoin d'installer des polices. J' ai déjà installé à partir du cours précédent afin que vous puissiez consulter le cours de base et comment installer des polices personnalisées. Ce que j'ai fait, c'est que j'ai installé cette Font Awesome en cliquant sur le bouton de téléchargement et juste en installant les polices TDF. J' ai FAA pour un 100 marques pour cent neuf cents. Maintenant, je peux utiliser, afin que je puisse utiliser des icônes de Font. Impressionnant, Laissez-moi rechercher une icône de recherche et maintenant copier cette icône glyphe dans le presse-papiers. Copions donc le glyphe Unicode. Cliquez dessus. Et maintenant, j'ai cette icône prête à être utilisée sur mon site ou ma page. Allons de l'avant et accédez à l'élément de recherche. Encore une fois, j'ai besoin de supprimer tout ce qui est là et de coller ce glyphe. D' accord ? Mais maintenant, j'ai aussi besoin de changer la typographie de sorte que la police ici est FA, SO IT nuit centaines. Et évidemment, je dois changer la couleur de la police en une couleur gris foncé. Encore une fois, nous allons cliquer dessus et ici vous avez l'icône. Maintenant, nous pouvons ajuster, ajuster la taille, la taille de la police pour changer la taille du cycle. Et c'est ainsi que vous appliquez des icônes de police personnalisées aux éléments que vous pouvez maintenant utiliser comme boutons, par exemple, dans le menu de recherche. Ensuite, nous allons ajuster cette tuile pour que nous ayons l'espacement correct. Positionnons-le à côté du logo. Ce n'est peut-être pas la meilleure façon de le positionner. Et aussi, vous devrez vérifier les versions tablette et mobile. Mais je vais te laisser avec ça. Ce n'est pas la chose la plus importante, mais ce que nous allons faire est de créer ceci en survol pour l'entrée de recherche et le bouton. Et ce que nous allons faire, c'est pour tout le composant de recherche, nous allons réduire l'opacité à environ 40 pour cent dans cet état statique. Et tout en planant sur cet élément, nous allons le changer en un 100 positif. Maintenant, si vous appuyez sur Commande Maj P ou cliquez sur l'icône pour prévisualiser, vous pouvez survoler cet élément. Et ici, vous avez un bel effet. Si vous souhaitez que cet effet soit animé, vous pouvez également créer l'effet de transition ou créer votre propre animation personnalisée dans Webflow. C' est quelque chose que nous avons déjà discuté dans le cours de base o ici dans les paramètres que vous avez le bouton pour aller à la page des résultats de recherche. Et alternativement, vous pouvez cliquer sur les pages et dans les pages utilitaires. Maintenant, vous avez une page de résultats de recherche que vous pouvez styliser et vous pouvez l'ajuster à vos besoins. Ici vous avez le conteneur, il y a un titre avec les résultats de recherche. C'est statique. Et ce que j'aimerais faire est de créer une nouvelle classe pour ce conteneur de résultats de recherche. Et juste légèrement compensé par le haut de la page avec le Morgan. Et ici, vous avez également des entrées de recherche telles que des boutons de la même structure que nous avions un, un composant de recherche. Ce que j'aime faire, c'est que je veux utiliser des classes personnalisées pour cette recherche pour générer automatiquement le nom de classe. C' est bon. Maintenant, créons cela à partir de zéro. Je ne veux pas copier les mêmes styles que ceux que j'ai dans la barre de navigation. Au lieu de cela, je voudrais créer un peu différent entrée de recherche et bouton de recherche afin que nous puissions les diffuser horizontalement sur toute la page de résultats de recherche. Et aussi peut-être appliquons un style, peut être quelques coins arrondis pour cet élément. Et à la seconde où nous allons passer aux résultats de la recherche et je vais expliquer comment ça fonctionne exactement. Mais maintenant, appliquons une marge de 12 pixels en haut et en bas à gauche de cette entrée, ainsi qu'en haut à droite et en bas à droite au bouton de recherche. Maintenant, pour les résultats de recherche, nous avons quelque chose qui s'appelle le wrapper des résultats de recherche. Et c'est une sorte de spécial, donc nous pouvons l'appeler de cette façon, collection spéciale d'éléments qui affichera tous les éléments de résultats de recherche. Ceci est très similaire à la liste des collections. Comme vous pouvez le voir, nous avons un élément et si nous avons restylé ce seul élément fuira et manuel et paragraphe. Cela sera automatiquement hérité à travers tous les éléments. Et comme c'est quelque chose comme une collection dans l'index de recherche, cela vous donnera quelques données de cette collection, telles que l'URL de la page, le titre de recherche et l'extrait de recherche. Et nous allons ajouter et utiliser tous ces champs dans une seconde. Mais vous pouvez juste le traiter comme. Des collections de puissance, quelque chose comme une collection. Et rappelez-vous que toutes les données sont ici et qu'elles sont assez similaires à la collection la moins que nous utilisons dans le style. Donc assez simple, n'est-ce pas ? Nous avons lié, manuel et paragraphe ici. Le lien est maintenant le titre de cet élément, mais vous pouvez utiliser, par exemple, l'image pour ajouter une image aux résultats de la recherche. Et maintenant, si vous allez à ses paramètres, vous pouvez obtenir l'image de notre index de recherche, collection parent d'index, puis sélectionner l'image de recherche dans la taxe OG pour cette page particulière. Alors pourquoi nous avons ajouté la collection, échantillons d'éléments de collection aux articles de blog, il automatiquement, les images ainsi. Et ces images sont utilisées dans Webflow en tant qu'images OG dans les paramètres de la page. Maintenant, insérez, il recueille automatiquement ces images de OG et il les affiche comme image de recherche. Plutôt intelligent, non ? D' accord. Ce que nous pouvons faire ici, c'est créer une structure appropriée pour tous ces éléments. Ainsi, par exemple, créez un gros bloc de liens. Et à l'intérieur de ce bloc linguistique, nous allons ajouter des conteneurs diff techniques afin que le premier contienne le 40, et le second contienne le bloc de texte avec le titre et peut-être une description. allons créer une classe résultats de recherche étant, et ici nous avons des images de résultats de recherche et aussi des textes de résultats de recherche. D' accord ? Maintenant, nous pouvons déplacer des éléments en ce moment et les positionner dans les bonnes sections. Mais ce lien ne peut pas être vraiment déplacé à l'intérieur des résultats de recherche. Le texte le fait parce que nous avons un lien et nous ne pouvons pas imbriquer lien à l'intérieur de l'autre dans Webflow. Supprimons donc ce lien. On va l'ajouter plus tard pour le manuel. Voyons voir, nous avons cette URL de page qui est essentiellement tirée de la collection. Nous n'avons pas vraiment besoin de cette URL, donc je vais supprimer cela. Et je vais juste utiliser ce paragraphe. Le paragraphe prend les textes de quelque chose qui s'appelle extrait. Ce sont des textes en clair et il est automatiquement généré à partir de la page que nous lions deux, nous avons payé URL, page, description de recherche, titre de recherche, et aussi un extrait. Où peut-on accéder à ces détails ? Comment pouvons-nous les ajuster ? Je vais vous le montrer en détail dans la prochaine leçon. Mais jetons un coup d'oeil aux propriétés de cette page, Disons cette page de poste locale. Ainsi, chaque lot a les propriétés générales et les paramètres SEO. Mais ce qui vous intéresse, ce sont les paramètres de recherche de site, et ce sont les paramètres que nous pouvons utiliser là-bas. Donc, nous avons un tel titre, description des danseurs et l'image de recherche. Comme vous pouvez le voir, ils sont les mêmes que le référencement, balise de titre, la balise de description et l'URL de l'image graphique. Cela signifie qu'il va collecter automatiquement les données de l'onglet précédent, ce SEO Paramètres. Et ici, nous avons des messages de bloc 0 par exemple, à une meta description. Et c'est là qu'il obtient les données pour la recherche, pour l'affichage dans la page des résultats de recherche. Nous aurions donc besoin d'utiliser cette méta-description et créée ici. Ou nous pouvons simplement décocher ces cases et créer nos propres descriptions pour les résultats de recherche. Résultats spécifiquement. Ok, créons la structure d'abord. Revenons donc aux résultats de la recherche et à un titre qui serait en tête. Et j'aimerais afficher le titre. Donc, le nom des résultats de recherche ici, permettez-moi d'obtenir le texte des résultats de recherche et d'afficher le titre de la recherche. Et c'est presque tout pour la structure. Mais je voudrais en faire un lien, faire de ce résultat entier un lien vers notre page de recherche, de notre badge de recherche à la page de post du blog. Donc, je vais définir l'URL GET de l'URL de la page pour ce conteneur entier, ce conteneur de lien de résultat de recherche. De cette façon, quand quelqu'un cliquera dessus, il ira à ce poste. C' est tout pour l'instant. Continuons dans la leçon suivante. 22. Recherche avancée: Ok, bienvenue à la prochaine leçon. Nous commençons juste là où nous nous sommes arrêtés dans la leçon précédente, nous avons ce lien de résultat de recherche. Et maintenant, nous allons définir le curseur sur le pointeur de sorte que l'UX sage, c'est plus intuitif que vous pouvez cliquer sur le résultat de la recherche. En outre, modifiez l'affichage pour fléchir. Je vais laisser tous les réglages tels qu'ils sont, mais nous devons nous occuper des photos. Comme vous pouvez le voir, les tailles des photos sont différentes et c'est bon, mais nous avons juste besoin de nous assurer que leur affichage correctement. Donc, nous allons utiliser l'image de résultat de recherche comme une nouvelle classe pour ces images et changer la largeur maximale à, disons 200 pixels. Et appliquons également un rayon de bordure de huit pixels et une petite marge d'environ 18 ou 20 pixels. Et pour le résultat, les éléments veulent également créer un nouvel élément de résultat de recherche de classe et étaler ces éléments 25 marge de pixel, et ce serait bien de cette façon notre page de recherche est presque prête en termes de style, je pense qu'il nécessite sur le juste légers ajustements. Par exemple, ajoutons une marge en haut et en bas de l'élément de recherche et sur l'élément de corps, Allons à Composants et collons nos composants. Nous devons avoir plus loin, et nous devons aussi avoir la navigation. Donc, le menu de bloc en haut, cette page aussi. Et cela génère un léger problème pour nous parce que ce que nous avons ici fin dans le blog est aussi une autre recherche. Permettez-moi de déplacer légèrement la marge et abordé cette boîte de recherche parce que maintenant nous avons deux boîtes de recherche sur une page. Et ce n'est pas ce que nous attendons, nous ne pouvons pas vraiment supprimer du menu du blog parce que c'est un symbole et je veux le garder un symbole. C' est pourquoi je veux inspecter cela dans l'aperçu, cliquez avec le bouton droit de la souris et inspecter et voir quel type de classe c'est. Ceci est surtension W pour forme de tableau de bord W. Copions donc le nom de cette classe que j'ai trouvée et les outils de développement. Et je vais juste mettre n'afficher aucun à ce cours, d'accord ? Donc, cela va cacher cet élément que ce soit, mais seulement sur cette page de résultats de recherche. Allons donc aux paramètres de la page de résultats de recherche et nous allons ajouter du code personnalisé dans cet élément de code personnalisé. On va le sauver. Et vous pouvez, en passant, ajouter du code personnalisé à l'intérieur de la balise head. Et aussi tu peux le faire pour moi juste avant l'étiquette du corps. Dans ce cas, nous voulons ajouter des styles à la balise head. Donc, ici, nous avons le style, le type, et ici nous avons tapé le texte slash, css et perspicacité. Nous pouvons remplacer certaines propriétés pour notre CSS dans Webflow. Donc, nous devons aborder cette classe même, donc chercher et ensuite formulaire W4, et nous voulons le cacher. Donc, définissons la propriété display sur engourdi et enregistrez-la. Cela ne sera pas visible dans le concepteur car nous devons publier ces modifications afin de voir l'aperçu, à quoi il ressemble. Alors publions. En passant, il y a un moyen de voir ces changements à CSS, changements CSS simples dans le concepteur directement. Et c'est grâce à l'ambit HTML. Donc, vous pouvez alternativement utiliser HTML embed, puis utiliser le même code et qui serait visible dans le concepteur. En ce moment, nous pouvons le voir après avoir publié notre page. Et encore une fois, c'est vraiment cool parce que nous. Je dois chercher dans les boîtes maintenant. Pourtant, nous avons ce composant en tact qui est en haut de la page de résultats de recherche. Par exemple, si nous changeons le nom de la catégorie ou quelque chose comme celui-ci, il sera automatiquement modifié tout au long de nos résultats de recherche, page de résultats et propagé ici également. Ok, Dans les résultats, nous ne voyons pas vraiment d'images, mais cela est dû au fait que notre recherche est juste un exemple de recherche jusqu'à ce que nous publions ceci avec Webflow, CMS, la recherche utilise un mécanisme de recherche élastique qui est un back-end qui doit être hébergé avant de prévisualiser le résultat. Donc, sur votre page publiée statique, vous ne verrez pas vraiment le résultat de la recherche. Vous pouvez uniquement voir les exemples de résultats afin que vous puissiez styliser cet élément. Maintenant, si vous allez dans le wrapper de résultats de recherche et ses paramètres, vous pouvez voir que vous avez les résultats comme le nombre de résultats que nous montrons. Ensuite, la longueur des extraits vous permettra de tronquer le texte de l'extrait. Donc, en fonction de la mise en page que vous avez créée, peut-être que vous voulez afficher 180 signes ou peut-être moins ou plus. Cela se propagera à nouveau sur tous les liens de résultats de recherche. Et vous avez également une option pour mettre en évidence les termes de recherche dans un extrait. Cela signifie que si vous utilisez une phrase et qu'il est à l'intérieur du SNP à la même phrase est dans l'extrait ou dans le titre. Cette valeur sera définie en gras. En fait, ce sera, cela va bouleverser cette phrase. Donc, si vous le souhaitez, disons le mettre en surbrillance en bleu ou peut-être en jaune, vous pouvez simplement changer le style par défaut pour les éléments gras dans Webflow. Et puis vous appliquez ce style pour faire la phrase même que quelqu'un cherche. Et c'est assez utile. D' accord ? Que voulons-nous faire d'autre ? Que pouvons-nous faire d'autre dans ce résultat de recherche, caoutchouc ? Eh bien, il existe certains paramètres avancés que vous pouvez utiliser pour inclure ou exclure des éléments de l'indexation dans la recherche. Évidemment, parfois vous ne voulez pas vraiment indexer tous les éléments de votre page. Et vous voulez exclure des pages entières ou juste une section des pages d'être indexées et affichées à la suite d'une requête de recherche. Par exemple, si vous allez sur notre blog ou bloquez tous les messages et vous décidez que vous ne voulez pas que cette page bloque tous les messages soit affichée dans les résultats de recherche. Ce que vous faites est d'insérer des paramètres signés. Il vous suffit de cocher cette case pour exclure ce patch des résultats du site de recherche. De cette façon. Lorsque je tape tout ce qui est contenu dans ce livre appelé page de publication, il n'apparaîtra pas dans les résultats. Une autre façon de traiter ces éléments, par exemple, pour les pages utilitaires, vous voulez également vous assurer que ceux-ci ne sont pas inclus dans la recherche. Donc, excluons cette page de ces résultats de recherche de site. En passant, je pense que Webflow le fait par défaut, mais ce que vous voulez inclure principalement est blog, page de poste. Donc, blogposts modèle. Donc celui-ci, vous devez vous assurer que vous avez ceci inclus dans les résultats de recherche parce que principalement nous voulons permettre à nos utilisateurs de rechercher des billets de blog spécifiques. Et ici vous avez ces descriptions qui sont fondamentalement les mêmes que SEO, title dark et description dark. Mais vous pouvez les rendre différents. Et ce qui est intéressant ici, c'est quand vous le dissociez de la balise de titre SEO, vous pouvez utiliser des champs, vous pouvez utiliser des champs personnalisés. Et si vous cliquez sur le champ, ce titre de recherche peut être enrichi avec les données que vous avez dans la description dans le CMS. Alors. De ce blog messages modèles vous avez connecté toutes les choses différentes telles que accepter et le nom du blog nom de l'article. Et vous pouvez créer une structure, par exemple, espace de nom, espace tiret, puis, par exemple, nom de catégorie. Et cela s'affichera alors comme titre des résultats de la recherche. Donc c'est plutôt cool. Et souvent, vous voulez modifier ces paramètres et juste définir le nom correct afin que cela soit plus intuitif pour vos utilisateurs. Laisse-moi aller de l'avant et le sauver. Et j'ai aussi mentionné qu'en dehors de l'exclusion de pages entières de vos résultats de recherche, ce que vous aimeriez faire parfois est d'exclure certaines parties de la page ou des sections de la page. Ainsi, par exemple, si vous prenez le menu nav que nous avons en haut de chaque page, ce sera inutile d'indexer les résultats du menu nav. Parce que si quelqu'un cherchait, disons pour le logiciel ou le marketing ou mobile, alors cet en-tête est sur chaque page. Ainsi, chaque page sera retournée comme résultat de recherche. Donc, nous ne le voulons pas vraiment, mais Webflow est en fait assez intelligent pour désactiver l'indexation de ce genre de composants. Donc, tous les composants que nous allons entrer dans Paramètres ce blog exclure, gérer le contenu de cette recherche argent. Grâce à cela, vous êtes sûr car ces composants multipliés sur chaque page n'affecteront pas vraiment les résultats de recherche. Et en utilisant les résultats de recherche et les paramètres, vous pouvez réellement exclure de l'indexation de tout ce que vous aimez sur votre page. Donc l'ensemble de la liste de la collection wrapper ou section d'en-tête. Si vous ne voulez pas que cet en-tête soit inclus dans les mécanismes de recherche, il suffit d'aller dans Paramètres et d'exclure cela. Donc, sur notre page d'accueil, par exemple, nous pourrions décider que nous ne voulons pas vraiment ces sections d'en-têtes soient incluses dans la poussée. Et c'est un composant, donc il est automatiquement exclu. Mais pour tous les autres titres, nous avons juste à ou les sections Heather, il suffit d'exclure ceux des résultats de recherche de site. Si nous pensons à notre bloc et ce que nous voulons de ce bloc pour être indexé dans le site local, résultats de recherche de site. Je pense que nous devrions seulement indexer les pages de blog de sorte que lorsque l'utilisateur recherche quelque chose, il n'obtiendra que les articles de notre bloc. Cela signifie que nous voulons généralement exclure tout le reste de notre modèle de billets de blog dans CMS. Alors sauvegardons ces modifications sur la page d'accueil. Et évidemment, nous voulons exclure le guide de style. Nous voulons exclure toute la page de blog et les articles de blog. Allons cette page en sécurité. Et de cette façon, nous avons seulement ce modèle de billet de blog qui est inclus dans la recherche et retournera tous les articles que l'utilisateur recherche. Et en passant, si vous excluez toute la page, vous pouvez voir que les paramètres d'index de recherche sont grisés pour les éléments individuels. C' est parce que toute la page a été exclue. Vous ne pouvez donc pas vraiment exclure ou inclure des éléments qui se trouvent sur cette page. Donc oui, cela a du sens. Ok, Il y a un autre conseil que j'ai pour vous en termes de résultats de recherche et d'affichage de données personnalisées dans les résultats de recherche. Par exemple, si vous souhaitez ajouter ici un manuel qui affichera le nom de la catégorie quatre articles de blog qui s'affiche. Comment le faire ? Eh bien, ce n'est pas si simple parce que ce que nous pouvons faire ici, c'est sélectionner, obtenir des textes de notre index de recherche. Et si vous sélectionnez cela, vous aurez tous les champs disponibles dans cette pseudo-collection d'index de recherche. Cependant, dans la pseudo collection, nous n'avons pas vraiment le nom de la catégorie. D'accord ? Donc, ce que nous pouvons faire à la place est d'utiliser n'importe quel élément que nous ne faisons pas, nous n'avons pas utilisé précédemment. Par exemple, nous n'utilisons pas cette description ici. Ainsi, nous pouvons utiliser la description de la recherche et le laisser tel qu'il est en ce moment, mais allez dans les paramètres de recherche pour le modèle de billets de blog. Et à l'intérieur de tels paramètres, nous pouvons simplement définir la description de la recherche pour afficher le nom de notre catégorie. Décochons donc la même chose que le référencement, puis ajoutons le champ. Et parce que ce modèle de billet de blog est lié à la catégorie et que le CMS sera en mesure d'afficher dans la description, le nom de la catégorie. Donc, tout ce que nous avons à faire maintenant est juste de publier ce site Web et d'en prévisualiser. Mais à l'avance, nous avons juste besoin d'appliquer un style. Alors peut-être allons-y sur le blog. Et ici, nous avons ces éléments que nous pouvons copier. Et il y a un style fiscal. Peut-être que nous nous souvenons juste des noms des classes et appliquons les classes à ce manuel. Donc, nous allons d'abord utiliser la légende, puis la commande Retour une fois de plus, et ce serait bloqué sombre. En outre, modifions le positionnement de cet élément en absolu. Et c'est la deuxième position, le premier élément relatif qui se trouve être des résultats de recherche. Quel wrapper, je suppose que c'est bien. Maintenant, dans la position, nous avons juste besoin de sélectionner un décalage. Mais d'abord, avons une classe supplémentaire pour que nous ne gâchons pas la précédente et que nous puissions les remettre à nouveau ou nous pouvons définir le décalage de position. Réglons la marge sur, disons six pixels. Et maintenant, nous l'avons. Nous avons donc des résultats de recherche assez sophistiqués. Et vous savez tout sur la recherche dans le Web cependant. Donc, merci beaucoup pour votre attention et à vous voir dans la prochaine leçon. 23. Domaine personnalisé: Bonjour, Bienvenue à la leçon suivante et celle-ci, explorons comment vous pouvez ajouter un domaine personnalisé au site Web que vous créez dans Webflow, c'est assez simple, mais cela nécessite un plan d'hébergement de Webflow. Donc, ce que je veux dire par ceci, vous devriez acheter un plan d'hébergement dans les paramètres de Webflow afin de publier sous votre domaine personnalisé, ce que vous pouvez faire est de cliquer ici, cliquez sur le petit lien et x vers l'élément de publication, puis vous sont prises dans les paramètres et l'onglet hébergement. Ici vous avez différentes plantes pour le site Web et le site avec CMS et e-commerce. Nous n'utilisons pas le commerce électronique, donc nous ne nous concentrons pas sur ce que les plantes lorsque vous activez le commerce électronique dans votre site Web Webflow, alors ce plan serait par défaut pour nous, l'obligation CMS est par défaut et nous devons essentiellement l'utiliser parce que nous ne peut pas vraiment utiliser le plan de base. n'y a pas de support CMS. Et une fois que nous avons CMS, nous avons juste besoin d'utiliser la bombe CMS. C' est un peu plus cher. Ici, nous avons accès à l'API CMS, et nous avons la recherche du site. Nous avons trois éditeurs de contenu, et nous n'avons pas d'options. Par exemple, aucun téléchargement de fichier de formulaire, mais nous n'en avons pas vraiment besoin pour notre site Web. Donc, c'est ainsi que cela se passe bien, activation de CMS dans Webflow vous oblige à utiliser un hébergement Web d'une manière qu'il est assez difficile d'exporter les éléments, bien que vous puissiez le faire avec CSV et alors vous devrez créer votre propre Surge, des choses comme ça. Pour le plan d'affaires. Comme vous pouvez le voir, vous avez plus de visites mensuelles et plus statique. Connaître la même quantité de pages statiques, mais plus de soumissions de formulaire et limité en fait, et aussi jusqu'à 110 mille articles CMS. Rappelez-vous que vous pouvez payer annuellement ou mensuellement, annuellement, vous économiserez simplement deux mois de travail sur l'hébergement. Et le nombre maximal d'articles CMS dans n'importe quelle usine dans Webflow est de 10 mille. Donc tu dois garder ça à l'esprit. Ok, maintenant je viens d'ajouter l'hébergement. J' avais déjà ma carte de crédit connectée à mon compte de flux de travail, donc il suffit de deux clics pour acheter un nouvel hébergement. Maintenant, ici vous pouvez configurer votre numéro de téléphone portable. Et c'est assez important parce que Webflow vous enverra un message texte lorsque, par exemple, votre plan ne se renouvelle pas, ce qui signifie que votre carte est expirée ou peut-être que vous n'avez pas de polices sur votre carte ou, vous savez, tout erreur bancaire. Donc, il vaut la peine de juste mettre le numéro de téléphone ici parce que vous obtiendrez le message texte. Évidemment, vous recevrez aussi des e-mails. Donc vous pouvez simplement dire non merci ou simplement fermer cette fenêtre. Et ce que vous avez ici est la possibilité de définir votre domaine personnalisé. Et c'est assez simple. Ce que vous devez faire, c'est modifier les paramètres DNS de votre fournisseur. Mais Webflow vous guidera à travers cela. Et je vais vous montrer comment je le fais pour mon fournisseur. Ce que je vais faire, c'est ajouter un domaine existant. Je n'achète pas un nouveau domaine que workflow offre via Google. Je suis juste en train d'ajouter un domaine existant. Dans mon cas, c'est un sous-domaine, donc Webflow ne me demandera que de changer un enregistrement DNS, qui est l'enregistrement CNAME. Dans le cas où vous utilisez un nouveau domaine d'itinéraire, il vous demandera également de le faire. Créez un autre enregistrement et un enregistrement au sein de votre fournisseur. Et ce serait l'enregistrement qui pointe vers le serveur Webflow avec l'IP. Et dans ce cas, vous copiez simplement le nom de cet enregistrement et le volume. Et via votre fournisseur d'hébergement, vous allez dans les Paramètres de domaine, vous sélectionnez le type de l'enregistrement. Dans mon cas, c'est CNAME, et puis j'ai mis le nom canonique ici. Certains fournisseurs sont tenus de mettre le point après le nom canonique. Pour ce proxy SSL se sentira calme. Certains le font tout seul, donc il suffit de l'essayer. Et puis vous avez l'hôte et l'hôte. Vous pouvez copier le nom d'hôte à partir d'ici et il suffit de cliquer dessus et de le coller ici. Et là, vous l'avez. Tu l'acceptes juste. Et après une seconde, il vous permettra de vérifier l'état de cette redirection. Rappelez-vous que cela peut prendre jusqu'à 24 heures parfois, mais généralement il suffit de quelques minutes. Cependant, n'oubliez pas de ne pas le vérifier toutes les deux minutes car il peut être mis en cache du côté de votre fournisseur. Une fois que vous l'avez vérifié, vous avez généralement le signe connecté et c'est bon. Si vous avez des problèmes, attendez. Ou vous pouvez également aller sur le site Web de l'OMS du vérificateur DNS. Ensuite, vous pouvez vérifier comment votre DNS distribue sur différents serveurs de noms à travers le monde et peut-être que cela vous donnera une sorte d'indice. Mais ce processus est assez transparent. Vous pouvez facilement ajouter des domaines. Et cela signifie que le domaine que j'ai ajouté dans mon sous-domaine de cas, est maintenant disponible pour moi de faire une valeur par défaut. Et je veux faire une valeur par défaut. Vous devez donc cliquer sur ce petit bouton Make Default pour que ce domaine soit la racine. Et cela fera automatiquement en sorte que Webflow n'autorise pas l'indexation du site de sous-domaine Webflow. Au lieu de cela, cela sera indexé dans Google. En outre, vous pouvez utiliser un 01 redirections gratuites. Donc, ce sont les redirections que vous pourriez vouloir utiliser de votre ancien site Web vers le nouveau site Web si vous voulez vous débarrasser de l'ancien chemin que ce soit. Mais vous savez que cette vieille bouffée est toujours quelque part, pourrait être encore quelque part sur Internet. Par exemple, quelqu'un publie le lien vers cet ancien site Web et vous ne voulez pas que les gens se perdent. Vous pouvez simplement rediriger l'ancienne URL et créer un nouveau chemin. Et tout en bas, vous avez des options de publication avancées et celles-ci vous permettent de vérifier certains paramètres. Par exemple, activez SSL. C' est assez crucial. Webflow vous offre un SSL gratuit pour chacune de vos pages. C' est vraiment important pour que vous ayez ceci vérifié. Et dans certains cas spécifiques, vous pouvez consulter votre fournisseur DNS, avec votre domaine, enregistrer avec les paramètres corrects pour le SSL. Et voici le lien afin de vérifier cela, mais généralement cela fonctionne juste hors de la boîte. Ensuite, vous avez la possibilité de modifier HTML et CSS et JS. Et ce sont des options que vous pourriez ou non utiliser. Vous pouvez également trouver ces options dans le menu de publication du concepteur. Et si vous allez maintenant au concepteur dans le menu Publier, vous verrez que vous avez ce deuxième domaine en ce moment que vous pouvez publier sous. Donc ceci, dans mon cas, le sous-domaine. Si vous le sélectionnez, vous pouvez simplement publier pour désélectionner et domainer. N' oubliez pas que vous avez toujours la possibilité de publier dans votre sous-domaine Webflow. Et c'est assez cool parce que vous pouvez publier le projet de travail de votre site ici. Et puis une fois que vous êtes prêt ou obtenir l'approbation de votre client, alors vous pouvez publier sur votre site officiel, au domaine officiel. Et dans les options avancées, vous trouverez toutes les options que j'ai mentionnées. Ainsi, par exemple, vous pouvez également minifier CSS sorte que le site Web soit un peu plus petit et plus rapide. Et en passant, si vous utilisez des serveurs Webflow, vous aurez automatiquement les CDN activés. C' est une excellente infrastructure pour vos utilisateurs du monde entier qui tentent d'accéder à votre site Web. Ils vont simplement obtenir le site Web du serveur le plus proche de leur emplacement. Donc les CDN sont vraiment, vraiment génial et aussi il peut gérer beaucoup de trafic. Ainsi, par exemple, si vous avez, si vous vendez des billets ou quelque chose comme ça, et beaucoup de gens visitent simultanément votre site Web. Vous serez automatiquement haut de gamme. Vous n'avez pas à payer et cela gérera le trafic. Cette option d'en-têtes de cadre sécurisé est destinée à incorporer votre site Web en tant qu'iframe. Et par défaut, il est activé pour les magasins. Je ne pense pas que ce soit vraiment important pour l'instant, alors laissez-le non coché. Et maintenant, lorsque vous publiez, vous publiez simultanément sur les deux domaines. En outre, j'obtiens le message que l'index de recherche doit être mis à jour. C' est quand vous publiez pour la première fois, en particulier, et vous devez attendre jusqu'à cinq minutes pour que les résultats de la recherche fonctionnent correctement. Rappelez-vous qu'à tout moment, comme je vous l'ai montré dans l'une des leçons précédentes, vous pouvez aller dans Paramètres ici et aller à la recherche. Et vous pouvez indexer manuellement. Si vous cliquez sur l'index maintenant, vous pouvez faire une indexation par jour et par jour. Et aussi si vous le souhaitez, Webflow planifiera et indexera automatiquement votre recherche tous les trois jours. Donc c'est comme ça que ça marche et je suppose que non. Maintenant que notre site Web est publié sur les deux domaines, nous sommes à peu près sûr d'aller et de distribuer notre site Web à tous nos utilisateurs et éditeurs afin de pouvoir apporter des modifications. C' est donc tout pour le domaine personnalisé et les options. Merci d'avoir écouté et de vous voir dans la prochaine leçon. 24. États vides: Salut là, Bienvenue à la prochaine leçon. Une fois que nous avons les résultats de recherche réels, vous pouvez voir qu'il manque une image. Nous avons cette image de l'image de recherche, et lorsque nous la décochons, vous pouvez voir le modèle de l'image, mais nous n'avons pas vraiment ces images chargées dans notre index de recherche. Donc, ce que nous devons faire, c'est de vérifier d'où viennent ces images. Et pour cette raison particulière, nous devons ouvrir le paramètre de modèle de billets de blog. C' est donc la page qui devrait nous alimenter avec les données d'image. Et à l'intérieur des paramètres de recherche, nous avons une telle image sélectionner Image pour un tel résultat, nous avons la même que Open Graph image URL. Mais si nous passons aux paramètres Open Graph, nous n'avons pas vraiment d'image liée ici. Donc, ce que nous devons faire est que nous devons lier l'image de cette collection, soit ici ou décocher ceci. Et nous devons lier l'image que nous avons dans la collection pour être lié comme une image OG ou image de réglage de recherche de site. Et alors seulement, nous aurons les images appropriées affichées dans nos résultats de recherche. Maintenant, ce n'est pas suffisant. Nous devons le sauver, et nous devons aussi reconstruire notre index de recherche. Maintenant, il devrait apparaître, mais nous ne pouvons pas le voir. Nous devons aller à un paramètres globaux, puis dans la recherche ira à l'index en ce moment. Et cela fera ça, nous allons forcés, forcés dans un indice bien nourri pour reconstruire. Les index planifiés sont tous les jours gratuits, donc bien pour tous les trois jours passera par vos messages et tout indexer. Cependant, si vous voulez le faire manuellement, vous pouvez simplement le forcer dans Webflow comme ceci. Et maintenant, nous avons ces images commencent à apparaître ici. Aussi, la deuxième chose que je voudrais montrer, comme dans ce wrapper de résultats de recherche, nous pouvons aller dans le second état. Donc, nous avons cet état par défaut là, mais aussi le deuxième état n'est pas de résultats. Donc, si cela ne renvoie aucun résultat, nous obtiendrons cette date qui n'est pas si attrayante. Nous pouvons travailler sur le style petit peu et pour les résultats de recherche, Il est particulièrement utile parce que l'utilisateur souvent, nous allons obtenir les résultats, je suppose donc que nous avons juste à prendre soin de cela. Je vais importer les trois images que j'ai. Et maintenant, nous pouvons utiliser cette première image pour afficher dans l'état vide de notre page de résultats de recherche. Réglons l'affichage de ces éléments pour fléchir la direction verticale, et positionnons-le au centre, verticalement et horizontalement. En outre, appliquons un peu de rembourrage ou de marge pour que nous l'ayons centré sur, avec quelques beaux espaces autour de cet élément. Et ici, nous n'avons pas beaucoup de résultat dans les résultats de recherche, cependant, n' est pas le seul endroit où les résultats de recherche lorsque nous pouvons obtenir des éléments vides, des états vides. Les autres éléments seraient pour les éléments de collection CMS de collection qui sont vides pour une raison quelconque. Par exemple, si nous voulons afficher quelque chose de la catégorie mobile, mais il n'y a pas de messages dans la catégorie mobile. Donc, fondamentalement, pour tous les moins de la collection que vous pouvez maintenant sélectionner, si vous allez aux paramètres, vous pouvez aller à l'état vide de l'interface utilisateur. Et pour l'instant, ça a l'air un peu dépouillé. Donc, ce que nous voulons faire est d'aborder cet état vide. En passant, vous pouvez voir dans navigated que nous pouvons accéder à tous les éléments de cet état vide et nous pouvons les remodeler. Donc, définissons l'affichage sur flex et nous allons l'aligner plus tard. Maintenant, modifions les marges avec l'option. Je vais ajuster la marge à la fois pour le haut et le bas. Et nous allons aussi nous débarrasser de la couleur de fond. Ici, nous avons ce manuel. Nous pouvons ajouter une image ici et choisir l'une des images que j'ai téléchargées, peut-être celle-ci. Et revenons aux paramètres ou faisons les paramètres d'alignement de cet état vide. Deux, j'ai besoin que cela soit réglé à la verticale et aligner et justifier le centre et le milieu. Ensuite, nous avons ces états vides à classe que nous pourrions vouloir changer en un chariots d'état vide. Et il serait intelligent de simplement utiliser ceci comme un état vide pour littéralement tout ce que nous voulons ajouter un état vide, non seulement cette collection, mais il y a un problème avec cette image devrait simplement copier et collez cette image encore et encore. Donc, ce que nous pouvons faire comme pour les cartes d'état vides, si nous nous débarrassons de l'image en ce moment, nous pouvons appliquer cela comme fond CSS, et alors nous ne pouvons utiliser cette classe de carte d'état vide afin de Ce paramètres, cette image. Alors laissez-moi changer l'arrière-plan pour cette image que nous avons pour l'état vide ne peut pas verre. Et mettons-le pour couvrir la position au centre. Et puis pas de carrelage, je pense qu'il devrait être prêt maintenant. Ok, maintenant nous allons juste appliquer la marge légèrement. Et nous allons aussi changer le rembourrage parce que cela nous permettra de déplacer le manuel sans éléments trouvés vers le haut. Et je suppose que c'est tout. Maintenant, nous pouvons copier le nom de cette classe et l'utiliser littéralement où nous le voulons. Donc, dans cet état vide, nous appliquons juste la classe de carte d'état vide et là vous l'avez. Ok, Donc de cette façon, nous avons fait cet état vide personnalisé mais réutilisable pour les éléments qui ne sont pas trouvés dans le CMS, par exemple. Et je pense que c'est tout. J' espère donc que cela vous rendra la vie un peu plus facile d'avoir des éléments réutilisables comme celui-ci. Et c'est aussi à, sur les états vides et la recherche. Merci beaucoup. se voit dans la leçon suivante. 25. Édition de site Web: Dans Webflow, il existe un bon moyen pour vos collaborateurs de modifier votre page. Et ça peut être votre client, ça peut être votre collègue. Vous pouvez littéralement modifier n'importe quoi sur la page, y compris les collections et leurs éléments. Vous avez ce petit bouton Modifier le site lorsque vous entrez cette page en tant qu'utilisateur connecté. Donc, vous devez avoir le compte Webflow, puis vous devez avoir les autorisations pour modifier cette page afin de voir ce petit bouton. Donc maintenant je suis enfermé dans Designer, et c'est pourquoi je peux, à partir de leur accès directement à l'éditeur. Donc, je peux modifier cela dans le navigateur ou je peux aller Paramètres du projet et je peux ajuster les paramètres pour les éditeurs supplémentaires. Si vous allez dans l'onglet éditeur, vous verrez que nous avons des collaborateurs ici et aussi quelques options de marque qui s' afficheront pour vos éditeurs et vous pouvez modifier un téléchargement de votre logo ici. Mais ce qui est le plus important, c'est que nous avons des collaborateurs et pour l'instant ce n'est que moi, mais je peux ajouter jusqu'à trois collaborateurs par page, de chaque côté. Et je peux simplement entrer leurs adresses e-mail. S' ils n'ont pas déjà le compte complet, ils doivent créer le compte. Mais une fois qu'ils le font et ils ont l'invitation à ce, Modifier , cette page, ils seront en mesure d'aller au navigateur et directement dans le navigateur. Après l'URL de votre site Web, mettez un point d'interrogation, puis modifiez puis passez automatiquement en mode éditeur. Vous pouvez voir en bas que nous avons ce logo Webflow et tous les éléments sur notre page se comportent un peu différemment. Parce que maintenant nous pouvons accéder aux éléments statiques et dynamiques de la page et les changer à la volée. Cela signifie que vous pouvez littéralement changer n'importe quoi en cliquant sur ce bouton d'édition. Et si vous voulez changer le nom des publications dans la collection, vous pouvez le faire comme ça. Si vous voulez changer les éléments statiques, vous pouvez le faire de la même manière, de la même manière. Mais si vous ajoutez quelque chose aux éléments de collection CMS existants, ce qui est vraiment cool, c'est que vous pouvez littéralement le changer dans la collection CMS. Ainsi, par exemple, si vous remplacez l'image juste à partir de là, elle sera changée dans tout le TMS. Et cela fonctionne pour tout le contenu statique et dynamique. Ainsi, vous pouvez passer le curseur sur les éléments et vous pouvez ensuite les modifier et les remplacer. Par exemple, en ce moment, si je vais à la page de publication unique, ce que je peux faire est de cliquer sur le bouton Modifier à côté du manuel riche que j'ai. Et parce que c'est un manuel riche, cela me permettra, par exemple, sélectionner les éléments et de changer les titres. Vous pouvez rendre le texte en gras ou vous pouvez même insérer de nouveaux éléments. Si vous appuyez sur Entrée, vous pouvez ajouter du texte. Vous ne pouvez pas ambits ou guillemets ou quoi que ce soit dedans parce qu'il s'agit d'un élément de texte de portée. Maintenant, si vous apportez des modifications, vous avez l'information en bas qu'il y a des modifications non publiées gratuites. Vous avez les modifications de l'éditeur que je dois maintenant publier pour qu'ils soient en ligne sur le site Web. Donc, avant de publier, je suis juste en mode édition et je suis juste en train de créer un brouillon. Je peux revenir sur le site en direct et mes modifications ne sont plus visibles. Et c'est parce que je ne les ai pas encore publiées. Mais quand je reviendrai à l'édition, vous verrez que j'ai toujours ces modifications, QT pour la publication et je peux les publier. Quand je veux. Donc maintenant, si je clique et publie des modifications gratuites, cela affectera non seulement la partie statique du site Web, mais j'ai également édité des logiciels de catégorie et cela s'appliquera à mon CMS. En outre, il existe un moyen beaucoup plus intuitif de travailler avec CMS que de simplement cliquer sur les éléments et de faire défiler tous les messages et de le publier et ondulé, de le republier. Vous pouvez modifier les pages à partir de ce menu du bas. Ici, vous pouvez aller à Paramètres du projet et tableau de bord et concepteur, mais vous pouvez également cliquer sur les pages. Et ici, vous pouvez voir toutes les pages qui sont disponibles et accessibles à partir d'ici aussi. Vous pouvez modifier les paramètres des pages à partir de là. Par exemple, si vous êtes ou voulez modifier balises OG ou les paramètres d'index de recherche ou quelque chose comme ça. Il peut le faire dans ces paramètres en C que tous les paramètres SEO et les autres qui sont assez importants sont accessibles ici. Donc, vous n'avez pas vraiment à donner à quiconque les autorisations d'utiliser Designer et de désordre avec le site Web. Il peut aller directement ici et juste utiliser la meta description et la balise title et changer tout en conséquence. Malheureusement, vous ne pouvez pas vraiment définir les différentes autorisations pour les éditeurs, mais ce qu'ils peuvent faire est au lieu d'enregistrer ce qui ne sera pas visible avant de publier, vous avez cette modification inédite afin que quelqu'un puisse l'enregistrer et puis vous pouvez le superviser. Vous pouvez également l'enregistrer en tant que brouillon. C' est donc la première, première version de celui-ci, sorte qu'il ne va même pas à ces modifications inédites. Donc, certains, quelqu'un peut travailler dessus et l'enregistrer comme un brouillon quand il est prêt à le définir comme non publié. Il va le sauver. Et puis vous pouvez simplement vérifier si tout va bien et cliquez sur publier pour publier cela sur le site Web de la vie. Il en va de même pour les collections. Vous pouvez prévisualiser toutes les collections ici et vous avez un statut différent pour tous les éléments de collection. Par exemple, ici, j'ai quelques changements d'étape. Cela signifie que lorsque je clique sur publier cette modification, Go Live. Mais il y a d'autres états dit que je peux créer. Je peux évidemment ajouter tous les articles à partir de là et c'est beaucoup plus intuitif que de les éditer dans le navigateur. Je peux ajouter un nouvel élément de collection. Donc, dans ce cas, je peux cliquer sur ajouter de nouveaux billets de blog. Et nous avons tous les champs définis dans le, dans le CMS ici, vous pouvez voir que tous sont obligatoires. Vous pouvez décider et concevoir dans CMS, vous avez le contenu de texte riche ici, sorte que vous pouvez ajouter des images ou des incorporations ou des vidéos. Vous devez choisir le tag de catégorie et l'offre pour les billets de blog. Et si vous en créez un, vous n'avez pas vraiment à le mettre en scène pour les modifications en appuyant sur le bouton Créer. Eh bien, vous pouvez faire à la place est que vous pouvez planifier ce post ou vous pouvez l'enregistrer comme un brouillon. Si vous l'enregistrez en tant que brouillon, lorsque vous cliquez sur Publier, celui-ci ne sera pas publié car il s'agit d'un brouillon. Vous pouvez revenir au brouillon et vous pouvez l'enregistrer plusieurs fois et il n'est pas scène pour être publié avec vous pouvez faire à la place est que vous pouvez mettre en scène ces quatre publication, ou vous pouvez publier tout de suite. Et puis il va passer en direct sans même penser sur le bouton Publier. Ou vous pouvez mettre en scène pour Publier. Et si vous le mettez en scène, alors quelqu'un devra cliquer sur le bouton Publier pour que ce post apparaisse sur votre site Web. L' autre option que vous avez comme planification. Et vous pouvez choisir l'heure et la date spécifiques à laquelle vos messages seront publiés, et lorsque cette date arrive, elle sera automatiquement publiée sur le site en direct. Maintenant, je vais l'annuler. Et comme vous pouvez le voir, vous pouvez modifier toutes les collections de votre page. En outre, vous avez également des données de soumission de formulaire. Donc, si vous avez un formulaire comme nous avons notre formulaire de newsletter, si quelqu'un se sent dans la forme que les données vont aller ici. À partir de là, vous pouvez l'exporter au format CSV ou simplement prévisualiser les données. Évidemment, ce n'est pas la meilleure façon de gérer, par exemple, vos soumissions de formulaires. Mais l'une des autres leçons que je vais vous montrer comment connecter cela à Zapier ou Matt intégral pour les informations personnelles du compte là vous avez aussi de l'aide et soutien et vous pouvez regarder dehors sans publier les changements ou vous pouvez aller à concepteur, mais cela n'est disponible que pour ceux qui sont les auteurs de la partie. Vous devez donc avoir ce projet dans votre tableau de bord Webflow pour pouvoir accéder au concepteur. Et à partir du concepteur, vous pouvez également publier à partir d'ici. Lorsque vous publiez à partir du concepteur, les modifications mises en scène par les éditeurs seront également publiées. Je vous ai dit qu'il n'y avait aucun moyen de restreindre l'accès des concepteurs à des pièces et éléments spécifiques. Mais du concepteur, ce que vous pouvez faire comme vous pouvez aller aux paramètres de n'importe quel élément et vous avez ceci. Les collaborateurs peuvent modifier cet élément. Si vous décochez cette petite case, cela rendra, par exemple, cet en-tête un indisponible pour un changement dans l'éditeur. Ainsi, les éditeurs ne seront pas en mesure d'apporter des modifications à cet en-tête, vous pouvez également exclure de modifier des parties plus importantes de votre site Web, des sections entières, ou peut-être tout le corps si vous voulez empêcher les gens de modifier quoi que ce soit sur ce page particulière. C' est ainsi que vous pouvez restreindre l'accès. Et en dehors de cela, rappelez-vous que vous avez ce statut différent. Par exemple, la mise en page ou les brouillons que vous pouvez utiliser au sein de votre équipe pour gérer le contenu de votre page. Ok, je pense que c'est tout pour le rédacteur en chef. Merci d'avoir regardé cette leçon et je te verrai dans la prochaine. 26. Conseils de référencement partie 1: Salut là, Bienvenue à la prochaine leçon. Parlons un peu de SEO. Alors, comment améliorer votre site Web en termes d' accessibilité et aussi pour les robots de recherche afin qu'il soit bien indexé, dans le moteur de recherche Google. Donc, la première chose est la structure de votre page. C' est assez évident, mais vous devriez utiliser des sections le cas échéant. Et aussi lorsque vous sélectionnez, par exemple, la section dans les paramètres, vous pouvez sélectionner des balises HTML appropriées telles que l'article ou quelque chose comme celui-ci. Si vous utilisez un texte significatif, vous devez utiliser des en-têtes ou des paragraphes, car cela permettra Google de savoir que ce texte est plus important que les autres textes. Par exemple, le titre 1 est plus important que H2, et surtout vous ne devriez pas utiliser les blocs div à d'autres fins que le style. grands chiens sont donc des éléments techniques. Et si vous voulez créer quelque chose qui est censé avoir la signification pour le navigateur, vous feriez mieux de finir avec des articles ou un bail, ou des en-têtes ou des paragraphes, ou vous pouvez finir avec, disons section. Mais alors dans les paramètres, vous pouvez changer cela à, disons de côté ou article. Maintenant, ce que vous pouvez faire pour améliorer, faire en sorte que Google mieux comprendre votre site Web aussi, est de ne pas imbriquer trop d'éléments dans le volet du navigateur. Assurez-vous donc que votre structure est propre et que vous n'avez pas beaucoup d'éléments imbriqués. Une autre grande profondeur pour l'accessibilité et pour optimisation des moteurs de recherche est également aller aux paramètres d'image. Et là, vous avez l'ancienne taxe. Donc, fondamentalement, toutes les images devraient avoir soit l'ancienne pile, toutes dans la dernière version de Webflow, il y a une option pour déclarer que c'est juste une image décorative et n'a pas vraiment besoin d'une vieille attaque. Une autre astuce que je peux vous donner est de définir l'ancien texte après avoir créé un site Web dans le panneau d'actifs, vous pouvez cliquer avec le bouton droit sur l'élément sur l'image dans le panneau Actifs. Ensuite, vous pouvez ajouter la balise alt à toutes les images et presque à la fois. C' est donc un moyen assez pratique de créer une ancienne taxe. Mais de toute façon, vous devriez prendre soin de l'ancienne taxe et surtout pour les images qui sont descriptives sur votre page. Et d'ailleurs, dans les dernières versions d'un Webflow, lorsque vous publiez votre page, vous avez également l'état d' accessibilité de votre site Web ainsi que certaines choses à améliorer sur la page. Et si vous n'avez pas de vieilles piles, cela vous incitera à le faire, vous devriez prendre soin de cela. Ainsi, lorsque vous publiez, vous pouvez simplement vérifier quelles images sont manquantes. L' ancienne taxe. Une autre chose est de supprimer les images de Webflow. Ce que vous pouvez faire, c'est vous pouvez aller à Assets et vous pouvez supprimer juste littéralement chaque image, puis republier leur site Web. Et puis toutes les images qui sont utilisées sur votre toile dans le concepteur seront de nouveau disponibles dans les ressources car il y a parfois beaucoup d'images différentes dans les actifs que vous n'utilisez pas littéralement sur votre site Web. Ce n'est pas nuisible à votre position sur, dans Google, mais puis douloureux de créer toute l'ancienne taxe. Et de cette façon, vous pouvez simplement les supprimer facilement, republier le côté et ils apparaîtront à nouveau, mais seulement les images qui sont publiées sur votre site Web. Ok, ensuite, nous avons les paramètres pour les pages individuelles ainsi que les paramètres globaux pour votre site Web. Si vous allez sur les pages et vous consultez les paramètres pour les pages statiques individuelles que nous avons ici, ainsi que l'utilité et le commerce. Chaque page comme celle-ci a quelques paramètres. En général, une partie des paramètres que vous avez le nom du patient et ce n'est que pour le Web à des fins, il n'apparaît nulle part dans vos résultats de recherche. Mais ici, vous avez des paramètres SEO très importants. Elles sont séparées pour chaque page que vous créez. Et même vous avez cet aperçu des résultats de recherche qui vous donnera un aperçu de ce que cela va ressembler et dans les résultats de recherche Google. Maintenant, qu'est-ce que vous avez en haut comme étiquette de titre ? C' est probablement l'une des choses les plus importantes en termes de référencement. Et vous devriez certainement avoir intitulé taxe pour toutes vos pages. Dans le titre, vous devriez avoir une description claire et courte de votre page spécifique. Et Webflow recommande qu'il soit d'environ 55 caractères ou moins. Et c'est simplement parce qu'il sera affiché sur une ligne. Et si c'est plus, il sera tronqué. Et ce que je vais faire, c'est copier et coller ce symbole de point ascii et le mettre dans le titre. Et dans les résultats de recherche, vous pouvez voir que c'est un peu plus attrayant, peut être différent que d'autres résultats. Donc, je suppose que c'est une belle astuce pour rendre ce résultat plus attrayant ainsi que l'utilisation de cas de chameau. Et si vous pouvez utiliser certains des mots-clés bien évidemment connectés à votre site web, il suffit de les utiliser au tout début du titre ou quelque part près du début du titre, car c'est probablement l' un des les choses les plus importantes en ce qui concerne l'inclusion de ce mot - clé dans les Serbes. Donc, les résultats de recherche. Et cela rapprochera votre site Web des meilleurs résultats. S' il y a un mot-clé qui dans le titre que quelqu'un cherche, pour la méta-description, google dit que ce n'est pas vraiment utile en termes de mots-clés. Il ne l'analyse pas pour les mots-clés recherchés par l'utilisateur. Mais la méta-description est super importante car elle apparaîtra juste dessous de votre URL et du titre dans les Serbes. Donc tu ferais mieux de le rendre intéressant. Il est toujours préférable de garder la méta description courte. Environ 150 Sciences, d'accord ? Et ce que je mets là est, par exemple, j'ai ce cas de chameau et aussi n sinus. Et à la toute fin, je me suis intéressé par le point d'interrogation. Et ce genre de peut-être rendre cela un peu plus intéressant pour un utilisateur de cliquer sur afin que nous ayons un joli CTA à la fin de la méta-description. J' ai donc essayé d'avoir le CTA, par exemple, vérifier ou peut-être intéressé ou quelqu'un comme ça. Et probablement cela obtient un peu plus de CPR dans les résultats de recherche Google. Encore une fois, s'il vous plaît mettre dans votre description Meta, c'est quelque chose qui est pertinent pour cette page. Et moi, pour les paramètres Open Graph, il y a assez important, mais pas vraiment pour Google autant que pour les médias sociaux et les autres services. Je vais l'expliquer plus tard. Et pour les paramètres de recherche de site, n'oubliez pas que cela ne signifie pas que vous excluez cette page de Google. Il se connecte uniquement à votre recherche interne que nous avons créée dans l'une des leçons précédentes. Donc, ce n'est pas lié au référencement de toute façon et vous pouvez le garder exclu alors qu'il est encore apparaîtra dans les résultats des moteurs de recherche dans Google. Et puis vous avez un code personnalisé, ce qui est assez important en termes de référencement, surtout si vous voulez exclure certains sites Web des résultats de recherche. Cependant, dans la pile de tête, vous pouvez également utiliser beaucoup de balises Meta différentes que vous pouvez créer. Par exemple, avec des mots-clés, vous pouvez utiliser des mots-clés Meta et y mettre des mots-clés. Alors que Google est ouvert sur ne pas vraiment prendre cela en considération lors de la création des classements des moteurs de recherche. Je suppose que c'est assez important. Et si vous avez le temps, vous pouvez simplement l'ajouter à vos sites Web car pour certaines applications, certains moteurs de recherche, il peut être pris en considération. C' est donc l'une des balises Meta que vous pouvez utiliser sur votre site Web, mais il y a en fait beaucoup de différentes balises Meta que vous pouvez consulter sur le site Web du W3C. Et ici, vous avez toutes les différentes métadonnées comme Arthur et viewport et description et mots-clés et trucs comme ça. Donc, dans le cas de certains d'entre eux, Webflow prend soin d'eux pendant des années comme la description, vous avez un champ séparé. Mais si vous souhaitez ajouter plus d'attaques humides peuvent être pertinentes pour votre site Web. Vous pouvez le faire, en particulier, vous pouvez ajouter des métadonnées de robots, et contrôler la visibilité de vos pages via ce métatag. Et je vous recommande fortement de regarder cette page dans les articles de recherche Google. Et il y a beaucoup d'informations sur les métadonnées des robots. Habituellement, vous utilisez simplement ce métatag afin d'exclure cette page spécifique ou des sites Web entiers de l'index. Dans ce cas, vous allez utiliser des robots de nom de métal et de contenu no-index. Ensuite, il peut être suivi d'une virgule et vous pouvez ajouter suivre ou nofollow, par exemple, pour que les robots suivent les bâtiments visibles sur ce site Web et Croll, certains autres sites Web auxquels ce site est lié. Mais si vous ne mettez pas d'index, c'est une suggestion pour le robot qu'il ne devrait jamais indexer cette page particulière. Et l'endroit où vous mettez ce métonyme robots contenu no-index est soit sur les pages individuelles de votre tel que nous avons pour notre page d'accueil ou page de blog. Ou vous le mettez globalement dans vos paramètres à toutes les pages de votre site Web et alors rien ne sera indexé. Eh bien, décider ce qui est indexé et ce qui ne l'est pas est assez important en termes de référencement. Par exemple, pour notre blog, je ne sais pas si nous devons nécessairement indexer toutes les pages. En particulier, nous pouvons exclure les pages techniques l'indexation comme 40 pour et guide de style et les autres. Mais nous n'avons pas vraiment probablement la moitié pour indexer, bloquer tous les messages parce que les mêmes éléments, les mêmes articles sont sur la page du blog et sur les pages de catégorie. Et en passant, si vous voulez vérifier si cette page particulière de côté est en cours d'indexation, vous pouvez mettre dans le site Google ou la page. Et puis vous pouvez vérifier quel genre de liens sont index à partir, disons froideur que comment domaine. Et puis vous pouvez voir si ce robot de méthianine contenu no-index fonctionne vraiment bien. C' est juste une suggestion pour les robots. Cependant, dans la plupart des cas, cela devrait fonctionner très bien. Et encore une fois, ce n'est que pour la page d'accueil spécifique. Nous excluons la page d'accueil spécifique pour les Serbes. Toutefois, si vous souhaitez exclure l'intégralité du site Web d'être indexé, vous pouvez accéder aux paramètres de cette page dans Webflow. Et ici, vous avez une balise de code personnalisée. Là. Vous pouvez mettre le code qui est pour toutes les pages, mais je vais vous le montrer dans la prochaine leçon. 27. Conseils de référencement partie 2: Bonjour et bienvenue à la prochaine leçon. Ceci est la deuxième partie de nos conseils SEO dans Webflow. Maintenant, je suis dans mes paramètres de projet pour les Juifs et bloquer le site Web. Et ce que je peux faire est de vous montrer cet onglet de code personnalisé dont j'ai parlé plus tôt. Ici vous avez le code tête et ce code va être inclus dans chaque page de votre site Web. Cela signifie que si vous voulez ajouter, disons des mots clés Meta ici, ou peut-être que vous voulez juste vous débarrasser de l'indexation de toutes les pages et créer des robots métalliques pas d'index. Vous pouvez simplement l'ajouter au code de tête et il sera distribué sur toutes vos pages. Maintenant, vous pouvez également aller à l'onglet SEO, qui est l'onglet global le plus important pour vos paramètres, dehors du réglage pour les pages individuelles dont j'ai parlé dans la leçon précédente. Et aussi, il vaut la peine de vérifier l'hébergement que vous avez et le réglage du domaine. Assurez-vous simplement que vous avez défini sur la valeur par défaut, que votre domaine principal ici est défini sur la valeur par défaut car vous pouvez avoir différents domaines ici. Et cela empêchera Google d'indexer tous les domaines que vous possédez. Et quand vous avez dit cela, en passant, par défaut, il redirigera automatiquement le domaine Webflow. Je veux dire, il n'inclura pas le domaine Webflow dans les résultats de recherche. Par conséquent, Webflow désactive automatiquement l'indexation du sous-domaine Webflow sur lequel vous avez votre site. Et au lieu de cela, il utilisera toujours ce domaine de votre plus important pour Google. De cette façon, vous allez vous débarrasser du contenu dupliqué et pénaliser de Google pour ce contenu dupliqué. Et en passant, dans le référencement, le premier paramètre est pour l'indexation. Et lorsque vous le définissez sur yes, l'indexation de ce sous-domaine Webflow sera désactivée et cela devrait être défini à tout moment lorsque votre propre domaine est connecté et défini par défaut. Ensuite, nous avons la section robots, et cette section sera à nouveau distribuée et incluse pour toutes vos sous-pages. Donc pour l'ensemble du site. Donc, quelles que soient les règles que vous définissez pour les robots ici seront appliquées globalement à votre site Web. Robots dot txt est assez important. Mais au contraire de ce que les gens pensent, certains d'entre eux au moins, cela n'empêchera pas Google d'indexer vos pages. Au lieu de cela, cela empêchera vos sites Web, en particulier l'administration de sites techniques et d'autres choses comme celle-ci, d'être bombardés par des requêtes d'agents utilisateurs, de robots qui ont essayé de télécharger et de connaître le contenu. C' est donc la directive pour les robots, par exemple, ne pas, de ne pas prendre en considération ce site Web et d'envoyer des demandes. Et vous pouvez également ajouter les articles sur Google ou simplement cliquer sur le lien dans le panneau Webflow pour visiter robots prend that.org, puis en savoir plus sur le fichier robots et comment créer. Une autre directive dans ce fichier. Ensuite, il y a une autre chose dont je parle dans l'une des leçons précédentes, mais je veux mentionner qu'en termes de référencement aussi, ici vous avez 301 redirections et vous voulez généralement utiliser ces redirections afin que vos utilisateurs ne visitent pas un 404 pages. Ainsi, par exemple, si vous supprimez une page, vous voulez parfois obtenir le lien de cette page, mettre ici comme un ancien chemin et le rediriger vers un autre chemin peut être un article plus récent ou une section plus récente sur la même chose sur votre site Web. Cela empêchera tout lien hors de votre site Web, conduisant à 404 pages. Et de cette façon, il aidera les utilisateurs et les robots ainsi à trouver leur chemin sur votre page. Ok, ensuite nous avons ce SEO Settings à nouveau. Et au bas de cette page, vous avez le sitemap et aussi vérification du site Google à des paramètres très importants pour le sitemap. Je vous recommande, surtout si vous ne savez pas comment créer votre propre sitemap. Juste pour utiliser ce prédéfini, ce paramètre par défaut qui générera automatiquement un sitemap pour vous. Au lieu de cela, si vous voulez utiliser le vôtre, vous pouvez simplement le laisser tel quel. Mais si vous voulez utiliser cela automatiquement généré par Webflow, il suffit de le basculer sur oui. Et puis Webflow va créer un fichier texte, un fichier XML réellement pour vous. Et vous serez en mesure de l'envoyer à Google ou Google les deux vont automatiquement le chercher par, par lui-même. Maintenant, le fichier XML sitemap peut être personnalisé et vous pouvez le personnaliser si vous savez ce que vous faites. Mais pour la plupart du temps, je vais juste le garder automatiquement généré par Webflow. Maintenant, Google Search Console est un autre endroit que vous voulez enregistrer et que vous voulez connecter votre site Web également. Vous créez donc une nouvelle propriété dans Google Search Console. Et puis vous pouvez utiliser le domaine sur notre préfixe URL. Ce que vous allez utiliser ici est le préfixe d'URL. Et il suffit d'utiliser l'adresse du site Web que vous avez dans Webflow. Donc, dans ce cas, mon propre sous-domaine. Maintenant, allons de l'avant et continuons. Et maintenant, il vérifie cette propriété afin de vérifier que vous pouvez utiliser plusieurs façons, mais ce que vous voulez faire est d'aller à la balise HTML. Et ici, vous pouvez copier toute la ligne qui est dans 0.1. Cliquez sur Copier. Maintenant, allons sur Webflow et collez-le. Tu n'as pas besoin de tout d'ici. Vous avez juste besoin de ce qui se trouve entre les deux, des citations dans le contenu. Donc, voici, l'ID de vérification du site, et sauvegardons ces changements. Maintenant, vous êtes prêt à revenir à la console de recherche Google et vérifier si ce, ce site Web fonctionne. Mais d'abord, étape très importante, vous devez le publier sur les domaines sélectionnés. Vous devez donc publier votre site Web avec ces modifications d'abord afin que Google reconnaisse les modifications. Maintenant, revenez à la console de recherche Google et cliquez sur Vérifier. Une fois qu'il est prêt et publié, il devrait vérifier votre site Web et tout va bien. Donc maintenant, vous pouvez juste aller à la propriété. Ouvrez donc votre site Web et vous pouvez vérifier quelques mesures importantes de votre site Web. Ces données sont donc déjà collectées. Et puis, parfois, vous avez un peu d'examen de performance et d'inspection et toutes les choses que vous pourriez trouver vraiment intéressant en termes de référencement et juste rendre votre site un peu plus convivial pour les robots. En outre, ce que vous voulez faire est de télécharger ce sitemap, ce workflow généré pour vous dans la section sitemap. Ainsi, si vous accédez à l'index sitemap, vous pouvez ajouter un nouveau sitemap et valider la carte du site créée par Webflow. Vous venez de mettre sitemap dot xml ici et d'utiliser soumis. Et si vous n'avez pas vérifié dans le panneau WebEx, vous disposez des informations que le sitemap a été envoyé. Si vous enregistrez les modifications après avoir basculé vers les États-Unis, vous voyez qu'elles sont envoyées avec succès et vous pouvez également voir l'état et les URL découvertes qui sont l'index de cinq URL dans votre sitemap. Ce sont les plus importants, mais pas tous les paramètres SEO. Vous pouvez consulter cette console de recherche Google pour plus d'informations. Et évidemment, vous pouvez apprendre beaucoup sur SEO à partir de certaines ressources externes que je recommande. Donc, merci beaucoup d'avoir écouté et accordé cette leçon. se voit dans la prochaine. 28. Métadonnées du site: Salut les gars et bienvenue à la prochaine leçon. Je voudrais ajouter quelque chose aux conseils de référencement. Et il s'agit du protocole Open Graph et du schéma. Donc, fondamentalement, c'est la façon de mieux expliquer notre site Web, pas nécessairement pour les robots, mais pour les médias sociaux. Le protocole Open Graph a été initialement lancé sur Facebook, mais maintenant vous avez beaucoup de logiciels différents utilisant ce protocole Open Graph spécifique. Et que faites-vous avec cela, c'est que vous utilisez ces métadonnées et que vous avez une propriété méta. Et puis vous allez avec OG, titre, type, URL et image. Et vous définissez les éléments qui seront reconnus par, disons les médias sociaux. Si vous définissez l'image, alors lorsque vous partagez ce lien sur Facebook ou LinkedIn, l'image apparaîtra. Et c'est l'image de la taxe OG. Vous pouvez évidemment mettre tout cela dans votre code personnalisé. Vous pouvez le placer dans les paramètres de votre projet pour que les modifications soient visibles globalement sur d'autres sous-pages de cette section de code personnalisé. Mais dans le concepteur, si vous allez dans les paramètres de pages individuelles, Webflow met également à votre disposition certains des paramètres de graphiques ouverts les plus importants ici. Donc, là, vous avez le titre et la description et l'image. Ce sont des paramètres gratuits, les plus importants pour vous de partager des éléments sur les réseaux sociaux et pour que cela apparaisse correctement. Donc, par exemple, si je vais sur Facebook et que je crée un nouveau post, puis j'ajoute un lien de site Web et disposé à mon web, le site Web, il générera automatiquement quelque chose. Et c'est la description. Je n'ai pas d'image OG. C' est pourquoi il n'affiche pas l'image ici. Et aussi il prend le titre de mon titre, du titre de ma page. Mais pour de nombreuses raisons, vous voudrez peut-être garder ceci séparé et vous voudrez peut-être le décocher, même que la balise de titre SEO. Vous pouvez voir cet événement que j'ai eu cet événement non coché, il a automatiquement récupéré cela à partir du titre et c'est la fonctionnalité Facebook je suppose. Mais vous pouvez également prendre la méta description et ensuite elle sera récupérée à partir de votre méta-description. Donc SEO meta description aussi bien. Il est donc préférable de vérifier cela que non, mais aussi il est préférable de créer des descriptions et des titres différents pour les médias sociaux. Et évidemment, il y a une image que vous devriez avoir ici. C' est le rapport d'aspect de 1,91 à un que vous devriez utiliser. Et Webflow essaie de s'assurer que vos images sont au moins alors que 1200 pixels par 630 dans cette URL d'image Open Graph ici, vous pouvez mettre un chemin absolu à votre image. Vous ne pouvez utiliser aucune des images de votre bibliothèque. Et vous avez juste à créer une image spéciale qui sera une URL d'image graphique ouverte. Ce que vous pouvez faire est de le définir séparément pour toutes les pages dans les paramètres Open Graph. Ou si vous voulez simplement la définir une fois, vous pouvez ajouter cette balise OG en tant que code personnalisé dans vos paramètres de page globaux pour Webflow. Donc maintenant, j'ai téléchargé cette image comme image OG. Et au lieu de s'assurer que cela fonctionne sur Facebook en ajoutant le post une fois de plus. Je vous recommande d'aller à un service spécial qui vous permettra de tester les métadonnées OG. Parce que Facebook et d'autres médias sociaux avaient l'habitude de simplement encaisser certaines données sur le lien que vous avez fourni et cela pourrait ne pas être visible. Donc, au lieu de cela, vous venez d'aller aux développeurs Facebook. Et voici le débogueur de partage, l'outil qui vous permettra de mettre le lien vers votre site Web et de cliquer sur déboguer pour prévisualiser à quoi il devrait ressembler dans les médias sociaux. Donc, c'est comme ça qu'il devrait s'afficher sur Facebook. L' image est maintenant là. En dehors de l'image, il y a quelques champs OG qui ont été automatiquement remplis par web cependant. Par exemple, ce temps mis à jour, mais certains d'entre eux avec nous rempli comme la description et l'image et le titre et tout est là. Vous pouvez également vérifier certaines erreurs. Tout en haut de cette page, vous avez un avertissement qui devrait être corrigé. Et voici quelques propriétés obligatoires qui manquent l'URL. Eh bien, tous les médias sociaux s'occuperont de ça et saisiront juste l'URL que vous voulez. Et l'identifiant de l'application Facebook. Encore une fois, ce n'est pas nécessaire sauf si vous utilisez une application Facebook que vous souhaitez vous connecter à ce site Web. Mais d'une façon ou d'une autre, c'est un excellent moyen fournir des informations supplémentaires pour les médias sociaux, en particulier les images qui s'afficheront correctement et stimuleront le trafic des médias sociaux vers votre site Web. Et une autre chose que j'aimerais expliquer dans cette leçon est schema.org. Un autre ensemble de métadonnées que vous pouvez utiliser séparément pour vos pages ou pour l'ensemble du site Web. Et c'est juste un schéma que vous utilisez, par exemple, des produits. Et cela, nous allons Google et d'autres logiciels mieux comprendre ce qui est sur votre site Web. Par exemple, vous pouvez ajouter de la couleur ou du modèle à vos produits ou à certaines offres, peut-être des critiques ou des étoiles, des étoiles, quelque chose comme ça. Et souvent, vous pouvez voir de tels résultats sur Google lorsque vous recherchez quelque chose. Par exemple, dans les Serbes, vous pouvez voir notation ou étoiles ou autre chose. Et ce sont les informations du schéma que Google remplit. Et pour certains résultats, pour certaines pages Web, il décide d'afficher cette information. Cela ne garantit pas nécessairement que ces informations seront présentes dans les services. Mais il y a une grande chance si vous gardez les choses correctement, si vous ajoutez ces métadonnées d'organisation de schéma, qu'elles seront à un moment donné incluses dans résultats de recherche Google et comment utiliser ces propriétés d'organisation de schéma. Nous allons cliquer sur Commencer. Et ici, vous avez un attribut différent que vous pouvez utiliser dans Webflow pour les éléments. Donc, au lieu de le mettre dans la section Code personnalisé de votre page, vous sélectionnez simplement un élément auquel vous souhaitez ajouter cet attribut personnalisé. Et vous avez juste à aller à ses paramètres. Et ici, vous aurez l'attribut, la section des attributs personnalisés que vous allez utiliser pour les attributs de schéma. Donc, si vous le voulez, disons la clarté que cette partie du site est un film. Ce que vous allez faire est dans le nom, vous allez utiliser ce type d'élément de schéma. Donc, vous déclarez le type d'élément comme le nom de cet attribut. Et en tant que valeur, vous avez ce lien vers la section appropriée de l'organisation de schéma. Donc, c'est une façon de faire cela expliqué propre site web d'organisation de schéma. Et de cette façon, si vous avez des produits et que vous voulez les rendre plus disponibles pour la recherche. Je pense que c'est un excellent moyen d'ajouter ces métadonnées et informations à votre site Web. Évidemment, cela le rendra plus précieux pour d'autres logiciels logiciels logiciels, non seulement pour les robots d'indexation de recherche, mais aussi pour des raisons d'accessibilité et d'autres choses comme ça. Il suffit donc de garder à l'esprit certains endroits où vous pouvez ajouter ce code pour des pages individuelles et pour globalement pour l'ensemble de votre site Web. Ok, c'est tout pour l'instant. Merci d'avoir écouté et de vous voir dans la prochaine leçon. 29. Utiliser des intégrations: Hey, ravi de te voir dans cette leçon. Ceci est une leçon bonus quand j'aime vous expliquer onglet intégrations. Et c'est assez puissant car il vous permet de connecter Webflow à certains services externes. Polar, par exemple, j'ai un Google Analytics, cependant, malheureusement pour la version de Google Analytics pour vous avez juste encore à ajouter l'extrait de code de l'analyse dans le code personnalisé, Webflow pour une raison quelconque ne le supporte pas encore, mais vous avez d'autres services que vous pouvez intégrer en toute transparence avec Webflow ici, tels que Google Optimize qui vous permettra d'exécuter des tests AB. Vous créez donc simplement un ID de conteneur sur Google Optimize. Ensuite, à l'intérieur de Google Optimize, vous pouvez taper des URL dans deux pages différentes que vous avez créées dans Webflow. Et puis il changera automatiquement cette version du site Web. Donc, affichez une page ou une autre pour d'autres utilisateurs et nous vous laisserons facilement décider quelle version est la meilleure. Pour l'intégration de Google Maps, il vous suffit d'obtenir la clé API JavaScript Google Maps. Et puis vous fournissez la clé API. Et ici, et cela vous permettra simplement d'afficher Google Maps à l'intérieur du web via le site Web. Et évidemment, vous pouvez créer une intégration simple et il ne nécessite pas de clé API Google Maps pour être présent ici. Donc, vous allez simplement à Google Maps et vous cliquez sur la partie du mobbed, puis copiez le code d'intégration et collez l'iframe, iframe en HTML, HTML personnalisé dans Webflow. Mais si vous voulez utiliser Google Maps plus largement sur votre site Web et disons Créer une recherche à l'intérieur de votre site Web qui renverra des résultats sur Google Maps. Ensuite, vous allez devoir utiliser le registre de clé API en tant que développeur Google, puis générer cette API Google Maps et la mettre ici. Et puis vous avez aussi Facebook pixel, ce qui est vraiment, vraiment utile si vous lancez des campagnes sur Facebook. Cela vous permettra de connecter votre site Web à Facebook, au moins pour l'instant, parce que comme nous le savons tous, cookies disparaissent lentement et ne sont pas supportés, supportés. La plupart des navigateurs modernes, certains en quelque sorte bloqués. Mais pour l'instant, nous avons encore cette intégration de pixels Facebook ou front-end que vous pouvez simplement ajouter avec votre pixel id collé ici. Ainsi, dans votre gestionnaire d'annonces sur Facebook, vous créez une nouvelle source de données. Vous créez un nouveau pixel, puis collez l'ID du pixel ici. Et le flux de richesse prend soin de tout le reste. En termes de cette implémentation, cela vous permettra, par exemple, créer dynamiquement des annonces pour les personnes qui ont visité votre page sur Webflow et beaucoup d'autres choses, y compris les statistiques et toutes les données que vous pouvez prévisualiser dans le tableau de bord Facebook, ok ? Maintenant, vous pouvez retarder le consentement des cookies signifie que vous serez conforme aux règles du RGPD. Si vous passez à oui, puis le pixel ne se chargera pas sans le consentement. Donc, la valeur par défaut est que le pixel se charge si votre utilisateur accepte la politique de cookies ou, ou il ne le fait pas. Si vous changez cela, vous serez plus conforme au RGPD car il ne se chargera que si les gens acceptent votre politique de cookies, alors vous avez accès à l'API, ce qui est super intéressant car Webflow permet de Accès à la référence API légère. Et il y a certains éléments que vous pouvez simplement accéder sans aller à l'interface utilisateur des flux Web, donc vous n'avez pas besoin d'aller au concepteur pour laisser dire retourner la liste de collection ou les éléments de collection et vous pouvez le faire avec l'API. Il y a beaucoup de données que vous pouvez obtenir à partir de Webflow sans même passer par Webflow. Et vous pouvez obtenir toutes les données de collecte. Ainsi, vous pouvez, par exemple, au moins vos collections et obtenir une collection spécifique par ID. Et tout cela nécessite un peu de connaissance du protocole JSON et HTTP et de l'API. Mais si vous apprenez à le savoir, c'est assez simple. Cependant, il existe un moyen plus intelligent et plus accessible que vous pouvez utiliser pour traduire, transférer des données de Webflow vers n'importe quel service que vous voulez en utilisant une API. Et je voudrais vous montrer qu'en utilisant des hooks Web, comme vous pouvez le voir, hooks Web font partie de la référence API pour Webflow, mais ils sont également accessibles avec le panneau tout en bas de cette page, vous avez des hooks Web et vous pouvez gérer webhooks d'ici. Les crochets Web sont essentiellement des informations qui détectent automatiquement le flux de travail à n'importe quel service que vous voulez utiliser , puis transmettent ces données que vous recevez du crochet Web. Il peut être formé soumission, ou il peut être les informations sur votre site en cours publication ou certaines nouvelles commandes de commerce électronique. Vous ajoutez simplement un crochet Web et vous sélectionnez le type de déclenchement. Alors, quel type de données dois-je recevoir de Webflow sur l'URL de mon flux de travail spécifique ? Je vais vous montrer comment créer cette URL webhook en une seconde. Mais supposons que vous souhaitez recevoir des soumissions de formulaire et l'URL du webhook est l'adresse que le workflow utilisera pour envoyer ces informations. Donc, chaque fois que quelqu'un se sent dans le formulaire, vous obtiendrez toutes les données de formulaire envoyées à ce site Huike. Eh bien, maintenant comment créer une URL webhook ? Le plus simple est de nous inventer à Zapier. Donc, créer un compte sur Zapier, puis rechercher, vous pouvez rechercher le module gratuit Webflow. Et vous pouvez utiliser le module Webflow pour le faire. Ou vous pouvez utiliser ce webhook de Zapier. C' est la version premium. Donc, si vous avez un compte gratuit, il suffit de rechercher Webflow et vous serez en mesure de le faire. Pour ce crochet web. Tu vas avoir besoin d'attraper le crochet. Donc, vous allez attendre une nouvelle donnée qui viendra à cette adresse et l'URL de l'adresse du client que vous voulez copier est juste là. Copiez cela et passez ceci à Webflow. Donc, toutes les données de formulaire seront immédiatement en plus de ce crochet de soumission de formulaire que vous avez généré. Ok, maintenant allons sur notre site, mais chose très importante avant de le faire, vous devez republier votre site Web. Enregistrez donc les modifications et republiez le site Web. Ensuite, vous pouvez utiliser n'importe quel formulaire de votre site Web pour, disons, vous abonner ou envoyer des données. Maintenant, nous avons les informations que la soumission a été reçue. C' est quelque chose que vous pouvez évidemment personnaliser comme l'état du formulaire dans Webflow. Mais le plus important est que ce formulaire est passé par la soumission. Et dans Webflow, vous pouvez rechercher des formulaires soumis là il y a quelques secondes, j'ai obtenu quelques données avec cet e-mail. C' est aussi un e-mail. D' accord. Mais à Zapier, ce que je peux. Vérifier est juste le continuer. Et maintenant j'ai cette demande a qui a été reçue. Nous avons trouvé une demande, quelque chose a été envoyé et j'ai ce formulaire email deux, et les données contiennent des tests M82 chez les codeurs cette maison. Alors je l'ai eu. Si vous voulez que les noms soient plus descriptifs, vous pouvez accéder à ce formulaire. Et dans les propriétés du journal de formulaire, vous pouvez vérifier le nom du formulaire afin que vous puissiez le faire je sais newsletter ou quelque chose comme ça. C' est donc mieux, mieux adapté à vos besoins. Maintenant, si vous voyez cet exemple de données qui a été envoyé avec vos demandes, vous pouvez facilement continuer. Et lorsque vous avez le HUC prêt, vous pouvez créer l'action. Alors, que veux-tu arriver avec ces données ? Par exemple, si vous voulez que ce soit envoyé à MailChimp en tant que nouvel abonné, vous pouvez simplement connecter votre compte Mailchimp ici. Et j'ai mon compte connecté. Si je sélectionne Continuer, je peux l'envoyer à l'une de mes audiences. Je n'ai qu'une audience, puis l'e-mail d'abonné est quelque chose que j'ai besoin d'obtenir à partir des données que je cache à partir de ce crochet. Donc, fondamentalement, il y a cet e-mail pour, voyons toutes les options. Et j'ai cet e-mail à qui est testé à froid comme un comment ce que je veux faire est de passer cet e-mail à faire Mailchimp. Vous pouvez définir tous les champs que j'ai sur ma puce le moins. Mais je n'ai pas besoin de faire ça. Alors passons ce test et c'est ainsi que vous créez une automatisation qui vous permettra simplement abonner les utilisateurs à votre compte Mailchimp directement à partir de Webflow. Et c'est super facile avec Zapier. Vous pouvez également vérifier tapis intégral. C' est une autre grande application qui vous permettra de le faire. Et aussi, vous pouvez créer zap en plusieurs étapes afin que vous puissiez l'ajouter pour le gérer, puis envoyer les données à Google Sheets ou n'importe où ailleurs. Pour les types déclenchés que vous pouvez utiliser. Comme vous pouvez le voir ici, nos formulaires, soumissions et citations publiés, mais aussi il ya certains événements envoyés lorsque vous créez quand quelqu'un crée une nouvelle commande ou modifier la commande pour votre boutique e-commerce. Pour cela, vous devez créer un projet de commerce électronique dans Webflow. J' espère donc que vous en apprendrez plus sur cette référence d'API et comment vous pouvez obtenir des données de Webflow et peut-être envoyer des données à Webflow. Il y avait un indice dans cette leçon que vous pouvez explorer maintenant. C' est ce qu'on appelle les dot comment, où j'ai quelques tutoriels sur l'API et le protocole HTTP. Et cela vous aidera à commencer avec les automatisations. En outre, il y a beaucoup de ressources sur Zapier et intégral, fou intégral que j'ai largement utilisé pour le web à des fins. Donc, je pense que c'est une grande étape pour être encore plus avancé dans ce que vous faites. Mais pour l'instant, c'est tout ce que je voulais te dire. Et dans ce cours, c'est fondamentalement tout. J' espère donc que vous avez beaucoup appris au cours de ce cours et que vous prenez ces connaissances et les appliquez à votre web pour les projets vous encouragent fortement à créer votre propre projet, ou peut-être suivre à nouveau les étapes avec ce cours et créer un blog, site web avec CMS comme je l'ai fait. Merci d'avoir regardé et je vous verrai dans les prochains cours. 30. Rendez-vous en très vite: Merci de votre attention dans ce cours. J' espère que cela vous a ouvert la tête à de nouvelles possibilités et fonctions de Webflow. Vous pouvez désormais créer et gérer du contenu dynamique dans Webflow avec CMS et bien plus encore. Espérons que vous avez réussi à suivre les étapes de ce cours pour recréer notre système de blogs ou que vous venez de créer un autre côté du vôtre. Aussi, j'espère que ce n'est pas la fin de votre voyage car actuellement dans Webflow, vous pouvez créer des sites e-commerce avancés avec une base de données de produits dynamiques, cartes de travail et un traitement de paiement. Vous trouverez tout cela et bien plus encore dans mes autres cours de bien-être social. En attendant, merci pour le temps passé ensemble et j' espère qu'il était plein de connaissances précieuses profitera à votre travail. Rendez-vous dans les prochains cours.