Tutoriel Bootstrap Studio version 6. 0 Apprendre Bootstrap Studio

1. Introduction du cours: Bonjour les gars, Hawaii, merci d'avoir atterri sur ce parcours particulier. Ce cours porte sur Bootstrap Studio. Bootstrap Studio, c'est quoi ? Bootstrap Studio est une application de bureau dans laquelle vous pouvez concevoir un site Web. Il s'agit d'un site Web statique et il y a fonctionnalité où vous pouvez également créer un site Web dynamique, mais ce n'est que pour le commerce électronique, donc nous allons le voir également. Bootstrap Studio est donc une application de bureau entièrement construite sur le framework Bootstrap. Dans ce cours, nous sommes en train de voir comment utiliser Bootstrap studio pour concevoir un site Web sans codage. C'est le mot clé. Sans codage, un peu de codage est là pour coder votre jambe, juste appeler quelque chose ici et là. Mais ce n'est pas comme la programmation hardcore ou le codage hardcode. Il suffit de me suivre ce que je fais, puis c'est fait. Vous serez en mesure de tout concevoir. Je vais vous montrer ce que vous allez concevoir exactement et ce que vous allez apprendre dans ce cours. Dans ce cours, nous allons voir tout sur les panneaux du logiciel comme le panneau Studio, le panneau en ligne, ce qui est exactement ces panneaux d'aperçu. Et dans ce panneau d'options, nous avons trois options, les options d' apparence et l'animation. Ensuite, panneau de conception. J'ai créé une vidéo séparée et séparée pour comprendre comment nous allons utiliser ce panneau, puis nous passons à un projet. Bon, nous allons donc concevoir quelques projets comme reprendre une page. Il s'agit d'un site Web d'une page. Si vous voyez qu'il s'agit d'un site Web complet d'une page et que vous pourrez personnaliser tout cette page en fonction de votre commodité et de vos besoins. D'accord, donc à quoi va ressembler exactement ce site Web ? C'est mon navigateur. Vous pouvez voir en temps réel une revue du site Web. Il s'agit donc de votre navigateur. Si vous cliquez sur À propos de nous, vous pouvez voir le défilement vers le haut. Si vous cliquez sur Contact, il fait défiler vers le haut. Si vous cliquez sur qui il s'affiche en haut. Et sur la page de contact, s'il y a un formulaire. Sans codage. Dans ce cours, nous allons apprendre comment créer exactement un formulaire intelligent dans Bootstrap Studio. Nous appelons cela un formulaire intelligent, ce qui signifie que chaque fois que l'utilisateur remplit ce formulaire et clique sur Soumettre, il arrivera à une adresse e-mail sur laquelle vous avez sélectionné cette adresse e-mail . les informations relatives au formulaire doivent être fournies. Il s'agit d'une forme en quelque sorte dynamique, mais pas exactement dynamique. Nous l'appelons un smartphone. Ensuite, nous avons un site Web de plusieurs pages que nous allons concevoir dans ce cours particulier. C'est un peu comme la page Web de l'entreprise technologique. Nous avons donc plusieurs pages ici où nous avons des formulaires. Encore une fois, il s'agit d'une forme intelligente. Ensuite, nous allons créer la page de contact, toutes ces choses. Et en plus de cela, tout sera réactif sur le mobile. Voyez cette barre de navigation, comme lorsque j' arrive à une taille d'écran plus grande, les icônes, les boutons qui s'affichent ici. Si je viens sur l'écran mobile, ils se cachent à l'intérieur de cette bascule. Vous allez voir comment exactement nous allons concevoir une réponse mobile sur votre site Web sans coder. Après cela, nous allons créer une conception d' un système LMS qui est un système gestion de l'apprentissage comme plusieurs cours, plusieurs pages ont des options disponibles. Nous allons concevoir une page de liste de souhaits , puis la page d'inscription et tous les autres trucs. le plus excité ici c'est ce site de commerce électronique. Et pour être très clair dans ce domaine particulier, site de commerce électronique est un site web dynamique complet où vous pourrez vous intégrer. La passerelle de paiement est également, donc voyons la démo de ce site Web. C'est notre site de commerce électronique, que nous sommes, nous allons concevoir dans ce cours. Et il y a plusieurs produits ici. Et si je clique sur ce produit, vous pouvez voir qu'il arrive sur cette page de produit, puis certaines options connexes sont alors l'option produits associés. Ensuite, vous avez une option de taille à sélectionner. Et si je sélectionne cette taille et que je modifie la quantité, et si j'ajoute cet emballage cadeau, tout cela, faisons-le pendant le cours. Si et si je clique sur Ajouter au panier, il s'affiche comme un produit ajouté au panier, vous pouvez cliquer ici comme une carte C ou vous pouvez cliquer sur l'année pour accéder au panier et ensuite vous pouvez voir que votre produit est là. Et si je clique sur Checkout, vous pouvez voir qu'il me demande de saisir quelques-unes de mes coordonnées. Si j'ajoute tous les détails ici, si je clique sur Suivant et que le paiement s'affiche via PayPal ou carte de débit, vous avez deux options comme PayPal et Stripe. Et vous pouvez également fournir certaines options appelées virement bancaire, pipi, pipi à la livraison. Et ici, j'ai utilisé par un UPI. Donc, toutes ces choses que vous allez apprendre dans ce cours particulier. Il s'agit d'un parcours très serré. Et en dehors de cela, nous allons voir beaucoup de choses comme l'intégration Zoho, l' intégration du support client et tout d'autres choses. Sans perdre beaucoup de temps. Commençons et je vous verrai dans la première vidéo de ce cours. 2. Pour commencer: Dans cette vidéo, nous allons voir comment commencer avec Bootstrap Studio. Au moment de l' enregistrement de cette vidéo, le studio bootstrap est en version 5.6.4. Il s'agit de la dernière version. À ce moment-là. Lorsque vous lancez Bootstrap Studio pour la première fois, c'est ce que vous voyez sur votre écran. Voyons comment faire face à cela. Nous avons très peu d'options à cet écran. Le premier est le design récent. Comme son nom l'a suggéré. La raison de la conception signifie les conceptions récentes sur lesquelles vous avez travaillé. Nous viendrons ici pour que vous puissiez simplement cliquer dessus et que vous puissiez ouvrir le projet, ce qui permet de gagner du temps, rien d'autre. Ensuite, vous avez quelques tutoriels ici. Chaque fois que vous cliquez sur l'une de ces options, vous accédez à la page Web, qui est un tutoriel entièrement basé sur du texte. Il ne s'agit pas d'un tutoriel vidéo. C'est pourquoi je fais une vidéo là-dessus. Le nom du logiciel est là bootstrap studio que la version 5.6 pour la version actuelle, puis nous avons un nouveau bouton de conception ici. Ensuite, nous avons un bouton Ouvrir. Année. nouveau design est lorsque vous cliquez sur le nouveau design, lorsque la boîte de dialogue s' affiche devant vous indiquant quel type de nouveau design vous voulez. Si vous cliquez sur Ouvrir, l'explorateur de fichiers se présentera devant vous. Et vous pouvez simplement sélectionner le projet et commencer à travailler dessus. Voyons donc comment créer un nouveau design. Il suffit de cliquer sur une nouvelle boîte de dialogue Design One qui s'affiche devant vous. Bootstrap Studio nous offre peu de designs prêts à l'emploi. Vous pouvez commencer par cela aussi, mais vous regardez tous cette vidéo pour apprendre à Bootstrap Studio à ne pas utiliser les designs prêts à l'emploi. Donc, ce que nous allons faire, nous devons nous assurer que trois options existent. Et nous l'avons choisi. La première option consiste à nommer votre projet. Deuxièmement, il faut s'assurer que le modèle vide est sélectionné. Vous pouvez voir ce petit cercle, y a-t-il cercle bleu à l'intérieur de ce cercle bleu, tique blanche est là. Cela signifie que ce modèle est sélectionné. Nommez le projet, puis vous devez vous assurer que la version de Bootstrap studio que nous utilisons. La sélection par défaut sera 5. Dans la version précédente, il s' agit de widgets 4.6 sélectionnés. La version précédente signifie 5.6.2 à partir de 5.6.3, la sélection par défaut est Bootstrap cinq. La plupart des étudiants sont confus ici pour dire qu'est-ce que ce bootstrap cinq et Bootstrap Studio 5.6.4. Laissez-moi vous le dire. Bootstrap est un framework et Bootstrap Studio est un logiciel dans lequel nous travaillons. Nous avons sélectionné la dernière version du framework Bootstrap, c'est-à-dire 5, en fait c'est 5.1, mais la submergence n'est pas mentionnée ici. Nous sélectionnons donc 5, qui est sélectionné par défaut. Ensuite, nous nommerons notre projet n'importe quoi. Appelons-le comme test 1. Ensuite, je cliquerai sur Créer. Dès que je clique sur Create, nous sommes maintenant dans le vrai studio de bootstrap. Nous avons maintenant compris comment commencer. Dans la vidéo suivante, nous allons comprendre l'interface utilisateur de Bootstrap Studio. se voit donc dans la vidéo suivante. 3. Interface utilisateur: Dans cette vidéo, nous allons comprendre l'interface utilisateur de Bootstrap Studio. Nous commencerons par ce coin. Nous avons ici deux panneaux. premier est un panneau de studio, puis un panel en ligne, mais nous ne l'appelons pas comme un panneau en ligne. Nous l'appelons simplement comme une subversion du panneau Studio. Il s'agit d'un panneau de studio. Dans le panneau Studio, nous avons deux choses. L'un est studio et l'autre est en ligne. Qu'est-ce que Studio IIS exactement. Studio est l'endroit où vous trouverez tous les composants présents dans Bootstrap Studio préinstallés. Cela signifie que bootstrap Studio est livré avec peu de composants et peu d'éléments HTML que les composants et les éléments HTML que vous trouverez dans le panneau Studio, vous en tant qu'utilisateur, le premier dossier sera l'interface utilisateur. Comme j'utilise Bootstrap Studio depuis tant de jours. Le dossier utilisateur est donc là pour moi. Plus tôt. Vous obtiendrez également ce dossier lorsque nous commencerons à télécharger les composants. panneau Studio est l'endroit où vous trouverez les composants et les éléments nécessaires à la conception de votre site Web. La deuxième chose est en ligne. Le panneau en ligne est, comme les noms suggérés, les composants qui ne sont pas présents dans le panneau Studio. Et vous voulez que les composants et les composants créés par d'autres personnes et les téléchargent dans la communauté, bootstrap Studio Community que vous trouverez dans le panneau en ligne et cliquez simplement sur Online. Et ici, vous verrez les composants les plus tendances. Ensuite, nous avons un commutateur de mode sombre. Je pense que ce composant nous aide à passer du mode sombre au mode clair. Il s'agit donc de quelques composants tendance, alors nous avons peu composants Let Us qui sont créés par la communauté. Toutes ces choses sont là. Il s'agit du panneau en ligne, et il s'agit d'un panneau de studio juste en dessous du parallèle du studio, c' est-à-dire la vue d'ensemble. Vous verrez l'aperçu de notre site Web basé sur une structure de notre site Web, vous verrez la vue d'ensemble du site Web. Une fois que nous commencerons à concevoir le site Web, vous comprendrez comment utiliser le panneau de présentation de manière très efficace. À gauche de notre écran, nous avons deux panneaux qui sont le studio et la vue d'ensemble. Au centre, nous avons encore deux panneaux. La première est la scène, ce que vous voyez au centre, c'est-à-dire l' écran blanc mis en scène. Et juste en dessous de la scène, vous avez le panneau de l'éditeur. Vous pouvez voir le texte HTML ici et un texte de style. Oh, oui. Il suffit de cliquer n'importe où entre les deux. Une fois que vous avez cliqué ici , vous verrez que l'éditeur de texte se trouve maintenant devant vous. Vous verrez tout le code HTML que Bootstrap Studio écrit pour vous. Dans cet endroit, c'est le style de cet endroit. Vous verrez tout le CSS déjà renvoyé ou vous souhaitez l'écrire juste en dessous de cette zone HTML, vous avez les attributs. Une fois que vous aurez cliqué sur ces attributs, vous verrez les attributs au-dessus de vous. Vous avez une clé et une valeur à saisir. Vous pouvez créer un ID et une classe à cet endroit uniquement. Laissez-moi vous montrer à quoi ça ressemble exactement. Dans le panneau de présentation, je vais sélectionner cette balise de corps. Une fois que j'ai cliqué sur la balise body, vous pouvez voir que le panneau attributaire est là. Vous pouvez appeler une unité d'identification, vous pouvez appeler un cours ici. Et vous pouvez également créer de nouvelles clés et de nouvelles valeurs. Il s'agit du CSS qui est déjà écrit pour vous à partir du framework Bootstrap. Vous pouvez voir les couleurs et toutes les autres spécifications se trouvent déjà dans cet endroit particulier. Canvas est la zone où vous verrez la conception de votre site Web. Et en haut de la zone de canevas, il y a quelques options. Voyons ça un par un. La première option consiste à effectuer un zoom avant, puis un zoom arrière. Vous pouvez effectuer un zoom avant et un zoom arrière sur votre canevas. Ensuite, nous avons un Flip Canvas. Vous pouvez faire pivoter l'unité d'organisation du canevas. Ensuite, nous avons l'option Ajuster au canevas. Une fois que vous avez cliqué sur l'option Ajuster au canevas, le Canvas s'adapte à cette zone particulière. Ensuite, nous avons peu d'options d'affichage. Ce que vous voulez voir, comme tracer une grille, modèles de boîtes d' exposition et tout ce que vous voulez voir. Ensuite, nous avons ici une taille de l'écran. La première est la largeur et la seconde est la hauteur. Vous pouvez le modifier une fois que vous commencez à concevoir le site Web, la hauteur du site Web change en fonction de la longueur du site Web, puis vous avez un pourcentage d'unité d'organisation et une petite flèche. Oh, oui. Une fois que vous avez cliqué sur la flèche, vous pouvez voir la liste des appareils mobiles pour voir à quel point nous ressemblerons exactement à un site Web sur ce mobile particulier. Ensuite, nous avons une option de sélection de page ici. C'est l'endroit où vous pouvez sélectionner la page ou créer une nouvelle page lorsque vous avez plusieurs pages, au moins la page viendra dans cette zone particulière, puis vous pouvez simplement cliquer sur une nouvelle page pour en créer une nouvelle. page. Nous avons également l'autre option de créer une nouvelle page. Nous verrons également que dans cette vidéo seulement après que nous ayons six tailles d'affichage où nous pouvons voir exactement à quoi elle ressemble sur notre taille d'affichage particulière. Le premier ici est le double XL, c'est-à-dire un écran extra large. Ensuite, nous avons un écran Excel, c'est-à-dire un écran très grand. Ensuite, nous avons un grand écran, nous l'appelons LG. Ensuite, nous avons un appareil de taille moyenne qui est MD dans Bootstrap Studio. Ensuite, nous avons une petite taille, il y a SM. Ensuite, nous avons une taille extra petite qui est l'accès. Nous avons donc six tailles d'appareils spécialement conçues pour Bootstrap Studio. Et en fonction de la taille de cet appareil, le système de grille fonctionne. Qu'est-ce que le système de grille ? Et tout ce que nous verrons dans les vidéos ultérieures. C'est la toile. Le projet que vous avez sélectionné. Le nom du projet vient ici, c'est le premier test. Et juste après le nom, si vous voyez une étoile, cela signifie que ce projet n'est pas encore enregistré. Assurez-vous de sauvegarder le projet car il s'agit d'un premier projet test, nous n'allons rien faire là-dedans. Je ne sauvegarderai donc pas ce projet, mais si vous le souhaitez, vous pouvez l'enregistrer. Sur le côté droit de notre écran, nous avons deux panneaux. L'un est le panneau d'option et l'autre est un panneau conçu. Dans le panneau d'options, nous avons trois sous-parties. L'un est l'apparence, l' autre est les options et l'autre est l'animation. Dans le panneau Apparence, vous pouvez modifier l'apparence du composant ou de l'élément. Vous pouvez modifier la mise en page, police, l'arrière-plan, les bordures, tous les éléments principaux. Vous pouvez également voir comment exactement la marge et le remplissage sont affectés à un composant ou à un élément particulier. Après cela, nous avons un panneau d'options. Vous êtes basé sur les composants. Les deux premières options vont changer. Les dernières choses resteront semblant. Mais si vous sélectionnez le corps , seules ces deux options sont disponibles. Il s'agit de l'option texte et de la Flexbox. Mais lorsque nous commençons à concevoir le site Web, lorsque nous sélectionnons les différents composants ou éléments, les options changeront en fonction des composants que les options changeront en fonction nous avons sélectionnés dans le panneau d'options, nous aurons tellement d'options pour modifier les composants. Ensuite, nous avons le panneau Animation ici. Ceci est utilisé pour animer un composant ou un élément particulier. Juste en dessous, nous avons un panneau de conception où nos ressources projetées sont organisées de manière systématique. Nous avons peu de dossiers là-dedans. Le premier dossier est la page. Si vous cliquez sur cette flèche, vous pouvez voir que la page index.html est là. Chaque fois que vous ouvrez un nouveau projet dans Bootstrap Studio, il s'agit d'une page par défaut que vous obtenez et vous ne pouvez pas supprimer cette page. Chaque fois que vous créez une nouvelle page HTML, cette page se trouve automatiquement dans ce dossier Pages. Après cela, nous avons un dossier de styles dans lequel les fichiers SSS et SAS resteront dans ce dossier. Ensuite, JavaScript, tout le fichier JavaScript restera dans ce dossier. Ensuite, nous avons des polices de caractères. Toutes les polices resteront à l'intérieur, et les images resteront à l'intérieur. Vous pouvez également créer un sous-dossier à l'intérieur de ce dossier particulier. Mais vous ne pouvez pas déplacer les fichiers d'un dossier vers un autre dossier. Cela signifie que vous ne pouvez pas déplacer le fichier CSS de points vers un fichier HTML. Le fichier STL restera dans le dossier Pages uniquement à l'intérieur du dossier Pages, vous pouvez créer plusieurs dossiers et vous pouvez déplacer le fichier HTML à l'intérieur de ces dossiers, qui se trouvent dans le dossier Pages. Par conséquent, pgs est un dossier parent. Et dans le dossier Pages, vous pouvez créer plusieurs dossiers. C'est ce que le panneau de conception est facile en haut, nous avons peu d'options ici qui sont nouvelles. Nous pouvons créer un nouveau design ici, puis l'ouvrir, créer un nouveau design, puis enregistrer les paramètres d'exportation de leurs paramètres. Y a-t-il, l' option Annuler la restauration est là. Nous pouvons également prévisualiser notre site Web pendant que nous concevons, nous pouvons prévisualiser notre site Web plusieurs appareils simplement en saisissant l'adresse IP. Nous le verrons également dans les vidéos ultérieures. L'option publiée existe également. Vous pouvez publier la conception, publiée dans le sens où vous pouvez exporter la conception sur votre machine locale ou directement, publier la conception à partir ici sur le serveur à l'aide du compte Cloudflare. Nous le verrons donc dans les vidéos ultérieures. C'est donc ce que l'interface utilisateur du studio bootstrap lors de la conception du site Web, c'est l'endroit où nous allons passer la plupart du temps. J'espère donc que vous comprenez l'interface utilisateur du studio bootstrap. Et dans la vidéo suivante, nous verrons comment importer un composant dans le projet Bootstrap Studio. On se voit dans la vidéo suivante. 4. Comment importer un composant: Dans cette vidéo, nous allons voir comment importer un composant depuis panneau RStudio vers la scène ou vers le panneau de présentation. Dans les deux sens, nous verrons qu'il s'agit du panneau du studio. Et vous pouvez voir que l'option de recherche des composants est OEO. Au début, ce que nous allons faire, nous allons commencer par la barre de navigation. Nous allons importer notre barre de navigation ici. Je vais donc taper nav. Dès que je taperai NAB, vous verrez peu de composants ici. C'est la navigation, la barre de navigation, la navigation propre et toutes ces choses. Nous utiliserons le deuxième composant qui est la barre de navigation. Comment importer le composant ? C'est très simple et il suffit de cliquer, maintenir la souris, de cliquer, glisser et de déposer dans le Canevas. Glisser-déposer dans la vue d'ensemble parallèle. Par conséquent, si vous déposez cela dans le panneau d'aperçu, vous devez passer par-dessus la balise body. Une fois que vous aurez pris le plus de pointeur ou l'étiquette de corps, vous verrez que le contour bleu est là. Il suffit de prendre le pointeur de votre souris ici et de relâcher le clic de souris. Une fois que vous avez libéré le plus cliqué, vous verrez immédiatement la sortie du composant. Il s'agit d'un composant, la barre de navigation, nous appelons cela comme un composant car à l'intérieur ce composant, nous avons plusieurs autres composants. L'un est navbar, marque navbar à l'intérieur, puis nous avons navbar-basculer cette navbar-collapse. Si nous ouvrons un effondrement de la barre de navigation, nous avons à nouveau un nouveau composant qui est nav. Ensuite, nous pourrons l'ouvrir également. Ensuite, nous verrons un objet de navigation. À l'intérieur de l'article de navigation, vous êtes, nous avons un élément. Il s'agit d'un élément de lien qui est une balise. Donc, pour voir le code écrit par Bootstrap studio, c'est le code HTML. Nous allons simplement cliquer sur le panneau de l'éditeur et nous pouvons voir que tout le code est écrit pour nous. Vous pouvez voir qu'il s'agit de la balise sélectionnée ici. Ce que vous allez sélectionner dans ce panneau de présentation, cette ligne particulière sera sélectionnée dans cette zone de l'éditeur de texte. Et tout ce que vous sélectionnez, votre composant particulier sera sélectionné dans le panneau de présentation. Nous allons sélectionner ce corps ici. Une fois que j'ai cliqué sur le corps, vous pouvez voir que le corps est maintenant sélectionné dans les deux zones. C'est l'endroit où vous pouvez voir le code HTML, comment exactement le code HTML est écrit. Vous pouvez voir qu'il est écrit de manière très professionnelle. Tous les alignements et toutes les sections sont écrits très clairement. Maintenant, si vous voulez modifier quoi que ce soit, il vous suffit de sélectionner le composant en fonction de la sélection, les options et le panneau d' apparence changeront et vous aurez la liberté d'effectuer les modifications, pour apporter des changements complets à cet égard. C'est ainsi que nous importons le composant dans le studio bootstrap. C'est très simple. Il suffit de rechercher le composant, de sélectionner le composant, faire glisser et de déposer sur la scène ou de faire glisser et déposer dans le panneau de présentation. Allons-y encore une fois. Après cela, ce que je vais faire, je viendrai ici et j' essaierai d'importer un nouveau composant. Voyons voir, des composants prêts à l'emploi sont dans, il suffit de venir à l'interface utilisateur et dans le média. Voyons ce que c'est exactement. J'ai une galerie de photos. Sélectionnez cette galerie de photos. Maintenant, je vais importer ça depuis la scène. Je vais juste prendre mon meilleur pointeur et je viendrai ici. Vous verrez qu'une ligne bleue est là, et une petite flèche est également morte. Il s'agit donc d'une petite flèche. Cela signifie que si vous déposez ce composant en particulier ici, ce composant se trouvera juste dessous de cette ligne bleue particulière. Et au-dessus de la ligne bleue, nous avons la barre de navigation du composant. Juste en dessous de la barre de navigation, cette galerie Lightbox. Bienvenue. Vous pouvez également voir le nom de la galerie Lightbox. Cela signifie que cela montre que la Lightbox Gallery est sur le point d' arriver dans cette zone particulière dès que vous relâchez le clic de souris. Alors relâchons le clic de souris. Et maintenant, vous pouvez voir la galerie Lightbox est là. Dans le panneau de présentation. Vous pouvez voir que la barre de navigation est là. Juste en dessous de la barre de navigation, vous avez cette galerie Lightbox. Voyons maintenant comment importer un composant entre deux composants. Importons donc cet arrière-plan parallaxe juste entre cette barre de navigation et une section. L'importation d'un composant entre deux composants est difficile à l'étape, mais c'est facile depuis le panneau d'aperçu, que devez-vous faire ? Vous n'avez qu'à faire glisser ce composant ici. Lorsque vous faites glisser ce composant, vous pouvez voir maintenant que le corps est en contour bleu. Cela signifie que si je relâche, il ira à l'intérieur du corps et qu'il ira juste en dessous de la section de la visionneuse. Mais nous voulons que ce composant devienne entre la barre de navigation et la section. Je prendrai mon pointeur de souris sur un an et je vais le garder ici. Vous pouvez voir une ligne horizontale entre la barre de navigation et une section. La section est Lightbox Gallery. Lorsque vous voyez cette ligne horizontale, cela signifie que si je libère ce composant ici, il entrera entre la barre de navigation et la galerie Lightbox. Et c'est ce que nous voulons faire. Il suffit de relâcher mon pointeur de souris. Et maintenant, vous pouvez voir que cet arrière-plan de parallaxe se trouve désormais entre la barre de navigation et la galerie Lightbox. Vous pouvez voir qu'il s'agit d'une barre de navigation. C'est un fond de parallaxe. Ensuite, nous avons une galerie Lightbox. À cette étape, vous pouvez voir à quoi ressemble exactement le site Web. Dans le panneau de présentation, vous pouvez voir la présentation du site Web. Vous pouvez maintenant voir dans les styles que vous avez que ce CDN est importé. Le fichier CSS Lightbox Gallery est également présent. J'espère que vous comprenez comment importer les composants dans Bootstrap Studio. Dans la vidéo suivante, nous verrons comment modifier les composants. se voit donc dans la vidéo suivante. 5. Modification du composant ou de l'élément: Maintenant, nous avons compris comment importer les composants. Et dans cette vidéo, nous verrons comment éditer les composants. Pour modifier d'abord les composants, nous allons sélectionner le composant. Nous pouvons le sélectionner à partir de la scène ou du panneau de présentation. La sélection du composant dans une étape est simple. Lorsque je survole le pointeur de la souris sur n'importe quel élément ou composant, vous pouvez voir le nom du composant ici. Et vous pouvez également voir un contour bleu, comme une bordure bleue ici. Il s'agit de la zone de cette rubrique particulière. Je le sélectionnerai dès que vous le verrez, un tas d'icônes ici. Cette première icône signifie déplacer. Il suffit de cliquer et de faire glisser n'importe où vous voulez. Vous pouvez déplacer le composant, vous pouvez déplacer cet élément particulier. Ensuite, nous avons une flèche vers le haut. Cela signifie sélectionner un parent. Dès que vous cliquez sur cette icône en particulier. Vous pouvez voir dans la vue d'ensemble parallèle, il s'agit de l'en-tête que nous avons sélectionné. Maintenant, le parent de cette rubrique est ce malheur. Et si je clique sur cette flèche appelée Sélectionner un parent, vous pouvez voir maintenant que l' offre est sélectionnée. Cela signifie que lorsque vous cliquez sur cette flèche, il sélectionne le parent de ce composant ou d'un élément particulier. Ensuite, nous avons la modification. Cela signifie que si vous cliquez sur cette modification, vous pouvez modifier le texte ici. Au lieu de cette visionneuse. Ce que vous pouvez faire, vous pouvez lier une photo ici et simplement appuyer sur la touche Entrée. Et vous pouvez voir maintenant qu'il s' agit d'une galerie de photos. C'est donc à cet endroit que vous pouvez modifier le composant ou le texte. N'importe quoi. Ensuite, c'est le double. Si vous souhaitez dupliquer ce composant particulier ou un texte, vous pouvez le dupliquer. Cette option est très utile lorsque vous souhaitez dupliquer le composant avec tous les styles et CSS et quelles que soient les modifications que nous avons apportées. Et vous voulez que tous ces styles soient édités dans un nouveau composant, vous pouvez simplement le dupliquer. Ensuite, vous avez la possibilité de la hauteur. Si vous cliquez dessus, vous pouvez simplement masquer ce composant. Vous pouvez voir que le composant est toujours là, mais il est maintenant masqué. Et comment afficher à nouveau ce composant. Pour cela, vous devez accéder au panneau de présentation, cliquer avec le bouton droit de la souris et cliquer sur Afficher. Un autre composant est de retour. Si vous souhaitez supprimer le composant, vous suffit de cliquer sur cette icône de suppression ici, puis de supprimer le composant. Il en va de même avec l'image. Si vous sélectionnez cette année, vous pouvez voir l' option Déplacer. Sélectionnez ensuite l'option parent. Y a-t-il un double est leur hauteur, y a-t-il, supprimer, y a-t-il. L'option d'édition n'est pas présente car l'édition de l'image n'est pas ce que nous pouvons faire dans Bootstrap Studio, mais nous pouvons modifier l'image. Comment modifier l'image ? Double-cliquez ici et vous pouvez voir une boîte de dialogue Choisir une image apparaîtra devant vous et quelles que soient les images importées dans ce projet particulier, vous serez devant vous dans dans ce domaine particulier. Si vous avez une structure de dossiers , les dossiers vous seront également parvenus. Vous pouvez sélectionner n'importe laquelle de ces images. Une fois que vous avez sélectionné l'image. Et si vous cliquez sur OK, cette image viendra à cet endroit particulier. Encore une fois, il suffit de double-cliquer et de modifier l'image. C'est ainsi que nous pouvons modifier l'image. De la même façon, nous pouvons le faire à partir du panneau d'aperçu. Il suffit de sélectionner cette balise d'image. Et si vous double-cliquez ici de la même manière, choisissez une boîte de dialogue d'image qui se trouve devant vous. Ce sont les quelques options et les techniques par lesquelles vous pouvez modifier le composant ou modifier l' image et tout cela. Nous verrons toutes ces options en détail ainsi que dans les vidéos à venir. Et dans la section suivante, j'espère que vous comprendrez comment modifier le composant ou un élément de cette vidéo. Si ce n'est pas le cas, vous pouvez simplement lire cette vidéo à nouveau. Ce sera la fin de cette section. la section suivante, nous verrons le panneau d'options en détail et nous comprendrons comment le panneau d'options s'accroche. se voit donc dans la section suivante. 6. Mise en page: Avant de commencer cette vidéo, nous devons ouvrir un design que j'ai créé pour vous. Dans cette conception, nous allons effectuer les modifications et nous comprendrons le panneau d' apparence pour cela, vous devez trouver la pièce jointe, les fichiers de ressources dans le fichier de ressources. Le deuxième dossier est constitué de fichiers BSS. À l'intérieur des fichiers CSS, il y a un autre dossier pour commencer. Vous devez ouvrir le premier fichier en cours de démarrage, point BS design. C'est le fichier que j'ai créé un design grossier. Dans cette conception grossière, nous allons comprendre le panneau d'options à partir options d' apparence et des animations à l'aide de ce design. Commençons par la première option du panneau Apparence. Pour cela, je dois sélectionner n'importe quel composant. Nous allons donc commencer par cette section. Je vais sélectionner cette section. Dès que je sélectionne cette section, je verrai l'apparence et les options à l'intérieur de l'apparence. Dans cette vidéo, nous verrons des mises en page. Dans les mises en page, nous avons quatre options, savoir la largeur, la hauteur, la marge et le rembourrage. Et dans toutes ces options devant toutes ces options, nous avons cette flèche. Lorsque vous cliquez sur cette flèche, vous verrez les sous-options qui sont largeur minimale et la largeur maximale. Après cela, en hauteur, nous avons une hauteur minimale et une hauteur maximale. Dans la marge, nous avons une marge, marge supérieure, une marge droite, une marge inférieure à gauche. Dans le rembourrage encore, nous avons du rembourrage, du haut, rembourrage, du bas de rembourrage et du rembourrage à gauche. Ce que cela signifie exactement. Si vous modifiez la largeur ici, la largeur du composant particulier sera modifiée. Voyons voir. J'ai sélectionné cette section et vous pouvez voir le contour bleu ici. Cela signifie que c'est la section que nous avons sélectionnée. Si j'augmente la largeur, vous pouvez voir que la largeur du composant augmente. Le texte et les boutons se déplacent vers la droite. Pourquoi ? Parce que j' augmente la largeur. Et la largeur n'augmente que dans le côté droit. Dans cette section particulière, la largeur augmentant la largeur n'est pas nécessaire. Nous allons donc simplement le faire par défaut. Maintenant, vous ne savez pas quel est le numéro quatre par défaut ici, nous avons deux options. Si vous n'avez modifié que la largeur, vous pouvez simplement cliquer sur Réinitialiser tout, il réinitialisera toutes les options de la section Disposition. Sinon, sélectionnez simplement ceci, appuyez sur l'espace arrière et appuyez sur Entrée, et il reviendra à la largeur d'origine. À partir de là, vous pouvez augmenter la largeur. Vous pouvez définir la largeur minimale d' un composant particulier et la largeur maximale d'un composant particulier. Ensuite, nous avons de la hauteur. Semblable à la largeur. Nous pouvons augmenter la hauteur. Maintenant, vous pouvez voir que la hauteur augmente. Vous pouvez voir maintenant que la ligne bleue arrive ici. Auparavant, c'était quelque part ici. Ainsi, vous pouvez augmenter la hauteur d'un composant. De même, nous pouvons modifier la hauteur minimale et la largeur minimale. Nous verrons ces options particulières lorsque nous commencerons à concevoir le site Web. Nous avons maintenant de la marge. Marge. Nous pouvons le changer dans les quatre directions, ou nous pouvons le changer en une seule fois. La première option, c'est juste la marge. Si nous modifions l' option ici, elle s'appliquera en haut à droite, en bas à gauche. Voyons voir. Si je le fais dix, alors les quatre sous-options obtiennent la marge de dix pixels. Maintenant, vous pouvez voir que la marge est également là. Vous pouvez voir un léger écart s' il y a là, cela signifie que la marge est appliquée. Si vous souhaitez simplement appliquer une marge spécifique, à une zone spécifique. Vous pouvez donc simplement cliquer sur cette flèche , puis modifier la valeur de la marge supérieure. Supposons que si vous souhaitez modifier la marge supérieure, vous pouvez simplement modifier la valeur de la marge supérieure. Comme ça. Les trois autres resteront à 0 et la seule marge de couple changera. C'est ainsi que vous pouvez modifier la marge. De la même façon, vous pouvez jouer avec le rembourrage. Si vous souhaitez modifier le remplissage de toutes les directions en même temps, vous pouvez modifier la valeur dans l'option de remplissage. Vous pouvez simplement descendre et modifier le rembourrage des options individuelles. Par défaut, le rembourrage, le haut bas du rembourrage sont de 50 pixels et la droite et la gauche sont 0. Si vous souhaitez modifier le rembourrage droit et le rembourrage gauche, vous pouvez modifier la valeur au-dessus de vous. C'est ce que nous avons dans la section de mise en page, largeur, la hauteur, la marge et le rembourrage. Dans la vidéo suivante, nous verrons la section des polices. se voit donc dans la vidéo suivante. 7. les polices de caractères: Dans cette vidéo, nous verrons la section police. Voyons les options de cette police. Nous avons d'abord de la couleur. Cela signifie que nous pouvons modifier la couleur de la police. Ensuite, nous avons la taille de police. Et vous pouvez voir qu'il n'y a pas de flèche devant le mot couleur. Cela signifie qu'il n'y a pas de sous-options. Ce n'est qu'une option que la couleur. Après cela, nous avons une taille étrangère devant les sites étrangers, nous avons cette flèche. Lorsque vous cliquez sur cette flèche, vous verrez hauteur de ligne et l'interligne. Ensuite, nous avons une famille étrangère. Nous pouvons modifier les styles de police. Et encore une fois, nous avons la flèche ici. Si vous cliquez sur la flèche, vous pouvez voir poids de police et le style de police. Et enfin, nous avons un alignement. Nous avons donc peu d'alignements ici. Le premier est à gauche, puis au centre, puis à droite, puis à justifier. Voyons un par un. Si nous voulons modifier la police, sélectionnons ici cette police qui est mise en surbrillance. Et maintenant, nous allons changer la couleur de la police. Il existe peu de préréglages prêts à l'emploi de la couleur donnée par Bootstrap et cette couleur prédéfinie prête à l'emploi ne sont que des UO. À l'heure actuelle, vous ne pouvez voir que cinq couleurs ici, mais elles sont plus nombreuses. Il suffit de cliquer sur cette option plus ici, c'est la dernière. Vous pouvez voir les trois points ici. Il suffit de cliquer dessus. Vous pouvez voir toutes les autres couleurs de ce préréglage particulier. Il vous suffit donc de cliquer sur n'importe quelle couleur, et c'est tout. La couleur est changée maintenant, c'était noir, maintenant c'est rouge. Si vous voulez une couleur spécifique qui ne figure pas dans cette palette particulière, vous pouvez simplement cliquer sur ce bouton de couleur ici vous pouvez voir une couleur rouge ici. Vous pouvez simplement cliquer dessus. Ensuite, vous arriverez à cette option de sélection de couleurs particulière. Vous avez quatre sous-panneaux différents dans le premier est sélectionné. C'est l'endroit où vous pouvez sélectionner la couleur, puis créer. Peu de palettes de couleurs sont disponibles ici. Puis les favoris, la couleur préférée que vous avez ajoutée. Ensuite, nous avons une bibliothèque. Les bibliothèques sont comme une seule couleur avec des différenciations. C'est jaune. Ensuite, nous passons au rouge, au rose, au bleu, au vert. Toutes les couleurs sont facilement disponibles ici dans la bibliothèque que nous allons sélectionner. Ici, nous avons les options de sélection de couleurs prêtes pour nous. En bas, nous avons une ligne UE, c' est-à-dire HUB you line, c'est-à-dire que nous avons toutes les couleurs ici. Il suffit de faire glisser la souris sur cette ligne particulière. Et la couleur que vous voulez, il suffit de libérer le plus de points autour de cette zone particulière. Ensuite, vous obtiendrez les nuances des couleurs, ou vous pouvez simplement sélectionner n'importe quelle teinte. C'est le point. Vous pouvez voir une boîte ici. Cette case signifie que cette couleur est sélectionnée. Vous pouvez sélectionner n'importe quelle couleur ici. Vous devez vous assurer de la couleur que vous voulez. Dès que vous déplacerez la souris. De là, vous pouvez voir l'aperçu en direct dans cette zone particulière. Il vous aidera à comprendre quelle couleur vous voulez et quelle couleur convient parfaitement à votre design. Je vais simplement sélectionner cette couleur. Et juste en dessous, nous avons ici un canal alpha qui est l'opacité de la police. Vous pouvez simplement réduire l'opacité pour la rendre transparente. Et c'est l'opacité de 100 %, et c'est l'opacité de 0 %. Vous pouvez également jouer avec ça. Si vous souhaitez sélectionner une couleur spécifique déjà disponible dans votre projet, vous disposez d'un outil pipette ici. Il suffit de cliquer sur l' outil Pipette et vous verrez qu'un autre curseur est là. Vous pouvez voir un cercle. Et dans ce cercle, vous avez une boîte. Au centre, vous avez la boîte rouge. Cette zone correspond à la zone dans laquelle vous allez sélectionner la couleur. Une fois que vous venez ici, vous pouvez voir qu'une boîte rouge se trouve maintenant dans cette zone de couleur bleue. Si vous avez porté cette couleur bleue, il suffit de cliquer sur cette couleur bleue et la flèche, la sélection est automatiquement déplacée vers cette couleur bleue particulière. Et si vous avez aimé cette couleur bleue, cliquez simplement sur Sélectionner et c'est terminé. C'est ainsi que vous allez changer la couleur. Vous allez sélectionner la couleur. Après cela, nous avons une taille étrangère. Si vous souhaitez modifier la taille étrangère, vous pouvez simplement modifier la taille étrangère à partir d'ici. Par défaut, la taille était 32 et vous pouvez modifier la taille étrangère. À l'intérieur des sites étrangers, nous avons deux options qui sont la hauteur de ligne. Si vous souhaitez modifier la hauteur de la ligne, vous pouvez également modifier la hauteur de la ligne. Et si vous souhaitez modifier l'espacement des lettres, vous pouvez également modifier l'espacement des lettres. Voici donc comment modifier l'espacement des lettres. Si vous souhaitez ramener ces options à l'état par défaut est sélectionné et appuyez sur le retour arrière et entrez, sélectionnez Retour arrière et entrez, sélectionnez Retour arrière et saisissez. Et c'est maintenant la taille par défaut. Après cela, nous avons formé une famille. Nous pouvons modifier la police à partir de vous. Par défaut, vous pouvez voir la police. Y a-t-il un système alpha, certains étrangers le sont, une police est appliquée. Pour modifier la police. Il vous suffit de cliquer sur cette unité d'organisation flèche et vous verrez l'option Ajouter une police. Y en a-t-il ? Il suffit de cliquer sur l'option Ajouter une police et le moins de polices se présentera devant vous. Il y a tellement de forums. Vous pouvez effectuer une recherche dans le formulaire à partir de l'année car il y a tellement de formulaires. Pour l'instant, ce que je vais faire, je vais simplement sélectionner n'importe quelle police aléatoire que je vais remplir. Ce sera bien. Je vais juste y aller, je vais aller avec celui-là. Et comment allumer ce téléphone ? Il suffit de cliquer sur cette case à cocher. Une fois qu'il est coché, il suffit de cliquer sur Enregistrer. La police est maintenant importée. Vous pouvez voir dans les polices du panneau de création, vous pouvez voir que la police est déjà là. Auparavant, il était vide. Maintenant, la police est là. Et maintenant, nous voulons changer le formulaire, sélectionner le composant ou l'élément, venir dans la famille étrangère, cliquer sur la flèche et maintenant vous pouvez voir la police. C'est là. Il suffit de cliquer sur cette police et le boom, la police est modifiée. la même façon, vous pouvez modifier le poids de la police. Vous pouvez augmenter le poids étranger de normal à gras. Deux options sont disponibles, normales et audacieuses. Et dans le style font-style, vous avez d'autres options normales, italiques et toutes les choses. Donc, si je clique sur Data Lake, le forum se convertira en style italique. Les oraux reviennent à la normale. C'est ce qu'ils sont dans une famille étrangère. Et maintenant, l'alignement. En alignement, nous avons une astuce ici. Cet alignement est déjà centré, mais ici vous pouvez voir que l'alignement central n' est pas sélectionné. Vous voulez, si je clique sur l'alignement à gauche, la police ne sera pas alignée à gauche. La raison en est que l'alignement formé est contrôlé dans le panneau d'options. Si je vais dans le panneau Options, vous pouvez voir que l' alignement est centré. Si l'alignement de cette police est contrôlé par le panneau Options, si vous apportez des modifications à la preuve, elle ne sera pas modifiée. Il est très courant que lorsque vous concevez le site Web, si vous modifiez l'alignement des polices par rapport à l'année et si l'alignement ne change pas , ne vous énervez pas. Il suffit d'aller dans le panneau Options et de modifier l' alignement à partir de vous. Dans la section suivante, nous arrivons au panneau Options, mais terminons le panneau d' apparence l'année en premier. C'est ainsi que la section des fermes contrôle la première couleur Est, vous pouvez modifier la couleur, puis la taille étrangère que famille étrangère, puis l'alignement. Il est très facile que sans écrire le code, nous puissions enchaîner la majorité des choses. C'est ainsi que la section de formulaire facilite. Et dans la vidéo suivante, nous verrons l'arrière-plan sous l'épiderme. se voit donc dans la vidéo suivante. 8. Arrière-plan: Et dans cette vidéo, nous allons voir le contexte. En arrière-plan, nous avons trois options majeures. première option est d'ajouter une image, puis nous avons ajouté un dégradé, et enfin nous avons BG. Bg n'est rien d'autre que du fond. La forme courte de l'arrière-plan est BG add gradient. Et bg color est spécifiquement lié aux couleurs uniquement. Et ajoutez une image dans le sens où nous pouvons ajouter l'image en arrière-plan. Donc, ce que nous allons faire, au lieu d'aller droit, nous verrons en arrière, cela signifie que nous verrons d'abord la couleur de fond. Ensuite, nous verrons ajouter un dégradé. Et enfin, nous verrons Ajouter une image. La couleur d'arrière-plan est aussi similaire aux couleurs de la police. La seule différence sera cette option particulière changera. Il appliquera une couleur à l'arrière-plan de l'objet en particulier. Qu'est-ce que c'est exactement, voyons voir. Comme la couleur. Nous avons une couleur de thème, qui est là. On peut voir ici. Il suffit de cliquer sur n'importe quel arrière-plan. Comme c'est comme une légère couleur rouge, nous allons essayer de donner une couleur noire à l'arrière-plan. Il s'agit donc d'une couleur noire, mais ce n'est pas un noir complet. Il s'agit d'un grades ou gris foncé. Oui, c'est écrit ce gris foncé. Donc, une fois que j'ai cliqué sur cette couleur, vous pouvez voir maintenant que la couleur d' arrière-plan est remplie de cette couleur. Il s'agit de la couleur d'arrière-plan. De même, si vous voulez une couleur différente, une couleur spécifique qui ne figure pas dans cette palette de couleurs particulière, il vous suffit de cliquer sur ce sélecteur de couleur année facultative. Au lieu de Design, accédez à Sélectionner, sélectionnez une couleur spécifique que vous souhaitez. Disons que je veux cette couleur particulière où la valeur en dB rouge est 384041. Et je l' utiliserai fréquemment, juste par exemple, comme je l' utiliserai fréquemment, donc je le mettrai dans le favori. Et maintenant, j'ai deux couleurs dans l'échec. L'un concerne le texte et l'autre pour l'arrière-plan. Maintenant, je vais cliquer sur Sélectionner. C'est ça. C'est ainsi que vous allez appliquer la couleur d'arrière-plan. Vous pouvez me demander si je voulais donner une couleur d'arrière-plan à toute la page ? Oui, c'est simple. Sélectionnez la balise de corps et modifiez la couleur d'arrière-plan. Pour ça. Je vais vous montrer comment c'est exactement. Je sélectionne la balise body, body dans le sens, c' est une page Web complète. Juste à partir de ce haut. Cette fin de page est un corps. Cette étiquette de corps que je vais sélectionner. Je viendrai à la couleur de fond, et je n'utiliserai que cette couleur. Je vais simplement cliquer sur cette couleur. Et c'est tout. La couleur du corps est modifiée. Pourquoi cette zone ne change-t-elle pas ? La raison derrière cela, c'est qu'il a déjà une couleur de fond. Maintenant, comment supprimer cette couleur particulière, comment supprimer une couleur blanche. Nous n'avons pas de couleur nulle ici. Je vais vous le montrer également. Maintenant, ce que je vais faire, je vais sélectionner cette zone particulière, c' est-à-dire la section, juste en dessous de la barre de navigation. Nous avons cette section. Je vais sélectionner cette section. Et maintenant, vous pouvez voir la couleur de fond de la section de cette section particulière est Grundy cinq, vingt-cinq, vingt-cinq, rouge , vert et bleu à vingt-cinq. Vingt-cinq, vingt-cinq. Cela signifie qu'il s'agit d'une couleur blanche. Cliquez sur ce sélecteur de couleurs. Allez dans la sélection, allez dans Sélectionner. Et maintenant, cette opacité est la bonne. Je vous l'ai dit, c'est la transparence ici qui est alpha. Ramenez cet alpha à 0. Une fois que j'ai ramené cet alpha à 0, il a maintenant une couleur nulle, aucune couleur pour cette section particulière. Vous pouvez voir maintenant RGBA que vingt-cinq, vingt-cinq, vingt-cinq, vingt-cinq, mais l'Alpha est 00 en ce sens Z pour compléter une transparence de 100%. Maintenant, si nous voulons un ingrédient dégradé dans le sens d'un mélange de deux couleurs, si nous voulons cette option particulière, alors ce que nous allons faire, nous utiliserons cette option appelée dégradé. Ce que je vais faire, au lieu de placer le dégradé ici, je vais sélectionner la deuxième section, c' est-à-dire l'année horizontale du projet. Nous appliquerons le dégradé. Bon, je vais juste faire défiler ça vers le bas. Laissez-moi voir comment ça s'est passé exactement. Vous pouvez voir cette couleur bleue ici, la ligne bleue ici. C'est donc la fin de la section. Cette partie en particulier, cette partie est ce qu'est notre deuxième section. Nous ne faisons que des projets horizontaux. Nous allons ajouter un dégradé. Ce que je vais faire, je cliquerai sur Ajouter un dégradé. Dès que je clique sur Ajouter un dégradé, vous pouvez voir que la couleur d'arrière-plan n'est pas transparente, elle est entièrement transparente. OK ? L'option Dégradé est maintenant activée. Maintenant, vous pouvez voir en haut que nous avons une couleur noire et au bas de cette zone particulière, nous avons une couleur blanche. Pourquoi est-il noir et blanc ? Tout simplement parce que par défaut la couleur du dégradé est noir et blanc. Vous pouvez voir que c'est noir et blanc. Bon, voyons les options à l'intérieur du dégradé. La première option est le type. Nous avons deux types de dégradés. L'un est le dégradé linéaire, que nous venons de sélectionner. Et le second est un dégradé radial. Quelle est la différence entre gradient linéaire et le dégradé radial ? dégradé linéaire signifie qu'il se déplace en ligne droite. Vous pouvez voir que la couleur noire est là et la couleur blanche est ici. Il est en voyage. La couleur noire passe à la couleur blanche en ligne droite. Mais cela signifie qu'il s'agit d'un dégradé linéaire. dégradé linéaire se déplace en ligne droite, mais l'angle peut être modifié à partir de l'endroit où nous continuons dans l'angle. C'est ici que l' on peut changer d'angle. Maintenant, il est par défaut de 180 degrés. Je peux changer l'angle pour que vous puissiez voir maintenant la couleur noire est jaune et que la couleur blanche l'est encore. Mais encore une fois, il se déplace en ligne droite. Seul l'angle de déplacement est de 148 degrés. Ok, c'est 148 degrés. Nous allons donc le ramener à la valeur par défaut. Je vais juste l'enlever. C' est donc l'angle du dégradé. Voyons maintenant comment changer la couleur du dégradé. La première est noire et la seconde est blanche. Vous pouvez également modifier le décalage de cette zone particulière. Je vais changer le décalage de cela et vous pouvez voir la couleur noire prend la place supplémentaire simplement parce que dans ce domaine particulier, je dis que la couleur noire a la pièce supplémentaire qui est décalée. Je lui donne de la place supplémentaire. Cette pièce supplémentaire est appelée offset. C'est ce que je fais, donc je vais juste le ramener dans les coins extrêmes, les deux couleurs aux coins extrêmes. Changeons maintenant la couleur. Tout d'abord, je vais le sélectionner. Dès que je clique dessus, vous pouvez voir l' option de couleur ici. Maintenant. Maintenant, vous pouvez voir que la couleur noire est là. Cela signifie que c'est la couleur noire. Je vais simplement cliquer sur cette couleur rouge Oreo, la couleur de départ est rouge. Nous allons changer la couleur. La couleur rouge n'est pas belle. Il y a un peu chaud. Donc, au lieu de cela, ce que nous allons faire, nous prendrons une couleur bleue. C'est donc une couleur bleue. On peut le prendre de la couleur bleue. Gardons ça à la couleur fraîche. Je vais sélectionner cette couleur bleue, et je cliquerai sur sélectionner la première couleur est maintenant bleue. La deuxième couleur reprendra le bleu, mais nous changerons l' intensité de cette couleur. Donc je vais d'abord sélectionner cette couleur bleue, puis je viendrai sélectionner, puis je la déplacerai vers la partie la plus claire. Maintenant, je suis, c'est la couleur que je suis sélectionnée. Maintenant. Je cliquerai sur sélectionner la couleur du dégradé ressemble à ceci et elle est sous une forme linéaire. Le décalage est de 101 %, 100 % en ce sens, les deux sont dans les coins extrêmes. Il s'agit d'un décalage. Disons que je prends ce décalage vers quelque chose ici. Et je clique sur, répétez le dégradé. Vous pouvez maintenant voir le décalage. C'est exact Exactement En 50%, comme vous pouvez le constater, ce n'est pas 50 %. Le début de la couleur est celle-ci. D'accord, cette couleur bleue, la couleur bleu foncé. La couleur commence à partir de l'année. Il s'est terminé exactement dans les 50 %. Une fois qu'il atteint le 50%, il recommence immédiatement à partir de cette couleur bleue particulière. C'est donc à partir de cette couleur, couleur bleue, qui descend au blanc. Et l'officier a 50 ans. Dès que le décalage est terminé par rapport au stock. C'est-à-dire que c'est l'option de répétition. Ok, donc si je désactive cette option appelée répéter , le décalage prendra la couleur blanche, cette couleur bleu clair. Il donnera de la place supplémentaire. Et la couleur bleue va prendre la leçon. Bon, ramenons ça à 100 %. Et puis on y va, c'est le dégradé linéaire. dégradé linéaire signifie se déplacer en ligne droite. La couleur se déplace en ligne droite. Voyons maintenant ce qu' est le dégradé radial. dégradé radial signifie qu'il se déplace sous forme circulaire. Je vais donc le basculer sur le dégradé radial. Et maintenant, vous pouvez voir que la couleur bleue est au centre et dans la forme circulaire, cette couleur change. Au centre, il est bleu. En haut à gauche, il est blanc. En bas à gauche, il est blanc en bas droite, c'est blanc en haut à droite, c'est blanc. Il se déplace donc du centre aux âges sous cette forme circulaire. Si vous souhaitez modifier la couleur RLC, si vous souhaitez inverser les couleurs, vous pouvez modifier le décalage. Vous pouvez prendre cette couleur à ce stade et cette couleur jusqu'à ce point. Et on y va. Si vous souhaitez conserver la même couleur mais sous forme de retournement. Vous pouvez donc simplement le ramasser et l'amener dans l' autre sens. L'option de dégradé fonctionne comme ceci. Vous avez donc deux dégradés. L'un est un dégradé linéaire qui se déplace en ligne droite, et l'autre est un dégradé radial qui se déplace sous forme circulaire. Maintenant, ce que nous allons faire, nous verrons l'option image, c' est-à-dire l'option Ajouter une image. Avant d'entrer dans l' option Image, ce que je vais faire, je clique simplement sur cette icône de croix ici pour que l' option dégradé disparaisse. Et nous avons maintenant une position par défaut de couleur blanche. Et maintenant, nous allons ajouter une image. Si je clique sur ce dossier d'images ici, il y a peu d'images, comme ce bus et ensuite cet ordinateur portable de construction et tout ça. Mettons n'importe quelle image d'arrière-plan dans cette zone particulière. Ce que je vais faire, je cliquerai de nouveau sur cette section. Donc, si je clique ici, il s'agit de sélectionner le conteneur. Et si je clique sur votre conteneur extérieur, il sélectionnera la section ou je peux directement accéder au panneau de présentation et je peux sélectionner cette section parmi vous. Une fois que j'ai sélectionné cette section, je cliquerai maintenant sur Ajouter une image en arrière-plan. Il suffit de cliquer sur Ajouter une image. Dès que je clique sur Ajouter une image, l'option Ajouter une image apparaît devant vous. Vous avez maintenant une URL. URL. Vous pouvez ajouter n'importe quelle image, peu importe si vous avez ajouté l'image dans le projet Bootstrap Studio ou non, cliquez simplement sur l'icône Ajouter ici. Ce bouton Ajouter est là. Cliquez sur ce bouton Ajouter. La fenêtre contextuelle des outils et des images s'affiche devant vous. Il suffit de sélectionner l'une des images. Je vais sélectionner cette image et je cliquerai sur, OK. Une fois que j'ai cliqué sur OK, vous pouvez voir que l'image d' arrière-plan se trouve juste derrière cette zone particulière. De cette façon, nous pouvons ajouter l'image, mais maintenant vous pouvez voir l'image, l'image originale n'a qu'une seule position, mais elle a 1234 escaliers ou pourquoi ? La raison est encore une fois que je cliquerai sur cette option Ajouter une image. Vous pouvez maintenant voir que la taille de l'image est 640 pixels sur 426 pixels. Cette image est juste appropriée dans ce domaine particulier. Ainsi, une fois l'image terminée, elle répète l'image. Et dans le bas, il répète également l'image. Si nous voulons adapter l'image, nous devons jouer avec la position. La deuxième option est la position. Je vais donc cliquer sur cette option de position. Ensuite, nous avons le haut, le bas, la gauche, la droite et le centre. Donc, ce que je vais faire, je cliquerai sur Centre. Dès que je clique sur le centre de l'image principale vient au centre. Autour de cela, toutes les autres images sont en boucle. OK ? La prochaine option est la taille. Si je viens en taille, il est dit auto, contient uncover. Le paramètre par défaut est automatique. Si l'automatique est allumé , elle répète l'image. Si je sélectionne Contient, capturez toute la zone, mais en hauteur et en largeur. Mais si vous voyez attentivement, cette zone particulière se répète et cette zone particulière se répète. L'image prend donc la zone contenant la zone en hauteur et elle n' étend pas la zone au-delà de la section. Mais si la taille est découverte , elle couvre la zone. Peu importe la partie affichée ou celle qui n' est pas affichée. Nous venons de couvrir la zone et Pilsen toute la partie. C'est une chose. Et disons si cette partie est à nouveau en haut et que c'est automatique, donc cette répétition est là. Mais dans l'option de répétition, si vous venez et si vous ne dites pas de répétition, vous ne verrez qu'une seule image qui se trouve au centre, qui est en position supérieure. Si je viens ici et que je cliquerai sur le centre. On peut donc dire que l' image est là, mais il n'y a pas d' option de répétition. Mais en répétition, si vous dites répéter x , seul l'axe X sera sous la forme de répétition. Si vous dites répéter, pourquoi ? Ensuite, seul l'axe Y se répète en haut et en bas. Si vous voyez une répétition , elle se répétera en excès. Le meilleur paramètre pour l'option d'image d'arrière-plan est de placer la position au centre, garder la taille en couverture, et la répétition doit être notée que la première est l'URL. Vous pouvez ajouter l'image ici, la position, la meilleure option sera centrée, taille, la meilleure option, elle sera couverte. Et la dernière répétition, elle ne devrait pas être non lipidique seulement si elle est nécessaire. Mais vous pouvez quand même aller jouer avec les options et mettre les options comme vous le souhaitez. Voici donc les options en arrière-plan. Je vais donc simplement supprimer cette option. Je vais vous montrer une technique intéressante et très utile. Dans quelques sites Web que vous avez peut-être vus comme s' il y avait une image au-dessus de cette image, le dégradé est également présent. Ce que nous pouvons faire, c'est comme si nous pouvions simplement ajouter un dégradé. Cliquons sur Ajouter un dégradé et sélectionnons deux couleurs. Allons à la bibliothèque. Et je vais juste sélectionner cette couleur jaune ici. Je vais cliquer sur OK. Et au lieu de cette couleur blanche, je prendrai juste une autre couleur jaune foncé. Pour cet exemple, c'est très bien pour moi. Vous pouvez voir ces lignes avant ce changement de couleur. Je vais donc simplement cliquer sur cette zone particulière et je peux réduire ces options. Maintenant, ce que je vais faire, je cliquerai sur Ajouter une image. Je vais cliquer sur Ajouter une image. Je vais choisir une image. Je vais à nouveau utiliser la même image ou peut-être utiliser cette image minibus. Cliquez ensuite sur OK. Maintenant, ce que je vais faire, je vais simplement cliquer sur la position centrale, la couverture centrale. Non répété. Maintenant, je veux voir aussi l'image et le dégradé aussi l'effet que je veux. Ce que je vais faire, je cliquerai sur modifier le dégradé. Cette icône de modification est là pour et cliquez sur cette icône. Et je vais sélectionner cette première couleur. Je reviendrai à cet outil de sélection de couleurs, et ici je vais laisser tomber l'opacité. Un peu. Je vais laisser tomber l'opacité. Maintenant, je pense que vous pouvez voir que le bus n'est pas visible. Je suis juste en train de le laisser tomber, laisser tomber et de le laisser tomber jusqu'à 0,5 alpha. C'est exactement 50 %. Et il suffit de cliquer sur, OK. Que se passe-t-il maintenant ? Cette couleur est transparente à 50%, et cette couleur est 100% solide. Cette couleur viendra également ici et elle baissera l'opacité, mais je baisserai l' opacité jusqu'à 77%. C'est ça. Et je vais cliquer sur OK. Maintenant, vous pouvez voir quelque chose d' intéressant. C'est comme si l'image était également là. Et en plus de cette image, le dégradé est également là. Supprimons maintenant cette couleur d'arrière-plan de cette partie particulière qui est ce titre. Je viendrai donc ici et je cliquerai sur réinitialiser. Et cette façon illégale de jouer avec l'option d'arrière-plan en apparence. N'est-ce pas intéressant ? C'est ici que nous allons mettre fin à cette vidéo. Et dans la vidéo suivante, nous regarderons l'option bordures qui apparaît. se voit donc dans la vidéo suivante. 9. Bordure: Dans cette vidéo, nous allons en apprendre davantage sur les frontières. Ce sont donc les bordures juste en dessous de l'arrière-plan, nous avons les options de bordures. Voyons comment fonctionnent exactement les frontières. Pour cela, ce que je vais faire, je vais sélectionner ce texte. Il s'agit d'un paragraphe cette galerie Lightbox ici et sélectionnez ce paragraphe. Il y a peu de boîtes ici. Et dans chaque boîte, 11 lignes sont mises en surbrillance. Et trois autres lignes sont en quelque sorte diffuses. Qu'est-ce que cela signifie exactement ? Cela signifie que lorsque vous cliquez sur cette case, il n'abandonnera que la bordure, la bordure supérieure. Il n'appliquera qu'une bordure supérieure. Si vous cliquez sur cette case, elle appliquera une bordure inférieure. Si vous cliquez dessus, il appliquera une bordure gauche. Si vous avez postulé, si vous cliquez dessus, la bordure droite s'appliquera. Et si vous appliquez au centre, cela donnera une bordure à l'ovocyte. Ensuite, dans le bas, nous avons deux options. Si vous cliquez sur cette zone particulière, c'est comme un rayon de bordure. Il va créer, il donnera la flexibilité nécessaire pour créer une bordure ronde vieillie. Et cette option créera un rayon de bordure individuel. Rayon de frontière individuel. Cela signifie que si vous ne deviez pas faire vieillir notre sol uniquement en haut à droite, alors vous pouvez simplement donner cela vers l'âge de deux ans, le haut à droite et les trois autres bordures seront h. Voyons un par un. Et nous verrons également les couleurs des styles. Je pense que vous avez déjà compris comment fonctionne exactement la couleur. Et le rayon que vous pouvez voir. Je veux dire, il suffit de cliquer sur Toutes les bordures toute l'année et ensuite je lui donnerai une couleur, peut-être une couleur rouge. Et le style par défaut, je prendrai deux solides. Dès que je prends le style au fini, on peut voir qu'il s'agit d'une bordure rouge là-bas. Disons maintenant que je veux juste une bordure en haut de ce paragraphe ou en bas. Donc ce que je dois faire, c'est que je vais créer, je cliquerai sur réinitialiser tout. Je vais cliquer sur le haut de la bordure. Je reviendrai au style et je choisirai un style solide. Je vais changer la couleur. C'est ça. Vous pouvez maintenant voir que nous avons une bordure supérieure pour le paragraphe particulier. Disons que je veux aussi la bordure en bas, ce que je ferai, je cliquerai sur le bas de la bordure. Je vais revenir au style et je cliquerai sur Solid, et je donnerai une couleur. Je peux aussi donner une couleur différente. Par exemple, je donne cette couleur indigo et cette bordure gauche aussi je veux, je vais sélectionner la bordure à gauche. Je vais me fendre sur le solide et je donnerai une autre couleur, peut-être cette couleur bleue, n'importe quoi. Je sais que cela n'a pas l'air bien, mais je le fais uniquement dans le but de l' exemple. Maintenant, ce que nous pouvons faire, c' est dire que je veux augmenter le verdict de la frontière supérieure. Encore une fois, sélectionnez la bordure supérieure. Une fois la bordure supérieure sélectionnée, vous pouvez voir les paramètres tels que la couleur unie et rouge. Et le verdict de la bordure supérieure, nous allons augmenter la largeur. C'est tout ce que nous allons augmenter la largeur. Disons que la largeur, nous le garderons à 15 pixels. Nous pouvons maintenant changer le style. Voyons donc le style un par un. Nous verrons le style. La première est la valeur par défaut. La valeur par défaut n'est rien de comparable. Ensuite, nous avons de la solidité, puis nous nous sommes défoncés. Nous pouvons voir que le pointillé est là. Ensuite, nous avons pointillé, puis doublé, puis grandi. Nous avons deux couleurs différentes en une seule ligne. Ensuite, nous sommes rigides. Ensuite, insérez, commencez. Nous avons initialement qu'hérité, puis cachés, initiaux hérités et cachés. Je ne sais pas exactement ce que c'est, mais ils ne se présentent jamais. D'un niveau solide jusqu'au début. Nous pouvons l'utiliser. Disons que j'utilise cette couleur rouge uni avec des extravertis, ou que la couleur a changé. En fait, c'est rose, pas rouge. Cliquez ensuite à nouveau sur la couleur rouge. Ou peut-être qu'on peut prendre un bleu comme bleu. Je vais changer les pixels et je vais simplement supprimer ces autres bordures. De cette façon, nous pouvons le faire. C'est ainsi que nous ajoutons la bordure. Parfois, ce que nous faisons, nous pensons que la bordure inférieure sera agréable. Je vais donc simplement supprimer les rôles supérieurs du tableau et sélectionner le tableau supérieur. Je clique sur Par défaut et je sélectionne la bordure inférieure. Et je cliquerai sur Solid et je prendrai une couleur bleue. Et je prendrai, et je vais simplement augmenter la hauteur. Je peux également prendre un tableau de bord ou un style, je peux également prendre un style de bordure pointillée. Je peux aussi prendre une double ligne. Donc, la double ligne a l'air aussi bien. Nous avons plusieurs options comme grandi, nous avons GRU aussi bien. Il n'y a rien de mal là-dedans. C'est comme si c'était juste un style, un style de bordure. Maintenant, c'est ce que nous avons fait jusqu'à présent. Nous avons vu tous les côtés de la frontière et les résultats du tableau central sont là. Cliquez maintenant sur le bouton Reset All ici et sur le disque et appliquons simplement toutes les bordures de couleur bleue avec une couleur unie. Et augmentons le petit peu vert pour que nous puissions le voir correctement une fois que nous nous sommes déplacés vers le rayon. Cette option de rayon je clique simplement sur cette option de rayon et vous pouvez voir ce rayon en pixels. Nous allons augmenter cela et vous pouvez voir que les frontières se déplacent maintenant vers des frontières arrondies. Vous pouvez le voir. Vous pouvez le voir exactement. Vous pouvez le voir. Les frontières ne sont plus vieillies et sont arrondies. Maintenant, la même chose se produit également dans cette option, mais cela fonctionne individuellement. Il va juste faire 0 maintenant. Et je cliquerai sur cette autre option qui est des bordures individuelles. Dès que je clique sur ce bouton, vous pouvez voir quatre options ici, qui montrent le côté de l'âge. C'est en haut à gauche, en haut à droite, en bas à droite, en bas à gauche. Commençons par cette zone. Maintenant, vous pouvez voir que nous pouvons avoir un design spécifique, disons 32 pixels année et 32 pixels là-bas. Il a l'air assez différent et tout à fait unique. Sinon, je vais le sélectionner une fois de plus. Et c'est 3232. Et peut-être que celui-là nous donnerons une frontière glissante comme 19 ans là-bas et 19 ans. Nous avons un design différent. Mais si nous allons avec le 0 jusqu'à ces deux options, c'est assez différent et ça a l'air assez bien aussi. À partir de là, vous pouvez modifier la couleur à tout moment. Si vous voulez cette couleur jaune, vous pouvez également choisir cette couleur jaune. C'est ainsi que fonctionne l'option bordure, et c'est ainsi que nous utiliserons l' option bordure dans Bootstrap Studio. Maintenant, dans la vidéo suivante, nous allons aller de l'avant et nous verrons l'option Box Shadow. On se voit dans la vidéo suivante. 10. Ombre de boîte: Dans cette vidéo, nous allons en apprendre davantage sur le box-shadow. Pour cela, ce que je vais faire, je vais simplement faire défiler un peu vers le bas et nous avons ici un formulaire Contactez-nous. Je vais sélectionner ce formulaire, ne sélectionnerai aucun composant enfant du formulaire. Je vais simplement sélectionner le formulaire. Vous pouvez voir la sélection dans le panneau de présentation. Une fois que vous avez sélectionné le formulaire, accédez à l'option box-shadow, et vous ne verrez qu'un seul bouton ici ajouté. Mais lorsque vous cliquez sur Ajouter, vous obtiendrez plusieurs options. Nous allons cliquer sur Ajouter. Ensuite, la première option est inversée. verrons cette option en fin de compte. La deuxième option est la couleur. Encore une fois, comme souvent maintenant, vous avez compris exactement comment fonctionne la couleur. Il s'agit donc de l'option de couleur. Ensuite, nous avons x et y. Par défaut, les x et y sont exprimés en 0 pixels. Donc, ce que nous allons faire, nous allons simplement augmenter la distance, induirons les pixels, portera à peut-être 14 pixels. Vous êtes exposé sur l'axe des X, nous allons déplacer l'ombre, 14 pixels, positive d'un côté positif. Et sur l'axe des Y, nous allons déplacer l'ombre et les pixels du côté positif. Il n'y avait pas de pixels. Maintenant, en tant que partie bootstrap Studio, nous avons un box-shadow, qui est dans l'axe X. Ce n'est pas un côté positif 14 pixels et l'axe Y, ce n'est pas un côté positif dix pixels. Mais si nous voyons pratiquement l'ombre devrait être un peu floue et elle a également une propagation. Et Bootstrap Studio nous offre la possibilité de flou et de propagation. Du flou, ce que nous pouvons faire, c'est que nous pouvons augmenter le flou. Et il y aura du bien. Nous avons augmenté le flou et nous pouvons également augmenter la propagation. Mais si nous augmentons la propagation, c'est assez bizarre pour cet exemple particulier. Mais peut-être que dans votre cas dans une autre situation, l'option spirituelle fonctionnera parfaitement. Pour cet exemple, je maintiendrai l'écart à 0. Et je veux aussi que ma couleur soit, la couleur de l'ombre ne soit pas si sombre. Ce que je vais faire, j'arriverai à la couleur et je prendrai une couleur différente, ce qui est une sorte d' ombre actuellement. Oui. On y va. J'aime bien cette couleur. Il s'agit du RVB 1198198198. Il suffit de cliquer sur Sélectionner. C'est ça. C'est le box-shadow. Maintenant, dans la vidéo suivante, nous verrons l'ombre du texte. Et pour cela, nous devons choisir le suivant. On se voit dans la vidéo suivante. 11. Texte ombre: Août sur le box-shadow est terminé. Nous passons maintenant à l'ombre de texte. Pour ça. Je vais certainement sélectionner le texte, sélectionner le texte Contactez-nous. Venez dans cette option d'ombre technique et je cliquerai sur Ajouter. Vous pouvez maintenant voir les mêmes options ici. Seule l'option de propagation n'existe pas. Ce que je peux faire, c'est je viendrai ici et je vais sélectionner cette couleur qui est 198198 ou 100 sur 97 me convient également. Je cliquerai simplement sur Select, et j'augmenterai simplement la valeur de x et y, mais je ne vais pas trop augmenter car le pixel va bien dans les axes x et et j'augmenterai simplement la quantité de flou. C'est ça. Cette option particulière, comme quatre pixels encore, est bonne pour moi. C'est ainsi que fonctionne l'option ombre de texte. Si vous ne voulez pas que le flou soit flou, vous pouvez le conserver à 0  % et à 0 pixels. Pour moi, cette option est plutôt bonne. Mais oui, encore une chose que je vais dire, j'aimerais vous le dire. Vous pouvez ajouter plusieurs, box-shadow, ajouter plusieurs ombres de texte, comme ceci. L'ombre technique que vous avez ajoutée, si vous souhaitez en ajouter d'autres pour le même élément ou pour le même composant, vous pouvez en ajouter d'autres. va de même pour le box-shadow. C'est tout ce que l' ombre du texte est terminée. Les résultats de box-shadow sont réalisés dans la vidéo précédente. Dans la vidéo suivante, nous verrons l'option Transformation, puis la dernière option de filtres, puis notre section Apparence est terminée. Rendez-vous dans la vidéo suivante pour voir Transformer. 12. Transformer: Les gars, dans cette vidéo, nous allons voir à propos de Transform. Tout en apprenant la transformation, ce que nous allons faire, nous allons ouvrir un nouveau fichier, à votre fichier de ressources sous fichiers BSS, et vous avez un dossier qui est un hachage pour souligner la transformation. Il suffit d'ouvrir ce dossier et vous trouverez un b comme fichier de conception. Il suffit de double-cliquer sur ce fichier. Et il y aura un groupe dans ce fichier de conception prêt. Sur cette image, nous comprendrons exactement comment fonctionne exactement l'option de transformation sous l'apparence. En apparence, nous allons faire défiler vers le bas et nous trouverons ici l'option appelée transformation. Si toutes les autres options ne sont pas visibles par vous, vous suffit de cliquer sur cette flèche ici. Et c'est tout. Nous verrons les options qui existent en transformation. La première option est prospective. Nous pouvons modifier la perspective d' une image ou d'un composant, ou de quoi que ce soit. Ensuite, nous avons traduit, et encore une fois, nous avons une flèche ici. Ensuite, nous pouvons traduire la sélection particulière en axes x, y et z. Ensuite, nous avons une rotation. Encore une fois, nous pouvons faire pivoter une sélection particulière dans les axes x, y et z. Ensuite, nous avons l'échelle XYZ et le commutateur, nous avons XY. Vous avez peut-être remarqué au fil de l'année que nous avons trois x ici, c' est-à-dire x, y et z. Et chaque fois que l'excès d'axe Zed apparaît dans l'image, cela signifie qu'il a une fonction 3D. Quand je parle de notre 3D, ce n'est pas une vraie 3D. C'est comme une illusion de 3D. Nous ne transformons pas l' image en format 3D, mais c'est comme une illusion. Ce n'est pas une vraie 3D qui fait de vous, ou que ce n'est pas une vraie 3D, c'est l'illusion. Commençons par comprendre les options sous Transform. Tout d'abord, c'est prospectif. Si vous apportez des modifications dans le prospectif, vous ne verrez aucun changement. La raison derrière cette perspective est en train de changer. Mais comme je vous l'ai dit, c'est juste l'illusion. L'illusion n'est pas visible sur l'image plate. Faisons donc cela par défaut. Je vais l'enlever. Ce sera le premier. Je vais vous montrer l'option de traduction. Translate n'est rien qu'un mouvement d'une sélection particulière. Cela traduira la position sur l'axe X. Translate Y traduit la position sur l'axe Y. Et maintenant, lorsque je déplacerai l'axe Z, vous ne verrez aucun changement au cours de l'année. Lorsque nous voulons voir les changements de l'axe ZED, nous devons faire une chose. Nous devons trouver ce composant particulier qui est une balise d'image. En fait, c'est la balise image. Cette balise d'image se trouve sous quel composant ou quelle balise. Donc avant cela, ce que je vais faire, je vais juste faire toutes ces choses à 0. Faisons-le comme tout réinitialiser. J'ai sélectionné cette image. Cette image est ici. Nous pouvons le voir dans le panneau de présentation. Et cette image est un enfant de ce dû particulier, car à l'intérieur de cette balise Do cette image se trouve. Je peux donc vous montrer que si je réduit cela, nous pouvons voir que la balise image se trouve à l'intérieur de cette balise div. Dans l'option Transformation, je vais faire défiler jusqu'à la dernière option conservée en 3D, et j'activerai cette option sur c. Je voulais apporter les modifications à cette image dans l'espace 3D, ok, 3 Espace D dans l'axe centré, je veux apporter les modifications à l'image dans l'axe zé. Pour modifier cette image dans l'axe Z, je dois dire à Bootstrap que cette image se trouve à l'intérieur de cette div, cette div est apparente et que cette image est enfant. Chaque fois que je souhaite apporter des modifications, je dois m'assurer que le parent est converti pour préserver l'espace 3D. Maintenant, bootstrap Studio sait que cette div est dans l'espace 3D. Maintenant, ce que je vais faire, je vais prendre cette image vers le haut. Vous pouvez le voir par nom d'auteur, septembre, une date est leur sol. Assurez-vous que cette image est à ce sujet. Et pourquoi je le fais sur ce texte. Pourquoi je ne le fais pas sur ce texte particulier. La raison derrière cela est que ce texte se trouve dans cette ligne, et cette ligne n'est pas dans l'espace 3D. Cela ne préserve aucun espace 3D. C'est pourquoi nous ne le faisons pas sur cette image. Et la deuxième raison est que cette image se trouve à l'intérieur de cette div. Il n'y a aucun lien entre cette div et cette rangée, d'accord ? Et ce texte qui est caché maintenant, ce texte se trouve également à l'intérieur de cette div. La div entière préserve donc l'espace 3D. Ce paragraphe se trouve également dans l'espace 3D. C'est la raison pour laquelle je prends cet exemple. J'essaie de vous expliquer uniquement avec ce texte. L'image est, oh, vous chevauchez ce texte particulier. Maintenant, venons vous. C'est là que nous voulons faire du génie, d'accord ? Donc, si je le prends du côté positif, il se dirige vers le vert. Cela signifie qu'il sort de l'extérieur, mais nous ne pouvons pas le voir. Pourquoi ? Parce qu'il n'y a rien à voir. Mais si je le prends du côté négatif, vous pouvez maintenant voir que le nom de l'auteur est là. Comme il s'agit d'une image qui se trouve à l'intérieur de cette div, nous effectuons les changements et maintenant nous avons modifié la position de cette image dans l'axe Z. Nous sommes donc en mesure de voir ce texte. Elle est visible lorsque nous prenons cette image dans l'espace négatif. Ce texte est donc au premier plan. Maintenant, si je prends cette image du côté positif, l'image au recto et le texte se trouvent derrière cette image. Même chose. Une fois de plus, je vais vous montrer cet exemple. Cette image, en particulier, se trouve à l'intérieur de cette balise figure. Et le parent de cette balise particulière est cette div. Encore une fois, dans cette div, tous ces textes sont là. Ok, je vais donc sélectionner cette option ici et je supprimerai cette légende. Je vais simplement sélectionner cette div. Et maintenant ce que je dois faire 0, je vais descendre et je vais vérifier cette option sur qui est conservée 3D. Maintenant, c'est dans l'espace 3D et tout le texte à l'intérieur de cette div se trouve dans l'espace 3D. Sélectionnez cette image. Et ce que je vais faire, je traduirai l'axe Y, donc il se chevauche maintenant. Et maintenant, je vais le transformer en z. Pour que vous puissiez voir, c'est tout. Vous pouvez donc voir le texte ici. Maintenant, il s'agit d'un négatif, donc le texte est visible. Et dès que je le prends du côté positif, le texte n'est pas visible. Maintenant. C'est ainsi que l'espace 3D marche. Il s'agit d'une traduction en axe ZED. Voyons maintenant la rotation. rotation est, comme son nom l'indique, que vous pouvez pivoter sur les axes x, y et z. Je vais maintenant vous montrer la relation entre la rotation et le potentiel. Faisons pivoter cette image sur l'axe X. simplement pivoter légèrement cette image comme 33 degrés ou quelque chose comme ça, ou peut-être plus. Allons jusqu'à 50 degrés. On ne peut pas voir cette image, mais vous verrez que cette image n'est pas tournée. C'est comme presser parce que les bordures restent semblables à l'image ressemblant à une image de compression. Maintenant, la vraie magie vient quand je vais changer le potentiel. Changeons un peu ça. On y va. Vous pouvez maintenant voir que l'image est en train de pivoter. Cela nous permet d' apporter le prospectif à cette image particulière. Maintenant, si je modifie la rotation, nous pouvons voir que l' image tourne. C'est ainsi que fonctionne l'option. Maintenant, vous pouvez voir que cette image est devant. C'est pourquoi le texte n' est pas visible. Prenons donc cette image. Année où le texte est correctement visible. Nous pouvons le faire pivoter davantage. Nous pouvons également modifier l'option prospective. De même, nous pouvons le faire pivoter sur l'axe Y, même que nous pouvons le faire pivoter l'axe Z et je peux voir la rotation dans l'axe z. Vous pouvez maintenant voir la rotation sur l'axe Y. Vous pouvez voir la rotation sur l'axe X. Je vais réinitialiser ça. Toutes les options sauf l'axe X. Que ce soit dans cette position particulière, et la perspective sera quelque part comme celle-ci. semblerait maintenant que nous puissions le faire avec échelle. Nous pouvons le mettre à l'échelle sur l'axe X, l'axe Y et l'axe Z. Encore une fois, l'échelle de l'axe ZED n'est pas visible. Même chose. On peut presser, presser x, serrer y, et on y va. Je vais à nouveau définir cette option par défaut. Maintenant, il s'agit d'une option appelée origine de la transformation. Cela est directement lié à toutes les options. En origine transformée. Nous avons le haut, le bas, la gauche, la droite et le centre. Qu'est-ce que cela signifie exactement ? Tout d'abord, je vais vous montrer en rotation si je sélectionne et que je fais pivoter ça. Cette image tourne donc à partir du centre. C'est le point central et il tourne à partir de là. Maintenant, si je le prends en haut, maintenant si je tourne, vous comprendrez que le haut de l'image est fixe et qu'il tourne par le haut. Il s'agit de l'utilisation de l'origine de la transformation. De même, si je fais le bas, la rotation commencera par le bas. Le bas est fixe et la rotation est par le bas. De même, la gauche, la droite et le centre fonctionnent dans la scène. C'est ainsi que l' option de transformation du travail, et nous pouvons en faire n'importe quoi. C'est tout pour cette vidéo, l'option de transformation est terminée. Et dans la vidéo suivante, nous verrons les filtres. 13. Filtres: Dans cette vidéo, nous allons voir des filtres. Les filtres sont la dernière option de l'épiderme. La première option est l'opacité. Nous allons donc voir l'opacité pour nous. Donc, ce que je vais faire, je vais sélectionner le formulaire, le formulaire entier ici. Une fois que j'ai sélectionné le formulaire et quels que soient les changements que je fais, il s'applique à tous les composants ou à tous les éléments qui se trouvent dans ce formulaire. Quelles sont toutes les choses dans le formulaire ? Si je réduit cela, vous pouvez voir ce texte. Nous contacter le texte, ce texte d'entrée, puis cette saisie d'e-mail, puis la zone de texte et les boutons se trouvent dans ce formulaire. Quels que soient les changements que je vais apporter à ce formulaire, les composants sont les éléments qui se trouvent à l'intérieur du formulaire seront également affectés. Opacité. Si je baisse l'opacité, vous pouvez voir que l' opacité est en train de changer. Oui. D'accord. fait, c'est fini. Opacité, oui, c'est fini. Maintenant. La deuxième option est floue. Maintenant, si vous changez ou si vous augmentez le flou, vous pouvez voir que c'est Bird. Oui, c'est tout. En remontant à 0 ou peut-être que je cliquerai sur réinitialiser tout. Maintenant, la luminosité. Oui, vous pouvez modifier sa luminosité ou augmenter ou diminuer la luminosité. Oui, c'est tout. La luminosité est également terminée. Puis les contrastes, le contraste. Vous pouvez modifier le contraste de ce composant particulier. Ensuite, vous avez des niveaux de gris. gris, je vais vous montrer sur une image. Sélectionnez cette image. Comme vous pouvez le constater, il s'agit d'une image colorée. Quelle image est la plus colorée que ça ? Ok, cette image est comme si nous avions bleu et certaines couleurs sont mortes. Je vais donc sélectionner cette image et j' augmenterai la valeur des niveaux de gris. Et vous pouvez voir que l'image commencera tourner comme une image en noir et blanc. Ok, donc c'est l'option du gris. Vous me demanderez simplement de changer la couleur d' une image en particulier. Nous avons cette option. Donc oui, nous avons cette option, mais VK et l'utilise d'une manière différente, à un niveau différent. Très bientôt, vous apprendrez comment nous allons utiliser exactement cela. Il s'agit d'une échelle de gris et ensuite nous pouvons augmenter l'UE, aussi les humains, comme je vous l'ai dit, la couleur, les mélanges blancs. Vous pouvez voir les longueurs d'onde des allèles changer, la teinte de la couleur change. Inversez ensuite, nous pouvons changer. Nous pouvons inverser la couleur. Maintenant, ce n'est pas un négatif, pas comme les caméras plus anciennes ont ce négatif, n'est-ce pas ? C'est l'état de cette image. Maintenant, si nous prenons l' option intérieure à 200 %, alors l'option que l'image se présente sous cette forme particulière. Ensuite, nous avons une saturation. Nous pouvons modifier le niveau de saturation de l'image. Maintenant, la dernière option est la CPR. Le CPR est un mode couleur qui donne un peu comme une couleur chaude, pas exactement une couleur chaude, mais dans une sorte de type de couleur vieille école. Et je vais vous montrer comment c'est exactement. Il suffit d'augmenter ça. Et vous pouvez voir que la couleur est changée. Je peux vous montrer sur cette image aussi augmenter la sépia. On y va. Les couleurs sont donc fixes et les jeux de couleurs en fait, la palette de couleurs de la couleur sépia est fixe. Et il a changé le jeu de couleurs complet par ce schéma de piliers CPM. C'est ainsi que les filtres fonctionnent et nous pouvons jouer autour de cela. Nous pouvons tout faire avec ça. Nous pouvons également utiliser avec différentes options, différentes permutations permanentes et combinaisons. Et enfin, nous parviendrons à une sortie particulière où vous et moi l'avons tous les deux aimé alors que nous serons prêts à le faire très bientôt dans les dernières vidéos, de maintenant, je terminerai cette vidéo ici. Les options de filtres sont terminées et toutes les options des panneaux d' apparence sont terminées. Nous avons couvert toutes les options du panneau Apparence. Bref, le panneau d'apparence est complètement terminé. Dans la section suivante, nous allons commencer à comprendre les options et le fonctionnement exact des options. La seule différence entre les preuves et les options IIS, Appian reste semble peu importe le composant que vous sélectionnez. Mais dans les options, les options du panneau Options, les options contenues dans le panneau d'options changent fonction des composants. Pas complètement. reste peu d'options, mais en fonction du composant que vous sélectionnez, peu d'options sont disponibles et peu d'objectifs d'options. Ainsi, en fonction du composant ou de l'élément qui sélectionne des options dans le panneau d'options, change. Nous allons voir cela dans la section suivante. se voit donc dans la section suivante. 14. Convertir BS4 en BS5: Ok, donc avant d'aller de l' ce projet est actuellement dans Bootstrap 4.6.2. Dans Bootstrap cinq, il existe peu d'options supplémentaires ? Ce que nous allons faire, nous allons convertir ce projet de Bootstrap 4.6.2 en bootstrap cinq. C'est le nom du projet que vous pouvez voir ici. Et à la fin, vous pouvez voir une marque d'étoile. Cette étoile indique que le projet n'est pas encore enregistré. Bon, jusqu'à présent que ce que nous allons faire en premier, nous sauverons le projet. Maintenant, la marque d'étoile a disparu, et maintenant nous devons convertir le projet. C'est donc très facile. Vous n'avez rien à faire. Bootstrap Studio fera tout ce qu'il vous faut. Vous n'avez pas à faire de sale boulot. Voyons comment nous allons convertir exactement le projet de Bootstrap 4.6 en bootstrap F5. Cliquez sur Fichier, puis cliquez simplement sur Convert to bootstrap cinq. C'est ça. Une fois que vous cliquez dessus, vous obtiendrez une fenêtre contextuelle indiquant que cet outil va créer un nouveau design BS, copier tout et recréer votre page avec Bootstrap cinq composants, tout C'est très bien. Nous ne convertirons pas ce projet particulier en projet bootstrap cinq au lieu de cela, ce que bootstraps aujourd'hui bootstrap Studio va créer un nouveau projet complet avec tout cela informations dans le nouveau projet. Et ce projet particulier sera converti dans Bootstrap cinq. Ce projet restera donc le même qu'il est. Ce n'est pas Bootstrap 4.6 et un nouveau projet deviendra, au lieu de convertir le même projet, d' accord, donc ce que je vais faire, je cliquerai simplement sur convertir ce signal ici vous pouvez voir que c'est notre ancien projet qui commence, et c'est notre nouveau projet qui commence entre parenthèses, bootstrap F5. Encore une fois, vous avez une marque d' étoile ici. Cela signifie que vous devez sauvegarder le projet. Il y aura un léger génie comme si nous avons perdu la couleur de cette zone particulière ici, et nous avons perdu la décoration et toutes ces choses. Pourquoi ? Parce que cette option est maintenant mise à niveau dans cette version particulière. Bon, donc maintenant ce que nous allons faire, nous allons sauvegarder ce projet et nous commencerons à travailler sur le nouveau projet Bootstrap cinq. Il suffit de cliquer sur Enregistrer. Je vais maintenant fermer cette ancienne version. Et après cela, nous commencerons toutes les choses dans le projet Bootstrap cinq. Dans la section suivante, nous apprendrons tout sur le solde des options. se voit donc dans la section suivante, dans la vidéo suivante. 15. Option texte: Je suppose, euh, à partir de cette section ou de cette vidéo, que nous apprendrons tout sur le panneau d'options. Commençons sans perdre plus de temps. Directement, je vais sélectionner cette section. Nous allons passer dans le panneau Options et nous verrons exactement comment le panneau d'options donne l'option selon les composants. Il va donc cliquer sur le panneau Options. Il s'agit de la première option qui existe, c' est-à-dire l'option texte. Ensuite, nous avons une infobulle de décoration que la réponse pour l'afficher et flexbox et l'accessibilité. En cela, la flexbox est très importante et elle est très utile. Nous utiliserons cette option Flexbox la plupart du temps. Commençons par la première option qui est l'option de texte. Dans leur option de texte, nous avons plusieurs options. Il y a alignement, couleur, transformation, espacement mono, pas de rap et tout ce qui est proche. Vous remarquerez que dans l'option de couleur qui n'a pas d'outil de sélection de couleurs. Au lieu de cela, nous avons une couleur prédéfinie donnée par Bootstrap studio. Nous utiliserons des couleurs prédéfinies par Bootstrap studio dans le panneau Options. Et si nous voulons une couleur spécifique à ce moment-là, nous devons aller au panneau d' apparence. Commençons par l'alignement. En alignement, j'ai ces options qui démarrent puis c'est au centre, et c'est le nom de l'alignement est modifié dans cette version particulière, bootstrap five version. Et le début signifie qu'il s'agit d'un alignement à gauche, que le centre est évidemment une ligne centrale et que la fin est le bon alignement. Maintenant, si je clique sur cette icône en particulier, c' est l'icône flèche. Si je clique dessus, j' obtiendrai quelques tailles d'écran. Au fil des ans, il y a SM, MMD, LG, Excel, double Excel. Exactement. Nous l'avons vu, nous l' avons vu plus tôt. Il s'agit d'un double XL, qui est extra large. Ensuite, il s'agit d'Excel qui est très grand. Voici LG, c'est Md, c'est petit et très petit. très petit n'est pas là. Ou quoi que ce soit que nous ferons en petit SM, il sera également considéré comme la commande très petite et très petite. Alors pourquoi ces options existent-elles exactement ? Nous allons vous dire ce que c'est exactement. Cette option d'alignement est là et vous pouvez voir trois options ici. C'est comme une commande universelle. Regardez la commande universelle en ce sens, si vous apportez des modifications à cette option particulière qui se trouve devant l'alignement, devant la clé d'alignement, nous avons cette valeur. Il s'agit là de la valeur universelle. Mais si vous modifiez la taille de l'écran, lorsque l'utilisateur parcourra le site Web sur la taille d'écran spécifique, il l'obtiendra. Cet alignement particulier uniquement. Permettez-moi de vous montrer comment c'est exactement , d' accord, donc avant cela, nous avons perdu la couleur de ce titre et de ce paragraphe. Nous allons passer à la couleur. Quelle est exactement la couleur. Comme je vous l'ai dit, nous avons des couleurs prédéfinies que Bootstrap Studio nous donne. Quelle que soit la couleur que je vais appliquer à la section. Tous les textes qui se trouvent à l'intérieur de la section auront la même couleur. Ok, pas individuellement, nous avons maintenant ce titre et ce paragraphe. Ce sont des textes, non ? Sauf ces boutons. Quel que soit le texte à l'intérieur du bouton, il ne sera pas affecté car il dispose d'une commande spéciale pour cela. Cette rubrique est morte, puis ce paragraphe est là. Ok, donc je sélectionne cette section qui est un motif pour tous les composants qui se trouvent à l'intérieur de la section. Et je vais changer la couleur. Passons à un avertissement. L'avertissement est de couleur jaune. Allons-y au réchauffement. C'est ça. Vous avez maintenant une couleur jaune pour le texte. Il est utile lorsque vous souhaitez modifier la couleur de la section entière ou de quoi qu'il s'agisse, du composant entier, quel que soit le texte présent à l'intérieur de la section ou du composant, vous pouvez modifier l'intégralité du texte en en un clic. Revenons maintenant à l'alignement. Parce qu'il y a maintenant que nous pouvons voir le texte. Vous sélectionnez ce texte de titre et ensuite j'ai une autre option ou vous, dans cet alignement, vous pouvez voir qu' il n'y a rien qui est sélectionné. Mais le texte n'est pas au format Centre, l'alignement central, même le paragraphe n'est pas un alignement central. Pourquoi exactement cette facilité sans sélectionner aucune option, pourquoi exactement ce titre et ce paragraphe, il n'a pas centré l'alignement. C'est très simple et peut-être que vous l'avez aussi. La raison derrière cela est composant ou un élément de titre individuel a un alignement central. Voyons cela si je clique sur le titre. Vous pouvez maintenant voir dans l'alignement que l'alignement universel est centré. D'accord ? C'est la raison pour laquelle si nous sélectionnons cette section, rien n'est sélectionné, mais il est toujours centré parce que le composant individuel est sélectionné comme alignement central, peut-être que peut vous confondre, mais maintenez le rythme. Au fur et à mesure que nous allons de l'avant, vous comprendrez exactement ce que c'est. Dès que j'ai sélectionné l'élément en-tête, en-tête, vous pouvez voir quand une option supplémentaire apparaît ici qui est l'option de titre. type de titre est peut-être que vous avez entendu, si vous connaissez HTML, vous avez entendu parler balises de titre telles que les en-têtes commencent à H1, H2, H3, H4, H5 et H6. H1, H6 sont les titres. Ce n'est que le numéro ici. Maintenant, quel numéro est sélectionné est sélectionné. Cela signifie qu'il s'agit d'une position de la position 123456. Ce sont les rubriques qui sont de un à six NADH. Autre affichage, l'affichage ressemble à un à cinq écrans. Il y en a. En fait, il devrait y en avoir six. Cela va tirer ça. Oui, OK. Six sont donc morts. Ensuite, si vous cliquez sur un, vous pouvez voir que la taille du texte est augmentée. C'est l'affichage 1. Affiche six que nous avons. Et si vous fermez, c'est la valeur par défaut. C'est l'option qui se présente devant vous lorsque nous sélectionnons la balise de titre. Maintenant, si nous sélectionnons la balise de paragraphe qui, au lieu de H1, H2, H3, vous obtiendrez l'option de paragraphe. Une option sera disponible à l'intérieur de l' option de paragraphe qui est le principal. Si vous cliquez dessus, vous verrez que la taille est augmentée, mais l'étranger change également. Voyez maintenant ce qui se passe exactement. Vous êtes dans l'éditeur de texte. Vous pouvez voir ce paragraphe, y a-t-il une balise de paragraphe, c'est qu'à l'intérieur de la balise, nous avons classe et classe est leader. centré sur le texte. Le centre de texte n'est rien d'autre que cette option d'alignement. Ensuite, le style et quoi que ce soit, nous avons quelque chose ici et nous avons ce texte à tout ce qui est écrit à l'intérieur. Et puis la balise de fermeture du paragraphe. Beaucoup de code a déjà été écrit. Nous verrons donc cela entre les deux. Il suffit d'effondrer ça. Voyons maintenant l'option d'alignement. Si je sélectionne cet en-tête et que vous pouvez voir l'alignement, l'union ou l' alignement des cellules est central. Maintenant, ce que je vais faire, je dirai au studio Bootstrap, c'est que chaque fois que la taille de l'écran est MD et au-dessus de la mer, c'était comme ça. Ce n'est que si vous changez quelque chose ici la chaîne sera applicable à toutes les tailles d'écran ci-dessus. Mais la taille d'écran inférieure restera la même. Cela signifie que quoi que vous changiez à la taille de l'écran MD, si je change l'alignement pour commencer dans MD, tout ce qui précède, c'est-à-dire LG Excellent double essieu n'obtiendra que l'alignement de départ. Voyons comment c'est exactement à partir de MD, je cliquerai simplement sur Démarrer, où nous en sommes maintenant sur Excel. Donc, une fois que j'ai cliqué dessus, les changements seront visibles dans cette taille d'écran particulière. De plus, il suffit de cliquer sur Démarrer, et c'est tout. Il est en position de départ. Mais dans les SM, les PME devraient être au centre. Sm signifie petit et au-dessus de ce qui est petit ? Votre petit est plus petit qu'un garçon, c'est quoi ? Immédiatement, le MD. Ainsi, seulement dans la petite taille de l'écran, l'alignement sera central. Voyons voir. Si je clique sur petit, vous pouvez voir que l' alignement est central. Et dès que je clique sur MD, l'alignement est au début. Disons à Bootstrap Studio que chaque fois qu'il est dans LGN, il devrait être central. Encore une fois, si je viens chez LG, c'est une incitation. Et tout ce qui précède. Il sera, encore une fois, au centre. Et disons si la taille de l'écran est excellente au-dessus, mais qu'il n'y a rien au-dessus d'Excel. L'Excel est la dernière taille. Chaque fois qu'il s'agit d'un XL, Jim l'alignement T2. Et maintenant, nous y sommes, et ce que nous avons fait est uniquement pour Excel, nous n'avons rien donné. Donc ce qu'il faudra, cela prendra de LG LGN à peu près, rien n'est que Bootstrap comprendra que je dois prendre l' alignement de LG uniquement, donc LG et au-dessus. Et puis, encore une fois, Excel, il a une valeur différente. Cela le montrera donc. Voyons à quoi cela ressemble exactement dans le code. Il suffit de sortir l'éditeur de texte et vous pouvez voir la balise H2 ici. Centre de texte. C'est l' option universelle qui existe. Il montre le centre de texte et le SMS de texte, les PME petites, ce qui est petit, le plus petit contre le centre. Il est donc indiqué que le texte petit est centré. Ensuite, le support de texte commence. Donc c'est Md corrigé, MD est le début, oui. Ensuite, envoyez un texte à LG center Lg est au centre. Ensuite, nous avons directement le double XL. Donc, texte Excel, c' est du texte externe est, et c'est ainsi que Bootstrap pseudo écrit le code pour vous. Disons que si je supprime cet Excel, vous pouvez voir ici, gardez votre œil ici. Il s'agit de texte Excel, et je vais simplement supprimer cela. Et immédiatement, il supprimera le code pour vous. Le studio bootstrap est en train d'écrire le code pour vous. suffit de cliquer ici et là, faire glisser et déposer et toutes ces choses qui tombent à nouveau et tout ce qui se trouve, cela s'effondre à nouveau. C'est ainsi que cette option fonctionne d'alignement. Et après cela, nous avons de nouveau la couleur, c'est le même ensemble de couleurs ou leurs couleurs prédéfinies sont là. Vous pouvez sélectionner n'importe quelle couleur parmi celle-ci. Maintenant, la transformation est que leur transformation est en minuscules, en majuscules et en majuscules. Si je clique en minuscules, tous les caractères seront en minuscules. Si je clique en majuscules, tous les caractères seront majuscules. Et si je clique sur majuscule, la première lettre du mot sera majuscule. Il en va de même pour le paragraphe. Si j'arrive à la transformation et si je clique sur majuscule, la première lettre de chaque mot deviendra capitale. C'est exactement comme ça que espacement mono n'est rien mais si vous activez l'espacement mono, il ressemblera à ceci, comme un espacement mono de type police old school, old school. Je viens de l'éteindre. Je vais activer cette option sans enveloppement ni l'application signifie peu importe la zone du paragraphe, elle viendra en une ligne droite. Mais ce qui se passe, c'est que vous pouvez voir la bordure bleue, le contour bleu indique que le paragraphe, ce paragraphe particulier ont cette zone particulière. Mais comme aucune option d'enrobage n'est activée, elle montre qu' elle franchit la limite traverse réellement la frontière. Donc, ce que nous pouvons faire, c'est si vous ne voulez pas que cette option supplémentaire soit sortie de la frontière, cela signifie qu'elle ne doit pas dépasser la limite. Ce que nous pouvons faire, c'est que nous pouvons activer cette option. Dès que nous aurons activé cette option, elle viendra comme ça. Trois points. Cela signifie que quelque chose se trouve davantage dans ce domaine particulier. Vous n'avez pas besoin de sélectionner la section ici. Vous verrez toutes ces options ici. Les mêmes options existent. Mais maintenant, si vous modifiez quelque chose ici, cela s'appliquera à la section et non aux textes individuels spécifiques. Pour appliquer les modifications à la zone de texte individuelle ou à l'élément de texte, vous devez sélectionner le texte et limite, puis vous pouvez le modifier. Et disons que je l'ai fait, je sélectionne ce paragraphe maintenant et je veux changer la couleur. Si je change la couleur par, disons danger, vous pouvez la changer. Maintenant, c'est changé. Il s'agit donc de maintenir l'option texte. Marche. Après cela, nous regarderons l'option de décoration dans la prochaine vidéo. Et ils pourraient agir option est très similaire à tous les composants. Il ne donne pas d'options supplémentaires entre les deux. Si nous sélectionnons le paragraphe, l'option de paragraphe est ici. Si je sélectionne le titre, l'option de titre est ici. Donc, ce genre de situation ne se produit pas. La décoration. L'option de décoration est ajustée. n'y a pas de changements de ce type dans l'option de liquidation. Dans la vidéo suivante, nous verrons les décorations. 16. Décorations: Commençons par les décorations. Dans la décoration v ont quatre options que sa bordure, sa bordure, sa couleur, son ombre et son arrière-plan. Tout d'abord, Border. Nous avons peu de frontières définies ici. Ce ne sont pas les bordures qui sont similaires dans le panneau d'apparence. Ces frontières sont différentes, les frontières sont différentes. Dans cette frontière, vous avez un contrôle spécifique, mais c'est une chose fixe. La première chose est bordée par défaut. Il n'en est pas. Il s'agit de la zone croisée sélectionnée, c'est-à-dire par défaut. Aucune bordure n'est sélectionnée. On vous montre un par un. Tout d'abord, nous allons cliquer sur cette frontière irrégulière. Si je clique sur la bordure normale, vous pouvez maintenant voir la bordure est là, vous pouvez voir la bordure blanche. Y a-t-il une bordure blanche ? Pourquoi cette bordure blanche ? Parce que l'aquarelle est par défaut. Dans ce cas, sous le panneau Options, si vous sélectionnez la bordure comme n'importe laquelle, sélectionnez n'importe quelle bordure. Et la couleur est par défaut. Cela signifie qu'il s'agit d'une couleur blanche. Maintenant, je vais cliquer sur Couleur et contre un jeu de couleurs prédéfini est là. Si je clique sur danger, si je sélectionne simplement ce titre particulier, vous pouvez voir que la bordure est maintenant sélectionnée à nouveau cette bordure. Et maintenant, ce que je vais faire, je vais sélectionner cette zone qui est arrondie. Cela signifie que les âges seront arrondis. Vous pouvez maintenant voir que les bords sont arrondis. Après cela, l'autre option consiste entourer la bordure même en forme circulaire. L'option suivante est remplie. Si je clique sur l'option pilule, vous pouvez voir maintenant que la bordure est belle, plutôt bonne. Mais seuls les coins sont en forme de pilule et en forme de pilule. Maintenant, je vais sélectionner à nouveau ce titre. Et maintenant, voyons l'option ombre. Si j'arrive à l'ombre, on peut voir petit, régulier, grand. Et si je clique sur Regular, vous pouvez voir qu'une ombre est là. Changeons maintenant la couleur d' arrière-plan. Je vais sélectionner cette zone et je reviendrai à l'impédance. Et je vais simplement supprimer la couleur d'arrière-plan d' ici et cliquer simplement sur Reset pour qu' elle soit blanche maintenant pour que nous puissions voir l'ombre et toutes ces choses. Si j'ai supprimé l'ombre, je sélectionnerai cette rubrique. Si je supprime l'ombre, nous allons la définir par défaut. Vous pouvez voir que l' ombre n'est pas ça. Vous êtes précisément lorsque nous appliquons l'ombre ici. L'ombre n'arrive que dans la partie inférieure. Il ne sera pas dans l' angle que vous voulez. Si vous voulez cette ombre particulière, vous devez aller dans l'Apparence. Si j'allume l'ombre comme ombre normale, juste pour garder votre œil dans la partie inférieure de cette rubrique. Si je clique simplement sur la normale, vous pouvez voir maintenant que l' ombre est là. Voici comment fonctionne l'ombre dans la déclaration sous le panneau Options. Et j'ai aussi une grande ombre, si je clique sur grand, la zone de l' ombre augmentera. Maintenant, j'ai aussi des antécédents. Si je clique, si je viens ici et si je clique sur l'arrière-plan, donc si je clique sur avertissement et que vous pouvez voir que l'arrière-plan se réchauffe, mais nous ne sommes pas en mesure de voir ce texte. La raison en est que le texte est également avertissant. Voyons une autre couleur. Voyons la primaire. Vous pouvez maintenant voir que le principal est là, la bordure est lue, l'arrière-plan est primaire et le texte se réchauffe. Allons changer cela. Faisons en sorte qu'il prévienne la frontière. La couleur de la bordure sera avertissante. Les ombres sont régulières, et l'arrière-plan sera de nouveau averti. Donc, la même couleur sera là. Dans l'option de couleur du texte va changer la couleur de avertissement à peut-être la lumière. Maintenant, il a l'air bien, plutôt bien. C'est ainsi que fonctionne la décoration de texte. Vous avez maintenant la possibilité de dégrader également sur un an. Dès que vous donnez une couleur à l'arrière-plan, vous obtiendrez cette option de dégradé juste en dessous. Quel dégradé est le plus grand dans sa jambe, vous ne pouvez pas sélectionner la couleur que vous voulez. Que va-t-il se passer ? Quel est cet avertissement ? La couleur que vous avez sélectionnée avertissement, le dégradé se présente sous forme linéaire et il ressemblera une couleur claire en haut et la couleur foncée en bas, cela ressemblera à ça. Je vais donc juste allumer ce dégradé et vous pouvez voir une légère couleur claire sur le dessus. Et la couleur foncée est que la couleur d'avertissement d'origine est autour de cela. OK. Je vais donc vous montrer dans une couleur différente. Il n'est peut-être pas visible dans cette couleur. Alors, choisissons le noir. Maintenant, vous pouvez voir qu'il y a une couleur claire ? Je vais juste éteindre ça. Vous pouvez voir la différence, dégradé, le dégradé de, le dégradé. gradient de ceci est le fonctionnement exact de la vente aux enchères de déclaration. Vous avez des frontières prêtes à l'emploi pendant un an. Ensuite, vous avez une couleur de bordure. Vous avez l' option ombre là, puis vous avez un arrière-plan. Vous pouvez modifier la couleur d' arrière-plan qui est une couleur d' arrière-plan prédéfinie, puis activer également le dégradé. C'est tout dans cette vidéo, les options de décoration sont faites. Et pour n'importe quel composant de l'option de décoration restera le même, il ne changera pas. Dans la vidéo suivante, nous verrons des infobulles. se voit donc dans la vidéo suivante. 17. Infobulles: Dans cette vidéo, nous allons en apprendre davantage sur les infobulles. Cliquez donc sur cette info-bulle ici pour développer cette option. Cliquons donc sur l'infobulle. Et dans l'infobulle, vous trouverez une option qui n'est pas possible. Mais lorsque vous activez l'info-bulle, vous obtiendrez d'autres options. Qu'est-ce qu'une infobulle exactement ? Disons que dans l'aperçu, si l'utilisateur survole le pointeur de la souris sur la zone spécifique, informations supplémentaires seront fournies pour cet outil particulier appelé infobulle. Quoi que j'ai dit que ce n'est pas une définition de l' infobulle en général, je vous l'ai dit. Ok, donc je vais activer cette option d'infobulle et maintenant deux autres options sont là. La première est le placement, où se trouve exactement le placement de l'infobulle et le titre. Quel devrait être le titre du titre l'infobulle dans le sens des informations qui viendront dans l'emplacement de l'infobulle que je garderai en tête. Et pour ce titre particulier d'infobulle, saisissons cette facilité. Élément de titre, VSS de cinq entre parenthèses. Bêta. Je cliquerai simplement sur entrer tous les centres d'intérêt, trouver ce qui se passera en avant-première. L'infobulle apparaîtra, mais vous l'êtes aussi, elle va apparaître, mais elle apparaîtra dans la zone inférieure quelque part ici ou ils prendront juste mon point le plus pointu et je la maintiendrai ici. Ensuite, il est là. Il montre qu'il s' agit alors d' un élément en-tête de l' orthographe ou d'une erreur. Corrigeons l'orthographe. Il s'agit d'un élément de titre, e LEM, NP, élément de titre. D'accord, alors comment est de retour ? Il s'agit donc d'un élément de titre dans BSS et BS phi Beta. Bss est Bootstrap Studio et la version Bootstrap de BS cinq années. Je pense donc qu'il s'agit d'une rubrique qui est et ne devrait pas être là. C'est grammaticalement erroné. Donc, il n'y a pas de cap éliminé. Voici comment fonctionne l'infobulle. Maintenant, nous pouvons modifier le placement placements sont aussi comme le haut, le bas, la gauche et la droite. Vous pouvez modifier le positionnement de l'infobulle. Voyons l'aperçu. Et dans cet aperçu, vous comprendrez exactement comment cela fonctionne. Pour obtenir l'aperçu du site Web. Le bouton Aperçu est plus facile et une flèche sera là, il suffit de cliquer sur cette flèche. La deuxième option consiste à indiquer que cette option est désactivée, nous devons donc activer cette option. Il suffit donc de cliquer sur ce déclencheur ici, et maintenant vous pouvez voir l' aperçu entre parenthèses sur lequel il se trouve. Si vous cliquez sur, il n'y a qu'un aperçu. Il suffit de cliquer sur Aperçu. Maintenant, il est activé, et maintenant je vais cliquer sur ce bouton. Donc, votre navigateur Web par défaut va se lancer et il m' affichera l'aperçu. C'est exactement ce que notre site Web va chercher. Je suppose que je vais juste prendre le pointeur de ma souris sur cette zone. Et maintenant, vous pouvez voir que l' infobulle est qu'il s'agit d'un élément de titre dans BSS sur BSS cinq bêta. Changeons le positionnement. Si j'ai gagné le placement jusqu'au bas. Et encore une fois, si j'y vais dans le navigateur sans le rafraîchir , il est déjà rafraîchi. Je vais prendre le pointeur de ma souris ici et vous pouvez voir que l'infobulle est qu'il n'y a pas de longueur spécifique à l'infobulle. Vous pouvez taper n'importe quoi dans l'info-bulle. n'y a pas de limite de caractères spécifique à cela. Nous avons le placement de y parce que, comme disons, si je clique le pointeur de ma souris là-dessus maintenant, le placement est en bas. Et ce n'est que parce que le placement est inférieur, vous ne pouvez pas voir le paragraphe. Une partie du paragraphe est cachée, disons qu'en haut, nous avons quelque chose de mieux. Ce que nous pouvons faire, c'est comme nous le pouvons, nous pouvons sélectionner le placement à gauche ou à droite. Nous allons donc choisir le bon emplacement. Et maintenant, si je retourne au navigateur une fois de plus, et si je survole le pointeur de ma souris, vous pouvez voir que le placement est sur la droite. Voilà ce qu'est l'infobulle et vous pouvez créer n'importe quoi pour nous fournir des informations spécifiques. La plupart du temps, les infobulles sont utilisées sur la zone où se trouve le point d' interrogation, vous ne savez pas exactement de quoi il s'agit. Donc, vous prenez simplement votre point d'interrogation et immédiatement, lorsque des informations supplémentaires sortent de là, c'est ce qu'est l'infobulle. Nous allons donc terminer cette vidéo ici. L'option d'infobulle est donc également couverte. Pour comprendre flexbox, nous devons en savoir plus sur bootstrap row, column. Beaucoup de choses que nous devons savoir lorsque nous terminerons cette section particulière, quand nous pourrons créer un design complet. Après cela, nous verrons exactement ce que la flexbox 0, deux choses que nous allons nous occuper de quelques vidéos, c' est-à-dire la réponse à l' affichage et Flexbox. verrons ces deux options plus loin dans une autre section. Dans la vidéo suivante, nous verrons l'option Accessibilité. On se voit dans la vidéo suivante. 18. Accessibilité: C'était une graine LED, l'option d'accessibilité. Il s'agit de la dernière option du panneau Options. Je vais cliquer sur Accessibilité. Et ici, vous pouvez voir la visibilité. Et vous avez deux options visibles et invisibles. Et la dernière option est la race d'écran uniquement. Ensuite, vous devez activer la façon dont cela fonctionne exactement, je vais vous le dire. Nous allons donc sélectionner ce texte particulier ici. Après le projet, nous avons ce texte et indivisibilité. Si je clique sur visible, il sera visible. Évidemment. Si je clique sur invisible, le manuel sera invisible. Mais il n'est pas caché. Le composant, l' élément n'est pas masqué. La visibilité est invisible. Cela signifie donc que le texte est là, mais il est invisible. La deuxième option est criée en lecture seule. Lorsque vous activez l'option de lecture à l'écran, vous pouvez voir que le paragraphe est désormais masqué. Le paragraphe est maintenant caché, mais il est toujours là. Maintenant, c'est dans un événement de vente aux enchères Scream Bleed. Si vous activez la visibilité sur visible, elle ne sera pas visible car elle n'est pas criée en lecture seule. Que signifie uniquement par plomb filtré ? Quelques sites Web sont conçus pour les personnes aveugles, mais ils peuvent écouter. Il y a tellement de sites Web de nos jours, il y a aussi des navigateurs de telle sorte qu'ils ont une option spécifique appelée lecture d'écran. Le texte sur lequel est mort, qui a la possibilité de lire uniquement l'écran. Le navigateur ne lira ce texte particulier que dans le site d'actualités, vous pouvez voir qu'il s'agit d'un fichier audio. Vous pouvez simplement cliquer sur l'écran, lire, commencer à lire le texte. Cela ne veut pas dire qu'il est en partie élevé le texte entier du site Web. Il est lu uniquement les sorcières de texte dans la balise appelée lecture à l'écran. L'option de lecture à l'écran permet de convertir le contenu textuel dans le formulaire audio à l'aide du support du navigateur, c' est-à-dire l'option de lecture criée. Et c'est la visibilité, mais c'est ce que les options d'accessibilité IIS. Et nous fermons la section ici et nous en avons fini avec les options. Dans la vidéo suivante, nous verrons la troisième et dernière option dans le panneau de preuve qu'est l'animation. Commençons donc à apprendre cette émission à partir de la section suivante. 19. Défilement d'animation: Oh, bien. Dans cette section, nous allons commencer notre panneau d'animation. C'est donc ici que nous allons animer nos éléments, nos composants. Pour cela, ce que j'ai fait, c'est que j'ai créé un petit projet pour cela. Vous devez accéder à vos fichiers BSS. Et dans ce cas, vous trouverez un troisième dossier appelé animation. Dans l'animation, vous trouverez qu'il s'agit un fichier de conception également appelé animation. Vous devez ouvrir ce fichier. Une fois que vous aurez ouvert ce fichier, vous obtiendrez cette conception dans le panneau d'animation pour l' instant, il n'affiche aucun composant sélectionné car je aucun composant sélectionné car je n' ai sélectionné aucun composant au-dessus de vous. premier composant. Il s'agit du panneau de présentation. Et dans le panneau de présentation, vous pouvez voir qu'il y a un conteneur. Il s'agit d'une composante et nous avons deux éléments en disant qu'il s' agit d'un élément de titre et d'un élément de paragraphe. Ensuite, nous avons rho, c'est une classe, donc nous pouvons l'appeler comme un composant dans ce studio bootstrap. À l'intérieur de la ligne, nous avons plusieurs colonnes, nous avons une colonne, une colonne, une colonne. Vous pouvez voir que les colonnes sont là. Dans chaque colonne, nous avons une carte. Vous pouvez voir à nouveau sur chaque colonne, nous avons un panier et une carte d'information. Nous avons cette image. Ensuite, nous en avons un autre, un composant qui est cicatrisé, puis qui se dirige, se dirige. Et à l'intérieur de cette rubrique, nous avons des liens et des paragraphes. Il s'agit donc d'un nid complètement structuré d'un composant. Ce que nous devons faire ici, c'est comme si nous allons animer toutes les cartes de ce design particulier. Je vais donc d'abord sélectionner cette carte et commençons à comprendre notre animation. Dès que je sélectionne cette carte vous pouvez voir dans le panneau d'animation, vous pouvez voir une option qui est déclenchée. Et si je clique dessus, vous pouvez voir trois options. L'un est défilé, l'autre est survolé et l'autre est Laura. Qu'est-ce qui est cruel ? Cruel signifie défiler. Il s'agit du défilement de la page. C'est Scroll. Nous pouvons également animer notre page sur le parchemin. Lorsque vous faites défiler la page, quels que soient les composants ou design qui se trouvent devant vous, elle sera animée. rigueur fait défiler, puis le type est rempli. Maintenant, vous pouvez voir dès que je sélectionne l'une de ces options, il suffit de faire défiler, de survoler et de charger. Vous pouvez voir une marque d'étoile ici. Cela signifie que cette composante est limitée maintenant, puis nous avons des types d'animation. Si je clique dessus, on peut voir s'estomper, fondre vers le haut, le bas et toutes ces choses. Si je clique sur le fil, si vous voulez voir exactement à quoi il ressemble, cliquez simplement sur Lecture, alors vous pouvez voir exactement comment il viendra dans le navigateur Web. Vous pouvez voir qu'il apparaît immédiatement. Si vous voyez attentivement, vous pouvez voir que la durée est très moindre pour contrôler la durée, nous avons la possibilité de la durée. Si vous cliquez dessus, nous avons 50 MS MS, c'est en millisecondes. Il commence à 50 et les multiples de 50, on peut aller jusqu'à trois mille. Trois mille MSE, c'est trois secondes. Si je clique sur 3 000 et si je clique sur Play, et que vous pouvez voir qu'il faut trois secondes pour venir devant vous. Vous pouvez donc apporter n'importe quelle modification. Sélectionnez 1 000 MS, cela signifie 1 seconde. Et si je clique sur Play, vous pouvez voir en 1 seconde, la voiture vient devant vous. Il s'agit des effets de défilement. Ce que nous allons faire, nous descendrons et nous appliquerons l'animation de défilement à cela pour les photos au fil des années, Il y a quatre photos. La première est la suivante, donc je vais juste ouvrir cette colonne. Je vais sélectionner cette carte. Je viendrai défiler et j' augmenterai la durée à 1 seconde. dirait que je vais le donner à la seconde. Mais ici, ce que nous allons faire, nous utiliserons un autre type s'il s'estompe. Voyons donc un zoom avant et une durée de 1 seconde. Allons assiette. Voyons à quoi ça ressemble exactement. Oh, d'accord. Ensuite, je vais descendre le troisième. Je vais sélectionner le parchemin. Donnons un autre comme un glissement vers le haut. La durée sera encore une fois. Et Lee, c'est comme ça que ça va ressembler là. La dernière, la dernière, cette carte parcourt, Voyons voir. Tout autre effet est que la diapositive était là. Retournez à droite ? Et il suffit de jouer. Nous devons utiliser la durée d'une seconde. Maintenant, Lee, d'accord, nous avons donné quatre types d'animation différents à quatre cartes différentes. Voyons maintenant l'aperçu. Je vais cliquer sur le navigateur. Et maintenant, si nous faisons défiler, vous pouvez voir quand il s'agit de la visibilité. Cela signifie que c'est la fin du navigateur. Faites-vous défiler vers le bas et je l'actualiserai pour que la page soit rechargée afin que l'animation puisse être lue à nouveau. Et si je fais défiler maintenant, vous pouvez voir qu'il n'y a rien, mais dès que je fais défiler un peu plus, l'animation est là et vous pouvez maintenant la voir correctement. Laissez-nous le faire encore une fois. Je vois bien. Maintenant, ce n'est pas beau parce que nous avons donné aux quatre cartes d'animation différentes, mais cela aura fière allure si nous donnons le type d'animation unique à toutes les cartes. Donnons le type d'animation unique comme retourné à tout le monde. Changeons le type de celui-ci. Glissez bien ? Sélectionnez-le encore une fois. Entraînement au flip. Si je clique sur Play, je peux voir, oui, tout le monde a le même type. Maintenant. Rafraîchissons ça. Oui. Maintenant, faites défiler vers le bas, faites défiler, faites défiler Maintenant, nous pouvons voir encore une fois, il s'agit d'un travail d'animation de défilement. Voyons maintenant les autres options dans le parchemin. Nous avons également la possibilité de faire des bouleversements, et nous avons également la possibilité de retarder. retard signifie que nous pouvons le retarder. Si je joue maintenant, vous pouvez voir que le retard est là. Donc, tout de suite, ça ne démarrera pas. Il faudra 250 millisecondes, puis il démarrera. À l'heure actuelle, nous n'y arriverons pas. Lire une fois signifie le moment où l' animation est chargée. Et même après cela, si l'utilisateur fait défiler vers le haut et vers le bas, l'animation ne sera lue qu'une seule fois. Il ne jouera plus encore et encore. Nous vous montrerons que vous pouvez voir l'animation. Maintenant, j'ai défilé vers le haut. Encore une fois, je fais défiler l'animation vers le bas est à nouveau là contre le défilement vers le haut, contre le défilement vers le bas à nouveau. Vous pouvez voir l'animation. Mais choisissons cette première, et je cliquerai une fois sur Jouer. Je reviendrai sur le navigateur. Maintenant, il est joué une fois, faites défiler vers le haut, faites défiler vers Vous pouvez voir que cela reste le même, mais ces trois cartes avaient l'animation. Encore une fois, je vous montrerai défiler vers le haut, défiler vers le bas. Maintenant, vous pouvez voir que l' animation était là, mais elle ne jouait pas parce que nous lui avons donné la commande en tant que jeu. Une fois. Après cela, nous avons une autre option appelée Exécuter sur mobile. Cela signifie que même sur l'écran mobile, l'animation doit être là. C'est ça, rien d'autre. Voici les options de défilement. Il s'agissait de l'animation de défilement. Dans la vidéo suivante, nous verrons l'animation survolée. Je vous verrai dans la prochaine vidéo. 20. Animation Hover: Voyons maintenant l' animation survol. Nous travaillerons là-dessus pour la carte. C'est la première carte. Je vais sélectionner ce Cartier. Sélectionnez maintenant ce déclencheur de survol. Je vais donc cliquer sur le survol. Maintenant, nous avons des limites du premier monde. Je vais donc cliquer sur les limites. Et si je clique sur Play, cet effet se produira lorsque l'utilisateur passera le pointeur sur cette carte en particulier. Nous avons aussi un flash. Il va clignoter comme ça, puis nous aurons le pouls. Donc, ça viendra comme ça. Je vais m'en tenir au pouls, n'hésitez pas à vérifier les autres options également. En revenant au navigateur, maintenant si je viens ici et si je survole, vous pouvez voir quand le plus pointeur est Howard, vous pouvez voir cette animation. La seule chose est que vous ne pouvez pas appliquer les trois animations en même temps. Pour un seul composant, vous ne devez utiliser qu'un seul composant. Il s'agit d'une impulsion et sélectionnez à nouveau le survol. Et si je sélectionne autre chose, secouez, puis cliquez sur. Vous pouvez voir que l' animation est là. Mais choisissons le pouls pour les quatre. Le panier arrive dans le panneau Animation, survole et revient au bouton d'aperçu. Maintenant, vous pouvez voir, oui, nous y allons. Il s'agissait du survol et encore une fois, vous avez cette option exécutée sur mobile. Cela signifie que l'animation doit également fonctionner sur mobile. C'est tout. Vous ne verrez aucune autre option comme le délai et la durée et tout cela parce que c'est corrigé, vous avez simplement ces options de menu dans le déclencheur. Dans la vidéo suivante, nous verrons le déclencheur d'animation de chargement, et ce sera la dernière vidéo de cette section. se voit donc dans la vidéo suivante. 21. Chargement d'animation: Bon, commençons par notre Seigneur. Travaillons sur cette carte qui est en haut. Il suffit donc de cliquer sur Réinitialiser tout je vais supprimer l' animation d'ici. Je vais sélectionner l'option de chargement. Lord signifie que chaque fois que la page est chargée, quelle animation doit se présenter devant l'utilisateur. Encore une fois, nous avons ces options qui sont des ampoules flash rebondissantes. Toutes ces options sont là. Nous allons sélectionner l'une des options à partir d'ici. Sélectionnons les limites et cliquons sur Play. Et vous pouvez voir que lorsque la page est chargée, cette animation sera lue automatiquement pour une seule fois. Si vous voulez jouer en boucle, nous avons également la possibilité de le faire. Mais pour la boucle, nous allons sélectionner ce paragraphe. Sélection du paragraphe, sélection du déclencheur à charger. Sélectionnez ensuite cette option Flash. Si je clique sur Lecture, vous pouvez voir l'option Flash. Si je clique sur boucle , cette animation sera lue en boucle dès le chargement de la page. Et la dernière option est exécutée sur mobile. Cela signifie que cette animation doit être exécutée sur mobile. Mais voyons l' aperçu ici. La page est chargée et vous pouvez maintenant voir l'animation est en boucle en continu. Ensuite, je vais le rafraîchir et vous pouvez voir, oui, que vous pouvez voir cet effet particulier. Tout cela se trouve dans le panneau d'animation. Vous pouvez faire autant d'animations pour vos composants, éléments, balises, quelles qu'elles soient. N'hésitez pas à consulter toutes les options du panneau d'animation. Et si vous avez des questions, posez-moi une question et j'essaierai de vous répondre dans les plus brefs délais. La plupart du temps, je vous réponds dans 24 heures. Mais à cause d'une situation différente, je prendrai peut-être plus de temps, mais cela vous répondra. C'est sûr. À ce jour, nous avons couvert ces trois panneaux, c' est-à-dire des panneaux d'apparence, des panneaux d'options et des panneaux d' animations. Maintenant, nous n'avons rien à voir beaucoup plus dans les panneaux. Dans la section suivante, commençons par quelques-unes des techniques de Bootstrap. On se retrouve dans la vidéo suivante de la section suivante. Au revoir. 22. Comprendre la rangée et la colonne: Comprenons maintenant ce qu' est le système de grille Bootstrap. Le système de grille Bootstrap est responsable de faire de bootstrap un mobile. Première réponse, l'OMS encadre une grille composée de deux composantes. Tout d'abord, relâchez la ligne et la seconde est la colonne. Une rangée s'est divisée en 12 grilles et elle change automatiquement sa taille en fonction de la taille de l'appareil. Supposons que nous ayons pris une rangée et que nous avons pris deux colonnes. Il sera automatiquement divisé en deux parties, prenant chacune six grilles. Disons que si nous n'étions pas deux colonnes de deux tailles différentes, pour un total de 12 grilles. L'année est l'année magique. Nous pouvons indiquer à chaque colonne combien de grilles elle peut prendre. Disons que dans la première colonne, nous avons besoin d'une grande surface par rapport à l'autre. Nous pouvons donc dire à la première colonne de huit grilles. Ensuite, l'autre colonne prendra automatiquement les quatre grilles restantes, ce qui représente un total de 12 systèmes de grille. Dans le cas où nous donnons des notes Ed à la première colonne et six grilles à la deuxième colonne. Ensuite, la deuxième colonne se trouve sous la première colonne car elle a dépassé le total de 12 grilles. De cette façon, nous pouvons créer une structure de colonnes de lignes parfaite. Vous le comprendrez plus en détail lorsque nous commencerons concevoir un site Web dans le logiciel bootstrap Studio. 23. Commencer: Dans les vidéos précédentes, vous avez appris la compréhension de base de Bootstrap Studio. Et le principal exercice ici est que vous avez vu bootstrap studio version 5.6. Pour peu de raisons, je n'ai pas pu enregistrer de vidéos. Et maintenant, après cela, nous allons apprendre dans Bootstrap Studio 5.8. Pas trop inquiet que je n'ai pas été autant de changements radicaux dans Bootstrap studio. Les changements sont comme la fixation des dollars mineurs est là grâce à des options supplémentaires, y a-t-il là que nous verrons dans les prochaines vidéos car à partir de maintenant nous travaillerons sur des projets. Nous travaillerons principalement sur trois projets. Tout d'abord, il s'agira d'un site Web normal d'une page. Deuxièmement, nous allons créer un site Web où vous pourrez, en tant qu'individu , démarrer une entreprise de conception de sites Web. Je vais vous apprendre comment concevoir votre propre site Web, comment intégrer quelques éléments externes comme la course de billets, chat en ligne, les courriels officiels, l' hébergement du site Web et tout cela. Enfin, je vais vous apprendre à concevoir un site Web du système LMS où nous couvrirons les deux sections, l'utilisateur et l'administrateur une fois que vous aurez fini avec l'utilisateur et l'administrateur. Et si vous vouliez créer un autre module comme un instrument, il vous sera facile de le faire vous-même sans perdre beaucoup de temps. Commençons. 24. Navbar du projet 1: ce moment-là, vous avez appris les bases du studio Bootstrap. Et pendant que j' enregistrais cette vidéo, il y avait un énorme écart entre les deux. C'est la raison pour laquelle nous nous sommes arrêtés sur Virgin 5.6 et maintenant le bootstrap est en version 5.8. Mais rien à craindre, il n'y a pas de changement énorme dans le logiciel. Les changements sont, ils ont corrigé, quelques bugs mineurs, ont amélioré les performances de Bootstrap studio, et ils ont également changé apparence et toutes ces choses. Je vais vous le montrer d'abord , puis nous allons aller plus loin. Et peu de choses qu'ils ont modifiées comme si elles ont ajouté une bibliothèque d' icônes Bootstrap. Et maintenant, la version Bootstrap que Bootstrap framework est maintenant 5.1. Le framework Bootstrap a également été mis à niveau. Sans perdre beaucoup de temps. Commençons directement et voyons ce que nous allons concevoir dans cette vidéo alors que nous avons commencé à dans cette vidéo alors que nous avons commencé concevoir le site Web à partir de cette section, deux projets seront là. L'une est une simple conception de site Web d'une seule page . Le deuxième projet que nous allons commencer est un système LMS dans lequel nous verrons la fois l'administrateur final et l'utilisateur final. Ce tutoriel vidéo. Comme vous le savez déjà, nous voulons créer un nouveau design. Donc, ce que nous allons faire, nous allons simplement cliquer sur un nouveau design ici, puis nous nommerons ce design particulier. Je vais le nommer comme votre nom. Maintenant, la version bootstrap studio par défaut est la version 5.1, et nous sommes également d'accord avec cette version. Par défaut, le vide temporaire est sélectionné, et c'est ce que nous voulons. Nous allons simplement cliquer sur Créer maintenant, concevoir. Nous avons notre page Web vierge devant nous. Avant cela, je vais vous montrer ce que nous allons concevoir exactement et quelles ressources nous allons utiliser. Ce que vous devez faire, c'est que vous pouvez accéder au dossier principal de votre cours BSS. À l'intérieur, vous trouverez les fichiers BSS et ensuite vous trouverez le quatrième nombre de dossiers qui est le hachage pour le soulignement reprend a. Dans ce sens, vous trouverez ce CV BSS un design. J'ai déjà conçu cela juste pour ma référence, je vais me pencher ce design et je le reproduirai. Et les ressources que nous allons utiliser sont faciles à utiliser dans le dossier des ressources. Voici donc les images que nous allons utiliser ici. Juste, je vais prendre cela ici et sélectionner tous les glisser-déposer dans Bootstrap studio. Sept images ont donc été importées. Et maintenant je vais ouvrir le fichier BSS sur vous, le CV un point bss, je l'ai nommé comme CV, mais il n'est pas apparu comme un CV. Regarde, c'est ce que nous allons créer. Nous allons donc juste prévisualiser cela une fois dans ce navigateur. Afficher moins. Je ne veux pas ça. C'est ce que nous allons concevoir votre nom. Vous pouvez mettre votre nom ici. Nous aurons donc trois sections dans cette pièce particulière, il s'agit d'un site Web d'une page qui restera à la maison et à contacter. Si vous cliquez sur un tableau, vous pouvez voir un défilement fluide s'il arrive dans la section À propos de nous et je vais cliquer sur Contact. Il viendra à la section contact, contact, retour à la maison. C'est ce que nous allons concevoir. Il y aura une barre de navigation, une ligne centrale, un composant central entre les deux où vous entrerez votre nom, ce que je fais image. Ensuite, trois cartes sont là, quelques icônes sont là, la section Nevada, puis les galeries photos de carburant, puis le formulaire de contact est là avec ce particulier avec toutes ces informations de contact et tout ces choses. Et puis nous avons un pied de page et oui, c'est tout. Commençons à concevoir ce site web très rapidement. Bon, je reviens au studio Bootstrap. Donc, la première chose que nous devons faire est d'importer notre barre de navigation. Je vais donc taper Nav au cours de l'année. La deuxième option est le glisser-déposer de la barre de navigation à l'intérieur de la balise body. Maintenant, nous avons la barre de navigation. Sélectionnez la barre de navigation maintenant, allez dans Options et désactivez l'option fluide car nous ne voulons pas que le fluide soit présent. Maintenant, dans la zone de marque, vous pouvez saisir votre nom. Je vais simplement taper votre nom ou vos trois sections, ce que nous voulons être forcés à la maison. Le deuxième que nous voulons est environ le troisième, ce que nous n' étions pas. E est le contact. OK ? C'est donc tout pour l'instant. Nous allons y aller étape par étape. Dans cette vidéo, nous ne couvrirons que la section Navbar. Maintenant, cette maison à propos et contact. Je ne veux pas que je ne veuille pas du côté gauche, je veux ça du côté droit. Ce que je vais faire, je vais sélectionner la barre de navigation. La barre de navigation est maintenant sélectionnée et la zone que je voulais sélectionner. Maintenant, je voulais sélectionner cette navigation. Une fois que je l'ai sélectionné, vous pouvez maintenant accéder aux options et vous pouvez voir maintenant dans l'alignement je vais sélectionner l'alignement final. Maintenant, ce n'est pas la fin. Dans la version bootstrap cinq, nous ne l'appelons pas gauche, centre et droite. Nous l'avons appelé « Start, Center and Fin ». Je vais juste cliquer sur la fin. Et c'est ce que nous voulions, non ? C'est donc tout ce domaine particulier qui est fait. Avant d'aller de l'avant. La première chose et la plus importante, l'apparence et la convivialité de notre site sont accompagnées de la police appropriée. Ce que je vais faire, je vais sélectionner cette étiquette corporelle, REL. Et dans la section Apparence, je vais passer à la section Police, et j'ajouterai une police en utilisant la famille de polices. La police que je vais utiliser facilement. Celui-là. Je vais simplement activer cette option et je cliquerai sur Enregistrer. C'est tout. Ensuite, je vais simplement sélectionner ce formulaire parmi vous, cette police que nous allons utiliser dans ce projet particulier. Bon, pour aller de l'avant, je vais juste sélectionner une barre de navigation. Maintenant, directement barre de navigation, je vais sélectionner le composant suivant immédiatement après le corps. Maintenant, je vais passer à la section arrière-plan, et dans la section couleur, je vais simplement sélectionner la couleur blanche et blanche extrême. Et réduisons l' opacité à 80 %. Vous pouvez voir maintenant que c' est RGBA signifie alpha et 0.8 est 80%. Et c'est tout ce que je vais cliquer sur Enregistrer. Et maintenant, la section Navbar est terminée. Je vais arrêter cette vidéo. Et dans la vidéo suivante, nous allons voir comment concevoir la prochaine partie de ce site Web. 25. Section du projet 1: Dans cette vidéo, nous allons aller de l'avant et nous étudierons deux nouvelles choses dans Bootstrap Studio. Le premier est l'édition d'images à l'aide d'un logiciel externe, et cette édition sera directement connectée à bootstrap studio. Voyons comment nous pouvons le faire. Ce que nous devons faire ici, c'est d'abord que je vais prendre un DV ici. On va juste taper div. Div va prendre une div et déposer sur cette étiquette corporelle. Mon DS est, vous êtes maintenant, maintenant à l'intérieur de cette div, je vais prendre une balise d'image, donc je vais simplement taper IMG et je vais prendre cette étiquette d'image et je vais laisser tomber tout cela do tag. Maintenant, la balise d'image est ici. Et maintenant, nous devons placer cette image numéro six dans cette zone particulière. Je vais donc simplement double-cliquer ici. Je vais sélectionner cette image et cliquer sur, OK. Maintenant, ce qui se passe, ou, nous voulons une image carrée, mais la hauteur de cette image est trop grande. De manière traditionnelle, ce que nous sommes censés faire c'est d' importer l'image dans le logiciel de retouche d'image tel que Photoshop lorsque affinité ou n'importe quel logiciel de retouche d'image s'y trouve. Nous devons modifier l'image, exporter l'image après l'édition, puis l'importer dans le logiciel Bootstrap Studio, puis l'utiliser. Mais maintenant, nous avons un raccourci. Voyons comment faire cela. Maintenant, ce que je vais faire, je vais passer à l'option Réglage. Je viendrai dans l'éditeur externe et je cliquerai sur l'éditeur d'images. Maintenant, dans mon système, j'ai GIMP. GIMP est un logiciel complet de retouche d'images open source. C'est la raison pour laquelle j'utilise ce logiciel de retouche d'images. Pour ce tutoriel particulier, je cliquerai simplement sur cet éditeur par défaut et je cliquerai sur GIMP. Une fois que c'est fait, je cliquerai simplement sur Enregistrer. Après cela, ce que je dois faire, c'est que je sais que j'ai utilisé cette image dans ce domaine particulier. Je vais simplement le sélectionner et je cliquerai deux fois sur cette image. Que va-t-il se passer ? Cette image sera automatiquement ouverte dans mon logiciel de retouche d'images. Maintenant, quelles que soient les instructions, je dois vérifier les instructions pour l'instant, je garderai telles quelles et je cliquerai simplement sur convertisseur. Une fois la conversion disponible, je cliquerai sur le bouton Recadrage ici. Et je vais simplement faire glisser ma souris et je vais simplement recadrer cette image. Je vais m'assurer que mon image E est au carré, donc elle est de 1000 sur 1000. Je vais taper juste un millier sur votre, et je cliquerai sur Entrée. Une fois que c'est fait, je cliquerai simplement sur l'outil Sélection et l'image est rognée. Maintenant. Maintenant, je dois exporter l' image et c'est très simple. Je clique simplement sur le fichier. Je vais juste passer par l' option Exporter ou votre exportation en tant que. Maintenant, ce DPG à six points est là. Je vais sélectionner cette image et je cliquerai sur Exporter. Je cliquerai sur Remplacer. Après cela, j'obtiendrai simplement cette option de boîte de dialogue. Il suffit de cliquer sur Exporter ou vous savez, la boîte de dialogue d'exportation a disparu. Et ce que je vais faire, je reviendrai simplement au logiciel bootstrap Studio. Et maintenant, vous pouvez voir l' image E en carré. Maintenant, c'est comme un 1000 pixels par 1000 pixels. Maintenant, je vais simplement cliquer sur l'icône Afficher ici, ou simplement accéder aux options. Et dans les options de texte, la première option est l'alignement, et je cliquerai sur le centre. De cette façon, l'image est maintenant centrée, aligner. Maintenant, si je clique sur l'image, revenez à Apparence maintenant, vous pouvez voir la hauteur et la largeur de l'image sont de 1000 pixels sur 1000 pixels. C'est très rapide et très facile. Sachez ce que je vais faire. Je vais juste taper 500 pixels ou vos px et 500 pixels ici. Que là où l'image sera en 500 pixels par quatre pixels et c'est la taille de chacun que je veux également, encore une fois, je vais sélectionner cette image, revenir à Options, et maintenant je vais chercher l'option de décoration. Dans l'option de déclaration, vous pouvez voir que les frontières sont là, et maintenant je vais simplement cliquer sur une bordure circulaire. Maintenant, l'image est sous forme circulaire. Après cela, je vais juste prendre un cap. Je vais placer cette rubrique à droite sur cette étiquette d'image. Et je vais simplement taper votre nom. Nous le prendrons en différentes couleurs. Donc pour cela, ce que je ferai dans la recherche, dans l' option de recherche de studio ici, je vais simplement taper span. Prenez la travée et je vais passer à l'intérieur de cette étiquette de titre. Et cela va sélectionner et je taperai le nom. J'ai besoin d'un espace entre ça. Je vais juste venir ici et je vais lâcher, laisser tomber, nous laisser tomber la paix. Il suffit d'entrer, de sélectionner la plage. Et dans l'option couleur, nous devons nous assurer que nous sommes dans l'option texte. Dans l'option de couleur, je vais simplement sélectionner danger ou je peux sélectionner n'importe quelle couleur dans cet ordre si je n'étais pas une couleur personnalisée ou que reviens à l'apparence et à partir de cette couleur étrangère, je peux sélectionner n'importe quelle couleur que je voulais. Après ça. Après cela, je prendrai un paragraphe et je le déposerai entre la balise de titre et la balise image. Je vais simplement double-cliquer dessus et je vais taper ce que je fais. C'est tout. Maintenant, cette partie est prête. Passons maintenant à la nouvelle section. Dans cette affaire, ce que je vais faire, je prendrai le conteneur de type COND et il le déposera à l'intérieur de cette balise div. Maintenant, le conteneur est là. Je vais prendre la rangée et cette rangée est suggérée, ou vous pourriez simplement prendre une rangée. Maintenant, je vais sélectionner la ligne, les colonnes sont là. Je vais prendre cette colonne. À l'intérieur de cette colonne, ce que je vais faire, je prendrai un dépôt de carte, à l'intérieur de cela. Et on y va. Nous avons un sous-titre et tout ça. Mais ce que nous voulons, nous ne voulons pas ces liens ici, donc je vais simplement supprimer ces liens de vous. Je le ferai, je vais chercher une icône maintenant. L'icône est là et je vais déposer cette icône à l'intérieur de ce corps de la carte. Je vais double-cliquer sur cette icône. Et maintenant, vous pouvez voir que nous avons beaucoup de bibliothèques d'icônes sur vous. Nous avons des sangles de démarrage, est-ce que vous avez aussi des icônes ? Maintenant, je vais simplement taper verbe et cette option Web, l'icône Web est là et je vais sélectionner cette icône Web. En revenant à l'Apparence, je vais simplement faire défiler vers le bas et je dois augmenter la taille de la police. Maintenant, je vais simplement augmenter la taille de ce téléphone. Peut-être qu'un 100 sera bon pour moi. C'est logique. Le titre sera design de site Web, concepteur VSS, BSS bootstrap Studio. Et ici, vous pouvez mettre n' importe quoi, ce que vous voulez, vous pouvez simplement ajouter là-bas. Pour l'instant, je laisse juste le texte fictif être là-bas. Maintenant, ce que je vais faire, je vais juste sélectionner les cicatrices, venir aux Options. Et maintenant, je dois aller aux décorations et je vais juste faire tomber de l'ombre sur vous ce sera une ombre régulière. L'ombre régulière est là. Maintenant, je vais sélectionner cette colonne et je vais regarder dans cette colonne au total, il y aura trois colonnes, 12. On y va. Je vais double-cliquer sur cette icône. Je vais simplement taper recherche, icône de recherche. Au lieu de cela, je vais sélectionner la recherche. Je viendrai ici et je vais juste le nommer SEO. Numérique. Disponibilité. Encore une fois, le texte fictif sera là. Et maintenant, je vais simplement double-cliquer sur cette icône une fois de plus et je vais taper serveur. L'icône du serveur est là et cliquez sur. OK. Je vais taper hébergement*** en tant que domaine d'hébergement ING. Vous êtes capable de taper l' héberger parce que j'utilise l'hébergement, parce que j'utilise ces chaînes sont souvent que vous pouvez taper n'importe quoi là-bas. Maintenant, ces options particulières, nous voulons des changements à cet égard. Maintenant, nous allons donner un aspect et une sensation supplémentaires à cela. Je vais donc sélectionner cette première année de carte. Je viendrai au panel Apparence. Et en arrière-plan, l' image est entièrement blanche. Ce que nous allons faire, nous ne ferons que ramener l'opacité à 80 %. Assez juste. Ensuite, je vais sélectionner cette copie, je ferai cette vapeur vers la deuxième carte en fait. Et à la troisième carte, collez simplement les valeurs sur u. Maintenant, je vais sélectionner cette ligne, ou peut-être que je peux sélectionner ce conteneur, calculer le conteneur. Maintenant, en ce qui concerne l'apparence, les premières options de mise en page disponibles. Et dans l'option de mise en page, l'option de marge est là. Je vais juste ouvrir cette option de marge et le haut de la marge. Ce que je vais faire, je vais juste choisir la valeur du côté négatif. Vous pouvez maintenant voir qu' il y a chevauchement entre cette image et les rejets, et c'est ce que nous voulions. Maintenant, je pense que ce chevauchement est suffisant, alors peut-être prenons moins 100 pixels. On y va. Bon, c'est assez juste. Vérifions les différentes tailles d'écran. Md, nous voulons des choses différentes. Je vais donc ouvrir cette ligne, je vais sélectionner cette colonne, revenir à Options et MD je vais en prendre six. La deuxième colonne, j'en prendrai six. Et pour la troisième, je prendrai l'outil complet en MD. Oui, je vais prendre la maison complète en petite taille d'écran. C'est tout à fait très bien. Et dans une taille d'écran très petite, encore une fois, c'est tout à fait correct. OK. Pas de problème. Oui, il y a un problème. L'image est maintenant grande. Ce que nous allons faire, je viendrai, je viendrai sélectionner cette image. Nous reviendrons au panneau d' apparence. Et maintenant, ce que nous avons fait est comme de 1000 pixels, nous avons descendu à 500 pixels. Bref, ce que nous avons fait, c'est de réduire la taille de 50 %. Au lieu de prendre 500 pixels, ce que nous pouvons faire, l'option alternative est simplement cliquer ici sur le bouton de réinitialisation, et de taper simplement 50%. C'est tout. Il n'y a pas de défilement vertical et la fixation complète est leur deuxième option, ce que nous verrons dans la vidéo suivante. Mais avant cela, nous allons fixer cette zone particulière où ces deux cartes sont très proches l'une de l'autre et où il n' y a pas de distance entre elles. Pour en revenir à la taille de l'écran Excel, je vais simplement sélectionner cette colonne, ce panneau d'éditeur, le panneau attributaire. Et dans la classe, ce que je vais taper, je leur donnerai le fond de la marge. Donc, ce que je vais faire, je vais juste faire défiler un peu vers le bas. Sélectionnez cette colonne. Je vais taper la marge deux en bas, tiret deux et appuyer sur Entrée. Vous pouvez voir maintenant que nous avons une couture inférieure de marge que je ferai pour cette colonne également. Marge m pour la marge avant le tableau de bord inférieur deux. Simple sur cette colonne aussi. Margin, tiret inférieur à ce que j'ai fait. Ce que j'ai fait ici, c'est comme si j'avais sélectionné des colonnes individuelles et je leur donnais les valeurs individuellement. Mais vous pouvez sélectionner tous ensemble, les trois colonnes en même temps et vous pouvez les donner, et vous pouvez donner la même valeur que et vous pouvez donner la même valeur que la marge inférieure à la fois. D'accord ? Donc, je vais tout simplement doucement. Une fois que nous aurons attrapé la grippe , je le ferai d'une manière professionnelle appropriée, systématique et appropriée. Maintenant, nous pouvons le voir encore une fois, nous avons quelques problèmes avec la colonne. La colonne Rita a sélectionné les trois colonnes avec notre sélection. En revenant au panneau Options, nous pouvons maintenant voir après MD, la taille de l'écran sera LG. Lg donnera la largeur de quatre. De cette façon. En MD, c'est comme ça, désolé. Lgn au-dessus de ce sera l'un après l'autre. En MD, deux seront au sommet et un en bas. Et dans SM, chacun sera en dessous de l'autre. Et la même chose arrivera à très petite. Je pense que pour l'instant , c'est bon d'y aller. Donc en revenant à la taille Excel, nous avons ceci qui a commencé à regarder. Nous devons faire quelque chose avec cette image C. Maintenant, le réactif est désactivé, et si je descends à cette taille d'écran particulière vous avez maintenant un défilement horizontal ici. Juste pour résoudre ce problème sans utiliser le médaillon plus ancien, il n'a pas simplement cliqué sur cette réponse, vous icone ici. Et c'est des solides faits. Jouez avec la réactivité de l'image. C'est tout. OK. Oui, merci les gars. On se retrouve dans la section suivante maintenant. 26. À propos et Galerie du projet One: Dans cette vidéo, nous allons donc aller de l'avant. Nous prendrons un autre conteneur, donc nous allons simplement taper conteneur année. Et je vais laisser tomber ça et je déposerai ce conteneur sur cette étiquette de corps. J'ai le conteneur ici. Par conséquent, ce conteneur je donnerai une marge, un haut, une marge, haut est M est la marge et T est stop. Dash cinq donnera la marge supplémentaire ici. Donc oui, nous avons une année d'écart supplémentaire, n'est-ce pas ? À l'intérieur, je prendrai un titre, étiquette de titre, je déposerai cette étiquette de titre ici. Et cela sera écrit comme s'agissait d'aller à l'élément central Options. C'est tout. Ce titre, je vais donner le haut rembourré et le bas de rembourrage. P est donc synonyme de rembourrage. Le bas est B, le tableau de bord trois espaces, encore une fois, le haut rembourré. Pt tiret trois, c'est-à-dire que Pb est rembourré en bas, P t est rembourré en haut et trois est la valeur. Maintenant, j'ai donné le rembourrage et la marge à cela. Je vais donc sélectionner ce conteneur et en apparence, je vais descendre à la frontière. Et je vais sélectionner cette bordure supérieure, et je sélectionnerai la couleur unie et le noir ira bien. Encore une fois, en bas et sélectionnez Solide. J'ai des bordures supérieures et inférieures. Voyons un aperçu ici. Je cliquerai simplement sur votre œil pour activer cet aperçu et je cliquerai sur Aperçu. Le navigateur par défaut va être lancé. On y va. Nous avons l'aperçu de notre site Web. C'est beau, n'est-ce pas ? Il suffit de minimiser cela et d'aller de l'avant. Nous allons prendre un autre conteneur ici, déposer cette étiquette de corps d'insecte, et j'ai ce conteneur ici. Maintenant, nous allons prendre une balise de paragraphe et je vais déposer ce paragraphe dans ce conteneur. Et pour ce conteneur aussi, je vais juste donner une marge supérieure ou peut-être trois. Je voulais faire un texto fictif là-dedans. Ce que je vais faire, je frapperai Contrôle P et L type Lorem sont je vais juste taper, je vais juste appuyer sur Entrée et appuyer sur Entrée une fois de plus. On y va. Nous avons un texto fictif ici. Je vais penser que je dois dupliquer ce texte fictif trois fois au moins pour que j' aie quelques données ou vous, laissez-nous voir l'aperçu. C'est ça. Bien ou bien, prenez ce copieur et collez-le. Et collez-le ici. Encore une fois, en pâte, nous avons deux options différentes. Je vais juste le copier encore une fois. Ce que je vais faire, c'est que vous collez simplement le contrôle V année. Vous pouvez voir qu'il y a un espace supplémentaire au début et un espace supplémentaire à la fin. Pour éviter cela, ce que nous devons faire est simplement de faire le contrôle Z. Maintenant, pour éviter ces espaces supplémentaires, ce que nous devons faire, c'est comme si nous devions coller en utilisant le raccourci comme control plus shift plus v. C'est ça. Nous n'avons plus d'espace pour le moment. Je vais le faire à l'intérieur pour que ce soit un bon paragraphe. Et je vais juste supprimer ce dernier. Alors, sélectionnez le paragraphe et dans les polices, je vais simplement passer à l'alignement et cliquez simplement sur Justifier. Même chose. Je vais le faire au deuxième paragraphe. Je vais juste cliquer sur Justifier sur vous. Ok, maintenant ça a l'air bien. Après cela, nous devons mettre la section galerie et c'est très facile. Le composant prêt à l'emploi est là. Je vais juste venir ici et nous allons simplement taper galerie. Vous pouvez voir une galerie Lightbox. Prenez cette galerie, déposez-la dans cette étiquette corporelle. C'est tout ce que votre galerie est terminée. La galerie Lightbox ou moi supprimerons simplement cette visionneuse et seule l'option Gallery sera là. Ce texte comme d'habitude, si vous le souhaitez, vous pouvez le conserver ou le supprimer. Maintenant, vous avez également ces photos. Ces photos peuvent être remplacées et nous verrons ce remplacement dans certaines vidéos ultérieures, car nous nous concentrons maintenant conception et non le remplacement des photos. Disons l'aperçu. En aperçu, vous pouvez voir maintenant, oui, nous avons cette chose également la section À propos puis la galerie. C'est tout ce que l' option Galerie est également faite. Maintenant, le plus important, la section Contactez-nous, nous voulons concevoir la section Contactez-nous et cette section particulière que nous apprendrons dans la prochaine vidéo. Rendez-vous dans la prochaine vidéo où nous apprendrons comment créer la section Contactez-nous avec du texte et un formulaire de contact. Je vous verrai dans la prochaine vidéo. 27. Section 1 du projet 1: Dans cette vidéo, nous allons en savoir plus sur la section Contactez-nous. Donc, directement, nous allons commencer, je vais juste prendre un conteneur, le déposer dans l'étiquette du corps. Maintenant, j'ai ce conteneur et je veux deux sections où une adresse e-mail et un numéro de téléphone seront là. Dans la deuxième section, nous allons créer un formulaire. Ce que je vais faire, je vais prendre une rangée. De toute évidence. Ne fouillons pas la pièce. Je vais simplement sélectionner ce conteneur et dans la suggestion, la ligne est leur grande ligne et la déposer dans ce conteneur, sélectionner cette ligne et nous devons créer deux colonnes. Une colonne est ici, et je vais juste dupliquer ceci et c'est la deuxième colonne. Donc, sélectionnez les deux colonnes pour accéder aux options, inversez. Il suffit de sélectionner ces six parmi MD et au-dessus, nous avons une division de deux, c' est-à-dire 66, et avant cela, c'est comme 212. Deux sections complètes seront donc là. Je vais donc simplement cliquer sur L ici. Cela ressemblera à ça. Maintenant, deux colonnes sont là, et maintenant en dessous de l'année MD, nous avons l'une après l'autre. Je vais prendre une direction par ici. Je vais déposer cette rubrique à l'intérieur de cette colonne. Je vais taper. N'hésitez pas à me contacter et à m'exclamer. Après cela, je prendrai un paragraphe. Ne prenons pas de paragraphe maintenant. Nous allons prendre un lien. Je vais simplement déposer ce lien dans cette colonne, la première colonne. Bon, prenons ce panneau d'édition. Dans la classe. Je vais juste entrer dans un cours. Le nom de la classe sera décoration de texte, décoration de tiret de texte, aucun. C'est une classe bootstrap prête à l'emploi. Puis le texte est sombre. Encore une fois, il s'agit d'une classe bootstrap prête à l'emploi. Il entre. Maintenant, le texte est sombre et il n'y a pas de décoration, de décoration qui sentent lorsque vous avez un lien, lorsque vous survolez pointeur de votre souris sur le lien souligné, bienvenue que nous ne voulons pas. Bon, maintenant, OK, et maintenant je vais prendre un paragraphe. Placez ce paragraphe à l'intérieur de ce lien. Il suffit maintenant de taper l'adresse e-mail. Donc ce que je peux taper l'exemple d' immunogénicité, Years Example au taux email.com. Et le texte du lien, je vais juste double-cliquer sur ce texte. Je vais simplement double-cliquer sur ce lien, texte du lien et je vais simplement le sélectionner et le supprimer, comme supprimer le retour arrière du sens. Nous avons un paragraphe pour vous. raison pour laquelle j'ai ajouté un paragraphe est comme si nous avions plus de contrôle sur le paragraphe, mais liés, nous n' avons pas de contrôle sur le lien. Disons, par exemple, que je veux simplement augmenter la taille. Il suffit de sélectionner ce paragraphe et de cliquer sur Leto. Oui, c'est tout. Et si je sélectionne ce lien et que je veux maintenant le dupliquer deux fois de plus, que se passera-t-il s'il s'agit d'un lien ? Il viendra l'un après l'autre. Je voulais l'être en dessous de l'autre, pas l'un après l'autre. C'est la raison pour laquelle j'ai pris le paragraphe pour vous et je n'ai pas continué avec lien. Nous allons donc sélectionner ce lien. Dupliquez encore une fois. Maintenant, on lui demanderait en dessous de ça. Dupliquez encore une fois. Il y a encore un bien public. Maintenant, nous allons simplement taper un numéro de téléphone au fil des années. Le numéro complet sera plus 91. C'est le code pays de mon pays. Espace, 9876543210. Je suis très sûr que ce numéro que personne n'utilise ce deuxième numéro de téléphone sera plus 91, encore une fois, 9876543211. Encore une fois, ce numéro, personne n'a utilisé ça. Maintenant, ce que nous voulons c'est que chaque fois que l'utilisateur arrive sur le site Web, vous pouvez maintenant voir sur cette zone particulière le plus grand pointeur est modifié. Laissez-nous l' icône du bout des doigts. Pourquoi ? Parce que c'est le lien. Chaque fois que l'utilisateur clique automatiquement sur cette adresse e-mail particulière, le navigateur Web par défaut ou l' application de messagerie par défaut s'ouvre. Et dans deux sections où nous saisissons automatiquement l' adresse e-mail du destinataire, cette adresse e-mail doit être saisie là-bas. Je souhaite créer ce type de fonctionnalité sur ce site Web. Alors, comment faire ça ? C'est très facile. Retournez simplement au studio Bootstrap. Sélectionnez ce lien particulier dans la section URL, ce hachage, puis tapez simplement deux-points masculins et l'adresse e-mail. Exemple sur le site email.com. C'est ça. Il y a du bien à l'aperçu. Et si je clique sur cet e-mail maintenant, vous pouvez voir qu'il demande de lancer une application de messagerie. Et je vais cliquer sur, OK. Une fois que j'ai cliqué sur Oaky, vous pouvez voir l'exemple à lire email.com est maintenant que vous êtes dans les deux sections. Vous venez d'utiliser juste besoin d'ajouter le sujet et le contenu. C'est tout. C'est très facile et très pratique. En termes UX, l' expérience utilisateur est de premier ordre. La même chose que nous ferons avec le numéro complet. Je vais donc sélectionner ce numéro de téléphone et le lien, qui est le lien qui contient ce numéro complet. Et je vais simplement cliquer sur ce lien, revenir à cette URL. Et je vais taper deux points de téléphone et taper simplement le numéro avec le code de pays plus 91979876543210. C'est ça. Même chose que je ferai avec le deuxième lien. Il suffit de taper jusqu'à ce que PEL indique l'espace point-virgule, code pays et le numéro de téléphone. De cette façon, que se passera-t-il lorsque l'utilisateur cliquera sur cette zone particulière, il définira le site tente d' ouvrir, choisissez une application. Je vais simplement cliquer sur Ouvrir. Et maintenant, il montre encore une chose. Mais que s'est-il passé lorsque la majorité des utilisateurs utilisent le navigateur Chrome ? Le navigateur Chrome est connecté à nos appareils mobiles. Que se passera-t-il lorsqu' un utilisateur clique sur ce numéro complet ? Et ce n'est pas Chrome. Que se passera-t-il lorsque différents types de boîtes de dialogue viendront, vous essayez si vous utilisez le navigateur Chrome, les différents types de fenêtres contextuelles apparaîtront ici. Et une fois que l'utilisateur clique sur Autoriser automatiquement sur son téléphone, qu'il s'agisse d'Apple ou d' Android, peu importe. Ce numéro arrivera automatiquement à l'intérieur du téléphone et comment se passera exactement. L'application téléphonique s'ouvrira. Ce numéro sera automatiquement composé et l'utilisateur n'a qu' à cliquer sur le bouton Appel. C'est tout. Encore une fois, l'expérience utilisateur est premier ordre. Oui, c'est tout. C'est ainsi que nous allons créer cette zone particulière et cette section est terminée. Nous allons maintenant passer à la section suivante où nous allons créer un formulaire de contact et ce que nous allons faire dans la prochaine vidéo. On se voit dans la vidéo suivante. 28. Section 2 du projet 1: Bon, nous allons donc créer un formulaire de contact dans cette vidéo particulière. Commençons donc. Donc, d'abord, je prendrai une forme, votre formulaire FOR M. Je vais déposer ce formulaire à l'intérieur de ce contenant. À l'intérieur de cette colonne Non conteneur. Il s'agit d'un élément de formulaire. Maintenant, à l'intérieur de cet élément de forme, je vais prendre div. Je vais juste abandonner cette plongée pendant un an. Et après cela, je prendrai une étiquette. Je vais taper LAB étiqueté, leap de type idéal LAB seulement puis étiqueté sur le terrain. Bienvenue. Cette étiquette de champ. Je veux le déposer à l' intérieur de cette étiquette corporelle. Ok, l'étiquette de champ est là. Et maintenant, la première chose que nous attendons de l'utilisateur est le mème. Ces informations particulières seront insérées dans la saisie de texte. Je vais juste ajouter une note ici, la saisie de texte et la zone de texte sont deux choses différentes. Ne vous confondez pas sur vous, ou vous prenez simplement cette entrée de texte et cette entrée de texte, je le déposerai dans cette div. Maintenant, cette étiquette, je vais juste l'éditer. Je l'ai fait et je vais taper FullName. Sélectionnez ce texte et placez votre œil sur l'espace réservé comme nom complet. Dans la valeur. La valeur ne connaîtra pas le nom, ni le nom de ce champ. Regardez ce nom est le nom du champ. Il s'agira donc d'un nom complet ou de taper simplement le nom complet. Et je vais sélectionner cette étiquette maintenant, sentir l'étiquette. Et pour cette étiquette de champ, c'est pour qui ? Pour ce que nous devons faire, c'est que je vais simplement sélectionner ceci et l'étiquette maintenant, le nom que nous avons donné à son nom complet, juste, alors copiez ceci, sélectionnez l'étiquette et je vais taper, et je vais coller cette unité d'organisation FullName. De cette façon, le système sait que cette étiquette de champ correspond au texte d' entrée nommé FullName. Sélectionnez cette div. Ouvrez ce panneau attributaire et marge en bas. C'est tout. Maintenant, nous allons simplement faire quelques déclarations à ce sujet. Je vais donc sélectionner cette entrée de texte à l'intérieur de l'apparence, je vais simplement faire défiler vos quatre bordures. Les bordures sont là et le rayon, je vais juste enlever le rayon et je le mettrai à 0. De cette façon, les âges de cette saisie de texte seront nets. Et je vais juste ajouter une bordure inférieure avec un trait et une largeur d'un pixel, désolé, une largeur de pixel, et la couleur sera sombre. De cette façon. Ce champ de saisie particulier est prêt. Maintenant, je vais simplement sélectionner cette div et je l'étiqueterai. Cliquez avec le bouton droit de la souris et étiquetez cela comme nom complet. Ok, donc nous le ferons, quand nous reviendrons redessiner cette zone particulière, nous saurons à l'intérieur de cette div, le nom complet, l'étiquette et le champ de saisie sont là. Maintenant, dupliquez ça. Dans cette zone, nous l'appellerons comme le prochain numéro de téléphone que nous sommes nés. Oui. Nous allons donc taper le numéro. Numéro de téléphone. Nous n'utiliserons pas de saisie de texte car numéro de téléphone ou toujours les chiffres nous n'utilisons pas comme que nous n'utilisons pas comme des caractères dans ces caractères alphabétiques. Je vais simplement supprimer ceci de votre numéro de type ou de votre numéro. Et nous avons un champ de saisie numérique au-dessus de vous. J'ai créé une entrée numérique par moi-même. Il s'agit d'une entrée numérique sans flèche. Je vais vous montrer la différence entre cela. Nous allons d'abord prendre ce numéro et je vais le déposer à l'intérieur de ce second. Juste pour changer le nom de l'étiquette. Le nom de la table sera numéro. Ce numéro d'entrée est là. Passons maintenant à la section précédente, vous pouvez voir quand vous venez de survoler ici, vous pouvez voir deux flèches qui sont comme l'incrément et le décrément. Nous ne voulons pas de ces flèches lorsque nous entrons le numéro complet, n'est-ce pas ? Donc, ce que je vais faire, je retournerai au studio bootstrap. Je vais simplement supprimer cette entrée numérique de vous et cette entrée numérique sans flèche. Cette composante en particulier est là. Ce composant n'est pas installé par défaut dans le studio bootstrap. Ce composant J'ai créé ce composant. Il suffit d'aller en ligne et de rechercher numéro d'entrée sans flèche. Vous obtiendrez ça. Sélectionnez cette entrée de numéro sans flèche et déposez-la dans cette zone de numéro de téléphone. Que va-t-il se passer maintenant ? Passons à l'aperçu. Maintenant, vous pouvez voir qu'il n' y a pas de flèche ici. C'est ainsi que nous le voulions. Nous allons donc choisir cela. Et dans le défilement vers le haut dans les options, l'espace réservé est à nouveau plein nombre. Il suffit de le copier et de mettre le même nom pour l'étiquette. Je vais également renommer cette étiquette. Bon, sélectionnez maintenant ce numéro de téléphone, venez dans Apparence. Et maintenant, dans cette zone, je vais simplement sélectionner cette bordure inférieure et la rendre de couleur unie et foncée. Un pixel est bon et le rayon sera de 0 pixels. C'est ça. D'accord ? Maintenant, après ce numéro complet, ce que nous voulons, c'est l'adresse e-mail, OK, alors dupliquez ceci. Maintenant, avant cela, je vais simplement renommer l'étiquette en e-mail et appuyer sur Entrée. Passons de numéro de téléphone à e-mail. Maintenant, l'adresse e-mail a un champ de saisie différent, donc je vais le supprimer une fois de plus. Et ici, je vais simplement taper des messages électroniques et des e-mails. Il y en a. Qu'est-ce que cette saisie de courrier électronique ? Il a un JavaScript prêt à l'emploi écrit pour cela. L'adresse e-mail a un format particulier, n'est-ce pas ? Le format sera comme en premier, votre nom sera là ou quoi qu'il soit, la fente de jambe dans cette zone particulière, cet exemple est là. Ensuite, nous avons au rythme, puis nous avons un nom de domaine, c' est-à-dire gmail.com, hotmail.com, yahoo.com, Outlook.com, quoi qu'il soit. Si un utilisateur vient de saisir exemple et d'essayer de soumettre ce formulaire, il verra que l' adresse e-mail n'est pas corrigée. Si l'exemple de type utilisateur dans l'e-mail et.com n' est pas écrit, encore une fois, il indique qu'il n'est pas dans le bon format. Situation hypothétique. Si l'utilisateur saisit un exemple sur l'e-mail com où il a manqué le point. Encore une fois, ce champ de saisie particulier indique que l'e-mail n' est pas dans un format approprié. Je vais vous le montrer également. continuer, sélectionnez ce champ de saisie d' e-mail particulier, accédez à l' espace réservé du panneau Options Je vais taper e-mail. Saisissez votre identifiant e-mail. Le nom que je donnerai à ce nom sous forme d'e-mail. Je vais le copier sur l'étiquette. Je vais changer le nom de l' étiquette en tant qu'e-mail. Nous voulons connaître la zone dans laquelle l' utilisateur peut saisir le message. Maintenant, dans cet endroit particulier, la zone de texte est la bienvenue. Dupliquez ceci. Et maintenant, je vais taper un message. Sélectionnez cette entrée e-mail et O, nous avons oublié de donner la bordure. Bon, je vais donc sélectionner ce champ de saisie d'e-mail. J'irai dans Apparence et le rayon sera de 0 pixels. La couleur sera noire et la bordure inférieure sera solide. Aller de l'avant. Sélectionnez donc cette div pour changer le message d'étiquette en premier. L'étiquette est un message, et maintenant nous devons prendre la zone de texte ici, déposer à l'intérieur de ce message. Faites la même chose que nous ferons en premier, rayon de 0 pixels, bas, solide avec couleur noire. C'est fini avec ça. Voyons maintenant l'aperçu. Nous avons l'endroit pour, maintenant nous avons l'endroit où entrer le nom qu'il affiche, il est indiqué que vous entrez votre nom complet numéro de téléphone et votre adresse e-mail, puis nous avons une zone à envoyer un message. Maintenant, vous pouvez voir cette zone, nous pouvons augmenter la taille. Ce champ de saisie particulier est appelé zone de texte. Le plus important, c'est que nous avons besoin d'un bouton sur lequel l' utilisateur peut cliquer sur une main. Il peut soumettre le formulaire. Pour ça. Encore une fois, nous en aurons besoin. Nous aurons besoin de cet accord où nous dupliquerons cette div et nous l'étiqueterons simplement comme bouton. Et nous ne voulons pas de cette étiquette ni de quoi que ce soit à l'intérieur. Nous avons simplement besoin d'un bouton. Je vais juste prendre un bouton et je vais le déposer à l'intérieur de ce bouton, je vais taper envoyer un message. Le thème que nous suivons est le rouge et le noir. Donc ce que je vais faire, je vais juste passer aux options et le style sera sombre lui-même. La bordure sera nette. Vous pouvez voir l'aperçu. Oui, les bordures sont tranchantes. Je vais faire un petit changement. Je vais simplement augmenter la taille du bouton par défaut à grand. Ok, donc ça aura l'air plutôt bien. Si vous voulez. Nous pouvons également placer l'ICANN à l'intérieur de ce sol. Et il va prendre cette icône et la mettre directement ici, je double-clique sur l'icône Bootstrap et envoie le message à venir. Peut-être. Non. Désolé. Non, celui-là. Nous pouvons utiliser celui-ci. Nous allons donc prendre ce premier premier. Il suffit de mettre un ordre de paix. C'est tout. Ce bouton particulier sera un bouton Soumettre. Lorsque l'utilisateur clique sur ce bouton, ce formulaire sera envoyé, le formulaire sera envoyé. Cliquez sur ce bouton. Dans la zone des options de bouton, nous avons le type de bouton. Ce type de bouton, nous allons sélectionner celui de soumission. Chaque fois que l'utilisateur clique sur Soumettre quelles que soient les informations écrites dans ce formulaire, ces informations seront envoyées à l'adresse e-mail. Maintenant, comment envoyer ces informations particulières à l'adresse e-mail. C'est très facile et nous le verrons dans la prochaine vidéo. On se voit dans la vidéo suivante, les gars. 29. Forme intelligente du projet One: Nous allons donc envoyer les informations de ce formulaire à l'adresse e-mail. Pour cela, ce que nous devons faire c'est de sélectionner ce formulaire. Une fois que j'ai sélectionné ce formulaire, je cliquerai simplement sur le bouton Smart form ici. Ensuite, je dois ajouter le destinataire. Nous avons donc ces récipiendaires pendant plus d'un an. C'est mon adresse e-mail, actuellement diplômée chez Yahoo.com. Et si vous pouvez me poser des questions en envoyant le courrier à cette adresse e-mail. Déjà, les adresses e-mail sont là, mais si vous voulez ajouter une adresse e-mail, comment faire cela, c'est très facile. Il suffit de cliquer sur Gérer. La boîte de dialogue viendra et cliquez sur Ajouter un destinataire, entrez l'adresse e-mail ici. Disons que je vais simplement taper un exemple sur le reheat mail.com. Désolé, je viens d'écrire l'exemple d'adresse e-mail email.com sur mail.com et de cliquer simplement sur Créer. Et que va-t-il se passer ? Un e-mail de vérification vous sera envoyé dans la mesure où vous devrez entrer un numéro à cinq ou devrez entrer un numéro à cinq ou six chiffres. Ce numéro que vous devez mettre ici. Il suffit ensuite de cliquer sur Verify. C'est tout. Après ça. Je vais simplement supprimer cela. Après cela, les destinataires des e-mails apparaîtront dans cette liste. Dans ce récipiendaire, choisissez également l'école bénéficiaire. Il suffit de sélectionner ceci. Je vais simplement sélectionner mon adresse e-mail. C'est tout, rien d'autre à faire. Ensuite, nous avons la possibilité rediriger l'URL une fois le formulaire envoyé, où vous souhaitez que l' utilisateur soit redirigé. l'instant, nous n'avons qu'une seule page, il suffit donc de cliquer sur index.html. C'est tout. Ok, alors nous avons une option de messagerie personnalisée que nous avons déjà vue. Je pense que nous avons déjà vu toutes ces choses dans les vidéos précédentes. Si je ne me trompe pas. Oui, mais encore une fois, comme envoyer après, comme, vous pouvez ajouter le sujet. Le sujet sera celui des formulaires de contact. Le co-NP est parti. De la part de l'utilisateur. Chargement. On peut peut-être taper presque là. Ensuite, nous pouvons envoyer le message. Alors le message de succès sera, je reviendrai vers vous sous peu. Le message d'erreur le conservera tel quel. Oups, puis fichier trop gros. Si la pièce jointe est là, nous devons afficher ce fichier trop gros puis un formulaire vide. Comme S'il vous plaît, remplissez les informations qu'il y a. Oui, toutes ces choses alors le bouton Fermer sera là. Fermer le bouton Nous allons laisser cette option par défaut totalement. Bon, maintenant, il faut aussi valider le formulaire, non ? Donc ce premier champ, il doit être compensé, les utilisateurs doivent remplir ce formulaire si le formulaire ne sera pas soumis. Que va-t-il se passer maintenant ? Il suffit d'en venir à ça. Et si je clique sur Envoyer, vous pouvez voir que le formulaire est envoyé maintenant, mais il n'y a aucune information et cliquez simplement sur Je ne suis pas un robot. Il va vérifier. Veuillez remplir le champ requis et réessayer. Mais cela ne devrait pas se produire. Vous êtes seul le champ de saisie qui devrait s'afficher comme s'il vous plaît entrer quelque chose là-dedans, n'est-ce pas ? Revenons donc au studio Bootstrap et sélectionnons simplement cette entrée de texte dans les options. Lors de la validation, nous devons entrer dans la validation et cliquer simplement sur ce bouton requis ou vous semblez avoir un numéro complet, allez à Validation, cliquez sur le bouton requis. Même chose. Nous enverrons une adresse e-mail, cliquez sur le bouton requis et le bouton message requis. Que se passera-t-il si vous accédez à l'aperçu ? Si je clique sur Envoyer, ça dira, s'il vous plaît remplir cet homme de film. S'il vous plaît Je vais mettre mon nom. À quoi ressemble mon nom ? Tapez le nom complet, puis le numéro complet. Saisissez ce numéro de téléphone et cette adresse e-mail sont maintenant. Maintenant, je veux vous montrer cet e-mail. Il suffit de taper un e-mail et je mettrai le message en tant que message. Je vais essayer de l'envoyer. Maintenant, vous pouvez voir, veuillez inclure le tarif dans l'adresse e-mail. E-mail. Allez, montrez. Une annonce est manquante par e-mail. Le tarif est correct. Très bien. Au tarif qui n'est pas seulement une fois de plus, veuillez entrer la pièce. suivi à l' adresse e-mail rouge est incorrect. Gmail.com. Et maintenant, si j'envoie cet e-mail, vous pouvez voir que je ne suis pas un robot. Et c'est presque fini. Et boum, c'est tout ce que nous avons fini avec ça. Nous pouvons créer une autre page où nous ferons nos félicitations, j'ai reçu le message. J'ai reçu votre message ou j'ai reçu votre e-mail et nous reviendrons vers vous sous peu. Nous pouvons créer une autre page et rediriger l' utilisateur là-bas. Et nous allons mettre un bouton là-bas, comme revenir à la page d'accueil. Et si nous cliquons sur ce bouton particulier, la redirection se fera vers cette page. Ok, donc nous ne voulons pas faire tout cela pour cette démonstration particulière. Pour l'instant, ce domaine est terminé. L'image et cette galerie d'images fonctionnent correctement, pas de problèmes et toutes ces choses. Nous pouvons également ajouter un pied de page ici. Il suffit de venir ici et je vais taper FOBT et pied de page sombre comme s'il y avait trop d'informations. Tout d'abord, le basique est OK, c'est bon pour nous. Je vais juste déposer ce pied de page basique dans le corps. Ce corps. C'est tout. Combien de boutons nous avons, nous avons à la maison. Ensuite, nous avons à peu près et ensuite nous avons des contacts. C'est tout le reste. Nous ne voulons pas. Je vais donc simplement sélectionner celui-ci et ces conditions générales et politique de confidentialité , puis supprimer celle-ci. Nous pouvons relier cela évidemment et le nom de l'entreprise au nom de l'entreprise, Corporate 2021. Je vais donc simplement taper votre nom. Copyright 2021. C'est ça. Voyons maintenant l'aperçu. Si je fais défiler, est-ce que tout va bien ? Maintenant, ce que nous voulons, notre barre de navigation disparaît lorsque nous faisons défiler vers le bas. Nous ne voulons pas cela. En revenant au studio de bootstrap, je vais juste sélectionner la barre de navigation une fois de plus, et je garderai juste la position fixée au sommet. Corrigé au sommet est un peu bizarre que votre nom soit entré dans la carte, mais gardons cela comme TikTok l'a fait, sans problème. Revenons à l'aperçu. Maintenant, vous pouvez voir que la barre de navigation est collée en haut. C'est tout. Faisons la dernière partie de ce site Web où nous pouvons simplement cliquer sur ce bouton et la page défilera jusqu' à cette zone particulière. Et ce que nous allons faire dans la prochaine vidéo. On se voit dans la vidéo suivante. 30. Finalisation du site du projet One: C'est peut-être la dernière vidéo de cette section. Je ne sais pas si quelque chose me vient à l'esprit. Je peux créer quelques vidéos supplémentaires dans cette section. Bouton Home, nous allons sélectionner le bouton Home et vous pouvez voir que ce bouton Home est sombre et à peu près et nous contacter II est un peu clair. La raison derrière cela, et nous allons simplement sélectionner ce lien que je vais sélectionner le bouton Accueil. Je peux voir que ce lien est sélectionné, mais je souhaite que cet élément de navigation soit sélectionné. Je vais donc sélectionner cet élément de navigation et je suis actif. Il suffit de cliquer sur, cliquons sur ce bouton. Maintenant, tout est fait. OK. Commençons par ce premier conteneur est cette zone. C'est le, celui-là, ce faire, c'est d' abord cette affaire. Nous devons fournir une pièce d'identité pour ce devoir particulier. Il suffit de cliquer ici et la pièce d'identité sera à la maison. C'est la section d'accueil. C'est la section d'accueil. Ensuite, nous avons ce conteneur qui contient la section À propos de nous. Cette section se trouve dans le conteneur suivant. OK, très bien. Donc, ce que nous allons faire, nous n'ajouterons qu'un seul dv ici dans div. Et ces deux conteneurs vont entrer dans cette div, et cette div sera appelée car l'ID d'attribut sera à peu près suffisant. Puis Gallery, cette section est Gallery. Ensuite, ils se contentaient d' aller dans la section Attributs et de taper votre galerie. Cette section est une section de contact. Ensuite, je vais simplement taper cd contact. Oui, en gros, nous l'avons pour l'instant. Je ne pense pas. Nous avons besoin d'une galerie ou vous supprimez simplement cette galerie. Maintenant, nous en avons trois comme chez nous et nous contacter. C'est tout. En revenant aux barres de navigation. Sélectionnez cette maison où se trouve le lien. Nous devons sélectionner ce lien et cette URL particulière que nous saisirons. L'ID, l'ID de l'année commence par une clé de hachage. La clé de hachage est déjà là et il suffit de taper maison. Assurez-vous que si vous avez donné une lettre majuscule à l'intérieur de la pièce d'identité , vous devez utiliser le même étui ici. Il est sensible à la casse. Donc à la maison, après cela, il s'agit, donc la clé de hachage est déjà là et ils vont simplement taper. Ensuite, je sélectionnerai ce contact et le contact sera là. Même chose que nous ferons avec le pied de page. Je vais simplement sélectionner cette maison et je vais taper chez moi au fil de l'année. Et à peu près. Je vais taper sur le contact. Contact. Voyons maintenant l'aperçu. Nous sommes en avant-première. Si je clique sur la maison, on y va. Si je clique sur Contact, on y va. Si je clique sur Accueil, nous revenons en haut. OK. Assez juste. De cette façon, nous avons terminé la conception de notre site Web d'une page où tout ce que vous pouvez utiliser, vous souhaitez modifier n'importe quoi dans cette chose particulière. Il ne reprend que, non ? Vous avez une section d'accueil et de contact, puis vous pouvez simplement déposer n'importe qui peut venir. Ils peuvent directement déposer un e-mail ou ils peuvent simplement taper. Ils peuvent simplement remplir ce formulaire particulier et ils peuvent simplement vous envoyer un courrier. Et ce formulaire sera quelle que soit l'information que l'utilisateur tapera dans cette zone particulière, ces informations viendront au repas. Oh, nous n'avons pas donné l'espace réservé à cette zone de texte particulière. Alors venez ici et je vais taper un porte-place. Saisissez votre marque exclamatoire de message. C'est tout. Bon, donc revenons à l'aperçu pour avoir tapé votre message et c'est tout. Je pense que c'est fini, mec. Oui, c'est fini. 31. Ouverture Du Projet 2: Bonjour et bienvenue. Dans cette section. Dans cette section nous allons concevoir des résultats technologiques. C'est donc le site web que nous allons concevoir. Et sur ce site, nous sommes prêts à voir beaucoup de choses comme requête multimédia et les intégrations X2 comme Zu qui forment des intégrations, chat en direct, du service d'assistance. Beaucoup de choses que nous allons voir dans cette section particulière. Cette section va être un peu plus longue par rapport à la dernière section. Dans cette section, nous venons de créer un site Web d'une page. Dans cette section, nous allons créer un minimum de quatre à cinq pages, par exemple. Cette section sera un peu plus longue sans perdre beaucoup de temps. Commençons et apprenons comment concevoir un site Web de plusieurs pages. se voit donc dans la vidéo suivante. 32. Page D'accueil Section 1 Du Projet 2: Bon, commençons. Ainsi, comme d'habitude, nous allons simplement cliquer sur un nouveau design ici et nous le nommerons comme une résolution technologique. Bootstrap sera le dernier. Nous allons sélectionner le modèle vide et cliquer sur Créer. C'est ça. Avant d'aller de l'avant, nous devons importer toutes les ressources dont nous disposons. Il suffit d'aller dans le dossier principal de votre cours BSS dans ces fichiers BSS, puis vous trouverez le résultat de défilement du hachage 500s. Il suffit de double-cliquer dessus et vous verrez quatre autres dossiers à l'intérieur. Les quatre dossiers sont basés sur des pages telles que page d'accueil business solution, notre client, et contactez-nous. Ce que nous allons faire ici, c'est comme dans Bootstrap Studio, nous allons simplement créer un dossier à l'intérieur du dossier d'image, et nous le nommerons comme maison. Après cela, qu'avons-nous d'autre qui, alors solution commerciale, notre client et notre contact ? Je vais créer un autre dossier appelé solutions commerciales. Je vais donc acheter BS, c' est une solution commerciale. Ensuite, notre client, OCI, contactez. Nous le nommerons donc aussi complet que nous nommerons le contact complet. D'accord, sur la base de ce dossier, nous allons simplement l'importer. Je vais juste double-cliquer sur cette maison. Je vais sélectionner tout cela et je le déposerai dans ce dossier d'accueil. Je mettrai 60 images sont importées puis solution commerciale, je vais tout sélectionner. Et une solution commerciale plus facile. Bs sept images sont là, d'accord, les sept images sont importées. Après cela, nous avons nos clients, c'est OC. Donc je vais juste effondrer ce qui et bs. OC est donc celui-là. Et OC, nous n'avons qu'une seule image. Je vais donc laisser tomber votre OCI. Le dernier dossier est le dossier Contact Contact. Encore une fois, un dossier est là et je vais simplement déposer ce dossier de contacts. Je vais donc simplement déposer cette image dans ce dossier de contacts. Ok, donc les ressources sont chargées à l'intérieur de celle-ci, pour que nous puissions fermer ça. Maintenant. Voyons ce que nous allons faire pour l'année du design. Nous allons donc concevoir cela. Nous allons faire un clone de ce site Web non complet, mais quelques parties majeures de ce site Web. Évidemment, la page de destination que nous allons concevoir cette page de destination que vous pouvez voir maintenant ce formulaire est là. Mais dès qu'il est déplacé vers la petite taille d'écran, le formulaire disparaît. Et le bouton vient ici et il dit Parlez-nous de votre entreprise et lorsque vous cliquez dessus, lorsque le modèle arrive et que ce formulaire se trouve à l'intérieur de ce modèle. Si évident que nous l' avons appris, nous utiliserons la requête média pour cela. Ainsi, dans cette section particulière, la requête multimédia que vous comprendrez dans une version détaillée. Bon, c'est assez juste. Juste, assez juste. Avec l'introduction, commençons maintenant. Tout d'abord comme d'habitude, nous allons prendre une année de barre de navigation. Je vais simplement taper nav et je prendrai cette marque de barre de navigation sera des résultats technologiques. Je vais donc simplement taper votre technologie TCH dans notre ESOL VE, désolé, résolution de deck VE. Et nous avons une icône là-bas. Je vais donc simplement prendre une icône et je vais déposer l' icône ici. Voyons donc dans l'icône bootstrap, avons-nous quelque chose pour la technologie ou non ? Il s'agit d'une batterie, mais ce n'est pas une technologie. La technologie des batteries ? Non, pas du tout. D'accord. Alors, cherchons quelque chose de différent. Que pouvons-nous faire, c'est la vidéo 3D ADHD VR. Nous sommes, oh mon Dieu. Quoi que ce soit lié à la technologie, que pouvons-nous faire ? Nous ne pouvons pas utiliser de bogue. Le calendrier est il y a une vidéo. Cherchons un ordinateur. Est-ce que nous avons un ordinateur ou non ? Boussole que nous avons. Voyons, juste pour cette démo, juste pour cette vidéo, je peux prendre cette année compossible. Je ne pense pas. Il n'a pas l'air bien. Nous prendrons autre chose. Prenons cette collection alors qu'elle aura peut-être fière allure. Oui, c'est assez beau. D'accord. Le résultat de Peck est le site web que nous allons concevoir maintenant. Et ces articles de navigation que nous avons de ce côté, nous voulions le prendre de l'autre côté, donc l'alignement sera terminé et la barre de navigation, nous allons désactiver l'option fluide. Bon, c'est assez juste. Revenons en arrière et voyons maintenant ce que nous avons ici, c'est la transparence de la barre de navigation. Y a-t-il des transparences là où la zone d'arrière-plan est visible. Nous allons donc le faire. Revenons dans le studio Bootstrap. Et donc Navbar, je vais sélectionner la barre de navigation. Je viendrai à l'image de fond et cette couleur jaune nous pouvons l'utiliser. D'accord. Celui-ci ou celui-ci est la même motion. Ceci est jaune BS et il s'agit d'un avertissement BS. Ok, donc nous allons utiliser cette couleur jaune. Je clique sur ce sélecteur d'images, je vais accéder à Sélectionner, et je réduirai la transparence à 80 %. l'instant, vous ne pouvez rien voir parce que nous n'avons rien. Mais très bientôt, nous pouvons le constater. Ok, donc ensuite, nous devons créer cette zone particulière. Donc pour cela, ce que nous allons faire, nous allons donc faire une div. Je vais prendre cette div est là maintenant. Et à l'intérieur de cette div, nous prendrons un conteneur. Et à l'intérieur de ce conteneur, nous prendrons une rangée, et à l'intérieur, nous prendrons deux colonnes. Cette colonne et le contrôle D sont dupliqués. Nous aurons deux colonnes ici. Cette div est là maintenant. Et pour cette div, nous allons donner la même couleur de fond jaune. Et je cliquerai sur Sélectionner. Bon, c'est assez juste. Maintenant, dans ce domaine particulier de ce que nous sommes, ce que nous voulons ici, c'est passer du traditionnel au numérique, et nous allons simplement copier cela. Vous pouvez également copier le nom de domaine est le point de résultat de peck in. Ici. Je vais prendre un cap. Il suffit de déposer cette rubrique ici et de coller. Alors rappelez-vous le raccourci Control Shift V pour le coller ici, nous avons toujours ce problème. Allez, passez du traditionnel au numérique. Et oui, la police est différente. Pour l'instant, nous allons utiliser la même police. Si vous le souhaitez, vous pouvez le modifier. Je pense que vous savez maintenant comment changer la police. Si ce n'est pas le cas, revenez aux vidéos précédentes et voyez comment modifier exactement la police. Bon, c'est assez juste. Après cela, qu' avons-nous que nous avons un paragraphe qui dit chaque entreprise a besoin d'une présence numérique, nous sommes donc là pour le rendre possible. Prenons un paragraphe et frottons ce paragraphe juste en dessous de celui-ci et collez-le. Assez juste, après cela, nous avons une étiquette image image. Juste en dessous de celui-ci, nous allons simplement mettre une balise d'image et double-cliquer sur la maison. Cette image que nous voulons, je vais simplement sélectionner. Oui, c'est tout. L' image est là maintenant. Maintenant, nous avons un peu d'espace inférieur sur l'année et la barre de navigation a également quelques ombres. Nous allons le faire. Et avant cela, nous ne ferons qu' un aperçu et je vais vous dire pourquoi nous utilisons exactement l'ombre ici. Nous avons une raison là-bas et deux raisons en fait. Vous pouvez voir maintenant que nous avons la transparence de 80% pour la barre de navigation, c'est pourquoi la couleur est claire et la même couleur que celle que nous avons utilisée ici, et elle a l'air très sombre. Celui-ci ressemble à celui qui ressemble à des conduits. En fait, les deux couleurs sont identiques, seules les différences. Il s'agit d'une transparence de 80 %, soit 0 % de transparence. Maintenant, nous ne voulons pas montrer cette différenciation et nous voulons faire un tour ici. C'est la raison pour laquelle nous allons ajouter une ombre à cette barre de navigation. Je vais donc sélectionner cette barre de navigation. J'irai dans Options, décoration, ombre, régulier. Je vais maintenant revenir à l'avant-première. Maintenant, vous pouvez voir qu'il y a une ombre. Vous pouvez voir que l'ombre est plus grande que celle-ci. Ce que nous avons fait là-bas, c'est que nous avons utilisé la grande ombre là-bas. Maintenant, vous pouvez voir que nous avons une grande ombre , puis nous avons utilisé une marge supérieure à celle-ci. Donc, les cinq premières marges. Assez juste. Et pour celui-là, nous avons donné la marge inférieure à cinq. C'est ça. Maintenant, vous pouvez voir que nous avons l'espace supplémentaire ici et ici. Ensuite, si vous voulez voir dans la vue mobile, nous pouvons simplement descendre ici et vous pouvez voir qu'il y a un défilement horizontal. Et maintenant, vous savez comment résoudre ce problème, pas par requête multimédia. Il suffit de cliquer sur la réponse. Vous. C'est ça. C'est fini. Nous allons également régler ce problème. Donc, personne ne revient à la plus grande taille d'écran, c'est-à-dire LG. Je pense que votre Excel est très grand. Dans ce domaine, nous allons créer le formulaire. Dois-je arrêter la vidéo ici ou devrais-je continuer ? Bon, continuons ça. Nous allons compléter cette section , puis nous arrêterons la vidéo. l'autre côté, qu' avons-nous besoin de 0, nous avons besoin d'un formulaire. Prenons une ferme. Oui, avant le formulaire, nous avons des textos comme contact maintenant et obtenez la meilleure affaire de la journée. Bon, alors copiez celui-ci. Prenez le cap, le cap ici. Collez, et cet en-tête sera H4. Pour cette rubrique également, nous prendrons la marge des cinq premiers. Bon, c'est assez juste. Et ensuite, nous prendrons forme. Nous nous produisons. Ensuite, nous allons faire une plongée. Et à l'intérieur de cette div, ce que nous avons, nous avons le nom complet, le nom de l'entreprise, l'étiquette de champ n'est pas là. Nous prenons directement des entrées de texte. Saisie de texte. Nous avons le vôtre et nous allons le mettre ici dans cette entrée de texte. Ce que nous sommes, qu'est-ce que c'est en fait, c'est un nom commercial ou un nom complet. Votre nom complet. C'est FullName. Ensuite encore l'espace réservé, il ne s'agit que du nom complet. L'état est désactivé ou en lecture seule. Tout devrait être ainsi et la validation nous en avons besoin, alors faites-le nécessaire. Et que voulons-nous d'autre ? Ces bords doivent être tranchants et tranchants. Je vais juste étiqueter celui-ci comme nom complet. Ensuite, nous avons besoin d'une marge, un haut et d'une marge inférieure. Voyons voir. Un, un, c'est suffisant ou pas. Je pense que le bas de la marge devrait être 32, c'est très bien. Doc dans la marge deux inférieure est bon pour celui-ci aussi la marge inférieure deux est bonne. Celui-ci est le nom commercial, le nom entreprise, le copier-coller, nom de l' entreprise à nouveau, c'est obligatoire. Ensuite, de quoi avons-nous besoin comme exemple de type d'entreprise, une école hôtelière. D'accord. Dupliquer, type d'entreprise, copie. Et dans l'espace réservé, nous donnerons l'exemple de l'hôtel. Cool. Ensuite, ce que nous avons, nous avons une sélection ici qui dit, oui, mon entreprise a la TPS. Je suis un numéro de TPS et je sais que mon entreprise n'a pas de GSD IN. Sélectionnez que nous avons besoin, je vais juste dupliquer celui-ci. Et à l'intérieur de cela, je vais supprimer ceci et je vais taper sélectionner. Il suffit de prendre la sélection ici. Nous devons également renommer cela. Il s'agit donc d'un nom commercial. Il s'agit d'un type d'entreprise. Celui-ci est GSP ion. Nous n'avons pas besoin de groupe. Nous n'en avons besoin que 2. Le premier est oui, mon entreprise a GSD IN et je pense que nous serons petits. Et le second sera mon affaire. Vous n'avez pas GSD IN, le oui sera sélectionné. Ce que nous voulons, c'est l'adresse e-mail, le contact et le produit qui vous intéresse. D'accord, très bien. Je vais juste dupliquer cette année. Maintenant, nous allons le faire. J'ai d'abord besoin de ce groupe d'options, et je prendrai celui-ci au sommet. Le groupe d'options, je vais le nommer comme site Web statique. Il s'agira d'un site Web d'une page. Ce sera comme un site Web de base de cinq pages. Quelle est l'idée de ces 13 loci ? Donc, cette valeur sera 14 et l'étiquette sera multiple. Site Web, site WEB, le site Web entre parenthèses, il sera plus de cinq pages. Ok, donc cela est statique et maintenant nous allons en créer un de plus. Il s'agit d'un groupe d'options et l'étiquette sera dynamique. Site Web. Nous ajouterons celui-ci. Celui-ci aura donc 15 ans. Le label sera un site Web de commerce électronique. Ce ne sera qu'une option. L'étiquette sera LMS ou Learning Management System. Ce sera 16 et vous pourrez en créer beaucoup d'autres. Donc, pour l'instant, je vais m'arrêter ici. Si nous allons maintenant à l'aperçu, vous pouvez voir que nous avons deux groupes. Il s'agit donc d'un groupe statique et de ce groupe dynamique. En statique, nous avons un site Web d'une page, site Web de base de cinq pages et un site Web multi-pages, qui compte plus de cinq pages en dynamique. Nous avons le web e-commerce, certains éléments, c'est un système de gestion de l'apprentissage. Vous pouvez mettre n'importe quoi ici en fonction de vos besoins. Vous pouvez mettre n'importe quoi après ça. Ce que nous avons, c'est comme l'adresse e-mail que nous voulons et numéro de contact que nous voulons, puis nous voulons un message, une adresse e-mail. Je prendrai donc cette contribution commerciale, je vais dupliquer cela. Et ce que je vais faire, je prendrai cette affaire et je vais juste tomber dessous de cela à GSD et nous allons simplement étiqueter cela et le nommer comme un intérêt. Ce type d'entreprise sera le numéro de contact. Cet étiquetage ne sert pas seulement à comprendre quand nous allons exporter ce projet complet. Cette fois-ci également, cet étiquetage sera très important car il y a une option dans l'étiquette. Cela nous aidera lorsque nous exporterons le projecteur. Lorsque nous exportons le projet, il existe une option appelée convertir deux commandes. Lorsque nous verrons le noyau après l'exportation, ces étiquettes seront converties en commentaire sur cette zone particulière. Cela nous aidera à comprendre exactement ce que c'est. Il s'agit d'un cours de développement et au bout du compte c'est comme si nous voulons le suivre. Après GSD, ce que nous avons, voyons voir. Pas après l'adresse e-mail et le contact de la TPS, nous en avons besoin. D'accord. Cette zone particulière sera celle du courrier électronique. E-mail. Je vais donc prendre ça. Il s'agit d'un numéro de contact. Nous avons donné le numéro de contact de l' étiquette. Il suffit de saisir un numéro sans flèche. Il suffit de déposer cette entrée de numéro et je le sélectionnerai, supprimez-le. Il s'agit d'une entrée numérique sous forme de nouveaux champs de saisie. Nous devons donc faire les frontières, la limite d' âge, c'est-à-dire des bordures rectangulaires. Le porte-place sera un numéro de téléphone. Ici, ce sera juste un numéro. La prochaine chose est le courrier électronique. Dupliquez celui-ci. Étiquetez-le comme contrôle et saisissez simplement un e-mail. Saisies par e-mail. Whoops. Cet e-mail saisis ou supprime ce rectangle de décoration. Le titulaire du bail sera envoyé par e-mail. Même chose pour le nom. Après celui-ci, nous avons besoin de cette zone de texte. Et nous voulons aussi ce rectangulaire , celui-ci et celui-ci. D'accord ? Par conséquent, après cet intérêt, nous n'avons pas besoin de cette année choisie. Nous avons besoin d'une zone de texte. Cette zone encore, rectangle. espace réservé sera ce que j' ai écrit, il y a votre message. S'il y a un message, si le message m sera assez petit. Voyons maintenant la validation requise, requise, requise. Nécessaire. Ensuite, cette tonalité sur cette adresse e-mail requise est stockée sur le nécessaire. Ensuite, ce ton sur le requis, et celui-ci sera facultatif comme nous l'avons écrit que, le cas échéant, celui-ci restera en cas optionnel. Enfin, nous avons besoin d'un bouton pour le soumettre. Donc, le bouton BTN, donc votre étiquette est un message. Ce sera le bouton comme, mais le bouton DON. Ce bouton. Prenons ça comme. type de bouton sera envoyé. Ce sera sombre. Maintenant, j'ai peu de questions des étudiants qui sont déjà inscrits à la version précédente du studio bootstrap, ils ont dit que les options du bouton ont changé, que le Bloquer l'option n'est pas là. Il est vrai que dans le nouveau bootstrap, c'est Bootstrap F5. Maintenant, le bouton n'a pas l'option Bloquer. Ce que nous devons faire, c'est que nous devons simplement aller à l'apparence. En largeur. Nous devons taper un 100%. Maintenant, cela fonctionnera comme un bloc, mais malheureusement cette option de bloc ne l'est pas, vous ne l'êtes pas. D'accord. Ensuite, nous avons une déclaration puis une décoration rectangulaire. Et nous saisirons votre soumission, votre message ou ce que nous avons écrit là-bas, comme envoyer un message. Lynn. Envoyez un message. La bordure est là légère bordure, bordure blanche. Je serai confié à ce domaine particulier. Voyons maintenant l'aperçu à quoi il ressemble exactement. Ok, ça a l'air plutôt bien. Cette forme est donc petite en largeur et cette forme est très grande dans la zone de largeur. Nous reviendrons donc ici. Voyons donc, c' est notre rangée principale. Cette ligne est de forme. Il suffit de l'étiqueter comme forme et d'inverser ce que je vais faire jusqu'à MD. Je vais lui donner une largeur de quatre. Dans cette zone, je vais le garder en voiture, ou peut-être huit. Donc, huit plus quatre, c'est 12. Ce domaine est donc maintenant terminé. Ce que font la plupart des week-ends, c'est afficher. Nous pouvons augmenter un peu la taille de cet écran. Un quatre sera peut-être un bon. Et pour ce paragraphe, nous allons activer l'option Lead. Ce que nous pouvons faire pour cette image, c'est comme, d'accord, nous la garderons telle quelle. Nous ne ferons rien. Mais ce que nous pouvons faire, c'est que nous pouvons prendre cela, nous pouvons prendre cette image, désolé, nous pouvons prendre cette image à l'intérieur d'une div, comme celle-ci à l'intérieur d'une div et cette div, nous le ferons centre d'alignement. Que se passera-t-il pour cette image particulière ? Il se trouve au centre de cette ligne particulière, mais l'alignement avec ce texte ne sera pas présent. C'est pourquoi ça aura l'air bizarre. Ok, donc pour cela, nous allons le retirer à nouveau en dehors de la div et nous supprimerons cette div. Nous n'avons pas besoin de cela. Oui. D'accord. Donc, c'est fait ? Oui, cette zone particulière est effectuée alors vous savez comment faire du formulaire un formulaire intelligent. Voyons voir. Cette taille d'écran est correcte. Md encore une fois, je pense que nous devrions changer la largeur en algues, donc les algues seront quatre et celle-ci aura huit. Prenons ce 12 complet. Et donc, bien que nous supprimions ce formulaire de l'année parce que nous ne le voulons pas, nous ajouterons une requête média ici dans ce domaine. Cette section est donc maintenant différente. Feu, assez juste. Allons donc aussi sur le formulaire. Une forme intelligente. Il suffit donc d'activer cette option, de sélectionner le message personnalisé du destinataire. Si vous souhaitez un message personnalisé, vous pouvez également l'activer. Après cela, là où vous souhaitez accéder à ce site Web particulier, nous allons créer une nouvelle page appelée après formulaire. Soumettre. Je suis en train de créer cette page en ce moment. Nous ne ferons rien là-dedans simplement pour garder à l'esprit que nous devons le faire, nous devons également créer cette page. C'est donc la raison pour laquelle je crée cela. Je suis en train de créer cette page ici. Plus tard. Nous allons concevoir cela. Maintenant, cette page après la soumission, la page sera redirigée vers le point HTML après la soumission du formulaire. Nous allons commencer cette vidéo ici. Et dans la vidéo suivante, nous allons jouer avec la requête média. Flexbox et Media Query est toujours pénible, mais maintenant ce ne sera plus le cas. On se voit dans la vidéo suivante, les gars. 33. Finalisation De La Page D'accueil Ouverture Section 1 Du Projet Deux: Bon, bon retour. Dans cette vidéo. Et dans cette vidéo, comme je vous l'ai dit, nous allons comprendre la requête média et la flexbox sans perdre de temps. Commençons cette forme particulière que nous voulons. Nous ne voulons pas la petite taille d'écran, nous prendrons cette forme dans le modèle. Jusqu'à LG. C'est assez bien. Et quand il s'agit de MD, c'est un appareil moyen, les formulaires tombent et cette zone particulière reste ici. Mais c'est ce que nous voulons de MD. Lorsque ce n'est pas cette taille d'écran particulière qui n'est pas un ordinateur portable et supérieur, cela aura fière allure. Cet alignement, cet alignement à gauche est là. Bon, c'est assez juste. Mais quand c'est en MD et en dessous, le devrait être aligné au centre. Pour cela, que devons-nous faire ? Que je vais vous dire que cette chose particulière que nous ferons sans requête multimédia, nous utiliserons complètement les options Flexbox l'intérieur de ce bot pour masquer ce formulaire et faire en sorte que le bouton visible ici. Pour cela, nous utiliserons la requête média. abord, nous allons faire flexbox, puis nous passerons à la requête multimédia à partir de cet appareil, il est LGN ci-dessus. Je n'ai pas été cette option particulière ici. Ce que je vais faire, je vais sélectionner cette colonne et je viendrai à l'option Flexbox. C'est donc l'option Flexbox. Si vous ne voyez pas toutes ces choses, vous suffit de cliquer sur cette flèche ici. Dans l'option Flexbox, vous avez ces boutons car nous avons déjà appris les bases de Flexbox. Maintenant, ce que nous allons faire, nous avons sélectionné cette taille d' appareil particulière, c'est-à-dire LG. Et dans cette taille de l'appareil, ce que nous voulons, c'est que nous voulons que l'alignement soit laissé en cliquant simplement sur la gauche. Ne vous inquiétez pas, toutes ces choses vont se produire. Ce sera le cas, ces choses vont être gâchées. Mais il suffit de cliquer sur la gauche. Et maintenant, dans les directions, il suffit de cliquer ici et de cliquer sur la colonne. Maintenant, cette colonne est alignée à gauche à partir de LG et au-dessus des tailles d'écran. Vous pouvez donc voir que cela est correctement aligné. Mais ce qui se passe voit dès que nous avons converti la direction en colonne, l'alignement est devenu par défaut. Maintenant, encore une fois, nous devons cliquer sur cette colonne et que se passera-t-il ? Voyez maintenant que l'image est agrandie. Maintenant, vous l'êtes aussi, vous pouvez voir la taille de l' image a augmenté. Maintenant, il suffit de cliquer sur ce reste et c'est fait. Tout est réinitialisé maintenant, l'alignement à gauche est là. Et dans la taille de l'écran ci-dessus l'alignement restera à gauche. Maintenant, ce que nous voulons, c'est comme de cette petite taille d'écran encore MD évidemment pas, nous ne pouvons rien faire à ce LG. Maintenant que nous voulons faire jusqu'à MD maintenant, nous allons sélectionner cette taille d'écran express, une taille d'écran très petite. Et voici ce que je vais faire, je cliquerai sur le centre. C'est l'élément central et la direction restera pour les appeler seulement peut voir que l' image n'est pas centrée, alignée. Cette taille d'écran Essentielle. Maintenant, vous pouvez voir qu'il y a une ligne centrale en MD. Maintenant, il est aligné au centre et dès qu'il va à LG de nos jours, aligner à gauche. C'est ainsi que nous allons conserver ce design particulier. Maintenant, comment cela fonctionne exactement est comme un septième au-dessus de la pill MD, il n'y a pas de commande, mais de LG, la nouvelle commande est là. De l'excès, c'est très petit jusqu'à MD. Il prendra l' élément central et de LG et au-dessus, il prendra l'alignement à gauche. C'est ainsi que la Flexbox va marcher ici. C'est tout. Flexbox pour ce domaine particulier est terminé. Nous allons maintenant jouer avec la requête média. Bon, donc maintenant, nous allons passer à la requête média. En revenant maintenant au Bootstrap Studio, ce que nous voulons, ce que nous voulons ici, c'est après cette taille d'écran MD, nous ne voulons pas ce formulaire ou vous voulez que le formulaire devienne dans un modèle. Et le bouton Lancer du modèle sera là, juste en dessous de cette image. Nous allons donc d'abord prendre le bouton. Je vais prendre le bouton. Et je vais nommer ce bouton comme quel est le nom du bouton là-bas ? À petite échelle, parlez de votre entreprise. Ils nous racontent donc vos affaires. Parlez-nous de votre entreprise. Ce bouton sera leur rectangle. Petite bordure blanche. Le style sera sombre. Oui, c'est tout pour l'instant et peut-être la taille sera grande. Nous ferons les tailles de grande taille. Ici aussi, il est de grande taille. Et vous l'êtes aussi, il ne sera qu'une grande taille. Je retourne au studio Bootstrap. Maintenant. Maintenant, ce que nous allons faire, nous allons d'abord créer un modèle. Ensuite, nous utiliserons la requête média pour masquer tout cela. Je prendrai un modèle sur votre modèle, et je vais prendre ce modèle, déposer à l'intérieur de cette étiquette de modèle de corps est modèle dash one. Il suffit de cliquer sur Afficher l'unité d'organisation. Donc le modèle viendra simplement supprimer celui-ci et le formulaire qui est là, je vais juste dupliquer ce formulaire. Et je vais mettre ce formulaire en double dans le corps de ce modèle. Maintenant, c'est là et ce pied de page modal, je vais supprimer cet en-tête. Je ne pense pas. Nous avons besoin cet en-tête ou nous allons simplement taper. Parlez-nous de votre entreprise. Le bouton croisé est là. Où devrait venir le modèle. Le modèle devrait venir. Taille par défaut en plein écran. Bon, aucun écran plein écran n' est requis. Défilement vertical, nous allons activer le défilement. Je ne pense pas. Il n'y a pas beaucoup d'informations permettant de le faire défiler. Oui, nous garderons cette forme telle qu'elle est maintenant. Prenons le formulaire est un smartphone ou non. Oui, c'est une forme intelligente. Maintenant, je vais simplement cliquer sur masquer ce modèle. Maintenant, nous voulons déclencher ce bouton particulier pour que les modèles ou la cible soient modifiés. Nous allons donc jouer avec cette cible maintenant. sélecteur est désormais un modèle. type II est le modèle , donc la cible basculée. Terminé. C'est tout. Revenons donc dans cette zone, et je cliquerai sur ce bouton. Maintenant, le modèle arrive dans cette version. est donc très facile de sortir le modèle en utilisant ces options cibles dans les spandrels d' options. Oui, c'est fait maintenant, ce bouton que nous ne voudrions que dans cette zone particulière lorsque la taille de l'écran est MD et inférieure. Et lorsque la taille de l'écran sera MDM en dessous, cette zone particulière ne sera pas présente. Le bouton ne doit donc pas avoir l' air de toucher le bas de cette colonne. Nous allons également donner une marge inférieure au bouton. Donc, la marge inférieure trois ira bien pour l'instant. Si nous en avons besoin, nous pouvons en faire davantage. Le modèle est maintenant terminé. Jouons maintenant avec la requête multimédia. Styles, nouveau fichier CSS de style. Et le CSS personnalisé sera là. Double-cliquez sur ce CSS personnalisé. Il suffit de cliquer sur Créer et je vais taper votre vue de bureau à points. Il affichera un autre point de vue mobile. Afficher, aucun. En mode bureau. Je le veux, mais en mode mobile, je ne veux pas. Donc, ce que je vais faire, je prendrai cette option d'affichage de bureau aucune option n' est affichage de bureau aucune. Nous allons donc prendre ce cours ici. Et maintenant, c'est parti. Je vais simplement sélectionner ce média, ce MD ici, arrivant à ces trois points et ajouter largeur minimale de requête média 765. Si je vais au-dessus, vous pouvez voir que nous n'avons pas ça. La raison derrière cela est la largeur minimale 7068. Utilisez cet affichage à partir de ceci et au-dessus de ce CSS sera appliqué. La largeur minimale est la suivante. Nous allons donc le rendre maximum. Cette taille d'écran et la taille maximale. ce que nous voulons. C'est ainsi que nous allons faire cela. Pour ce bouton particulier. Prenez la vue mobile, copiez-la, collez-la ici et activez simplement cette requête multimédia. Maintenant, ce que nous allons faire maintenant, c'est 7068. Nous allons faire un tir de 7671 pixels. Nous voulons avoir cette taille d'écran, n'est-ce pas ? C'est donc 992991992. D'accord ? Oui. Maintenant, il fonctionne bien. Cette taille d'écran, nous l'avons dès que nous passerons à la taille de l'écran mobile, alors ce modèle sera là. C'est ce que nous avons assez juste. requête multimédia et la flexbox sont effectuées pour cette zone particulière, et cette zone particulière est complètement prête. Maintenant, il suffit de sauvegarder le fichier. Je vais enregistrer ce fichier. En conséquence, je vais simplement créer un dossier ici. Il sera donc sous Scroll VSS. Et économisez. Ce fichier est enregistré maintenant, donc oui, c'est tout, c'est tout pour cette vidéo. Dans la prochaine vidéo, ce que nous allons faire, nous commencerons à créer cet espace particulier. Et c'est très facile. Nous voulons simplement prendre une ligne de conteneur, en-tête de colonne et quelques options ici. Ensuite, nous avons déjà cette image là. Il s'agit d'une image GIF. Ensuite, nous créerons Afficher plus de détails. Bouton ici, qui sera redirigé vers l'autre page. La même chose se produira pour celui-ci et celui-là aussi. Je pense que dans la prochaine vidéo, nous couvrirons tous les nomenclats dans une seule vidéo. Assez juste. On se voit dans la vidéo suivante, les gars. Adieu. 34. Achèvement De La Page D'accueil Du Projet 2: Bon, nous allons donc commencer la prochaine section, qui est cette zone particulière. Donc, en revenant au studio bootstrap et dans cette taille d'écran particulière, ce que nous allons faire E, c'est simplement que nous allons prendre un conteneur et le déposer sur ce body tag. Sélectionnez ce conteneur. Nous avons le conteneur ici maintenant, il suffit de prendre une ligne, sélectionner la colonne des institutions de ligne que nous avons, et encore une autre colonne. Je pense donc que nous en donnerons 646 jusqu'à lundi. Ce sera comme ça, et après cela, il viendra juste en dessous de l'autre. Commençons par le faire. Tout d'abord, nous avons besoin d'un cap. Titre que je prendrai, je suis aussi confus entre le titre et l'en-tête. Maintenant, parfois, lorsque nous ne faisons pas attention à ce sujet, la lecture est là, donc nous allons simplement prendre le cap ici. Le titre est le suivant. Tout votre entreprise a besoin sous un même toit. À ajouter, je prendrai le collage plus de 1,9$ 9029. Que pouvons-nous faire après cela ? Nous avons ce paragraphe , puis nous avons également ces paragraphes. Decolonial ne veut pas de technologies clés. À l'intérieur de cette colonne uniquement. Ce sera le résultat donné. Faisons de l'IID. Quel résultat technologique ? Site Web statique. Faisons une chose. Je vais simplement copier toutes ces choses et je vais juste faire avancer cette vidéo rapidement à partir de statique et de toute l'icône B12 ci-dessous là-bas, cette icône de coche. Je vais prendre une icône ici. Cette icône va d'abord consigner ce 1 car celui-ci est un nouveau jeu d'icônes, n' est-ce pas ? Le chèque est là. Alors, vérifiez deux fois que nous utiliserons, nous pouvons également utiliser celui-ci. Encore une fois, je vais le faire rapidement. Nous allons, je ne veux pas perdre votre temps dans cet ensemble. Nous avons donc pris une icône différente et différente de celle-ci. Et nous avons un bouton sur l'année, donc nous allons prendre un bouton également leur bouton btn. Ce que vous voyez, c'est comme voir plus de détails. Nous verrons plus de détails. Sélectionnez le bouton et style rectangulaire sera averti. Résolvons. Ce bouton ne sera pas un bouton, mais un lien. Il suffit de mettre une clé de hachage ou plus tard, nous changerons le lien de cela. Après cela, ce dont nous avons besoin, nous avons besoin de cette image, de cette image GIF. Je vais prendre l'image tag, je vais déposer dans qui nous voulons utiliser cette image. Nous allons donc choisir cette image directement. Cliquez sur Responsive. Je veux que cela arrive au centre horizontal et vertical. Donc, pour ce qui est de la plus petite taille d'écran, on y accède. Et je vais aller à Flexbox, vérifier ces deux options et colonne ce V à partir de ceci, je le fais sur la taille de l' écran car à partir de cela et au-dessus, cela aura un effet, non ? Cela affecte donc toute la taille de l'écran. Que s'est-il passé ? Désolé, désolé, désolé. Je postule, je postulais sur cette image. J'ai tort. Je ne peux pas postuler sur cette image Je veux télécharger cette colonne, vais sélectionner celle-ci et la plus petite taille d'écran en fait. Et ces deux options, comme ceci est un centre vertical. Il s'agit du centre horizontal et du centre vertical. Maintenant, je vois que ce n'est pas la Sentinelle. Oui. On y va. Ce que nous pouvons faire, c'est que nous avons deux couleurs différentes ici. Sélectionnez ce conteneur. Je pense que je l'utilise. Donc, tellement de fois quelqu'un m'a dit de modérer l'utilisation du sel parce que je l'utilise tellement de fois et parfois c'est ennuyeux. Je pense que quelqu'un m'a dit dans ce cours seulement, je vais essayer de le faire. Je pense que c'est mon habitude, non, pas de problème. Je suppose que je me sers de la marge top cinq. Voyons voir. Oui, c'est fini. Pour la section suivante pour ce domaine particulier, ce que nous allons faire, nous allons simplement dupliquer cette zone et nous les retournerons tous les deux. Ce que je vais faire, je vais juste dupliquer cela. Et en entrant dans cette rangée, je vais juste prendre cette colonne et je la garderai juste au-dessus de cette colonne. C'est ça. Rien d'autre à faire. Alors ce que nous voulons, c'est celui-ci, copier, sélectionner, coller. Et maintenant, cette fois , il sera 29 9$. Site Web de commerce électronique. Nous voulons faire tellement de choses dans cette dynamique. La même chose. Il s' agit maintenant d'un site Web dynamique. Remarquez l'état statique d'un côté avec le panneau d'administration. Ensuite, pour le reste des choses, je pense, oui, arrêtons les choses qui semblent passer à la section suivante. Encore une fois, dupliquez ce conteneur, revenez à cette rangée et retournez simplement les côtés. Il s'agit de roupies EMS 20. Il suffit de changer celui-là aussi. Donc, tout se trouve à l'intérieur d'une seule. Oui. 29, 9$ en fait, quel est le coût de 20 roupies en dollars ? Utilisé. Inr, c'est 20 roupies en 0,27$, d'accord ? Ce sera comme 0,27 étudiant par mois. Il comprendra GSD. Encore une fois, j'ai utilisé l'école ou l'école chaque année. Et maintenant, nous devons copier cette option. Encore une fois, ce que je vais faire, je vais aller de l'avant rapidement. Je ne veux pas perdre votre temps. Une fois la copie terminée, nous commencerons. Ce domaine est également terminé et nous passerons à la section suivante pour savoir ce dont vous avez besoin pour votre entreprise. Nous vous fournirons une solution commerciale complète avec partenaires de solutions témoins de confiance dans le monde entier. Qui pour cela, ce que nous voulons faire eq div, parce que cette image est complète, âge en âge div est ce que nous utiliserons pour cette div. Nous prendrons la marge des cinq premiers. À l'intérieur de cette div, nous allons prendre la direction. Après le départ, nous prendrons un paragraphe. Ce sera un titre aligné au centre que nous allons utiliser est celui-ci. Alors copiez ceci et à l'intérieur de ce titre, collez ce paragraphe, nous utiliserons cette copie. Et dans Bootstrap Studio, collez ça ici. Après cela, nous avons une image, puis cette image, déposez-la dans cette div. Double-cliquez sur Accueil. Je pense que c'est l'image, non ? Oui, c'est l' image et cliquez sur. D'accord. Voyons l'aperçu. Ça a l'air assez bien. Mais je pense que oui, nous lui avons donné une couleur de fond. Ce que nous voulons faire. Je pense que nous devons en prendre un de plus au fond. Et avant cela, nous voulons rendre l'image réactive. Nous allons prendre une div à l'intérieur de cette div, et nous allons déplacer cette image à l'intérieur de cette div. Revenons à l'apparence, couleur d' arrière-plan, et nous allons lui donner une couleur d'arrière-plan sombre. Celle-ci est un point. Peut-être que cette image est là. Nous avons donné un joli fond sombre et donnons une marge. En haut, un peu comme la marge supérieure deux sera très bien. Je pense. Peut-être trois. Margin, les trois premiers sont assez bons. Après cela, nous avons cette zone. que nous pouvons encore copier ce conteneur, mettre en dessous de cette vue ou comme prenons cela, faites-le à ce sujet. Maintenant, dans cette colonne, ce titre, nous voulons un paragraphe, nous voulons que ce soit un titre, seul paragraphe réinvestir tout ce que nous allons supprimer, y compris ce bouton. Je ne vais que 0$. Ligne centrale, année commerciale enregistrée au SPG. Je ne veux pas que ce paragraphe soit normal. Maintenant, pour cette colonne, je veux la verticale et le centre. Centre vertical et horizontal. Alors en venant à flexbox les deux, oh désolé, je vais juste réinitialiser cela une fois que j' arriverai à la taille d'écran la plus basse. Celui-là, celui-là et colonne, c'est tout. Maintenant, c'est incitatif, absolument central et ces options sont là. Nous devons mettre cette option en place. Je pense donc que nous avons commis une erreur en supprimant ces options. Il suffit de venir ici. Sélectionnez tout cela. Si nous avons encore besoin de ce bouton, y compris ce bouton, je le copierai ou vous pouvez le prendre comme ceci, copier dans cette colonne. Maintenant, cliquez avec le bouton droit, collez, collez à l'intérieur. C'est fait. Rafraîchissez celui-ci. Non rafraîchi. Réinitialiser. Revenons à ça. Nous ne voulons pas celui-ci. Celle-ci aussi. Gestion des contacts. Encore une fois, ce que je vais faire, nous allons faire avancer cela rapidement. C'est tout. Voyons maintenant l'aperçu. Très beau, absolument beau et fantastique. Et maintenant, nous voulons que ce domaine particulier soit ici. C'est très facile. Ce que nous pouvons faire, je pense que vous l'avez déjà deviné. Nous allons faire une plongée. Et à l'intérieur de cette div, je prendrai une image, une image, une image. Cette image que je vais juste ajouter sur leur position sera centrée, la taille sera couverte, et la répétition sera non. C'est tout. Ensuite, nous prendrons un cap. Je pense que c'est un titre, cap et un bouton. Une seule rubrique. Un bouton. Ligne centrale pour le cap, marge supérieure cinq. Faisons une chose. Il suffit de sélectionner cette div. Rembourrage, rembourrage, haut, rembourrage, cinq bas. C'est tout. Haut de la marge. Ce sera un bon nombre. Marge quatre premiers. Oui. Bien. Qu'est-ce qui est écrit là-dedans ? Développons ensemble votre entreprise. Ceci nous contactera. Contactez-nous. Ce changement au réchauffement, à la décoration, au rectangle. C'est suffisant pour que nous ayons un pied de page, pied de page, nous allons simplement mettre un pied de page de base. Pied de page que je prendrai je vais tomber sur ce corps, prendrai ce pied de page sombre ou peut-être cette nourriture de base. Maintenant, les résultats du pied sombre sont bons à faire, car nous ne ferons aucun changement car nous allons le garder tel quel. Donc le pied de page sombre sera là. Et ce div, je pense que je ne veux pas que certains ne soient pas un peu d'espace entre ces zones. Je vais sélectionner cette div, donnerai également une marge inférieure quatre. C'est ça. Ce domaine particulier que vous êtes maintenant, vous pouvez maintenant faire ce service sur le nom de l'entreprise, toutes les choses que vous pouvez changer et vous pouvez le faire. Que voulez-vous faire ? De cette façon, je pense que nous en avons fini avec la première page de notre site Web. Dans les prochaines vidéos, nous allons faire les prochaines pages du site Web. Voyons ce que nous pouvons faire. Je pense que le reste de la page restera identique. Mais encore une fois, cette solution commerciale, nous devons utiliser ce GIF d'animation. C'est très facile. Et c'est la même chose que nous allons répéter l'année. Alors ce que nous allons faire, comme nous avons des clients alors oui, l'animation, nous utiliserons l'animation, vous le savez déjà, puis contactez-nous. Contactez-nous, nous serons là. Oui. Maintenant, le service d'assistance sera le nouveau que nous allons faire, alors les intégrations de chat en direct seront là, ce que nous allons voir. C'est tout pour cette vidéo. Et dans la prochaine vidéo, nous verrons quelque chose de nouveau. Je ne sais pas quoi, mais oui, nous verrons quelque chose de nouveau dans la prochaine vidéo. On se voit dans la vidéo suivante, les gars. 35. Conception De Solution D'affaires Et Contactez-nous Page 1 Du Projet Deux: Alors, bienvenue aux gars de retour. Dans cette vidéo, nous allons concevoir une page de solutions commerciales. Commençons. Créons une nouvelle page ici. Nous appellerons cela comme une solution commerciale. D'accord, une solution commerciale. Et je vais simplement double-cliquer là-dessus. Commençons par prendre notre plongée ici. Je vais faire une div, donc nous aurons une main libre. Et nous allons prendre l' image et déposer cette image à l'intérieur de ce double-clic, aller à VS, c'est une solution commerciale et y découvrirons les images que nous utiliserons cette image de couverture et sélectionnez, OK, Il suffit d'activer la réactivité de cette image particulière. Sélectionnez cette div et alignez ce centre. Voyons donc l'aperçu. Nous avons donc cette image ou qu'avons-nous ici ? Nous ne le ferons pas car ce composant est en jumbotron. Et dans Bootstrap F5, le Jumbotron est éliminé. Maintenant, Jumbotron n'est plus là dans Bootstrap. Nous allons donc changer un peu le design. De cette façon. Que va-t-il se passer ? Vous pouvez voir que l'image est une année, quelle que soit l'image, elle est complètement pixélisée. Vous pouvez voir que les bords ne sont pas doux des images, mais l'ADSR est doux et doux. Bon, c'est assez juste. Alors, pour aller de l'avant, ce que nous allons faire maintenant, l'image est en ligne centrale. Ajoutons-y un peu de rembourrage. Je vais peut-être mettre un rembourrage complet de deux. Après cela, qu'avons-nous ? Nous avons quelques composants. Je sais très bien maintenant que vous pouvez réaliser ce design particulier. C'est très facile pour vous maintenant. Je vais tout de même en faire une partie. Nous allons donc prendre un conteneur, il suffit de le déposer à l'intérieur de l'étiquette du corps. Ce conteneur est là. Ensuite, la ligne que je prendrai, sélectionnez la ligne, prenez la colonne et dupliquez-la, allez dans Options. Il est toujours MD, faites-le six, puis ajoutez la plus petite taille d'écran. La même chose arrivera à celle-ci aussi dans la deuxième colonne. On y va. Après ça. Dans cette colonne, nous allons prendre une image. Donc, l'image que je vais juste mettre la première image sera les premières images. Nous savons ce dont vous avez besoin pour votre entreprise. Cette image est donc leur promenade au bureau. Et rendez cela réactif. Ce Sol, et dans cette première chose que nous ajouterons, puis nous avons quelques photos que nous avons un paragraphe. Et ce paragraphe sera et comme d'habitude, je vais accélérer cette vidéo. Ensuite, l'icône est là. Une fois encore. Nous allons prendre cette icône, double-cliquez sur celle-ci. Et quel était le nom de cette icône ? Celui-là. Modifiez quelque chose pour la page Business Solution. Dupliquez ce glisser-déposer à l'intérieur de cette balise. Voyez si vous n'êtes pas en mesure de le faire directement à partir d'ici. Maintenant, disons que je duplique ça et que je l'ai juste pris ici et que je l'ai placé ici. Cette chose, si vous n' êtes pas en mesure de faire, ce que vous pouvez faire ici, c'est juste dupliquer cette icône ici, sans problème. C'est je coordonne, déposez-le à l'intérieur de cette balise de paragraphe. C'est tout. Vous pouvez maintenant le déplacer de cette année en année. Ensuite, vous devez placer un espace là-bas, le raccourci clavier pour le contrôle dupliqué D. Pour dupliquer contrôle D est le raccourci clavier pour dupliquer, sinon vous pouvez le dupliquer à partir d'ici. Je voulais juste effacer cette icône. On y va. Ce domaine particulier est donc terminé. C'est la même chose que nous allons faire. Nous allons juste prendre ce conteneur, conteneur complet. Et avant cela, nous ajouterons quelques marges inférieures à cela. Dupliquez ceci. Dans la duplication va simplement mélanger cette ligne, colonne. Je vais changer l'image. Quelle est la prochaine image ? Inscription ? Ce que je vais faire, je ne modifierai pas toutes ces informations maintenant. Je vais le garder tel quel parce que vous savez quoi faire. Ce que vous pouvez faire de votre côté, c'est comme visiter le résultat technologique point n, puis passer à des solutions commerciales. Ensuite, vous pouvez simplement copier et coller toutes les informations de votre part. Oui, c'est assez juste. Maintenant, celui-là, nous allons le remuer. De cette façon, nous allons faire toutes ces choses. Donc cette image, je vais prendre celle-ci ou quelque chose comme ça. Et à la fin, nous ajouterons un pied de page ici, ce pied de page, et nous le ferons au pied de page de fin à la barre de navigation, nous le ferons à la fin. Après ça. Ce que nous avons ici est la page suivante. Nous, que voulons-nous concevoir ? A est la page Contactez-nous. Créez une nouvelle page maintenant. Et nommons cela comme contact. Allons à l'intérieur de cette page de contact. Encore une fois, nous allons prendre une image à l'intérieur de cette div. Il suffit de double-cliquer sur l'image de pile. Je pense qu'il n'y a qu'une seule image. Oui, une image et cliquez sur, OK, juste pour la rendre réactive. Ensuite, comme d'habitude, nous prendrons un conteneur. C'est comme ça que ça fonctionne. Il y a donc une fois que vous apprendrez ce qu'il faut faire et ce qu'il ne faut pas faire, les choses se répétent encore et encore. n' y a que quelques nouvelles choses qui se situent entre les deux. Tout est CMC comme j'ai pris le conteneur et j'ai pris la rangée. Maintenant, je veux trois sections différentes, donc je vais prendre trois colonnes ici. Dans la première colonne, voyons ce qu'il y a là. Dans la première colonne, nous avons contactez-nous, n'hésitez pas à nous contacter, cliquer ou à toucher le numéro et toutes ces choses, puis les heures de travail et déposer un message du même formulaire que celui qui se trouve dans le page d'accueil. Une chose nouvelle, c'est que nous avons un bouton ici. En fait, ce n'est pas une nouvelle chose. Une fois que vous aurez cliqué sur ce bouton, vous serez redirigé. C'est ce qui nous a aidés ? Et ce que nous verrons uniquement dans cette section particulière. Créons ce contact que nous allons créer maintenant. Je vais prendre un cap. Il suffit de fonder cette ligne là-bas. Et titre de paragraphe, je vais juste faire trois choses que le paragraphe H3O sera celui-ci. Whoops, n'hésitez pas à nous contacter. Ensuite, cliquez trois fois et sélectionnez la ligne entière. Ce truc arrive comme si 34 lignes étaient supplémentaires. C'est le numéro. Encore une fois, ce que vous pouvez faire, c'est que vous pouvez prendre un lien. Ce que nous avons fait dans notre projet précédent, c' est-à-dire un projet de site Web d'une page. Prenons le titre insère ce lien, je vous laisse tomber tous. Supprimez ce lien. Je vais sélectionner ce lien, venir dans le panneau attributaire. Et nous ferons une classe de décoration de texte, aucune et fixe sombre. Ce que nous avons donné à ce lien. Maintenant, nous allons simplement taper un nombre inférieur à neuf, quel est le code pays. Ensuite, nous entrerons un numéro. Il suffit de réduire cette taille. placera l'icône que dans ce lien. Entrez dans la rubrique. Des calendriers montés sont pleins. Je pense. Nous sélectionnons ce lien et je vais taper deux points. Colon, va taper le, hum, mais tu sais exactement comment ça marche, non ? Ensuite, nous allons prendre un bouton, laisser tomber ce bouton, insérer cette colonne, le lancer. Une fois encore. Nous allons prendre notre icône. Déposez-le à l'intérieur de ce bouton. Un seul espace. Cette icône sera prise en charge. Indiquons cette police géniale pour le support. Je corrige plus de chance. Changez la couleur au matin. Et c'est tout ce que nous avons écrit ici, c'est le guichet. Comme nous n'avons pas le bloc d'année facultative, qui ira à Apparence ? Nous allons en faire un pourcentage. Également. Accédez aux décorations et options, décorations et rectangle. C'est un lien qui convertira ce lien en lien. Et pour l'instant, nous allons juste mettre une clé de hachage ici. Donc, lorsque nous effectuerons le plus de pointeurs, cela viendra comme ça. D'accord, assez juste. En revenant au studio bootstrap, donnons une marge, top cinq à ça. Nous aurons donc un espace supplémentaire et contactez-nous. Je vais passer au H12. Oui, on y va. Nous avons maintenant cette section. Pour passer à la section suivante, nous allons créer cela qui fonctionne le nôtre. Et comme vous l'avez déjà deviné, c' est aussi très simple. Je vais juste dupliquer celui-ci et le déposer ici. Et nous allons taper les heures de travail. C'est ça. Heures de travail. Ensuite, lundi, mardi, mercredi, nous voulons cette façon particulière. Nous avons deux options. Nous pouvons à nouveau prendre une ligne et en faire une structure de colonne de ligne. Ou nous pouvons prendre une table ici. Il suffit de déposer une table ici. Il suffit de supprimer cette rubrique de choses. Ensuite, je commencerai à taper les jours. Prenons le moment. Je vais simplement copier ce timing et commencer à coller. Ce ne sera rien. Le calendrier du samedi est très différent. Ne travaillez pas le samedi. Celui-ci va changer la couleur du texte en ce jour férié. Dans cette section, c'est terminé. Et maintenant, pour cette section, nous voulons de nouveau ce formulaire. Je vais donc aller à l'index. Je vais sélectionner cette zone. Je vais prendre ce formulaire, copier, copier et nous contacter. Sélectionnez un clic droit. À l'intérieur. C'est ce qui a été fait. Et toutes les informations comme Smart Form et tout ce qui est déjà là. C'est tout ce que je pense. C'est donc fait. Nous voulons faire en sorte que la réponse mobile vous allez réellement à la largeur est les colonnes, une colonne, deux et la troisième voiture. Qu'est-ce que l'écran dit que c'est LG. Lg ce sera pour, pour, pour, pour tous pour tous en MD. Ne le pensez pas. Ça a l'air bien. De MD et tout cela sera complété aux grilles de puits. Et donnons le bas de la marge à toutes les colonnes. Sélectionnez les deux colonnes, puis nous allons simplement taper la marge quatre en bas. Nous avons un espace entre toutes les colonnes là-bas. C'est tout. Nous sommes prêts avec celui-ci également la page nous contacter est également terminée. En dehors de cela, ce que nous avons, contactez chez vous. Notre client. Voyez-vous, nous pouvons le faire très simplement. Également. Dans la vidéo suivante, ce que nous allons faire, nous verrons au sujet de l'OSI. Dans la prochaine vidéo, nous allons concevoir OC. Oc est le discours de notre client. Merci d'avoir regardé cette vidéo et de vous voir dans la vidéo suivante. 36. Conception D'un OC Du Projet 2: Bienvenue les gars de retour. Dans cette vidéo, nous allons concevoir notre page OCI, c' est-à-dire notre argumentaire client. Créons une nouvelle page ici et nous la nommerons OC. J'irai sur cette page ici. Ce que je vais faire en premier, je vais faire une plongée. Et à l'intérieur de cette div, ou peut-être avant cela, je vais d'abord sélectionner cette div et je lui donnerai une hauteur fixe de 300 pixels. Il s'agit d'une hauteur fixe de 300 pixels par rapport à cette div. Et maintenant, je vais faire défiler vers le fond. Et en cela, je cliquerai simplement sur Ajouter une image. Dans la première, la première option qui est URL, je cliquerai sur cette icône Ajouter ici, j'irai dans le dossier OC. Je vais sélectionner cette image et je cliquerai sur. D'accord. Dès que je clique sur, Ok, comme nous avons une hauteur jusqu'à la div, cette image est maintenant à l'intérieur de la div. Nous allons maintenant modifier la taille de la position et la section Répéter. Donc, nous le garderons comme taille centrale, nous le garderons comme couverture. Répétez. Nous ne le conserverons pas car nous ne voulons pas que cette image soit répétée si la taille de l'écran change et le bord de l'image est là. Et après cela, cet âge, l'image se répétera à nouveau. Si je vois dans les différentes tailles d'écran, ça a l'air plutôt bien. Il ajuste automatiquement cela. ajustent automatiquement l'image à l'intérieur et cela donne la bonne sortie. Ok, donc c'est fini. Et la même chose que nous pouvons faire la page Business Solution, ce que nous avons fait ici. Donc ce que je peux faire, c'est au lieu de mettre l'image à l'intérieur de cette div, je vais simplement supprimer cette div d'ici. Je vais sélectionner cette div et je donnerai une hauteur fixe à cette div indiquant 300 pixels. Faites défiler vers le bas et nous cliquerons sur Ajouter une image. Cliquez sur ce signe plus. Et je vais aller dans ce dossier BSS, désolé, BS, et c'est notre GIF de couverture, je le sélectionnerai puis cliquez sur, OK. Ensuite, ce que je peux faire, c'est que je sélectionnerai simplement la position à centrer, puis la taille à couvrir. Et pas répété. La répétition ne sera pas répétée. Et sélectionnez cette div. Je viendrai au panneau des attributs et je vais juste mettre la marge inférieure à trois, et c'est tout. Peut-être que la marge inférieure quatre est bonne. C'est ça. C'est un autre v de garder nos éléments à l'intérieur d'un do. Et si nous voyons notre avant-première, si je vois notre avant-première, je prendrai cette année. On dirait ça. Maintenant, si vous souhaitez augmenter la hauteur de cette zone particulière, nous pouvons également le faire. Je vais simplement minimiser cela et c'est tout. Je reviendrai donc dans notre dossier OCI ici. Et maintenant, nous allons commencer le reste de la portion, c'est-à-dire que je pense que c'est très simple, mais nous allons le prendre très rapidement. Nous allons donc prendre un conteneur, sélectionner le conteneur et l'attribut qui sera une marge de quatre sera bon. Et ensuite, je vais juste prendre un cap. Je vais mettre le titre ici. Je vais simplement taper un client heureux ou peut-être des clients. Et puis je prendrai une rangée ici à l'intérieur d'un conteneur. Encore une fois, votre marge, la marge supérieure de quatre pour ce conteneur. À l'intérieur de ce conteneur, je vais prendre une colonne. Comme d'habitude. Dans cette colonne, je prendrai une carte. La carte est là, et je n'ai pas besoin de cet autre texte ici sous-titre. Je peux peut-être utiliser ce sous-titre. Et maintenant, si je vais à l'image, je prendrai cette image et je mettrai exactement au-dessus du corps de la carte. Il viendra ici. Vous êtes ce que nous pouvons dire, c'est comme le nom du client ou de l' entreprise et l'entreprise. Bon, c'est assez juste. l'instant, je vais prendre une image aléatoire ici. Peut-être que celui-là va bien. À ce jour, il s'agira d'un logo de l'entreprise. Ensuite, je vais simplement le dupliquer quelques fois. Quatre, c'est peut-être bien. Voyons l'aperçu. Ok, c'est assez bien. Et puis quatre, c'est bien. Cela signifie que nous devons le prendre d'une manière où quatre grilles pour chaque colonne. Je sélectionne donc les quatre colonnes en même temps. Je vais, ce que je ferai, ce que j'ai fait, c'est que je sélectionnerai le premier et je prendrai le meilleur point du dernier, maintenez la touche Maj dans le clavier et cliquez dessus. Donc, toutes les quatre sont sélectionnées ensuite dans la largeur. Donc c'est la taille de l'écran, c'est LG pour LGA qui lui donnera quatre ou désolé, pas, pas plein comme trois. Ensuite, pour MD, je le donnerai six, comme ça vient absolument à MD. Il s'agira d'une matrice deux par deux. Et dans la taille inférieure de l'écran , il sera un outil complet. Ce calcul particulier a maintenant été appliqué aux quatre colonnes. Et c'est plutôt joli. Et de la même façon en sélectionnant les quatre colonnes en même temps. Et je vais ouvrir toutes les colonnes ici une par une. Je vais sélectionner une carte. Je vais donc simplement enfoncer la touche Ctrl mon clavier et une par une, je vais sélectionner toutes les cartes. Et ensuite, dans le panneau Options, je chercherai la décoration. Voici une déclaration. Dans les ombres, je vais y mettre une petite ombre. Voyons donc l'aperçu. Et vous pouvez voir que la petite ombre est là. Il n'est peut-être pas si beau que ça. Prenons donc une ombre régulière. Maintenant, c'est comme oui, maintenant l'ombre est correctement appliquée ici. Et maintenant dans le panneau des animations et sur l'effet de survol, créons ce que vous avez senti que nous pouvons donner. Celle-ci est bonne. Oui, c'est assez bien. Donc, à quoi cela ressemblera exactement chaque fois qu'un pointeur de souris arrivera au-dessus de cela, il survole comme ceci. Assez juste ? Et disons que si vous voulez, comme sinon exactement, vous êtes comme quelqu'un veut, quiconque veut une fonctionnalité comme celle-ci est une entreprise, n'est-ce pas ? Ils ont donc besoin d'un lien ici, comme n'importe quel client. S'ils cliquent sur ce lien, ils seront redirigés vers le site Web de cette entreprise. D'accord, alors comment pourrions-nous faire ça ? Dans cette colonne, nous allons prendre un lien. Il suffit de déposer ce lien à l'intérieur de cette colonne, et ce lien est le bon. Je vais donc prendre cette carte et je mettrai cette carte à l'intérieur de ce lien. Je vais simplement supprimer ce texte de lien de l'année. Et maintenant, ce qui s'est passé ici est comme maintenant que le texte est en bleu et le sous-titre est qu'ils ont sous-jacent et tout. Ce que j'ai à faire, je viendrai juste, vous sélectionnez le lien dans la classe. Je vais taper la décoration de texte aucun et le texte sombre. revenons maintenant à la section par défaut. C'est ainsi que vous devez faire à toutes les autres cartes marquées, toutes les autres cartes. Vous pouvez supprimer cette carte et supprimer cette colonne. Et vous pouvez le dupliquer une fois de plus pour que le lien soit présent à l'intérieur de toutes les colonnes. Et maintenant, si vous accédez au panneau d'options et que vous êtes dans l'URL, vous pouvez saisir l'URL. Je vais donc taper la barre oblique de deux-points HTTP keyed classroom.com. Je vais lui donner une cible vide, donc elle s'ouvrira dans un nouvel onglet ou une nouvelle fenêtre. Les pages sont donc actualisées. C'est donc là que se trouve le lien. Une fois que vous avez survolé plus d'un an, vous pouvez voir ici, où est mon pointeur de souris ? Vous pouvez voir que le lien s' affiche là-bas. Et si je clique sur ce lien, il me faudra me procurer un site Web en classe. Je vais juste le fermer maintenant. C'est tout. Heureux. page client ou le pj de notre client est terminé. Dans la prochaine vidéo, ce que nous allons faire, nous retournerons à notre page Contactez-nous et nous commencerons créer peut-être que celui-ci lancera un ticket, vous verra dans la vidéo suivante, les gars. 37. Finalisation Du Site Web De Multi-pages Du Projet Deux: Dans cette vidéo, nous allons connecter ce ticket de lancement de section spécifique. Pour cela, nous utiliserons une application tierce appelée Fresh desk. Je vais juste taper le bureau Fresh par ici. Il s'agit de l'URL de Fresh Desk. Il existe d'autres applications comme Zoho Desk, Zendesk. Vous pouvez utiliser n'importe qui que vous voudriez. Pour moi, le bureau Fresh est assez bon. Et il ne s'agit pas d'une promotion des préjugés. C'est ce que j'aime personnellement. Bon, créons un compte ici. Connectez-vous aux essais gratuits. Tout d'abord, je vais vous montrer les prix. Vous apprendrez pourquoi, contrairement à cela, pour une petite organisation, il est gratuit, totalement gratuit pour un nombre illimité d'agents. Si vous êtes une petite organisation , le bureau Fresh est très bon pour démarrer le truc. Nous utiliserons deux choses dans les deux choses. L'un est Fresh desk à l'un est un chat frais ou ils l' ont renommé, peut-être quelque chose. Voyons voir. Nous commencerons par Fresh desk ou créerons simplement un compte d'essai gratuit. Par ici. Cela me dit de m'inscrire par e-mail. Donc je vais certainement cliquer sur m'inscrire par e-mail. Je vais entrer mon nom, pas cette adresse e-mail, mon adresse e-mail Yahoo. Je vais indiquer le nom de votre entreprise. Disons que c'est une école de cloud. Il s'agit de notre prochain projet ou du prochain projet Quoi qu'il en soit, nous concevons un seul système LMS. L'école cloud est donc là et nous utiliserons la même chose pour le numéro. Je peux peut-être utiliser ce numéro complet. Voyons s'il n'est pas déjà utilisé. Et l'emplacement des données est l'Inde. Je pense que ça marche. Merci d'avoir choisi le bureau Fresh. Le compte Fresh Desk est prêt et commence. Je pense que je dois confirmer mon e-mail. Il suffit de rafraîchir cette page sur vous. Activez le compte, compte d' activité, et c'est tout. Je pense que c'est fait maintenant. Donc, appuyez sur certains raccourcis qui arrivent devant moi. Oui, nous devons maintenant donner l'URL de notre chaîne d'assistance technique. Tellement frais fait une sorte de Cloud. Cool. Je pense que seule l'école cloud n'est pas disponible. Oui, cette adresse n'est pas disponible. L'école Cloud mettra aide ou peut-être que l'aide n' est que de trouver de l'aide. Il s'agit de l'aide de Cloud School Dash. Aide sur le tableau de bord Cloud School. Dot fresh does.com sera l'URL. Nous allons cliquer sur Suivant. Ne vous contentez pas de résoudre. Surprise. Quelque chose arrive. Nous allons donc attendre ça. Maintenant. Ensuite, invitez l'équipe. Vous pouvez donc commencer à inviter l'équipe en indiquant l' adresse e-mail aussi souvent, mais nous n'avons pas d'équipe, donc nous continuerons avec cela uniquement. Je le ferai plus tard. Et du soutien. Nous avons besoin d'une adresse e-mail de Google ou d'Outlook ou d'une autre où la conversation se produira à travers cela, sinon la conversation se produira. L'utilisation de cette approche est similaire à celle de l'école Red Cloud, dash H dot Fresh desk.com. Donc, pour moi, c'est bon en tant que démo. Félicitations, vous êtes frais. Desk est prêt et commençons à utiliser fresh le fait par défaut, ces trois tickets sont là. C'est un ticket factice. Vous pouvez savoir que c'est un mannequin, une étiquette factice. Et cliquons sur ce billet Voir ici. Vous pouvez voir le ticket à quel point il est là il prend un outil pour moi maintenant, un outil étape par étape ou cinq étapes. Vous pouvez donc tout lire car je connais déjà toutes ces choses. Pour moi, ce n'est pas si nécessaire. Une fois que vous commencez à creuser là-dedans. Et une fois que nous y serons arrivés, une fois que nous arriverons à la section où j'enseignerai en détail le bureau Fresh et tous dans le même cours. Cette fois-ci, je vais vous expliquer tous les détails ici. Et jusqu'à présent, nous continuerons uniquement avec ce processus d'intégration. Passons maintenant à définir où se trouve le panneau d'administration. Cliquons sur admin , puis cliquez simplement sur le portail ici. Il suffit de cliquer sur le portail. Et c'est l'URL du portail. Et disons que si je clique sur cette URL, se passe-t-il exactement devant nous ? C'est donc ce qu'est l'URL du portail, et c'est nos clients vont voir ce portail. Je pense que le changement de design. Auparavant, ce n'était pas comme ça. Maintenant, ils ont changé le design avait l'air bien, plutôt bien. Ça a l'air plutôt bien. Je prendrai cette URL et je vais simplement copier. Revenez au studio Bootstrap. Je vais sélectionner ce bouton ici. Et c'est déjà un lien. Et nous allons simplement coller l'URL là-bas, appuyer sur Entrée, et la cible sera vide. De cette façon. Si nous allons afficher un aperçu de l'année de notre site Web, et si quelqu'un clique sur cette URL, il sera redirigé vers notre page d'assistance. Voici notre page d'assistance de Cloud School. Ce sont toutes les autres choses qui existent. Voir tous les billets. Je pense que c'est ici le conseil d' agent en fait. Si je me déconnecte. Alors, comment ça va être oui. Oui. Ont-ils changé le design pour être très franc, soumettez un ticket et parcourez l'article et vous pouvez rechercher quelque chose si l'article est là. Il s'agit d'une base de connaissances. Nous y arriverons bientôt aussi souvent, d'autres bases de connaissances seront complètement vides. C'est ainsi que ça se passe. Il se connectera une fois de plus. C'est mon adresse e-mail. Je vais entrer mon mot de passe. Continuez vers Fresh Desk Il sera redirigé vers le panneau d'administration une fois de plus que notre portail est configuré. Ce portail auquel nous avons récemment accédé. Maintenant, nous allons passer au widget en compte gratuit. Nous ne pouvons utiliser qu' un seul widget Égypte. Et pour l'instant, un widget nous suffit. Je vais donc simplement cliquer sur créer un widget et je le nommerai comme chat. Et nous allons simplement cliquer sur Créer au cours de l'année. Bienvenue au soutien, et c'est à quoi ça ressemblera. C'est donc de l'aide et tout ce que nous pouvons taper. Ne gardons que ça aide. Nous avons ici un formulaire de contact. Voyons si vous faites défiler vers le bas ici. Non, non, désolé, pas cette année seulement si je l'éteins. C'est donc comme des articles vierges et de support. s'agit donc que des articles de support. Je vais tourner à la fois les options sur l'article de support et ce neutre, et celui-ci est l'autre. Mais une fois que nous aurons terminé notre période d'essai de 21 jours et une fois que nous passerons à la section gratuite trois du compte, cela ne fonctionnera pas, donc je resterai dans l'apparence. Nous pouvons changer la couleur en fonction de notre marque, donc nous avons cette couleur puis la couleur unie, nous avons également d'autres couleurs unies. Ce sont les dégradés, donc nous allons prendre celui-ci. Et c'est une petite chose où vous pouvez voir cela, nous vous avertissons coincé quelque part comme bla, bla, bla. C'est le code principal que vous voulez. Je vais donc simplement copier ce code. Et pour sauvegarder toutes ces choses, je cliquerai simplement sur Enregistrer ici. Et les économies ont été économisées. Copiez ce code avec ce code intégré. Copiez ce code intégré et venez dans bootstrap Studio. Enregistrez d'abord ce projet. Réglage incontournable. Le réglage et accédez au contenu de la tête. Parce que si vous revenez ici, cela dit comme, vous pouvez intégrer ce widget dans votre site Web ou votre produit à l'aide de ce code. Et nous devons mettre ce code, le script à l'intérieur de notre composant tête. Je vais juste coller ce code ici. C'est comme après le contenu et avant. Je vais donc aller à la suite, je le collerai ici et nous cliquerons sur Enregistrer. Une fois que j'ai cliqué sur Enregistrer, je reviendrai à notre projet d'aperçu Bootstraps Studio. Et on y va. Maintenant, nous avons cette icône d' aide ici, et c'est dans toutes les pages parce que nous sommes arrivés à définir et ensuite nous avons collé ce code. Nous ne sommes pas allés dans cette option de configuration de page individuelle et nous avons collé ce code. Cette option est donc partout. Maintenant, si je clique, vous pouvez voir la couleur et le nom de l'e-mail. Toutes ces choses sont ici. Maintenant, il s'agit d'un chat en direct. Vous pouvez également l'appeler comme chat en direct, mais il ne s'agit pas d'un chat en direct. Il s'agit d'un système de support de tickets. Et si vous souhaitez créer un live et créer un chat en direct. Donc pour l'année du chat en direct, nous avons dans le bureau Fresh, comme dans les œuvres fraîches, nous avons un nouveau messager. Nous pouvons le faire également, mais nous ne le ferons pas dans cette section particulière car nous avons une section complètement différente. Dans cette section, nous verrons que, pour l' instant, notre système particulier est prêt. Maintenant, ce que nous devons faire, c'est simplement aller sur la page d' index, sélectionner cette barre de navigation. Avant cela, nous devons le nommer également dans la barre de navigation. Je suis venu à Navbar. Le premier sera la maison. Deuxièmement, ce que cela peut être une solution ou peut-être une solution commerciale. Solution commerciale. Le troisième, peut-être qu'il peut être plus bas. Ensuite, nous pouvons faire directement appel à OC. Et puis je vais le prendre encore une fois. Il s'agira de contact. Contact. Connectons cette page d'accueil sera index, solution commerciale sera une solution commerciale. Cliquez sur Profil et accédez à la page , puis allez au profil sera notre client. Et la page de contact sera la page Contact. Nous devons également concevoir celui-ci juste après la soumission du formulaire. ce que nous allons faire. Une fois que c'est fait, une fois que nous avons tout relié ici, je cliquerai simplement sur cette navigation, cliquez avec le bouton droit de la souris. Allez à copier-coller, venez copier et passez à plusieurs fois sur cette option Lier des copies et cochez cette case afin que notre barre de navigation soit copiée toutes les pages et seront liés à tout le monde. Donc, chaque fois que nous changeons dans une barre de navigation dans toutes les pages en même temps. Il sera mis à jour et il suffit de cliquer sur Copier. Maintenant, je dois aller un par un dans une pêche une par une. Et je dois prendre cette barre de navigation de bas en haut. Top signifie juste en dessous de ce corps. Entrez également en contact, vous êtes également après avoir fait la même chose. Index, c'est déjà fait en OCI aussi, je dois le faire. Oui, on y va. En revenant à l'aperçu, si je vois ici maintenant j'ai ma barre de navigation. Si je vais à la solution commerciale, c'est ma solution commerciale et c'est l'aide que votre œil ira à votre profil. Voici donc mon profil et aidez-nous à nouveau. Ensuite, si je vais au contact, mon contact est également là. Et une fois que j'ai rempli le formulaire, je dois aller sur cette page particulière appelée après la soumission pour que vous puissiez concevoir n'importe quoi ici. Donc, ce que nous pouvons faire maintenant, c'est simplement prendre un conteneur ici, sélectionner ce conteneur, mettre une marge supérieure pour H2. C'est comme un tiret vide pour une marge de quatre, je vais prendre une icône, cliquer sur B, peut-être une icône de pouce vers le haut. Venez dans le panneau Apparence. Je vais un peu vite parce que je pense que parce que je suppose que vous savez comment le faire maintenant, je vais juste changer la couleur, venir à la hauteur, à la taille de la police en fait. Ensuite, j'augmenterai la taille de la police. Juste en dessous, je vais mettre une étiquette de titre, donner le titre ici. Je n'ai jamais aucun type. Merci de nous avoir contactés. Nous obtiendrons en fait ce que j'ai fait ici . Une fois que je veux passer à la page suivante et si je n'appuie que sur Entrée, ce sera comme, OK, l'édition est terminée. Mais si je voulais passer à une ligne suivante, en fait pas p, je pense que j' appelle ça une page mais pas une pêche. C'est la ligne. Ce que je vais faire a changé d'heure, et maintenant je vais taper. Nous reviendrons vers vous dès que possible, ferons H4, et tout le conteneur, nous l'emmènerons au centre. Prenons le bouton, bouton ici. Retournez à la page d'accueil, à Options, puis le style sera averti pour le rendre jaune. Ce sera un lien, et ce lien l' amènera à l'index. Revenez maintenant sur notre page Contactez-nous et sélectionnez ce formulaire. Oui, il est déjà redirigé vers celui-ci. Ainsi, chaque fois que quelqu'un remplit ce formulaire, il y sera redirigé. Essayons ça. Essayons ça. C' est mon information, GSD alors quel projet je n'aimerai pas projet multi-pages. Essayons de type. Message. Cliquez sur Envoyer un message. Vérifiez ça. Je ne suis pas un robot qui envoie. Oui, c'est tout. Merci de nous avoir contactés. Nous reviendrons vers vous dès que possible et cliquons sur, retournez à la maison et nous reviendrons à la maison. Ce sont tous les gars. Je pense que vous avez compris comment concevoir ce site Web multi-pages, comment lier cette page ? Formulaire intelligent, Help Desk est comme très basique que nous avons vu, mais oui, vous avez appris comment exactement nous allons utiliser ce Help Desk, Live Chat et toutes les autres choses. Si vous avez des doutes , veuillez poser une question ou rejoindre ma chaîne Discord. C'est donc l'URL du canal discord, qui dit que ce lien recevra la barre X dans sept jours, ce que j'ai fait hier et j'ai dit navale et clic année. J'espère que c'est là. Sinon, ce que vous pouvez faire, c'est que vous pouvez mettre votre adresse e-mail et je vous enverrai une invitation là-bas sur le disque en blanc sur discord et vous pourrez y rejoindre mu. Donc oui, les deux façons que vous pouvez faire et mon adresse e-mail est de conduire un chef d'orchestre actuel sur yahoo.com. Vous pouvez envoyer un e-mail là-bas pour demander en lien blanc de la jupe. Ensuite, nous pourrons organiser des sessions de chat là-bas. Et parfois, nous pouvons participer à des sessions en direct ou en direct sur Google Meet ou quelque chose comme ça. Et nous pouvons discuter là-bas avec les problèmes communs sont des questions courantes que vous avez les gars. Pour l'instant, ce résultat est terminé, et nous vous verrons dans la section suivante de ce cours. 38. Mise En Place De La Conception Du Projet 3 De LMS: Bonjour et bienvenue dans une autre section. Et dans cette section, nous allons concevoir un système LMS, c' est-à-dire un système de gestion de l'apprentissage. Donc, ce que nous allons faire, au lieu de créer un modèle vide, nous commencerons à utiliser le modèle par défaut ou le modèle fourni par Bootstrap Studio dans l'application. Commençons par concevoir le site Web. Je cliquerai sur le nouveau design ici, et je le nommerai comme école de cloud. École Cloud. Et nous utiliserons ce modèle SB Admin au cours de l'année. Nous allons donc simplement cliquer sur ce modèle SB Admin et je cliquerai sur personnalisé. Et je veux utiliser toutes les pages, quelle que soit la valeur disponible ici. Nous allons cliquer sur Tout. Et je vais l' activer pour qu'il soit également ajouté dans la barre de navigation. Pour nous aussi, c'est facile. Dans la marque. Nous allons le taper comme description de l'école cloud school. Nous pouvons le laisser vide. Remarque, ne vous inquiétez pas. Ensuite, je cliquerai sur Créer. Il s'agit du modèle SB Admin. C'est le modèle d'administration en fait, mais à partir de ce modèle d'administration à partir de ce modèle d'administration, nous allons concevoir un front-end ainsi qu'un panneau d'administration. C'est donc comme dans les deux sens. Le panneau d'administration et ce système LMS qui conçoit ce système telle manière qu' est de telle manière qu'un module utilisateur et administrateur. Si vous allez en classe pour enfants, c'est comme l' administrateur instructeur, module utilisateur. Mais c'est comme deux largeurs, module utilisateur et administrateur et l'administrateur peuvent également être instructifs et l'administrateur également. Donc, ce que nous allons concevoir en premier c'est que nous allons concevoir l'utilisateur appliqué. C'est ce que nous avons devant nous maintenant et nous ne voulons pas beaucoup de cela. Ce que nous allons faire en premier, c'est que nous verrons cette école de cloud et l'icône dont nous avons besoin. Je vais simplement double-cliquer sur cette icône et je vais taper fort. Je vais chercher le cloud ici. Quand je parle, c'est difficile pour moi de taper, alors je tape autre chose en parlant. Ok, donc c'est l'icône Cloud et je cliquerai simplement sur OK, donc nous avons un texte d' école cloud et cloud ici. Il s'agit de deux divs. En 1D, nous avons l'icône et dans une autre div, nous avons le texte. Nous ne voulons pas de cette barre de navigation latérale en fait. Dans admin, nous utiliserons cela, mais dans l'utilisateur, nous ne voulons pas cette barre de navigation latérale, mais nous voulons cela à des choses comme une icône et l'autre est le texte. Sélectionnez les deux. Et je viendrai ici, glisser-déposer dans l'autre section de l'autre barre de navigation, vous pouvez voir une autre barre de navigation est également là. Je pointe une flèche là-bas. En utilisant l'animation. Je vais le libérer ici. Il se trouve juste à côté de la barre de recherche. Et puis cette barre de navigation, cette barre de navigation dont je n'ai pas besoin à l'utilisateur, donc je vais simplement la supprimer. Une fois que j'ai supprimé cela devient une page complète, barre de navigation et ensuite le reste des choses, quoi qu'il y ait. Encore une fois, je n'en ai pas besoin dans ce domaine particulier. Je vais donc sélectionner ce tableau de bord et nous laisser voir où il se trouve dans ce conteneur. Donc, si nous supprimons ce conteneur, cela fonctionnera-t-il ? Oui, ça a marché. Et nous ne voulons pas que celui-ci soit aussi le pied de page et le haut de cette page. Nous pouvons utiliser et voyons. Si nous voulons utiliser nous pouvons et oraux, nous supprimerons cela. D'accord ? C'est donc le conteneur de div. Nous voulons cette div parce qu' à l'intérieur de cette div, le nav, mais il est aussi là. Quoi que nous allions faire, nous ne le ferons qu' à l'intérieur de ce conteneur. Avant cela, ce que nous allons faire, nous utiliserons un jeu de couleurs différent ici, comme un mode sombre du site Web. En arrivant aux ressources. Si vous accédez au dossier des ressources que j'ai partagé avec vous dans le fichier BSS, vous pouvez trouver comme cloud school ici dans les ressources. Si vous accédez à Ressources, vous trouverez ce CSS de modification personnalisée. Ce que vous devez faire, c'est simplement glisser-déposer le fichier CSS et le déposer dans cette eau de queue. Maintenant, vous pouvez voir que cette zone est sombre maintenant. Maintenant, pour modifier la couleur de cette barre de navigation vous devez d'abord sélectionner la barre de navigation. Vérifiez que la couleur d'arrière-plan est présente ou non. Si c'est là. Comme dans cet exemple, il est blanc. Il suffit donc de cliquer ici et de cliquer sur Default, afin qu'il devienne une zone par défaut, quelle que soit la couleur donnée à cette barre de navigation particulière. Mais comme souvent ou il est transparent, il arrive dans la section sombre car nous avons importé ce fichier CSS un fichier CSS et il montre cette chose particulière. Et sélectionnons cette barre de recherche et nous pouvons changer la couleur de la couleur primaire à la couleur sombre. Et on y va. Nous voulons que ce soit un message de notification plutôt que l'utilisateur. Et maintenant, il y a deux choses. Nous allons le changer. Je vais sélectionner cette barre de navigation complète et passer à l'année d'apparition à partir de la couleur du texte. En fait, la couleur du texte est ici et nous pouvons le rendre blanc de votre part. C'est tout ce qu'il est fait. Et celui-ci, nous le ferons manuellement, comme le blanc étape par étape. Celui-là, je pense que c'est d'où cela vient exactement. Texte gris une AC est appliquée, texte gris 600 ans. Nous allons rendre le texte blanc. On y va. Et nous pouvons supprimer ce style de votre. Disons maintenant cette icône, icône. Bon, donc voyons quelle couleur nous pouvons utiliser ici. Oui, on l'a rendu blanc. Et cette sonnette de notification, encore une fois, nous devons la rendre blanche. Autant que ça. La section Navbar est terminée et nous devons continuer avec l'autre. Ensuite, nous verrons la barre de navigation étape par étape. À ce jour, c'est fait. Nous avons changé pour le, nous avons supprimé la barre de navigation latérale, nous avons changé la couleur, nous avons importé un CSS. Dans la vidéo suivante, nous verrons une barre de navigation supplémentaire nous allons concevoir et qui n'apparaîtra que lorsque nous utilisons des appareils mobiles. On se voit dans la vidéo suivante, les gars. 39. Création de Navbar pour la vue mobile du projet trois: Bon, bienvenue sur cette vidéo. Dans cette vidéo, nous allons concevoir une barre de navigation, qui sera réservée aux appareils mobiles. Celui-ci est maintenant corps ici, et je prendrai une autre barre de navigation. Nous prendrons cette barre de navigation et je la déposerai ici. Exactement. Oui. Celui-ci juste en dessous du corps et que ce soit ce que nous allons faire, nous allons tout réparer. Alors, sélectionnons cette barre de navigation et passons aux options ici. Et dans la position, c'est la troisième option qui est positionnée. Il suffit de sélectionner cette option et de cliquer sur fixe en bas. Une fois que vous aurez cliqué dessus, personne ne viendra dans la zone inférieure. Je pense que nous n'en avons pas besoin maintenant, donc nous allons supprimer cela. Et nous n'avons pas non plus besoin de cette toute nouvelle icône, pas de l'icône de la marque, du nom de la marque ici. Nous supprimerons également ce nom de marque. Et maintenant, passons à la vue mobile et nous commencerons à la concevoir. Sur mobile, vous. Dès que nous sommes arrivés à la vue mobile, cette icône de hamburger est venue et nous ne voulons pas cela. Encore une fois, je vais sélectionner cette barre de navigation agrandir. J'y arriverai comme toujours. Il le gardera toujours dans celui de l'exposant. Nous devons maintenant voir ce que nous avons à mettre ici. Je pense que les choses de base que nous voulons être aisées, c' est la maison. Ensuite, nous aurons également une section appelée mon apprentissage ou peut-être mes cours. Et puis la liste de souhaits, puis compte et recherche. Je pense que nous avons trois ou quatre options là-bas. Supprimons cela parce que nous voulons y apporter une icône. Et je vais juste éteindre ce bouton actif ici. Et je viendrai sur l'icône, icône de recherche et je dépose l'icône dans cette zone particulière. Et déposez l'icône ou supprimez ce texte. Cela résout cette icône sera à la maison. Quelle maison utiliser. Voyons voir. Une autre icône. Il devrait être très mince et couper le genre de chose. Nous pouvons donc utiliser cela, mais voyons voir. première maison est là, puis l'icône de recherche est là, d'accord, puis la vidéo, la vidéo n' est pas si bonne. Nous pouvons également la rechercher pour jouer. Celui-là va très bien. Ensuite, définissez ou peut-être comptez, connaissez ou utilisateur. Nous avons toutes les icônes, puis nous pouvons utiliser cette seule ligne. Génial. D'abord, c'est chez nous. Je sélectionne cette icône d'accueil ici et je clique sur Accueil. Je pense que vous avez compris exactement ce que nous allons faire. Sélectionnez cet élément maintenant et dupliquez-le. Double-cliquez sur cet élément de navigation. Et le prochain sera la recherche. Nous allons sélectionner cette recherche ici. Et nous le dupliquerons encore une fois. Cette fois, il s'agira d'une icône de bouton vidéo ou de lecture. Il s'agit de l'icône du bouton de lecture. Après cela, nous avons une liste de souhaits. Oui, la liste de souhaits peut être leur cœur. J'espère que votre cœur est là. Dieu merci. Nous ne l'avons pas vérifié. Le dernier sera celui des utilisateurs. D'accord. Nous avons ces icônes depuis plus d'un an. Et ensuite, nous allons tout sélectionner. Désolé, j'appuie sur les lacunes Août, sélectionnez tout et venez à la classe et tapez simplement marge, gauche, marge à gauche ou à droite. Juste une seconde. Nous devons faire du rembourrage. Trois, c'est trop. Ça suffit. Ensuite, la marge aussi. Parfois, cette marge ne fonctionne pas dans la barre de navigation, alors que devez-vous faire ? Comme disons que nous ne prendrons que celui-ci, puis sélectionnez-le en premier et verrez combien d'espace est disponible ici. J'ai essayé de donner un peu de marge car nous utilisons également Flexbox. Un peu de marge où nous allons donner une marge droite. Disons que cinq marges cinq sont suffisantes. Il suffit de prendre celui-ci et d'appliquer la marge cinq à chacun d'entre eux. Ils peuvent avoir un peu d'espace là-bas. Voyez ce que je fais, c'est que je sélectionne juste un par un et que je copie et que je le colle. Mais il y a encore une autre option. Maintenant, sélectionnez tous les éléments de navigation en même temps et donnez-leur simplement la marge. Ce sera facile pour vous aussi. Disons que dix, c'est assez bon. Ensuite, venez à la police et à la taille de la police, nous augmenterons une police à 20. Ok, maintenant je viens à l' option Nav ou peut-être à la navigation. Sélectionnez la navigation de réduction et accédez aux options, puis cliquez simplement sur Centrez. Désolé, sélectionnez-le et cliquez sur Centre. Maintenant, il est au centre, alors sélectionnez la navigation, puis accédez à l'alignement, puis sélectionnez centre ici. Maintenant, nous avons cette barre de navigation, qui est centrée align. Et je vais sélectionner cette barre de navigation viendra à Apparence. Et je dois donner la couleur, cette couleur foncée ici. Je vais donc juste en venir à cet arrière-plan. Je vais cliquer ici. Nous prendrons l'outil pipette. Cliquez sur ce bouton. Je le mettrai aussi dans le favori. Ce n'est pas un favori, donc je vais le sélectionner et accéder aux polices. Les polices, je vais juste rendre le formulaire blanc. Je pense que je dois rendre l' icône blanche une par une. Celui-là blanc. Je le fais juste. Je vais juste faire l'avance rapide. C'est une façon de le concevoir. Et nous allons lui donner un aspect et une sensation un peu différents pour qu'il soit très excitant. Ce que je vais faire, c'est que je viendrai dans le panneau Options ici. Panneau Apparence, ou simplement descendre et je vais sélectionner cette bordure. Je vais sélectionner cette bordure, ou peut-être toute la bordure. Et donnons un rayon. Et essayons d'en faire une courbe. 150, c'est suffisant, 50. Et nous viendrons, vous êtes au sommet. J'ai sélectionné l'emprunteur de carte de navigation, vous avez raison. Je vais le faire. En bas de la marge. Nous allons juste essayer de le faire sur un site, un peu de chaque côté, disons que cinq sont suffisants. Et nous allons essayer de donner de la place supplémentaire ici. Ce que nous pouvons faire là-bas, je pense que le rembourrage sera la meilleure option pour cela. Le rembourrage, n'est-ce pas ? Est-ce que ça marche ? Non, ça se passe à l'intérieur de cette marge, non ? La marge fonctionne. marge cinq est bonne pour le côté droit ou le côté gauche aussi certainement que nous allons donner cinq. D'accord ? Nous allons faire quelques pas plus bas. Et maintenant, au lieu de donner cette couleur, ce que je pense est comme ce que nous pouvons faire, au lieu de donner cette couleur ou couleur droite directe que nous pouvons utiliser un dégradé là-bas. Si dégradé, voyons comment nous pouvons le faire. façon dont nous pouvons le faire signifie quel dégradé nous devons utiliser de l' obscurité à la lumière ou de la lumière à l'obscurité. Voyons voir. Sélectionnez celui-ci. Design. Je vais sélectionner cette couleur. Une fois encore. Je vais aller dans Select. Ensuite. Je vais le porter du côté plus léger. Le bleu ne fonctionnera pas correctement. Qu'est-ce que vous dites, les gars ? Comme si le dégradé a l'air bon ? Non, pas pour moi. Je ne pense pas. Ça a l'air bien. En fait. Que ce soit de cette façon seulement. Oui. Je pense que c'est tout ce que nous pouvons faire. En dehors de cela, ses jambes sélectionnent ces icônes. n'est pas exactement ce que je cause des éléments de navigation et nous pouvons réduire la taille d'une police. Il est trop grand, donc on peut le rendre petit. 16 c'est bien, et nous avons également donné le rembourrage quelque part. En ajoutant un, nous supprimerons ce rembourrage. Bon, maintenant c'est faux. Maintenant, nous devons maintenant en bus un soit le haut est en bas, mais cette barre de navigation que nous n'utiliserons que lorsque nous sommes sur l'écran mobile que ce NaBR ne sera pas là. Pour cela, nous devons utiliser la requête média. Et cette requête média que nous allons voir dans la prochaine vidéo. On se voit dans la vidéo suivante. 40. Conception De La Page D'atterrissage Du Projet Trois: Bon, nous allons donc commencer à créer le reste de la zone. Avant cela, nous devons importer quelques-uns des éléments ou peut-être peu de ressources de votre part. Cette image de couverture que nous voulons et les icônes de ce cours que nous voulons. Nous viendrons donc notre section d'images et je vais créer un nouveau dossier appelé couverture, où je ne vais placer qu'une seule couverture. Et je vais créer un dossier de plus pour créer un dossier de plus et je le nommerai comme bannière de cours. Il suffit de double-cliquer sur ce dossier de cours. Je vais faire glisser et déposer ces bannières dans ce dossier d'image de bannière de cours, dossier de bannière de cours. Et je viendrai découvrir ou peut-être que je choisirai les deux et il le déposera à l'intérieur de cette couverture. L'autre n'est pas couvert, mais qu'il en soit, je vais le garder là. Ok, donc nous avons nos images maintenant avec nous et créons le reste des choses. Donc, d'abord, je prendrai un conteneur et je vais y déposer, comme je vous l' ai dit, nous allons tout faire à l'intérieur de celui-ci, cette div. J'ai pris un conteneur et à l'intérieur ce conteneur, je prendrai un div, div et je le déposerai dans ce conteneur. Et maintenant, à l'intérieur de ce conteneur, nous voulons prendre notre image de couverture. Je prends cette image ici. Double-cliquez sur cette image et accédez à notre couverture et sélectionnez cette image. Cliquez sur OK. Et on y va. Et nous devons activer la réponse que vous optez ici. On y va. Nous avons cette image que nous avons importée et ses deux grandes images. Et voyons exactement comment ça se passe dans la vue mobile. Whoops, c'est parti. Je pense que voyons où nous en avons. Je pense que nous avons donné notre requête média à cette div, cache-toi sur mobile. Ce ne devrait pas être votre, en fait, ce ne devrait être que pour cette barre de navigation. Et je vais juste le taper ici. Maintenant, c'est parti. Et pour cette image, nous devons faire une chose que nous devons réduire la taille de l'image. Ok, dans Bootstrap Studio, nous avons la possibilité d'ouvrir directement cette image dans un éditeur d'images tel que Photoshop ou GIMP ou n'importe quel éditeur d'image dont nous disposons. Et à partir de là, nous pouvons le faire. Alors, faisons-le. Dans la couverture. Je vais sélectionner cette couverture, cliquer avec le bouton droit de la souris Ouvrir dans et je cliquerai sur Photoshop. J'ai donc Photoshop dans mon système. Je l'ouvre dans Photoshop. Et une fois qu'il est ouvert dans Photoshop, Photoshop s'ouvre ou s'y ouvre. Maintenant, la photo est directement appelée dans Photoshop. Et si vous ne trouvez pas cette option, comme ouvrir dans Photoshop. Vous trouverez donc cette option ouverte dans, mais vous pouvez cliquer sur cet éditeur configuré. Vous trouverez ensuite les éditeurs que vous avez dans votre système. Vous pouvez également cliquer sur Ajouter un éditeur. Et vous pouvez en trouver quelques-uns, vous pouvez simplement cliquer sur ce fichier de ressources ou peut-être sur le lanceur de cet éditeur d'image particulier. Peut-être comme GIMP ou Photoshop ou quoi que ce soit. Il suffit de cliquer sur ce lanceur et de cliquer sur Ouvrir ici. Et puis il viendra à l'intérieur cette zone de lancement particulière. Ensuite, vous pouvez sélectionner l'éditeur par défaut. Je ne fais que annuler ça. Je reviens sur Photoshop et je vais juste recadrer cette image en appuyant sur C. Je vais juste prendre cette année, juste une tranche cette tête baissée. Je pense que c' est suffisant, non ? Il suffit de cliquer sur Entrée. Et maintenant, j'ai juste besoin d'aller sur Fichier et de cliquer sur Enregistrer. Et il suffit de cliquer sur OK. Et c'est tout. Si je vais à nouveau dans mon studio Bootstrap, on y va. Maintenant, c'est déjà fait. Il est édité. Il est haché correctement. C'est ce que je voulais et c'est tout. Je vais sélectionner cette image et je commencerai à modifier davantage avec cela. Dans le studio Bootstrap. Il suffit d'accéder au panneau Apparence et faire défiler vers le bas jusqu'à la zone des bordures. Je vais sélectionner toutes les bordures ici et je vais donner un peu de courbe. Vous pouvez voir ici un peu de courbe, peut-être jusqu'à ce que 18 ou 20 soit très bien. Bon, 20, c'est assez bien. On y va. Maintenant, nous avons une image correcte à l'intérieur et laissez-nous voir l'aperçu dans le navigateur. L'aperçu n'est pas activé, donc je cliquerai simplement sur l'aperçu. Et on y va. Nous avons l'aperçu, mais nous avons beaucoup d'espace vide ici. Alors, comment réparer cet espace vide ? C'est simple. Il suffit de cliquer sur ce récipient et d'activer cette option fluide. Revenons à notre avant-première. Il y en aura, nous avons cette option au-dessus de vous. Je pense que c'est toujours une grande image. Nous devons le trancher davantage. Revenez donc au studio bootstrap, venez à la couverture, cliquez avec le bouton droit de la souris. Ouvrez et ouvrez à nouveau dans Photoshop. Il ouvrira l' image dans Photoshop. On y va. Découpons-le un peu plus. Gardons ça d' ici et coupons-le du haut. Je pense que c' est assez juste. Vous accédez à Fichier, cliquez sur Enregistrer. Retour à bootstrap Studio va voir ceci. Et le vôtre, voyons voir. On y va. Allons plutôt bien comme un petit et décent. Bon, très bien, assez juste. Commençons par concevoir la prochaine partie. C'est là que nous pouvons voir les cours. Pour cela, je vais prendre une direction. Je vais déposer ce titre à l'intérieur de ce conteneur. C'est le titre, je vais juste le taper, taper vos cours et je vais le faire H12. Celui-ci, je dois le rendre blanc. Il suffit de venir votre police et de cliquer sur cette zone blanche ou sur votre texte blanc. Nous devons donner une marge. Top 33 est assez bon. Les trois premières marges sont suffisantes. Oui. D'accord. Maintenant, la zone suivante, ce que nous allons concevoir facilite la zone de liste de cours. Pour ça. Nous allons prendre une rangée et nous allons déposer cette rangée à l'intérieur de ce conteneur. Une colonne à l'intérieur de ce conteneur, une colonne à l'intérieur de cette ligne. Sélectionnez cette option. Je vais prendre un garde. Mettez cette carte à l'intérieur . On y va. Donc, ce que nous voulons titre, nous voulons des sous-titres, nous voulons cette zone que nous pouvons utiliser, mais nous ne voulons pas ce lien. Supprimons donc cela et voyons si nous pouvons utiliser cela ou non. Si nous n'en avons pas besoin, nous pouvons le supprimer. Cette zone sera la zone de titre. Nous allons donc le nommer comme étant le même cours. Bootstrap Studio 5.9, ou peut-être trouver 0,9 x ce qui s'est passé ? Vot bootstrap Studio 5.9 x DBs étape par étape. Bien sûr, quelque chose comme ça. Vous êtes le sous-titre, certains sous-titres seront là. Et que pouvons-nous mettre une note, évaluations que nous pouvons mettre en place ? Nous allons donc prendre une période ici, à l'intérieur de ce paragraphe. Cette période. Et dans cette période, je prendrai l'icône. En fait, lorsque vous le concevrez comme un site Web dynamique, cette fois-ci, vous n'utiliserez pas ces icônes et tout. Laissez-les. Vous aurez un package si vous utilisez n'importe quel framework, disons un cadre latéral ou quelque chose du genre. Vous aurez un paquet et à partir de là, vous l' utiliserez. Donc, cette fois-ci, vous ne l'utiliserez pas réellement. Mais juste pour bien regarder, nous utilisons ces étoiles ici. Je vais sélectionner tous les cinq étoiles ici. Donnons un peu de rembourrage. Et cette zone de texte, je vais simplement supprimer ce texte et entre crochets. Nous allons donc simplement taper 123456 étudiants ou peut-être pas étudiants. Nous pouvons en faire une cote 123456. Cette zone est assez bonne et vous obtenez ces bordures et toutes ces choses parce que nous avons ajouté le CSS au début. Il y a un CSS personnalisé, un fichier CSS de changement personnalisé en ce sens que toutes ces choses sont déjà là. Ensuite, nous allons prendre une image. Cette image, je vais la mettre à droite sur cette étiquette corporelle, carton JTAG en fait l'étiquette de corps de carte. Et il double-cliquez dessus. Et nous allons accéder à notre bannière de cours. Et nous allons sélectionner n'importe lequel de ces éléments. Eh bien, disons, choisissons celui-ci. C'est donc notre studio bootstrap comme le gagnant merveille, et bien, quoi qu'il en soit, ce domaine est fait. Et Shadow, je ne pense pas. Nous devons appliquer un peu d'ombre parce qu'il fait déjà sombre et à quoi ça sert  ? Mais oui, nous pouvons y donner de l' animation. Cliquez donc sur survol. Celui-là. Voyons voir. Oui, il fonctionne correctement. Et combien nous devons donner. On peut peut-être donner 33 c'est bien. Donc, jusqu'à LG, on peut en donner 43. Alors celui-ci est MD, en moment, celui-ci est MD. En MD, on peut le donner peut-être 4444. Et puis la taille d'écran inférieure, je pense que six suffisent, comme deux par deux ou peut-être que nous pouvons passer un par un aussi. C'est également une bonne chose. Trop bien, c'est aussi bien, pas une grosse affaire. Nous allons dupliquer cela. Quelques fois. 1234 fois, c'est bon. Cette taille d'écran, modifions cela par différentes bannières de cours pour qu'il soit un peu différent. Un par un. Et les titres aussi, nous pouvons le modifier. Nous pouvons nous repousser maintenant, nous pouvons mettre Lorem Ipsum. Je vais donc le sélectionner. Je vais contrôler mon cap et je vais taper labrum. Whoops. Contrôlez D lorem, entrez, entrez Lorem Ipsum. Pas tant que ça. Disons que si le titre de notre cours est grand, mais nous allons évidemment donner une limite de 60 caractères afin que nous puissions faire un titre SEO approprié là-bas. Mais encore une fois, si nous avons beaucoup de texte ici, nous pouvons faire quelque chose ou vous, voyons ce que nous pouvons faire dans la zone de texte. Mais nous allons le faire dans la prochaine vidéo. 41. Finalisation De La Page D'atterrissage Du Projet Trois: Bon, donc nous continuerons là où nous sommes restés. Nous ne voulons donc pas cette longue zone ou autre et z. Maintenant, il s'agit de textes courts, donc nous avons cet espace vide ici. Ce que nous pouvons faire, c'est que nous allons sélectionner cette zone de texte. Et dans cette option de texte, nous viendrons simplement activer ces deux options pour tout ce texte trop grosse boucle pour le faire uniquement. Ce sera donc comme un seul liner et il n'y aura pas de perturbation dans l'interface utilisateur. Celle-ci sont des étiquettes d'en-tête avec h4. Nous ne voulons pas de H4 là-bas, donc H5 est également assez bon pour cela. C'est résolu. Sélectionnons celui-ci et mettons un autre texte de Lorem Ipsum là-bas. Nous avons quelque chose de différent là-bas. Un titre différent ici. Et encore une fois, un titre différent ici. D'accord. Quelle est la taille étrangère, Gary, ce paragraphe ? C'est à ce moment que 16 ans. En fait, nous ne voulons pas que ce soit 16 ans. Nous allons donc sélectionner tous les paragraphes en maintenant la touche Ctrl enfoncée et en cliquant un par un sur tous les paragraphes. Il suffit de réduire la taille à 12. Nous devons donner quelque chose ici. En fait, parce que c'est qu'ils connectés les uns aux autres, nous ne voulons pas comme ça. Il suffit donc de réduire toutes les colonnes ici. Tout de suite. Je vais sélectionner toutes les colonnes. Appuyez sur Contrôle, désolé, appuyez sur touche Maj enfoncée et sélectionnez tout. Et le bas de la marge est bon, je pense, ou peut-être trois. Oui, trois, c'est assez bien. Et maintenant, voyons l'aperçu. On y va. Nous avons cela empêcher Maintenant, avez-vous résolu ces images une par une lors du chargement pour cela aussi pour un meilleur référencement, optimisation des moteurs de recherche. Et même si vous allez vérifier le test de vitesse du site Web, il vous recommandera toujours d' utiliser des images de points WebP. ce moment, nous utilisons toutes les images PNG légères. Il vous recommandera donc toujours d'utiliser des images WebP. Et il recommandera toujours d'utiliser un chargement paresseux. Voyons comment activer exactement la charge paresseuse dans Bootstrap Studio sélectionnera les images, toutes les images une par une en cliquant, en maintenant la touche Ctrl enfoncée et en cliquant sur les images, allez dans Options. Et ici, nous avons l'option appelée charge paresseuse et nous pouvons rendre paresseux. C'est tout. Si vous pouvez voir dans le CSS au fil de l'année, charge est égale à paresseuse. Et maintenant c'est le cas, on peut dire que nous avons fait un peu d'optimisation là-bas. Ce que signifie exactement la charge paresseuse. Vous pouvez maintenant voir si les images, ces images particulières au bas de la page où cette zone n'est pas visible jusqu'à présent. Cette fois-ci, cette image ne se chargera pas. Cela aidera le site Web à se charger plus rapidement. Au lieu de charger toutes les images qui le sont, qui ne sont pas encore devant l'écran. Je pense que c'est assez bien, mais oui, faut y mettre le prix. Une fois encore. Nous devons ajouter un prix à tout cela. ce que nous allons faire. Que faire ? Nous allons prendre la direction. Nous allons le placer une année, et ce sera H3 ou peut-être que H4 est également bon. Puis prenez une icône. Cette icône sera l'icône de la monnaie, en fait, comme je viens d'Inde, donc j'utiliserai ma monnaie, c' est-à-dire roupie 99. Je vais taper ici. Voyons d'abord l'aperçu. Maintenant. Ça a l'air plutôt bien, pas si mal. En revenant au studio de bootstrap, je dois dupliquer ça. Apportez-le. Encore une fois, dupliquez ceci. Nous l'apportons ici. Dupliquer, dupliquer. Bonjour. Obliquez-le, et apportez-le à vous. Bon, c'est assez juste. Maintenant, il est bon de suivre ces cours à partir de maintenant. Je pense qu'au lieu de nous y apporter quelques changements aussi, comme si cela avait l'air trop grand, alors nous pouvons le rendre petit. Petit signifie ce que nous pouvons faire, sélectionnez toutes les colonnes au-dessus de vous. Au lieu de trois. On peut y aller avec deux. Voyons à quoi ça ressemble exactement. En fait, c'est beau dans cette taille. le garderai comme ça seulement. ce que nous avons. Et si nous essayons de réduire la taille de l'écran, cela prend la zone appropriée. N'est-ce pas ? Vous pouvez jouer avec ça. Et pour moi, je pense que c'est bon. Et après cela, nous créerons une autre section. Ce n'est pas exactement la section. Nous allons créer un titre de plus ici, c'est mon titre. Rubrique. Et je vais déposer ça dans ce conteneur parce que je le veux juste en dessous de cette rangée. Vous êtes exactement, je vais le faire H12. Ceci à une couleur blanche. Je vais taper que vous obtenez bien sûr certificat d' achèvement au lieu de simplement copier-coller. Amenez-le au centre de l'alignement. Et je vais donner le top cinq de la marge. J'ai mis un bon espace là-bas. Ce que je vais faire, je vais mettre ça dans une div, en fait à l'intérieur de cette div. Et cette div, je vais en faire un alignement central. Et je retirerai l'administrateur central de celui-ci. À l'intérieur de cette div, je vais prendre un paragraphe, déposer ce paragraphe à l'intérieur de ce paragraphe, je l'appellerai comme effectuer un test d'auto-validation et obtenir un certificat. Je ne fais que copier et coller les données dont je dispose. Mais vous les gars, vous tapez les données. Je vais encore sauver ça. Maintenant, je vais prendre une rangée. Il va prendre cette rangée à l'intérieur de cette div. Ensuite, je prendrai une colonne. Dans cette colonne, je vais prendre l'étiquette de l'image. Double-cliquez sur la balise d'image. Nous avons cette image que je voulais voir majeure. Maintenant, je vais ouvrir cette image, allez dans Options sur cette réponse. Vous venez de dupliquer celui-ci de l'autre. Je vais simplement supprimer cette image. Je mettrai 21 étiquettes de tête là-bas. Je pense que nous devons le prendre en dehors de cette div. Nous ne voulons pas que cela devienne un élément central. Cette div, je le prendrai au-dessus de cette règle. D'accord. Assez juste. Cette rubrique sera appelée instructeur. Ensuite, nous allons prendre un paragraphe, en fait. Dans un paragraphe, saisissons quelque chose de très aléatoire Wonder Woman. Très bien, je vais dupliquer cela et nous considérerons cela comme beaucoup de mythes de contrôle. P, double Entrée, Entrée, Entrée, beaucoup d'epsilon. Cette section en particulier, je veux complètement le blanc. Donc, pour sélectionner cette colonne, commencez à apparaître. À la colonne complète, je donne de la couleur blanche. Et je veux aussi que ces textes particuliers, comme tous les trois textes viennent comme au centre, comme au centre horizontal. Nous allons donc aller dans le panneau Options et dans la flexbox. Je vais donc ouvrir cette Flexbox. Je vais cliquer sur ce centre. Voyons d'où je veux ça au centre. Votre premier, nous corrigerons cette zone de colonne. Ensuite, nous irons à la Flexbox. Je pense que c' est normal de partir. Celui-là, c'est SM. Sm, on en veut six. J'ai ensuite sélectionné les deux colonnes. Donc, c'est l' un après l'autre. Et de votre part, c' est côte à côte. Quand c'est l'un après l'autre. Je veux que ça arrive dans une zone centrale comme ça. Ensuite, je vais m' allumer juste une seconde. Je voulais juste sélectionner cette colonne. Et le second, pas les deux, juste fait sur ce centre et en colonne et celui-ci. Ok, donc si j'arrive à la plus grande taille d'écran maintenant, vous pouvez le voir. Il arrive automatiquement au centre horizontal. Il s'agit d'un centre horizontal. Vous pouvez voir le Centre et c'est à gauche. Cette zone est terminée. Une dernière chose que nous pouvons faire, c'est que nous en mettrons une. Ce que nous pouvons faire ici, mettons une vidéo là-bas. Désolé, j'y prendrai encore une plongée. Cette div. Pour cette div, donnons une marge des quatre premiers. Prenons la vidéo. C'est une vidéo, donc div, je vais la prendre au centre pour que la vidéo vienne au centre. Et maintenant, au lieu de cet u2, nous allons prendre un Vimeo car YouTube, vous savez, comme comment le prendrait exactement, comme simplement copier l' URL là-bas. Et voici Vimeo. Vimeo semble également prendre l'URL. C'est tout. C'est fait. En fait. Il suffit de copier ce lien. Laissez-moi enlever ça et coller ça. Maintenant, c'est votre titre. Supprimons le titre puis affichons l'auteur. Supprimez également cet auteur. Celui-là. C'est tout. Nous n'aurons que les contrôleurs là-bas. Maintenant, si je vais à notre avant-première. Oui, maintenant la vidéo est là et vous pouvez cliquer sur cette vidéo à la plaque. Oui. J'ai également reçu des questions où des étudiants comme vous me demandent exactement comment ajouter une vidéo HTML5 ici et que je vais couvrir, j'ai également écrit que je dois couvrir cela. point particulier que nous aborderons quand nous prendrons un vrai serveur et quand nous chargerons nos fichiers sur le serveur réel, car nous avons besoin d'un serveur à partir duquel nous pouvons stocker cette vidéo et appeler ce lien vidéo également. C'est ce qui est fait à partir de maintenant. C'est fini. Oui, c'est tout. Mais avant cela, si nous arrivons à la taille de notre mobile, alors cette vidéo se cache derrière cela. Et nous devons remédier à cela. Et aussi une fois que nous arrivons à la taille de l'écran mobile, cette vidéo sort de la zone. Que devons-nous faire au lieu de cette largeur, 60 pixels ? Nous devons garder un 100 % et ensuite il sera sous forme de pourcentage. Blue bordered va derrière notre barre de navigation, c' est-à-dire la barre de navigation inférieure. Donc la dernière, ce que nous pouvons faire, je vais sélectionner cette div ici, venir au panneau Apparence. Je dois donner un fond de marge de manière à ce qu'il ne tombe pas au-dessus de cette zone. Composez cette barre de navigation. Je dois donner autant de marge. Disons que 50, c'est assez juste. Je pense que cette image est bonne. Il y a donc des contrôles individuels et celui-ci a également un contrôle individuel. Dans ce domaine, aussi cette div, ou peut-être ce conteneur, le conteneur complet, je dois lui donner une zone supérieure de marge, qu'il dispose d'un espace supplémentaire ou d'une place supplémentaire là-bas. Ce sont tous les gars. Je pense que cette conception de page est terminée. Seulement cette zone médiane. Nous le ferons au fur et à mesure que nous allons de l'avant. Et à ce jour, cette page est terminée. Dans la vidéo suivante, nous allons créer une autre page qui correspond au discours Détails du cours une fois que vous aurez cliqué sur ce cours. Il devrait donc aller sur la page détaillée d'un cours, cette page que nous allons concevoir et que nous allons concevoir dans notre prochaine vidéo. On se voit dans la vidéo suivante, les gars. 42. Création et ajustement d'autres pages pour le projet LMS du projet trois: Dans cette vidéo, nous allons continuer en créant notre page Détails du cours. Pour cela, ce que nous allons faire, sélectionnez cette page d'index. Je vais dupliquer cette page d'index, et je le renommerai comme les détails de Gore. D'accord, donc en arrivant sur cette page, nous n'avons pas besoin de toutes ces choses maintenant. Je vais tout sélectionner et je supprimerai cette zone. Je vais sélectionner ce conteneur. Et je viens ici. La première chose que nous devons faire, c'est nous allons prendre une étiquette de titre, que nous allons prendre une étiquette de titre, la déposer ici, et ce conteneur, je vais juste sélectionner ce conteneur, arriver à l'apparition. L'ensemble du conteneur, nous allons le rendre blanc. Cette étiquette de titre sera H2. Et nous le nommerons comme nom du cours. Je paie juste ça. Nous pouvons le faire H12 ou un aussi. H1 est également très bien, pas un problème. Ensuite, nous allons prendre un paragraphe. Ce paragraphe sera sous-titré, donc nous pouvons y mettre un texte lorem ipsum. Nous pouvons avoir quelques lignes de plus ici où nous pouvons mettre d'autres détails tels que l'ID du cours de lecture. Nous pouvons le mettre comme le plus récent, à jour et nous y mettrons une date. Une fois cela fait à l'intérieur de ce conteneur, nous prendrons une rangée. Prenez la ligne ici, et je déposerai cette ligne à l'intérieur ce conteneur et sélectionnez-le, sélectionnez la ligne. Je vais prendre la colonne à l'intérieur de ce conteneur, et je prendrai deux colonnes ici. Et une colonne sera destinée à vidéo et une autre colonne sera destinée à l' autre ensemble d'informations. Je vais sélectionner la première colonne, revenir aux options. OK, jusqu'à ce que LG arrive à 84 ans. Voyons comment cela fonctionne exactement. Je vais placer un tag vidéo sur votre élément vidéo. Cela, je le garderai en HTML5. Plus tard, nous ajouterons l' URL et toutes les choses. Mais pour la largeur, nous le ferons en 100 % de largeur et de hauteur, nous le ferons 350. C'est suffisant pour l'instant. Et dans la deuxième colonne, je mettrai une autre carte. Plus aucune autre carte sur cette page n'est la première carte. Je vais sélectionner ce titre et je le donnerai à l'année. Ce sera une icône en roupie. J'y emmène donc une icône. Double-cliquez sur cette icône, puis recherchez les devises concernées. Quelle que soit la devise que vous voulez, vous pouvez la prendre. Celle-ci sera, disons Phi 99. Les sous-titres seront inclus dans ce cours. Ensuite, nous publierons un ensemble d'informations telles que la durée totale du cours, comme à la demande, sept heures, 15 minutes de vidéos. Ensuite, nous donnerons une autre chose appelée Lifetime Access. Et puis nous aurons celui-ci appelé attachement. Ensuite, nous donnerons également un certificat. Ensuite, nous indiquerons 30 jours de remboursement garanti. Ensuite, nous supprimerons ces deux liens d'ici. Nous ne voulons pas de liens là-bas. Maintenant, à l'intérieur de ce corps, nous allons prendre une rangée deux, ajouter deux choses. Il s'agit de deux boutons. En fait. Je sélectionne cette ligne et je mettrai cette colonne lorsque je dupliquerai cette colonne. Et maintenant, je vais prendre le bouton btn. Il va mettre le bouton, un bouton ici. Je vais dupliquer cela et je le jetterai dans la colonne. Sélectionnez ce premier bouton pour accéder à Apparence. Et comme nous n'avons pas l'option Bloc maintenant, ce que nous devons faire est d'aller à la largeur et de faire 100% de largeur. L'année fait également la largeur 100%. Celui-ci sera donc à la liste de souhaits. Ce bouton sera désormais disponible. Et ajouter à la liste de souhaits. Nous allons en faire aperçu parce que nous ne voulons pas montrer l' attention là-bas. Et la Chine, nous ne le garderons que comme ça. Lorsque nous arrivons à cette taille d'écran. Disons moi. Il va considérablement en dessous de cela. Ce que nous pouvons faire, au lieu de taper deux listes de souhaits, nous pouvons mettre une icône. Oeo va supprimer tous les textes à partir de là. Comme l'effet psychologique ne montrant rien que l'utilisateur ne le lira pas. Mais ça dira, d'accord, c'est une liste de souhaits. Nous allons donc mettre un cœur là-bas avec le contour seulement. Maintenant, cette colonne dans laquelle le cœur est là, nous allons simplement mélanger cela, que maintenant, nous l' apporterons en premier lieu. Et celui-là, nous allons donner un peu plus d'espace. Toutes les tailles d'écran. Peut-être. Voyons le rythme cardiaque, cœur pour lequel nous le prendrons. Celui-ci est petit, et celui-ci est grand. Ce genre de vidéo comme je vous l'ai dit, une fois que nous allons de l'avant, nous allons également prendre cette vidéo. Ok, donc cette zone est terminée. Et pour aller de l'avant, nous devons maintenant prendre de l'accordéon. C'est l'accordéon qui tombe à l'intérieur de ce récipient. C'est donc de l'accordéon. Nous allons placer une marge supérieure sur leur marge supérieure, faisons-le assez bien, je pense. Oui, cet espace est bon. Disons, essayons 33 c'est aussi bien, pas un problème. Et ici, nous saurons ce qui va se passer exactement. Voici le nom de la section. Nom de la section. Et à l'intérieur, nous allons mettre celui-ci. Que dites-vous ? Les titres, la conférence, le nom de la vidéo. Ce que nous devons faire au cours de l'année 0, nous devons prendre la rangée directement à l'intérieur, placer ce texte à l'intérieur d'une rangée. Il se trouve automatiquement à l'intérieur de la colonne. Et nous allons dupliquer cela. Désolé, aucun paragraphe ne dupliquera cette colonne une fois de plus. Cette colonne dans toute la taille de l'écran, nous donnerons peut-être très moins de surface, moins de grilles, en fait, peut-être deux ou quelque chose comme ça. Et ce sera un moment comme 0335, quelque chose comme ça. Et ce texte sera aligné de cette façon. Et nous pouvons aussi l'apporter plus comme si une seule vidéo est assez bonne car assez bonne car toutes les vidéos ne seront pas dans la nôtre. C'est pourquoi c'est très bien. Celui-ci restera semblable. C'est le titre de la vidéo. En fait. Cette ligne sera en boucle aléatoire. Ce que nous pouvons faire, votre facilité, nous mettrons une bordure, une bordure inférieure, solide. Et celui-ci sera le titre de la vidéo. chose comme ça. La ligne complète donnera le bas de la marge. À faire. Je pense que ce sera suffisant ? Dupliquer. Il s'agit d'une deuxième vidéo. C'est déjà là. Vous pouvez jouer avec le, que dites-vous ? Jouez avec l'opacité et tout. Voyons maintenant l'aperçu. Vous pouvez voir que l'aperçu est comme ça et nous ne voulons pas ce genre de chose H2N. Nous allons donc venir dans ce conteneur. Nous sélectionnerons ce conteneur dans le studio bootstrap et désactiverons cette option fluide. Voyons maintenant l'aperçu. Oui, maintenant, ça a l'air plutôt bien. La hauteur n'est pas non plus satisfaite, satisfaisante. Nous allons donc augmenter la hauteur, peut-être 400. Revoyons-le encore une fois. Maintenant, c'est bon, mais de toute façon, nous aurons la vidéo cette fois qu' elle prendra automatiquement la taille. Celui-là que vous pouvez changer, vous pouvez en mettre quelques-uns, que dites-vous ? Opacité ou quelque chose comme ça. Je vais donc supprimer cette ligne, je sélectionnerai cette ligne une fois de plus et en apparence. Nous allons donc descendre dans la zone frontalière et je réduirai la racine d'opacité de 25 %. Cela ressemblera donc à ça. Je pense que c'est bon pour l'instant. On peut y mettre un peu de rembourrage. Peut-être le bas de la marge pour aimer ça. Même chose pour celui-là aussi. La marge inférieure 0 était déjà là, mais elle n'avait pas l'air bien. Je pense que celui-ci a l'air plutôt bien. Nous pouvons réduire l' opacité de cette ligne. Il était de 0,25. On peut peut-être l'amener à dix ans ou quelque chose comme ça. 0,199, quelque chose comme ça. Et puis, vous savez, c'est comme, d'accord, c'est bien. En fait, sachez que vous pouvez faire ce dupliquer, dupliquer, dupliquer, dupliquer, dupliquer plusieurs fois. va de même pour la prochaine section. Il s'agit d'un nom de section. Il s'agit d'un nom de section. Si nous en venons à notre avant-première, vous pouvez voir que c'est comme si c'était assez bon ici. La seule chose comme l' arrière-plan, que nous aimons, vous pouvez voir une couleur blanche ici, c'est que nous avons, c'est parce que le corps de la page est blanc. Nous pouvons donc sélectionner cette balise de corps et venir à Apparence et revenir à l' arrière-plan. C'est blanc. OK. Venez ici et sélectionnez cette couleur et cliquez sur Sélectionner. Et maintenant, voyons à quoi ça ressemble exactement. Oui, c'est parti. Il est là, mais c'est bon. Vous pouvez modifier la couleur et maintenant vous savez comment changer la couleur du corps. Voici les vidéos comme avant que quiconque n' achète votre cours ou quelque chose comme ça, ils peuvent voir les vidéos ici. Il est similaire à Udemy, bonne classe, et à toutes les autres plateformes disponibles sur le marché. De cette façon, nous pouvons concevoir cela et cette page particulière est maintenant réalisée car il s'agit d'un cours unique qui signifie qu'il n'y aura qu'un seul instructeur pour cette plateforme. Nous n'entrerons donc pas beaucoup de détails à ce sujet. C'est tout. Dans ces sections comme à l'intérieur de celle-ci, vous trouverez ce titre vidéo et le moment de la vidéo, la durée totale que vous pourrez voir dans cette zone particulière et toutes ces choses comme nous le ferons. est en train de concevoir cela, mais ce sera comme si vous cliquez sur Acheter maintenant le, quand vous concevrez ce site web et dynamique, Voyons voir. Si possible, nous pouvons faire une chose en utilisant ce design. Nous pouvons faire un cours de plus en PHP que Laura portera, vous pouvez rendre ce site web dynamique. n'en suis pas sûr, mais si c'est le cas, je vais certainement vous en informer. Et si vous cliquez sur maintenant, cette boîte de dialogue de passerelle de paiement de réserve viendra et vous renseignerez toutes ces informations là-bas. Ensuite, vous allez passer à votre page de paiement. Pas exactement la caisse, ma page de cours ou quelque chose comme ça. Mais nous devons également voir à quoi cela ressemble exactement dans la vue mobile parce que nous ne voulons pas le chevaucher et qu'il se chevauche. Sélectionnez l'accordéon. Et où est cette année de l' accordéon ? Je veux y donner de la marge maintenant. marge du bouton et la marge inférieure étaient de 50, je pense que la dernière fois, voyons la pièce 50. Non, il y a encore une zone, donc peut-être que 5555 ne suffit pas. soixante-cinq. Soixante-cinq c'est comme, d'accord. Oui, on peut y travailler. Comme si c'était pas un problème. Pourquoi exactement, cela va sortir de la zone maintenant, faites-le dans cette taille d'écran. Ensuite, la deuxième colonne de chaque ligne concerne la synchronisation. Nous devons sélectionner la deuxième colonne de chaque ligne pour l'horodatage. Alors donnons-en un, je pense qu'il y en avait un. Allons un par un jusqu'à MD. C'est très bien. De quelle taille il est MD, MD, nous avons un problème. Donc LGB donnera cette année, nous en donnerons peut-être 33 c'est bon pour vous. Et vous allez aussi bien, donc trois ans et la première année et reposez-vous. Ce que nous allons faire, nous allons sélectionner tout le texte ici. Sélectionnons tout le texte du paragraphe qui activera ces options. Disons donc par hasard nous allons prendre un film Lauder. Si le titre est trop grand, alors ce que nous devons faire, sélectionnez la première colonne de chaque ligne, qui sera le titre de notre cours. Voici MD. Md, nous allons le donner comme tanière de LG. On peut y arriver. Le moment est maintenant, je pense qu'il s' adapte parfaitement à toutes les tailles d'écran, oui. ce fait, nous sommes en mesure de contrôler la durée de la phrase. Je pense que c'est bon pour l'instant. Il fonctionne correctement sans aucun problème. Mais si vous trouvez des problèmes, alors vous pouvez m'envoyer votre fichier source sur le conducteur actuel au taux yahoo.com. Ou nous pourrons discuter sur la chaîne Discord où nous allons tous nous réunir très bientôt, et je l'espère très bientôt. Si vous manifestez de l' intérêt de vous joindre à cela, cette page est terminée et faisons encore une chose. Par ici. Nous avons une notification de message qui supprimera ce message similaire. Au lieu d'un message. Nous garderons cela comme liste de souhaits. Ce n'est pas inutile. Nous devons prendre son cœur ici. Je prendrai ce cœur et c'est lâché. En fait, je n'ai pas besoin d'un menu déroulant ici. Je vais simplement supprimer celui-ci. Il s'agit également d'une liste déroulante, je pense que oui. C'est aussi déroulant et là aussi je n'ai pas besoin d'un menu déroulant. Cet élément de navigation est le menu déroulant, nous allons donc dupliquer cet élément de navigation. Et tout ce qu'il y a à l'intérieur, qui est une goutte, descend. Je vais supprimer le menu déroulant et je mettrai une icône à l'intérieur. Cette icône arrivera à cette position particulière. Donc, ne vous inquiétez pas. Il suffit de le sélectionner et de taper le cœur ici. Je vais prendre ce cœur. Et maintenant, en sélectionnant cet élément de navigation, accédez à l'option Flexbox et cliquez simplement sur cette zone centrale. On y va. Maintenant, ce n'est pas le centre. Encore une fois, dupliquez ceci. Et maintenant, dans ce domaine, nous allons prendre une vidéo ou peut-être un bouton de lecture, qui sera celui-ci. C'est tout ça. Maintenant, je vais nous emmener deux à la page de la liste de souhaits, et il y aura aussi un lien. Nous allons donc prendre un lien qui prendra ce lien à l'intérieur de celui-ci et supprimera ce texte. Et un autre lien à l'intérieur de l'autre, c' est-à-dire la vidéo. Et déposez cette icône à l'intérieur de ce lien. Sélectionnez ce lien et supprimez le texte. Bon, assez juste. Sélectionnez cette icône, venez à apparaître car nous devons la rendre blanche à nouveau et la rendre blanche. Cette vidéo le rend également blanc. Où elle est, où elle est, où elle est prête à aller. Nous avons celui-là maintenant. Je reste, ok, donc nous avons créé cette liste de souhaits et ce lecteur vidéo. Nous dupliquerons cette page une fois de plus et nous nommerons ceci comme, que signifie cette vidéo, apprendre ou peut-être, désolé, mes cours, mes cours. Et puis nous ne sommes qu'une minute, nous supprimerons mes cours. Ce que nous allons faire au lieu de cela, nous arriverons à notre page d'index. Et je vais dupliquer cette page d' index, double-cliquer. Et je vais le taper comme cours, mes cours, et j'irai dans ma section Cours et je supprimerai celui-ci, cette image, cette Duvall. Donc je n'ai pas besoin, au lieu de tous les cours, je vais simplement taper vos cours et quels que soient les cours achetés qui viendront ici. Je vais donc retirer les quatre et je garderai simplement celui-là. Et je n'ai pas besoin de cette section aussi, donc je vais supprimer cette ligne et div tout à la fois. La couleur du corps, oui, nous pouvons. Nous pouvons changer la couleur du corps car nous savons maintenant comment changer la couleur du corps. Et l'année prochaine, je vais le sélectionner. Je vais changer cette couleur pour la couleur sombre. Il suffit de le capturer. Et ça va. Quelle est la zone de ce corps à droite ? Je pense que je mets ce corps de couleur lorsque la taille de cette page augmentera. Maintenant, ce que nous devons faire c'est comme venir sur la page d'index. Nous, j'ai oublié une chose. Comme cette carte devrait être dans un lien pour que nous puissions la faire passer d' une page à une autre et le déposer, déposer ce lien à l'intérieur de cette colonne et déposer cette carte à l'intérieur. Sélectionnez ce lien et supprimez simplement le texte qui s'y trouve. Pour la PCP. Par exemple, vérifions que tout est dérangé ici, rien de ce que vous pouvez faire à toutes les autres cartes. Il suffit de sélectionner ce lien et d'accéder au panneau Options. Et à partir de la page, nous pouvons accéder à la page Détails du cours à partir de leur notification car il s'agit d'une page visualisée que nous n'avons pas, mais nous pouvons créer en une seconde. En fait, je vais aller sur la page de mon cours et vous devez également faire ce lien, un seul lien. Je vais le déposer dans cette carte et prendre cette carte et la déposer dans ce lien, sélectionner ce lien et supprimer ce texte de l'année. Nous devons aller ailleurs où l'utilisateur peut littéralement cliquer sur les vidéos et les lire. Nous allons donc garder ce champ vide à partir de maintenant. Mais je vais dupliquer cette page MyCourses une fois de plus et je la nommerai comme liste de souhaits. Liste de souhaits. Je vais double-cliquer sur cette page et je vais renommer comme liste de souhaits. Nous pouvons le suivre, nous pouvons suivre un cours différent, une bannière plus de quatre. Nous ne serons pas confus. Au lieu de celui-ci, nous allons le renommer et nous mettrons beaucoup de mon Epson Control P plus L O R et entrez deux fois pour changer ce texte. Encore une fois, nous avons un lien et à partir de cette page, nous pouvons revenir à la page Détails du cours. Pour l'instant, ce point de référence est uniquement pour la référence que je fais un lien vers la même page. Et en fait, c'est dynamique. Il sera sur la même longueur d'onde uniquement. Fermez la page de détails à partir d'ici, l'utilisateur peut également cliquer et il peut accéder au cours. C'est pour acheter le cours. Maintenant, nous avons celui-là comme des tables de liste de souhaits. Quelles sont ces tables ? Est-ce qu'on a besoin de ces tables ? Par hasard ? Aucun utilisateur et nous n'en avons pas besoin. Je supprime ces pages de registre enregistrées. Vous le garderez tel quel. seul fait que ce que nous pouvons faire est que nous pouvons simplement, nous pouvons forcer le changement, peut-être une option. Il fait sombre. Donc, à partir d'ici, on peut aussi le rendre blanc. Oubliez le mot de passe ou vous avez déjà un identifiant de compte. Connectez-vous avec Google Assignments, Facebook. Nous avons besoin de cette page de profil dont nous avons besoin, puis mes quartiers que nous avons créés, puis de vous connecter. Oui, nous avons également besoin d'une journalisation. Donc, vous aussi, nous allons changer cette couleur en blanc. Index. Nous avons créé le mot de passe oublié était déjà là. Vous êtes aussi, nous devons changer la couleur en blanc. Ensuite, les détails du cours que nous avons créés, puis la page blanche que nous avons, mais je ne pense pas. Nous avons besoin de cette page blanche maintenant, en supprimant cette page blanche. Maintenant, nous avons également 404. Dans ce 404, nous n'avons pas besoin de cette navigation latérale et de retour au tableau de bord et ce pied de page, nous n'avons pas besoin de le laisser être lié au pied de page. Oui, c'est ce qu'il y a là. Et celle-ci va changer la couleur par défaut au blanc. Celui-ci va également changer la couleur par défaut au blanc. Alors que ce paragraphe, celui-ci est sombre, nous allons le rendre blanc. Donc 404 est comme un serveur introuvable ou quelque chose comme une page d'erreur, les pages que nous ne voulons pas dans l'utilisateur et nous supprimons cela. Ce que nous voulons. On l' a gardé, on l'a gardé. Et maintenant, je pense que nous avons terminé la plupart des choses et que peu de pages sont restées et que l'édition est également là. Il est donc important de supprimer à nouveau cette barre de navigation de cette zone. Sélectionnez le profil et rendez-le blanc. Nous avons cette zone. Je ne pense pas. Nous avons besoin de cette zone de projet et toutes ces choses ne forment que la signature, signature et tout ce dont nous n'avons pas besoin. Comme tout ce dont nous avons besoin, nous le garderons. Quoi que nous n'ayons pas besoin, nous supprimerons cela. C'est comme ça que nous allons faire dans cette vidéo. Je pense que c'est suffisant. Et dans la vidéo suivante, nous concevrons cette page où elle se trouve, où elle est allée, où elle est allée. Au lieu de détails du cours, après avoir acheté le cours, cette page d'apprentissage, nous le ferons, nous allons concevoir. On se voit dans la vidéo suivante. 43. Finalisation De La Fin Du Projet 3 De LMS: Ok, donc dans cette vidéo, nous verrons la page d'apprentissage. Je vais dupliquer cette page Détails du cours, et je le renommerai comme apprentissage, n'est-ce pas ? Apprentissage orthographique. Et c'est très simple. Je vais simplement supprimer ces éléments inutiles dont nous n'avons pas besoin du titre de la page. Nous allons le rendre petit. Peut-être que H4 va bien. Et cet accordéon, nous allons changer l'accordéon d'année en année. Et je n'ai pas besoin de la carte depuis un an maintenant. Et je vais juste déposer cet accordéon à l'intérieur de cette zone. Nous allons changer cela en quoi, quelle est la taille des huit ? Celui-ci sera plein. Assez juste. Nous devons apporter des modifications comme nous le devons. Nous verrons d'abord ici comment il sort exactement. Je pense que c'est bon d' y aller, pas de problème. Nous allons maintenant passer à l'accordéon. Je vais supprimer ces deux éléments d'ici. Nous pouvons dupliquer cela. Et je vais entrer là-dedans. Et maintenant, à partir de l'année, je dois supprimer tous ces rôles. D'abord. Je veux une zone vide, et maintenant je vais repartir de zéro. Je prendrai une rangée une fois de plus. On y va. Nous avons une rangée là-bas. Ensuite, je prendrai une colonne, je vais déposer une colonne à l'intérieur, et cette colonne sera un titre. Et nous avons l'option, nous devrions avoir la possibilité de changer la vidéo. Je vais donc prendre cela à l'intérieur d'un lien. Et ce lien, je vais reprendre un paragraphe et déposer ce paragraphe à l'intérieur de ce lien. Je vais supprimer cette zone de liaison. Et ce paragraphe, je vais juste le rendre blanc. Ce sera un nom de vidéo, donc peut-être qu'il peut s'agir d'un nom de vidéo long. Donc j'emmène Epsilon là-bas, juste comme ceci et ceci. Donc, une ligne dupliquant cette fois de plus et faisant un temps comme 0335. Ok, donc cette colonne est, nous sommes en taille d'écran LED. Cette colonne sera composée de huit. Et celui-là, cette colonne sera destinée à être alignée sur ce côté, c'est correct. Dans d'autres tailles d'écran aussi, il a l'air plutôt bien. Et dans cette taille d'écran, il arrive l'un après l'autre. Nous devons donc choisir celui-ci. Maintenant. Quelle est la taille de l'écran MD à partir de l'année ? Nous allons commencer à le faire. On peut peut-être le considérer comme huit ou dix, c'est aussi très bien. Dix et ensuite, nous pourrons en faire deux ici. Celle-ci est également bonne. Celui-ci, ou celui-ci, nous avons un problème sur l'écran mobile. Dans le mobile, nous devons jusqu'à l'année, nous pouvons atteindre dix ans. Mais dans le mobile, nous devons donner un peu plus d' espace à la minuterie. Peut-être que trois, c'est bien. Oui, trois, c'est bien. Nous en avons trois, alors nous aurons besoin de neuf sur taille de votre écran est bonne. Dans la taille de l'écran est bonne. Cette taille d'écran est bonne. La taille de l'écran est bonne. La taille de l'écran est bonne. D'accord ? Donc, toutes les tailles d'écran sont bonnes, assez bonnes. Alors, nous devons faire, vous êtes comme, quelle est la dernière section ? Celui-ci, cette colonne n'est que la dernière section. Nous devons donc mettre le, que dites-vous ? Marge inférieure de 65 pixels afin qu'elle ne se chevauche pas sur la barre de navigation inférieure de la barre navigation, la section 1 est là. Maintenant, je viens à l'accordéon. allons dupliquer ces sections plusieurs fois pour que nous puissions voir exactement à quoi elle ressemblera lorsque nous avons également plusieurs sections en mode mobile. Vous pouvez donc voir que nous avons une bonne marge ici et nous avons beaucoup de sections ici. La vidéo sera dans cette zone. Ce que nous pouvons faire, nous avons de la hauteur, donc nous supprimerons cette hauteur et la laisserons à la hauteur par défaut car je pense que nous devons supprimer la hauteur de cette page de détails. De plus, lorsque la vidéo viendra, elle équilibrera automatiquement sa hauteur. La page d'apprentissage est également terminée. Voyons l'aperçu. Voici à quoi ressemblera la page d'apprentissage. Je pense que cette section et ce domaine particulier sont terminés. Laissez-moi donc voir dans mon livre si j'ai manqué quelque chose, je pense que cette zone est terminée. Cet accordéon et moins d'animation l'aiment par défaut car l'animation est là. Nous avons fait tellement de bien jusqu'à présent. Et la page de la liste de souhaits est également liée. Je pense qu'il n'est pas lié à peut-être. Allons dans la barre de navigation et commençons à lier la page. Wishlist deux sera la page Liste de souhaits est la liste de souhaits et c' est la page d'apprentissage. Cela ira donc à mon apprentissage, pas à mon apprentissage, à mes cours de mes cours. Voici mes cours de votre part. Si quelqu'un clique dessus, il se rendra sur la page d'apprentissage. C'est ainsi que se déroulera le flux. Vérifions donc le flux une fois dans l'aperçu en direct de l'aperçu, la page se rafraîchir. Ok, donc nous avons cette page ici. Si je clique dessus, je vais me rendre la page Détails du cours où tous les détails de la page seront présents. Et oui, c'est plutôt bien. Ensuite, à partir de là, je peux aller à liste de souhaits où ma liste de souhaits est productive. Là. C'est le produit de ma liste de souhaits. Et si je clique à nouveau sur le produit de la liste de souhaits, cela m'amènera uniquement à cette page. Et si je vais sur ma page d'apprentissage, c'est donc mes cours que j'ai achetés. Et si je clique ici, il m'amènera à la page d'apprentissage. Bon, jusqu'à présent, c'est bon. Je pense que nous avons terminé notre front-end un peu ici et là, comme relier cette zone particulière. Et jusqu'à présent, c'est bon. Je pense donc que nous avons calculé notre front-end. On se voit dans la vidéo suivante. 44. Ziara Commerce - Comment créer un compte de reflex: Bonjour, tout le monde. Dans cette vidéo, nous allons donc apprendre à configurer un site Web de commerce électronique dans studio Bootstrap, de sorte que nous devons commencer par studio Bootstrap et créer un nouveau design Nous allons donc nommer ce design chez Zara sélectionner un modèle vierge et cliquer sur Créer Voici donc notre projet Zara Blank. Après cela, nous devons accéder aux paramètres et faire défiler la page jusqu'à Commerce électronique. Donc, une fois que vous avez cliqué sur Commerce électronique, nous devons cliquer sur Gérer le projet. Ainsi, une fois que vous aurez cliqué sur Gérer le projet, vous devrez procéder au reversement. Je suis donc déjà connecté à Reflow. Si ce n'est pas le cas, vous devez créer un compte de redistribution. Ainsi, une fois le compte de recirculation créé, vous devez cliquer ici en tant que nouveau projet J'ai déjà deux projets de démonstration pour moi. Vous ne verrez pas ces deux projets de démonstration, mais vous verrez un nouveau projet. Vous cliquez donc sur Nouveau projet et nommez ce projet ou nommez cette entreprise Zara Donc, une fois que vous avez nommé l' entreprise, cliquez sur Suivant. Il vous demandera le pays. Je vais donc cliquer sur l'option Je vais rechercher les détails de la facture en Inde si vous avez des options de détail de facture spécifiques ici, je vais donc taper Zara limited Je peux taper mon adresse comme Bangalore Airport Road, et je vais taper ma ville comme Bangalore, l'État comme Karnataka, l'État comme Karnataka Ce ne sont que des données de Dummi. Donc, une fois que j'aurai terminé, je cliquerai sur Suivant, puis il me demandera de choisir le plan. Comme il s'agit d'une démo, nous opterons pour un plan gratuit. Je vais cliquer sur Choisir ici, puis sur Suivant. Je suis donc là dans mon compte de reflux. Donc, si je vais dans les paramètres généraux, mon compte de redistribution est créé avec succès Vous pouvez maintenant voir l'identifiant de projet de mon compte de recirculation. C'est le nom de mon site Web ou le nom du projet Zara. Changeons la devise en INR, qui est la roupie indienne Les mesures seront en kilogrammes et en centimètres. Je vais sélectionner mon fuseau horaire ici. Je veux garder l' heure du matin et du soir. Projet lié, nous le ferons plus tard. Donc, une fois que c'est fait, il suffit de cliquer sur Enregistrer le projet. De cette façon, nous avons terminé la configuration de notre compte de reflux en utilisant notre nom de marque Zara Dans la prochaine vidéo, nous verrons donc exactement comment connecter notre projet au studio Bootstrap 45. Ziara Commerce - Comment relier Reflow à Bootstrap Studio: Génial Alors, bon retour. Dans cette vidéo, nous verrons comment configurer notre projet de reflow sur Bootstrap Studio. Dans Bootstrap Studio, nous allons donc cliquer sur les paramètres faire défiler l'écran vers le bas et cliquer sur Commerce électronique. Dans ce projet sélectionné, nous verrons notre projet Zara apparaître ici maintenant L'outil de refusion sera Virgin Two. Et le mode test actif ne le sera jamais. Une fois cela fait, nous cliquons sur Enregistrer, et c'est tout. Notre projet de reflow appelé Ziara est désormais connecté à notre studio bootstrap Dans la prochaine vidéo, nous allons donc commencer à ajouter des produits et d'autres informations dans notre compte Real Flow. 46. Ziara Commerce - Comment créer et importer des produits dans reflow: Génial. Dans cette vidéo, commençons donc à créer les produits et les autres informations. Donc, avant cela, il vous suffit de cliquer sur la description de n'importe quelle vidéo de cette playlist, et vous trouverez ici le lien vers les ressources. suffit de cliquer sur Resource Link Il vous suffit de cliquer sur Resource Link pour accéder à ce dossier Digi Box, où vous pourrez télécharger le fichier zip Donc, une fois votre projet téléchargé, venez ici et développez ce projet. Dans ce projet, vous trouverez toutes les ressources nécessaires à ce projet. Commençons donc à créer le produit sur notre page de refusion. Je vais donc accéder rapidement à notre compte de redistribution et je cliquerai sur le produit ici Mais avant de créer les produits, nous devons créer les catégories. Nous allons donc passer aux catégories et je vais cliquer sur la première catégorie, et nous allons prendre l' aide de notre catégorie PDP Nous avons donc Western Ware pour femmes. Nous allons donc copier ce nom et je vais le coller ici. Le même nom viendra ici. Ensuite, si vous souhaitez ajouter une description, description sera là ainsi que la catégorie parent. Il s'agit donc d'une catégorie parent, nous ne voulons donc pas ajouter de catégorie parent ici. Cliquez donc sur Enregistrer. Ma première catégorie est donc prête à être utilisée, puis nous pouvons commencer à y ajouter les sous-catégories Je vais donc copier ce nom. Et je vais simplement l' ajouter à votre. Et pour l'instant, cette catégorie parentale sera celle des vêtements occidentaux pour femmes. Ensuite, nous avons les robes. Ajoutons donc les robes des vêtements occidentaux pour femmes, des jeans aux vêtements occidentaux pour femmes, encore une fois, des costumes de jeu, des vêtements occidentaux pour femmes et des t-shirts. Ce qui sera à nouveau disponible dans les vêtements occidentaux pour femmes. Je vais créer ceci. catégorie de vêtements occidentaux pour femmes est donc créée avec les sous-catégories Passons maintenant à l'Inde et à la mode. Je vais donc créer une nouvelle catégorie, Inde et la mode, mais je n' en garderai aucune Elle sera donc créée en tant que catégorie parent, et à l'intérieur de celle-ci, nous avons deux catégories différentes que nous devons créer ici. Ce sera en indien, et ce sera le second qui sera à nouveau en indien. OK. Nous avons donc créé nos sous-catégories et catégories Nous pouvons maintenant ajouter nos produits. Je vais donc cliquer sur les produits et sur tous les produits. Ici, nous avons la possibilité d'importer et d'exporter la liste de produits que je vous ai donnée. Voici la liste des produits que vous pouvez utiliser. Mais concernant un produit, je vais vous montrer comment vous pouvez ajouter ce produit à votre liste de produits, puis je téléchargerai également cette liste de produits sur mon compte de reflux Nous allons cliquer sur Ajouter un produit. Ensuite, nous devons ajouter le produit physique et le produit physique. Cette option n'est disponible qu'en version gratuite. Le produit numérique et la carte-cadeau sont disponibles sur le modèle d'abonnement. Nous allons donc cliquer sur le produit physique ici, et ici nous devons ajouter les détails du produit. Revenons donc à notre page de téléchargement. Nous irons au PDP, nous irons au Women's. Je vais ajouter un t-shirt. Nous allons donc simplement prendre le nom, t-shirt Zara. Le nom viendra tout seul, et il faudra ajouter une description. Nous y voilà. Nous avons donc la description. Ensuite, nous avons des figurants. Il s'agit donc d'un badge promotionnel. Donc, comme nous avons un t-shirt de la collection spéciale Zara, nous pouvons simplement le nommer collection spéciale Cela viendra sous forme d'étiquette là-bas, donc une collection spéciale sous forme d'étiquette. Ensuite, nous devons ajouter les images ici. Nous allons donc cliquer sur ajouter et comme il s'agit d'un t-shirt, nous verrons quel t-shirt nous devons télécharger , celui qui a l'air cool. Cela figure déjà dans la liste des produits, je vais donc l'ignorer. J'utiliserai produit 25 et je cliquerai sur Télécharger. Peut également ajouter des vidéos et plusieurs images. Maintenant, fixons le prix de ce produit. Donc, pour cela, le prix du produit se situera peut-être autour de 1 500. Et cette taxe est facturée sur le produit. Je peux juste l'enlever . Ça va. Aucune taxe n'est requise pour ce produit. Produit à vendre, nous pouvons allumer et nous pouvons donner le prix d'origine. Supposons donc que nous donnions le prix d'origine car 2999 est le prix d'origine, et nous le vendons à mille 500 dollars Et nous devons également mentionner période de vente pendant laquelle nous devons sélectionner la date. La vente commence donc à partir du 2 de ce mois et se poursuit, disons, jusqu' au 31 décembre. C'est donc dans cette fourchette que s'appliquera cette offre. Après cela, l' offre diminuera. Je vais cliquer sur Appliquer. Alors la disponibilité, oui. Ce produit est disponible en boutique. Le magasin est notre véritable magasin de flux, et nous devons définir la quantité minimale d'achat. quantité minimale d'achat pour ce produit sera donc une et la quantité maximale de cinq. Quel est le poids de ce produit en kg ? Je vais le peser comme 0,300 kg. Cela signifie 300 grammes. délai de livraison estimé sera environ sept jours et le mode de livraison disponible sera complet. Ensuite, voici notre catégorie, puis nous passons à la catégorie T-shirt et nous allons également vérifier cette catégorie Western Ware pour femmes car le t-shirt fait partie de la catégorie Western Ware pour femmes Cette catégorie est terminée. Ensuite, l'inventaire, le nombre d'inventaires dont nous disposons est le SKU de l' unité de gestion des stocks. Quel est donc le SKU de ce produit ? Disons que je vais nommer ce produit. Le SKU commence par Zara, puis par les vêtements occidentaux et les t-shirts pour femmes Et peut-être que je peux séparer ce nom par un tiret et un chiffre. Je dois donc ajouter un chiffre pour cela. Je vais donc simplement ajouter un nombre aléatoire comme 98, cinq, six, 21. Il s'agit du numéro de référence de ce produit spécifique. Alors le système d'inventaire est simple. Vous pouvez également cliquer sur Avancer. L'avance signifie la quantité de stock disponible. Donc, quantité en stock, si vous optez pour la simplicité, ce produit ne sera jamais en rupture de stock. Si vous y allez à l'avance, vous devez indiquer la quantité de produits que vous avez dans votre inventaire. Donnons-en donc des milliers en inventaire. Afficher la quantité sur la page du produit. Ainsi, l'utilisateur peut voir combien de produits il reste dans notre inventaire. Variétés, si nous avons de la variété, nous devons y ajouter de la variété. Disons donc que nous avons la taille, la couleur, etc. Donc, plus précisément, nous aurons la taille et je cliquerai sur ajouter de la variété. La première taille sera donc petite. Le prix, le prix d'origine et le poids seront les mêmes. Si nous voulons changer, nous pouvons également changer cela. Ensuite, une autre variété sera moyenne, puis grande, puis très grande, puis très grande. Les SKU correspondants peuvent être ajoutés. Prenons donc ce SKU à partir d'ici, puis revenons en arrière et cliquons sur Modifier. SKU pour ce produit sera S. Comme il s'agit d'un petit numéro, je vais coller ce M Je vais coller ce L. Donc , encore une fois, c'est aléatoire. Je ne sais pas si c'est une bonne façon de donner une excuse ou non. C'est juste pour cette démonstration, rien d'autre. Collez très gros. Combien de quantités avons-nous en stock pour cela ? Disons 100 000 mille mille mille et mille. Je vais cliquer sur confirmer. Le prix des variétés est le même, c'est pourquoi il n'apparaît pas. Mais si vous souhaitez modifier le prix, nous le pouvons. Disons que 14 double neuf est le prix pour les petits ou peut-être que 13 double neuf est le prix pour les petits. Et le format moyen-grand correspond à 14 double neuf et 14 double neuf, et le double Excel correspond à 15 double neuf. C'est donc le prix auquel il sera vendu, puis nous devons également mentionner le prix d'origine. Le poids est correct, et nous allons cliquer sur Confirmer. C'est ainsi que nous pouvons créer nos variétés. Ensuite, nous avons notre personnalisation. Si nous avons une recommandation de personnalisation, nous pouvons également l'ajouter Ajouter une option. Si vous souhaitez le personnaliser ajoutez votre nom sur le t-shirt. Les instructions nécessitaient votre nom. Ce sera une case à cocher ou peut-être une saisie de texte pour y faire apparaître le nom La longueur minimale requise est 1 et la longueur maximale requise est de 277. Ce n'est pas obligatoire, et s' ils optent pour cette option, ils devront payer 200 roupies supplémentaires. Et si vous souhaitez créer une autre option, vous pouvez sélectionner l'option Ajouter puis cliquer sur Confirmer, trier par numéro un et cliquer sur Enregistrer. Et nous y voilà. Nous avons créé avec succès notre premier produit. Et maintenant, ce que nous pouvons faire, importer nos produits immédiatement. Je vais donc simplement cliquer sur Importer. Je vais cliquer sur Choisir Wile, je vais simplement sélectionner ce produit, puis je vais cliquer sur Télécharger Le produit est sélectionné. En cas de double identifiant, mettez à jour le produit existant. S'il y a un double identifiant et qu'il n'y en a peut-être rien, je cliquerai simplement sur Importer. Le fichier CSV a été chargé avec succès. Fermez-les et actualisez-les. Vous pouvez voir les produits en cours d'importation. Vous pouvez maintenant voir l' importation du produit en cours. Donc, l'un des 24 produits. Ainsi, au fur et à mesure que vous vous rafraîchissez, vous pouvez voir que les produits sont ajoutés. Nous avons une bonne quantité de produits avec nous, et c'est parti. Tous les produits ont été ajoutés avec succès dans notre compte. Dans cette vidéo, nous avons appris comment créer un produit et comment l'importer depuis That's all for this video. Et dans la prochaine vidéo, nous allons commencer à concevoir le site Web dans le studio Bootstrap. 47. Ziara Commerce - Assign Catégorie pour les produits: Avant de concevoir le site Web dans le studio Bootstrap, une chose que nous devons faire très rapidement est d'attribuer les catégories au produit Cette catégorie est donc une collection. Je vais cliquer dessus et je vais simplement passer à la catégorie, et cette catégorie ressemblera à une catégorie indienne. Je vais juste commercialiser la mode indienne pour la mode indienne et la mode ici. Cette catégorie est donc terminée, rapidement, je vais créer la catégorie des robes. Celui-ci porte également une robe. Je vais juste décocher cette case Ces deux, trois et quatre se glissent sous des robes. Alors habillez-vous en western féminin. C'est fini avec ça. Ensuite, nous avons Sari un, deux, trois, quatre, je pense, oui, quatre saris que nous avons Nous allons cliquer sur la catégorie et sélectionner simplement des saris à la mode indienne. Génial. Gardez simplement un œil sur ce que nous avons ajouté. Celui-ci, je pense qu'il sera porté dans des combinaisons de jeu et confirmé. OK, c'est un t-shirt. Celui-ci entre donc dans la catégorie des t-shirts. Un, deux, trois, quatre. Ces quatre combinaisons seront peut-être mises en place dans la catégorie des combinaisons de jeu. Oui, donnons-le là. Oups, je n'ai pas cliqué sur cette catégorie. Le western féminin est donc la principale catégorie , que nous devons choisir. Ce sont des jeans. Je vais donc simplement sélectionner les quatre et cliquer sur Jeans, et c'est parti. Passons maintenant à la deuxième page. OK, alors maintenant nous allons passer à celui-ci. Ce sont euh, des dieux et confirment Sari Ce sera à Sari. Et cliquez sur Confirmer. Je pense que nous n'avons rien ajouté dans cette catégorie. OK, il faut donc voir. OK, c'est ce que c'est une secte. Nous allons donc réinitialiser cela de ceci à ceci. Confirmez. Et nous y voilà. Nous avons donc ajouté tous les produits dans leurs catégories spécifiques. OK, cool. C'est assez juste. Commençons par Bootstrap Studio dans la vidéo suivante. C'est 48. Ziara Commerce - Design NavBar et Slider: Génial Notre projet de studio bootstrap appelé Zara était donc déjà prêt avant que nous ne commencions à créer le compte Zflow Désolé, refoulez le compte. Barre NAF, oui. Et nous y ajouterons notre image de marque. Je vais donc simplement taper une image ici apporter cette image et supprimer ce texte. Nous n'avons pas besoin de ce texte. Maison. Donc, le premier article sera à la maison. Le deuxième élément sera constitué de nos deux catégories ici. Je vais donc simplement le nommer indien et occidental. Donc, indien, indien et occidental, c'est à classer ce qui nous intéresse. Et puis créons Let's Go to Ecommerce View card arrivera, et le bouton de connexion viendra juste après. Cliquons donc sur le bouton Se connecter et alignons jusqu'à la fin et sur le bouton de la carte, puis encore une fois, alignons-le sur la fin. Cliquons sur Navbar et désactivons l'option fluide, et nous allons rapidement avoir un aperçu de notre site Web Voici donc à quoi ressemblera le site Web, et nous allons changer l'apparence au fur et à mesure. Je vais prendre un bouton rapidement, le garder ici et prendre le bouton situé dans cette option d'affichage du panier, et je vais y mettre l'espace. Et je vais le supprimer, oups. Et oui, ce bouton est désormais un bouton en forme de carte. Nous pouvons également lui donner une icône. Double-cliquez, sélectionnez les icônes en forme de ligne et l'icône en forme de carte. Accédez à l'apparence , augmentez simplement la taille de la police et supprimez le texte. Donc, OK. Donc ce que j'ai fait, c'est que j'ai juste pris la barre de navigation et j'ai créé une valeur par défaut. Cet élément de navigation est devenu une valeur par défaut, et la carte que j'ai de nouveau créée une valeur par défaut. Mais le bouton de connexion, je l'ai gardé à la fin. Commençons par importer les images selon les besoins. Nous allons d'abord prendre le logo. Je vais juste importer le logo, et voilà, double-cliquez. Nous avons notre logo ici et cliquez sur OK car il est trop grand. Il suffit donc de mentionner la largeur. Je n'en mentionnerai que 120. Euh, venez voir l'aperçu et voyez que nous avons défini notre logo. OK, donc pour en revenir au studio bootstrap, ce logo sera redirigé uniquement vers la page d'index, et la page d'accueil sera également redirigée vers la page d'index Nous allons sélectionner la barre de navigation ici et j' activerai le statut Active Smart Active Quelle que soit la page active, elle sera automatiquement mise en évidence. Changeons ce bouton en lien, et pour l'instant, je vais juste mettre la clé de hachage ici Et si vous voulez changer de style, n'hésitez pas à changer de style. OK, prochaine étape, nous allons créer un slider. Ajoutons Carusal et je suis là avec le cousal. Importons les images de Corusal page de destination, le héros, le bureau et ces trois pages de héros sont là. Nous avons donc les images ici. Je vais donc simplement double-cliquer dessus, prendre celui du héros, cliquer sur OK, puis sur Suivant. Double-cliquez. Nous avons ajouté nos sliders ici. Ensuite, nous allons commencer à créer le reste de la page de destination, mais nous le ferons dans la prochaine vidéo. Regardez donc les gens dans la vidéo suivante. 49. Ziara Commerce - Fixer le button flottant dans la NavBar: Avant d'aller de l'avant, nous allons ici sur le bouton At tocad, qui se trouve juste au centre de la barre de navigation Nous ne voulons pas ce bouton ici. Nous voulons donc le bouton à droite de la barre de navigation. La raison étant qu'il se trouve au centre, c'est uniquement parce que si vous voyez le bouton sinusoïdal sortant , en particulier, le bouton sinus entrant est aligné à la fin. Donc, si vous passez simplement de la fin à la valeur par défaut, le bouton Atto Cart se trouvera à proximité du bouton de connexion Alors maintenant, nous avons juste besoin d'un espacement. OK, je dois sélectionner le bouton Afficher la carte et accéder au cours, et ici je dois ajouter une limite de marge pour le cours. C'est ainsi que nous résolvons le problème du bouton AT Cart flottant juste au centre de la NAFBA Dans la prochaine vidéo, nous allons commencer à créer les pages de la catégorie dédiée, et nous continuerons à travailler sur le site Web. Alors rendez-vous dans la prochaine vidéo. 50. Ziara Commerce - Finaliser la page d'accueil: Génial. Commençons donc à concevoir le site Web. Il s'agit donc d'une page d'accueil, et dans la page d'accueil, nous avons besoin de presque tous les produits qui s'y trouvent, mais avec un design spécifique également. Nous allons donc créer rapidement un conteneur. Je vais prendre juste en dessous du carrousel. Et dans ce conteneur, je vais prendre une rangée. Et je vais ajouter une colonne à l'intérieur. Une fois cette colonne ajoutée, je vais prendre un composant d'image et après l'image, je vais prendre un paragraphe. Je vais également prendre un lien, et je vais déposer à peu près l'image dans cette colonne, et je déplacerai l'image et le paragraphe à l'intérieur de ce lien. Chaque fois que l'utilisateur clique sur l' image ou le texte, il redirigé vers une page spécifique où nous voulons qu'il soit redirigé. Avec cela, nous allons sélectionner la balise de lien ici, accéder rapidement à notre CSS et n'ajouter aucune décoration de texte. De cette façon, le soulignement disparaîtra et nous devrons également changer de couleur. Donc, en sélectionnant le lien, revenez à l'option et faites simplement défiler la page vers le bas pour obtenir la couleur et l'assombrir. Et comme cela doit être aligné au centre, je vais donc sélectionner la colonne, je vais passer à l'option d'alignement et cliquer simplement sur l'alignement central. J'ai besoin de trois colonnes ici avec une image et un paragraphe intégrés dedans. Je vais donc dupliquer cette colonne deux fois de plus, et c'est parti. Nous y avons ajouté trois colonnes. Après cela, je vais commencer à ajouter les images à l'intérieur. Pour cela, nous devons importer l'image. Accédez donc rapidement à notre dossier de ressources. Accédez rapidement au dossier des ressources et trouvez les trois PDP dont nous avons besoin Nous allons passer à Cords et je vais sélectionner cette image et je vais simplement l'importer dans Bootstrap Studio Je vais venir ici. Je vais passer à la catégorie vestimentaire. Je choisirai n'importe quelle robe. Je vais l'importer ici et je vais entrer dans la catégorie Jeans et je vais simplement importer l'image Jeans. Donc dans le premier, je vais rapidement ajouter cette image. Dans le second, j'ajouterai rapidement la robe, et dans le troisième, j' ajouterai rapidement le jean. J'ai donc besoin de toutes ces trois images sous une forme réactive. Nous allons donc sélectionner les trois images, et je vais simplement cliquer sur Responsive ici et c'est parti. Je vais changer le texte du paragraphe en Je vais prendre le nom et je vais simplement le coller ici. Ensuite, nous avons des robes, puis des jeans, et c'est parti. Donc, ici, ce que nous devons faire exactement maintenant, c'est sélectionner ce lien et rediriger la page vers la page Cords. Je vais sélectionner le lien sur les robes. Ce lien appartient donc aux robes, et je vais sélectionner aux robes, et ce lien appartient aux jeans. Je vais donc simplement cliquer sur Jeans pour que chaque fois que l' utilisateur clique dessus, il soit redirigé vers cette page spécifique. Juste pour vérifier très rapidement, nous allons en faire un aperçu. Donc, si je viens ici et que je clique dessus, cela m'amène à la page Cords. Je vais revenir et cliquer sur ces robes. Cela arrive donc sur la page des commodes. Et quand je clique sur Jeans, cela s'affiche sur la page Jeans. Je pense que la barre de navigation et le pied de page ne sont pas copiés sur la page Cod, nous allons donc revenir rapidement à la page d'index Sélectionnez la barre de navigation et le pied de page, copiez avec le bouton droit de la souris, copiez-en deux, sélectionnez-en plusieurs à nouveau et cliquez simplement sur Cards only single, puis sur le lien et copiez Ainsi, la barre de navigation et le pied de page se trouvent également sur la page de la carte Sélectionnez donc le contenant et donnez rapidement une marge supérieure à quatre. Nous allons simplement maintenir le haut de la marge. Nous allons simplement conserver quatre comme chiffre standard ici. Nous pouvons rapidement ajouter un texte à propos de la ligne dans le conteneur, et ce sera une balise d'en-tête. Je vais rapidement ajouter une ligne ici, désolé, pas ici. Nous supprimerons donc cette colonne indésirable, et nous la nommerons au moins ate et modifierons rapidement l'alignement du texte au centre. Ensuite, de la même manière, nous allons créer une colonne supplémentaire, mais nous la nommerons ZiaranW Et ici, juste pour apporter une simple modification, nous allons ajouter une colonne supplémentaire ici pour qu'il y en ait quatre. Et nous allons également modifier légèrement la structure ici. Donc, juste avant le paragraphe, nous allons ajouter un titre. Et juste après le paragraphe, nous allons créer un autre paragraphe. Il s'agira d'un CTA appelé Shop Now. Génial. Et nous allons le répéter partout. Nous allons donc simplement le copier et le déposer ici. Nous allons prendre une copie une fois de plus, déposer ici, la prendre une fois de plus et la déposer ici. Il suffit de le prendre rapidement et de le déplacer un cran au-dessus ou faire rapidement et de le déplacer d'un cran vers le bas. Prenez la boutique maintenant, descendez d'un pas, faites la boutique maintenant et descendez d'un pas. Génial. Donc, pour Shop Now, en particulier, nous avons besoin d'un soulignement. Double-cliquez donc sur Acheter maintenant et activez l'option de soulignement dans cette zone. Cool. Donc oui, il faut prendre ça au centre. Ce paragraphe sera donc désormais une copie de sous-titre. Alors, faites de votre mieux pour ajouter un sous-titre ici Et maintenant, nous devons ajouter les images qui sont les plus susceptibles d'être des nouveautés. Je vais donc prendre un Sari et j'irai à Weston. Je vais prendre un t-shirt. Alors prenons un beau t-shirt, peut-être celui-ci, une combinaison de jeu, peut-être celui-ci. Et il nous faut encore une robe. Prends vite celui-ci. Nous nommerons cette zone comme suit : costume de jeu, t-shirt, robes et désolé. Génial. Alors double-cliquez et sélectionnez la combinaison de jeu. Cliquez sur OK, passez aux jeans. Non, désolé, allez sur T-shirt et sélectionnez le t-shirt. Sélectionnez la robe et enfin, le sari Allons-y rapidement et modifions-le la redirection. Je vais le sélectionner et cela ira à Playsuit maintenant. Voici donc le lien vers ma combinaison de jeu. Ce lien sera un t-shirt. Le troisième lien sera celui des robes, et le quatrième sera celui de Sis. Génial. Il suffit de l'enregistrer rapidement et de prendre un aperçu. Voici à quoi ressemble notre page d'accueil ou notre page d'accueil. Voici nos bannières de héros. Nous avons trois bannières de héros. Vous pouvez en ajouter autant que vous le pouvez. Ensuite, nous avons sélectionné pour vous, et nous avons également des liens pour cela et Z est un nouvel arrivant, et nous avons des liens pour cela également Et puis nous avons un pied de page rapide. Génial. La page d'accueil ou la page de destination est donc belle, et nous pouvons aller de l'avant maintenant. Dans la vidéo suivante, nous allons commencer à ajouter les produits dynamiques dans toutes les pages respectives nommées par catégorie. Alors regardez dans la vidéo suivante, les gens d'accord. 51. Ziara Commerce - Tirer les produits de manière dynamique: Dans cette vidéo, commençons à récupérer les produits dynamiques sur les pages de catégories concernées Il s'agit d'une page de cordon. Nous allons donc rapidement passer au commerce électronique, passer à la liste des produits, prendre cette liste de produits et la déposer ici. Vous voyez donc que les produits apparaissent maintenant un par un. Nous allons rapidement arriver ici, en prenant marge supérieure et quatre comme chiffre standard. Et nous y voilà. Nous ne voulons donc pas que les produits apparaissent les uns après les autres. Nous allons donc rapidement passer au panneau des options, et dans la mise en page, au lieu de cela, nous allons simplement créer des cartes, et c'est parti. Nous avons donc maintenant tous les produits au format carte. Nous ajouterons rapidement un conteneur et nous déplacerons cette liste de produits à l'intérieur du conteneur. Donc, en démontant le contenant, en prenant cette liste de produits et en l'insérant à l'intérieur du contenant, nous avons donc un avantage là-bas. Faisons donc un rapide aperçu. Oui Les produits arrivent donc dans le bon sens. Nous avons également le bouton Ajouter au chat ici. Génial. À l'avenir, ce que nous voulons, c'est que nous ne voulons pas que tous les produits soient répertoriés sur cette page car cette page est spécifiquement créée pour la catégorie Cordes uniquement. Donc, ce que je vais faire, c'est prendre un titre ici, et je vais l'ajouter à l'intérieur de ce conteneur, et je renommerai cette page en Cods. Je vais sélectionner cette liste de produits maintenant Je vais rapidement faire défiler la page vers le bas pour accéder à cette option de source de données À partir de là, je vais simplement sélectionner la section Cordes pour femmes et je cliquerai sur Choisir. De cette façon, seuls les produits Cords présents dans notre compte de refusion apparaîtront ici Faites-en rapidement un aperçu, c'est parti. Nous n'avons que trois produits dans la section Cordes et les trois produits apparaissent sur cette page spécifique. l'avenir, nous passerons rapidement aux robes et de même, nous prendrons un conteneur, nous prendrons un titre et nous prendrons la liste des produits. Changez la mise en page, du moins aux cartes, faites défiler le bas et changez la catégorie de tous les produits aux robes uniquement, puis cliquez sur Choisir et changez le nom de la rubrique « robes ». Faites-en rapidement un aperçu, et c'est parti. Nous avons donc l' aperçu de cette page, qui affiche toutes les robes. Donc, de la même manière, nous devons le faire pour toutes les pages de catégories répertoriées ici. Donc, avant de commencer à ajouter la liste des produits sur d'autres pages également, un petit réglage rapide que nous devons faire dans la section des liens du produit est de spécifier une fois que l'utilisateur a cliqué sur ce produit , à quel faire dans la section des liens du produit est de spécifier une fois que l'utilisateur a cliqué sur ce produit , à fois que l'utilisateur a cliqué sur ce produit moment il sera redirigé vers une page où la page détaillée du produit apparaîtra. Nous appelons cette page car la page PDP signifie page détaillée du produit. Nous devons tracer la voie à suivre pour y parvenir. façon exacte dont nous devons indiquer le chemin donnera d' abord une barre oblique, puis un nom la page où il doit être redirigé C'est du PDP Dot HTML. Ensuite, nous ajouterons un point d' interrogation ici, puis nous ajouterons que le produit est égal à curly bracket, open, ID, curly bracket, close, et appuierons sur Ainsi, nous définissons que chaque fois qu' un utilisateur clique sur ce produit, pour afficher la page détaillée du produit, le site Web redirige l'utilisateur vers la page PDP et affiche les détails qui s'y trouvent Nous devons accéder rapidement à la page PDP et ajouter le composant du produit ici Avant cela, nous allons simplement ajouter rapidement un conteneur et ajouter rapidement le composant du produit à l'intérieur de ce conteneur. Je vais enregistrer ce projet. Je vais passer aux robes, et je vais aller à l'avant-première. Je vais cliquer sur n'importe quelle image, et c'est tout. Nous y voilà. Ce produit arrive donc maintenant de manière dynamique. revenir en arrière, cliquez sur ce produit. Ce produit arrive bientôt. Donc, si vous cliquez sur cette image, l'image apparaît comme ceci. Intéressant, non ? Copiez ce paramètre, accédez à la page des voitures, collez-le ici et appuyez sur Entrée. Rapidement, ce que nous allons faire, c'est le copier dans toutes les autres pages répertoriées dans les catégories. Je vais cliquer avec le bouton droit sur copier-coller, en copier deux, j'arriverai à plusieurs, et je cliquerai sur chaque page séparément. Donc je le veux en jean. C'est ce que je veux au bureau. Les commandes ne sont pas ce que nous voulons, les détails des commandes, pas de PDP, pas de combinaisons oui, saris oui, le succès, pas de t-shirt, oui, le décor, pas Et cette fois, je ne cliquerai pas sur ce lien. Je ne veux pas que le réglage soit le même sur toutes les pages. Je laisse cette option désactivée et je vais cliquer sur Copier. Maintenant, je vais passer rapidement aux pages individuellement. Je pense que nous avons quitté Indian, nous allons rapidement ajouter ce composant à Indian. À partir de là, je peux rapidement ajouter sur l'Indian et je reviendrai. Par défaut, il figurera au dernier de tous les composants. Il suffit de le déplacer et de le placer en plein centre de Navbar et Putter OK, donc c'est uniquement pour la catégorie indienne. Je vais donc le sélectionner et faire défiler la page vers le bas, et je vais simplement le changer mode indienne et je cliquerai sur Choisir. Des types indiens sont là. Oh, les gens arrivent également en indien. OK, c'est assez juste. Pas de problème Passons au jean, emmenons-le au centre. Et sélectionnez la liste des produits. Viens ici et change la catégorie en gènes. Aucun produit n'a été trouvé. Il se peut qu'il y ait un égarement dans le compte de reversement. Nous devons rapidement y réaffecter les gènes. Emmenez-le au centre. Sélectionnez le produit qui fait le moins défiler vers le bas. Et c'est pour le bureau. Donc, au bureau, je pense que nous pouvons uniquement lui attribuer des robes pour le moment. Et oui, allons-y, rien ne commande. Jouez aux combinaisons, nous allons les sélectionner , les placer au centre, sélectionner le produit le moins composant et passer rapidement aux combinaisons Et d'ailleurs, nous devons également le renommer. Costumes de jeu. Alors voilà, nous avons Indian, OK. Alors nous avons des jeans ici. Celui-ci, c'est du matériel de bureau, il ne commande rien. OK. Jouez des costumes, c'est terminé. Alors Saris, apportons-le ici, renommons-le en SaS, sélectionnons la liste des produits Accédez à l'option de catégorie sélectionnez Saris ici et choisissez La réussite n'est pas requise. Encore une fois, t-shirt, oui, viens ici. Renommez-le en t-shirt, sélectionnez le composant de la liste des produits, passez à cette sélection de catégories, choisissez une zone de catégories, et ce sera notre t-shirt à Enfin et surtout, Western Western Western. Le western est donc une catégorie principale. Comme il ne s'agit pas d'une catégorie réservée aux enfants, nous allons rapidement nous rendre ici et sélectionner simplement les articles occidentaux et choisir. Nous y voilà donc. Tous les westerns sont listés ci-dessus. Génial. Nous allons donc aller à la page d' index et la page d'accueil sera Index. Indian sera Indian Page, et Western sera Western, ce qui est enfin le cas. Cool. Nous allons donc rapidement lier les pages. Donc, ce bouton Ajouter au panier, que nous avons, va accéder à la page du panier Quelle est la page du panier créée ? Je ne pense pas, n'est-ce pas ? Nous n'avons pas créé la page du panier. Créez donc rapidement la page du panier et ajoutez rapidement la barre de navigation et le pied de page à cette page individuelle Multiple. Pourquoi devons-nous en arriver au multiple ? Parce qu'à l'intérieur de ce multiple, nous avons uniquement cette option pour lier des copies. Nous allons donc cliquer sur Card Link Copies Copy. Génial. Je vais sélectionner ce bouton et nous l'associerons à la carte. Cela arrive à Card et nous y voilà. Le sigle de connexion est indiqué par défaut par le reflow. Nous n'avons donc pas besoin de créer une page spécifique pour cela. OK, alors prenons rapidement un aperçu. Je vais cliquer sur ZR, qui est, encore une fois, une page de destination Maintenant, si je clique sur ces cordons, je vais accéder aux cordons. Ensuite, si je clique sur robes, je vais accéder à la section des robes. Si je clique sur un jean, je passe au jean. Nous n'avons pas les produits là-bas. Nous pouvons rapidement aller vérifier ce qui n' a pas fonctionné et pourquoi les jeans ne viennent pas. Nous allons donc rapidement cliquer sur configurer le commerce électronique et sur Gérer le projet. Z sélectionné, accédez aux produits, tous les produits, et où sont les gènes ? Où sont les gènes ? Oh, les gènes ne sont pas classés dans la bonne catégorie. Je vais donc sélectionner rapidement. Je vais sélectionner tous les gènes. Je vais cliquer sur Modifier, je vais cliquer sur les catégories et je vais déplacer les catégories de celles-ci vers les gènes et confirmer. Ainsi, nous pouvons voir maintenant qu'ils sont attribués à des gènes, et si nous venons ici et que nous les rafraîchissons, nous y voilà. Tous les gènes sont désormais au bon endroit. y revenir, voyons voir, les combinaisons de jeu sont désormais au bon endroit. Les t-shirts sont désormais au bon endroit. OK, encore une fois, les robes sont au bon endroit, et les saris sont encore une fois au bon endroit Indien, tous les produits indiens sont au bon endroit. Les jeans sont toujours en langue indienne, n'est-ce pas ? Nous allons donc rapidement revenir en arrière et voir que ce n'est pas vraiment indien. Nous allons donc rapidement revenir en arrière, changer la catégorie en Western et confirmer. Revenons à l'aperçu, actualisons, et c'est parti. Maintenant, dans l'Indien, il n'y a que l'Indien. Si nous passons à l'ouest, les gènes arrivent maintenant dans la zone occidentale. Mais si vous voyez sur la page d'accueil, nous avons des polices différentes, mais si nous cliquons sur une autre page, les polices sont différentes. La raison est que nous n'avons pas changé le style de toutes les pages. Si je clique sur le corps en apparence, si je fais défiler la page vers le bas, la police n'est pas encore sélectionnée avec la police que nous voulons. Donc rapidement, je dois aller changer la police une par une dans toutes les pages. Manière. Génial, nous avons donc changé toutes les polices pour toutes les pages qui s'y trouvent. Il se peut que nous ayons besoin d'une ou deux pages supplémentaires selon les besoins, mais pour l'instant, nous sommes bons dans ce domaine. Sauvegardons donc le projet rapidement, et oui, nous sommes prêts à partir. Dans la prochaine vidéo, nous allons donc créer notre page de panier. Chaque fois que l'utilisateur ajoute le produit sur une carte, le produit est répertorié dans la page du panier, et nous le concevons dans notre prochaine vidéo. Regardez donc les gens dans la vidéo suivante. 52. Ziara Commerce - Designer une page de panier dynamique: Bonjour et bon retour. Dans cette vidéo, nous allons donc concevoir la page du panier. Donc rapidement, nous allons prendre un conteneur, le placer entre la barre de navigation et le pied Il suffit de prendre une rubrique et nous l'appellerons votre panier. Et recherchez une carte. Nous devons prendre le composant du panier et déposer dans ce conteneur. Et nous y voilà. Je pense que nous n'avons pas besoin de ce texte car le panier est déjà écrit ici. Nous allons donc le supprimer et nous allons simplement conserver le panier, qui est écrit par défaut. Cool. Donc, une fois cela fait, je pense que nous avons besoin de deux pages supplémentaires. L'une est l'URL de réussite et l'autre est l'URL d'annulation. Je crois donc que nous avons une page de réussite quelque part ici, oui. Nous avons donc une page de réussite, mais pas de page d'annulation. Nous allons donc créer rapidement une autre page intitulée Annuler. Et allez dans Index et prenez la barre de navigation et le pied de page à partir d'ici. Et en gros, vous pouvez accéder à n'importe quelle page utiliser la barre de navigation et le pied de page et cliquer sur Lien Mais j'ai l'habitude d' aller sur la page d'index où je l'ai conçue et de copier la barre de navigation et le pied de page sur cette barre de navigation et le pied de page Nous avons donc la page d'annulation ici maintenant, d' accord, pour en revenir à la carte, je vais sélectionner le panier et je vais mentionner cette page URL Es réussie et faire défiler la page vers le bas. Nous avons la page de réussite ici, et la page d'annulation est ici. Le projet, c'est à nouveau Yara, et c'est parti Nous en avons fini avec la page de la carte. C'est tout. OK, nous allons donc rapidement concevoir la page d'annulation et la page de réussite. Nous allons prendre un conteneur et nous allons prendre un conteneur, venez ici, je vais prendre un titre. Je vais prendre un paragraphe et je vais prendre un bouton. Je pense que les polices sont différentes ici, donc je vais rapidement sélectionner le corps passer à l'apparence et changer la police. Le titre indiquera l'annulation de la commande confirmée dans le paragraphe, nous aurons un bref article et ce bouton, nous l'appellerons « continuer achats » et je changerai l' apparence du bouton. Je vais changer le style du primaire au style foncé. Cool. Il s'agit de notre page d'annulation et de la même manière, nous allons créer la page de réussite. Je vais prendre un contenant. Un titre, un paragraphe juste après le titre et un bouton. Ce sera donc un merci pour votre achat. Je pense que ceci et ce Y et cela devrait être en petits caractères, nous allons rapidement écrire notre histoire ici et continuer avec le bouton d' achat ici. Vous allez également changer le style en Dark Awesome. Passons donc rapidement à la page d'index et prenons un aperçu. Voici donc notre page d'index. Voici Cards. Et si je clique sur deux paniers, il m'affichera les produits ici. Ah oui, et ce produit contient plusieurs images. Allons donc voir ça. Donc, si je viens ici, les images des produits qui s'y trouvent apparaîtront comme ça et je pourrai cliquer ici en conséquence. Et il y a encore un produit là où nous en avons, je crois que c'est en Occident, euh, oui, c'est celui-ci où nous avons aussi de la taille. Et en fonction de la taille, le prix du produit change. Et c'est là que nous avons d'autres choses, comme ajouter votre nom sur le t-shirt. Si je clique dessus, j'ai besoin de votre nom, et je peux ajouter mon nom ici. Imaginons que j'ajoute mon nom, que j'ajoute la taille et que je clique sur Ajouter au panier. Le produit est maintenant sur ma carte, et si je vais sur Card Store aucune configuration de paiement n'est encore disponible. Nous n'avons pas configuré le paiement. C'est pourquoi nous ne pouvons pas accéder à la page de la carte. Donc je suppose que vous savez ce que nous allons faire dans la prochaine vidéo. Nous allons résoudre ce problème dans la prochaine vidéo. 53. Ziara Commerce - Informations de paiement: Hum, corrigeons la configuration des paiements dans cette vidéo. Accédez donc rapidement au compte Reflow et cliquez sur les paramètres et les paiements Il existe des options PayPal, Stripe, Paddle et Custom. Donc, si vous cliquez sur Stripe, il vous sera demandé de vous connecter au compte Stripe et il prendra toutes les clés nécessaires qui s'y trouvent. heure actuelle, je n'ai aucun de ces comptes de passerelle de paiement. Donc, pour l'instant, je vais passer à la méthode personnalisée, qui est une méthode de virement bancaire, et je la nommerai car le délai estimé du virement bancaire est de sept. Conservez ce message tel quel, et je cliquerai sur Créer. Juste parce que j'ai besoin d'un mode de paiement, je l'ajoute, vous pouvez également ajouter votre passerelle de paiement ici. Pour en revenir, si je me rafraîchis maintenant, boum, c'est parti. Nous avons notre produit dans le panier, nous pouvons augmenter la quantité, et je pense que nous ne pouvons pas dépasser cinq Peut-être que parce que nous avons fixé la limite de quantité à cinq, nous pouvons retirer le produit du panier. Ainsi, lorsque nous cliquons sur la quantité, le prix change également. Oups, il y a une erreur, je vais donc y revenir , et c'est parti Vous voyez donc que la page devient grise. Cela signifie qu'en arrière-plan, il s'actualise rapidement. Et les nouvelles données nous parviennent, elles ne sont rien d'autre que le prix. Et ici, si je clique sur Commander, cela viendra ici et mes coordonnées seront saisies si je suis déjà connecté. Sinon, il me demandera de renseigner tous les détails ici, à adresse e-mail, mon numéro de téléphone, mon adresse de livraison et toute note spécifique que je souhaite donner au vendeur. Alors, faisons-le rapidement. Mon e-mail est car@gmail.com. Le numéro de téléphone sera le 123-456-7890 et l'adresse de livraison sera à nouveau Kurn, l'adresse sera à nouveau Kurn, l' est quelque part en Inde. La ville, je peux dire, est Banguru. Le pays de Bengaluru est l'Inde, l' État est le Karnataka et le code PIN est OK. Et puis il est dit «   tarif forfaitaire mondial ». Oui, ajoutez des informations de facturation. C'est bon. Il n'y a rien. Vous pouvez le laisser vide si vous n'avez rien. Alors oui, le coût total est quelconque, par exemple 1699. Je peux ajouter un code promo ici si j'en ai un. Sinon, cliquons sur virement bancaire, et c'est parti. Je peux voir les informations bancaires ici, et ici le client verra les informations bancaires, le client doit les soumettre et le client doit transférer le montant ici. Ici, si vous voyez toutes les commandes dans les commandes, vous voyez que la commande est en attente de paiement. Ainsi, une fois que le paiement est effectué et le client vous confirme que le paiement est terminé, vous pouvez y accéder , modifier le statut du paiement pour le marquer comme payé et cliquer sur Confirmer. Et une fois le produit expédié, vous pouvez à nouveau modifier le statut d'expédition en Marquer comme expédié. Ces informations seront transmises à l'utilisateur via l' e-mail fourni par l'utilisateur, qui est celui-ci. Il ne s'agit pas d'un e-mail authentique, je n'en recevrai donc aucun, mais l'utilisateur peut voir les détails de la commande et le statut de la commande une fois qu'il a créé un compte et qu'il s' est je n'en recevrai donc aucun, mais l'utilisateur peut voir les détails de la commande et le statut de la commande une fois qu'il a créé un compte et qu' connecté au compte Zia. C'est exactement ce que nous allons faire dans la vidéo suivante. Rendez-vous dans la prochaine vidéo, les gars. 54. Ziara Commerce - Finir le site e-commerce: Génial Donc, dans cette vidéo, nous allons créer une page de statut de commande, une page de détails de commande, etc. Alors venez vite au studio Bootstrap, et voyons si nous avons créé la page de commande ou non Oui, nous avons une page de commande et une page de détails de commande, toutes deux. Passons donc rapidement à la page des commandes. Prenez un contenant et cliquez sur Commander. Nous avons donc le statut de la commande ici et nous avons la commande de l'utilisateur ici. Nous allons donc prendre ce composant de commande utilisateur et le déposer ici, commande utilisateur, et dans les détails de la commande, encore une fois, prendre un conteneur. Et prenez le composant d'état des commandes et déposez-le sur cette page. Et l'utilisateur a besoin d'un endroit où il peut venir vérifier cela. Passons donc à l'index et juste ici, peut-être qu'après ce Western Oops, prenons cet élément NAV, dupliquez-le et renommez-le peut-être qu'après ce Western Oops, prenons cet élément NAV, en commandes Et nous lierons les commandes à Je vais sélectionner ceci sur notre page de commandes. Maintenant, l'avantage de lier la barre de navigation est que vous pouvez voir que les commandes sont désormais ajoutées sur toutes les pages. OK, alors passez rapidement à l'aperçu, et si je clique sur les commandes, il me demandera de me connecter. Mais si nous cliquons sur se connecter, cela ne prendra rien car nous n' avons pas encore configuré les paramètres de connexion. Configurons donc rapidement le paramètre de connexion. Passons donc à notre compte de redistribution, accédons aux paramètres et cliquez sur Se connecter Il s'agit donc de notre domaine de redistribution. Nous pouvons créer. Vous pouvez également choisir un domaine personnalisé. Nous devons ajouter un domaine ici. Nous allons donc rapidement accéder à Bootstrap Studio passer aux paramètres de publication prendre notre domaine sous le nom de domaine Zara dotbss point DESIGN et publier ce Attendez un certain temps jusqu'à ce qu'il soit publié. Oui, il est publié, cliquez dessus maintenant et prenez maintenant cette URL. Reviens ici. Je vais taper ici chez Zara Je vais cliquer sur l'origine et je vais coller ce domaine ici. Et cliquez sur Enregistrer. La clé est générée. Maintenant, je peux activer cet e-mail et ce mot de passe. Alors, de quelles informations ai-je besoin ? e-mail et le mot de passe sont par défaut, j'ai besoin d'un nom, j'ai besoin d'un numéro de téléphone. Si nous avons une page de termes et conditions personnalisée, nous pouvons ajouter cette page de termes et conditions là-bas. Je vais donc simplement ajouter des termes. D'accord, vous pouvez également ajouter le motif ou bien laisser vide et simplement cliquer sur Enregistrer. Vous avez également la possibilité de vous connecter aux réseaux sociaux, Google, Facebook et autres Donc, si vous cliquez sur Google, il vous sera demandé de créer un numéro d'identification client et un numéro secret du client. Pourquoi cela arrive en tant que K, peut-être que j'ai ajouté un mauvais nom. Oui, ce n'est pas OK et sauvegardez. Je n'en ai pas besoin et je sauvegarde Commerce, je peux en ajouter pour le moment. Génial Voici donc Yara commerce.refloq.com, quel qu'il soit. Actualisez-le et cliquez sur Enregistrer car l'URL doit correspondre, et voilà, le nom de l'e-mail, le mot de passe, le mot de passe, le mot de passe retapé et le numéro de téléphone. Je vais donc ajouter l'e-mail, le nom, le mot de passe, le mot de passe retapé et le numéro de téléphone. J'accepte les termes et conditions et je clique sur S'inscrire. Oui, ici, vous avez besoin d'une adresse e-mail valide d'Ori car elle demande une vérification et un code de vérification est demandé. Et boum, nous sommes connectés avec succès. Passons maintenant et commandons. Je vais donc passer à notre produit spécial, peut-être, désolé, Western. Que dois-je commander maintenant ? OK, commandons cette combinaison de jeu. Nous allons passer à cette combinaison de jeu. costumes de jeu ont l'air bien. Oups, très bon marché, 79 roupies seulement Ce prix est erroné. Lorsque nous avons téléchargé la feuille Excel, n'est-ce pas ? À cette époque, c'était 79$. Mais lors de la création de ce projet, j'ai changé la devise du dollar en roupies, ce qui m'indique 79 Quoi qu'il en soit. Donc, si je clique sur Ajouter au panier, ce produit est maintenant ajouté au panier, et je cliquerai sur Commander. Vous voyez donc que lorsque je suis connecté, les informations sont prises automatiquement, l'adresse e-mail est saisie, l'adresse est prise. Je vais juste ajouter une adresse et une ville aléatoires. J'ajouterai l'Inde ici. Je vais ajouter un État ici et un code postal. Et virement, virement bancaire, c'est parti. Maintenant, si je passe à mes commandes, vous pouvez voir que la commande est là et que son statut est en attente. Cette commande est en attente. Si je vais sur mon compte de remboursement et si je passe à mes commandes maintenant, je cliquerai sur ces commandes Et ici, vous voyez que la version payante est terminée. Il s'agit maintenant de la deuxième commande avec l'adresse e-mail réelle. Je vais cliquer ici. Et en supposant que le paiement soit effectué, je vais cliquer sur le bouton «   Le paiement est effectué ». Revenez ici, rafraîchissez-vous. Vous pouvez maintenant voir que le paiement est effectué et qu'il est en cours. Le statut a changé pour continuer. Je reviendrai ici et je changerai le statut d'expédition Shift et je cliquerai sur Confirmer. Si je reviens ici et que je l'actualise, le statut est «   Expédition Si je reviens ici et que je change le statut d'expédition en « Marquer comme livré », je reviendrai actualiser. Vous pouvez voir le statut tel qu'il a été reçu. C'est ainsi que les choses se passent de manière dynamique. Nous pouvons rapidement ajouter une option ici où elle affichera également les détails de la commande. Accédez donc rapidement à la page des commandes, sélectionnez-la, sélectionnez la page des détails de la commande pour le résumé et revenez ici pour actualiser le numéro d'opération. Nous devons le publier car il se trouve désormais dans un sous-domaine. Nous allons donc le sélectionner et publier. OK, l' éditeur a terminé. Nous allons l'actualiser maintenant. Vous voyez maintenant une flèche ici. Maintenant, si je clique dessus, cela m'amène à la page des détails de la commande, et cela me donne un bref résumé complet de cette commande spécifique. Nous en avons terminé avec cette série, la série dans laquelle nous avons appris à concevoir un site Web de commerce électronique complet et dynamique où nous pouvons ajouter un produit à la carte. Nous pouvons passer la commande. Nous pouvons voir l'état de la commande et nous pouvons voir l'état détaillé de la commande. Nous avons un panneau d'administration où nous avons une vue d'ensemble de notre boutique Ensuite, nous avons la liste des utilisateurs de la boutique. Nous avons les plans, les paiements, les commandes. Nous pouvons ajouter les produits, les catégories, les coupons, etc. Donc, oui, nous avons terminé la série avec succès ici et bonne chance d'apprendre. 55. L'entrée En Ligne Sur Le Site E Commerce Du Projet Quatre: Commençons. Dans cette section, ce que nous allons apprendre, c'est comme si nous allons créer le site Web de commerce électronique. Et ce sera un véritable site web de commerce électronique dynamique que nous allons concevoir à l'intérieur du studio Bootstrap. Et après avoir terminé ce site Web, nous, je veux dire que nous ne sommes pas réellement, vous pourrez lancer ce site Web et commencer à accepter des commandes. Commençons. Ce que j'ai fait, c'est que j'ai créé un design, design vierge, et je l'ai nommé comme carte instantanée. Snap Card sera le nom de mon site Web de commerce électronique. La première chose que nous allons commencer à concevoir la mise en page et la première chose que nous allons faire est de créer une barre de navigation. Et je vais prendre une barre de navigation, qui sera cette barre de navigation. Et à l'intérieur de cette marque, je vais certainement nommer la carte instantanée. Carte à mousqueton. Et ce que nous allons faire ici c'est comme si nous aurons deux catégories. À l'intérieur de ces catégories, nous aurons également une sous-catégorie. Pour cet exemple, je crée deux catégories. Et à l'intérieur de ces catégories, je crée deux autres sous-catégories. C'est à vous de décider du nombre de catégories et sous-catégories que vous souhaitez créer et que vous pouvez réaliser. Ce que je fais ici, c'est que je vais simplement sélectionner tous ces trois éléments maintenant et je vais les supprimer. Et je vais sélectionner un menu déroulant. Notre. Je vais placer ce menu déroulant à l'intérieur de ce bar de navigation. Je vais le nommer comme hommes, et je vais créer une liste déroulante de plus ou je le sélectionnerai et je vais le dupliquer, et je le nommerai en tant que femmes. Ce sont les deux barres de navigation de désolé, sont les deux listes déroulantes. Ces deux autres catégories que notre site Web va posséder. Je vais le sélectionner, je cliquerai sur Ouvrir. Le premier sera, le second sera général. Et général. Celui-là sera le cas. OK. Il s'agit donc des trois catégories. Je vais fermer ça. Je reviendrai à l'humain et je l'ouvrirai à nouveau. Celui-ci sera Roadster et général. Et celui-ci sera, avant d'aller de l'avant, ce que je vais faire, c'est que j' irai dans les paramètres et je sélectionnerai une autre équipe ici. Disons le thème lux. Et je cliquerai sur Enregistrer. Nous obtiendrons également une police différente et un style différent. À l'intérieur, vous pouvez voir un style différent. Nous allons maintenant prévisualiser notre site Web. Nous allons cliquer sur Aperçu. Je vais juste apporter la fenêtre du navigateur ici. On y va. Voici nos listes déroulantes. Sélectionnons cette barre de navigation et cliquons sur l'option fluide ici et ouvrons à nouveau l' aperçu. Cet aperçu est encore une fois, et maintenant c'est défini. Après cela, nous pourrons créer un carrousel. Je vais mettre le carrousel ici où nous pourrons faire glisser nos images. Je ne fais que créer une mise en page, nous importerons les images et nous commencerons à les relier partout. Ensuite, nous aurons un conteneur que je placerai sous ce carrousel. Et en sélectionnant ce conteneur, ce que nous allons faire maintenant, nous allons simplement donner une marge, haut de la marge, un haut vide, ou peut-être quatre suffiront. Oui, quatre, c'est suffisant. Ensuite, nous allons mettre un titre, un titre et nous pourrons nommer cela comme étant peut-être ce que nous pouvons nommer des produits. Nous le garderons comme h3. La raison pour laquelle je garde ce texte dans h3 est parce que SEO et oui, certainement je vais vous le dire aussi dans la section suivante. Donc tous les produits H3, et après cela, nous pouvons y mettre la section produits. Je pense que c'est suffisant pour l'instant. Ce que nous ferons dans notre section produits, exemple si vous allez dans les fichiers BSS, vous trouverez une section e-commerce là-bas. Et si vous allez aux produits, puis que vous allez sur les sliders, vous trouverez trois images ici. Il suffit de le faire glisser et de le déposer ici. Ou si vous souhaitez être plus organisé, suffit de cliquer avec le bouton droit sur les images, créer un dossier et de le taper en tant que curseurs. Cela résout tout bien et il suffit de le laisser tomber à l'intérieur. Cliquez sur, OK. Il suffit de double-cliquer, d'ouvrir le curseur et de sélectionner la première image, puis de cliquer sur Suivant. Double-cliquez ensuite et double-cliquez. Sélectionnez le curseur vers l'image S2. Cliquez ensuite sur Suivant. Double-cliquez sur cette image, double-cliquez sur le dossier pour l' ouvrir et cliquez sur S3, puis cliquez sur OK. Et on y va. Nous avons trois images. Dans ce domaine. Nous avons maintenant ajouté trois images. Passons à notre avant-première. Laissez la page se rafraîchir, recharger l'année. Maintenant, il est rechargé. Et ensuite, nous avons ces images ici. Chaque fois que nous voulons changer l'image, nous devons la modifier par rapport à ce que vous ne pouvez pas faire de manière dynamique cette semaine. Nous allons maintenant passer à la prochaine section intitulée Tous les produits et vous êtes ce que nous allons faire. Nous allons créer des choses dynamiques, en les minimisant. Et avant d'y aller, nous devons faire quelque chose. Nous devons connecter quelque chose à notre studio de bootstrap. De ce fait, notre site Web deviendra un site Web dynamique. Et ce que nous devons faire là-bas, nous le verrons dans la vidéo suivante. 56. Comprendre Le Reflux Du Projet Quatre: Ce que nous devons faire, c'est cliquer sur Paramètres. Une fois que nous avons cliqué sur Paramètres, faites défiler vers le bas ici et nous avons ce commerce électronique. Vous n'avez qu'à cliquer sur celui de commerce électronique. Vous devez maintenant cliquer sur Gérer la boutique ici. Et une fois que vous aurez cliqué sur Gérer la visite, vous obtiendrez cette page sur laquelle vous devez nommer votre boutique. Je vais nommer ma boutique comme carte instantanée. Une fois que j'ai cliqué sur un côté, tapez cette carte de nom que j'ai, il suffit de cliquer sur Suivant. Et une fois que j'ai cliqué sur Suivant, je serai redirigé vers cette page. Ceci montre un produit et j'ai ajouté ce produit depuis longtemps. Et c'est votre carte instantanée. Vous pouvez ajouter plusieurs magasins, comme un nouveau magasin, vous pouvez créer plusieurs nouveaux magasins au cours de l'année. Reflow est une sœur, on peut l'appeler comme une société sœur du studio Bootstrap lui-même. Une fois que c'est fait, il faut revenir à l'année. Et encore une fois, cliquez sur Gérer le magasin ou c'est déjà un évier, alors vous devez sélectionner cette carte instantanée ici. Une fois cette carte instantanée sélectionnée ici, cliquez simplement sur Enregistrer. Et pour l'instant, nous cesserons d'utiliser Bootstrap Studio à moins que nous n'ajoutions tout à notre site Web de commerce électronique. Reflux. Vous pouvez voir ce tableau de bord de reflow comme un panneau d'administration de notre site Web de commerce électronique. Nous allons passer à Catégories et nous commencerons à créer les catégories. Quelle catégorie avons-nous ? En fait, nous avons deux catégories principales. L'un est fait, Désolé, l'autre est des hommes. Ce n'est pas une sous-catégorie pour cela, je cliquerai simplement sur Enregistrer et ensuite nous aurons ce genre de page. Je vais cliquer sur Ajouter une catégorie. Le second sera celui des femmes. Et je vais cliquer sur cette femme. Économisez. Nous avons maintenant deux catégories principales et notre site Web nous avons également deux catégories principales. Il s'agit d'hommes et de femmes. Après cela, nous devons créer une catégorie appelée Roadster. Je viendrai ici. Je cliquerai sur votre catégorie d'annonces et je vais taper Roadster. Et la catégorie parente sera celle des hommes. Et ils cliqueront sur Enregistrer la catégorie. Vous pouvez voir maintenant à l'intérieur des hommes que nous avons une catégorie Roadster et ensuite un sera général. Nous cliquons une fois de plus sur Ajouter une catégorie et de manière générale. Et celui-là encore dans la catégorie des hommes. Toutes les catégories. Nous ne créerons pas un tel type de catégorie appelé tous. Mais oui, si vous voulez créer une catégorie appelée All, nous pouvons le faire. Encore une fois, nous allons passer à Ajouter une catégorie et il s' agira de Roadster et pour les femmes maintenant, nous allons cliquer sur Enregistrer ici. Une autre catégorie avec le général pour femmes. Et cliquez simplement sur Enregistrer la catégorie ici. Ces grandes catégories que nous avons créées maintenant après ces catégories, nous pouvons créer les produits. Maintenant, c'est la page que vous verrez dans la section produit, et nous commencerons à ajouter le produit. Si vous accédez à nos ressources. À l'intérieur des hommes, vous trouverez ces dossiers où se trouvent les photos des produits. Il suffit donc de prendre celui-ci. Désolé, celui-là, et celui-là. Donc, le produit, je clique d' abord sur le produit et le nom de ce dossier, nous pouvons le prendre comme nom du produit. Il y a un dossier d'informations ici où vous pouvez prendre celui-ci comme description, comme une description régulière et nous pouvons le conserver pour tous dès maintenant. En revenant aux hommes, ce produit, et il prendra tout ce produit, des photos de produits, le glisser-déposer ici. Vous pouvez également importer une vidéo si vous le souhaitez. Ensuite, le prix du produit, il sera quelque part autour de 316, peut-être en stock, tout est là. Maintenant, nous devons sélectionner la catégorie car ce n'est pas un Roadster quand nous allons la mettre en général et les hommes tous les deux. Et nous devons mettre une description là-bas. Je vais donc simplement double-cliquer ici et nous prendrons celui-ci. Il suffit de le coller ici. Et je vais juste le nommer comme des hommes. Je ne serai pas très précis. Il suffit de le minimiser. Si nous avons une variance similaire, nous pouvons créer une variance et nous devons le faire parce que nous avons de la taille. Je dois donc taper size ici et ajouter une variante. Celui-ci sera donc petit. Un petit prix sera de 360€. Je ne sais pas quel prix nous avons ajouté là-bas. De toute façon, pas de problème. Et le Royaume-Uni est une unité de gestion des stocks. Vous pouvez mettre un certain nombre et en réalité, vous pouvez en mettre un peu. L'unité exacte de conservation des stocks. Encore une fois, j'en créerai un autre et ce sera un médium. Encore une fois, ce sera 360. L'unité de conservation des stocks SU k sera quelque chose et le poids sera comme si je mettais juste une attente aléatoire. Encore une fois. Celui-ci sera petit, moyen, grand. Ce sera peut-être 370, disons. Comme si nous allions monter quelque 1010 roupies là-bas, arrêter de garder des stocks, de garder l'unité. Un autre sera très grand et le scan sera 380. Vous n'oubliez pas que nous avons deux produits avec la même quantité. C'est trois soixante trois soixante trois soixante trois soixante-dix trois quatre-vingt. Je voulais juste te montrer ça. C'est pourquoi je garde les différents chiffres là-bas. Le poids sera de 0,2. Et une fois cela fait, je cliquerai simplement sur Enregistrer. Vous pouvez voir que nous avons des tailles différentes depuis un an. Toute personnalisation, si vous voulez faire comme ajouter de la personnalisation, toutes les options que vous souhaitez faire, options de personnalisation ici, vous pouvez le faire dans leur unité de conservation des stocks pour cela article entier. Comme peut-être, il pourrait y avoir une unité de conservation des stocks et le poids du produit sera quelque chose comme ça. Oui, c'est tout une fois que c'est fait et je cliquerai simplement sur un produit sûr et mon numéro de produit est ajouté. Vous pouvez y voir que le produit est ajouté sur un an. Maintenant, je clique encore une fois sur Ajouter un produit et nous ajouterons le prochain nom du produit. Cette annonce est ce bloc-notes. Le voilà. C'est le bloc-notes. Je vais le copier et je le collerai sur un an. Les prix des images de ce produit seront bons. 99 catégorie encore, c'est une catégorie générale et je dois écrire quelque chose ici. Je l'écris à nouveau comme des hommes et de la variance, ce sera de la taille et ce n'est pas comme si vous avez créé une variante, vous ne pouvez pas créer plusieurs variantes là-bas. Vous pouvez faire cela plusieurs variantes comme les couleurs et toutes ces choses. Et récemment, variante récente que nous avons créée est celle-ci. Et je vais simplement cliquer sur votre copie. Et c'est tout, comme, je n'ai pas à refaire toutes les choses. Mais ce n'est qu'après que je dois garder les yeux sur le prix du produit sinon ce sera un gâchis. Donc, Phi 199599 et peut-être que celui-ci sera 649. Je ferai un produit avec un prix différent, et je cliquerai simplement sur Enregistrer. Et contrairement à ces deux choses, je peux le laisser vide parce que vous le savez déjà. Maintenant, dans le troisième produit, ce que je vais faire, je vais aller chez Roadster. Maintenant, je pense qu'il n'y a que ces quatre produits qui sont Roadster. Et je cliquerai simplement sur Ajouter un produit. Maintenant, celui-ci sera nommé Roadster uniquement. Quelque chose comme, voyons ici quelle est la couleur du produit. Comme Roadster, un demi-t-shirt, peut-être. chose comme ça. Demi-t-shirt. Considéré comme des demi-manches. Je ne fais que le nommer demi-t-shirt. Il suffit de copier cette description. Mettez-le ici, sélectionnez cette image est glisser-déposer ici. Cette fois, le Roadster, le prix peut être 999 ou peut-être 899. Maintenant, la catégorie sera les hommes et Roadster. Le général n'est pas là, c'est une marque Roadster. Maintenant. Il faut y mettre celui-ci. Je vais mettre ça, oups, copier tout. S'il y a encore quelque chose d' hommes en variance, la variance que nous avons, alors je vais simplement copier cette dernière fois. Cette fois, c'est à quel point c'était comme 899. Ensuite. Quatre-vingt-neuf. Quatre-vingt-neuf. Quatre-vingt-neuf. Cette fois, je ne mets le prix que 899. Et nous allons cliquer sur l'unité Enregistrer et conserver les stocks. Vous pouvez placer n'importe quoi là-bas et le poids du produit et simplement cliquer sur Enregistrer. De cette façon, ce que vous pouvez faire, vous pouvez ajouter les produits, quels que soient les produits que vous avez ici, vous pouvez les ajouter. Voici Roadster. Vous pouvez nommer cette marque avec le même nom plusieurs fois car nous avons des photos différentes là-bas. C'est tout Roadster. On peut le placer dans la catégorie Roadster. Et celui-ci, vous pouvez le placer dans la catégorie générale. Et après cela, vous pouvez ajouter les produits des femmes. Encore une fois, nous avons Roadster ici et la catégorie générale ici. Ce que je vais vous suggérer, c'est que vous téléchargiez d'abord vos produits ici. Ensuite, nous verrons dans la section suivante ce que nous allons faire exactement. Mais vous devez télécharger les produits sinon vous ne pourrez pas me suivre précisément sur les produits et vous voir dans la section suivante. Et j'ajouterai aussi les produits et je vous verrai dans la vidéo suivante, en fait pas dans cette section. On se voit dans la vidéo suivante, les gars. 57. Rendez Notre Site Web Dynamique Du Projet Quatre: Bon, nous avons donc ajouté 17 produits. Donc, si vous passez à la vue d'ensemble, vous pouvez voir que nous avons 17 produits au total, y compris les hommes et les femmes en général. Et que dites-vous ? Catégorie Roadster ? Si je viens aux produits, encore une fois, vous pouvez voir que tous les produits sont de plus 17 ans. Et maintenant, voyons comment nous pouvons apporter tous ces produits notre site de commerce électronique bootstrap studio qui est une carte instantanée. En revenant au studio bootstrap depuis plus d'un an maintenant, nous avons défini, comme nous l'avons tapé ici, comme tous les produits. Ce que nous avons donc plusieurs options. Donc, ce que je vais faire ici, c'est que, au lieu de tous les produits, nommerai comme, Voyons, produit Femme. Il suffit donc de taper un produit femme et de sélectionner ce conteneur, je viendrai à la section e-commerce, où vous pouvez voir cette section e-commerce. Et le deuxième composant est le moins produit. Il suffit de prendre cette liste de produits et déposer dans ce contenant. Dès que je le dépose dans ce récipient, les produits arrivent ici. Et maintenant, vous pouvez voir les hommes et les femmes, les deux produits sont déjà là. Mais ce que nous voulons, c'est que nous ne voulons qu'un produit femme et que nous ne le voudrions pas dans cette vue de liste. Nous le voulons en mode carte. En fait. Ce que nous allons faire ici maintenant, ce que nous allons faire, ce que nous allons faire, nous allons sélectionner cette liste de produits. Et dès que nous sélectionnons le produit le moins dans le panneau des options, nous pouvons voir maintenant que nous avons un tas d'options différent sur vous. première est la mise en page de ListView, nous allons déplacer deux cartes vue, et on y va. Nous avons maintenant une vue Cartes. Vous pouvez voir les photos du produit, y a-t-il le nom du produit ? Ensuite, nous avons également quelques détails ici. Nous avons ordre par ordre par date croissant, décroissant la date à laquelle le produit a été ajouté, le nom, l' ordre alphabétique, le prix en croissant et décroissant, si souvent nous le laisserons tel qu'il est. Ensuite, nous avons une page comme le nombre de pages, puis le pH, comme le nombre de produits que nous voulons afficher par page. Nous laisserons ces deux options vides car nous voulons simplement apporter des produits pour femmes ici. Ensuite, nous avons un lien produit et toute cette leçon nous verra un par un là-bas. Nous avons un magasin comme il s'agissait définitivement d'une coupe à pression. Si ce produit n'est pas issu de Snapchats, nous pouvons changer de magasin ici. Si vous avez plusieurs magasins là-bas, nous arriverons à des catégories. Je vais donc sélectionner toutes les catégories ici. Avant cela, nous avons utilisé des données fictives. Si vous n'avez pas de produits, alors si vous l' allumez, activez-le. Nous avons des données fictives ici, que nous ne voulons pas utiliser, nous allons donc les désactiver. Et maintenant, nous allons passer à Category Select sur toutes les catégories 1, l' option de catégorie viendra. Et ce que nous voulons ici, ce sont des produits humains. Nous allons donc choisir cela et nous choisirons les femmes. Nous voulons à la fois le général et le Roadster. Nous allons donc simplement cliquer sur les femmes et je cliquerai sur Choisir. Dès que je clique sur Choisir, tous les produits pour hommes ont disparu et nous avons, Vous êtes comme tous les produits pour femmes. Donc, ce que nous allons faire, je vais simplement sélectionner ce conteneur et Control L sera étiqueté. Et je le nommerai comme des femmes, des produits pour femmes. Et je cliquerai sur le plateau, cette étiquette. Je comprendrai que ce conteneur est destiné aux produits d'une femme et maintenant je vais faire un double, c'est-à-dire Control D. et celui-ci est là maintenant. Et maintenant, je vais juste l'étiqueter à nouveau et le nommer comme produit masculin. Je cliquerai simplement sur le plateau ici aussi au lieu des femmes, je prendrai juste des hommes, je vais juste retirer WO de là. Et maintenant, en ce qui concerne le produit le moins, nous allons simplement sélectionner ici. Et maintenant, parmi les humains, je vais sélectionner les hommes et choisir maintenant tous les produits hommes de notre oreille. Maintenant, si nous voyons l' aperçu de notre site Web, si vous venez à l'aperçu de la carte instantanée, vous pouvez maintenant voir que nous avons les produits femme ici, alors nous avons des produits pour hommes ici. Et ces produits dynamiques. Assez juste. Ensuite, nous avons celui-ci maintenant, Roadster général et tout ce que nous avons pour créer cette page. Maintenant. Ce que nous allons faire, c'est revenir au studio bootstrap. Et nous allons créer une nouvelle page ici, c' est-à-dire une page HTML. Et je vais le qualifier de productif. Il suffit de cliquer sur Entrée, puis de double-cliquer ici. Et prenez un conteneur. Un conteneur, puis donnez une marge supérieure, marge quatre. Ensuite, prenez un cap. Nommez-le comme ce que c'est que c'est ce que c'est comme des produits. Je prendrai la liste des produits ou vous la déposez dans ce contenant. De votre part, je le prendrai comme carte. Faites défiler les produits que je prendrai en tant que produits pour hommes et cliquez simplement sur Juifs. Il s'agit d'une liste de produits principale. Tous les produits pour hommes, ou de cette façon nous ferons plusieurs choses. Avant cela, ce que nous allons faire, c'est que nous créerons désolé, nous allons créer une page supplémentaire ou les détails de votre produit. Il s'agit d'un discours détaillé sur le produit. Et en revenant à notre section e-commerce, c'est un produit. C'est le composant que nous allons utiliser. Et avant cela, encore une fois, je le ferai. Je prendrai un conteneur. Comme d'habitude, je mettrai la marge quatre à huit. Cette page de détails du produit ou vous le ferez pour l'instant, ce que je vais faire en sélectionnant ce produit et je cliquerai sur le bouton Choisir. J'aurai donc cette information ici. Voici les données comme nous avons des images. Et si je viens ici, vous pouvez voir que la première page est là. Je peux voir plusieurs produits. Et si je clique ici, nous avons cette belle et belle galerie photo. Et là encore, nous avons plusieurs sections et nous avons maintenant des produits à ajouter dans le panier. Et puis nous avons les tailles car nous avons MDD en plusieurs tailles. C'est une option que j'ai faite dans la personnalisation, l'emballage cadeau. Si quelqu'un veut que nous donnions l'emballage, il suffit de vérifier ceci et d'ajouter le nom de la personne à qui, désolé, qui. Nous allons simplement nous tourner vers qui vous voulez donner. Le nom de la personne sera là, puis il en sera un. L'utilisateur cliquera ensuite sur Ajouter au panier. aller de l'avant, ce que nous devons faire, votre page de détails du produit ys. Nous devons accéder à la page des détails du produit. Au lieu d'un produit fixe. Et au lieu de C dans la source de données, type de produit est corrigé. Il faut cliquer sur Dynamic là-bas. Il s'agit de la page sur laquelle nous voulons apporter les détails du produit. Accédez à l' option Renommer et je vais sélectionner le nom du discours et je copierai cette page. C'est tout dans ce paramètre d'URL. Je vais simplement taper ce paramètre d'URL. Lorsque nous sommes dans le composant produit, ce paramètre d'URL porte le même nom que cette page. Cela signifie que c'est une page détaillée du produit. Je vais donc coller les détails de ce produit ici. Et je ne mettrai pas de code HTML à cet endroit. Et le paramètre URL je vais simplement taper les détails du produit. Je reviendrai sur les produits hommes. Je vais sélectionner la liste des produits ici. Et là, vous verrez une option de lien produit ici. Quel équipement vous êtes, ce que nous devons faire c'est que je vais d'abord mettre une barre oblique inverse. Ensuite, je vais taper le nom de la page sur laquelle je veux rediriger, et ce sera les détails du produit. Votre je vais taper point HTML parce que je veux y rediriger. Je vais poser un point d' interrogation ici. Encore une fois, je vais saisir les détails du produit. Et les détails de ce produit sont le paramètre URL que nous avons défini sur cette page particulière. Et après ce paramètre d'URL, je mettrai un signe égal. Je vais mettre le support bouclé, le support bouclé qui s'ouvre, et je vais taper ID à l'intérieur. Ne vous embrouillez pas ici, je vais vous expliquer ce que c'est exactement. Nous avons écrit les détails du produit en HTML. Cela semble que si nous cliquons sur ce produit, n'importe quel produit, il redirigera vers cette page. C'est le code HTML des détails du produit. Et c'est ce discours. Après ce point d'interrogation, nous mettons ici une section dynamique. Après un point d'interrogation, ce que la page de détails du produit affichera est comme si la page de détails du produit va récupérer l'ID de cet identifiant de produit et ce produit sera affiché sur cette page HTML point de produit. C'est aussi facile qu'il en a l'air. C'est aussi simple, d'accord, le premier est la page produit, puis les détails du produit sont le paramètre URL. Et l'ID est l'ID du produit que le système va récupérer automatiquement. Maintenant, je vais simplement cliquer ailleurs, revenant sur le navigateur Web. Je vais revenir en arrière, et voici la liste des produits, tout simplement, je cliquerai sur ce produit pour vous montrer. Une fois que j'ai cliqué sur ce produit, vous pouvez voir que ce produit est ouvert avec le nom de coût, tailles que le bouton Ajouter au panier compte et d'autres choses également. Je reviendrai ici et je boom, nous revenons à notre page produit. Mais en revenant au studio bootstrap, je dois le moins sélectionner ce produit. Je vais sélectionner celui-ci. Je vais juste le copier. Accédez à la page d'index, faites défiler vers le bas. Je vais sélectionner cet article de la liste de produits ici. Et je vais coller ce lien de produit de carte d' URL. Et je vais juste le coller sur vous. Si je reviens à mon aperçu Web maintenant, il m'amènera automatiquement à cette page. Et si je clique ici, il m'amènera à cette page. Il s'agit de la liste de produits et maintenant dynamique. La section dynamique est maintenant lancée. J'espère que vous êtes un peu excité à l'idée de construire cette chose particulière. Si vous avez des questions, n'importe quoi, vous pouvez me déposer la question dans la section des questions. Vous pouvez vous joindre à moi sur ma chaîne Discord. Je vais vous montrer que c' est ma chaîne Discord, et l'URL d'invitation sera celle-ci. Vous pouvez taper cette URL et vous connecter à moi sur ma chaîne Discord et nous pourrons discuter de beaucoup de choses ici. En revenant ici, nous retournerons dans notre studio de bootstrap et maintenant nous devons créer une page supplémentaire pour les femmes. Je vais juste dupliquer celle-ci. Maintenant, je vais taper des femmes. Il suffit de double-cliquer ici. Je n'ai pas besoin de faire autre chose car tout est défini, l'URL et tout est défini. J'ai juste besoin de venir ici et de changer les catégories. Et c'est une femme maintenant. Et je vais simplement cliquer sur Choisir. Ensuite, je vais le dupliquer deux fois de plus. La femme et la femme s'envolent. Général. Et celui-là, je vais juste enlever deux et Roadster. Double-cliquez pour accéder à cette liste de produits. Et chez les femmes, c'est général, donc je vais sélectionner le général et je cliquerai sur Choisir. Ce sont donc les produits généraux. Et maintenant sélectionne tous les produits Roadster, catégorie Razr, et je cliquerai sur le jus, donc nous n'en avons que trois ici. Ensuite, nous devons également renommer cela. En fait, ça n'a pas d'importance, mais l'orthographe doit être correcte, n'est-ce pas ? Roadster. Et aucun général, je vais choisir celui-ci. Les hommes cliquent sur Général, choisissent, puis vont dans les racines pour le sélectionner, puis cliquez sur Roadster. On y va. Et maintenant, en arrivant à la page d'index, nous devons maintenant le lier. Il suffit d'ouvrir ça. Je vais sélectionner Roadster. Désolé, où est l'URL ? Sélectionnez cette page. Et puis le premier sera des hommes, des hommes de produits Roadster. Ensuite, le second est général, les hommes de produits de plage en général. Et si vous cliquez sur, ce ne sera que quelques minutes de produit. Fermez celui-ci, ouvrez la femme, sélectionnez le Roadster, URL. Ensuite, les femmes productives Roadster, général. Les femmes en général. Et dans l'ensemble. Et il suffit d'aller à un produit féminin, produit, un point de femme HTML. Quelqu'un a fermé ça ? Oui, nous avons cette section ici. Et maintenant, dans la vidéo suivante, je pense que c'est une longue vidéo. Dans la vidéo suivante, nous allons créer d'autres pages, comme Ajouter au panier et toutes les autres. On se voit dans la vidéo suivante, les gars. 58. Page D'achat Du Projet Quatre: Avant d'aller de l'avant et de créer nos autres pages, nous allons d'abord accéder à notre compte de reflow. Nous allons commencer à le faire, commencer à faire un peu de génie dans le décor. Le premier est donc le cadre général. Et en général, nous avons le nom de la société comme la carte instantanée et la devise dans laquelle nous allons accepter les commandes. Comme souvent, je vais simplement le garder en USD seulement la mesure. Il s'agira de cagey et de centimètres et tout cela, termes et conditions, la politique de confidentialité, politique de remboursement et l'adresse e-mail principale où nous voulons recevoir les notifications. Je vais donc simplement changer l'adresse e-mail pour mon compte Yahoo. Donc, sur cette page, je viens de changer l'adresse e-mail. Ensuite, je cliquerai sur Enregistrer ici. aller de l'avant avec les taxes, nous ajouterons des taxes si nous en avons. Imaginons que s'il s'agisse des États-Unis et créera un États-Unis sur un an, sélectionnez sélectionnez le taux d'imposition et il vous sera exclu ou vous inclut. Nous allons donc mettre des taxes incluses sur les frais d'expédition et autoriser la taxe et tout. Je cliquerai simplement sur Enregistrer l' enregistrement du taux de taxe est mis à jour. Ensuite, nous pourrons ajouter un autre pays et disons taper l'Inde. Et je vais cliquer ici. Le taux de taxe ici est donc de 18 % par produit. Le numéro de taxe, il peut s'agir de n'importe quoi F7, G, B, D 12387. Désolé, FFT GB et numéro de TVA. Ce sera comme DCP pk 1122348. Et tous les produits sont à l'intérieur, y compris taxes et taxes sur les frais d'expédition, et nous cliquerons sur Enregistrer. De cette façon, vous pouvez ajouter les taxes fonction du pays dans lequel vous expédiez les produits. Ensuite, venez dans cette zone d'expédition où se trouvent d'autres endroits et tout ce qu'il y a là. Vous pouvez simplement cliquer sur Modifier. C'est par défaut qu'il est là. Et l'option forfaitaire mondiale existe. Ensuite, vous devez également modifier celui-ci, c'est dans le monde entier et c'est un tarif forfaitaire et tout. Donc oui, c'est gratuit et maintenant nous devons aller dans l'autre région. Disons que c'est comme l'Inde. En effet, au revoir. Inde. Je vais taper comme, disons taper comme livraison gratuite. Livraison gratuite. Et dans des pays comme les États-Unis , disons l'Australie. Australie et Inde. Alors qu'en Inde, Inde, en Inde, en Inde, en Inde. Ces trois pays sont là. Ces trois pays sont là où je propose la livraison gratuite. La livraison gratuite est là, puis ajoutez une méthode. Ce sera comme gratuit. Livraison. L'étiquette sera livrée gratuitement. Et l'ordre de valeur totale. Il sera toujours 0, et je cliquerai simplement sur Enregistrer. C'est ainsi que ça arrive. Livraison gratuite et sauvegardez-le. Si je clique sur l'expédition, disons qu'en Inde, il y en a peut-être, disons le Canada. Il s'agit d'une page expédiée sur leur annonce et c'est un tarif forfaitaire. Et l'étiquette est expédiée. Le coût de base est de neuf USD et de quatre kilos, il sera de 1$ le kilo. Faisons en sorte que l'expédition soit basée sur 2$. Faisons 1$ par expédition et 2$ par kg. Et je cliquerai simplement sur Enregistrer et je vais le sécuriser. Il s'agit donc des méthodes d'expédition que nous avons créées dans d'autres endroits. Si je vais ici, c'est comme un autre endroit. Modifier. Cet appartement est déjà enregistré. Je ne peux rien faire ici parce que c'est gratuit uniquement. Il s'agit de l'option par défaut. Et maintenant, en ce qui concerne l'option de paiement, nous avons trois options de paiement. L'un est PayPal Stripe et la méthode personnalisée, pas le client. Dans PayPal. Nous allons faire deux choses, PayPal et coutume parce que la tribu, j'ai essayé de le faire mais cela ne permet pas de changer mon pays en Inde. En fait. Vous pouvez essayer vous striper si vous avez deux comptes Stripe Si vous cliquez sur Stripe, il se connectera à votre compte Stripe, puis il effectuera un certain processus. Et c'est automatiquement qu'il connectera votre compte après vérification de votre compte. Après vérification de votre accord, vous vous connecterez automatiquement à votre compte là-bas. Mais PayPal et la liquidité personnalisable, facile. Nous pouvons le faire très rapidement dans PayPal. C'est comme ouvrir, ajouter votre adresse e-mail et cliquer sur Connecter, et c'est tout. Il est connecté. Et la méthode personnalisée est comme quelle que soit la méthode que vous souhaitez ajouter, vous pouvez l'ajouter ici. Je vais donc taper B wire UPI, UPI en Inde, c'est comme le mode de paiement, interface de paiement unifiée, quelque chose comme ça. Ce message est un message personnalisé comme merci pour votre entreprise pour terminer votre commande, veuillez envoyer un montant de virement bancaire ou je vais taper s'il vous plaît. Veuillez transférer le montant de ce montant. Fil UP dans le support. Je peux taper Google par virgule, virgule , n'importe quel UPI. Au lieu de ce nom de société, je vais saisir mon nom et je taperai mon ID UPI. Et je vais supprimer ces deux lignes. Je tape une fausse carte d'identité UPI ici. L'ID UPI ressemble à ceci. C'est peut-être comme un numéro complet. Le tarif, pourquoi BL ? Oui. Il est important d'inclure votre numéro de commande, votre numéro de commande dans l'objet afin que nous puissions connecter le paiement, votre commande et simplement le créer. C'est tout ça pour les modes de paiement. J'ai créé ce PayPal. Si vous regardez depuis l'Inde, ce PayPal ne fonctionne pas en Inde car il n'a pas de support en Inde. Stripe a pris en charge l'Inde car dans notre plateforme appelée Classroom.com Kw ET classroom.com, nous utilisons Stripe et cela fonctionne parfaitement. Mais je ne sais pas dans ce système la bande ne fonctionne pas, ne fonctionne pas car elle ne me permet pas de changer le pays. J'utilise ce PayPal et je paie via UPS comme une méthode personnalisée. Et voyons s'il est possible d'ajouter une image ou quelque chose du genre. Non, nous n'avons aucune option d'image et de quelque chose. J'aurais pu ajouter le code QR de l'UPI sur leurs taxes générales est également fait que l'expédition et le paiement est fait alors oui. D'accord. Créons un code promo ici. Comme je vais cliquer sur Ajouter un coupon et je vais taper un coupon est comme 20, désolé, pas 24% de réduction sur tous les produits. Je peux en donner une description ici. 20 % de réduction sur tous les produits. Ou peut-être pour les cinq prochains jours. Pour les cinq prochains jours. Et le code sera plat 20. Ce sera du code actif, il sera en personne, enseignera. Le rabais sera de 20. Et puis voyez si le coupon créera un coupon de plus. Comme plat 60. Mets-toi à plat. 1,60$ gagnera parce que nous utilisons, nous créons tout en dollars. Rabais forfaitaire de 1,60$ sur tous les produits. En utilisant un coupon plat 60. Plat, le plat. Le code sera plat, 60. C'est comme un montant forfaitaire. Il sera de 60$. Nous avons deux codes promo. L'un est plat 60 et quand e est 20%, d'accord, donc il n'est pas montré ici. C'est un pourcentage et il est plat. Les deux sont actifs, 68,20, et il s'agit de la date de début. Vous pouvez créer un certain nombre de codes promo ici et nous pouvons procéder à cela. Aucune catégorie que nous n'avons déjà vu de produits, commandes et de vues d'ensemble que nous avons vues. Revenons maintenant à notre studio de bootstrap. Année. Nous allons maintenant créer une page de panier. Il suffit de cliquer avec le bouton droit sur l'année Nouveau et je vais créer une page de panier. Pour accéder à la page du panier, je vais créer un bouton ici. Et avant cela, je vais simplement sélectionner cette navigation et dupliquer cette navigation. À l'intérieur de cette navigation, nous devons descendre. Je vais donc simplement supprimer les deux listes déroulantes de là. En gros, je n'ai pas besoin d'un Navier parce que je prends un bouton, non ? Nous allons prendre un bouton et le mettre à l'intérieur de cet effondrement. Et je vais nommer ça comme carte ou peut-être que je peux y mettre une icône de carte. Il faudra une icône, il suffit de glisser-déposer cette icône ici. Double-cliquez sur cette icône et tapez simplement panier. Et nous avons des gardes sur vous. Donc, quelle carte nous pouvons prendre cette carte. Oui, c'est cool. Ensuite, je retirerai le texte d'ici, c'est-à-dire la carte. Je vais sélectionner ce bouton et je l'alignerai jusqu'à la fin. Il viendra donc ici. Nous n'avons pas de système de connexion, quelque chose comme ça parce que c'est comme un paiement invité. Comme n'importe qui peut venir, ils sont allés sélectionner le produit, ils peuvent ajouter le produit au panier. Ils peuvent fournir les informations et commander le produit. Nous n'avons pas de système appelé Qu'est-ce que vous dites ? Comme l'exploitation forestière et toutes ces choses. D'accord. On y va. Nous avons un bouton de carte ici et nous avons des catégories ici. Si je fais défiler vers le bas, oui, c'est là. Et si je vais aux détails des produits pour hommes, en fait, si vous allez sur la page des détails du produit, donc ce que nous pouvons faire ici, en ce moment, nous n'avons que dupliquer ce contenu ou un plus de temps et supprimez ces produits. À partir de là, j' irai dans mon e-commerce, prendrai une liste de produits et je mettrai cette liste de produits dans le conteneur. Nous avons donc quelque part autour du nombre de produits, comme 17 produits que nous avons. Sélectionnez cette liste de produits et au lieu du moins je l' apporterai au panier. Année. Je le mettrai comme prix en augmentant le prix le plus bas avec le prix le plus bas, puis nous augmenterons le prix. Par page signifie que comme C, nous avons au total 17 produits ici. Mais supposons que si vous ne souhaitez montrer que des produits limités, disons huit produits ou quelque chose du genre. Donc ce que je peux faire, c'est que je vais juste le taper et appuyer sur Entrée ici. Ensuite, nous avons une pagination, comme la pagination automatique. Et la page en est une. Et nous avons une page. Nous avons autant de produits. Maintenant, ce que je vais faire, ce lien produit que nous devons faire, n'est-ce pas ? Je vais donc juste venir chez ces hommes et cliquer sur cette année. Cliquez sur Product least, nous allons simplement copier celui-ci. Et pour revenir à l'année, je vais juste le sélectionner et le coller là. C'est comme un nom de show image puis show extraits, prix et pagination. Donc oui, définitivement. Nous avons de la pagination. Ensuite, nous devons montrer la pagination. Si vous voulez afficher le prix , les prix sont oraux afin que vous puissiez simplement supprimer le prix également, mais je voulais montrer le prix qu'il vous appartient. Vous voulez le montrer ou pas complètement à vous. Descriptions, taille et tout ça. Oui, il est là. Maintenant, si nous allons à la page du panier, comme si vous venez, que vous veniez à la page du panier, alors nous allons créer un conteneur ici. Je prendrai simplement le conteneur et, comme d'habitude, nous mettrons vers la marge quatre premiers à ce conteneur. Et votre je vais juste fermer ça venant au commerce électronique alors que le commerce électronique Oui. Ajouter au panier est là. Je vais juste déposer ça. Non, désolé, ne pas ajouter au panier. En fait, panier d'achat. C'est la page du panier où nous pouvons voir comme le panier d'achat et la liste des produits, quoi que nous ayons ajouté, qu'au moins des produits seront ici. Si vous sélectionnez le panier, nous avons deux pages. L'une est l'URL de succès et l' autre est annulée. Ce que je vais faire, c'est que je vais créer. Que dites-vous comme une page ? Je vais taper. Le succès ici. Rien ne signifie que lorsque le produit est commandé avec succès, où il doit être redirigé. C'est donc comme une page de succès que je prendrai conteneur comme d'habitude. Marge quatre premiers à elle. Marge de quatre. Ensuite, nous prendrons l'icône. J'essaie juste d'éviter de prendre quoi que ce soit à l'extérieur. Et peut-être. pouces en l'air. Les pouces en l'air. Une prise de week-end. Bienvenue à l'apparence, prendra une couleur verte parce que c'est un succès. Ensuite, le fait de descendre à la taille de police augmentera la taille de la police. Tout ce que je fais à l'intérieur cette div, à l'intérieur de ce conteneur. Je vais vous prendre vous avec succès. Je suis content de la commande. Ensuite, le paragraphe sera inséré. Ce réservoir continuel vous fera du shopping. Encore une fois, marque exclamatoire. Je prendrai un bouton, le bouton à l'intérieur et je vais taper. Continuez vos courses. Une autre chose que nous pouvons faire, c'est de dire que je prends un cap de plus sur votre seule place pour vous. Ou peut-être que je peux dire à plat 1,60$ sur tous les produits uniquement pour vous. Nous pouvons donc utiliser cette réduction ici. On peut peut-être le prendre dans un paragraphe de cette façon. Flat 60 est le code de réduction, qui sera un h4. Une fois encore. Celui-ci, nous allons prendre une marge de cinq. Cela semble être un rabais de 6$ sur tous les produits lors votre prochaine commande. De cette façon, ce qui se passera lors de la prochaine commande que nous leur proposons est de 60% de réduction. Mettons-le au centre. Va aussi venir à Flexbox. Prenez-le colonne, corps, centre. On dirait un merci. Je pense que nous devons mettre une marge inférieure pendant plus d'un an. Maintenant, il semble que vous ayez passé la commande avec succès. Merci d'avoir fait vos courses. Continuez vos achats et obtenez un rabais de 60$ sur tous les produits de votre prochaine commande. Seulement pour vous. Utilisez ensuite le code de coupon ci-dessous. C'est tout. Gardez-le. De la même façon, nous pouvons utiliser cette page quatre. Annuler. Annuler car le carton besoin de la page d'annulation. En cas d'annulation, nous utiliserons peut-être ce pouce vers le haut comme un visage triste. En apparence, nous le changerons en couleur rouge. Il voit que quelque chose a mal tourné. Essayez encore, continuez à magasiner. Et il est dit qu'après votre première commande, vous débloquerez un coupon de réduction pour votre deuxième commande. Ok, donc en venant au panier, en sélectionnant l'option de panier et en arrivant aux options, nous sélectionnerons la page de succès ici. Pour l'annulation, nous allons sélectionner la page d'annulation ici. jours de repos, c'est bon. Tout comme les détails du produit est bon. Alors, les hommes sont bons. Nous devons transférer les barres de navigation vers toutes les pages. Donc, ce que je vais faire et sélectionner la barre de navigation, cliquez avec le bouton droit de la souris Copier vers plusieurs. Il s'agit de l'option principale comme les copies de liens, sélectionnez Toutes les pages, puis cliquez sur Copier. Nous avons également des pages telles que les conditions générales et toutes les choses que nous pouvons créer ultérieurement. Ce n'est pas comme si nous devions le faire maintenant lui-même. Ensuite, nous devons prendre cela un par un au sommet. En fait, nous pouvons simplement retirer celui-ci d'ici. Seulement à partir de Cancel et succès. Ce n'est qu'à partir des succès des conseillers nous pouvons supprimer cette barre de navigation. Mais sur toutes les autres pages, nous devons le dire. 59. Laisse Finir Le Projet Quatre: Maintenant, comme nous avons tout relié, nous pouvons mettre un logo sur plus d'un an ou quelque chose du genre, puis nous pouvons l'utiliser. Quoi qu'il en soit, nous le voulons, nous avons un panier, et si vous souhaitez ajouter plusieurs catégories, nous pouvons également ajouter ces catégories. Oui, je pense que c'est résolu. Donc, ce que nous allons faire, nous le publierons. J'ai créé un domaine distinct pour lui qui est la conception de points bss de carte instantanée. Je pense que vous devriez savoir comment faire cela, mais je vous le dirai encore une fois. Cliquez sur Publier ici. Non publié, en fait. Cliquez sur Gérer le site Web. J'ai créé celui-ci, mais je vais tout de même vous dire cliquez sur Gérer le site Web puis cliquez sur Ajouter un site Web, mettre le nom de votre site Web où vous obtiendrez un sous-domaine et vous devez savoir quand vous voulez supprimer cela, jamais ou quelque chose du genre. Nous voulons mettre un mot de passe. Vous pouvez mettre un mot de passe , puis cliquer simplement sur Créer. Et ensuite, votre site Web sera créé ici comme un point de bss point de carte instantanée. Et je vais le fermer. Et puis je sélectionnerai ce design de points VSS de carte instantanée, et je le publierai. Maintenant le publié, il est publié avec succès et je cliquerai sur celui-ci. Ça va ouvrir mon navigateur et boum, on y va. Maintenant, ce site est en ligne. Vous pouvez aller faire un chèque. Peut-être pourrais-je le supprimer à l'avenir, mais voyons, allons vérifier. Nous avons notre carrousel ici , puis nous avons nos produits pour femmes. Comme si c'était trop cher. 77, 700 000 dollars. Comme si c'était aussi bon que l'iPhone. Oui. Ensuite, nous avons tous les produits pour femmes. C'est un menu. En général, c'est une femme, puis les URL féminines. Eh bien, chez les hommes, nous devons le changer. La femme, c'est tout. C'est le cas. Femme. Et je le publierai encore une fois. Je viens ici pour rafraîchir cette page. Maintenant, vous pouvez voir le produit slash de femmes HTML. Y a-t-il votre vie ? Je clique sur ce produit, vous pouvez le voir venir. Tout à fait très bien. Nous avons d'autres produits que la pagination là-dessus. Nous pouvons également voir les produits ici, nous pouvons cliquer sur votre lightbox. On peut voir ça super génial. Et cliquez sur tous les Roadster. Tout est prêt. Ensuite, il suffit de cliquer sur ce produit. Et 20$ pour un piège cadeau. En fait, j'avais prévu une roupie, mais aujourd'hui en dollars. Soyons donc, ce n'est pas le mode test seulement plat 20 ans, nous pouvons voir 20% de réduction est déjà là sur certains produits que nous avons mentionnés faisons une chose. Nous ajouterons ce produit en grande taille et cliquez simplement sur Ajouter au panier, comme le produit ajouté au panier. Sélectionnez cette adresse et l'URL du panier. J'ajouterai l'URL orale du panier ici est le point de carte HTML, et je le publierai une fois de plus. Et puis si je viens ici et si je rafraîchis cet Ajouter au panier, et puis ici vous pouvez voir l'option comme une carte C au-dessus de vous. C'est le même bouton ici aussi, je pense que nous ne l'avons pas lié. En revenant là, nous allons indexer la page et sélectionner ce bouton. Nous cliquerons sur Lien, puis nous allons sur cette page appelée panier, publierons à nouveau. Et nous allons également le sauvegarder. Revenons à celui-ci et rafraîchissez-le. Encore une fois. Nous allons le faire pour couper. Il va dans le panier encore et encore parce que toutes les trois fois j'ai choisi une taille différente. Voyons une autre commande la plus importante sur leur support. Sélectionnez ici. Et si je clique sur voir le panier, vous pouvez voir dans la carte que nous avons ce grand, petit Excel et celui-ci. Et même si nous cliquons sur celui-ci, il va arriver. Vous l'êtes uniquement parce qu'il s'agit d'une page de cartes. Ensuite, je cliquerai simplement sur supprimer ceci. Supprimez ceci et supprimez-le. Oui, c'est sept quatre-vingt-dix sept cent quarante neuf dollars que nous allons payer. frais d'expédition et les taxes sont calculés lors du paiement. Lorsque nous allons vérifier cette heure, il va calculer le reste de la chose. OK. En l'état, nous n' avons pas de page de connexion, donc vous demanderez exactement comment elle enregistre la carte. Et la réponse est que c'est tout sauvegarder dans les cookies. Nous allons donc cliquer sur le bouton Commander ici. Ensuite, vous pouvez voir comme récapitulatif de commande, vous avez cette commande et c'est le prix, la quantité est telle, celle-ci comme revenir à couper une fois de plus et augmentera la quantité ici. Le prix est maintenant de cent dix cent quatre cent quatre-vingt-dix huit dollars et caisse. Vous pouvez voir deux objets. Nous en ferons un autre comme si nous allions à Roadster une fois de plus et que nous choisirons ce produit ou peut-être que nous allons passer au produit général. Et nous allons sélectionner celui-ci. avec l'emballage cadeau et je ne mettrai mon nom que l'année où je me donne un cadeau tel quel. Et lorsque vous cliquez sur Ajouter au panier , puis de votre œil, vous accéderez au panier. Et puis vous pouvez voir que c'est une femme de grande taille avec deux quantités et c'est comme 20$ supplémentaires pour cela et au total 2 000$ sont là. Ensuite, je cliquerai sur Checkout. Après le paiement, ce que nous pouvons faire c'est que nous pouvons ajouter un code promo, qui était plat 20. Nous n'utilisons pas le plat 60 car nous ne savons pas en tant que client parce que nous n'avons pas passé notre première commande en premier. Appliquer. Et puis vous pouvez voir que 20$ de rabais de 20% sont ajoutés, ce qui est celui-ci. Ensuite, je dois saisir l'adresse e-mail en tant que client. Je vais donc ajouter celui-ci et mettre un numéro de téléphone aléatoire. Définissez le pays comme quel pays possédait le Canada. Le Canada était obligé de regarder ou je ne sais pas, que ce soit seulement l'Inde. Je ne connais pas le code postal du Canada. Mon alignement et mon nœud six sont le code PIN. Veuillez noter que le vendeur est comme, s'il vous plaît faire un bon cadeau. Retour. Pas une épave en arrière. Pour cliquer sur. Le prochain, ici. Nous avons comme PayPal et le paiement par carte de débit. En bas, nous avons cette option appelée PYY UPI. Le paiement avec paiement instantané est toujours un top et ce paiement est en bas. Bon, nous allons donc ajouter les informations sur l'adresse de livraison. Celui-là. Et je vais prendre cette ville. État néon Inde. Le code PIN de la liste sera 424213, nœud six. C'est quelque chose, c'est l'adresse réelle, mais je ne suis pas resté sur son adresse. Je ne veux pas te montrer ça maintenant, Kyi UPI seulement. Maintenant, c'est fait. Je vois comme tous les prix en USD. Maintenant, si vous revenez ici et que vous cliquez sur les commandes, comme si vous trouverez d'autres commandes également. Mais c'est l'ordre que nous passons récemment. Il s'agit de l' adresse e-mail que 1.60773. Vous pouvez voir comme 177.3.60, vous devez ouvrir cette commande et sélectionner comme étant marquée comme payée. Si on rafraîchit ça. Votre panier est vide car de nos jours est payé. D'accord, tu es comme aller à qui Nil Mil année. Vous pouvez voir maintenant que la refusion est là avec l' ordre est des mers comme reflow ou pour Roadster avec ce prix et la taille de rôtissoire avec cela. La personnalisation est l'emballage cadeau est le nom du bon emballage sera à jour, et il s'agit du montant de la taxe qui est 270$ et il s'agit de la commande C. Et si je clique sur Voir la commande, cela me montre cette commande qui dira comme étant marquée comme expédiée et tout. J'ai maintenant les coordonnées du client avec le numéro de téléphone. Et aussi de cette façon, je peux être en contact avec lui. Encore une fois, j'ai littéralement marqué un changement. Et marquer un quart de travail signifie par exemple envoyer une notification par e-mail aux clients. Donc définitivement, oui. Et je vais taper votre commande est expédiée. Cliquez sur le lien pour suivre votre commande. Et le lien sera, ce moment je mets le lien de mon site Web via awesome.com et ce n'est pas vous. C'est à vous que je cliquerai simplement sur confirmer. Quel est l'e-mail ? Cet e-mail uniquement sur cet e-mail, je devrais m'y attendre. Encore un e-mail. Dois-je m'attendre ou devrais-je l'envoyer ? C'est une refusion. Maintenant, on dirait que votre carte instantanée a été expédiée à votre commande. Votre commande est expédiée. Cliquez sur le lien ou cliquez sur le lien pour suivre votre commande, mais il n'affiche pas de lien. Je pense que je dois copier et coller ça. En tant que client, je dois copier et coller cela. Donc oui, c'est comme ça que la recharge de votre commande est expédiée et toutes ces choses. Il arrive au fil de l'année. C'est ainsi que la commande est expédiée. Avec succès. Mis à jour, rejette Oui. Oui, les gars. C'est ainsi que nous allons faire notre site Web de commerce électronique. À l'heure actuelle. Pour ce site de commerce électronique, c'est fait et nous apporterons quelques modifications aux scripts lorsque nous arriverons à la section SEO. Dans les sections SEO, nous allons faire quelques changements dans le commerce électronique et dans certains autres sites Web, ainsi que pour le rendre optimisé dans le moteur de recherche SEO où Google peut trouver notre site Web facilement et ce que nous ferons avant d' héberger notre site Web sur le vrai serveur. Nous allons certainement héberger notre site Web sur un vrai serveur. Donc, à ce moment-là, pas à ce moment-là. Avant cela, avant d'héberger notre site Web, nous effectuerons quelques modifications dans le site Web dans la section script, comme un clic droit sur Propriétés, la description du titre que OG, comme Open Graph, que Twitter, puis Meta tags. Nous ajouterons également des balises Meta et du contenu de tête, comme des trackers convergents à l'aide Google Analytics et tout cela ajoutera également les trackers convergents. Nous allons donc le faire dans les sections suivantes. Et c'est tous les gars, la section e-commerce du studio Bootstrap. Quelle que soit la version 5.9 ou quelle qu'elle soit , nous avons calculé la section e-commerce en utilisant Bootstrap studio. Et maintenant, vous pouvez également créer votre site Web de commerce électronique. Au lieu de produits, vous pouvez tout faire. Vous pouvez vendre les produits uniquement, mais comme des produits virtuels ou comme un produit physique, produits virtuels comme une fois la commande passée et le montant collecté, vous pouvez envoyer le lien pour cela produit virtuel où l'utilisateur peut le télécharger et il peut l'utiliser, utiliser, l'utiliser quel qu'il soit. S'il s'agit d'un produit virtuel, vous pouvez leur expédier le produit et c'est tout. OK, les gars. C'est donc tout pour l'instant. Et la section e-commerce est terminée. Et dans la section suivante, voyons ce que nous allons commencer entre quelque chose vient en mémoire et nous pouvons le faire ou nous pouvons aller avec les SEO alors. Bon, merci beaucoup. Et c'est tout pour cette section. 60. Permet De Commencer Avec SEO: Bonjour et bienvenue aux gars dans cette nouvelle section intitulée SEO, c' est-à-dire l'optimisation des moteurs de recherche. Dans cette série ou dans cette section, nous comprendrons comment exactement nous allons optimiser notre site Web à l'aide de certaines techniques appelées optimisation des moteurs de recherche. Il y a tellement de choses que nous pouvons faire que je vais vous donner les meilleures choses que nous allons faire en utilisant l' application Bootstrap Studio elle-même. Comme vous pouvez le voir maintenant, le bootstrap studio virgin ease, virgins 6.1. Si vous voyez qu'il n'y a pas beaucoup de changements importants, même si vous utilisez ce tutoriel est fait à partir de bootstrap 5.6 quelque chose et ensuite il arrive à regarder. Et six, il n'y a pas beaucoup de changements radicaux là-dedans. Et en bas de la ligne lorsque vous êtes, lorsque vous suivez le cours, vous remarquerez qu'il n' y a pas beaucoup de changements à cet égard. Oui, vous ne trouverez pas de grands changements, mais comme un petit génie. Mais de toute façon, cela n' affectera pas notre cours. Et quels changements y a-t-il exactement dans cette version particulière que vous pouvez voir si vous accédez à notre site Web Keyed Classroom, Udemy, ou où que vous regardiez cette vidéo. Il suffit donc de chercher mon cours. ce moment, il est ici, peut-être en bas de la ligne, il ne sera pas là. Ainsi, même si vous pouvez rechercher votre appel BSS et cliquer sur Entrée, vous pouvez trouver ce cours sur vos attributs 399 à ce moment où j'enregistre cette vidéo. Il peut donc augmenter ou diminuer, ou ce site Web donne continuellement les offres. Donc je clique simplement sur ce Gore et si je fais défiler vers le bas et que je viens au programme, vous pouvez voir les mises à jour de la version de Bootstrap Studio. Je crée donc des vidéos exactement sur ces sujets qui sont mises à jour dans Bootstrap studio et qui peuvent ne pas créer de changements importants ici et là. C'est ainsi que nous allons le faire. D'accord ? Je ferme ou peut-être minimise cette chose en particulier. Et pour comprendre la section SEO, ce que nous allons faire, c'est que nous allons utiliser notre site Web Tech Resolve. Je vais ouvrir ce site Web dans Bootstrap Studio. Et dans le design récent, je vais simplement double-cliquer. Et on y va. Nous avons le site Web prêt ici. Ensuite, nous commencerons à faire des SEO. Mais avant cela, je vais vous donner une compréhension de base des ACO et des raisons pour lesquelles nous devons utiliser les SEO dans notre prochaine vidéo. On se voit dans la vidéo suivante, les gars. 61. Les bases du référencement: Bon, bienvenue à nouveau dans cette vidéo, et nous parlons de SEO. Allons sur notre site Web. Allons en classe pour enfants uniquement. Et je vais vous montrer une chose dans Google. Supposons que nous utilisions le moteur de recherche Google. Si nous utilisons une requête de recherche appelée Keyed Classroom, comme vous pouvez le voir, il n'y a que des chaînes YouTube si mignonnes de classe et de classe clés. Donc, si je clique simplement sur Keyed Classroom, vous pouvez voir notre site Web, Keyed Classroom arrive sur la première page. Ensuite, nous avons cette information appelée c'est une infographie d'information commerciale, nous pouvons aussi appeler car elle montre la salle de classe pour enfants, notre site Web, le lien, l'URL du site Web, puis c'est un site LinkedIn, puis il s'agit d'un site YouTube, puis Facebook. Ensuite, Spotify, si certains podcasts sont également, il peut y avoir Instagram, alors il y a une société dans tous les détails de l'entreprise. Ensuite, nous avons un compte Twitter et de l'aspirine, ainsi de suite. Alors, comment exactement ce jeu de choses dans Google Search et Google comprennent que si quelqu'un recherche cette requête particulière, je dois montrer ces résultats. Disons, par exemple, j'ai cherché plusieurs fois une salle de classe pour enfants et que j'ai visité ce site Web. C'est pourquoi il apparaît dans cette couleur particulière. La meilleure façon de le faire est donc de passer en mode navigation privée. C'est le mode privé, c'est-à-dire le décalage de contrôle. Et si vous appuyez sur n'importe quel navigateur, il arrivera en mode navigateur privé. Ici, nous allons d' abord rechercher Google , disons google.com. Vous pouvez également effectuer une recherche directement ici. Quatre classes clés, ce n'est pas une grosse affaire. Il ne vous amène qu'à la même longueur d'onde. Permettons de rechercher votre, car vous l'êtes, il n' affichera aucun détail ou quelque chose du genre. Mais vous l'êtes aussi, vous pouvez voir des cours en classe pour enfants à la demande et peu importe ce qu' il y a là , il arrive au premier rang. Alors, comment faisons-nous exactement cela ? Comprenons. Il y a trois choses, les gars, dans cet endroit particulier. Cette zone, qui est là, désolé, je vais sélectionner celle-ci ou je vais simplement faire une zone rouge autour de cela. Laissez-moi essayer de le sélectionner ou non, je suis capable de le sélectionner. Quoi qu'il en soit, vous pouvez voir cette zone particulière. C'est ce qu'on appelle la section de domaine qui est la barre oblique https deux-points classroom.com asymétrique à gauche. Et ce sont les flèches moins publiques. Cela signifie que chaque fois que nous cliquons dessus, il nous redirige directement vers une section ou un dossier particulier ou quelque chose du genre, qui est stocké dans le dossier public. De plus, nous verrons quand nous prendrons notre serveur et notre domaine. Cela va peut-être se produire dans la prochaine section. Ok, donc c'est le premier qui est toujours celui du domaine. Même si vous pouvez le voir ici, c'est un LinkedIn, il s'agit d'un YouTube, facebook.com, c'est un open.spotify.com. La première section est dominante. Et alors que nous cherchons une classe à clé. Il y a donc deux choses que vous pouvez voir que son gamin classroom.com est un nom de domaine, le prénom, que vous pouvez voir ici. Maintenant, je peux le sélectionner en bleu. Ce particulier ressemble à Baldwin, qui est en bleu. Il s'agit du titre de cette page en particulier, titre de cette page d'index, où nous allons atterrir immédiatement lorsque nous cliquons sur ce lien particulier. Disons donc, par exemple, que si je clique sur ce lien particulier, il m'amènera à une page de site Web. titre de cette page sera celui-ci. Exactement celui-là. C'est un titre. Et ensuite, si vous voyez cette zone particulière, il s'agit d'une description de cette page Web particulière, pas du site Web complet, de cette page en particulier. Tout comme la description de la page. En cela, vous pouvez également voir que cette zone particulière est audacieuse. C'est la salle de classe KID. classe proche des enfants est audacieuse. La classe des enfants proches est audacieuse. C'est audacieux car la classe à clé est notre requête de recherche. Si nous cherchons autre chose et que ce site Web arrive toujours. Et lorsque notre requête de recherche est différente, cette fois, il nous faudra que la section en gras soit autre chose. Disons, par exemple, si je recherche un studio de bootstrap de classe à clé. Maintenant, vous pouvez voir que c'est bon classroom.com, Détails du cours et cours puis bootstrap studio, quel que soit le lien. Mais vous l'êtes, vous constaterez qu'il n'y a rien de bouleversé ici. La raison en est dans la description de cette page de destination particulière de ce site Web, il n'y a nulle part écrit comme salle de classe à clé ou un studio de bootstrap, quelque chose comme ça. Mais dans le titre, vous pouvez voir que c' est Bootstrap studio tutorial, virgin 6, apprendre et n'importe quoi, peu importe, peu importe, peu importe. D'accord. Voici donc les pages. C'est le titre. Il s'agit d'une description que vous voyez, sauf il y a deux jours, quelle qu'elle soit, la description commence à partir d'ici. première est l'URL ou peut-être le lien de cette page, que nous pouvons voir l'année lorsque nous accédons à cette page de destination. Cliquons sur ce lien et voyons où nous allons exactement. Donc ce que je vais faire, je le ferai, je veux garder cette page ici uniquement pour pouvoir venir ici et faire des allers-retours pour vous montrer exactement comment elle est là. Je vais juste en venir à ce lien particulier. Je clique avec le bouton droit de la souris et je clique sur Ouvrir dans un nouvel onglet. Il s'ouvrira dans ce nouvel onglet. J'irai ici. Voyons voir. Il faut du temps à demander du poids Forky classroom.com pour répondre. Cela se produit généralement lorsque nous naviguons en mode privé car la plupart du temps, mais cela signifie l'entreprise. Ce qu'ils font, c'est qu'ils placent le site Web dans un serveur protégé et ce serveur, lorsqu'ils ont récupéré des données, il semble qu'il soit en mode privé. Ils voient donc comme s'il y a une activité suspecte dans l'urine ? Ils sont incomplètement comme ça. Je vais juste rafraîchir ça pour qu'il arrive quelque chose comme ça. Donc, vous l'êtes aussi, vous pouvez voir que vous êtes pk facebook.com, et il y a peut-être une vidéo liée à Bootstrap Studio, et il montre que bootstrap Studio 5.2 également. Et ça prend aussi la classe des enfants. On y va, la page est chargée. Vous pouvez maintenant voir ce titre particulier, bootstrap studio version 6, apprendre Bootstrap Studio. Vous pouvez voir cette année de titre, mais après un certain temps, il y a un point, point, un point et un tiret q classe. D'accord, alors pourquoi ça se passe ? La principale raison en est la recherche Google ou la recherche Bing, ou comme les moteurs de recherche populaires, ce qu'ils font, c'est qu'ils autorisent 60 caractères, y compris de l'espace pour les titres. Vous, en tant qu'individu, nous pouvons également mettre un titre long. C'est à nous de choisir, mais celui-ci ne comptera que 60 caractères. Parce que les utilisateurs qui regardent ces requêtes de recherche particulières et tout Google ne veulent pas les confondre en lançant plusieurs lignes sur une seule ligne, ils ont essayé de le faire. Une jambe signifie que sur le Web, sites Web comme les ordinateurs de bureau et les ordinateurs portables, en une ligne, ils ont essayé de le faire et il y aura toujours 60 caractères. Vous pouvez donc voir que le titre du cours est écrit. Et comment savoir que c'est le titre de cette page en particulier, je vais également vous le montrer. Voici la description de cette page que vous pouvez voir comme le tutoriel Bootstrap studio pour débutants, blah-blah-bla. Dans ce cours, je me suis concentré comme bla, bla, bla. Voyons maintenant comment nous allons trouver exactement quel est le titre, la description et le titre de la page et Oui, titre de la page se trouve également dans cet onglet particulier. Vous pouvez voir si vous prenez simplement pointeur de votre souris là-bas et que vous le placez là pendant un certain temps. Il y aura une liste déroulante ou peut-être une fenêtre contextuelle qui s' affichera comme Bootstrap Studio tutorial version 6, apprendra Bootstrap Studio dash une ligne droite et Kd classe. Le titre vient également ici. Chaque fois que vous utilisez le navigateur sur un ordinateur de bureau ou un ordinateur portable, n'importe où dans un écran plus grand. C'est ici que vient le titre. Voyons maintenant dans le code comment ça va arriver. Nous allons simplement faire un clic droit ici et nous verrons Afficher la source de la page et le raccourci clavier est Control Plus vous. Il suffit de cliquer sur celui-ci. On y va. Il s'agit d'un code complet derrière le site Web. Et voyons ce qu'il y a là. Il y a des métadonnées qui existent. Ils ont Google Analytics ou Google Fonts, quelque chose comme ça. Et vous pouvez voir le titre ici. Il y a une étiquette de titre. Et à l'intérieur de cette balise de titre, le titre du cours est écrit. Et ensuite, nos métadonnées Meta. Les métadonnées sont comme le premier mot clé. Donc, chaque fois que quelqu'un cherchait des lèvres et un modèle Bootstrap, bootstrap studio alternatif bootstrap Studio, GitHub Student bootstrap Studio, licence de clé ou autre. Ce sont les mots-clés, quel instructeur ? Ça veut dire moi. J'ai déclenché ces mots-clés particuliers pour cela. Et au cas où l'entreprise peut également ajouter quelques mots-clés de son site qu'elle trouve. Il est utile pour qu'il puisse apparaître dans le résultat de la recherche. Il s'agit d'une description. La description vient ici Exactement. Vous pouvez voir que c' est la description que personne ne montre la version 5.9. Très bientôt, je vais également modifier une description. Ensuite, il y a des cartes Twitter et tout ce que vous pouvez voir sur Twitter. Le titre Twitter est donc lorsque nous partageons l'URL de cette page sur Twitter. Twitter va chercher le titre, et il affichera également le titre sur la publication. Mais Twitter ne va pas récupérer le titre dans cette zone. Twitter va donc chercher le type que Twitter trouvera en premier, qu' il ait un titre Twitter et une description Twitter ou non. Si c'est le cas, alors il viendra, il va chercher le titre de votre, vous n'êtes pas ce titre plus facile. Twitter sera une description fédérale de votre part. Un OG est comme les autres médias sociaux et contrairement à Facebook, alors quel que soit Facebook, Instagram ou Quora, n'importe quoi, ils vont chercher le titre auprès d'OG. C'est là que va prendre le titre. C'est là que le titre, ce site Web va remplir le titre. Og image est quelle image ? Il va montrer cette image comme une vignette ou quelque chose comme ça. Cette image peut être prise ici. Et puis ils ont un ensemble particulier année de script avec du fromage. Peut-être que je pense que c'est un Google Tag Manager ou quelque chose comme ça, qui à partir de là, ils pourront suivre le comportement de l'utilisateur et, par conséquent, ils amélioreront le site Web et tous. Ok, donc c'est la seule chose qui est très importante pour référencement dès maintenant dans ce cours particulier et dans cette section particulière, Voyons les gars, comment nous allons faire exactement dans notre studio bootstrap. Alors, joignez cela, je fermerai cela aussi. Et je fermerai ce mode privé. Passons à notre mode normal. Allez dans Bootstrap Studio, et prévisualisez d'abord ce site Web. Je vais prévisualiser ce site Web. Il suffit de cliquer sur l'aperçu. Et on y va. Nous avons ceci, vous pouvez voir ce titre est votre résultat de prise. Et oui, le titre est là. Et maintenant, voyons notre source. Dans notre source, vous verrez que les méta-informations sont autant que ça. n'y a pas de mot-clé, il n'y a pas de description, il n'y a pas de description Twitter, il n'y a pas de description OG. Votre titre ne serait-il rien de tel ? La seule chose que nous avons, c'est comme un titre et qu'il ne s'agit que de résultats technologiques. Rien d'autre parce que nous avons nommé le projet comme des résultats technologiques, donc il n'arrive que comme résultat de picotement. Nous devons prendre notre titre de manière à ce qu'il apparaisse au moins, par exemple comme la première page des résultats de recherche. Comment trouver exactement le titre, la description et les mots-clés parfaits que nous verrons dans notre prochaine vidéo. On se voit dans la vidéo suivante, les gars. 62. Mise en place de référencement dans Bootstrap Studio: Bon, bon retour. Dans cette vidéo. Dans cette vidéo, nous allons voir comment nous allons trouver exactement le titre. Il s'agit de notre site Web. Et en fonction de la conception et des informations qui se trouvent sur le site Web. Ce site Web fournit des services de conception et de développement de sites Web. Tout d'abord, ce que nous allons faire à nouveau, il y a quelques sites Web pour trouver les mots clés et tout sauf ce que nous allons faire, nous viendrons directement sur Google la première année, nous taperons la conception de site Web. Voyez ce qu'il va venir. Aucune société de conception de sites Web au Bangladesh, actuellement au Bangladesh montre le Bangladesh. Nous allons donc simplement cliquer sur cette requête de recherche. Et la première chose que nous venons de venir est d'ajouter parce que voir ces ADAT AD ici. Vous le savez peut-être. Mais je dis toujours que AD est de la publicité. Et chaque fois qu'il n'y a pas d' AD avant ce HTTPS, cela signifie qu'il s'agit d'une recherche directe. Ainsi, dans la recherche comme AD, nous garderons simplement cette partie publicitaire et nous arriverons à une section de recherche directe. Et vous êtes la première entreprise de conception de sites Web de l'école de rêve W3 au Bangladesh. Je cliquerai simplement sur ce site Web et suffit de survoler mon pointeur de souris là-bas et vous pouvez voir que le titre est là. Mais le titre est trop grand. Si je viens voir la source et que nous trouverons le titre. Le titre est trop grand. C'est comme le web, le nom de la société puis conception du site Web Bangalore développement de site Web dans la société développement de site Web de Bangalore à Bangalore à nouveau deux fois, ils ont écrit société de développement de sites Web au Bangladesh. Nous avons l'idée que si quelqu'un a cherché cette question particulière, cette société de conception de sites Web au Bangladesh, ou peut-être une entreprise de conception de sites Web près de chez moi ou quelque chose du genre. Ensuite, quel titre nous pouvons conserver sur notre site Web où il peut apparaître dans le résultat de la recherche. Celui-ci est donc comme une boutique en ligne, des services Web, une meilleure société de développement de sites Web à Bangalore. OK. C'est donc le site Web. Je ne sais pas à qui est ce site Web. Et oui, il n'y a rien dans les promotions ou non. Je ne fais la promotion de rien. Ce que nous allons faire maintenant, nous nommerons notre site Web en creusant une sorte de correspondance dans ces titres particuliers. Allons au studio Bootstrap. Le titre principal, il y a deux choses. L'un est le titre principal et l'autre est un titre basé sur une page. où se trouve le titre principal, nous cliquerons ici sur les paramètres. Ensuite, vous trouverez SEO. Et c'est méchant. C'est le titre. Par défaut, résultat technique correspond au nom du projet. Il est donc supposé que ce que nous allons taper est désolé, sites Web développement société de développement de sites Web au Bangladesh. Maintenant, vous pouvez voir que c'est ce que nous allons voir dans les résultats de recherche. Donc société de conception et de développement de sites Web à Bangalore. Et disons que si je commence à taper autre chose, cela viendra sous forme de point, de point, de point, point parce qu'il dépasse cette limite de caractères. Il montre donc le point, le point, le point. Nous montrons une société de conception et de développement de sites Web au Bangladesh. Voici ce que va être notre titre et décrivons un aperçu de la description. Nous commencerons par Tech Resolve, le nom de la société qui a forcé technologie RES ESOL avec la résolution technologique. L'un des résultats du deck ESOL et ONE, un. Tech Resolve, l'une des meilleures sociétés de développement de sites Web développement de Bengaluru. chemin. Ce bâtiment est un B à Bengaluru. Capitale Omega. OK. Quoi qu'il en soit, donc le résultat technologique, l' une des meilleures sociétés de conception et de développement de sites Web au Bangladesh. Nous concevons D, E, G et nous concevons des sites Web et des applications mobiles. Ok, c'est ce que va être notre description. Ajoutons également ce plan du site. Le plan du site n'est donc rien d'autre que comme. Il y aura une page appelée dot XML, qui aura tous les titres du site Web et les noms de page. Et ce plan de site particulier sera suivi par le bot Google. Et puis ils verront comme, ok, quelle chose nous devons récupérer ce site Web afin que chaque fois que l'utilisateur recherche afin que nous puissions lui montrer le plan du site, nous allons simplement activer le plan du site. Et c'est tout. C'est comme notre titre principal et notre description. Après cela, nous avons notre graphique ouvert, c' est-à-dire OG, que je vous ai dit que OG signifie ouvrir un graphique. Donc, ce que nous ferons pour Open Graph le titre principal sera le même. Je vais juste le copier et je le collerai ici de toute façon, ça vous montre, mais ce n'est pas exactement vous. C'est comme vous pouvez le dire, comme un champ de saisie, quelque chose comme ça. Il va le coller ici. Et je vais vous montrer pourquoi ce n'est pas ainsi. Si vous tapez simplement quelque chose, il disparaîtra, il deviendra vide. Je copie également cela, Control C, et je le collerai ici. C'est la même chose que je vais aller. La même chose que je ferai sur Twitter aussi. Collez-le ici et le titre, je vais juste lui apporter la copie du titre. Et je vais coller le titre ici aussi. Maintenant, ces annonces pointent THE robot.txt. Nous allons le faire, mais pas maintenant. Dans cette section, nous ne ferons que cela. Maintenant, nous devons faire la chose la plus importante, c'est voir cette image OG et cette image Twitter. Ce que nous allons faire, c'est au lieu d'ajouter les images l'année, nous allons descendre, faire défiler vers le bas, et nous irons dans ce coin, voir ce lien. Il y a la section SEO c'est autant, mais nous devons aussi aller avec des tissus. Je vais donc cliquer sur le tissu, et il y a quelques tailles qui sont mentionnées et nous devons ajouter les tailles en conséquence. Comme souvent. Maintenant, ce que nous allons faire, je vais simplement cliquer sur Enregistrer. Cette icône est là. Nous avons notre, que disons-nous ? Nous devons préparer nos icônes. Allons sur le site Web Canva. Il suffit de cliquer sur Aller sur Canva, canva.com. Et créons une chose. Créons un design. Et il devrait s'agir d'un design personnalisé avec une taille de cinq pixels par phi, 12 pixels. C'était le maximum un, deux L par 512. Vous êtes ce que je vais faire. Je vais juste passer à l'élément et j' prendrai un à n'importe quel design. Le design signifie n'importe quelle icône comme la technologie, quelque chose comme ça. Voyons ce qui sera réalisable. Graphiques pour la technologie. Je pense que prenons celui-là comme ça. C'est peut-être notre logo, logo pour icônes. Je vais donc prendre celui-ci et je vais télécharger ce fichier PNG D2L. Je vais télécharger ceci. Ce sera comme sans titre. Ouvrons celui-ci, donc je vais le prendre pour l'instant et simplement renommer cela comme résultat technologique g, ou c'est le logo TR et je vais juste le prendre ici. À l'intérieur de ça. On y va, il y a le logo PR. Il reviendra aux paramètres une fois de plus. Et maintenant, je vais échouer une semaine plus tard. Phi two L correspond à la taille de l'image. C'est donc la taille de l'image que je vais prendre. Ce que vous devez faire, c'est que vous pouvez aller sur Photoshop et taper simplement ce numéro de taille, 182, puis 13216, et ensuite vous pouvez le redimensionner ou vous pouvez le redimensionner ou vous pouvez le faire où il est allé. Vous pouvez donc simplement cliquer sur redimensionner si vous en avez une version premium. Il y a encore une chose. Il existe des sites Web où vous pouvez effectuer un redimensionnement. Vous pouvez faire les informations à partir de là. Mais ce que je vais faire, je prendrai la même image plusieurs fois. C'est également correct. Nous n'avons aucun problème là-dedans. Va prendre la même image pour toutes les tailles. Si je clique sur Enregistrer et que je le laisse partir. Maintenant, nous reviendrons à nouveau nos paramètres , puis nous reviendrons aux SEO. Et si je viens à l'année OG, nous devons mettre le titre. Mais si vous venez sur Twitter ou quelque chose du genre, si nous avons donné les différentes tailles d'écran, cela peut prendre la taille exacte de l'écran. Vous l'êtes. Vous pouvez voir si quelqu'un partage cette publication en particulier en utilisant l'URL de la page d'index, la publication sur Facebook ou toute autre chose qui ressemblera à ce exemple.com. Il viendra sous la forme tech result.com ou quel que soit le nom de domaine. Le titre viendra ici, la description viendra et l'image viendra ainsi. Et du type OG, je vais vous montrer ce site Web. Et sur Twitter, j'irai simplement sur Twitter et je viendrai ici et je clique simplement sur Enregistrer. Maintenant, vous pouvez voir quand quelqu'un a partagé cette page en particulier sur Twitter, il n'y aura rien car nous avons montré que le type de coupe Twitter ne sera pas. Nous avons deux types différents comme résumé et quelqu'un avec une grande image. Donc, si je clique simplement sur le résumé, ça ressemblera à ceci sur Twitter. Et si je clique sur quelqu'un avec une grande image, ça ressemblera à ceci, ce que je ne vois pas. Ils aiment ça parce que l'image ressemble à la réduction de l'image. Il suffit d'aller au résumé. C' est bon, pas de problème. Tout va bien. Ensuite, PWA, je vais juste allumer cette section qui est une application Web progressive. À quoi ressemble exactement l'application Web progressive ? Encore une fois, j'y reviendrai. Donnons le titre. Il suffit donc de coller ce nom court, peut-être seulement résoudre, désolé. Nous n'avons pas à donner ce titre et tout. Le nom sera diminué ou seul. **** Les résultats et le raccourcissement seront TR. Et quelle sera l'URL que je vais montrer l'URL doit être index. Chaque fois que quelqu'un lance ce site Web, l'URL doit être une page d'index. Ensuite, nous allons simplement activer ce masque, l'icône Masque et l'image d' arrière-plan. Faisons les images de fond jaunes, quelque chose comme ça. Prenons cette image d' arrière-plan, jaune, un peu jaune. Et l'équipe E majeur prendra la même chose, mais d'un côté un peu plus léger. Pas cette lumière. Vous pouvez voir la couleur en temps réel ici. Que va-t-il venir. Et il suffit de sélectionner Oui, plein écran. Je le garderai en plein écran et en orientation. Je le garderai comme un paysage de portrait anonyme , les deux orientations fonctionneront. Maintenant, ce qui s'est exactement passé ici, c'est quand nous allons accéder à notre navigateur mobile ou quelque chose comme ça. Alors, faisons une chose. Voyons ça. Il suffit de cliquer sur Enregistrer. Lorsque vous accédez à l'aperçu. Venez dans cette section précédente , vous allez voir celle-ci. C'est le nombre qui est là, 192 points 168 points un point huit deux-points 8 mille. Vous avez peut-être un numéro différent. C'est sûr. N'importe quel numéro différent, vous devrez faire une chose. Si vous avez, comme, évidemment, vous aurez le wifi, connectez le système comme ordinateur portable ou un ordinateur de bureau et votre téléphone portable au même réseau Wi-Fi. Et ouvrez le navigateur. Je vais donc juste ajouter, j'ajoute mon écran mobile ici. Ce que je vais faire, je vais juste ouvrir mon navigateur ici. Juste une seconde. Je vais ouvrir mon navigateur et je vais taper ce numéro qui est 192 points 168 points c. Il y en a sept. Et ici, il est écrit comme plupart du temps est des changements de semence maintenant ce nombre est sauvé cent quatre-vingt deux cent soixante huit points un point huit deux-points 8 mille. Je vais simplement cliquer sur Entrée. On y va. Vous pouvez désormais voir le même site Web en temps réel sur l'écran mobile. Vous pouvez maintenant voir cette zone particulière. Je ne fais que souligner ce domaine particulier. C'est jaune. OK. Allons sur Bootstrap Studio et passons à Setting. Et revenez à notre PWA. Vous êtes de cette couleur. Prenons une couleur différente. Disons celui-là. Et je vais juste cliquer sur, OK. Et je cliquerai immédiatement sur Enregistrer. Vous pouvez voir qu'il y a un changement de couleur. C'est ce qui arrive lorsque nous utilisons PWA comme j'utilise iPhone. Il y a donc une limite qu'iOS et ne me permet pas. Mais si vous allez sur votre appareil Android juste une seconde. Maintenant, la couleur revient à l'original. Si vous accédez à vos appareils Android et si vous cliquez simplement sur n'importe quel endroit où vous avez cette option. Et en fait, je n' ai pas d' appareil Android avec moi pour le moment. Sinon, je vous aurais montré. Si vous allez dans le navigateur et si vous sélectionnez les trois points, quelque chose comme ça là-bas. Et en cela, vous pouvez choisir quel est le raccourci ou quelque chose comme ça. Cela signifie qu'il créera un lanceur, une icône Launcher sur votre écran d'accueil. Si vous cliquez sur l'icône de ce lanceur, l'application s'ouvre en tant qu'application Android. n'y aura pas de barre d'URL ou quelque chose du genre. Ce sera comme une application Android pure. C'est ainsi que nous allons utiliser ce PWA. Donc PWA, application Web progressive sous iOS, elle ne prend pas en charge. Mais oui, sous Android et Android et iOS, Android, cela fonctionne de cette façon. est donc PWA que c'est ainsi que nous allons utiliser PWM. C'est ainsi que cela va se produire. Et nous en avons fait avec notre référencement de page maître, des pages maîtres comme celle-ci. Seo va postuler pour toutes les pages. Maintenant, je vais vous montrer comment exactement le week-end donne un titre différent et une description différente, OG et Twitter et toutes ces choses. Description du titre des pages individuelles que nous ferons dans notre prochaine vidéo. 63. SEO on-page: Bon, bienvenue aux gars de retour. Dans cette vidéo, nous allons voir comment nous allons donner un titre et une description individuels à des pages individuelles. L'indice est ce que nous avons fait en ce moment. Et nous allons garder titre particulier et cette description à la page d'index car il s' agit de la page de lancement d' un site Web chaque fois que quelqu'un clique sur l'URL, Allons à notre point de contact HTML. Il s'agit donc de notre page de contact. Sélectionnez la page de contact. Je clique avec le bouton droit de la souris, viens aux propriétés Et maintenant, nous avons ces paramètres SEO au-dessus votre premier pour cette page particulière. Il est maintenant écrit ici en tant que société de conception et de développement de sites Web à Bangalore. Mais maintenant, ce que nous allons taper est comme résultat de contact Tech et résoudre votre problème. chose comme ça. Contactez le résultat Tech et résolvez votre problème. La description nous contactera et obtiendrez votre solution à partir du résultat. Ce sera la description et la même chose. De toute évidence, je vais le faire pour OG. Og prend ce titre particulier du maître. Remplacez-le par celui-ci. Et pour Twitter également, je remplacerai le titre et la description. Je vais le prendre à partir d'ici. Je vais simplement copier cette description. Cette description ici. Je paierai également comme description ici. Et ajoutons ces images. Ce sera comme cette année, ce sera comme un héritage. Cela signifie qu'il vient du maître. Un an, j'ajouterai l' image une fois de plus. Encore une fois, hérité du maître. Et c'est tout. Il y en aura. C'est fait. C'est ce qu'est la page SEO individuelle. Il suffit de cliquer sur Enregistrer. C'est ça. Que va-t-il se passer ? Vous revenez ici ? Voyez maintenant, vous pouvez voir maintenant l'icône, cette icône particulière est ici, pas le titre est modifié. Si vous partagez comme lorsque nous hébergeons ce site Web, attaquons result.com est le nom du site Web. L'URL sera donc quelque chose comme cette page de contact slash www dot tech result.com car elle sera en contact avec l'index des pages de destination par défaut. Il sera donc contacté si vous copiez ce lien et si vous le partagez sur WhatsApp ou n'importe où, l'image que nous avons ajoutée là-bas, cette image arrivera et elle les affichera. Cela donnera donc un autre attrait à l'utilisateur si oui, ce site Web est conçu de manière très professionnelle. la même manière que vous pouvez le faire avec une solution métier, et de la même manière qu'après le formulaire de soumission, vous pouvez également le faire pour OC. C'est là que sont nos clients satisfaits. C'est ainsi que nous allons faire les SKU de pH individuels. C'est ce que cette section a appelé SEO. Revoyons encore une fois. A-t-on manqué quelque chose ou non ? En SEO, nous aimerions voir le référencement principal puis le plan du site également. Et cela ajoute le point TXT, c'est que nous allons l'utiliser lorsque les publicités viendront que vous devrez juste payer comme chose particulière. Oui, robot.txt. Robots.txt est comme en attente et que nous verrons dans la prochaine vidéo. Je pense que nous pouvons terminer cette section SEO particulière ici parce que nous avons vu la console bébé. Donc alors la métabalise PW est aussi comme oui, on peut voir le titre Meta. La balise Meta est chaque fois que nous mettons ce particulier comme des VUS et toutes ces choses, vous pouvez voir les métadonnées qui viennent ici. Une métabalise que vous pouvez ajouter ici est simplement de cliquer sur Ajouter des balises Meta. Il s'agit d'une balise Meta, et la balise sera un mot-clé. Mot-clé et le contenu que vous pouvez donner au mot-clé. Par exemple, le site Web. Concevoir. La conception de sites Web incluant l'espace est un mot-clé. Lorsque vous voulez séparer un mot-clé, il vous suffit de mettre une virgule. Une virgule signifie qu'il s'agit de deux mots-clés différents. La conception de sites Web est donc un mot clé et le développement d'un site Web est un mot clé. C'est ainsi que vous allez utiliser le mot-clé pour différents mots-clés. Un mot clé peut être composé de plusieurs mots. Et si vous souhaitez différencier le clavier, vous devez utiliser la virgule là-bas. Ensuite, le contenu de la tête que nous avons déjà vu ce contenu de tête. Et voyons comment cela s'appelle robot.txt. Voyons ce qu'est robots.txt Dans notre prochaine vidéo. Voyons ce que c'est robot.txt dans notre prochaine vidéo. 64. Robots txt: Avant de comprendre et avant d'ajouter le contenu dans robot.txt, je vais vous dire ce qu'est exactement robots.txt. C, des moteurs de recherche comme Google, Yahoo, Bing, DuckDuckGo, ou tout autre moteur de recherche. Il y a un moment. Sur une base temporelle fréquente. Ils visitent notre site Web. Cela signifie que nous aimerions qu'un utilisateur n'ait pas à cliquer pour cette URL de site Web en particulier ou quelque chose du genre. Ils arrivent automatiquement. Il y a un robot de fond ou acheté quoi que ce soit. Il y a un bot qui arrive sur notre site Web. Et récupérez les informations d'un site Web, c' est-à-dire les balises H1, balise H2 et quelque chose comme ça. Ils vont chercher les informations d'un site Web et les stockeront dans leur base de données. Mais chaque fois que les robots arrivent sur le site Web, il y a certains cas. Ils sont v en tant que propriétaire de site Web, nous ne voulons pas que cela soit acheté. Vous devriez numériser certaines pages de notre site Web. Supposons, par exemple, sur notre site Web, une page appelée après un point de soumission de formulaire HTML. Nous ne voulons pas que cela soit acheté. Doit analyser ce site Web car ce site Web ne contient aucune information. C'est comme si nous avions quelque chose où nous pouvons voir cette page particulière lorsqu'elle est déclenchée, cela signifie que quelqu'un a rempli le formulaire après que seule la vitesse arrivera. Nous ne voulons pas que cette page soit indexée dans les résultats de recherche Google ou dans les moteurs de recherche dans les résultats de recherche, cet index de patients. Quelle page nous voulons indexer cette page, nous l'ajouterons dans Google achetée et quelle page nous ne voulons pas interdire. Nous ajouterons cette URL de page dans la section interdire que nous verrons exactement comment nous allons l'ajouter. Voir, nous allons accéder aux paramètres. Et puis nous avons SEO, nous avons cette section appelée robots.txt. Il existe plusieurs robots. Pour cet exemple particulier, je vais vous dire comment nous allons faire exactement pour Googlebots. Nous allons lier le premier utilisateur, UTILISER notre tableau de bord utilisateur, l'agent AGE et l'agent, l' espace deux-points et Google a acheté GO, GLM, Google BOT Board. Entrez. Ensuite, nous allons taper interdire. Il devrait donc être capital. Ceci est tout à fait propre ne permet pas l'espace des deux-points. Ensuite, nous saisirons le nom de la page ici. C'est-à-dire, quel est le nom de la page ? Donc, nous allons juste le sauvegarder ici. Je viendrai ici, cliquez avec le bouton droit de la souris ou cliquez simplement sur Renommer, et je contrôlerai une copie de ce nom de page. Ensuite, je reviendrai à notre robots.txt. Espace. Une barre oblique sera là, car avant cela, notre nom de domaine sera là, n'est-ce pas ? Et puis je cliquerai simplement sur coller dessus, pas sur ça. Je vais coller ça et mettre une barre oblique de plus. Une fois que c'est fait. Ensuite, l'agent utilisateur, Googlebot, chaque fois que le tableau Google va venir et scanner le site Web, Google acheté sait que je ne veux pas scanner cela avec ce pH particulier parce que je ne veux pas indexer. Maintenant, ce que nous voulons indexer. Parlons encore une fois. Celui-ci, Googlebot Studio, Googlebot. Et je vais taper autoriser. Autoriser. Il suffit de mettre cette barre oblique. Cela signifie que Googlebot sait qu'il ne veut pas lui ou elle, qui que ce soit. Googlebot saura que cette page est configurée. Ne scannez pas cette page, mais quelle page numériser en alliage c'est juste un coup de fouet, sauf cette page. Numérisez toutes les pages. C'est ce qu'il va être. Et c'est pour Google Board, non ? Mais que se passe-t-il si le Microsoft Bot vient ? Il verra, ok, cette condition est pour Google mais pas pour moi. Je vais scanner à nouveau toutes les pages, si quelqu'un recherche, chose particulière sur entrée du moteur de recherche Microsoft est le moteur de recherche Bing. Cette règle ne va pas fonctionner là-bas. Sait-on combien de Virginiens sont présents sur le marché et quels sont les moteurs de recherche que les utilisateurs utilisent ? Non. Nous avons une chose pour cela. Au lieu de cela, Google a acheté. Nous allons mettre la marque d'étoile ici et commencer Mar signifie pour tous les bateaux, ce n'est pas spécifiquement pour cette boîte particulière, donc je vais juste mettre 11 étoiles de plus. La star est comme pour tous les bateaux. Et une autre chose est là, que nous pouvons lui montrer, c'est le plan du site. Nous avons vu le plan du site ici, juste en moyenne. Nous avons activé ces options de plan du site, donc nous reviendrons au fichier robots.txt. Quelques espaces supplémentaires en appuyant sur Entrée. Et je vais taper le plan du site ici. C'est donc comme si le plan de site SID MAP mettrait deux points, et maintenant nous allons mettre l' URL du site Web en premier. Disons donc que ce site Web est https deux-points slash slash www dot tech result.com. Supposons que dès maintenant, parce que nous n' avons pas de domaine, supposons simplement qu' il s'agit de l'URL du site Web www.Microsoft.com. Et avant cela, nous avons également ajouté HTTPS. Sinon, nous pouvons simplement taper http. Il suffit de taper http car S signifie sécurisé. Disons que c'est comme si elle est sécurisée ou non, c'est le plan du site. Pas de place. Après ça, il suffit de mettre une barre oblique. Rappelez-vous que votre nom de domaine ne sera pas là , le résultat de la technologie n' est qu'à titre de référence. Si votre nom de domaine est juste par exemple, ce que nous pouvons peut ressembler, disons abc.com. Au lieu du résultat technologique, vous allez taper ABC.com.in.me, quel qu'il soit. Votre barre oblique de nom de domaine, puis tapez le plan du site en tant que plan de site ITE MAP, tous les petits caractères, pas un seul. Il peut s'agir de majuscule ou d'oreille, sitemap dot xml. C'est tout. Vous avez appelé votre plan de site ici. Et vous le dites, ne scannez pas cette page en particulier car je ne veux pas numériser cette page en particulier et accepter cette page. Vous pouvez scanner tout ce qui se trouve sur mon site Web pour qu'il puisse figurer dans le résultat de la recherche. Ce n'est pas si rapide. Ok, disons que si vous avez ajouté robot dot robots.txt dans votre site Web et immédiatement lendemain, il viendra. Ce n'est pas comme ça. Chaque fois que le Google Board viendra explorer votre site Web, seul celui-ci sera récupéré, les données, alors seules les données seront récupérées, puis le site Web sera répertorié dans votre quoi faire Vous dites ? Résultats des moteurs de recherche. Ok, donc c'est une chose, et c'est comme ça que ça marche. Cliquons sur Enregistrer ici. C'est tout ce que votre robots.txt est fait. Quelque chose d'autre ? Y a-t-il non, ne reste plus rien. C'est ainsi que nous allons faire notre SEO robot.txt. Si vous me demandez ce qu'il y avait à propos de Ads dot TXT, chaque fois que vous souhaitez lancer des publicités sur votre site Web, vous pouvez accéder à Google AdSense et vous créerez un compte cette fois-ci. Google vous donnera un fichier appelé Ads dot TXT. À l'intérieur, eh bien, il y aura un numéro, il suffit de le copier et de le coller ici et de cliquer sur Enregistrer. C'est tout ce qu'il est fait. C'est donc ainsi que nous allons faire. C'est ainsi que nous avons fait nos SEO sur notre site Web. Et nous l'avons fait pour cette solution commerciale particulière, nous pouvons le faire à tout moment. Comme souvent. Je suis juste en train de le garder vide. Donc, lorsque nous hébergerons le site Web, je peux vous montrer d'autres choses, plus de choses sont signifiées comme si nous ne faisons rien dans les SEO, comme les ACOS de page privée, que faire si nous ne faisons pas là-bas et que Y en a-t-il ? Si nous avons fait quelques changements dans cette section dédiée au référencement de la page privée et comment elle va entrer, apparaîtra ou comment elle va entrer dans cette chose particulière. Cette chose est faite et les SEO comme optimisation des moteurs de recherche se font dans des vidéos ultérieures, comme quand nous hébergerons le site Web, lorsque nous verrons les gestionnaires de balises Google Analytics et tout cela, ensuite, nous verrons exactement comment nous allons faire avec le reste des choses. C'est tout pour cette section particulière, référencement est fait et si quelque chose me vient à l'esprit à l'avenir, comme toujours, j'ajouterai la nouvelle vidéo dans cette section particulière. Merci donc, les gars. Merci d'avoir visionné cette vidéo et cette section. Et on se retrouve dans la section suivante. 65. Comment acheter nom de domaine et hébergement: Bonjour et bienvenue aux gars de retour. Dans cette section particulière. Dans cette section, nous allons acheter un hôte dominant, un site Web et faire beaucoup plus d'enthousiasme dans cette chose particulière. Il s'agit d'une connaissance pratique complète où vous pouvez obtenir une dominante aussi bien pour votre client que pour le vôtre. Et vous pouvez héberger votre site Web sur votre serveur réel. Et si je ne me trompe pas, je vous ai dit lors des conférences précédentes où je vais vous montrer comment joindre ou comment ajouter une vidéo réelle directement comme une vidéo HTML au studio Bootstrap. Nous avons vu des vidéos YouTube et Vimeo y relier, mais nous n'avons pas vu la vidéo HTML y relier parce que nous n'avions pas le serveur à ce moment-là. Mais oui, dans cette section ou dans la prochaine section, nous allons le faire. Ce que nous allons faire, nous achèterons un domaine que vous hébergez. Je n'achèterai pas parce que j'ai déjà un hébergement, mais oui, je vais vous montrer exactement comment vous allez acheter l' hébergement également. y a donc deux choses. L'un est dominant et l'autre héberge. Voyons voir. Tout d'abord, qu'est-ce que l'hébergement ? L'hébergement n'est rien , mais vous obtiendrez un espace comme un espace disque dur sur le serveur. Et votre site Web sera vidé sur ces données hors du site Web qui seront vidées sur ce serveur. Et ce serveur, vous obtiendrez un dossier dans ce disque dur particulier. Et ce dossier sera mappé à votre nom de domaine. Et chaque fois que quelqu'un a cherché votre nom de domaine, quelles que soient les données présentes dans ce dossier, ce sont les fichiers de notre site Web qui vont récupérer et l'utilisateur verra le site Web. C'est l'hébergement. J' utilise donc l'hébergement parce qu'il est très bon marché et l' ensemble des serveurs qu' ils fournissent sont très rapides. J'ai vraiment aimé ça. J'ai déjà quelques sites Web hébergés par moi-même et mes clients. C'est l'hébergement et voyons, l'hébergement. Si vous allez à l'hébergement ici, il y a deux types d'hébergement, en fait 34 types d' hébergement, d'autres, vous pouvez voir que c'est tout notre hébergement uniquement, mais je vais vous montrer les deux plus importants hébergement dont vous aurez besoin au niveau initial. Il héberge votre hébergement Web, et il s'agit d'un hébergement cloud. L'hébergement Web est destiné aux petites et moyennes entreprises où les visiteurs ne sont pas plus mensuels, dirigent dix mille, deux cent vingt-cinq, trente mille comme ça sur une base mensuelle visiteur, la base cloud ressemble à un plus grand nombre de visiteurs avec plus de processus informatiques et beaucoup de choses comme des projets à grande échelle. Je vais vous montrer ce qu' est l'hébergement Web. Nous allons donc ouvrir cela dans un nouvel onglet et nous y allons. Et une fois que j'ai défilé vers le bas, vous pouvez voir qu'il y a trois plantes au cours de l'année, 691492179 roupies par mois. Mais ce prix n'est applicable que si vous souscrivez ce forfait pendant au moins 48 mois. Si vous baissez le nombre de mois ou d'années, le prix augmente. Et je vais vous montrer que, comme nous le verrons dans le forfait 69 roupies, il existe un site Web avec 30 Go de stockage et 10 000 visiteurs par mois. Dans ce plan, vous pouvez voir le site Web augmenter. Vous pouvez héberger jusqu'à 100 sites Web si vous avez plusieurs sites Web et que vous ne souhaitez pas dépenser encore et encore sur ces serveurs et ces hébergements. Vous pouvez donc prendre ce plan d'hébergement où vous pouvez héberger un site Web 100. J'ai pris cette plante uniquement qui est premium où je me targue de planifier un site Web pour héberger mes multiples sites Web. Pour plusieurs sites Web, vous pouvez héberger plusieurs sites Web pour, mais vous devez acheter un domaine tout le temps lorsque vous venez avec un nouveau site Web, vous obtiendrez 100 Go de stockage SSD dans 25 000 visiteurs mensuels. Et ces 25 000 visiteurs mensuels, E est destiné à tous les sites Web que vous avez hébergés dans cette usine particulière. Il ne s'agit pas d'un seul site Web, mais de tous les sites Web. E-mails gratuits. Vous pouvez également créer des e-mails gratuits. Mais oui, dans ce cours particulier et dans cette série particulière, nous allons voir comment joindre ou comment cartographier ou comment pointer notre domaine vers les courriels officiels du zoo. Et je vais également vous donner quels sont les avantages et les inconvénients de le pointer vers Zoho, puis SSL et toutes les choses que nous obtiendrons comme une bande passante illimitée, la nulle. Maintenant, si nous allons à l'hébergement cloud, je vais simplement créer un clic sur un nouvel onglet. Maintenant, si vous allez à l'hébergement cloud, donc le plan de départ est donc de 700 000 roupies par mois. Vous pouvez voir que le plan supérieur est de 79 roupies par mois. Ici, il est 700 000 par mois, mais le démarrage arrive avec 200 Go de stockage SSD, trois Go de RAM pour voir deux cœurs de processeur. Ensuite, les e-mails gratuits et SSL sont les intégrations Cloudflare sont là, et toutes les autres choses sont également là. Ce plan que vous pouvez utiliser lorsque le site est assez grand et que vous pouvez, si vous trouvez que le site Web a plus de code de trafic, accord, donc c'est le plan. Donc, ce que nous allons faire, nous allons simplement cliquer sur Ajouter au panier dès maintenant. Mais lorsque nous allons passer un paiement de ce type, je le supprimerai parce que je voulais juste montrer comment nous allons acheter l'hébergement. Est-ce dans ce plan ? Supposons qu'il s'agisse d'un plan de site Web unique. Vous pouvez simplement cliquer sur Ajouter au panier ici, et il vous redirigera vers la section panier. Maintenant, avant d'entrer dans la section des cartes, il indiquera quel plan vous devez acheter verra que 1600 roupies par mois est de 448 mois. Et si vous optez pour un plan d'un mois ou comme un plan de 12 mois, c'est ce que vous allez payer si je clique sur le réchauffement de la planète est comme ça 349. Et si vous y allez avec 12 mois, la planète est comme ça 1668. Après impôts, il arrivera à ce montant de 1,2400968 roupies. C'est donc ici que le plan d' hébergement est là. Et une fois que cela aura été fait, nous allons opter pour une vraie chose qui est notre domaine. Allons pour le dominant. Et je vais cliquer sur ce nom de domaine ici. Et je cliquerai sur ce vérificateur de domaine. Et je vais cliquer sur le vérificateur de domaine. Ici, vous trouverez plusieurs extensions et toutes sont là. Donc dotnet.n.com en ligne et tout ce que nous ferons dans cette vidéo particulière car nous achetons le domaine juste pour vous montrer un but de démonstration ou un tutoriel. Je vais acheter un domaine qui est très bon marché, c' est-à-dire 75 roupies et quelque chose comme ça. Comment acheter un domaine en premier, il y aura un nom dans votre esprit, comme je veux ce nom particulier de mon site Web. Vous devez donc rechercher ce nom ici. Donc je tape mon nom ici qui est actuel, la clé EST EN cours, et je cliquerai simplement sur la recherche. Une fois les recherches effectuées, vous pouvez voir qu'il y a un point actuel qui est pris. Et cela me demande de vérifier cela parce que j'ai déjà cherché de nombreuses fois. Qu'est-ce que c'est ? Veuillez utiliser le bateau e-mail. D'accord. C'est un bateau. C'est un bateau. Et le second, c'est un tableau. Ce tableau, voilà quoi, c'est ce que c' est du bois et vérifie. Ce domaine est déjà pris. Il me montre. Donc, au lieu de cela, je vais simplement faire défiler vers le bas et je verrai quel domaine peut être pris. Nœud en ligne de tiret actuel. Nous allons y aller avec celui-là. Voyons qu'il est disponible ou n'est pas un site de points actuel mondial. Et je cliquerai simplement sur Ajouter au panier qui est un site de points actuel mondial. Et il vérifie la disponibilité et oui, nous l'avons vérifié et cela est disponible. Donc, ce que nous allons faire maintenant, nous allons simplement cliquer sur, Continuer à couper. Une fois que j'ai cliqué sur Continuer, continuer à panier, cela me montre ce montant et pourquoi cela montre ce montant plus important maintenant, parce que j'ai sélectionné deux ans ici, je dois aller avec le premier . Je vais simplement cliquer là-dessus. Il y a 75 roupies par an. Maintenant, il me dit 104 roupies, 0,31 pesaro, comme en monnaie indienne, on l'appelle seulement comme 104,31. Ok, donc la prochaine étape est que ça me montre aussi qu'il me demande de prendre les plans d'hébergement. Vous pouvez donc choisir ce plan qui est le plan 68 roupies, 69 roupies pendant 12 mois ou un mois, quel qu'il soit. Et voir ici c'est une chose de plus comme cacher informations personnelles de mon domaine sur des répétitions, faire 99 par an. Ce qui signifie, c'est que si vous vérifiez cela, 29 à 1900 roupies supplémentaires seront ajoutées. Cela masquera vos informations personnelles ou que se passera-t-il lorsque vous passerez à la caisse et lorsque vous achetez ces informations ? Qui mord cette dominante est votre nom pour l'e-mail ou parfois le numéro de téléphone, il est accessible au public. Et les entreprises qui fournissent des services qu'elles pourraient commencer à vous appeler n'étaient pas deux jours. Si vous ne voulez pas payer cela à 99, vous pouvez simplement y aller et vous pouvez ressentir la douleur pendant deux ou deux à trois jours. Après cela, ils cesseront de vous appeler. Ce n'est pas une grosse affaire. Il suffit de cliquer sur Checkout au cours de l'année. Lors du paiement, il me demande de me connecter , puis je me connecterai avec mon compte Google. Cette option de paiement que j'ai devant moi, je vais sélectionner une option UPI. Dans mon pays. L'option UPA est présente dans votre pays, PayPal ou peut-être n'importe quoi sera populaire afin que vous puissiez utiliser votre mode de paiement fiable au cours l'année où il me montre que 104 roupies sont là. Continuez donc avec l'UPI, mon site, le paiement est effectué et vous pouvez maintenant voir que votre paiement est réussi. S'il vous plaît, ne faites rien. Vous êtes en train de rediriger. Nous sommes en train de rediriger quelque part et où nous sommes emmenés. Maintenant, il est finalisé votre domaine et c'est ce que vous obtiendrez également. Ce sont les nobles que nous avons pris et qui sont le site de points actuel mondial. Et je vais juste voir quel pays vous êtes en Inde. Donc, il suffit de taper l'Inde ici parce que j'ai sélectionné l'Inde ici et je ne sélectionnerai que ce personnel et il suffit de cliquer sur Next setup. Cela demande quelques-uns des détails ici. Je vais donc entrer quelques détails comme l'état et d'autres choses, le code PIN, je vais entrer un numéro de téléphone que je vais entrer. Et je cliquerai simplement sur Terminer l'inscription. L'adresse ne doit pas être trop longue. Aucune virgule n'est autorisée ici où vous avez presque terminé, puis cliquez sur Continuer. Il y aura un e-mail. Je n'ai donc qu'à vérifier mon e-mail, donc je vais maintenant accéder à mon adresse e-mail , c'est-à-dire Gmail. Si vous n'avez reçu aucun e-mail pour la vérification, vous pouvez simplement cliquer sur l' e-mail de vérification de l' e-mail récent et cet e-mail sera présent dans votre boîte de réception. Il s'agit du lien de vérification par e-mail et je dois cliquer sur ce lien. Et une fois que j'ai cliqué sur ce lien, il m'amènera à l'hébergement ou à la page une fois de plus. Et cette fois-ci, il devrait voir que oui, l'e-mail a eu beaucoup de succès au moment q. Et nous pouvons le fermer. Nous pouvons revenir sur cette page et simplement cliquer sur Rafraîchir ici. Vous pouvez peut-être appuyer sur F5 pour rafraîchir la page. C'est tout. Le domaine a été vérifié avec succès et notre domaine est un site de points actuel mondial. Dans cette vidéo particulière, nous avons acheté la domination avec succès. Et dans la vidéo suivante, nous verrons comment relier notre dominante à notre compte d'hébergement. On se voit dans la vidéo suivante, les gars. 66. Serveur d'hébergement de domaine de point: Bienvenue les gars de retour. Dans cette vidéo, et dans cette vidéo, nous allons voir comment nous allons pointer notre nom de domaine vers le serveur d'hébergement. Ce que nous ferons ici, c'est que nous cliquerons sur l'hébergement ou que vous avez déjà peu de comptes hébergés. Je suis floue. Pour certains, vous pouvez voir qu'il y a des raisons de sécurité. Il s'agit de mon hébergement de serveur premium. Et vous trouverez un bouton comme celui-ci appelé Ajouter un site Web. Il suffit donc de cliquer sur le bouton de ce site Web publicitaire. Ensuite, vous devez taper le nom. Voyons donc quel est le nom du domaine. C'est comme le courant mondial ou quelque chose comme ça. Si je ne me trompe pas. Et je vois que c'est ainsi que cela se produit lorsque vous prenez un domaine et que vous prenez n'importe quel domaine. C'est donc le domaine. Je ne fais que coller ce nom de domaine ici. Je vais juste copier ce nom. Je vais coller le nom ici et je mettrai un mot de passe. Mettons donc un mot de passe magique là-bas. N'importe quoi. Je ne fais que flouter cela et je cliquerai sur Ajouter un site Web. Lorsque je clique sur Ajouter une année de site Web, vous constaterez que mon site est répertorié maintenant, je vais prendre tous les sites Web, donc nous sommes ici et c'est mon site Web. Vous êtes, mon site Web est là. Ensuite, je cliquerai sur Gérer le site Web. Dès que je clique sur Gérer le site Web, ce panneau s'ouvre, c'est le nom de mon site Web et c'est tout ce dont nous avons besoin. Voyons maintenant si nous allons à cette URL appelée site de points courants Global. Et je vais simplement utiliser cette URL ici. Nous allons cliquer sur Entrée. Il est dit que non sécurisé et cela montre que votre compte a été créé. C'est le domaine et c'est ce qu'il est. Maintenant, ce que nous devons faire, c'est maintenant que nous avons connecté notre dominante au serveur. Maintenant, ils pointent du doigt. Nous allons maintenant télécharger les fichiers sur le serveur. Après cela, nous allons donner vie à notre site Web et que nous verrons dans la prochaine vidéo. On se voit dans la vidéo suivante, les gars. 67. Comment héberger le site Web: Avant d'aller de l'avant, avant télécharger notre site Web sur le serveur, ce que nous devons faire c'est d'exporter notre site Web. Il s'agit de notre site Web appelé Tech Result. Et maintenant, nous allons exporter ce site Web. Alors, comment allons-nous exporter cela ? Nous ouvrirons le site Web Tech Resolve dans notre studio de bootstrap, puis nous irons exporter. Et avant cela, nous allons simplement cliquer sur cette flèche ici. Je cliquerai sur les paramètres d'exportation. Ce sont les paramètres d'exportation et nous devons également apporter quelques modifications ici. Avant cela, nous devons dire où exactement nous voulons exporter ce fichier. Je vais donc cliquer sur Browse. Et nous allons juste aller à ce BSS. Je vais résoudre, et je vais créer un autre dossier ici, et je vais le nommer comme 6.5. Sous Scroll Export. Nous apprendrons que dans ce fichier particulier, tous nos fichiers sont réellement exportés dans ce dossier particulier. Il suffit donc de sélectionner ce dossier. Cela signifie que je cliquerais simplement sur ce dossier et que je cliquerai sur Sélectionner un dossier. Et ici, le chemin est là. Et maintenant, nous devons faire de légers changements ici, de légers changements ici est la première chose à faire, c'est comme sauter les images inutilisées. Nous devons cliquer sur ce lien, activer cette option. Ce que ça veut dire qu'il était comme si on avait peut-être importé beaucoup d'images. Disons que nous allons donner un compte. Supposons, par exemple, nous avons importé 20 images dans notre projet dans ce résultat de deck. Et sur les 20, nous n'en utilisons que dix. Pendant l'exportation. Il suffit d'exporter uniquement les images utilisées dans ce projet. Les images qui ne sont pas utilisées mais uniquement importées dans le projet. Nous ne voulons pas que ces images soient exportées. Sur 20, seulement dix images seront exportées, qui sont utilisées dans ce projet et dix qui ne sont pas utilisées. Il va le sauter. cette raison, la taille et la taille de notre site Web, notre taille de ce dossier d'images particulier diminuera lorsque nous n' exporterons pas les images inutilisées. OK, et exportez des étiquettes, nous allons également activer cette option. étiquettes, c'est comme lorsque nous utilisons les étiquettes, je vais vous montrer ce que sont exactement les étiquettes afin que les étiquettes soient exportées et que l' URL soit ici. Voyons donc voir. Il s'agit de l'URL et indique que HTTPS est manquant à la barre oblique deux-points HTTP. Il s'agit de l'URL du site Web. Je mets cette URL ici. Ensuite, je cliquerai simplement sur Enregistrer. Ce qui est étiqueté, c'est comme si vous pouvez voir comme un hashtag modèle tiret un, puis un pied de page sombre. Ce sont les étiquettes nous exploitons également. Avant d'exporter, nous économiserons ce projet une fois de plus. Le projet est enregistré , puis je cliquerai sur ce bouton Exporter. Ici, vous verrez comme exporter des données et conception de votre site Web a été exportée et il cliquera dessus. Et maintenant, vous pouvez voir que l' exportation est leur plan de site. Nous avons activé le plan du site, le plan du site et le plan depuis un an. Ce point manifeste JSON est présent que dans notre dossier de ressources. Nous pouvons voir que le bootstrap signifie que CSS est là, puis les dossiers CSS sont là. C'est notre numéro et toutes leurs choses et formulaires, formulaires que nous avons utilisés sur les forums sont exportés ici. Les images que nous avons utilisées dans la structure des dossiers. Toutes les images sont ici et les JavaScript sont ici. Et à l'extérieur, on peut voir ce index.html. C'est la page principale, c'est la page principale de déclenchement d'atterrissage. Et puis nous verrons que toutes ces autres pages sont également présentes. Allons maintenant sur notre serveur et importons tout cela en même temps. Je ne fais que sortir cette fenêtre de l'écran. Et allons-y. Allons-y, revenons dans notre zone d' hébergement et nous allons faire défiler vers le bas. Et il y a deux options comme dans les fichiers. L'un est le gestionnaire de fichiers bêta et l'autre est le gestionnaire de fichiers. Ce n'est donc pas une version bêta, peut-être une. Vous constatez qu'il n' y a peut-être pas de bêta nos jours au niveau de la production. Je vais donc cliquer sur cette bêta du gestionnaire de fichiers et une autre fenêtre s'ouvrira ici. Et c'est le dossier principal qui est le HTML de soulignement public. Quels que soient les fichiers que nous possédons, nous allons télécharger fichiers uniquement dans ce dossier. Je vais double-cliquer sur ce dossier. Et puis, par défaut, lorsque vous le faites pour la première fois, nous avons ce dossier PHP par défaut. C'est ce que nous choisissons ici C qui est la page par défaut ou par défaut que vous voyez comme le point PHP par défaut qui fonctionne. Ok, donc ce que nous allons faire, nous allons simplement cliquer sur Télécharger ici. Je vais cliquer sur le dossier. Une fois que j'ai cliqué sur le dossier, je verrai ce dossier est là, c' est-à-dire un résultat technique d'exportation et je vais revenir en arrière et je sélectionnerai ce dossier, dossier entier et je cliquerai sur Charger. Je ne clique pas simplement sur Upload ici. Ce dossier est donc maintenant téléchargé. Quoi qu'il y ait dans ce dossier, je dois tout déplacer et le déposer dans ce dossier HTML de soulignement public. Nous allons donc double-cliquer dessus. Il sélectionnera tout par Control a. Et je cliquerai simplement sur Déplacer ici, ce bouton déplacer le fichier est là, déplacer le fichier. Il y a deux points. Vous obtiendrez également ces deux points. Je vais simplement double-cliquer sur ces deux points et bouger. C'est tous nos fichiers qui sont complètement épuisés, sortent de ce dossier d'exportation maintenant et nous n'avons pas besoin de celui-ci, donc nous supprimerons cette année, nous allons maintenant notre site Web est hébergé et si vous venez ici et rafraîchissez simplement ceci, nous y allons, notre site Web est hébergé. Maintenant. N'importe qui arrive à cette URL particulière qui est un site de points actuel global. Ce site Web sera présent. Ce domaine ne dure qu'un an. Ce domaine expirera le 19 avril 2023. Si vous regardez cette vidéo après cela, vous n'aurez peut-être pas accès à ce site Web car je n'ai pris ce domaine que depuis un an. C'est comme ça que ça fonctionne. Donc, nous n'avons pas obtenu cela, nous devons régler cela également, mais nous allons résoudre ce problème. Non sécurisé, sécurisé dans les vidéos ultérieures. Dans cette vidéo, nous avons vu comment exporter et comment héberger notre site Web sur un vrai serveur. Et ça a résolu les gars, c'est tout pour cette vidéo et c'est tout pour cette section. Nous avons hébergé avec succès notre site Web sur le serveur réel. De cette façon, vous pouvez héberger n nombre de sites Web en achetant une dominante. Et si vous voulez tout changer, il vous suffit donc de tout sélectionner, de supprimer et de recharger les fichiers entiers. C'est ainsi que nous allons héberger notre site Web et nous l'avons fait. C'est donc tout pour cette section. Et je vous vois dans la section suivante, les gars. Je suis également très excité et heureux que nous ayons hébergé avec succès notre premier site Web sur le vrai serveur. Les gars, c'est tout pour cette vidéo et je vous vois dans la section suivante. 68. Présentation de Zoho Email: Bienvenue les gars de retour. Dans cette nouvelle section où nous allons voir à propos de XO qui envoie un e-mail ? Xo qui envoie un e-mail est un fournisseur professionnel de services de messagerie électronique qui fournit non seulement des services d' e-mails, mais en dehors de cela, il y a tellement d'autres produits et services que Xu offre, nous verrons très rapidement ce que tous les services x2 offrent en finance. Ils proposent comme des livres ou des livres CRM Zoho où nous pouvons conserver toutes les pistes comptables et les personnes X2 pour les RH, les entreprises, les courriels comme les hommes, puis le système de gestion de projet pour les projets. Ensuite, l'assistant meeting CLI IQ se trouve à l'intérieur du système de discussion de l'organisation. C'est comme une fois encore, c'est gratuit, puis CRM, puis finance, puis voyez, vous pouvez voir comme les ventes et le marketing puis le service que les e-mails. Et ils ont des droits semblables. La feuille de calcul est comme une diapositive Excel est comme un PowerPoint alors Docs est comme Dr. CLA, IQ voice. Découvrez toutes les fonctionnalités, tous les services disponibles sur cette plateforme particulière. Peu d'entre eux sont gratuits et peu d'entre eux sont payés. Ne pas voir. Cela signifie que, comme peu d' entre eux, ils sont libres. Et c'est comme si tout est payé. Mais vous trouverez également ici et il y a quelques services gratuits, offre gratuite pour un certain nombre d'utilisateurs. Par exemple, ces factures sont entièrement gratuites. Et si nous utilisons des e-mails similaires jusqu'à cinq utilisateurs, c'est totalement gratuit. Maintenant, nous allons voir comment nous allons pointer notre nom de domaine vers l'e-mail xo email. Pourquoi voulons-nous utiliser cet e-mail ? Nous hébergeons votre e-mail si vous prenez si vous avez pris votre domaine à GoDaddy, nous avons également des e-mails GoDaddy. La raison en est donc que j' utilise personnellement Zu qui a envoyé un e-mail depuis plus longtemps maintenant, mais avant cela, j'utilisais GoDaddy et l'hébergement ou le courrier électronique. Le principal problème ici est GoDaddy et l'hébergeant ainsi tous les autres fournisseurs de services, comme tous les autres fournisseurs de services, ils fournissent un tableau de bord de messagerie électronique, mais ils n'ont pas de mobile application. Et il y a le stockage et tout ce qui est inclus dans les serveurs, dans l'hôte, ce que nous avons pris en x2. Ce qui se passe ici, c'est que c'est la façon professionnelle de poster. C'est aussi bon que très professionnel, un système de messagerie, de messagerie très bien construit. Et vous obtiendrez également l'application Android et iOS, l'application Windows, et toutes les autres choses sont là, le support Web est là. Et vous pouvez voir l'interface de ce Zu particulier qui, qui envoie un courrier. où vous pouvez voir que c'est principalement leur calendrier c'est que vous pouvez effectuer vos réservations au-delà de cela, les rappels de réservations, puis vous avez des notes sur un an. Ensuite, vous pouvez également avoir une option de tâche, puis des contacts et des signets et tout ce dont vous avez besoin, facilement disponible dans les e-mails du zoo. Donc, si vous voyez dans la section des prix, donc les soulèvements, oui, il y a certainement des soulèvements. Mais si votre organisation n' est pas grande et jusqu'à cinq utilisateurs si vous voulez l'utiliser, nous avons un forfait gratuit pour toujours. Utilisez jusqu'à cinq utilisateurs, cinq Go par utilisateur, 25 Mo de limite de pièces jointes. Et Webex dit et accès mobile et toutes les autres choses comme Mais vous l'avez fait, mais vous devriez avoir votre e-mail de domaine hébergé pour un seul domaine. Nous le ferons dans ce domaine particulier. Nous avons notre nom de domaine avec nous qui est site de points actuel mondial avec ce nom de domaine, nous allons le faire. Allons dominer. Et cliquons sur ce domaine. Oui, nous attendrons ici et nous allons procéder à notre e-mail de zoo et nous commencerons créer notre compte dans e-mail du zoo dans un court terme, donc h2 et ensuite nous commencerons à continuer avec les e-mails Zoe que nous verrons dans notre prochaine vidéo. 69. Ajout d'enregistrements de courrier électronique dans DNS: Nous allons donc commencer configurer notre CSA qui a envoyé un e-mail avec notre domaine. Je vais donc simplement cliquer sur Essayer maintenant, l'année où nous partons, nous avons ceci. Nous, je suis connecté avec mon compte Yahoo, donc il y aura également un processus de vérification, je pense que non, la vérification est déjà effectuée. Vous devrez également effectuer le processus de vérification si nécessaire, sinon vous accéderez à cette page particulière. Ensuite, je cliquerai simplement sur l'abdomen. Et c'est notre domaine au cours de l'année, donc il ne fera que copier ce domaine. Et je vais coller l'année du domaine. Et on y va. Et cette organisation, comme fournir le nom de votre organisation. Je vais donc simplement taper comme courant global, peut-être le nom de votre organisation, puis l'industrie. Je vais juste le dire comme éducation. L'éducation sera bonne. Je vais simplement cliquer sur Ajouter. Félicitations, ce domaine a été ajouté avec succès puis passe à la vérification du domaine. Maintenant, c'est important et soyez très prudent en faisant cela. La première chose que nous devons faire est de vérifier le domaine. vérifier le domaine, nous avons trois étapes différentes. Le premier est recommandé, c' est-à-dire ajouter un enregistrement TXT dans le DNS. Dns signifie Domain Name System ou serveur de noms de domaine. Ensuite, la deuxième option consiste à ajouter un enregistrement CNAME dans DNS. Et la quatrième option consiste à télécharger un fichier HTML sur le site Web. Nous allons donc commencer par le premier. Habituellement, la vérification de domaine ne prend pas plus de temps. Si le TXT ne fonctionne pas, alors nous allons utiliser le, que dites-vous ? Celui-là. Mais ce que je ferai comme au cas où il aurait été vérifié, je ne peux pas vous le montrer. Je vais donc simplement cliquer sur ce fichier HTML. Et maintenant, ce que vous devez faire, c'est le fichier HTML, juste si vous cliquez sur ce Zu qui vérifie Zoho dot HTML, ce fichier sera téléchargé ici. Que devez-vous faire, c'est d'aller sur votre serveur, ce dossier HTML de soulignement public sera là, n'est-ce pas ? Je vais donc vous le montrer également. Nous irons à l'hôte là-bas. L'hébergement. Nous irons dans notre domaine, qui est cette année dans ce gestionnaire de fichiers. Oui, à l'intérieur de ce dossier HTML de soulignement public, ce que vous avez à faire est de voir, c'est le lien où il ira pour vérifier qu'il s'agit d'un site actuel global point, barre oblique globale du DOT actuel, alors c'est comme Zoho. Vérifiez. Vous devez créer un dossier portant le nom de Zoho, vérifier exactement comment nous allons faire cette année-là, au cas où vous êtes bon et que vous vérifiez notre domaine par fichier HTML, cliquez simplement sur un nouveau dossier ici. Et nous le nommerons Zoho. Zoho vérifie. Et nous allons créer ce dossier. Nous sommes maintenant dans ce dossier de vérification Zoho et le fichier que nous avons téléchargé. Je vais juste ouvrir cette année-là. Je vais simplement faire glisser et déposer ce fichier ici. Et juste pour une raison pour laquelle il a été renommé, je dois juste le renommer en tant que vérification pour x2 points HTML et il va simplement le renommer. Si vous ouvrez ce fichier, vous verrez qu'il y a un numéro. De cette façon, vous pouvez vérifier le domaine. Et si vous cliquez simplement sur ce lien pendant un an, cela prendra maintenant, il n'affichera que ce numéro. Une fois cela fait, vous pouvez cliquer sur Vérifier le fichier HTML et votre domaine sera vérifié. Et je vais vous montrer encore une chose, comment nous allons faire exactement avec la vérification du domaine TXT. Pour cela, nous fermerons celui-ci et nous arriverons à notre domaine. Et c'est là que nous trouvons comme un serveur de noms DNS. Chaque nom de domaine comporte un ensemble d'instructions différent. Vous devez donc trouver là où vous allez changer le système DNS. Et nous allons simplement cliquer sur ce DNS. Tu retournes dans ce Zoho. Et maintenant, ce que vous devez faire, c'est d'abord voir qu' il s'agit d'un enregistrement TXT et c'est la valeur dans différents domaines d'un enregistrement TXT et c'est la valeur dans différents domaines service qu'ils ont nommés différemment, valeur 0,2 ou année de destination. Ce que nous devons faire, c' est notre enregistrement DNS géré. Et la première chose que nous devons faire votre ys, nous devons passer à l'enregistrement TXT avant cela, nous devons voir ce que la vérification est réellement. Je vais juste taper vérifier ici. n'y a rien. D'accord. Je vais simplement cliquer sur ce bouton Copier ici. Je vais simplement cliquer sur le bouton Copier. Et le nom sera au rythme seule la valeur du texte sera celle que nous venons de copier. Et je vais le coller ici. Et TTL sera le même. Et je cliquerai simplement sur Ajouter un enregistrement. Une fois que j'ai cliqué sur Ajouter un enregistrement, je reviendrai et il suffit cliquer sur Vérifier l'enregistrement TXT. Vous pouvez voir que l'enregistrement TXT a été vérifié avec succès. Ok, donc c'est comme ça que nous allons faire. Et avant d'aller de l'avant, nous reviendrons l'année. Je vais chercher l'année MX. Vous pouvez taper MX et rechercher l'année MX. Vous trouverez mx two dot hosting ou dot in et mx1 dot hosting ou dotted. Nous devons supprimer les deux. Je vais supprimer celui-ci, amex et je supprimerai ce second MX. Et puis je peux taper DKIM et nous devons voir s'il y a désintégration de la SP, qu'il en soit ainsi. Et puis SPF je dois taper c'est l'enregistrement SPF pour héberger que je dois supprimer. Enregistrement SPF que j'ai supprimé. D'accord. Donc, MX un enregistrement SPF que nous devons supprimer et maintenant nous allons venir ici cet e-mail. Maintenant, il demande une adresse e-mail, qui sera l'administrateur, le contrôle de niveau administrateur. Vous pouvez indiquer votre nom ou vous pouvez indiquer que l'administrateur est également le vôtre. Je vais juste mettre mon nom à jour le site de points actuel global et il suffit de cliquer sur Créer. Cette adresse e-mail servira d' adresse e-mail de niveau administrateur où je peux créer des utilisateurs et modifier le mot de passe pour eux ou je peux supprimer toutes les choses de l'utilisateur. Vous pouvez voir cette icône avec le niveau super administrateur s'il y a une semaine. Oui. Dernière connexion avec cette adresse e-mail qui est actuellement la contiguité actuelle yahoo.com. Je l'ai fait il y a une semaine, donc ça me montre il y a une semaine. Procédez donc à la configuration du groupe et il n'y a rien de configuré de groupes Nous allons donc passer au mappage DNS maintenant. Maintenant, c'est comme si le devrait être là ou votre e-mail ne sera pas, ne sera pas déclenché sur le Zoho One, trois étapes sont là, une est MX que SPF et DKIM MX et SPF, qui était l'ancien un. Nous avons supprimé que nous devons maintenant ajouter le nouveau. En revenant donc à nos enregistrements DNS, j'arriverai à cet enregistrement DNS géré et il recherchera l'enregistrement MX, qui est le deuxième. Je reviendrai l'année au taux restera même et je copierai ce point MX point x2 dans. Et je vais coller cela dans la section serveur de messagerie, et nous allons simplement cliquer sur Ajouter enregistré. Le premier enregistrement MX a été ajouté. De la même façon, je le ferai pour celui-ci, mais la priorité passera de dix à 20. Donc maintenant, je vais prendre un an de plus et je vais le coller ici et la priorité sera 20. Je vais simplement cliquer sur Ajouter un enregistrement. Et le deuxième enregistrement MX ajouté a été ajouté. Maintenant, le troisième qui est MX, trois points, Zoho et la priorité est 50. Nous reviendrons ici. L'adresse restera la même, désolé. Mx d'abord, puis ajoutez, le taux restera le même et nous collerons ceci et la priorité sera de 50. Et je cliquerai sur Ajouter un enregistrement. Cet enregistrement a été ajouté avec succès. Ensuite, nous devons opter pour SPF, qui est encore une fois un enregistrement TXT au taux et afficher la valeur SPF. Il suffit de cliquer sur Afficher la valeur SPF. Et cela montre que plusieurs enregistrements SPF ont été formés. Il en est ainsi, celui-ci est l'hôte d'un. Et nous ne voulons pas cela, alors nous allons simplement cliquer sur celui-ci que SPF inclut celui-ci, le premier, je vais copier ceci. Et avant d'ajouter cet enregistrement, je chercherai à nouveau n'importe quel enregistrement SPF. Y a-t-il par hasard un nœud aucun enregistrement SPF ? Dans l'enregistrement de texte, je nommerai, nom sera au taux et il mettra cette valeur que nous avons copiée et je cliquerai sur Ajouter un enregistrement. Bon, c'est assez juste. Je vais simplement cliquer sur OK. Et le dernier est le disque DKIM. Encore une fois, c'est un enregistrement TXT. Et maintenant, la valeur de l'hôte, au lieu d'ajouter l'ID, nous avons une valeur spécifique que nous devons y placer. Nous allons donc copier celui-ci. Je reviendrai ici et nous sélectionnerons l'enregistrement texte. Le nom sera maintenant celui-ci, Zed mail dot clé de domaine sous-vendue et quelque chose comme ça. Et la valeur sera la suivante. Il va copier celui-ci. Venez ici et collez cette valeur ici et cliquez sur Ajouter un enregistrement. Nous avons maintenant ajouté tous les enregistrements. Et une fois que nous cliquons sur Vérifier tous les enregistrements lentement et progressivement, il commencera là où vous trouverez l'enregistrement. Le temps habituel est de 30 minutes pour vérifier l'enregistrement. Ou peut-être que cela peut prendre une journée complète de 24 heures selon les conditions. Nous allons donc cliquer sur Tout vérifier tous les enregistrements. Voyons quels sont tous les enregistrements vérifiés. Et nous pouvons voir qu'il y a un message ici qui dit TTL. Selon le TTL, cela peut prendre un certain temps. Et nous pouvons voir que l' enregistrement DKIM est vérifié avec succès et l' enregistrement MX et SPF est toujours en attente. Vous pouvez voir qu'il montre toujours cet hébergement ou ce pointage est là. Nous vérifierons encore une fois après 30 minutes, puis nous verrons s' il est cartographié ou non. Une fois cela fait, nous pourrons avancer pendant la migration des e-mails, mais nous n'avons rien pour Migrate. Nous allons donc passer au mobile. Et il me demande de télécharger les e-mails et tout, puis de les franchir. Deux options existent maintenant. L'une d'elles consiste à vérifier votre boîte de réception et à accéder à l'administrateur. Donc, je vais simplement cliquer dessus , aller à l'administrateur. Maintenant, vous pouvez voir à quoi ressemble l'administrateur dans Zoho CRM, Zoho mâle. Ce courant global est là et le nom du site est là. L' adresse e-mail de niveau administrateur est là. Et puis nous avons le plan comme un plan gratuit, y a-t-il toujours ? Forfait gratuit. nombre de licences dont nous disposons, c'est-à-dire cinq licences que nous possédons et nous avons un domaine aussi souvent ou combien d'utilisateurs nous avons dans notre système n'est qu'un seul. Désolé, je cliquerai simplement sur le dos. Nous allons cliquer sur Tableau de bord et le nombre de groupes créés, soit 0, puis sur le trafic de messagerie et tout ce que vous pouvez voir l'année. Ensuite, vous pouvez modifier vos logos et tout. Cliquez sur Modifier ici. Ensuite, vous pouvez modifier le logo de votre entreprise. Et voyons voir, si je vais parcourir. Et E, y a-t-il un logo ou quelque chose comme ça ? Disons, par exemple, si je prends celui-ci comme logo, je le chargerai. J'utilise simplement n'importe quel logo aléatoire. C'est peut-être aussi le logo d'une entreprise. Je n'en suis pas sûr. Une fois que cela est téléchargé, nous pouvons voir maintenant se souvenir de ce logo que nous avons utilisé ici. Le logo a été mis à jour avec succès et juste au cas où cette image de chargement est toujours en cours, continue. Ce que vous pouvez faire, c'est que vous pouvez simplement rafraîchir la page. Il y a parfois des problèmes. Et puis nous avons un domaine qui dit que l'enregistrement MX n' est pas encore pointé, alors c'est correct. Nous pourrons le faire plus tard. Utilisateurs, c'est que vous pouvez ajouter les utilisateurs. Disons que si je clique sur Ajouter un utilisateur, vous pouvez mettre le FirstName, LastName, puis Nom d'utilisateur. Le nom d'utilisateur sera automatiquement il suffit de saisir le nom d'utilisateur. Disons, par exemple, que si je mets de nouveaux narly là, vous pouvez voir la monarchie le site de points actuel global et ensuite transmettre ce que vous pouvez mettre le mot de passe. Et ensuite, vous devez dépendre de vous, comme forcer l'utilisateur à changer passe lors de la première connexion si vous voulez que l'utilisateur de cette adresse e-mail modifie le mot de passe. Ensuite, vous pouvez continuer à cocher cette option et vous pouvez simplement décocher cette option. De cette façon. Vous pouvez ajouter jusqu'à cinq utilisateurs. Vous pouvez maintenant ajouter jusqu'à quatre ans car un utilisateur est déjà pris. Ensuite, la migration des données du groupe, paramètres de messagerie et tout cela. Maintenant, vous pouvez également accéder à cet e-mail , vous pouvez désormais voir ce que vous dites ? Le logo est là. Et vous pouvez accéder à cet e-mail à partir de l'application mobile x2 à la fois sous iOS et Android. Allons maintenant dans notre boîte de réception. Je viendrai juste vous, j'ouvrirai un nouvel onglet et je vais juste taper z2 mâle. Je vais cliquer ici. Soyez là une seconde, et ici il y a l'excès de Zu qui envoie un courriel. Et je cliquerai simplement sur l'e-mail Access x2. Maintenant, vous pouvez voir le courant sur le site Bluebell point est là. Ici. Vous pouvez voir que nous avons notre logo ici. Il y a des instructions que je vais juste sauter ça pour l'instant. Nous avons notre logo, le logo de l'entreprise plus facile que les hommes. Ensuite, vous pouvez utiliser le calendrier, puis la tâche. Vous pouvez y avoir la tâche. Tout est là, comme complètement professionnel, vous pouvez voir certaines tâches de démonstration. Et je vais simplement cliquer sur l'e-mail ici. Et une fois que vous avez cliqué sur cet e-mail, cet e-mail s'ouvre comme une interface utilisateur et une expérience utilisateur complètement fraîches, enthousiastes et magnifiques. Donc oui, c'est comme ça que vous êtes la notification, alors vous pouvez voir comme Xu e-mail et les enregistrements ESP EFN MX ne sont pas encore pointés que nous allons vérifier au bout de 30 minutes. Ensuite, il y a quelques intégrations qui existent au cours de l'année. Vous pouvez simplement activer le mode sombre et le mode lumière. Envoyez les commentaires. Et ici, vous pouvez avoir une communication interne interne avec vos collègues et comme dans votre organisation. C'est ainsi que vous allez intégrer Zu qui envoie un e-mail à votre nom de domaine. Au bout de 30 minutes, nous vérifierons cette vérification pour l' enregistrement MX et l'enregistrement SPF, puis tous définis. Je suis bon d'y aller. C'est ainsi que nous allons faire cela dans les courriels. Et c'est tout pour cette vidéo. La prochaine vidéo, je vais vous montrer après avoir pointé cet e-mail, quoi il ressemble exactement à rien d'autre. Oui. On se voit dans la vidéo suivante. Et si vous voulez voir la vidéo suivante, vous pouvez vous voir ou vous voir dans la section suivante. Merci, les gars. Merci beaucoup. 70. Remarque: Bonjour les gars. Dans cette vidéo, je vais vous donner une information que lorsque vous téléchargez les fichiers de mon projet. D'accord. Et lorsque vous ouvrez ces fichiers dans Bootstrap Studio, il y a des formulaires où sur la formation, ce que j'ai fait c'est la formation. J'ai ajouté mon adresse e-mail ici qui est actuellement effectuée sur yahoo.com. Que se passe-t-il ici ? Lorsque vous testez ce fichier tout en téléchargeant quelque part, les e-mails m'arrivent. Vous pouvez voir comme des smartphones, courriels comme des e-mails de smartphone, y a-t-il des courriels intelligents qui me viennent là où il affiche tous les e-mails de test. Vous pouvez voir les tests, les tests, les tests. Ce que vous devez faire ici, c'est au lieu de conserver mon adresse e-mail, vous devez cliquer sur Gérer ici. Et comme je vous l'ai dit dans les vidéos, vous devez cliquer sur Gérer, puis cliquer sur Ajouter un destinataire et placer votre adresse e-mail à l'endroit où vous souhaitez apporter vos e-mails, comme l'endroit où vous souhaitez prendre le formulaire email de soumission, mettez votre e-mail ici, cliquez sur Créer, puis vous obtiendrez un OTP sur cet e-mail, mettrez cet OTB, puis vous pourrez connecter votre e-mail année. Au lieu d'utiliser mon e-mail. Vous devez utiliser votre e-mail pour qu'il apparaisse sur votre e-mail et vous obtiendrez deux Nokias. Le formulaire fonctionne correctement. Les gars, c'est tout pour cette vidéo. C'est ce que je veux vous dire. N'utilisez pas celui-ci car courriels m'arrivent et vous penserez que ça ne fonctionne pas. Mais oui, cela fonctionne, mais il arrive à un mauvais e-mail. Merci beaucoup. 71. Altly.in devient Lynko.in: Bonjour, tout le monde. Cette vidéo a pour but de vous informer que ltle.in est désormais intégré à Lincodt Tout reste le même, à l'exception des plans tarifaires. Il y a donc un énorme changement dans le plan tarifaire. Maintenant, nous n'avons pas de vierge traal ici. Et dans le plan gratuit, vous ne pouvez créer qu' un seul lien court, et il n'y aura qu'un seul clic sur ce lien par mois. Cela ne sert donc à rien, mais vous avez un accès complet à Bopage Bref, dans le plan gratuit, vous pouvez créer un Bopage Et dans la version payante, vous disposez de la plupart des fonctionnalités disponibles dès le Ainsi, dans ce plan de base, vous pouvez voir que vous pouvez créer 150 liens par mois, n'y a aucune limite au nombre de clics et que les données restent dans la base de données pendant 30 jours. Et Bopage en est encore une. Mais un léger hic dans le plan de croissance, si vous voyez, ils l'ont mentionné gratuitement sur demande pour les utilisateurs de plus de 1 000 abonnés à IG Story. Donc, si votre compte Instagram compte plus de 1 000 abonnés, vous pouvez leur demander d'obtenir ce plan de croissance gratuitement. Vous pouvez cliquer sur la solution et sur le LincoElitPass Vous pouvez lire les informations ici. Vous pouvez les demander et vous pouvez obtenir le plan LinkoGrowth entièrement gratuitement Donc oui, c'est précisément pour vous faire savoir qu' Atledt in est désormais Lincodtn.