Très bien, alors jetons un coup d' œil à rendre
la page d'accueil ou réactive.
Et pour la plupart,
ce n'est pas si mal.
Il s'agit de la vue tablette.
De toute évidence, nous pouvons réduire le titre un peu plus petit.
Rendez également la banane un peu plus courte en hauteur.
Juste ici.
Bien sûr, nous pouvons ajouter un peu de rembourrage à la balle à
section de voyage et également
enseigner à mieux continuer la section.
Mais je pense que c'est tout ce que nous devons faire parce que
le reste est plutôt bon.
La section de conception unique des canaux a fière allure.
La galerie est très bien.
Visites, notre section blog est très bien.
Il n'emballe pas les avis, tout va bien.
Cependant, pour la vue mobile,
qui est ce que nous sommes arrivés ici, nous allons évidemment
devoir rendre le texte beaucoup, beaucoup, beaucoup,
beaucoup plus petit que vous pouvez le voir.
Ajoutez également du rembourrage ici aussi pour la section voyage.
Et nous devons faire quelque chose au sujet du fait
que nous avons
les deux images de
la deuxième section alignées
l'une à côté de l'autre idéalement devrait être,
j'adorerai voyager.
Puis cette image et ensuite nos enfants,
les meilleurs endroits, puis l'image de cette montagne.
Nous allons donc devoir faire quelque chose à ce sujet aussi.
À part cela, le reste
de la page semble plutôt bon à prendre en compte.
La galerie est maintenant une seule ligne, ce qui est très bien.
La section blog comporte également une seule ligne.
Je veux 22 rangs, je suis désolé.
Ensuite, il ne paquete pas tous les avis maintenant et
la propre colonne séparée, puis produit aussi comme
vous pouvez le voir, cela à.
Tous. Bon, donc allons de l'avant et commençons
à apporter les changements.
Nous allons donc éditer avec Elementor.
Nous allons d'abord gérer la bannière parce que c'
est le principal problème.
Très bien. Tablettes réactives.
Qu'avons-nous ici ?
Nous allons aller de l'avant et modifier le texte.
Et le texte était d'environ 120 pixels.
Comme vous pouvez le voir.
On va avoir deux grosses cassures,
juste un peu plus petit.
Disons donc 88 pixels de large.
Mais n'oubliez pas que nous avons fixé une hauteur pour la section.
Passons maintenant à cette section.
Nous avons ici la hauteur minimale.
Nous allons réduire cela autant que possible.
Ne vous inquiétez pas du fait que le texte chevauche
l'en-tête pour l'instant.
Mais essayons de vous donner une hauteur raisonnable
pour la table.
Et je pense que 519, mon bébé,
trop petit, disons sept cents.
Sept cents semblent assez bien.
À partir d'ici, n' oubliez pas que nous
lui donnons également des marges négatives.
Maintenant que nous avons réduit la taille de cent dix cent
à 700 femmes et allez également
à l'invitation Advanced ici.
Ne vous laissez pas berner par le fait que vous ne voyez
rien à l'intérieur des cases de marge.
Il hérite en fait des marges
de la vue du bureau.
Alors ici, allons-y maintenant et essayons de réduire cela.
Désolé, j'ai oublié de dissocier.
Allons faire 10.
Très bien. Je vais continuer à remonter.
Cela devrait être à propos, laissez-moi juste le donner
150 moins, d'accord, je ne peux pas faire ça.
Laissez-moi juste essayer ça.
Moins 150.
D'accord ? Je pense que c'est un peu trop.
Allons-y.
Ok, donc il devrait y avoir
environ 123 haut-parleurs de loisirs
, un vingt-cinq, vingt-cinq pixels.
Maintenant, pour le texte lui-même ou l'en-tête,
nous pourrions le rendre un peu plus petit.
Et c'est tout.
Que pensez-vous ?
Je pense que c'est très bien. 80 pixels pour l'en-tête.
Réduisez la hauteur de cette section à 700 pixels,
réduisez également la marge négative.
Et je pense que c'est très bien, bien que soyez prudent,
voyez-vous maintenant que si nous étendons
le tableau à la taille maximale de l'écran,
vous pouvez voir que l'espace blanc apparaît maintenant.
Donc, cela devrait nous dire maintenant
que tout va bien, attendez une seconde.
Nous devons augmenter les imaginations négatives,
en fait, c'est une autre chose que vous devriez être aisé.
Lorsque vous appliquez
marges négatives et un mode réactif,
assurez-vous d' appliquer des marges négatives
à la plus grande taille d'écran possible.
Il s'agit de la plus grande concise possible pour
la vue inclinée à 1024 par 878,
nous allons augmenter ou,
dans ce cas, réduire la marge négative.
Parce que lorsque vous êtes négatif, nous
réduisons cela. C'est 158.
C'est à peu près le cas, donc maintenant,
si nous réduisons cela à la plus petite taille pour tablette,
nous ne verrons toujours aucun espace blanc.
Et c'est ça.
Je pense que c'est bon pour la tablette.
Apportons maintenant quelques modifications à
la première ou à la deuxième section.
Et cela donne maintenant, que devons-nous faire ?
Pour les tablettes ? Nous pouvons ajouter un peu de rembourrage.
Très bien, nous allons aller ici et c'est la section.
Allons à Advanced.
Et juste ici, ajoutons un peu de rembourrage.
On peut aller aux 25 pixels habituels , puis
à un effet pixels pour le bas.
Laissez-nous refroidir ici.
Nous ferons exactement la même chose ici aussi.
Je vais vous montrer quelque chose de vraiment cool.
25 pixels du haut , puis
25 pixels en bas.
Je, maintenant, si tu regardes ça,
tu réaliseras que ça n'a pas l'air si beau.
Je veux dire, vous avez une image ici,
les textes, la colonne des textes est un peu trop grande.
Il est un peu trop grand.
C'est génial aussi avec la deuxième section.
Alors, que pouvons-nous faire exactement ?
La chose la plus simple que nous puissions faire serait simplement
faire en sorte que chaque colonne ait une largeur de 100 %.
Donc, au lieu d'avoir deux colonnes, il faudra
venir côte à côte.
Nous aurons deux colonnes l'une au-dessus de l'autre.
Par exemple, ici même,
si j'ai donné cette première colonne ici, nous allons juste en
donner une ou
cent, cent.
Et puis nous allons donner cette colonne et aussi 100.
Et c'est là.
heure actuelle, même si nous étendons à
la plus grande taille possible sur une tablette,
je pense que ça semble correct.
Cela semble bien sur un pourboire,
mais assurez-vous simplement que les images sont suffisamment grandes.
Un changement à faire
ici serait d'ajouter
peu de rembourrage à ce bouton En savoir plus.
Je vais cliquer là-dedans, passer au
modèle avancé et les bouddhistes ajoutent en bas.
Nous ajouterons un peu de rembourrage ici.
Permettez-moi de dire que 25 pixels sont peut-être un peu trop importants.
Dans ce cas, peut-être 15 pixels.
15 pixels sont corrects.
Et c'est là.
Ok, faisons exactement le même symptôme de thème ici aussi.
Je vais cliquer sur cette colonne ici.
Le goto, la largeur de la colonne.
Je vais lui donner 100.
Et puis la deuxième colonne ici aussi, 100.
D'accord, puis jetez un coup d'œil à ça.
Idéalement, nous voulons avoir cette colonne juste
en haut de cette colonne.
Comment pouvons-nous faire cela ?
Eh bien, nous allons simplement aller dans cette section, tenir ces deux colonnes,
tenir ces deux colonnes
aller à la section, passer ici à Advanced.
N'importe quel ici sur le réactif.
Vous allez voir cette option pour inverser les colonnes.
On va le faire sur tablette.
On va le faire et on va aussi le faire.
Maintenant, vous pouvez voir que l'enfant,
le meilleur contre colonne, se trouve maintenant au sommet de la montagne.
Et c'est exactement comme ça qu'il faut faire.
Je vais juste y aller et ajouter un peu de rembourrage
au bouton du propriétaire ici.
Rembourrage en bas, 2515 pixels.
Je crois que c'était une fusions et acquisitions, c'est bon,
alors revenons au sommet.
Faites défiler vers le bas
K.
Nous avons beaucoup d'espaces.
Très bien.
Ok, ça a l'air bien, ça va bien.
Essayons maintenant de réduire la taille au
plus petit et de voir s' il y a quelque chose que
nous devons faire ici. Ça a l'air bien.
Ça a l'air parfaitement bien.
Et c'est là. D'accord.
C'est tout pour la vue tablette.
Qu'en est-il de la vue mobile ?
Passons au mobile.
Très bien, donc évidemment, la banane ici,
nous allons devoir réparer celle-ci.
Eh bien, je suis juste en train de faire défiler vers le bas et
voir le reste de la page.
Le reste de la page a l'air plutôt bien.
Oui, ça a l'air bien.
Tout se trouve maintenant dans une seule colonne dans
laquelle nous avons utilisé une colonne, puis dans
la page Contact.
Donc, tout ce que nous devons faire maintenant, c'est
de gérer la bannière.
Alors, faisons-le. Je vais faire défiler ici.
Passons à la section.
Très bien, la première chose que nous allons faire maintenant
c'est pour les hauteurs.
Il s'agit d'une hauteur minimale de 700 pixels.
Il est bien entendu hérité de la vue tablette.
Voyons si nous pouvons peut-être
augmenter un peu la taille.
En fait.
Je pense que 879, essayons d' obtenir quelque chose un peu,
même comme 870 pixels peut-être.
Essayons d'augmenter un peu la taille jusqu'à
la plus grande taille pour la vue mobile.
Maintenant, vous remarquerez qu' il y a
un peu trop de marge négative
car vous pouvez voir la ligne bleue et vous
pouvez voir que le logo apparaît ci-dessus.
Donc, ce qu'il va falloir faire
maintenant, c'est aller à Advanced.
Et ensuite, pour les marges négatives,
essayons de ne pas en
avoir besoin dans des marges négatives.
En fait, j'allais faire 0.
Oui, passons à 0 puisque nous avons
de toute façon un arrière-plan occultant.
Alors, qu'est-ce que McDonald's 0 ?
C'est pour mobile.
Très bien, donc à partir d'ici,
réduisons les hauteurs.
Nous allons réduire la hauteur de la page maintenant de la
bannière plutôt quelque chose de raisonnable.
Voyons voir. Je pense qu'il y a 535. Qu'en est-il du 530 ?
Je pense que c'est très bien.
colline des cinq tiers semble très bien. Faites défiler vers le bas
D'accord. Oui.
Je pense que tout irait bien. Cette fabrication est très petite.
Et voyez.
Ok, donc les textes peuvent devenir
un peu trop volumineux en fait.
Alors, faisons-le. Je vais
revenir éditer l'épigraphie de la rubrique.
On va le faire, c'est qu'on va essayer
de rendre ça aussi petit que possible.
Et maintenant, si nous étendons le plus grand pour la vue mobile,
ce que vous avez ici c'est, d'accord,
donc cela nous amène à une nouvelle discussion.
Le silicium est de la plus grande taille pour les appareils mobiles,
le Texas, il serait trop petit.
Si nous essayons d'augmenter la taille ici,
cela semble bien sur la taille d'écran la plus élevée
possible pour le mobile.
Le problème que je sais, c'est que si nous réduisons la taille de l'écran
à la plus petite taille possible pour mobile,
maintenant que le texte est un peu trop grand,
ce que vous pouvez faire dans ce type de scénario est de changer
de style. unité de taille depuis les pixels
jusqu'au port de vue évalué, passez en revue la VW ou l'option ici,
la VW est la largeur de la fenêtre.
Nous allons essayer d'ajuster la taille du texte en fonction de
la largeur de la taille de l'écran.
Alors, jetez un œil à ça.
Je vais passer maintenant à VW.
Et essayons d'y aller avec une taille de dix.
Pour les plus hauts.
Il s'agit de la taille d'écran la plus élevée
pour mobile.
Et ensuite, si nous réduisons la taille jusqu'à la plus petite,
vous pouvez voir que le texte est également en train de diminuer.
Au fur et à mesure que nous réduisons la taille de l'écran.
C'est un conseil que je peux vous donner en ce moment,
suffit de passer simplement à VW par opposition
aux pixels ou K. Alors peut-être,
peut-être une petite chose que nous pourrions faire.
Une dernière chose que nous pourrions faire à nouveau sera
de réduire un peu plus la hauteur.
Disons 450 pixels.
Ce devrait être le dernier changement.
Essayons de le rendre plus petit.
Et voilà.
Ok, je pense que c'est très bien.
C'est très bien à ce stade.
Très bien.
Vous y allez.
Faisons simplement défiler vers le bas,
voir ce que nous pouvons faire d'autre.
C'est à peu près tout.
Je pense que tout va bien.
Permettez-moi de rendre celle-ci vraiment petite.
Evidence, une colonne.
Et voilà,
ok, une dernière chose,
dernière chose que nous pourrions faire est
peut-être de réduire un peu la taille
du bouton ici.
Allons de l'avant et modifions le bas
ici, nous allons passer au style.
En fait, je vais aller au style.
Ensuite, pour la typographie ici,
passons rapidement dans leur mélange de taille.
Bien sûr, cela est réglé sur mobile,
et ensuite nous allons simplement aller de l'avant et peut-être en faire un.
Voyons voir.
Défauts et pixels, peut-être 14 pixels,
ou que pouvons-nous changer d'autre ?
Nous pouvons également modifier le rayon de la frontière.
Ramenons celui-ci à,
disons cinq pixels.
Et c'est là.
Bon, maintenant, nous pourrions essayer de rendre la taille trop petite.
En fait, je n'ai pas testé ça.
Je ne suis pas sûr que cela affecterait la vue de la tablette.
va affecter la vue de la tablette et
même la vue du bureau sera toujours petite.
C'est à vous de décider de faire,
de réduire le bouton.
Tous les trois sont de tailles d'écran.
Ou vous pourriez simplement y aller avec un médium.
Je pense que le moyen conviendra bien pour le mobile.
Très bien.
C'est ça.
Je vais aller de l' avant maintenant aux mises à jour.
Et c'est là.
Nous avons construit avec succès dans
une page d'accueil réactive.
Merci d'avoir regardé et bien sûr, je vous verrai
dans la prochaine classe.