Un guide complet pour créer des sites web modernes avec Drupal 8 et Bootstrap 4

1. Une introduction au cours: Bienvenue à ce cours sur la construction de sites web modernes en utilisant Drew Pilate et Bootstrap pour En chemin, nous allons plonger dans Drew pols, type de contenu, système, vue, système, bloc Système, et tellement plus va aller dans le code et commencer à thème flacons de brindilles. Nous allons regarder CSS et lierons tout ensemble avec l'inspecteur Google Chrome Web. Mais d'abord, permettez-moi de me présenter et de vous parler un peu de mes antécédents. Mon nom est un neuf, et je serai votre instructeur tout au long de ce cours. Si vous ne pouvez pas le dire par la photo. Je suis développeur et designer. Je me considère également comme un apprenant tout au long de la vie, et je pense que l'apprentissage tout au long de la vie est une compétence que tout le monde qui s'engage dans le domaine du design et du développement devrait posséder. Je suis titulaire d'un baccalauréat en sciences sur le Web et les médias interactifs, ce qui signifie essentiellement que j'ai fait mon baccalauréat en design, développement et marketing pour le Web. Avant de commencer à enseigner en ligne, j'ai eu une carrière de cinq ans dans l'enseignement en baisse, permis et supérieur. Tout au long de mes études supérieures, j'ai participé à plus de 50 projets de conception et de développement Web à fort impact et j'ai eu un bref passage à l'école supérieure où j'étudiais pour obtenir une maîtrise en éducation. Heureusement, je n'ai pas pu finir ça. Cependant, j'ai encore les compétences, et je sens que mon baccalauréat aussi. Aziz, mon expérience dans la recherche et le travail et l'enseignement supérieur me rend particulièrement qualifié pour enseigner le développement Web en ligne. Sans plus tarder, Plongons directement et commençons. 2. Ressources du projet: avant de commencer à apprendre sur Drew pool et Bootstrap car je voulais vous montrer où vous pouvez télécharger les fichiers de cours pour compléter cette vidéo. Si vous êtes sur cette page d'apprentissage ici et que vous allez vers le bas, assurez-vous que vous êtes sur les projets et la ressource est, et vous verrez un fichier zip du site appelé Elaine. Dans ce fichier zip sera littéralement tout le contenu et tout ce dont vous avez besoin. Teoh terminer ce cours une étape facultative, et une autre chose que vous pourriez avoir besoin qui n'est pas le contenu est un hôte Web. Donc, j'ai en fait une vidéo de partage de compétences sur la façon de configurer l'hébergement et un environnement de développeur avec terrain de site. Donc, si vous allez à partage de compétences et tapez pourquoi vous devriez utiliser Rupel une introduction, vous trouverez cette vidéo ici. Et donc je voulais juste porter ça à votre attention. Dans le cas où vous n'avez pas d'hôte Web, vous commencez complètement à partir de zéro. Cela va en détail sur la façon dont j'ai construit l'environnement développeur que j'utilise pour construire ce site Web que nous allons suivre dans ce cours, et il y a des liens à peu près partout pour arriver à citer le terrain. D' accord, merci. Et je te verrai dans la prochaine vidéo. 3. Créer notre environnement de développement: Bonjour. Bienvenue dans cette vidéo. Nous allons passer en revue les étapes que vous devrez prendre pour mettre en place votre environnement de développement . Il y a plusieurs façons de configurer un environnement de développement, et je vais passer en revue quelques-unes d'entre elles que je recommande dans cette vidéo. Je vais également vous montrer mon environnement de développement pour ce cours. Vous êtes les bienvenus pour le suivre, mais vous n'avez certainement pas à le faire. C' est juste une sorte de, hum, pour s'assurer qu'il y a quelque chose là-bas. s'agit pas d'un cours sur le développement local ou d'une mise en place dans un environnement de développement. C' est un cours sur Drew pool. Mais je voulais m'assurer que je t'ai donné quelque chose. Vous aurez d'abord besoin d'un éditeur de texte ou d'un environnement de développement indépendant I. D E. Mon recommandé I D E. Et celui que je vais utiliser ce cours est le code de studio visuel ou le code V s. La prochaine chose dont vous aurez besoin est un terminal ou une ligne de commande. Il y a une ligne de commande. Ça s'appelle Terminal On Mac. Cela vient standard, Et si vos propres fenêtres, vous aurez également la ligne de commande, Cependant, c'est une meilleure option. À mon avis, c'est hyper, et, hum, il est livré avec beaucoup d'options pour faire de ce terminal ce que vous voulez qu'il soit. La même chose est vraie pour le code de studio visuel, donc vous pouvez choisir d'obtenir hyper. Il y a d'autres options, comme je terme qui sont géniales, mais c'est celle que j'utilise. Et le prochain outil dont vous aurez besoin est la partie de cette vidéo qui varie le plus. Et c'est quelque chose pour faire votre local ou votre développement dans. Donc, évidemment, vous allez écrire du code là-dessus. Quelle que soit la plus grande partie de ce que nous allons faire est à travers une interface web. Donc, pour moi, ce que j'utilise est le terrain et le site. Ground a un programme d'installation en un clic qui est livré avec un domaine intermédiaire ou un euro intermédiaire. J' ai tout un cours sur la façon de mettre en place ça. Ici, c'est la part des compétences. Ah, c'est le numéro trois. Ça va se passer. Ce que nous ne voulons pas que cela revienne sur la façon d'installer en utilisant le partage de compétences. Excusez-moi ? Comment cela va voir comment dio installé Rupel en utilisant les terrains du site et il y a aussi une vidéo ici vous mettre en place pour le succès. Cela va plus sur ces options, donc oui, certainement envisager de vérifier ça. Si vous ne voulez pas aller avec le terrain, c'est tout à fait correct. Vous avez une tonne d'options qui touchent toutes rapidement ici si vous voulez aller sur un autre itinéraire. Euh, ici, j'en serai sûr. Teoh, ajoute ça dans la description. Ceci est un article de Low Baht, peu à propos de ce qui est un magasin de piscine vraiment une classe A Drew. Ils font beaucoup de bon travail, et c'est un tour assez complet de toutes les différentes façons que vous pouvez utiliser gens dessinés localement gratuitement sur votre machine. Donc, je recommande fortement de vérifier cela. J' ai utilisé beaucoup d'options ici. Beaucoup de ces options d'air, plus avancées. C' est un cours sur la préparation de quelqu'un à utiliser Rupel. Mais c'est là. Donc vous l'avez au cas où vous ne vouliez pas payer. Je pense que c'est comme avec mon lien. Je pense que c'est comme 3$ par mois. Hum, ça en vaut vraiment la peine, parce que finalement tu auras Teoh héberger ton site de toute façon, et cyclone le rend vraiment facile, mais si tu ne veux vraiment pas débourser de l'argent, je comprends totalement ça. Et il y a des tonnes d'options, non ? Alors consultez cet article Lobato, puis consultez également le bureau Acquia Dev, qui est une solution incroyablement populaire au sein de la communauté dribble pour le développement local . Je n'utilise pas ça. C' est juste dans mon organisation précédente où j'ai appris à utiliser les gens de Drew. J' ai dû apprendre la dure avec ça. J' vraiment utilisé beaucoup de machines virtuelles, mais j'avais aussi un service interne qui faisait ce site où j'avais, comme une, euh, une euh, fille de mise en scène sur un serveur que je possédais et gérais. Donc j'ai juste Ce n'est pas parce que je n'aime pas le bureau Acquia Dev. Je n'avais jamais utilisé, je n'avais pas besoin de l'utiliser. C' est donc très populaire à télécharger, et je suis sûr qu'il y a beaucoup de très bonne documentation ici pour commencer. Si vous souhaitez suivre cette route une fois que vous avez le code s installé, vous aurez besoin de Teoh configurer une extension. Donc si tu descends, tu seras peut-être là. Si vous descendez à l'icône des extensions et tapez Sftp. Vous pouvez la voir. Je l'ai déjà. Vous voulez aller de l'avant et installer que vous avez fait ça ? Vous voudrez que Teoh do command shift P et tapez sftp config et vous mettrez vos efs Excusez-moi et vous mettrez vos informations FTP dans ce fichier de configuration. Je ne vais pas l'ouvrir car il montre vos informations en texte brut. Et ce ne serait pas sûr pour moi de le faire. Donc, oui, donc tu vas certainement vouloir Teoh. Assurez-vous d'appuyer sur le type de commande shift P dans la configuration sftp. Configurez vos informations d'identification sftp et ce que vous serez en mesure de faire est également utilisé sftp. Afficher le serveur de développement que vous utilisez. Depuis que j'utilise le terrain du site, j'ai mon sftp configuré de sorte que c'est ainsi Il frappe le répertoire de droop 'll sur mon serveur au sol de site Et ce que cela nous permet de faire est de télécharger n'importe quel fichier de thème dont nous pourrions avoir besoin. Modifiez-le, puis quand nous frappons, enregistrez-le en fait le télécharge. Ok, Une fois que vous téléchargez tous les logiciels requis et que vous avez mis en place, n'hésitez pas à passer à la vidéo suivante et je verrai leur 4. Installer l'Installer Installing 4 et Adminimal: tous les droits. Bienvenue dans cette vidéo, nous allons installer le thème bootstrap quatre installera également le thème admin ajouter minimal, et je vais passer en revue ce que cela signifie. Mais d'abord, allons juste de l'avant et définir la configuration de base du site quelques-unes des informations de base. Donc maintenant, si vous suivez mon cours précédent sur le partage des compétences, euh, je mets ça juste à quelques infos de test. Alors, changeons ça. On va construire une boulangerie végétalienne appelée Elaine. Donc, si nous cliquons simplement sur la configuration et descendez sur les sites de base, les paramètres sous le système, modifions le nom du site, aussi celui d'Elaine et fera du slogan la meilleure nourriture végétalienne. Évidemment, définissez votre e-mail et nous allons de l'avant et sauvegardons la configuration. Alors si on retourne sur le site, on a le nom et le slogan. Alors si on retourne sur le site, Super. Ensuite, jetons un coup d'oeil au thème admin. Donc, dans Drew pull, vous avez deux thèmes. Vous avez un thème de site, qui est ce que vous voyez ici. C' est Bartek. Bartek est le thème par défaut qui expédie les personnes retirées, et vous avez également un thème admin. Donc, si nous devions aller de l'avant et cliquer sur le contenu. Vous pouvez voir cette fenêtre ici. Ce back-end est le thème de l'administration. C' est le thème d'administration par défaut qui est expédié retiré, pally. Donc, si nous devions naviguer pour étendre la configuration toutes ces fenêtres ou une partie du thème admin Eh bien, je pense que c'est sympa, mais je préfère quelque chose d'un peu plus moderne. Donc, nous allons installer dans mon ce qui est, à mon avis, le meilleur thème admin disponible en triple. Et c'est ajouter un minimum. Donc, je vais l'amener ici afin que vous puissiez le voir qui se trouve à Project Slash ajouter thème minimal . Vous pouvez voir sur la page du projet que cela est commercialisé comme un thème moderne, et je peux certainement l'attester. J' ai beaucoup utilisé ce thème dans cette vidéo. Nous allons Teoh, utilisez la méthode simple pour installer un thème. Cependant, dans la vidéo suivante, je vais passer sur l'installation des modules, qui fourniront plus d'une option pour l'installation. Puisque nous commençons tout juste ici, cela a du sens que nous installons ce genre de façon basique, alors continuons et faisons-le. Donc, sur la page thème de l'annonce Minimal. Si vous descendez au bas de la page où il est écrit téléchargements, vous verrez un numéro de version. Cela change en fonction des mises à jour de sécurité Andrew People Mais fondamentalement, pour l'instant, ce dont nous avons besoin est juste le plus récent, et vous avez deux options pour télécharger le fichier thème. Vous pourriez utiliser un goudron ou vous pourriez sortir la fermeture à glissière. En fait, nous ne allons pas télécharger physiquement tout ça sur notre machine. Au lieu de cela, ce que nous ferons est juste. Cliquez sur la guitare et allez vers le bas Teoh Copy Link adresse. Et puis, après que vous l'ayez fait, nous sauterons sur le menu des apparences. Vous pouvez voir tous les thèmes installés que nous avons en ce moment. Le thème d'administration est sept, qui est le thème par défaut. Allons de l'avant et changer que Teoh avait minime. Donc, nous allons cliquer sur ce bouton installer un nouveau thème, et au lieu de charger, installons à partir de votre URL. Alors rappelez-vous, nous copions cette adresse de lien et nous allons accélérer cela dans et nous allons cliquer installer. Facile à faire. Bon, alors allons aux pages d'administration, et notre travail ici n'est pas encore terminé. Vous pouvez voir que nous sommes toujours sur le thème par défaut. Donc, nous allons cliquer sur l'apparence, et ce que nous allons faire maintenant est de trouver au minimum sous l'option thèmes désinstallés et cliquez sur installer. Cool. Vous pouvez voir que cela a été fait ici avec cette fenêtre d'appel. Donc, avec l'installation, nous n'avons toujours pas fini. On a encore une chose à Dio. Nous ne allons pas le définir par défaut car cela définirait le thème du site, la page d'accueil et toutes les autres pages du site pour ajouter un minimum. Ce que nous voulons à la place est juste de nous assurer que c'est sur les fenêtres d'administration. Alors allons vers le bas thème de l'administration de Teoh ici en bas et nous allons cliquer. Ajouter un minimum. Assurez-vous également que vous avez utilisé le thème d'administration lors de la modification, contact ou de la création de vérifications de contenu. Sauvegardons cette configuration, et si tout va bien, vous devriez voir une fenêtre d'administration beaucoup améliorée. Alors, nous allons cliquer un peu autour d'ici. Excellent. Je pense que cela semble plus agréable que la valeur par défaut, alors allons de l'avant et cliquez sur ajouter des paramètres minimaux. Et juste pour porter ça à votre attention, nous ne changerons rien de tout cela, mais il y a certainement beaucoup d'options ici. Donc, avec l'ensemble de thèmes admin minimal, allons de l'avant et installons Bootstrapped quatre afin que nous puissions rendre ce look un peu plus moderne. Alors passons au travail de fille dribble et je vais ramener cela à nouveau afin que vous puissiez voir la barre oblique du projet d' URL bootstrapped quatre utilisaient ce thème de projet. J' ai eu du succès dans ce cours, donc je suis heureux de le recommander. Il y a un certain nombre de bootstrap quatre options et bootstrap trois options dans l'écosystème ALS droop que j'ai utilisé auparavant et que je peux certainement recommander est Barrio. C' est très bien si vous êtes intéressé par, hum, entrer dans SAS, qui est un langage de compilation frontal pour CSS. Malheureusement, c'est un peu trop avancé pour ce cours. Cependant, ce parcours pourrait être un bon tremplin dans quelque chose comme Barrio. Et en fait, si vous vouliez entrer dans SAS après avoir suivi ce cours, ce thème quatre bootstrapped a une option pour compiler SAS directement à partir de l'interface utilisateur, ce qui est vraiment sympa parce que vous n'avez pas besoin d'avoir un terminal pour ça, oui. Si je t'ai perdu sur ça, c'est bon. Si vous ne l'êtes pas, si vous êtes nouveau dans le côté technique du web, c'est bon. Si vous ne l'êtes pas, si vous êtes nouveau dans le côté technique du web, Hum, mais juste pour que tu saches, c'est une option ici. Bon, donc nous allons Teoh, utilisez la même méthode que celle que nous avons utilisée pour installer le thème d'ajout minimal. Et je veux porter ça à votre attention. C' est un projet qui n'est pas couvert par la politique de sécurité dribble. Cependant, ma règle de base avec ceci est comment Maney téléchargements a-t-il dans ce cas, il y a plus de 5000 téléchargements et combien de sites l'utilisent ? Presque 750. Donc pour moi, ça suffit. J' ai utilisé des modules qui ont beaucoup moins de sites et utilisent sans aucun problème. Une autre chose à examiner est les problèmes ici, euh, et comment ça se passe. Si le thème ou le module a une sorte de communauté active ici dans la section des problèmes, je suis généralement à l'aise de l'utiliser. C' est aussi une fenêtre très utile. Si vous vous trouvez dans une situation collante où vous n'êtes pas sûr de ce qui se passe sur le site, vous pouvez toujours aller sur le tableau des problèmes pour n'importe quel thème ou module et poser une question. Ok, donc avec tout ça, allons-y. Teoh les téléchargements et clics droit sur le fichier Tar, cliquez sur Copier l'adresse de lien et retour à chaud vers le pool Drew. Vous pouvez voir que nous avons toujours ce thème bardique, et dans une minute nous allons changer cela. Droop au bootstrap pour Excusez-moi. Donc, nous allons cliquer sur l'apparence et maintenant ce que nous allons faire est de cliquer installer nouveau thème et nous allons choisir installer à partir de Ural à nouveau. Nous allons coller et appuyer sur Installer. Très bien, très gentil. Cela a été fait pour revenir aux pages d'administration et à la page d'accueil. Et encore une fois, notre travail n'est pas fait. Nous sommes toujours sur le thème principal ici, alors revenons à l'apparence et cette fois ce que nous allons dio. Contrairement au thème publicitaire minimal, nous pouvons cliquer sur installer et définir par défaut, donc cela va non seulement installer le thème, mais il va également supprimer Bartek comme valeur par défaut et faire bootstrapped la valeur par défaut. Bon, donc si tout s'est bien passé, on peut aller sur la page d'accueil et on aura déjà un site Web très amélioré et on fera encore une chose avant de conclure cette vidéo, je préfère un bar plus léger. Donc, avec ce thème, il y a un moyen vraiment facile de le faire. Qu' est-ce que cliquez sur l'apparence et aller dans l'option de paramètres, Tout comme le thème admin minimal ed ? Il y a une tonne d'options différentes disponibles dans ce thème bootstrap quatre. Pour l'instant, nous allons juste aller chercher nos options. Et changeons sous notre thème. Changeons la lumière des orteils. Et nous allons changer le nab notre arrière-plan à la lumière ainsi et frapper la configuration de sauvegarde. Et si nous revenons à la page d'accueil, vous pouvez voir que ce changement a été fait. Et je préfère ça, je pense que ça a l'air sympa. J' espère donc que vous avez trouvé cela clair, concis et utile. Si oui, je vais certainement vous voir dans la prochaine vidéo où nous allons apprendre quelques méthodes pour installer des modules. On se voit alors 5. Installation de modules: Bonjour, tout le monde. Bienvenue dans cette vidéo, nous allons couvrir le système de modules dans Drew. Tirez pour notre site Web. Nous n'avons besoin que de quelques modules. Cependant, je vais couvrir les deux méthodes standard pour installer des modules dans Drew Pilate. Donc, si nous devions aller sur Google et taper les gens de Drew huit modules, vous obtiendrez ah, nombre de liens pointant vers Drew sorti Orig. Je recommande certainement Si vous êtes curieux d'approfondir la façon dont les modules fonctionnent en consultant ces liens ici, vous pouvez voir qu'il y a un guide d'installation. Je vais simplifier le système de modules pour vous afin que nous puissions commencer tout de suite. modules sont vraiment, pour moi, étroitement associés au magasin IOS APS d'Apple. Donc vous avez entendu la phrase. Il y a une application pour ça. Eh bien, Andrew Pool, il y a une phrase dans la communauté. Il y a un module pour ça, et c'est vrai là-bas. Je ne sais pas. Je pense que 400 000 modules, on peut vérifier ici. Le module sort. Excusez-moi, 44 000 mannequins. C' est encore un peu, mais vraiment, au cœur du système de module ALS, il y a deux pièces. C' est encore un peu, mais vraiment, mais vraiment, au cœur du système de module ALS, Un. Il y a des modules de base So Drew Paul Core. Nous pouvons regarder Drew Paul Core est le code que vous téléchargez lorsque vous décidez de construire un droop, un projet afin que vous puissiez voir ici nous sommes sur 8.8 point deux. Et si vous lisez à ce sujet, il y a des membres de la communauté au sein de l'organisation qui a activement maintenu Drew Paul Core. Très bien, donc il y a quelques pièces de base à tomber Aled que vous devez avoir pour faire fonctionner le système , et c'est tout simplement ce qu'est un module de base. Donc c'est le numéro un. Numéro deux. L' autre élément du système de module ALS Droop est des modules contributifs ou des modules contribués, et tout simplement ce que c'est un membre de la communauté qui ne fait pas partie de l'organisation ALS lâche dessiné pull dot org écrit un morceau de code qui étend le pool de dessin. C' est un simple un zit ISS tellement comme avec IOS App Store d'Apple, ils sont des développeurs. Utkan développe une application IOS. Il y a des développeurs tombants, et n'importe qui peut le faire parce que les ondulations d'une plate-forme open source, et cela ne coûte pas plus de 100$ pour rejoindre le programme. Toute personne ayant des compétences de codage peut apprendre comment c'est un module coda tombant. Beaucoup des modules contribués sont devenus des piliers de l'écosystème de droop 'll. Un, par exemple, voici C tools by Merlin of Chaos. C' est une sorte de légende. Ce module C Tools est une dépendance pour probablement des milliers de modules, donc c'est une sorte d'aperçu des deux différents types de modules. Une autre chose, au cas où vous êtes complètement nouveau, c'est que vous n'avez pas à télécharger les modules de base. Je voudrais juste être clair à ce sujet si je n'étais pas dans la première partie. Donc, si vous téléchargez Rupel, vous téléchargez les modules de base. Ce que vous devez télécharger sont les modules contributifs, tout module dont vous avez besoin pour étendre la fonctionnalité typique de dribble. Donc, si nous revenons sur notre site ici, nous allons jeter un oeil à ce panneau de modules et commencer à personnaliser votre site à un degré plus élevé. Donc, maintenant, sous l'option de menu étendre, vous pouvez voir tous les modules de base qui sont à la fois installés et activés. S' il est activé, il a une vérification bleue. S' il est installé mais pas activé, il apparaîtra, mais il n'y en aura pas, il ne sera pas vérifié. Donc, c'est vraiment le moteur qui fait que votre site Drew pulse fonctionne tellement comme nous avons installé les thèmes admin et bootstrap. On peut installer des modules de la même manière, alors regardons cette barre d'administration ici, n'est-ce pas ? Nous nous sommes un peu familiers avec cela dans la dernière vidéo, mais j'ai remarqué que lorsque je clique sur la structure, il y a une tonne d'options sous structure. droite et au fil du temps, si je passe en mode développeur, je clique à travers ces menus constamment en cliquant sur la structure, puis cliquez sur types de contenu, puis cliquez sur ajouter le type de contenu qui va devenir pénible éventuellement. Heureusement, il y a un module pour ça. Il existe un modèle qui facilite ce processus. Donc, par ici, Drew Bill. Nous avons la barre d'outils d'administration du projet slash de dribble dot org ici, et nous allons commencer par la méthode d'installation de base que je pense que la plupart des gens utilisent quand ils commencent à dribble pour la première fois. Mais je suis désolé de ne pas avoir expliqué que ce que la barre d'outils d'administration fait est d'exposer toutes ces options dont nous venons de parler dans un menu de survol. Donc, au lieu d'avoir à cliquer sur cliquez sur. Je peux survoler la structure, survoler les types de contenu, puis cliquer sur ajouter au lieu d'avoir à aller structure. Les types de contenu ajoutent le type de contenu avec la barre d'outils admin meurt est il expose que de sorte que vous n' avez à cliquer qu'une seule fois, donc c'est un énorme gain de temps. Donc, pour cette page, vous pouvez voir qu'il y a un certain nombre de façons d'installer le module installé comme n'importe quel autre module. Et on va revoir cette méthode après que je t'ai montré la méthode de base, parce que je pense qu'il est important de voir les deux côtés. Donc, tout comme nous avons installé les thèmes admin et bootstrap, nous allons utiliser un tar ici pour installer ce module. C' est vrai. Cliquez et copiez l'adresse du lien, en haut sur le pool Drew, puis cliquez sur, étendre, puis appuyez sur Installer le nouveau module et coller. Dans ce lien, nous venons de copier. Tout se passe bien. Il va revenir aux pages d'administration, et il y a une autre chose que nous devons faire ici, c'est que nous pourrions taper, ou nous pourrions simplement la chercher. Nous devons vérifier pour installer, donc vous voudrez également ces outils supplémentaires. Et une fois que vous avez coché tout pour aller au bas et cliquez sur installer. Ok, parfait. Et comme nous pouvons le voir ici, deux modules ont été activés. Et si nous survolons la structure, nous pouvons voir que nous venons de réduire trois clics à un. Donc c'est assez puissant. Donc c'était cool. C' est un moyen facile d'installer un module. Cependant, il y a un problème. Il y a un problème avec cela, et c'est cette idée de dépendances. Vous venez peut-être de m'entendre parler de cela il y a une seconde, donc la dépendance est simplement un morceau de code qui est nécessaire pour faire fonctionner un autre morceau de code . Donc, un autre module contributif qui aura besoin ici est le module automatique PATH. Donc, ce que Path Auto fait est qu'il prend un jeton dans ce cas, le titre et tout paramètre que vous configurez et remplace ce genre de chaîne cryptique, cet alias cryptique. Donc Path Auto est tout simplement des alias pour votre monde, accord, C'est une de ces choses que nous n'avons pas vraiment besoin de passer beaucoup de temps sur. Une fois que vous l'avez installé, c'est fait. Mais vous pouvez voir ici les exigences de Drew Pilate. Donc, pour le travail de l'orteil Path Auto. Vous devez avoir un jeton et voir les outils installés. Que se passe-t-il si nous descendons et que nous utilisons notre méthode ? Copions l'adresse du lien. Retourner à droop va cliquer installer le nouveau module rythmé, mais nous le copions juste. Hit Installer très cool dos. pages d'administration de Teoh s'étendent et nous allons trouver qu'il ne sera pas sous le noyau. Trouvons le chemin Auto Cool. On ne peut pas l'utiliser. On ne peut pas le vérifier sur la droite ? C' est parce que lorsque nous avons installé le module en utilisant cette méthode de base, il a littéralement seulement installé Path auto. Il n'a pas installé les autres dépendances. Rappelez-vous, C Tools et jeton, comme nous l'avons découvert sur cette page, sont nécessaires leurs dépendances. Donc, la façon de contourner cela est d'installer des modules en utilisant compositeur est un gestionnaire de paquets PHP . Vous n'avez pas besoin de connaître, vraiment, la théorie derrière le compositeur autre que c'est un logiciel qui fonctionne sur votre serveur qui vous permet de sortir et d'installer d'autres paquets ou modules. Donc, pour utiliser composer et pour installer des modules à partir de la ligne de commande, vous aurez besoin soit de votre environnement de développement local soit d'un serveur pour ssh. Ce n'est pas un cours sur la ligne de commande. Ce n'est pas non plus un cours sur les environnements de développement, mais je veux vous fournir Away. Teoh, montez sur votre serveur en utilisant la ligne de commande si vous utilisez le terrain du site ou un autre service d'hébergement partagé . Donc, avec le terrain du site, il y a une section développeur dans la section Outils du site. Afin d'accéder au serveur sur lequel vous êtes Drew pulsate a hébergé. Vous devrez configurer les clés ssh. Et pour ce faire, vous devrez passer à la fenêtre de votre terminal. Donc, dans une vidéo précédente, j'ai recommandé hyper terminal, qui est ce que vous voyez ici. Donc, pour générer votre clé ssh, vous devez taper. Vous devez exécuter une commande, et c'est juste quelque chose que vous devez faire une fois. Donc, si nous faisons cat ssh, je souligne R s un point pub. Vous pouvez mettre en pause la vidéo et copier que si vous suivez ici, je ne vais pas appuyer sur Entrée parce que c'est une chose de sécurité. Mais fondamentalement, si vous appuyez sur Entrée, vous obtiendrez cette grande chaîne, qui est une clé, et vous nommerez la clé. Donc sous importation, vous allez que je travaille sur un I, Mac. Donc, je nommerais ce Mac, et puis ce qui est généré ici ? Vous allez copier cela, le tout et le rythme ici et cliquez sur Importer. C' est comme ça que c'est la première étape. Donc, vous devez d'abord établir des clés ssh. Si vous utilisez cette méthode après avoir importé vos clés ssh, le site vous donnera vos informations d'identification ssh et vous ne pouvez pas les voir ici. Mais c'est l'information dont vous avez besoin pour accéder à votre serveur. Donc je sais que c'était beaucoup que j'ai perdu certains d'entre vous. N' hésitez pas à ignorer cette partie de la vidéo si vous avez déjà configuré votre ligne de commande ou si cette méthode ne vous intéresse pas. Donc, avec vos clés SSH ajoutées et vos identifiants SSH configurés dans l'ordre, Teoh, entrez dans votre serveur ou votre boîte. Ce que vous devrez faire est d'exécuter cette commande Ssh ! Nom d'utilisateur au nom d'hôte Dash P, qui signifie port, puis vous êtes un numéro de port. Cool. Maintenant que nous en sommes, nous pouvons vérifier les fichiers et tout ce qui se trouve sur le serveur. Donc, une commande que vous aurez juste à apprendre est LS Dash L. A, qui répertorie tout sur votre serveur. L' autre est CD, ce qui signifie changement de répertoire. Donc, je vais entrer dans l'endroit où le site est réellement hébergé sur le serveur et continuons ici html public parfait. Et voici le site Droop Will une fois que nous sommes dans le répertoire dribble. Je sais que c'était un long processus pour arriver ici, nous pouvons démarrer Teoh, installer ces modules. Donc, ce compositeur fournira que l'autre méthode n'a pas été qu'il installera non seulement le module que vous cherchez à installer, mais il sortira également et trouvera toutes les dépendances nécessaires et installera cela aussi. Donc, pour illustrer à quel point c'est utile. Si nous devions revenir à cet exemple automatique de chemin, ce que nous aurions à faire est de nous rappeler que nous avons cliqué droit sur l'adresse de lien de copie tar et l' avons installé de cette façon. Droit ? Donc, ce que nous aurions à faire est ensuite aller à jeton, clic droit sur la guitare haute, copier cette adresse de lien et installer, et nous devrions revenir en arrière alors nous devrions trouver C outils clic droit tar copie, adresse de lien et installez. Mais avec le compositeur, ce que nous venons littéralement, c'est taper cette commande. Donc,cette Donc, section de l'euro est comment vous accédez au module. Ainsi, chaque module de contribution sera situé à la barre oblique du projet quel que soit le nom. D' accord. Donc je vais copier Path auto ici et revenir à chaud sur le type de terminal dans le compositeur nécessite gens dessinés slash quel que soit ce nom et appuyez sur Entrée. Cela prendra une seconde, surtout si vous êtes sur l'hébergement partagé. Et vous pouvez voir ce que font les compositeurs, c'est qu'il va sortir de dribble dot org C'est obtenir les dépendances. Il s'assure que tout sur les serveurs. Droit. Et puis finalement, il ira et téléchargera le manteau afin que vous puissiez voir, apparaître téléchargé, jetons et voir les outils. Parfait. Et quand ça a cessé de courir, on devrait pouvoir revenir pour tomber. Tout va dans notre section module, étendre Ah, recharger. Et si on descend Teoh path auto, c'est là. Tu vois, maintenant on peut le vérifier. Donc, si nous devions juste vérifier cela et cliquer sur installer, ce qui se passe, je crois, c'est Droop Will dit, Hey, vous devez dans les outils et jeton de stalk C. Voulez-vous que nous fassions ça pour vous ? Bien sûr. Merci. Et là, vous pouvez voir trois modules ont été activés. Donc il y a le chaos. Outils installés et activés. Très bien, c'est ainsi que nous installons des modules. Ce que nous devons faire ensuite est juste pour ce tutoriel. Assurez-vous que nous avons les deux autres modules installés dont nous avons besoin. Nous n'avons pas besoin d'une ville de modules, ce qui est génial. Donc, je vais vous montrer une autre astuce du métier, et c'est une façon de chaîner les modules d'installation. Donc, si nous faisons compositeur exiger véridique le nom de ce prochain module dont nous avons besoin, qui est juste se trouve être bootstraps, simple cellule de soins. Et puis nous pouvons enchaîner cela de sorte que nous installons autant de modules dont nous avons besoin en même temps. Donc essentiellement, ce que nous faisons ici est de dire Ok, nous savons quels modules nous avons besoin pour ce projet. Installez-le tout de suite. Sortez du chemin, et on n'aura plus à faire ça. Droit ? Nous allons donc installer ce simple carrousel, qui sera dans une autre vidéo, et nous allons également installer un filtre de module, ce qui nous permet d'avoir un peu mieux un aperçu de nos modules. Alors faisons-le bien. Et ce qui se passe, c'est que vous pouvez voir ici qu'il va sortir et chercher ces deux modules et faire exactement le même processus que nous venons de traverser. Il insultera toutes les dépendances requises pour ce bootstrap, simple carrousel ainsi que ce filtre de module. Et si on retourne ici, rafraîchissez-vous. Vérifions le filtre du module. Et vérifions aussi. Euh, nous allons taper les soins simples bootstrap, alors assurez-vous que c'est vérifié et installez l'école. Ils n'avaient aucune dépendance. Et maintenant, vous pouvez voir ici. Nous avons nettoyé cette fenêtre de module avec le module de filtre de module, et cela nous aide juste à mieux organiser. Donc, si nous cherchons un module que nous avons, mais disons que nous n'en voulons plus, nous pouvons juste commencer à filtrer cela. Très bien, merci beaucoup de rester avec moi pendant cette vidéo. C' est juste une de ces choses en train de tomber. Tout ce que nous avons à mettre en place une fois et ensuite nous sommes bons, donc j'espère que vous avez une meilleure compréhension du fonctionnement du système de modules et que vous comprenez les deux méthodes que j'ai fournies pour l'installation. Merci. Et je te verrai dans la prochaine vidéo. 6. Créer les pages de contenu: avec la partie la plus compliquée de ce cours hors du chemin, nous pouvons enfin commencer à construire le café végétalien d'Elaine. Dans cette vidéo, nous allons passer brièvement en revue le système de type de contenu dans Drew pool, et nous allons utiliser le type de contenu de page pour construire les quatre pages de base. Alors passons à la barre d'administration et passons de la souris sur le contenu. Vous pouvez voir que dans droop permettre. Vous avez ici la possibilité d'ajouter deux types de contenu différents. Un article et une page de base. Ces deux options sont des types de contenu. Les types de constantes peuvent être trouvés sous les types de contenu de structure. Cliquons sur ça. Vous pouvez voir une description ici pour les deux types de contenu qui ont été retirés par l'expédition. Les personnes que vous pouvez voir ici, il est dit que les pages de base sont utilisées pour le contenu Sadiq, comme une page sur les États-Unis, et un article serait utilisé pour quelque chose comme une page de nouvelles ou un communiqué de presse. Pour le moment, nous allons juste Teoh faire du contenu à partir du type de contenu de la page de base. Cependant, il y aura une autre vidéo dans ce cours où nous créons réellement un type de contenu personnalisé. Donc, si nous cliquons simplement sur le bouton de contenu, vous obtenez un aperçu de tout le contenu qui se trouve sur le site Web. Puisque nous n'avons pas de contenu, ce n'est évidemment pas de contenu disponible, Alors continuons et créons notre première page de base. Nous pouvons le faire de deux façons, mais l'une d'entre elles est en allant à la page de contenu réelle sur laquelle nous sommes en cliquant sur ce bouton Ajouter du contenu. Une autre façon est d'utiliser la barre d'administration, qui étaient familiers avec À ce stade, je préfère le faire de cette façon pour passer sur le contenu, survoler, survoler, ajouter du contenu et la page de base. À partir de là, nous sommes présentés avec deux champs que nous pouvons utiliser pour construire des pages Web de base. Ce sont des pages statiques, ce qui signifie que la seule chose qui est contenue dans la page est le texte ou les images, même la vidéo, tout ce qui pourrait être incorporé dans une page Web de base. Alors faisons en sorte que la première page soit contactez-nous, et on va juste laisser le corps de la page vide pour l'instant. Parfait. Donc, une chose que si vous suivez le long, vous avez peut-être remarqué, est que cette page de contact US se trouve à la barre oblique de noeud un. Eh bien, ce que nous voulons dio pour les moteurs de recherche pour S PDG est de faire que ce soit nous contacter comme ça. Donc, en ce moment, il dit une page introuvable parce que nous n'avons pas configuré chemin auto, Nous n'avons pas configuré d'alias maintenant. Path Auto, si vous vous souvenez de la dernière vidéo, est un module que nous avons installé. Alors allons de l'avant et configurons cela avant de commencer à faire le reste de ces pages de base. Donc, sous configuration, passons à la recherche et aux métadonnées, puis sélectionnez u R L alias à partir d'ici. Allons sur le lien du menu des modèles, et définissons un modèle que nous voulons que toutes nos pages de base suivent. Alors on va le faire. Ajouter un motif automatique de chemin et pour le type de motif sélectionnera le contenu. Et pour ce champ, parcouvrons. Les jetons disponibles allaient utiliser le système de jetons ALS, ce qui nous permet de rendre notre site un peu plus dynamique. Donc, sous les jetons disponibles, allons à Node, puis sous ici, nous n'avons qu'à configurer cela qu'une seule fois, d'ailleurs, donc ce n'est peut-être pas aussi compliqué qu'il y paraît sous ici. Sélectionnez le titre du noeud Et ce que c'est si vous vous souvenez de quand nous avons créé cette page de contact , il y avait un titre de page. Eh bien, lorsque vous ajoutez du contenu à l'aide de n'importe quel type de contenu, le contenu que vous venez de créer s'appelle une note. Donc, ce que cela dit est pour le nœud actuel, qui, si nous utilisons le même exemple, serait la page de contact. Ce serait la note. Le titre de ce noeud serait nous contacter. J' espère que ça a du sens. Et c'est vraiment tout ce dont nous avons besoin. Donc, ce que nous disons ici est au lieu de faire le chemin du numéro de nœud barre oblique euro b , faisons de l'oral B le titre. Ok, donc nous allons sélectionner la page de base et nous allons juste nommer la page. Parfait. Ok, Maintenant, si vous revenez au contenu et récupérez ce contact, vous verrez ici que cet alias n'a pas encore été changé. Donc, ce qui devra faire est de revenir au contenu, sélectionnez ceci dans le tableau et sous actions. Mettons à jour votre alias URL et appliqué aux éléments sélectionnés. D' accord. Et vous pouvez voir ici un alias a été appliqué. Descendez nous contacter et il n'est pas là. Donc ce qu'il nous faut, c'est de vider l'argent. Donc maintenant, si nous revenons au contenu et puis sélectionnez nous contacter, vous pouvez voir que cet alias l'euro est maintenant défini sur le être le titre de la page. Parfait. Alors allons de l'avant et construisons la page à propos de nous. Alors passons au contenu. Ajouter du contenu. Page de base, et nous allons faire le titre de cette page sur. Et si vous regardez les notes d'affichage, j'ai un dossier ZIP qui a tout le contenu du site de test. Si vous voulez suivre le long morceau par morceau, donc je vais juste aller de l'avant et coller et le contenu k grand. Sauvegardons ça et nous allons sur les pages là-bas. Et si on voulait ajouter une image à cette page ? Allons-y et nous allons juste faire un saut de ligne là-bas. Et dans cet éditeur de perruque Wiz e, nous avons une option pour ajouter une image. Donc, nous allons cliquer sur cela, et à partir d'ici nous pouvons choisir un fichier de notre machine locale et nous allons faire tous les textes gens manger à la table à manger et enregistrer ce parfait. Donc maintenant ce que nous pouvons faire ici est de double-cliquer une fois de plus et de l'ajuster Donc c'était une ligne vers la droite. Parfait. Et gardons ça et voyons à quoi ça ressemble. Et laissez-moi l'ajouter encore une fois. Je dois jouer avec ça. Je suis désolé. Eh bien, laissez-moi le mettre à côté de ça. Et on y va. Ok, maintenant voyons si ça a l'air un peu mieux. Ça marchera. Pas un travail pour l'instant. Ok, donc il y a la page à propos. Donc, nous avons fait la page de contact. Nous avons fait la page à propos. Maintenant, créons le menu. Donc, une fois de plus, page de base du contenu et appelons ce menu. Et vraiment ce que j'ai ici une fois est de créer une table d'éléments de menu, mais il n'y a vraiment pas d'option pour nous. Teoh créer un tableau ici, donc ce que nous pouvons faire est de descendre à ce format de texte, sélectionner l'option, et cliquez dessus et sélectionnez HTML complet. Ce que cela va faire est d'ouvrir quelques options supplémentaires ici pour nous à utiliser et l'une d' entre elles est juste cette table. Donc, avant de créer la table, ajoutons quelques en-têtes. Quel est le type de nourriture pour la première position. Et mettons-le en évidence et faisons-en un H 2. Vous pouvez sélectionner des formats à partir de cette option dans la perruque Wheezy. Ok, et disons une autre pause et tapons des boissons. Sélectionnez cela et faites-en un âge pour parfaire. Maintenant, entre la nourriture et les boissons. Faisons le tableau, alors assurez-vous que votre curseur se trouve entre chaque titre et sélectionnez l'option de tableau. Nous allons faire une table à cinq lignes avec trois en-têtes de colonnes sur la première ligne. On va assommer la taille de la bordure, et on va enlever la largeur et faire la nourriture sommaire et frapper OK, maintenant on va le déposer. Un de plus sous les verres et faisons exactement la même chose. Faisons cinq lignes, trois colonnes, trois colonnes, en-têtes sur la première rangée et abattons la taille de la bordure vers le bas, pas le fouet vers le bas. Et faisons ce résumé des boissons. J' ai donc tout le contenu dont vous aurez besoin pour remplir ces tableaux dans les notes de spectacle . En fait, passons simplement par les en-têtes First fera l'article, la description et le coût pour les en-têtes. Et puis nous allons répéter cela ici, description de l'article et le coût. Et allons-y et faisons-en un ensemble. Faisons la nuit Chai Oatmeal chaise. Qui veut de la farine d'avoine et faisons la description juste allongeons ça . Et le coût est de 5$ sur le repas Oh, le repas. Ah, nous allons audacieux ceci à des fins de style et nous allons en italique et nous avons fini. Ok, donc je vais aller de l'avant et remplir le reste en utilisant le contenu fourni, et ensuite je vous rejoins, et je ferai la même chose pour les boissons. D' accord, j'ai tout le contenu ajouté, et juste pour un exemple, nous avons copié la table de nourriture sous les boissons juste pour des raisons stylistiques. Alors sauvegardons ça et que se passe-t-il ? Notre table ne ressemble pas vraiment à une table. n'y a pas de style disponible ici, et nous ne voudrions certainement pas que cela représente notre menu si nous construisions un site moderne pour quelqu'un. Eh bien, la raison pour laquelle c'est comme ceci est parce que nous avons Bootstrapped quatre installé comme thème, mais nous n'avons pas ajouté de classes de bootstrap classes CSS pour que cela ressemble à bootstrap pour rendre meilleur. Donc on va aller de l'avant et voir comment on peut faire ça. Alors allons juste à Google ici et tapez bootstrap pour et vous serez présenté avec cette page d' introduction. Donc bootstrap est l'un de mes préférés, sinon mon front préféré et les frameworks. Cela rend cette tâche de construire un site Web moderne beaucoup plus facile. Et la bonne nouvelle, c'est que nous n'avons pas à faire tout ce truc d'introduction parce qu'il est déjà installé depuis que nous avons installé notre thème Bootstrap quatre. Donc, ce que nous pouvons dio, c'est aller au contenu. Voyons les options des tables, et vous pouvez voir ici tout de suite. Hum, il y a quelques exemples de la façon dont les tables dans bootstrap pour notre bien style, il semble que tout ce que nous devons faire est d'ajouter la table de classe. Si on veut que Teoh nettoie notre table. Donc, copions littéralement que c'est le premier exemple. Et non seulement ils vous montrent à quoi ressemble l'exemple, mais ils vous fournissent le code brut en dessous. Donc si nous copions cette classe de table et retournons chez Elaine. Cliquons dessus. Et ce qu'on va faire ici, c'est se salir les mains un peu. Regardez sous le capot et cliquez sur la source. Il s'agit du code HTML qui est représenté dans votre contenu au fur et à mesure que vous le construisez. C' était le bloc de perruques. Donc, ce que nous pouvons faire ici est juste de voir cette balise html de table et littéralement avant ce que nous pouvons faire est juste avant le signe plus grand que. Nous pouvons simplement coller dans cette classe que nous avons copiée et faisons défiler ce code jusqu'à ce que nous trouvions l'autre option. Et nous allons aussi coller la table là pendant que nous sommes ici. Faisons les boissons sommaires et décochons simplement la source Perfect. Maintenant ce qu'on peut faire, c'est descendre et frapper sauver, et on y va. Vous pouvez voir que nous avons une table réelle maintenant, mais il y a une autre chose que j'aimerais faire. Je voudrais ajouter une bordure ici pour juste aider à séparer visuellement le menu. Alors revenons sur Teoh Bootstrap, et faisons simplement défiler vers le bas. Tu pourrais le faire. Ah, le thème sombre, si vous voulez et faisons défiler jusqu'à ce qu'on trouve des tables. Rangée de table , désolé, sa frontière. D' accord. Et voici l'option pour la table bordé. Choisissons ça et revenons à Andrew d'Elaine. Les gens frappent, modifient et sous la source. Prenons la bordure de table que nous venons de copier et de la coller dans la classe. Donc on va s'attaquer à une classe supplémentaire dans cette déclaration ici. Et puis sauvegardons ça. Et voilà, accord, et il y a une autre page que nous allons construire pour cette vidéo. Allons de l'avant et construisons la page des recettes afin que nous puissions aller de l'avant une fois de plus sous contenu, ajouter du contenu et la page de base. Tu seras un expert en la matière quand on aura fini. Faisons juste le titre de ces recettes, et nous allons en fait laisser ce vide pour l'instant, et nous allons remplir cette page de recettes et la rendre dynamique dans une autre vidéo. Donc, cela conclut cette vidéo sur la réalisation des pages de contenu de base. Dans la vidéo suivante, nous allons passer en revue la structure du menu et dessiner des gens. Nous allons ajouter toutes ces pages que nous venons de créer au menu, et nous allons supprimer cette option de recherche parce que nous n'en avons pas besoin pour ce projet. 7. Créer le menu de navigation et la signification des blocs: Bonjour, tout le monde. Bienvenue dans cette vidéo, nous allons nous baser sur le travail que nous avons fait dans la vidéo précédente lorsque nous avons compilé les pages statiques de notre site. Nous allons maintenant ajouter ces pages à droop système de menu ALS et commencer à construire la navigation réelle ici. Donc, Andrew Pool, nous avons quelques options pour définir nos menus. Nous pouvons, en fait, juste de n'importe où sur le site où il y a le menu, nous pouvons en fait simplement cliquer sur ce menu. Ils utilisent cette petite pointe de crayon. Mais pour les besoins de cette vidéo, je pense, Eh bien, en fait, descendez juste à l'option des menus. Donc, si vous survolez la structure et cliquez sur les menus ici, vous verrez une liste de tous les menus du site, et cela inclut les menus administratifs aussi. Donc, ici et ici. Donc, non seulement et le menu du compte d'utilisateur. Donc, dans droop sera, non seulement vous pouvez personnaliser le menu face avant le menu avec lequel vos utilisateurs vont interagir , mais vous pouvez également créer une expérience d'administration personnalisée ici en éditant les menus d'administration . Mais pour cette vidéo, nous allons nous en tenir à la navigation principale et Comme vous pouvez le voir ici dans cette description, voici les liens de section du site. Alors allons de l'avant et cliquez sur ce menu. Et c'est exactement ce que nous devrions nous attendre à voir. n'y a qu'un seul lien de menu, et si nous ouvrons un nouvel onglet ici et consultez cette page d'accueil, vous pouvez voir que nous avons ce HomeLink. Alors maintenant, allons de l'avant et ajoutons tous les liens que nous avons faits jusqu'à présent. Le premier lien qui va ajouter est ce lien de menu et pour le champ Lien. Depuis que nous avons déjà créé les pages, affaiblir littéralement, suffit de rechercher le menu et sélectionnez-le. Et disons ça. Revenons à la navigation principale et c'est à un autre lien. Cette fois, nous allons ajouter des recettes et le trouver dans la liste. Sauvez-le. Répétez le processus. Et, comme à un autre lien, temps fera de l'enregistrer, puis à ce menu et un autre lien. C' est le contact et la sécurité. D' accord, et nous allons juste nous assurer que tout est bien situé. Je voudrais avoir le menu à la maison venir en premier, suivi par les recettes de menu et de contact que nous allons afin que vous puissiez voir comment je l'ai fait Il. C' est juste une simple goutte de dragon. Ensuite, sauvegardons cet ordre de lien. Consultez la page d'accueil et voyez ce que nous avons fait ici. D' accord, cool. Donc, c'est déjà mieux, et vous pouvez voir que vous pouvez cliquer à travers les pages et il semble assez bon jusqu'à présent. Ce sont donc les seuls liens que la navigation principale contiendra pour ce projet. Cependant, ce que nous allons passer ensuite est le système de bloc Drew Pols. Donc, pour ce site, il n'est pas nécessaire d'avoir cette recherche et les options de mon compte ici. Donc on va voir comment on peut se débarrasser de ça dans les ennuis. Le cas d'utilisation principal pour les blocs serait des éléments de site réutilisables. Donc, par exemple, ce bloc de recherche ici nous pourrions prendre ceci et le dupliquer et le mettre dans le pied de page. Et c'est vraiment le but des blocs. Jetons un coup d'oeil aux options de bloc réelles sous la structure, donc sous la structure, juste passer la souris sur la mise en page de bloc et cliquez ici, nous pouvons pour la première fois dans ce cours, voir la fonctionnalité de la région. Les gens d'Andrew vont aller plus loin quand nous commencerons à thème le site, mais fondamentalement ce thème est divisé en différentes régions où nous pouvons placer des blocs. Nous pouvons voir ici dans la région de navigation supplémentaire que le menu du compte d'utilisateur ainsi que le formulaire de recherche sont placés dans cette région. Donc, puisque nous ne voulons pas de ceux dans la navigation, nous allons simplement le désactiver. Donc, si nous allons ici à côté de configurer, cliquez sur la flèche et sélectionnez cette capacité, vous pouvez voir les paramètres de bloc ont été mis à jour et nous allons descendre le menu de compte d'utilisateur Teoh ainsi et désactiver ce parfait. Maintenant, gardons ça et rentrons à la maison. Et maintenant, il est parti. Maintenant, dans une autre vidéo, nous allons aligner ce menu vers la droite afin que nous n'ayons pas autant d'espace vide ici. Mais pour l'instant, je pense que c'est exactement ce dont nous avons besoin. Il y a un bloc de plus que nous allons désactiver, cependant, pour ce cours, nous ne voulons pas la chapelure, alors allons de l'avant et désactivé cela aussi. Sous la disposition des blocs, passons à la chapelure ici et désactivez Perfect. Ok, ça conclut cette vidéo d'introduction sur le système de menu et bloc et Rupel. Nous vous verrons dans la prochaine vidéo, où nous commencerons à écrire du code CSS et à construire le type de logo d'Elaine. 8. CSS, logo, typographie: Bonjour, tout le monde. Bienvenue dans cette vidéo. Je suis très excité d'entrer dans celui-ci. Nous allons faire ma partie préférée de la conception pour le Web, et c'est la typographie. Donc, dans cette vidéo, nous allons ajouter nos deux polices de caractères de Google. Les polices vont entrer dans le fichier CSS et définir la typographie de base pour le site, et je vais vous montrer comment ajouter le logo qui a été fourni dans les fichiers de cours. Alors, allons y entrer. D' accord. Alors passons à Google ici et tapons les polices Google. Google a donc fait un travail incroyable en apportant la typographie sur le Web. Ce service est entièrement gratuit et offre un certain nombre d'options pour inclure des polices modernes dans un site Web. Les deux polices qui seront utilisés pour ce cours sont mieux no s et Monta Sarit. Alors passons mois à Sarah utilisera ceci comme notre principale typographie de base pour le site, et vous pouvez voir que c'est une très belle police sans serif. Donc, pour ce faire, passons en haut à droite de cette page et sélectionnez simplement Sélectionner cette police et vous pouvez voir ici qu'elle a été ajoutée. Et revenons aux polices Google et ajoutons notre Bevis. Non, comme encore, une très belle police San Serif utilisera ceci pour le type de logo. Alors sélectionnons celui-ci. Et maintenant vous pouvez voir ici nous avons les deux polices sélectionnées et Google vous donne deux options pour importer les polices. Plutôt cool. nous avons Cependant, encore une chose à Dio. Sélectionnez personnaliser. Et pour Monta Sarah, c'est semi audacieux et audacieux. Cela affectera le temps de chargement de votre site car nous n'ajoutons que quelques options ici. Et parce que notre site est relativement petit, il le fera. Il ne devrait pas nous empêcher d'ajouter ces deux polices Perfect. Alors revenons à et mauvais ici. Et gardons ça ici pour l'instant et passons au code V. Donc, dans une vidéo précédente, très bien vous a montré comment télécharger le code V s. Donc, si vous suivez, allez-y et passez au code V s et en utilisant l'extension sftp pour le code Bs, nous allons verrouiller le serveur. J' ai déjà configuré mes identifiants et passons aux thèmes. Vous pouvez taper ceci dans ou descendre dans certains thèmes. Et allons à Bootstrap. D' accord ? Et nous sommes maintenant dans le thème bootstrap. Et pour ce cours, nous allons simplement travailler dans le fichier CSS point de style, qui se trouve si nous revenons dans le répertoire Thèmes, il se trouve dans le répertoire CSS sous Styled at CSS. Maintenant, la meilleure pratique serait de décomposer le travail que nous faisons ici sur son fichier CSS séparé . Mais nous ne ferons que quelques changements au C S. Donc, pour les besoins de ce cours, il est complètement beau travail orteil dans ce style par défaut ce fichier CSS. Alors revenons à Google. Et la première étape qui devra faire pour importer ces nouvelles familles de polices est de sélectionner réellement lors de l'importation. Et vous pouvez ignorer le style des balises de style ici et simplement copier tout sous les balises de style ou dans les balises de style. Donc, copions cela et revenons au code Visual Studio, faites quelques sauts de ligne ici et en haut avant l'itinéraire. Assurez-vous que nous importons nos nouvelles polices à partir de Ghoul que vous appuyez sur enregistrer. Et si vous avez configuré le code V s avec l'extension sftp, vous aurez le téléchargement lors de la sauvegarde. Donc, si vous remarquez dans le coin inférieur gauche ici si j'appuie sur Enregistrer, c'est en fait télécharger des fichiers sur le serveur. Donc c'est assez puissant, accord, et nous pouvons tester que notre importation fonctionne. Si nous faisons défiler vers le bas et définissons les titres à leurs nouveaux styles, nous allons faire toutes les rubriques Monta Sterett. Mais nous allons les auditer, et nous allons définir tous les styles de paragraphe à Montazeri également. Mais nous ne les garderons pas audacieux. Je vais vous montrer comment on va faire ça. Revenons donc à Google et trouvons notre déclaration de famille de polices ici. Et copions la Monta Sarah. C' est un. Je suis désolé si je ne dis pas ce droit d'aller à une nouvelle ligne et simplement coller cela maintenant. Puisque nous faisons aussi des en-têtes, ajoutons du poids avant et faisons 600 et économisons cela. Il devrait être téléchargé. Il fait chaud ici et rafraîchir Eh bien, rien n'a changé, et la raison de Cela est parce que dans Drew Pool, quand nous faisons des changements au style que CSS ou à un fichier modèle, nous devons vider l'argent. Donc, la façon la plus simple de le faire si vous ne travaillez pas à partir de la ligne de commande, est de simplement survoler la descente. Icône et cliquez sur vider toutes les captures. Donc, si tout se passe bien, notre cap devrait être fixé deux mois. Sarah. On y va. Très bien. Donc notre importation a fonctionné. Et si on saute un peu sur le côté, on peut voir que ceux-ci ont aussi changé. Et ce que nous allons faire ensuite est également de définir le style de police du site entier. Deux. Monta Sarah. C' est donc allons-y. Mais faites défiler un peu vers le haut. On a commencé avec H 1. Défilons vers le haut et allons à corps la déclaration du corps ici. Et faisons juste une nouvelle ligne. Et allons coller dans cet air de monstre. Sa déclaration une fois de plus. Appuyez sur sauver, et puis revenons en arrière et chasse l'argent. Parfait. Donc maintenant vous pouvez voir ces menus ont été mis à jour et je pense que la typographie est déjà mieux, et j'ai remarqué sur cette page que la nourriture et les boissons ne sont pas pliées à 600 pieds. Attendez. Je pourrais juste dire ici que ce n'est pas ce que nous avons sélectionné ici et les polices Google de nous, vous savez ? Regardez la page de Monta. Sara, On peut voir que A 600. Excusez-moi. Un 600 est en fait beaucoup de frontière que ce que c'est. Ok, donc si nous revenons au code V et si vous vous souvenez, je mets les titres. Où sommes-nous ? Écoutez les en-têtes de la police Attendre 600. Mais si j'inspecte cet élément ici, vous pouvez voir que notre déclaration de poids de police 600 est en fait remplacée par une déclaration qui a été faite plus tard dans le fichier CSS. Donc, par exemple, si nous devions juste décocher cette police Attendre, nous pouvons le voir. Maintenant, on est à 600. Alors allons-y et nettoyons cette houle. Il fait chaud retour au code V. Et ce que je vais réellement dio j'ai déjà copié, c'est la recherche de poids de police. 500. Et allons de l'avant et commentons ça. Vous pouvez le faire sur un Mac en utilisant le code Vs. Assurez-vous que vous êtes sur le à la fin de la ligne et faites la barre oblique avant de la commande et cela va le commenter. Sauvons ça. Retournez sur le site. Et si tout fonctionne, cela devrait toujours être audacieux. Id parfait. Alors faisons juste, ah, ah, rafraîchir le site. Et maintenant, nos titres sont Bolden. Donc c'est génial. Ok, donc nous avons fait le premier pas vers le nettoyage de la typographie de notre site. Nous avons défini les styles de base à l'aide de notre feuille de style CSS. Commençons maintenant à construire ce type de logo. D' accord, Donc d'abord, supprimons l'icône bootstrap. Pour ce faire, nous allons passer en apparence et cliquer sur apparence. Allons à la crème d'amorçage et sélectionnez les paramètres sous Paramètres. Décochons utiliser le logo fourni par thème, et téléchargeons l'image du logo qui a été inclus dans les fichiers du site avec ce cours. Et allons-y. Une fois que nous avons ajouté, Allons vers le bas et cliquez sur enregistrer la configuration et nous allons vider l'argent pour de bonnes mesures. Parfait. Rentrons à la maison et nous pouvons voir que notre logo a été changé. Mais c'est trop grand. Bon, alors comment pouvons-nous réparer ça ? Eh bien, une chose que I Dio est beaucoup de conception dans le navigateur. J' écris CSS depuis longtemps, donc cela me vient naturel. Mais c'est une compétence que tout le monde peut apprendre, et c'est une compétence qui est incroyablement puissante Si vous entrez dans un design Web, en particulier la conception Web basée sur Drew Peled, parce que la marque frontale dans Drew pool est tellement groupée honnêtement, si souvent, vous devez réellement creuser à partir de la fenêtre Inspecter. Donc, nous allons juste comprendre comment réparer cela. Bon, cliquez sur Inspecter, et nous avons nos outils de développement ici. On s'est familiarisés avec ça il y a une minute, et on peut voir ici qu'il est en fait posé et normalement pas. Mais posons-le ici pour que nous puissions voir que la taille de l'image est réglée à 100%, mais nous aimerions que cela soit plus petit. Alors faisons la largeur 35 pixels et ça a l'air assez bon, non ? C' est ce qu'on veut arriver. Donc, je vais vous montrer comment nous pouvons rapidement ajouter cela à notre style, que CSS Copions cette déclaration dans les outils de développement, et c'est copier cela et passer au code V S. Maintenant, ce que nous allons faire ici est de faire défiler tout le chemin vers le bas, et nous allons commencer à construire nos styles de site personnalisés. Donc, faisons simplement ce qu'on appelle des styles personnalisés et juste pour le style dans le document réel . Faisons-le comme ça. Si quelqu'un d'autre prend le contrôle du site, il sait où aller. Ce sont donc des styles personnalisés. Et allongeons cela dans le support d'accolade ouvert et fermez le support bouclé. Et ce que nous allons dio est de définir la largeur à 35 pixels, comme nous l'avons fait dans les outils de développement. Et ce que j'aimerais aussi faire est d'ajouter une section dans notre document ici appelée Logo, car nous allons apporter des modifications supplémentaires. Donc maintenant, nous savons où se trouve le logo, et faisons juste quelques pauses, économisez ça et revenez au chrome, rincez l'argent. Parfait. Donc maintenant vous pouvez voir si nous étions nouveau logo a été mis à jour, et cela semble beaucoup mieux maintenant si nous restons dans les outils de développement ici, nous voulons que Teoh corrige cette typographie ici, et nous voulons faire nous voulons transformer cela en un type de logo, Alors faisons cela en commençant par les outils de développement. Et restons là où nous sommes ici. Cliquez sur le nom du site de classe d'étendue. C' est là que tout est mis en place pour que nous puissions faire le style des éléments ici. Ou nous pourrions simplement cliquer sur l'option plus pour ajouter une nouvelle règle. Et vous pouvez voir que le chrome est ajouté. Notre déclaration pour nous. Donc, ceci est span la balise HTML Span et la classe CSS qui a été appliquée Nom du site. Vous pouvez voir ça ici. Changeons cela pour revenir aux polices Google et les checkouts. Comment ajouter cette famille Bevis Nu EZ Font ? Copions. C' était chaud retour ici et coller ça dans Donc vous pouvez voir que ça a l'air vraiment génial. Bevis New s est une grande typographie pour les types de logo, mais il est en fait un peu trop petit. Pourtant, je pense que je voudrais Teoh un peu, Alors commençons juste à commencer un peu de style ici dans le navigateur. Donc je vais faire cette taille de police à Ram. Il est préférable d'utiliser Ram, et puis je pense que j'aime cette taille, mais ce n'est pas au centre verticalement. Donc, en fait, faisons juste marge haut. Faisons deux pixels juste pour voir comment c'est. Et je vais mettre en évidence les deux là si vous pouvez voir ça dans les outils de profondeur et utiliser la flèche vers le haut pour ajuster. Et en fait, j'aime mieux ça, je pense que cinq, peut-être quatre Marge top quatre. Voyons voir, ici c'est la nuance de ce développement Faisons en fait pour et nous allons définir la couleur pour préserver leur zéro croire que c'est déjà mais ok, nous pouvons en fait simplement enlever ça. Ouais, ça a l'air bien. Je me sens particulièrement une fois qu'on prend ça et qu'on passe à droite. Ok, ça marchera. Faisons ça. Donc, je vais copier par ça. En fait, ce qu'on peut faire, c'est copier toute cette déclaration. Il est chaud retour au code V s et sous notre section logo, allons rythme que dans condole manger qu'il sauve. Et qui a téléchargé. Revenons au chrome Flush l'argent. Tout se passe bien. Ça devrait être bon. Ok, super. Donc, cela conclut cette vidéo. Nous avons fait un excellent travail dans la création de notre logo ici, et nous avons également mis en place des styles de base qui semblent beaucoup mieux. À mon avis. Dans la vidéo suivante, nous commencerons à programmer ces pages. Donc, ces pages de contenu vont commencer à examiner cela et aller un peu plus loin sous le capot de notre site Web. Je vais voir ça. 9. Thème du type contenu de page: Bienvenue dans cette vidéo, nous allons commencer à construire le fichier de modèle de brindille html point page. Nous allons également nettoyer cette navigation afin que les liens soient alignés sur le côté droit de la navigation. Commençons. Donc, à partir jusqu'à présent, je pense que ces pages arrivent assez bien. Mais si nous finissions juste ici, probablement pas assez pour attirer les clients fictifs de Teoh Elaine ici. Donc, ce que je compte faire à ce sujet est d'ajouter une option pour l'éditeur du site pour ajouter une bannière une bannière d' image sur ce site sans avoir à entrer dans le code. Droit ? Disons donc qu'Elaine, propriétaire de la boulangerie, propriétaire de la boulangerie, paie Michael pour mettre à jour le contenu du site. Eh bien, nous voudrions que Michael ait la possibilité de télécharger la photo Teoh chaque page sans avoir à coder, donc je vais vous montrer comment faire ça. La façon dont cela est fait est en éditant le type de constante de page. Nous avons appris un peu sur les types de contenu dans une vidéo précédente, et nous avons appris un peu sur le type de contenu de la page, mais nous allons simplement descendre, types de contenu Teoh, page de base, et nous allons cliquer sur ça. Donc, dans cette fenêtre, nous avons des options que nous pouvons définir pour chaque page. Et il y a aussi une option champs ici. En ce moment, vous pouvez voir sur notre page le type de contenu. Nous avons seulement un champ body, qui est ce que nous avons utilisé pour définir pour coller le contenu de chaque page. Eh bien, continuons et ajoutons un champ supplémentaire à cette page. Types de contenu Donc, nous allons sélectionner, ajouter un champ et sous ajouter un nouveau champ. Nous allons descendre Teoh Image et appelons simplement cette image de bannière et frapper, enregistrer et continuer à partir d'ici. Assurez-vous juste que cela est réglé sur un seul champ de sauvegarde paramètres et passons vers le bas. C' est juste. Nous voulons nous assurer que activer sur tous les champs et faire tous les champs requis est des vérifications pour l'accessibilité. Alors, nous allons cliquer. Enregistrez les paramètres parfaits et passons à la gestion de l'affichage du formulaire. Vous pouvez voir que nous avons un certain nombre de choses ici. Nous avons le titre en haut et la meilleure façon que j'aime Teoh show. C' est en fait simplement ajouter un morceau de contenu ici, Alors ouvrons ceci dans un nouvel onglet et regardons ce qui se passe quand nous faisons ah page de base afin que vous puissiez voir que nous avons un titre de corps. Vous pouvez voir notre nouvelle image de bannière Field est ici, mais en fait, nous voudrions que cette image de bannière soit placée au-dessus du corps pour une meilleure expérience utilisateur sur la droite. Nous avons aussi quelques options, quelques options de site. Nous pourrions créer un alias d'URL personnalisé si nous ne voulions pas utiliser celui qui est généré. Et si vous aviez plusieurs auteurs, vous pouvez vérifier quel auteur vous êtes. Revenons donc à la page sur laquelle nous étions auparavant dans cet affichage de formulaire de gestion et vous pouvez voir le titre ici est en haut à droite titres ici et nous avons le corps. Voici le corps et l'image de notre bannière. Ces autres options sont ce que vous voyez sur la droite. Et donc ce que j'aime à Dio, c'est mettre le corps sous le titre. Mais dans ce cas, mettons l'image de bannière entre le titre sur le corps, et j'aime m'assurer que ce sont la dernière option sélectionnée cause typiquement, vous ne changerez pas ceux-ci pas toujours le cas, mais il est là. Donc, une fois que nous aurons nos options arrangées, sauvegardons ça. Et maintenant, si nous revenons en arrière et faire du contenu, ajouter du contenu, page de base, vous pouvez voir que cela a été placé entre le titre sur le corps Perfect. Rentrons à la maison et sélectionnons le menu et je vais y aller. Vous pouvez voir ici que l'image de bannière est maintenant une option sur nos pages précédentes également. Je vais aller de l'avant et ajouter l'image de bannière qui est incluse dans les fichiers du site et m'assurer que vous mettez dans tout le texte pour l'accessibilité. Parfait, tu sais, et économise-le. Et vous pouvez voir ici que même si nous avons défini le champ dans le à son option pour être au-dessus du corps sous le titre, l'affichage est toujours en dessous du corps. Revenons donc à nos options de type de contenu et sélectionnons la page de base um, sous affichage. Choisissons gérer l'affichage, et ce que nous pouvons faire est en fait placer cela au-dessus du corps et dissimulons le bien de LaBella , parfait. Maintenant, revenons en arrière, ouvrez un nouvel onglet et consultez le menu que nous venons de le mettre cool. C' est sympa. Mais ce que j'aimerais vraiment dio c'est avoir ceci avant avec Donc en ce moment, nous travaillons dans les limites du conteneur bootstrap. Comme vous pouvez le voir, tout est aligné dans cette fenêtre de conteneur ici et une ligne au milieu de la page. Et nous le voulons. Mais pour le rendre vraiment moderne, nous voulons qu'un élément soit complet. Vous l'avez vu sur d'autres sites et vous pouvez le voir ici, non ? Il s'agit d'une partie complète du site, mais tout le contenu se trouve dans le conteneur. Eh bien, ce que nous pouvons faire est d'aller sur le fichier de modèle de point html et de mettre à jour cela. Alors passons au code V. Donc, nous sommes dans le répertoire de droop will pour accéder aux fichiers de template. Allons aux thèmes et passons à bootstrap, puis sous quand vous êtes dans le thème bootstrap , ce que vous voudrez faire est d'aller aux modèles et la page ainsi que les modèles HTML se trouvent sous la mise en page, et nous allez de l'avant et sélectionnez la page html. Maintenant quoi ? Vous serez accueillis avec, tout de suite est un tas de choses communes. Aidez son texto. C' est très utile. Si vous regardez Teoh, plongez plus profondément dans le développement de triple thème et continuons à défiler ici un peu. Donc tout de suite, je n'expliquerai pas tout ligne par ligne. Mais c'est bon de savoir ce que vous voyez ici sont des variables de brindille. Le développeur de ce thème quatre bootstrapped a décidé de faire un usage assez lourd du système variable brindilles , mais à ce stade, vous vous demandez probablement ce qu'est la brindille. Donc, regardons Google et nous allons juste taper brindille HTML. Donc, twig est un moteur de template pour le langage de programmation PHP. Ce que cela fait, c'est qu'il simplifie beaucoup comme bootstrap, peu comme s CSS ou sass. Cela simplifie la façon dont vous êtes capable de construire des modèles dynamiques en PHP afin que vous puissiez faire beaucoup plus de choses avec beaucoup moins de code. Twig est un sujet exhaustif, et je recommande fortement de consulter certaines vidéos sur le partage de compétences ou sur YouTube. Si vous voulez aller plus loin dans ce sujet, mais pour l'instant, revenons au code de V. Alors maintenant que nous avons un peu une compréhension de ce qu'est la brindille. Nous pouvons voir qu'il y a une variable définie ici. Mais si nous continuons à baisser, vous serez présenté avec un modèle ou un cadre de ce que chaque type de contenu de page est. Lorsque vous cliquez sur le contenu, ajoutez une page de contenu. Donc, chaque fois que vous faites cela, c'est représentatif du code sur une seule page et juste pour aller un peu plus loin, nous pouvons voir ici. Commençons à regarder ça. Donc, il y a l'en-tête, non ? Nous avons cette balise d'en-tête. Et voici notre première région qui a été définie dans la brindille. Il s'agit d'un en-tête de point de la page des gens d'Andrew. Mais vous pouvez voir ici que nous avons cette barre de Naff. Donc, nous allons revenir à Google et chrome et vous pouvez voir ici est cette navigation. Et si nous devions aller de l'avant et inspecter cet élément, vous pouvez voir que nous avons une balise d'en-tête avec la classe de nab notre expansion Large. droite. Donc, nous revenons à la balise d'en-tête de code V avec la classe maintenant barre développer grand. Donc, espérons que cela a du sens imbriqué sous l'en-tête est cette balise de knave avec un certain nombre de classes et vous pouvez voir ici nous avons cette balise de knave imbriquée en ce moment. Je l'ai dans une vidéo précédente, et au début de cette vidéo, je vous ai dit que nous allons aligner cette partie de la navigation vers la droite. Alors regardons comment nous pouvons le faire ici dans le code V. Allons un peu vers le bas et trouvons maintenant, barre de navigation, changeons ce M R Auto à B M L auto. C' est juste une classe bootstrap qui fait de ce bon travail par magie. C' est comme ça que je regarde, au moins. Donc, revenons à Google Chrome et chasse l'argent et tout s'est bien passé qui devrait être aligné sur la droite. Parfait. D' accord. Je pense que cela semble déjà mieux, mais continuons notre travail ici de définir la bannière de la page. Ok, donc ce que nous devrons faire ici, c'est juste d'abord jeter un oeil à la structure réelle de la page. Cliquez avec le bouton droit Inspecter Encore une fois notre vieil ami ici Dev Window. Donc vous pouvez voir que nous avons cet en-tête. Et dans cet en-tête, nous avons. Si vous regardez ce qui est mis en évidence ci-dessus sur l'écran, nous avons évidemment tous les composants de navigation et dans le tag de knave réel, nous avons le droit de navigation pour que nous puissions continuer à descendre. Et c'est ainsi que cela est structuré. Et si nous continuons à défiler vers le bas, nous pouvons voir que la balise principale contient tout sur la page moins le pied de page, qui est dans sa propre attaque au pied. Donc, notre objectif est de sortir cette image de la section principale et de la mettre entre en-tête et fait. Maintenant, ce que nous pourrions faire, c'est définir une région. Mais nous le ferons plus tard si nous revenons au code S. Donc, en fait, on va juste y aller. Teoh, regarde cet en-tête ici. Mais votre curseur entre les deux, assurez-vous que vous êtes à la fin de la déclaration d'en-tête et tapez dans la section. Nous allons utiliser une balise de section pour cela. Donnons-lui une classe de bannière de page. Et avant de rendre l'image d'arrière-plan, ce que j'aimerais faire, c'est avoir le titre de la page placé devant l'image pour un bel effet visuel. Donc on va faire en H 1 ici. Et nous allons juste tabulation qui donnons à cela une classe d'en-tête de page et rendons le titre de la page . Donc ce qu'il faut faire, c'est prendre. Ce que nous cherchons à faire est de prendre ceci le titre de la page. Dans ce cas, c'est Menu, et nous voulons que cela soit placé. Voyez si je peux le faire. Oui, placé juste au milieu de cette image, et nous aimerions que cette image soit une image de fond. Commençons donc par mettre le titre dans Drew Pilate afin de rendre le titre nous allons dire noeud, parce que nous thème une page de noeud ici page point h t pas une brindille, et nous allons en faire aucun label de point, ce qui est juste ce qui se passe dans Drew Pilate en utilisant brindille. C' est comme ça que vous obtenez le titre. Et donc si nous disons que sur et puis sauter au chrome et rincer l'argent, eh bien, vous devriez voir est oui. C' est exactement ce à quoi je m'attendrais. Vous voyez deux titres car non seulement le titre original que nous avons mis dans leur rendu, mais nous avons également ajouté cette étiquette de nœud. Alors comment on se débarrasse de celui-là ? Eh bien, revenons en arrière. Et comme je fais défiler ici, je ne vois rien. Eh bien, c'est parce que ce titre de page fait partie du système de blocs par défaut. Andrew Plate. C' est un bloc pour que nous puissions voir ça à l'Europe et voir le titre de la page. Donc, ce que nous allons faire est en fait juste d'aller de l'avant et de désactiver cela. Alors passons sous la structure et la disposition des blocs. Nous sommes un peu familiers avec cela à ce stade et ici, sous le titre de la page, allons simplement cliquer sur désactiver les blocs de sauvegarde de grand succès et vider pour une bonne mesure. Et puis retournons à la maison et regardons le menu. Parfait. C' est donc exactement ce que nous attendons à voir. Un titre et ce titre par défaut sont maintenant supprimés. D' accord, continuons à construire cette page. Donc, ce que nous voulons dio est de rendre le chemin vers l'image directement dans cette balise de section. C' est certainement la partie la plus complexe, la partie la plus compliquée de la vidéo, et c'est juste parce que nous voulions être beaux et que nous voulions être dynamiques, alors laissez-moi vous montrer le processus de réflexion derrière cela, et je pense que cela va éclaircir certaines choses. Commençons par le rendu juste pour le chemin de l'image dans un P marqué de cette façon, nous savons que nous l'avons. Donc, sauter sur les orteils a attiré les gens. Ce que nous cherchons à faire, c'est si j'inspecte cet élément. Ce que nous cherchons à Dio est comme je l'ai dit, obtenez ce chemin réel ici dans le fichier template. Donc, d'abord, passons sous la structure, les types de contenu, page de base et gérons les champs. Vous pouvez voir qu'il y a un nom de machine ici. Soulignement de champ Image de soulignement de bannière. Ce serait à quoi cela ressemble dans la base de données, par exemple. Très probablement pour le thème ing. Ceci est utile lorsque vous avez besoin de référencer des éléments. Ok, alors copions ça et passons ici et collons-la juste pour que nous l'ayons, puis passons à la gestion de l'affichage et nous allons réellement désactiver cette image et frapper. La raison est que nous ne voulons pas avoir ce même scénario où nous avions des titres de bande en double que nous ne voulons pas avoir d'images en double, donc nous allons réellement désactiver cela, puis revenons au code V. S. Nous avons notre nom de machine ici, et ce que nous devrions pouvoir faire, c'est des crochets doubles. Prenons cette image de bannière de champ, coupez-la et collez-la juste entre les deux. D' accord ? Et puis nous allons faire un espace ici et faire le soulignement de fichier. Vous êtes tout cela est une fonction d'aide fournie par dribble. Et puis fermons ça, accord ? Et maintenant, on est juste que nous ne spécifions pas qu'il s'agit d'un noeud. Donc, nous avons juste besoin de faire pas d'image de soulignement de bannière de champ point, et ensuite nous devons le fermer avec le fichier point d'entité. Vous êtes moi et si ça marche ah, nous sommes le chemin de notre image. Ça devrait être ici. Oui, c'est là. Parfait. Donc, si je devais copier cela et ensuite y aller, vous pouvez voir que c' est là que les images réelles refroidissent sur le serveur. Maintenant, c'est là que ça devient un peu compliqué. Ici, nous allons faire un style CSS en ligne, et nous allons en fait simplement rendre l'image en ligne pour chaque page. Nous ne pouvons pas le faire en CSS parce que Twig ne s'étend pas à ce langage donc il n'y aurait aucun moyen pour nous de pouvoir faire cette dynamique. Et je vais en fait simplement coller dans du code CSS que je sais fonctionne. Donc, si vous voulez mettre la vidéo en pause et le copier dans votre fichier modèle, je vous garantis que cela fonctionne. Mais fondamentalement, ce que nous faisons ici est de faire usage de CSS trois ans fonctionnalité d'ingrédient linéaire pour faire un effet visuel très agréable et transparent. Mais il y a une autre pièce. Donc, une fois que vous avez ajouté cela dans votre fichier de modèle, vous remarquerez. Cette année Déclaration Earl ici en CSS, nous mettrons que nous commencerions à faire, comme les images du site, chemin à l'image, droit. Mais encore une fois, puisque nous voulons que ce soit dynamique, nous allons réellement prendre cette chaîne que nous avons mise et hé, entré directement. Ok, économisons ça et vidons l'argent. Impressionnant de sorte que vous pouvez voir que l'image est là, donc nous avons atteint notre objectif à cet égard, mais nous voulons nettoyer un peu ce menu, alors revenons à notre vieux ami ici, l'inspecteur Dove. Et disons juste que je veux que ce soit Tex Align Center et que la couleur soit blanche. Et puis on veut du rembourrage, euh, pour espacer ça hors de ça. Allons faire tomber ça et nous n'avons pas besoin de rembourrage, vraiment sur l'écrivain gauche. Faisons juste une pièce pour ça. Il s'agit d'un raccourci CSS. Donc ce quatre est haut et bas, et puis celui-ci est à droite et à gauche. Alors allons-y comme ça. J' ai l'impression que six serait mieux. C' est ce que nous voulons que notre code soit pour le titre. Nous avons déjà une classe CSS définie pour cela. Alors qu'est-ce qui est en fait juste copier ce code que nous avons fait dans le navigateur ? Et revenons à notre style que le fichier CSS smika New Line briser ici et appeler cette page styles cohérence. Donc je dois les gens et faisons ça Cool. Et puis le qui est double vérification. Nous avons fait cet en-tête de page de classe, alors appelons H un en-tête de page point. Appelons cela que les crochets bouclés rythmés dans le code. Réparez ça et sauvegardons ça. Vincer l'argent et nous voilà. C' est plutôt génial, non ? Alors maintenant ce qu'on peut faire si on prend un peu de temps ici, Teoh, cliquez sur. Nous pouvons voir que cela semble déjà beaucoup plus moderne et honnêtement, globalement mieux. Ce que nous pouvons faire est en fait commencer Teoh, ajouter les images de bannières de recette et les images de bannière pour les autres pages. Alors je vais y aller et le faire, puis je vous rejoins. Super. Et j'ai pris le temps d'ajouter les images. Donc, ça a l'air vraiment bien jusqu'à présent. Ok, ça conclut cette vidéo. Je vous verrai dans le prochain où nous allons commencer à construire les recettes de type C puis. 10. Créer le type de contenu: Bonjour, tout le monde. Bienvenue dans cette vidéo, nous allons créer un contenu personnalisé. J' ai des recettes. Jusqu' à présent, nous avons travaillé avec un seul type de contenu et c'est le type de contenu de page de base que vous pouvez voir ici. Et comme vous le savez, nous avons utilisé que Teoh crée les pages. Nous allons donc maintenant nous appuyer sur nos connaissances sur le type de contenu de base de la page et enfin construire le nôtre. C' est là que ça devient vraiment amusant, à mon avis. Donc, si nous passons à Google et que vous savez à ce point que j'aime faire cela vous fournir quelques informations et taper dans les types de contenu Drew pally, vous cliquez sur ce 1er 1 il y aura quelques informations que vous pourriez trouver utile si vous voulez pour approfondir le sujet. Presque chaque sujet dans Drew pool est vaste, donc je ne pouvais couvrir que tellement, mais c'est assez long. Et le court de ceci est que les types de contenu se composent de deux éléments une configuration de base, qui est ce que vous êtes accueilli sur la première page, puis les champs. Donc, nous allons passer en revue les deux. Ok, donc pour créer notre premier type de contenu. Survolons la structure. Les types de contenu avaient un type de contenu et cette première page a été accueillie avec. Est-ce que la configuration de base comme nous venons de lire dans l'article ? C' est donc là que vous définissez certains comportements par défaut. Donc, pour celui-ci, nommons ça des recettes. Ce sera ce à quoi il est fait référence lorsque vous allez au contenu, ajoutez du contenu afin que nous puissions ajouter un type de recette, et nous allons garder ce vide pour le moment. Sous les options de publication, nous allons décocher promu à la première page et gardera créer révision a été décocher afficher l'auteur et les informations de date, et nous n'avons pas besoin de faire quoi que ce soit ici dans les paramètres du menu. Sauvegardons ça. Super. Donc maintenant, nous sommes présentés avec l'option champs. Donc, par défaut, tout nouveau type de contenu que vous créez aura un champ body. Si vous vous souvenez de notre vidéo précédente, nous avons ajouté un champ à la page de base ici, qui était cette image de bannière, et vous pouvez voir que le champ du corps est ceci était le titre du bloc de perruque de la ligne de base. La configuration est également un champ, mais c'est par défaut. Le seul champ qui doit être sur un type de contenu, c' est pourquoi il n'est pas présenté dans ce champ de gestion s'affiche. Donc, ce que nous allons faire est de créer quelque chose de similaire à toutes les recettes. Page de recette est dans notre site de tirage Drew, et tout le contenu du test a été tiré de ce site de toutes les recettes. Donc, vous pouvez voir qu'il y a un titre qui, dans droop, serait un champ et descendant. Nous avons une option d'ingrédients, ce qui me semble vraiment sympa, une direction, section, peu de nutrition, un fax et , bien sûr, quelques autres domaines ici. Alors regardons comment nous pouvons construire quelque chose de similaire à ça dans Drew pool. Retournons sur notre site et nous laisserons le champ de corps dans leur grand. Donc, le premier champ que nous allons faire est le champ directions, qui va vraiment être juste un bloc de texte formaté. C' est appelé à la direction, et gardons ça à un ici et gardons tout le même. Ça a l'air juste. En fait, ouais, gardons ces réglages sûrs et parfaits. Ok, notre champ est maintenant créé. Ensuite, faisons un champ d'ingrédients, et l'idée ici est de revenir à ce site de toutes les recettes est orteil avoir une liste d' ingrédients, donc je voudrais avoir, comme, le possibilité d'ajouter plusieurs lignes simples. Voyons comment on peut faire ça à Drew Pool. Donc, par ici, ajoutons un nouveau champ et faisons le plan de texte, et nous appellerons ça ingrédients. Et la clé de celui-ci est de s'assurer que le nombre autorisé de valeurs est défini sur illimité. Il a enregistré les paramètres de champ. Tout le reste semble ici pour qu'on puisse faire glisser et déposer les. C' est exactement ce qu'on veut. Et gardons ça. Parfait. Ok, et nous devons ajouter un champ de texte de plus ici. Faisons un champ de texte de fax nutritionnel. Donc, nous allons faire cela un texte formaté long et appelons-le faits nutritionnels, et nous allons limiter cet orteil un K grand qui ressemble, écrit Enregistrer les paramètres génial. Et ce que je voudrais dio est de fournir une photo ainsi qu'un lien vers la recette originale. Puisque je prends ce contenu, je voudrais être en mesure de donner l'attribution au créateur ici à toutes les recettes. Voyons comment on peut faire ça. Donc, c'est ajouter un champ et vous verrez sous général, il y a une option de champ de lien. Ça s'appelle cette recette originale, et nous limiterons celle des orteils. Et pour cela, sélectionnons en fait des liens externes seulement il enregistre les paramètres. Maintenant, il y a un dernier champ que nous allons adhérer, et c'est que je voudrais apporter une de ces photos à notre contenu. Donc, nous allons vous ajouter Champ étaient déjà familiers avec le type de champ d'image. Alors refaisons-le. Tapez-le dans la photo qui a l'air droit. Et tant que ces air sont activés, touchons les paramètres sécurisés. Ok, super. Alors faisons du contenu. Ajoutez des recettes de contenu et jetons un coup d'oeil à la façon dont cela s'est avéré afin que vous puissiez voir que nous avons notre titre, nos instructions corporelles, ingrédients et autant d'ingrédients que nous avons besoin. Faits nutritionnels, la recette originale et la photo. Alors faisons un de ces éléments ensemble et juste un rappel que ce contenu est disponible dans les fichiers du cours. Alors faisons le déjeuner-vol aux fraises, la farine d' avoine, avoine, smoothie pour le petit déjeuner. Nous allons faire ce smoothie de petit déjeuner à l'avoine fraise saine et savoureux dans l'option Teoh ajouter des protéines afin que cela pourrait être considéré comme la description. Et puis nous allons g o directions Teoh. Et je vais copier ça parce que personne ne veut me voir taper. Et d'accord, allons choisir ça dedans. Et puis faisons les ingrédients ici. Donc, l'option à plusieurs champs est vraiment sympa et a attiré des gens, je pense que oui. Nous pouvons simplement continuer à les ajouter et ensuite finalement nous pourrons Teoh, vous savez, réorganiser l'ordre qui est super utile, et laissez-moi les remplir et puis je serai de retour dans une seconde. OK, j'ai tous les ingrédients ajoutés ici, et je vais aussi aller de l'avant et remplir le fax nutritionnel. Perfectionnez la recette originale. Donc, nous allons effectivement mettre dans l'Ural à cette toutes les recettes ici et ensuite le rythme dans et nous allons faire le texte de lien recette originale, qui est ce que l'utilisateur va voir. C' est donc à quoi ressemblera le texte et qui sera lié. Teoh cet euro Et enfin, ajoutons la photo Grande. Et n'oubliez pas que vous êtes tous des textes parfaits. Et une fois que vous avez ajouté tout ce contenu, continuons et publions-le. Cool. Ok, ça n'a pas l'air mal. Il y a des travaux de nettoyage qui devront être effectués ici, mais je pense que c'est le travail qui est fait pour l'instant. Une chose que vous remarquerez est que lorsque vous créez une nouvelle recette, cet ancien motif de nœud est toujours utilisé. Alors passons à Path Auto et passons sous et réparons ça. Donc, la recherche de configuration et les métadonnées, alias Ural Passons aux modèles et ajoutons Path Auto Pattern. Donc, nous allons appeler ce contenu et faisons cela pour chaque recette, nous aimerions qu'il soit à slash recette slash slash slash le titre. Donc, si affaiblir parcourir ces jetons disponibles à nouveau, vérifions cela et trouvons ce pas de titre. Donc, c'est dire ça. Et on doit vérifier ça. Bien sûr, c'est l'étiquette des recettes que les recettes et faisons la machine nommée recette modèle parfait . Et donc ce que cela dit est que chaque nœud de recette cont de type de recette unique que nous ajoutons sera situé à barre oblique recette slash le titre de la recette. Donc, si nous disons cela et puis passons au contenu, allons sélectionner le film de petit déjeuner à l'avoine fraise et en action, nous allons mettre à jour l'URL Alias va vider l'argent. Et si tout s'est bien passé, cela devrait maintenant être situé à la recette Strawberry. Il sera le petit déjeuner film Nice. Vous savez que cela a été fait. J' aime que l'étiquette du mode d'emploi soit là. J' aime aussi que les ingrédients est leur fax de nutrition. Je n'aime pas que la recette originale ait une étiquette et une photo, alors débarrassons-nous de ça. Nous pouvons le faire sous la structure, le contenu, les types, les recettes, puis gérer l'affichage. Donc, sous la photo, passons sous la colonne de l'étiquette. Cachons ça. Il est aussi cacher des recettes originales, et je pense que je veux les instructions ci-dessous ingrédients. Alors déplacons ça et ça marchera. Je crois que ça marchera. Oui. Ok, sauvegardons ça. Et puis passons au contenu. Voyons notre film de haute restauration à la fraise. Ok, ça marche. J' aime ça. Donc ce que vous pourriez faire maintenant Si vous êtes comme moi dans un peu obsessionnel à propos de l'espacement, vous pouvez thème la note des recettes en inspectant ceci, et ensuite vous pouvez le thème avec juste CSS. Si vous voulez en allant au corps et puis si vous voyez ici, nous avons des recettes de type de nœud de page, vous pouvez créer une déclaration CSS qui est des points de corps, type de nœud de page. Et puis vous pourriez dire, accord, toutes les étiquettes de champ ont fait l'étiquette hors champ. En fait, nous voulons que cela ait une marge. En bas de trois pièces, peut-être. Ah, vrai, parce que c'est le soulignement. Strait de soulignement. droite. Et vous pouvez alors commencer Teoh, nettoyer le CSS ici. Alors faisons ça pendant qu'on est là. Hum, on va faire une marge. En haut d'un bélier, non ? Bas zéro. Faisons deux, puis à partir. Zéro. Et c'est un peu espacé, je dirais, mais qu'est-ce que tu pourrais faire ça toute la journée. Honnêtement, et qu'est-ce qui fait ? 0.5 chambre. Ok, pour que je pense que c'est déjà mieux et que ce qu'on pourrait faire au lieu de faire cette marge , on pourrait faire du rembourrage et ensuite une bordure autour pour que je pense que c'est déjà mieux et que ce qu'on pourrait faire au lieu de faire cette marge , on pourrait faire du rembourrage et ensuite une bordure autourd' un pic solide et ensuite tu vois ce que je veux dire ? Alors vous pourriez faire quelque chose comme le haut de rembourrage. Gardions ce fond. Faisons 0,5 et puis faisons la marge inférieure d'une pièce et nous pourrions le faire. J' ai l'impression que ça a l'air bien. Oui, faisons-le. Rien de tel que la conception dans le navigateur. Copions donc toute cette déclaration ici. Donc juste au cas où je vous perdrais, ce que nous disons est sur la balise body, qui est représentée dans chaque page HTML, il y a toujours une balise body. Si la balise body a une classe de recettes de page sans type, qui ne sera là que si vous êtes sur la page du nœud de recettes, alors nous allons trouver l'étiquette de champ et nous donner un style. C' est ce qu'on fait. Alors copions ça. Revenons au code V S et aux styles sous-payés. Faisons des recettes, des styles, des hommes. Alors allons-y avec ça. Et fermons ça. Parfait. Sauvegardons Uploaded sur le serveur. Retourne à la SLA et l'homme, c'est déjà mieux, je me sens et nous allons vider l'argent. Très bien, c'est génial en grand. Ok, ça conclut cette vidéo. Nous avons réussi à créer un type de contenu de recette. Ce que je vais faire est d'aller de l'avant et ajouter le reste des recettes qui sont incluses dans les fichiers du site, puis je vais vous rejoindre pour la prochaine vidéo où nous allons plonger dans le système de vues de Drew Pal, ce qui est génial. Donc, je vais voir que 11. Utiliser des vues Drupal pour créer une liste des recettes: Bienvenue avec nos recettes type de contenu fait. Nous allons maintenant examiner comment nous pouvons faire une liste en utilisant le système Views de Drew Pal de chaque recette que nous avons créée jusqu'à présent, nous avons quatre recettes que nous avons faites à partir du type de contenu de recettes . Jetons donc un coup d'oeil aux vues. Donc, comme toujours, passons à Google. Puisque nous introduisons un nouveau sujet, allons taper les gens ont attiré huit vues et nous allons cliquer sur le premier lien. Si vous souhaitez en savoir plus sur les points de vue, vous pouvez consulter ce lien ici et à sa base. Ce que les vues vous permettent de dio est de récupérer dynamiquement le contenu de la base de données. Donc, ce qui se passe lorsque nous créons des recettes à partir des recettes Le type de contenu est dans notre base de données. Il y a une place pour chacun de ces champs. Ok, donc il y a un endroit pour la nutrition, fax pour les photos pour les directions, et ces endroits sont tous liés. Teoh une catégorie de recettes globale ou une table. Donc pour chaque entrée. Donc, chaque fois que nous ajoutons une recette, elle entre dans la table des recettes, et il y a une place dans la base de données pour chacun de ces champs. Bien avec vue. Ce qu'on peut dire, c'est que je veux chercher tous les titres Disons des recettes. Je veux aller chercher de l'avoine, gaufres végétaliennes, crêpes végétaliennes, avoine à la fraise, smoothies pour le petit déjeuner et je veux juste prendre le titre et peut-être quelques autres champs que nous venons de voir. Tu sais, peut-être qu'on prend le titre, l'image et la description, c'est ce qu'on va faire, et qu'on en fasse une liste, non ? C' est donc ce que les vues vous permettent de faire sans avoir à programmer. Et c'est une sorte de partie clé est que Drew Polis fournit un outil incroyablement puissant dans une interface, une interface utilisateur pour que vous puissiez ignorer avoir à savoir programmer ? Vraiment. Et donc pour vous, vraiment, tout ce que vous avez à apprendre est comment utiliser les vues. J' espère que ce genre de chose a du sens. C' est un grand sujet. Jetons un coup d'oeil à la page des recettes, et donc ce que nous allons faire est de créer un bloc de vue et de le placer dans cette page. Alors commençons à faire ça. Donc, sous la structure, passons vers le bas vers les vues et ajoutons une nouvelle vue. Nommons cette liste de recettes de vue, et sous les paramètres de vue, nous allons nous assurer que le contenu est vérifié. Et nous allons nous assurer que nous obtenons tout le contenu des recettes. Nous ne chercherons pas de pages ou d'articles. Si parfait. Donc, cela va dire à la vue quel type de contenu toe recherche et vous remarquerez. Ici. Vous pouvez l'utiliser pour beaucoup de choses pour les utilisateurs, les blocs, blocs, les fichiers, taxonomie et encore plus lorsque vous commencez à télécharger des modules supplémentaires. Et la dernière chose est, nous allons sauter créer une page parce que nous avons déjà une page faite pour les recettes. Alors ajoutons un bloc, et nous allons en faire une liste non formée, emmêlée de champs, et c'est vraiment important. Assurez-vous donc que vous avez vérifié les champs, puis faisons ce zéro. Ou nous allons juste faire que cette couverture devrait être la même si vous allez zéro ou clignez des yeux. Mais une fois que tu auras tout ça, sauvegardons, ok ? Et si vous le suivez ici, vous verrez maintenant en bas de la page une liste de toutes nos recettes. C' est vraiment cool. Très bien, donc ce que nous essayons de faire ici est de créer une sorte de liste d'aperçu d'affichage afin que l'utilisateur puisse cliquer sur une recette. Ils sont intéressés et à la recherche et obtenir plus de détails. Donc, pour ce faire, laissez-moi juste revenir sur la recette que nous avons déjà créée. Alors regardons la farine d'avoine timide pendant la nuit, et je pense que ce qu'on va faire, c'est que nous allons prendre le titre. Le corps. Nous sauterons les instructions vont sauter la nutrition des ingrédients, fax et la photo. Ok, on va prendre ces champs et on les collera tous ensemble pour qu'ils sortent dans une belle liste. Bon, Donc, Donc, comme je l'ai dit, ici nous avons des champs à droite, et puis dans cette fenêtre d'administration des vues, nous avons une option pour ajouter des champs. Bien sûr. Nous avons déjà notre titre ici, alors commençons par ajouter notre premier champ. Alors regardons la photo. Vérifions la photo et prenons aussi le corps , , corps , ce qui est comme la description en quelques heures. Et puis nous allons aussi chercher le fax nutritionnel. Cool et nous allons ajouter et configurer des champs afin que vous puissiez voir qu'il passera par chacun que nous avons vérifié ici. Donc, nous regardons le champ du corps et nous allons juste garder tout par défaut pour le moment. Faits nutritionnels, même affaire et pour l'image. Faisons en sorte que les médias et appuyez sur appliquer. Cela devrait marcher bien, sorte que si on fait défiler ici semble qu'il y a un problème avec mes images. Pour une raison quelconque, je m'assurerai de vérifier cela. Mais vous pouvez voir des gaufres végétaliennes est correct là. Donc nous avons notre titre. Nous avons une description et une valeur nutritive, et il est plutôt bon. Donc la dernière étape ici est de s'assurer que nous le sauverons et d'accord, bien. C' était juste dû être une erreur. Toutes les photos étaient de retour ici et cool. Ça a déjà l'air mieux. Nous avons une liste de nos recettes que nous pourrions ensuite utiliser sur tout le site. La dernière chose que nous allons faire dans cette vidéo est de l'ajouter à la page des recettes. Donc ce qu'on va faire, c'est prendre cette vue qu'on vient de le faire et le placer dans le corps. Donc, pour ce faire, nous allons revenir à notre fenêtre de mise en page de blocs, et c'est familier. Je pense donc ici dans le Maine contenu parce que c'est là que nous voulons placer notre. Si vous bloquez sur la page des recettes, nous cliquerons sur Place, Bloquer et parce que lorsque nous configurons notre vue, nous avons choisi de faire un bloc plutôt qu'une page. Si nous tapons dans la liste des recettes qui apparaîtra ici dans cette fenêtre de motel en option. Donc, sélectionnons un bloc de place et nous allons décocher le titre d'affichage et puis sauvegardons cela . Et assurez-vous de cliquer sur Enregistrer les blocs en bas. Donc maintenant, si nous allons aux recettes, vous pouvez voir que nous avons une liste dynamique de recettes de notre base de données. Et juste pour vous montrer si nous avons ajouté une recette de test qui apparaîtrait. Donc, nous allons sauter ce fax nutritionnel, et je n'ai pas de photo pour celui-ci, mais juste pour vous montrer ici et ensuite nous allons à des recettes, non ? Parfait. Vous pouvez voir que cela a été ajouté à notre liste. C' est donc dynamique. Maintenant, revenons en arrière et supprimez simplement ce morceau de contenu de test avant jamais. Pourtant génial. Ok, maintenant il y a un problème si nous allons à propos de nous avons notre liste de recettes. Si nous allons contacter, nous avons une liste de recettes. Toutes les pages ont maintenant cette liste droite, qui n'est pas ce que nous voulons dans ce cas. Alors comment on répare ça ? Eh bien, si on va Teoh, on pourrait aller à la disposition des blocs ou on pourrait aller à cette icône de crayon et sélectionner Configurer le bloc. Je pense qu'il fera ça. Et maintenant, sous cette section de visibilité, passons aux pages et disons que nous allons montrer ce bloc pour une page répertoriée afin de nous assurer que les recettes sont dans la fenêtre de la page répertoriée. Et ce que vous pouvez faire c'est, euh, séparer les choses par un saut de ligne. Donc, si je voulais m'assurer que c'était sur les recettes et le contact, je pourrais le faire. Mais nous allons juste garder cela sur la page des recettes. Donc, avec cette mise à jour, nous allons appuyer sur Enregistrer et maintenant vous pouvez voir qui est resté sur la page des recettes et nous allons voir si elle est également sur les menus. Il est parti, donc c'est assez simple, mais puissant. Et c'est juste une sorte de vous donner une idée de la façon dont vous pouvez utiliser ont utilisé pour faire un site Web moderne dynamique. Très bien, donc cela va conclure cette vidéo dans la prochaine vidéo. Ce que nous allons faire, c'est travailler sur le nettoyage pour qu'il ait l'air plus moderne et qu'il ressemble à bootstrap. Je te vois dans la prochaine vidéo. 12. Faire la liste des recettes: Bienvenue dans cette vidéo, nous allons transformer cette liste de vues que nous avons créée pour qu'elle s'intègre dans l'un des composants fours bootstrap. Bon, donc on va nettoyer à quoi ça ressemble. Donc, pour commencer, passons à Bootstrap. Ici, nous sommes sur le site bootstrap à l'introduction. Et passons aux composants et à ce qui est un objet multimédia fin. Donc, ce que nous allons faire est de faire notre liste de vues en un des composants d'objets multimédias bootstraps . Donc, nous allons utiliser ce code ici pour cet alignement. Un. Je pense que ça a l'air sympa, non ? Donc nous allons déplacer l'image vers la gauche et nettoyer un peu la description . Comme toujours, avec bootstrap, nous avons un exemple de code ci-dessous l'exemple. Bon, alors copions ceci pour maintenant et revenons aux recettes et modifions la vue à partir de cette icône de crayon juste ici. Donc maintenant, nous sommes de retour dans la fenêtre d'administration des vues U. Donc, pour ce faire, nous allons utiliser le champ de texte personnalisé, donc nous devrions être en mesure de taper du texte personnalisé et ajouter et configurer des champs et ce que cela nous permet de faire est d'utiliser le système de jeton ALS Droop. Nous étions un peu familiers avec les jetons quand nous étions en train de mettre en place nos chemins automatiques de chemin. Mais encore une fois, ce que cela va faire, c'est vraiment rendre cette liste dynamique et chercher ces champs, qui sont représentés par des jetons de la base de données. Droit. Donc, nous allons coller dans notre HTML que nous avons copié à partir de Bootstrap, et je vais le rendre plus grand. Et appliquons ça pour voir ce qui se passe. Bon, donc comme vous pouvez le voir pour chacun et gardons encore mieux pour que nous puissions voir à quoi ça ressemble. Ainsi, vous pouvez voir pour chacun, nous avons ce code HTML que nous avons collé à travers le champ de texte personnalisé . Eh bien, l'astuce ici est de cacher tous nos champs et de représenter ces champs en utilisant des jetons de pols dans le texte personnalisé. Alors faisons cela maintenant, donc nous allons éditer, voir et commençons par masquer chaque champ. Donc, excluons cela de l'affichage et appuyez sur appliquer. Allons vers le bas et faisons-le pour le champ du corps aussi. Nutrition fax exclura cela et la photo. Donc, ce qui nous reste avec est juste le HTML dans lequel nous le collons à partir de Bootstrap. Maintenant, allons dans ce champ de texte personnalisé et commençons Teoh, remplacez le texte statique par des jetons. Nous allons sauter la balise image pour maintenant parce que cela va nécessiter quelque chose de plus. Mais le plus facile à Dio est de commencer ici est d'aller sous le corps des médias et nous allons où il est dit médias alignés Top, Trouvons sous les modèles de remplacement. Copions, titres et collons-le . D' accord. Et juste pour vous montrer cette ligne par ligne maintenant, vous pouvez voir à la place de ce titre statique, nous avons le titre réel de la recette. Continuons à faire ça, et je vais encore agrandir cette fenêtre. Ok, pour cette balise de paragraphe, nous allons supprimer tout le texte et nous allons juste pendant que nous sommes ici. Aussi, supprimez tout ce Texas Well, nous sommes restés avec deux balises de paragraphe pour celui-ci vers le bas dans les modèles de remplacement, prenons le corps. Et pour le dernier, prenons le fax de nutrition Cool et frappons. Postulez pour voir à quoi ça ressemble. Très bien, Super. Attaquons maintenant cette image. Si nous regardons le champ photo, cela est en train d'être rendu comme une balise d'image. Bon, donc nous ne voulons pas que ce que nous avons copié de Bootstrapped soit une image. Au lieu de cela, nous allons réellement faire de cette image un div, et nous allons garder la classe la même Align Self start M R trois. Ok, nous pouvons supprimer tout le texte parce qu'il est représenté dans le champ une fois de plus. Et nous allons juste nous assurer que nous fermons cette div avant d'aller plus loin et ce que nous allons mettre ici est le champ photo réel. Donc, nous ne pouvions pas envelopper une image dans une image. Ça ne marcherait pas. C' est pourquoi nous avons dû en faire un div. D' accord, alors appliquons ça. Et comme vous pouvez le voir ici, ça a l'air bien. Maintenant, sauvegardons cela et voyons ce que nous obtenons sur la page. Impressionnant. Nous avons donc réussi à le faire et cela a l'air vraiment bien. Jusqu' à présent, il y a un travail de nettoyage CSS que nous allons faire ici. Mais juste pour démontrer, vous pouvez voir qu'il s'agit d'un site mobile entièrement fonctionnel, grâce à bootstrap. Donc, nous allons une fois de plus Teoh style ceci dans le navigateur, puis amenez-le à nos feuilles de style CSS . Alors faisons un clic droit sur Inspecter et je ramènerai ça. Tioh le plateau là-bas et jetons un oeil à notre marque. Ce que nous finirons par faire, c'est de créer une déclaration à partir des points de vue. Donc, si vous venez de voir que j'ai frappé un signe plus là-bas dans l'inspecteur et que nous avons eu et que nous avons cette énorme liste de classes, ce qui n'est pas ce que nous voulons, nous allons commencer à blanchir ça pour que les styles que nous fabriquons affectent ce vue particulière. Très bien, donc en ce moment, nous sommes à gauche avec les classes de vue vue liste des recettes vue I D Recettes listes et le bloc I d. Ok, mais nous pouvons réellement faire baisser cela encore plus. Nous pouvons supprimer ces lunettes, et nous pouvons juste dire div liste des recettes de vue point. Et puis nous pouvons commencer à attacher les classes à cette déclaration. Donc, disons que dans les recettes de point div liste tous les IBS immédiats div. On veut cet orteil. Ayez une marge, un fond d'une pièce et un rembourrage disons en bas d'une pièce ainsi que pour commencer à l' espacer et nous allons faire notre tour ici à nouveau. Donc avec tout ça, on peut faire une frontière solide. Mais en fait, faisons une bordure inférieure d'un pixel solide d'E. Ça a l'air vraiment sympa, à mon avis. Donc ça a l'air bien. Si on fait tomber ça, ça commence déjà. Ils ont l'air espacés et mieux. Et je pense que ce qui va aussi faire ici est simplement faire le titre. C' est notre site vert le vert que nous avons utilisé pour le site. Donc, si nous sélectionnons ce titre et puis faisons à nouveau notre, um, div point liste des recettes de vue et disons chacun cinq a. Parce qu'il y a un lien intégré dans cette balise de titre. Ok, alors faisons cette couleur. Pas Alice Blue, mais ce qui est juste l'utiliser et ensuite obtenir cette couleur bascule. Hum, et sélectionnons une de ces couleurs ici. Ce n'est pas ça. , Eh bien, en fait, en fait, sélectionnez-le à partir de ça. Je ne peux pas. Je crois que ça a l'air beaucoup mieux, je pense, mais on peut le rendre un peu plus sombre. Probablement. Oui. On y va. Donc, vous pouvez copier cela pour votre projet aussi à E huit c 60 k Et avec ces styles, allons juste copier ce 1er 1 ici que nous venons de faire ou le 2ème 1 que nous venons de faire. Et passons au code V S. Et il s'appelle celui-ci, um, um, recettes afficher les styles de liste. Et commençons juste à l'intégrer. Revenons ici et trouvons notre cours de médias. Et copions cette déclaration que nous avons faite ici dans le navigateur, dit-il. Dans Hit Save, il sera téléchargé une fois de plus. Je vais fermer ça et vider l'argent. Et si tout se passe bien, nos mises à jour devraient être parfaites. D' accord. Donc, nous avons réussi à transformer un Alvaro tombant, vous listez en un objet multimédia bootstrap en utilisant seulement l'interface, et cela commence à paraître bien. D' accord, je verrai dans la prochaine vidéo 13. Créer la page d'accueil: D' accord. Bienvenue dans cette vidéo, nous allons enfin accéder à cette page d'accueil. Nous allons nettoyer ce truc supplémentaire qui est actuellement situé sur la page d'accueil. Et le plan ici est de créer un diaporama en utilisant le carrousel bootstraps, et ajoutera également un bloc en bas avec quelques informations supplémentaires. Alors passons à l'intérieur. Vous avez peut-être remarqué que cette bannière verte est répétée sur tout le site. Si vous vous souvenez, c'est quelque chose que nous avons ajouté dans le modèle de page. Vous pouvez programmer cette page d'accueil à l'aide d'une page de TPL spécifique. Donc, si vous vous souvenez nous si nous devions revenir au code de studio visuel ici, nous avons utilisé cette page point html brindille point. Eh bien, si tu voulais Thème Teoh sur cette page d'accueil, tu pourrais aller à Google et taper Man dribble. Je mange à partir de modèles de page. Tweet. Faisons des modèles de brindilles. Et laissez-moi voir ici sur ce triple échange. C' est ainsi que vous diriez le thème de la page d'accueil afin que vous puissiez copier cela. Apportez-le ici pour brindiller et ajoutez-le à vos fichiers de modèle. Cependant, pour nous, notre pont d'attache n'est pas vraiment complexe. Et en dehors de cela, il n'y a vraiment pas de différences structurelles. Donc, je vais vous montrer un truc rapide pour être en mesure de supprimer cette Onley pour la page d'accueil. De cette façon, nous pourrions simplement rester dans notre modèle de brindille html point de page. Donc, d'accord, donc pour se débarrasser de cela, inspectons l'élément et vous pouvez voir que nous avons donné à cette section une classe de bannière de page . Donc ce que nous allons faire ici comme nous l'avons fait dans une vidéo précédente, nous allons sélectionner l'élément du corps et nous allons Teoh. Voyez que cette page d'accueil du chemin est une classe disponible sur l'attaque du corps. Nous allons copier ça et créer une nouvelle déclaration de corps avec cette page d'accueil du chemin. Donc, cela veut dire seulement la première page. On ne fera ça qu'à la première page. Et faisons ensuite la section de la bannière de la page des points. Et avec cela fait, n' affichons aucun. Très bien, donc cela va supprimer la bannière de page juste pour la page d'accueil. Parfait. Donc revenons sur et nous allons nous assurer que nous copions cela à la déclaration que nous avons faite Nous allons passer au code V. S sur notre CSS point de style. Et faisons une nouvelle section ici pour la première page Silas. Et nous allons accélérer cela dans Save it out. Retournez à la piscine Drew et assurez-vous qu'on chasse la caissière. Impressionnant ! Donc, c'est parti. Et maintenant, vous pouvez voir que les autres pages ont encore leurs bannières. Cool. Alors passons à Bootstrap et regardons le composant de cellule de soins, Donnez un exemple ici avec des contrôles, et c'est vraiment ce que nous voulons pour notre site. Nous voulons pouvoir faire ajouter un éditeur de contenu dans une image et que ce soit un carrousel bootstrap . Maintenant, quand nous avons installé tous nos modules dans l'une des premières vidéos de ce cours ,l' , un des modules que nous avons installés était ce bootstrap, simple carrousel, et j'ai trouvé ceci. Il fait un travail très simple d'activer ce château de bootstrap que nous venons de voir dans l'interface de traction Drew , alors assurez-vous juste que vous le faites, en fait avoir installé cela. Si vous le faites, ce sera sous la structure et en bas, des articles de carrousel simples. Alors allons là-bas et sélectionnons cela et ce qui est à un élément. Je vais choisir l'un des fichiers de notre site de cours. Et avec ça, on va faire ça appelé Amazing Drinks et je copie ça et je mets ça dans l'image Alz. Faisons aussi le lien de l'image et le titre de la légende Amazing Drinks. Réglons le treet, orteil Atis actif et le poids à trois parce que nous voulions être au sommet. Continuons à les ajouter ici. On va faire ça ensemble. Nous trouverons la photo suivante et faisons ce qu'on appelle le café premium et l'espresso. Nous allons aussi copier cela dans chacun d'eux, et nous allons en faire quatre. Les objets les plus lourds coulent vers le bas, et je suis en fait juste Oops, nous devons également rendre ce statut actif. Et j'ai aussi remarqué que j'ai ajouté la mauvaise photo ici. Alors laissez-moi vous dire, vous devez réellement supprimer cela en utilisant ce module. Donc, je supprime ça. D' accord, et ajoutons la dernière image. Nous allons appeler ce café végétalien le mieux noté et répéter ce processus, rendre actif, et nous allons le faire cinq. Donc, il coule jusqu'au fond. Donc c'est le dernier. Super. Ok, maintenant il y a une autre chose que nous devons faire avant de l'ajouter à la page d'accueil. Nous avons besoin d'aller ici et d'ajuster les paramètres. Donc si nous allons à Bootstrap et puis vérifier cette cellule de soins, bipez-la encore une fois. Défilons tout le chemin vers le bas de l'écran et jetons un oeil aux options. Très bien, donc ce que le développeur de ce module a fait est de prendre ces options d'intervalle ainsi que certaines de ces autres options ici. Et il l'a apporté dans ce module pour que vous puissiez voir que nous avons ces 500. On va faire l'intervalle ici. 500 ou excusez-moi, 5000. Mon, nous le voulons. Teoh cycle continuellement, et nous allons faire Paul sur le vol stationnaire montrer les indicateurs qui contrôle sur. Assurez-vous simplement que les actifs sont inclus sous le type d'image bootstrap. Faisons l'image fluide, et le style de l'image sera l'image originale. Alors gardons ça parfait. Et pour le placer sur la page d'accueil, passons à la mise en page de bloc et plaçons dans le principal. Ah, pas là. Mettons-le dans la section principale du contenu et tu verras le 1er 1 ici, en fait. C' est des bootstraps ? Bloc cellulaire de soins simple. C' est l'endroit où. Très bien, sous les pages. Nous allons faire l'avant. Nous allons faire cet affichage seulement sur la première page Land. Sauvegardons ce bloc et sauvegardons les blocs une fois de plus. Rentre à la maison et voyons ce qui s'est passé ici. Ok, quelques choses. Premièrement, nous avons encore ce contenu, et je vais vous montrer comment vous en débarrasser. Mais d'abord, nous le voulons vraiment. Ça a l'air sympa. Ok, donc nous avons fait un excellent travail en ajoutant notre curseur ici, mais nous voulons vraiment que ce soit complet. Nous voulons que ce soit pour couvrir toute la largeur de l'écran exactement comme l'ont fait nos images de bannières . Pour ce faire, nous allons construire une région en pool. Alors passons au code V. Et listons notre et listons le répertoire du site à partir du serveur. Laisse-moi entrer dans ça maintenant. Nous sommes au plus haut niveau, alors passons aux thèmes. C' est là que nous avons travaillé Bootstrap et dans les bottes principales reuppé pour le répertoire de thème . Allons vers le bas et trouver Bootstrap pour info dot de amel. Et si vous faites juste un espace là, puis avec l'extension sftp, vous pouvez ensuite aller à la liste du dossier actif et puis vous êtes de retour où nous avons commencé là. Donc, dans ce fichier ont été en mesure de définir certains des paramètres de base pour n'importe quel thème travaillait sur Injury Bull. Donc, revenons sur Teoh l'interface de traction Drew et regardons la mise en page des blocs et vous pouvez voir ici que nous avons un certain nombre de régions qui sont disponibles pour nous pour placer du contenu dans. Ok, donc ce que nous allons faire est de faire un de ces nous-mêmes et de l'ajouter à ce thème afin que nous puissions placer le diaporama dans la région juste au-dessus du contenu. Appelons ceci en surbrillance et la ligne suivante ici c'est ce que nous allons faire référence à cette région comme dans le modèle mis en évidence. Mais dans l'interface, cette ligne suivante est ce que l'utilisateur voit. Donc, nous allons appeler cet appel parce que c'est vraiment ce que nous faisons est un appel et gardons ça. Et puis passons à la page point html brindille et ce que nous allons faire ici, c'est trouver la bannière de section que nous avons faite celle-là et nous allons faire une logique conditionnelle ici pour commencer. Donc on va aller Teoh, ouvrir un bloc de brindilles ici et nous allons nous assurer qu'on ferme ça. C' est comme ça qu'on ouvre ça. Disons, si est soulignement fronts, qui est une fonction d'aide dans Drew pool. Fermons le bloc de brindilles ici. Eh bien, nous l'avons et disons, et si c'est le cas, nous mettons fin à notre déclaration si, accord ? Et qu'est-ce que Taibe est dedans ? Et appelons ce point de page en surbrillance. Très bien, c'est ainsi que nous déclarons une région dans un fichier modèle dans dribble. Alors sauvegardons ça. Retournons chez Drew Paul et nous sommes rincés. L' argent est bon, et si tout s'est bien passé, nous devrions avoir cette région d'appel maintenant disponible, et nous allons placer notre cellule de soins simple dans cet appel. Et appelons ce front une fois de plus. Sauvez le bloc et je viens de réaliser que cela signifie que nous en avons maintenant deux. Donc, prenons celui-ci puis nous avons ajouté précédemment, et supprimons simplement ce parfait et gardons cela sur. Vérifions la page d'accueil, et c'est déjà mieux. Il y a du nettoyage qu'on doit faire ici. Configurez le bloc. Nous ne voulons pas cela, donc nous le ferons simplement en fait. Non, gardons ça. Nous allons décocher le titre d'affichage et enregistrer le bloc. Super ! D' accord. Et maintenant, nettoyons les C s un peu ici, comme nous l'avons fait. Nous voulons donc que cette légende soit alignée verticalement au milieu du carrousel. Alors faisons un clic droit pour inspecter le café premium et l'expresso, puis on va monter un à cette légende Div Carrousel et je vais revenir en arrière. Donc c'était là-dessus et vous pouvez voir ici que cette légende de carrousel a déjà quelques styles associés, et c' est en quelque sorte d'être positionné ici avec, um positionnement absolu en utilisant cette déclaration CSS. Donc, ce que nous allons faire est juste ajuster cela de sorte qu'il y ait la première des arrière-plans de noir. De cette façon, nous pouvons le voir, et je pense aussi que cela semble vraiment sympa là-bas et ajoutera également une déclaration haut de gamme ici. Et appelons ça comme 50%. Et comme vous pouvez le voir, c'est maintenant un fou. Comment on répare ça ? Eh bien, nous devons fixer une hauteur spécifique pour réparer ça. Alors faisons la hauteur 75 pixels et revenons à notre feuille de style CSS et ajoutons ces styles que nous venons de faire pour la légende du carrousel. Et disons ça. Retourne, chasse l'argent et rafraîchis-toi. Ok, je pense que ça a l'air plutôt bien, OK ? Et la dernière chose qui va faire dans cette vidéo est d'ajouter un jumbotron bootstrap au bas de la page d'accueil sur le site bootstrap sous les composants. Trouvons Jumbotron, et ça a l'air vraiment sympa, donc je pense que nous allons copier ce code. Revenons à tout lâcher, et la façon dont nous allons faire que celui-ci se produise est en ajoutant un bloc. Alors passons à la disposition des blocs de structure, ajoutons un bloc personnalisé et appelons simplement ce jumbotron de contact, et ensuite ce que nous allons faire est de rendre le format de texte plein. HTML. Nous allons cliquer sur le bouton source et le coller dans. D' accord, alors appelons-ça les Lanes. Commencez Cafe Cage Cafe, et nous allons simplement mettre dans certaines des informations de fausse adresse ici. Gardions ce HR juste là. Cette règle horizontale qui a l'air agréable. Et puis nous mettrons la date et les heures qu'ils sont ouverts. Alors faisons ça. Et puis je pense que ce que nous allons faire ici est liez le menu Teoh. Ok, voyons ici ce travail et allons dans la source réelle pour changer cette info. Alors au lieu d'en apprendre plus, appelons-le, regardons le menu, Ok, et , euh, disons ça. Impressionnant. Nous n'afficherons pas le titre. Choisissons les pages et allons ensuite aller de l'avant pour maintenant et ensuite nous pouvons réellement mettre cela droit dans la région d'appel à partir d'ici, Alors gardons ça. Assurez-vous qu'il est sous le bootstrap simple soin cellulaire, puis allez au bas frapper les blocs de sauvegarde et revenons sur le site. Ça a l'air bien, mais je pense qu'on peut le coiffer un peu. Trouvons le bloc réel I d. Donc bloc contact Jumbotron est ce que nous cherchons là-bas. Ajoutons un plus. Et heureusement, ils ont div avec une idée de contact de bloc. Jumbotron déjà sélectionné. Avec cela, faisons le centre des lignes textiles. Ok, donc on va le centrer. Je pense que ça a l'air vraiment sympa. Et puis ajoutons un peu de rembourrage. Um, faisons un rembourrage de Faisons un rembourrage de bélier. Ça a l'air beaucoup mieux. Impressionnant. Très bien, alors prenons la déclaration de style ici et puis copions ça. Jetez-le dans notre fichier CSS, enregistrez-le. Effacez le cache. Parfait. D' accord. Et il y a en fait une autre chose que nous voulons dio, euh, nos pages de contacts la seule page qui est vide. Alors ajoutons un Jumbotron ici aussi, donc on rentre à la maison. Nous allons le sélectionner à partir de ce Jumbotron que nous avons fait. Allons sous source ici dans sélectionner tout copier, revenir en arrière, puis sur la page de contact, nous allons éditer. Et avant de sélectionner la source, passons au HTML complet et collons cela dans. Nous allons réellement prendre 1 800 rue génial et faire que le titre va détruire ce lien et ensuite nous allons faire un nouveau saut de ligne et dire, Appelez-nous au 111222333 Et sauvegardons ça. Impressionnant. J' aime beaucoup dire génial, comme vous pouvez tous le dire. Donc, alors, je préférerais que ce soit le texte aligné, au centre. Mais au lieu de faire une déclaration de style, va en fait simplement éditer cela à partir de la perruque Wiz E. Donc, allons à la source À partir de là, sur la Div Jumbotron, faisons le style égal texte aligner. Um, au centre. Parfait. Donc ça devrait réparer ça. Et ça a déjà l'air mieux. Ok, merci beaucoup d'avoir regardé cette vidéo, et je te verrai dans la prochaine. 14. Merci !: Bonjour, tout le monde. Félicitations pour avoir terminé cette vidéo. Siri et moi voulons remercier personnellement chacun d'entre vous d'avoir pris le temps d' apprendre avec moi. J' espère vraiment que vous avez pu, Teoh, trouver l'information de ce cours utile. J' ai certainement eu beaucoup de plaisir à le faire. vous plaît, s' S' ilvous plaît, s'il y a quelque chose qui n'a pas de sens pour vous, n' hésitez pas à entamer une conversation ici, et je ferai de mon mieux pour revenir vers vous dès que possible. Maintenant que vous avez terminé ce cours, vous avez un modèle de site Web moderne prêt à l'emploi que vous pouvez utiliser pour personnaliser en fonction de vos besoins. Il y a beaucoup de fonctionnalités qui peuvent être ajoutées à ce site que nous avons créé pour le rendre encore plus moderne et plus dynamique. Si vous avez regardé cette vidéo tout au long et que vous êtes intéressé à me faire créer une vidéo sur le thème avancé où nous créons réellement une page de modèle de noeud personnalisé et approfondissons la façon dont nous pouvons construire ce site, s' il vous plaît laissez-moi savoir s'il y a assez d'intérêt, je travaillerai à construire ce cours à nouveau. Merci beaucoup d'avoir appris avec moi. Et j'espère vous voir dans une autre de mes entraînements. Prenez soin