Sections, colonnes, marges et Padding expliqués - Elementor WordPress pour la mise en page

1. Sections, colons, Margin et rembourrage expliqués: chose la plus déroutante quand j'ai commencé dans les éléments ou était de comprendre la différence entre les colonnes, sections, les intersections, les frappeurs et la marge. J' étais très confus parce qu'il y a beaucoup de choses que vous devez savoir avant de pouvoir créer des designs étonnants comme ces exemples, comme vous pouvez le voir ici. Maintenant, après plus de deux ans de travail dans l'élément ou je voulais faire une vidéo pour tous ceux qui ont encore des questions sur les sections, les colonnes, le remplissage et les marges. Dans cette vidéo, je vais expliquer la théorie de son fonctionnement et comment vous pouvez créer des conceptions plus complexes et plus cool. J' ai travaillé très dur sur cette vidéo, donc j'espère que vous l'aimerez et commençons tout de suite. 2. Colonnes et sections: Parlons donc d'abord de la différence entre les colonnes et les sections. J' ai illustré la section avec un contour bleu ici et il y a toujours un S à l'intérieur. Et vous pouvez voir ces deux rectangles, ce qui signifie que les sections peuvent être placées les unes sur les autres, comme vous pouvez le voir dans cet exemple ici. Donc les sections sont un peu comme les gros blogs qui construisent la longueur d'une page. Donc, si vous jetez un oeil à mon site de portefeuille, par exemple, qui encore une fois c est une grande section ici. Cela pourrait être une section, disque pourrait être une section, cela pourrait être une section. Ce sont donc les principaux blogs qui construisent une page. Maintenant, les colonnes sont toujours à l'intérieur des sections, et je les ai illustrées ici avec la ligne pourpre pointillée et un c à l'intérieur. Et ici, j'ai placé les rectangles sur le site parce que colonnes ne peuvent être empilées qu'horizontalement. Et tout contenu que vous allez mettre dans votre site Web est toujours à l'intérieur d'une colonne. Vous ne pouvez pas placer de contenu à l'intérieur d'une section. Vous avez toujours besoin d'une colonne pour y mettre quelque chose. Donc, chaque sorcière, vous faites glisser hors des éléments ou vous allez mettre cela dans une colonne qui fait partie d'une section ou d'une intersection, mais plus sur cela plus tard. Donc, ce que vous pouvez également voir dans cet exemple est que la colonne n'est pas aussi blanche que la section. Cette section ici est plein écran et la colonne ne l'est pas. C' est important parce que tout le monde a un écran différent. Donc, si l'écran devient plus grand que cette section va s'étirer et les colonnes resteront les mêmes par l' élément par défaut ou les colonnes principales ou 1140 pixels de large. Et les sections sont aussi blanches que l'écran. Et ces 1140 pixels sont bien sûr, sur un bureau. Laissez-moi vous montrer un exemple ici. C' est l'un des sites clients que j'ai conçus. Et comme vous pouvez le voir ici, tient. Notre carte est de 14 centaines de large, mais le contenu principal, comme tous les éléments, comme vous pouvez le voir dans le menu à toutes les images sont tous aperçu de cette grille principale. Et ce grand grand est 1140 pixels de large. Et cela rend cette assignation parfaite pour les éléments ou ainsi. Vous avez quelques éléments dans le site Web qui sont plus larges que cela. Par exemple, pour les images d'en-tête comme les outrages, mais pour les images et les couleurs d'arrière-plan, il n'a pas vraiment d'importance si elle devient un peu plus grande ou un grand, mais pour les images et les couleurs d'arrière-plan, il n'a pas vraiment d'importance si elle devient un peu plus grande ou un grand, plus petit, mais le contenu doit rester à la huitième place. C' est pourquoi toutes les colonnes ont une largeur fixe. 3. sections intérieure: Ok, alors revenons aux colonnes. Comme je l'ai déjà dit, les colonnes peuvent être empilées horizontalement afin qu'elles soient à côté de l'autre. Donc, disons que vous voulez faire deux rangées de colonnes, quelque chose comme ça. Ce n'est pas possible. Pourquoi pas ? Eh bien, parce que les colonnes ne peuvent être que les unes à côté des autres et pas au-dessus des autres. C' est pourquoi si vous voulez créer un design comme celui-ci, vous devez faire quelque chose comme ça. Vous devez donc placer les autres colonnes à l'intérieur d'une autre section. Et puis, si vous diminuez l'espacement entre tous ces éléments, vous pouvez les rapprocher les uns des autres. Mais ce n'est pas toujours ce que vous voulez. Parce que, par exemple, il s'agit d'une section principale qui a un titre, un texte et quelques images. Ce type de design est probablement quelque chose que vous allez utiliser sur différentes pages. Donc, vous voulez être en mesure de copier toute cette partie est toute la section en un seul clic. Donc, si vous utilisez cette option, vous avez deux sections ou même un arbre si vous placez également le titre dans une section différente, ce qui n'est pas très pratique pour copier et coller sur d'autres pages. C' est là que les intersections entrent en jeu. Revenons donc à une section vide avec une colonne à l'intérieur. Ce que vous devez faire est ensuite insérer une intersection. Ensuite, dans cette intersection, il y a deux autres colonnes car par défaut, si vous faites glisser dans une intersection, alors il a automatiquement deux colonnes. Laisse-moi te montrer ce que je veux dire. Si vous créez une section normale, Donc une section principale, vous n'obtiendrez qu'une colonne principale, cette colonne. Et c'est une section. Si vous faites glisser dans une intersection comme celle-ci à l'intérieur de cette colonne, vous obtiendrez toujours deux colonnes à l'intérieur de cette intersection. Donc c'est ce que vous pouvez voir ici. Et avec cette conception, vous pouvez empiler des colonnes les unes sur les autres dans une section principale. Ainsi, par exemple, si vous vouliez créer ce design, alors la structure dans les coulisses dans les éléments ou ressemble un peu à quelque chose comme ça. Donc, vous avez fait glisser une intersection à l'intérieur de celui-ci. Vous avez dupliqué une de ces colonnes internes. Alors vous avez trois colonnes à l'intérieur de cette intersection. Et puis, parce que les sections et les intersections peuvent être dupliquées les unes sur les autres, vous faites juste un doublon. Et maintenant vous avez deux intersections avec les deux colonnes. Et de cette façon, vous avez une sixième année à l'intérieur d' une grande section que vous pouvez copier sur une autre page. Ou par exemple, grossez cette section entière vers le haut , puis faites-la glisser quelques positions vers le haut sur la page. Et la beauté des colonnes est que vous pouvez les ajuster. Par exemple, si vous voulez un design qui ressemble un peu à ça, vous pouvez le faire. Vous supprimez simplement une de ces colonnes et vous modifiez la largeur de la colonne. Voyons donc un vrai exemple ici. Donc, ici, nous avons une intersection à l'intérieur d'une section principale. Lorsqu' une colonne, vous pouvez facilement dupliquer ce clic droit, puis dupliquer. Si vous dupliquez ensuite celui-ci, vous avez ces deux colonnes internes. Si Il puis le plomb une colonne, encore une fois que vous pouvez voir maintenant ils deviennent Centre, mais vous pouvez faire glisser comme ceci et le mettre à 33.3. Et de cette façon, vous avez quelque chose qui semble un peu plus personnalisé à. Je l'ai utilisé sur mon propre site web. Comme vous pouvez le voir, ceci fait partie de ma page À propos. Et si vous cliquez dessus, vous pouvez voir que c'est la colonne principale, alors il y a une intersection avec deux colonnes, et voici trois colonnes, mais je viens de laisser une colonne vide. Et ça fait ressembler à ça. Très gentil. Donc maintenant, vous savez que vous pouvez empiler des sections les unes au-dessus des autres et des colonnes les unes à côté des autres. Mais cela signifie également que vous pouvez dupliquer la colonne principale, comme vous pouvez le voir ici. Donc, si vous faites cela, alors vous avez deux colonnes avec deux intersections à l'intérieur d'elles. Donc, avec cela, vous pouvez créer quelque chose qui a beaucoup plus de possibilités. Je l'ai fait par exemple, avec ce site Web, qui est un site Web de magazine, comme vous pouvez le voir ici. Voici ma section principale. Ensuite, il y a cette colonne ici et cette colonne ici. Et à l'intérieur de cette colonne, il y a aussi une autre intersection, comme vous pouvez le voir ici. De cette façon, vous pouvez créer un design beaucoup plus complexe que les mises en page de base normales. 4. Margin et rembourrage: Ok, donc maintenant nous avons couvert cette première partie. Parlons maintenant des marges et des paddings. Parce que si vous comprenez l'intégration des marges, vous pouvez personnaliser le design pour le rendre vraiment créatif pour créer effets de chevauchement et des choses qui semblent beaucoup plus cool. Alors commençons. Comme je l'ai déjà dit, le contenu est toujours à l'intérieur d'une colonne et vous avez toujours de l'espace à l'intérieur d'un élément et à l'extérieur d'un élément. Comme par exemple, si vous avez un joli manteau, il y a aussi un rembourrage spécial à l'intérieur. C' est comme ça que tu peux t'en souvenir, non ? Donc, le rembourrage est la perspicacité, la marge est l'extérieur, donc c'est tout en dehors d'un élément spécifique. Donc, une colonne a aussi un extérieur et un intérieur. Et l'espace de perspicacité est le batting et l'extérieur est la marge. Et cela est également vrai pour la dissection, la frappe de perspicacité et la marge extérieure. Et c'est aussi la même chose pour les autres éléments. Donc, si vous appliquez 30 pixels de marge inférieure aux éléments supérieurs, et au total il y aura 60 pixels entre le bouton et l'élément au-dessus. Alors maintenant, ça va devenir amusant. Passons à quelques exemples réalistes. Ainsi, vous pouvez voir la conception simple ici, titre, tags, bouton, un arrière-plan et une image. Donc, disons que nous voulons créer un design qui ressemble à ceci, où vous avez ce cool effets de chevauchement. Jetons d'abord un coup d'oeil à ce qui se passe déjà ici. La colonne de gauche ici avec les textes a un rembourrage de 30 pixels sur tous les côtés. C' est pourquoi il y a assez d'espace autour des éléments. Alors mettons d'abord l'image un peu vers le bas. Donc, comment vous faites cela est en ajoutant de la marge sur le dessus parce que cela va pousser l'image vers le bas. Ensuite, si vous voulez pousser l'image vers la gauche, vous devez appliquer une marge à gauche, mais ensuite un moins. Ici, c'est moins 150 pixels et ils vont faire glisser l'image vers la gauche. Et puis nous avons un problème avec notre texte comme vous pouvez le voir. Donc, ce que vous devez faire est d'ajouter plus de remplissage à l' intérieur de la colonne de gauche où se trouve le texte. Cela signifie donc que le rembourrage droit de cette colonne de gauche sera plus que le haut, la gauche et le bas. Et puis vous obtiendrez un design comme celui-ci. 5. Exemples de pratiques: Commençons donc par un design simple. J' ai essayé de recréer quelques dessins que vous avez peut-être vus dans la vidéo. Comment savoir si votre design peut être construit dans l'élément ou sur VR pressé, comme vous pouvez le voir ici, j'ai réussi à créer ce design simple. Laissez-moi vous montrer comment cela est fait. Ou tout d'abord, vous pouvez voir qu'il y a une section principale ici. C' est une section. Ensuite, il y a une colonne principale ici en arrière-plan, puis il y a une intersection juste pour ces deux couches de texte. Ensuite, il y a une autre intersection qui contient D trois colonnes. Et puis pour ces images, ces images ont une ombre déjà appliquée que j'ai créée dans Adobe XD, mais sans aucun style, cela ressemblerait à ceci. Donc ce que je dois faire maintenant, c'est que je dois changer quelques choses dans la marge parce que nous voulons changer l'extérieur de ce plat. Donc, afin de changer cela, ce que vous pouvez faire est juste de cliquer sur le moins gauche et puis voyons ce qui se passe. Et comme vous pouvez le voir en ce moment, cette image dirigée vers la gauche. Donc je vais mettre ça à 60 ans. Maintenant, nous voulons le déplacer vers le haut afin de ne pas utiliser top ou nous allons utiliser moins stop. De cette façon, il se déplace vers le haut. Par exemple, essayons moins 80. C' est déjà un peu mieux. Essayons ça. Essayons 140. Cela chevauche déjà la colonne en ce moment. Et puis je n'ai besoin que de faire un peu au fond peut être moins 70. Et oui, comme vous pouvez le voir, cela semble déjà la glace de reproduction est l'effet coulant d'ailleurs, si vous voulez savoir, cela fait partie des effets de vol stationnaire que vous pouvez trouver ici. Ça s'appelle Bob. Donc c'est plutôt cool. Allons à la suivante. Ok, donc c'est un peu plus compliqué. Qu' est-ce que j'ai fait ici ? Encore une fois, nous avons la section principale ici. Nous commençons toujours par la section principale. Ensuite, nous commençons toujours par une colonne principale, qui est celle-ci par ici. Et puis que se passe-t-il ici ? Il y a une intersection. Donc j'ai juste fait glisser une intersection à l'intérieur de la colonne principale, et cette intersection a deux colonnes, 12 dans la colonne de droite, il y a une image dans la colonne de gauche, il y a une image, un texte de marée, deux boutons, et une couleur d'arrière-plan. Par défaut, une colonne n'a pas de couleur d'arrière-plan. Ainsi, vous pouvez configurer la couleur d'arrière-plan ici comme vous pouvez le voir. Donc, c'est ce que j'ai également fait pour la colonne d'arrière-plan comme vous pouvez le voir. Et de cette façon, nous avons trois couches l'une sur l'autre. Et ce que j'ai également fait pour créer ceci est cadeau cette intersection d'une largeur parce que par défaut il va être pleine largeur à l'intérieur du conteneur principal. Donc c'est 1140 pixels. Mais nous ne voulons pas ça parce que nous voulons quelque chose qui est un peu plus mince parfois. C' est là que j'ai utilisé la largeur du contenu. Ainsi, vous pouvez donner une largeur à tout le contenu à l'intérieur d'une section. Vous pouvez également le faire en passant, pour votre section principale, si vous le souhaitez. Mais c'est déjà défini à Box. Et comme je l'ai déjà dit, la boîte est toujours 1140. Maintenant, il y a une autre chose que je veux vous montrer dans ce design et c'est qu'il y a deux boutons l'un à côté de l'autre. Et cela n'est pas fait avec une autre intersection car vous ne pouvez placer qu' une intersection à l'intérieur d'une section principale, mais vous ne pouvez pas jouer une intersection à l'intérieur d'une intersection. Donc tu vas aller aussi loin que ça. Si vous faites glisser dans une intersection comme celle-ci, comme vous pouvez le voir, il essaiera de le placer sous cette intersection principale. Mais pas à l'intérieur de cette intersection, ce n'est pas possible. Donc ce que j'ai fait ici est un petit tour. Donc, je viens d'importer un bouton et je suis allé à avancer et ensuite positionner. Et puis dans le positionnement, c'est normalement sur défaut. Vous pouvez le mettre en ligne. Et puis si vous mettez ce bouton également en ligne, Ensuite, les éléments peuvent être placés les uns à côté de l'autre. Et puis la seule chose que j'ai fait est d'ajouter un peu de rembourrage ici ou marge pour créer un peu d'espace entre ces deux boutons. Et j'ai appliqué un effet de vol stationnaire cool. Donc, comme vous pouvez le voir, pas très compliqué à créer, mais il semble vraiment cool. Passons maintenant à la suivante, qui est la plus intéressante. J' ai donc recréé ce design parce que dans la vidéo précédente, nous avons regardé cela et cela semble vraiment créatif. Donc, ce que j'ai fait est par photoshop moi-même dans cette image ici est une preuve pour recréer tout ce design. Alors, comment se déroule cette accumulation ? Encore une fois, ce n'est pas si compliqué, donc c'est juste une section principale. Ensuite, il y a une colonne principale, comme vous pouvez le voir ici, qui contient tout. La seule chose qu'il ne contient pas est cette image d'arrière-plan ici, mais c'est juste une image d'arrière-plan de la section principale. Donc, ce que j'ai fait, si vous allez à l'arrière-plan stèle, j'ai mis en place une image de fond qui a ce coin visuel que si vous mettez la position en bas à gauche, alors la caméra va toujours commencer à partir d'ici. Et puis j'ai mis ceci comme couverture, donc il s'étire toujours à l'écran, sorte que l'écran devient plus grand ou plus petit, il va s'ajuster. Et c'est là que vous avez un fond cool qui interfère un peu avec le design. Alors à l'intérieur d'ici, il y a deux intersections. C' est le premier, et il ne contient que ce texte et cette image. C' est juste une image que j'ai téléchargée, non ? Parce que j'ai créé ça dans Photoshop. Donc, une image et un texte et il y a juste un peu de rembourrage, rembourrage supérieur à l'intérieur de cette colonne, comme vous pouvez le voir ici, AD. Et il y a beaucoup de paris sur la droite pour s' assurer que ce texte casse à l'intérieur de cette colonne. Ensuite, il y a la deuxième dans notre section, qui est celle-ci. Et celui-ci a beaucoup de marge négative afin qu'il puisse chevaucher l'intersection que vous pouvez voir ici. Donc, si vous supprimez cette marge, c'est comme cela qu'elle est réellement. deux colonnes dans une intersection, mise en page de trois colonnes dans une intersection. Et puis je viens de traiter cette initiation L.A., hé, montez moins 180 pixels. Et puis j'ai mis l'indice z à deux. Et un index z est un peu la même chose que les calques à l'intérieur d'un Photoshop ou Adobe ksi ou de n'importe quel outil créatif. Donc, plus il est sur le dessus, donc celui avec le plus grand nombre est au-dessus de tout. Donc ici, je n'ai que deux couches, donc j'ai fait ces deux et ensuite c'est une, mais tu n'as pas eu à mettre ça en un seul. C' est automatiquement, je pense que c'est un ou 0 par défaut, donc c'est tout. Et ici, dans cette colonne, il n'y a qu'un arrière-plan. Encore une fois, comme vous pouvez le voir, un simple arrière-plan et parier sur la perspicacité 50 tous les côtés afin qu'il crée de l'espace à l'intérieur ici. Ensuite, les icônes de médias sociaux qui sont créées, qui sont verticales ou juste une liste d'icônes sans texte dedans. Donc normalement, il y a des impôts ici. Je viens de supprimer ce texte est juste une liste et puis je l'ai aligné vers la droite comme vous pouvez le voir, et le placer dans cette colonne. Et puis la seule chose que j'ai fait, que je ne vous ai pas encore montré, est que j'ai mis l'alignement vertical TIF sur le fond parce que vous pouvez utiliser le rembourrage et la marge pour tout si vous le voulez. Mais ce n'est pas la meilleure pratique parce que si vous voulez juste mettre quelque chose en bas, alors vous devez deviner avec tous ces pixels n'est pas un flux de travail très agréable. Donc, ce que vous pouvez faire est juste de mettre l'alignement vertical en bas, puis tous les éléments vont commencer à partir du bas. Et puis vous pouvez ajouter un peu d'interdiction si vous le voulez, mais cela rend votre vie beaucoup plus facile. Alors que l'option d'alignement vertical AC, ok, donc maintenant vous connaissez les bases, choses les plus importantes, vous comprenez la différence et vous pouvez probablement créer des conceptions plus personnalisées en ce moment. Mais il y a encore quelques choses que vous devez savoir pour ne pas rencontrer de problèmes inutiles. 6. Autres éléments que vous devez savoir: Donc, la première chose que je voulais montrer est que les largeurs de colonne peuvent changer si vous créez une nouvelle colonne et parfois ce n'est pas ce que vous voulez. Donc, par exemple, si je change la largeur de cette colonne, alors la taille de ces logos va changer et vous voulez garder votre design cohérent. Si tu en as fini avec quelque chose Dan, tu veux le garder comme ça. Donc, dans cet exemple, cette colonne est de 19,3%, puis c'est parfait pour le logo. Donc, si je crée une nouvelle colonne comme celle-ci, à une nouvelle colonne, alors vous pouvez voir que tout d'un coup tout change. Ce n'est pas ce que je veux. Alors vous pouvez revenir à votre colonne, définir la largeur ici à votre 19.3. Et de cette façon, tu garderas le même design que tu veux. Bien sûr, vous pouvez également utiliser votre souris comme ceci et la changer. Mais c'est une fonctionnalité que vous utilisez très souvent. Aussi, par exemple, avec cette colonne D3 ici sont tous trente-trois point trois. Donc il y a aussi un petit truc ici qui s'appelle la structure. Si vous ne voulez pas taper les nombres, voici quelques mises en page de base et faites votre choix. Donc, il mise en page à trois colonnes est ce premier. Ensuite, il a automatiquement cela avec, comme je l'ai dit précédemment, vous pouvez donner des colonnes et de l'arrière-plan comme je l'ai fait ici. Je l'ai fait avec une couleur, mais vous pouvez aussi lui donner une image d'arrière-plan. Donc, par exemple, quel design comme celui-ci, vous pouvez donner à la colonne entière une image d'arrière-plan et vous pouvez toujours placer des éléments dessus parce que ce n'est pas une très bonne pratique de simplement utiliser une image, puis ajouter des textes sur ici et une marge négative sur le texte pour le placer au-dessus de votre image. Mais vous pouvez également configurer une image comme arrière-plan. Et puis chaque élément que vous mettez à l'intérieur de cette colonne sera automatiquement sur le dessus. C' est ainsi que cela fonctionne aussi. Si vous pouvez utiliser la fonctionnalité d'arrière-plans ici, c'est mieux que d'utiliser des marges négatives pour faire des choses les unes sur les autres. Ok, maintenant voici une chose que je n'aime pas vraiment à propos de l'élément ou, et c'est quand vous avez un design comme celui-ci avec une mise en page à trois colonnes, vous voulez 20 pixels entre toutes ces sections. Comment peux-tu faire ça ? Je n'ai pas encore trouvé de solution. Donc la chose la plus évidente que la plupart des gens font est donner à chaque colonne un pixel Sweeney, non ? Par exemple, ou de charité ou tout ce que vous voulez. Mais le problème avec cela est qu'il y a un peu d'espace ici, ce qui signifie que votre site Web n'est pas parfaitement aligné sur la grille. Et cela peut rendre votre design moins professionnel parce qu'il n'est pas très bien aligné. Et une autre solution que je vois certaines personnes font est juste ajouter du rembourrage sur la gauche ici, comme ceci. Laissez le mettre sur la gauche et puis supprimez simplement le rembourrage sur ce milieu. Mais alors le problème est que ce bloc est plus grand que les deux autres, donc cela ne fonctionne pas non plus. Donc ce que je fais toujours, c'est que je fais un peu de maths. Donc, disons que vous voulez 20 pixels entre ces colonnes. Ce que je fais alors, c'est que je vais juste à la marge et par exemple, je fais 14 par ici et sept par ici, aussi sept par ici, et puis 14 par ici, parce que sept plus sept. 14. Cela signifie donc que ce bloc a 14 pixels de moins de largeur, mais c'est aussi vrai pour ce bloc et ce bloc. Et de cette façon, il est parfaitement aligné sur la grille. Et il y a 20 pixels, en fait 21 entre les deux, donc ce n'est pas parfait. Vous pouvez aussi démarrer 66 ici si vous le voulez, mais cette boîte, c'est deux pixels moins large, donc ce n'est pas parfait. Donc, je n'ai pas vraiment de solution pour cela. Malheureusement, si vous voulez 30 pixels de largeur, alors c'est facile. Vous venez de mettre 20 ici, Sénateur Sen et en sueur. Maintenant, c'est parfait. Encore une fois, si vous avez une meilleure solution que cela, s'il vous plaît laissez-moi savoir parce que je ne suis pas sûr, mais c'est la meilleure solution que je pourrais trouver pour ce problème. Et si c'est encore un peu trop pour vous et que vous n'avez pas vraiment confiance, alors vous pouvez utiliser le navigateur. Donc, si vous faites un clic droit n'importe où à l'intérieur des éléments ou si vous pouvez obtenir le navigateur ici et ici, vous pouvez tout voir. Ainsi, vous pouvez voir la hiérarchie. C' est la section principale, c'est la colonne, puis elle sera également sélectionnée. Donc, de cette façon, vous ne pouvez presque jamais perdre où vous êtes parce que vous pouvez simplement voir la hiérarchie ici et vous pouvez même donner chaque section et nom si vous le souhaitez. Donc, cette section, par exemple, est une histoire, de sorte que vous pouvez simplement double-cliquer sur le nom, vous tapez histoire, et vous pouvez cliquer dessus et ensuite vraiment naviguer à travers le site Web. Et vous pouvez même faire glisser et changer la position de chaque section. Par ici. Il rend vraiment votre vie un peu plus agréable, ce que vous pouvez aussi faire, ce qui est vraiment cool est des éléments de hauteur sur mobile. Donc maintenant, nous avons seulement parlé de bureau, mais disons sur mobile, je ne veux pas montrer ces deux images parce que je ne sais pas laquelle choisir et je veux juste les cacher. Donc, ce que vous pouvez faire est que vous pouvez passer en mode mobile. Vous pouvez cliquer sur votre section principale. Je l'ai déjà fait comme vous pouvez le voir, parce qu'il devient gris. Vous pouvez aller à Advanced, vous pouvez aller à responsive, et vous pouvez cliquer sur la hauteur sur mobile. Et cela va juste cacher tout ça sur mobile. Vous pouvez également le faire sur tablette si vous le souhaitez. Donc papa est aussi assez cool, mais vous pouvez aussi faire, ce qui est assez cool, est changé de positions. Donc, par exemple, si je veux d'abord montrer les images sur mobile, puis le texte, ce qui est quelque chose que vous voulez. Beaucoup de fois sur mobile, vous pouvez aller à cette même fenêtre ici puis cliquer sur les colonnes des rivières. Donc s'il y a deux colonnes à l'intérieur de cette intersection, qui est vrai pour ce site est de jeter un oeil ici dans cette intersection deux colonnes, non ? Allez sur mobile. Assurez-vous de mettre ça. Oui. Et puis il montrera d'abord les images, puis le texte. Et puis vous pouvez voir que vous devez ajouter un peu de rembourrage ici pour vivre, pour lui donner un peu de place, mais ce sont des détails. Et puis la dernière chose pour les modes réactifs, que je veux vous montrer est que vous pouvez réinitialiser les paramètres sur mobile si vous le souhaitez sans affecter le bureau. Donc, par exemple, j'ai 60% de rembourrage à droite ici, ce qui met tous ces textes à gauche. Alors si je vais au mobile, normalement ça ressemblerait à ça. Maintenant, je peux juste dissocier cela et ajuster le rembourrage pour mobile. Sans cela, cela affectera le rembourrage sur les bureaux ou les données est également assez agréable. 7. Quand utiliser ce quoi: Ok, maintenant passons à la dernière partie de cette vidéo qui est appelée alors quand utiliser quoi ? Parce que le rembourrage et la marge sont encore similaires, non ? Donc, ce que vous voulez faire est de comprendre les bases et ensuite ajouter votre propre variation dessus. Donc, ce que vous devez savoir, c'est que les éléments ou n'ont pas été vraiment conçus pour les designers. C' est plus pour la moitié des designers n'avaient pas envie de passer beaucoup de temps sur les détails. Donc, ils ont essayé de nous aider, mais ils ont appliqué beaucoup de literie et de style déjà inséré éléments. Ainsi, par exemple, chaque colonne a déjà par défaut un peu de remplissage, ce qui est en fait très frustrant. Et parce que comme vous pouvez le voir dans ce design, je n'ai pas changé de flexion ici. Donc, si vous faites glisser dans une intersection, alors vous mettez certains éléments. Par exemple, des attaques ici, quelque chose comme ça. Vous pouvez voir qu'il y a un peu d'espace entre ici et ici. Et c'est parce qu'il y a déjà un rembourrage appliqué à l'intérieur de chaque colonne. Donc, si vous allez à l'avance, vous devez dissocier le rembourrage pour le déplacer à la taille. Donc, comme vous pouvez le voir ici dans cette conception, cette colonne principale a déjà le rembourrage, le fanning standard, et je dois toujours le dissocier afin de m'assurer que c'est réellement sur la grille 1140. Donc toute la largeur du site. Donc, si vous ne faites pas cela et que vous risquez que vous faites partie ne sont pas alignés sur le logo à l'intérieur de votre en-tête, mais aussi à l'intérieur de votre en-tête. Assurez-vous de le faire. Sinon, il y a toujours ce petit espace sur la gauche qui rendra tout un peu plus étroit. Donc, si vous voulez rendre vos conceptions pixel-parfait, assurez-vous que vous supprimez le bâton à l'intérieur des colonnes principales et de les mettre à 0. Quand il suggère également est quand vous faites une nouvelle section, est que vous appliquez toujours 60 pixels en haut et en bas et 0 à gauche et à droite. Alors créons une nouvelle section. Je vais créer une section simple ici et juste toujours lui donner un peu de rembourrage en haut et en bas ici afin que vous ayez toujours des espaces pour travailler. Et c'est sympa de travailler. Sinon, tout est à l'étroit. Mais aussi dans un bon design, il y a toujours des espaces dans chaque section. C' est aussi la même chose pour tablette et mobile, mais vous devez également appliquer des paris sur la gauche et sur la droite, car sinon il n'y aura pas de paris sur la gauche et la droite et tous les éléments seront alignés sur les côtés de l'écran, qui n'a pas l'air très professionnel. Donc, ce que vous voulez faire, c'est que vous voulez appliquer au moins 15 pixels, je dirais à gauche et à droite, et aussi 60 en haut et en bas. Et encore une fois dans la colonne 0 pixels l'incorporation est la même sur la tablette. Sur tablette presque toujours choisir 20, mais je dirais 15 est le minimum. Alors rendons maintenant réaliste ce que cela fera si vous jetez un oeil à mon site Web et que vous ouvrez réellement le navigateur afin que nous puissions voir ce que nous faisons. On est ici dans cette section principale, non ? Si on passe à avancé, vous pouvez voir défendre votre gauche et votre droite. Si je supprime cela, alors il semble que cela ne semble pas très professionnel. Donc, vous voulez lui donner un peu d'espace sur mobile et tablette et pas sur le bureau. Parce que sur le bureau, il y a déjà assez d'espace car la plupart des écrans sont plus larges que 1140 pixels. C' est pourquoi je fais ça. Alors maintenant comment faire face à l'aperçu de la literie des sections et ce qu'il faut faire avec tous les éléments. Alors choisissons cet exemple. Il y a un vrai projet que j'ai fait. Donc ici vous pouvez voir là, il y a un sous-titre, un titre principal. Il y a quelques éléments qui est une mise en page à trois colonnes et il y a un bouton. Et tout cela est une grande section principale. Donc ce que je ferais, tout d'abord, c'est de parier sur le haut et le bas. Normalement, je dirais au moins 16, mais pour ce design, j'ai choisi 90. Mais parce que je voulais avoir un peu plus d'espace, je voulais le rendre luxueux. Donc, si vous faites cela, alors vous n'avez pas à appliquer la marge supérieure sur les piles de tournée sur le dessus et vous n'avez pas à gâcher sur le bouton. Et c'est bien parce que vous allez toujours utiliser les boutons et le texte dans beaucoup d'autres endroits. Donc, mon conseil est de toujours essayer d'éviter d'ajouter de la marge inférieure aux boutons et deux textes et de ne l'utiliser que sur les éléments qui ont réellement besoin de cet espace. Donc, dans cet exemple, ce que vous voulez faire, assurez-vous qu'il y a une marge sur la grille des images. Vous mettez donc une marge sur la grille sur une mise en page à trois colonnes, car cette disposition à trois colonnes nécessite toujours un peu d'espace, mais ce n'est pas toujours le cas pour le titre. Le titre n'a pas toujours besoin d'un 50 pixels en bas. Donc, ne mettez pas les 50 pixels en mars en bas sur le texte, mais mettez-le sur la mise en page de trois colonnes parce que cela nécessite toujours des espaces. C' est les mêmes quatre boutons. Bien sûr, vous avez besoin d'un peu d'espace blanc pour un bouton, mais des éléments ou déjà appliqué, beaucoup de literie dans beaucoup d'endroits sont prêts. Donc, si vous faites glisser un titre, il a déjà des paris. Donc tu n'as pas vraiment besoin de t'inquiéter pour ça. Laissez-moi vous montrer ce que je veux dire. Donc, comme vous pouvez le voir ici, je n'ai rien appliqué au titre ou au bouton, mais il y a déjà un peu d'espace, donc vous n'avez pas vraiment à vous inquiéter à ce sujet. Essayez simplement de l'éviter sur le texte et les boutons et de mettre les grandes marges sur les choses que vous n'utilisez pas souvent parce qu'il texte que vous allez utiliser souvent. Vous voulez simplement copier cela et le coller. Vous ne voulez pas avoir à gérer la marge et le rembourrage que vous avez appliqué sur une autre page. Donc, en utilisant cette méthode, vous allez le rendre beaucoup plus facile pour vous-même. 8. Merci: J' espère donc que cette classe vous donne un peu de confiance maintenant dans l'élément ou qui vous permettra de créer des designs plus créatifs avec des éléments. Ou maintenant, j'ai beaucoup de plans pour créer plus de classes qui vous montreront comment créer des conceptions réelles avec élément ou. Mais pour l'instant, nous avons couvert la théorie principale qui vous donnera une base principale pour comprendre comment tout cela fonctionne. J' espère que vous êtes aussi heureux que vous ayez regardé ce cours. J' ai travaillé très dur sur ce verre et j'ai vraiment apprécié. Donc si vous voulez voir plus de classes de moi, alors vous pouvez cliquer sur mon profil. J' ai beaucoup d'autres cours qui vous aideront à développer ou à démarrer votre propre entreprise de design web. Alors merci d'avoir regardé. Et si vous avez des questions, alors vous pouvez les laisser dans les discussions ci-dessous. Merci.