\n Exigences de ce tutoriel
\n<\/h5>\n
\n Vous aurez besoin de t\u00e9l\u00e9charger certaines images, vecteurs et polices afin de cr\u00e9er ce site. Mais vous pouvez toujours suivre sans ces atouts. Pour organiser correctement le contenu, cr\u00e9ez un dossier s\u00e9par\u00e9 pour votre site.\n<\/p>\n
- \n
- \n
\n Rendez-vous sur pexels.com<\/a> et t\u00e9l\u00e9chargez :\n <\/p>\n
- \n
- \n
\n 4 images de taille 1160 x 480 pour diaporama. Voici une capture d’\u00e9cran de pexels. Vous pouvez mettre cette taille dans la case \u00ab\u00a0taille personnalis\u00e9e\u00a0\u00bb sur ce site.\n <\/p>\n<\/li>\n
- \n
\n 6 images de taille 271 x 208 pour la section ‘services’.\n <\/p>\n<\/li>\n
- \n
\n 1 image de taille 1160 x 692 pour la section ‘Contactez-nous’.\n <\/p>\n<\/li>\n<\/ul>\n<\/li>\n
- \n
\n Rendez-vous sur freepik.com<\/a> et t\u00e9l\u00e9chargez :\n <\/p>\n
- \n
- Une ic\u00f4ne en forme de croix (vous pouvez modifier cette ic\u00f4ne dans l’illustrateur ou simplement t\u00e9l\u00e9charger le fichier png \u00e0 partir de feepik).\n <\/li>\n
- 6 images de visage pour la section ‘T\u00e9moignages’.\n <\/li>\n<\/ul>\n<\/li>\n
- \n
\n Allez sur subtilpatterns.com<\/a> et t\u00e9l\u00e9chargez le motif ‘brickwall’ pour la section ‘Testimonials’.\n <\/p>\n<\/li>\n
- \n
\n Au fur et \u00e0 mesure que vous avancerez dans ce didacticiel, je vous expliquerai comment t\u00e9l\u00e9charger les polices requises (cela peut \u00eatre fait dans Muse).\n <\/p>\n<\/li>\n
- \n
\n Utilisez le texte factice de lipsum.com<\/a>.\n <\/p>\n<\/li>\n<\/ul>\n
\n COMMEN\u00c7ONS!\n<\/p>\n
\n Pr\u00e9paration de l’espace de travail et configuration de l’en-t\u00eate\n<\/p>\n
\n 1 Cr\u00e9ez un nouveau site en allant dans Fichier > Nouveau site (Ctrl+N) et mettez les valeurs comme indiqu\u00e9 ci-dessous. N’oubliez pas de cocher la case \u00ab\u00a0Sticky Footer\u00a0\u00bb. Cliquez sur OK et vous aurez le mode PLAN. Double-cliquez sur A-Master situ\u00e9 en bas dans une zone grise. Vous allez tout cr\u00e9er sur cette page ma\u00eetre.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b3f0862.webp\")
<\/a><\/p>\n\n 2 Choisissez l’outil de texte dans la bo\u00eete \u00e0 outils situ\u00e9e sur le c\u00f4t\u00e9 gauche de la fen\u00eatre de l’application. Cliquez et faites glisser sur le canevas ou la page pour cr\u00e9er une zone de texte. Acc\u00e9dez au panneau de texte (Ctrl + T), sous la liste d\u00e9roulante des polices, recherchez les polices Web et choisissez \u00ab\u00a0Ajouter des polices Web\u00a0\u00bb et t\u00e9l\u00e9chargez les polices suivantes :\n<\/p>\n
- \n
- Rametto One\n <\/li>\n
- Tron\u00e7on\n <\/li>\n
- Questionnaire\n <\/li>\n
- Voie ferr\u00e9e\n <\/li>\n
- noble\n <\/li>\n
- PT Sans\n <\/li>\n
- Ubuntu\n <\/li>\n
- Homard\n <\/li>\n<\/ul>\n
\n Apr\u00e8s avoir t\u00e9l\u00e9charg\u00e9 ces polices, supprimez cette zone de texte.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b5afeaf.webp\")
<\/a><\/p>\n\n 3 Acc\u00e9dez au panneau Calques situ\u00e9 \u00e0 droite de la fen\u00eatre de l’application. S’il n’y est pas, allez dans le menu Fen\u00eatre > Calques. Vous y verrez un calque nomm\u00e9 Calque 1 (couleur bleue). Il s’agit du calque par d\u00e9faut et tout ce que vous cr\u00e9ez ou placez sur le canevas y va. Double-cliquez sur ce calque et nommez-le \u00ab\u00a0En-t\u00eate\u00a0\u00bb.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b8cad84.webp\")
<\/a><\/p>\n\n 4 \u00c0 l’int\u00e9rieur du panneau des calques, cliquez sur la petite ic\u00f4ne de papier \u00e0 bord pli\u00e9 situ\u00e9e dans le coin inf\u00e9rieur droit. Cliquer dessus cr\u00e9era un nouveau calque de couleur rouge. Encore une fois, double-cliquez sur ce calque et renommez-le en \u00ab\u00a0Contenu\u00a0\u00bb.\n<\/p>\n
\n 5 Cliquez et faites glisser ce calque de contenu et placez-le sous le calque d’en-t\u00eate. Nous avons fait cela parce que nous voulons que notre en-t\u00eate soit au-dessus de tout.\n<\/p>\n
\n 6 S\u00e9lectionnez le calque d’en-t\u00eate et r\u00e9duisez le panneau des calques.\n<\/p>\n
\n 7 S\u00e9lectionnez l’outil Rectangle dans la bo\u00eete \u00e0 outils ou appuyez sur \u00ab m \u00bb sur le clavier.\n<\/p>\n
\n 8 Dessinez un petit rectangle sur le canevas et assurez-vous que sa couleur de bordure est bleue, ce qui indique que cet objet se trouve \u00e0 l’int\u00e9rieur du calque d’en-t\u00eate.\n<\/p>\n
\n 9 Acc\u00e9dez au panneau Transform situ\u00e9 en haut \u00e0 droite de la fen\u00eatre de l’application. Laissez la largeur (W) et mettez 50 \u00e0 l’int\u00e9rieur du champ de hauteur (H) et appuyez sur Entr\u00e9e. (Ne vous souciez pas des valeurs X et Y.)\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bc3e592.webp\")
<\/a><\/p>\n\n 10 En haut de la page, vous verrez deux lignes de couleur bleue (illustr\u00e9es dans la capture d’\u00e9cran ci-dessous). Ceux-ci sont appel\u00e9s \u00ab guides \u00bb. Lorsque vous survolez le premier guide, il indique \u00ab\u00a0Haut de la page, faites glisser pour ajuster le rembourrage au-dessus de la page\u00a0\u00bb et l’autre indique \u00ab\u00a0En-t\u00eate, faites glisser pour ajuster la position\u00a0\u00bb. La mise en place de ces guides au tout d\u00e9but est tr\u00e8s importante.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bf23e62.webp\")
<\/a><\/p>\n\n 11 Maintenant, comme nous avons cr\u00e9\u00e9 un rectangle de H=50, cliquez, maintenez et faites glisser le guide \u00ab\u00a0haut de page\u00a0\u00bb jusqu’\u00e0 ce que la bo\u00eete qui appara\u00eetra en dessous une fois que vous commencerez \u00e0 faire glisser indiquera Y=50.\n<\/p>\n
\n 12 De m\u00eame, faites glisser le guide d’en-t\u00eate ci-dessus vers le haut du guide de page jusqu’\u00e0 ce qu’il indique Y=0. Nous avons fait cela pour configurer notre zone d’en-t\u00eate. (Vous voudrez peut-\u00eatre exp\u00e9rimenter en pla\u00e7ant ces guides \u00e0 diff\u00e9rentes positions pour diff\u00e9rents r\u00e9sultats, mais c’est bon pour le moment.)\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c2cc503.webp\")
<\/a><\/p>\n\n 13 S\u00e9lectionnez le rectangle que nous venons de cr\u00e9er, faites-le glisser vers la zone d’en-t\u00eate afin qu’il s’adapte correctement.\n<\/p>\n
\n 14 Maintenant, nous devons augmenter la largeur du rectangle et la rendre \u00e0 100 % afin que l’en-t\u00eate soit parfait sur toutes les tailles d’\u00e9cran. D\u00e9veloppez le rectangle sur les deux bords et assurez-vous qu’il s’enclenche avec les bords. Un guide orange appara\u00eetra qui garantit que l’objet a \u00e9t\u00e9 captur\u00e9. Au fur et \u00e0 mesure que vous augmentez la largeur du rectangle, la fen\u00eatre contextuelle indiquera W = 100% ou W = 1160 lorsque vous atteindrez le bord.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c5f0fa0.webp\")
<\/a><\/p>\n\n 15 Gardez le rectangle s\u00e9lectionn\u00e9, cliquez sur le mot Remplir sous le menu de l’application et d\u00e9finissez les options comme suit. Choisissez la premi\u00e8re couleur comme noir et la deuxi\u00e8me couleur: R=37, G=37, B=37.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c90d279.webp\")
<\/a><\/p>\n\n 16 Allez dans Fichier > Enregistrer le site. Enregistrez votre site chaque fois que vous apportez une modification.\n<\/p>\n
\n 17 Cr\u00e9ez une zone de texte et tapez – ‘example.com’ et modifiez sa mise en forme comme indiqu\u00e9 ci-dessous.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cc3e77d.webp\")
<\/a><\/p>\n\n 18 Ajustez la taille de la zone de texte afin que tout le texte apparaisse sur une seule ligne. S\u00e9lectionnez cette zone de texte et faites-la glisser sur le rectangle noir. Alignez-le sur le centre vertical du rectangle (une ligne bleue vous indiquera quand il est centr\u00e9) et accrochez-le \u00e0 la bordure gauche comme indiqu\u00e9 ci-dessous.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cebd543.webp\")
<\/a><\/p>\n\n 19 Cr\u00e9ez une zone de texte et saisissez \u2013 ‘Accueil’. Modifiez sa mise en forme comme suit. Ajustez la largeur et la hauteur de la zone de texte en cons\u00e9quence. Vous pouvez \u00e9galement le faire \u00e0 partir du panneau de transformation. Le mien est W=52, H=17.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d124081.webp\")
<\/a><\/p>\n\n 20 Copiez et collez cette zone de texte et saisissez \u00ab Services \u00bb dans la nouvelle. Ajustez la largeur. Faites glisser et placez cette zone de texte \u00e0 c\u00f4t\u00e9 de la maison avec tr\u00e8s peu de diff\u00e9rence entre les deux. Encore une fois, les guides vous aideront \u00e0 bien vous aligner.\n<\/p>\n
\n 21 Copiez et collez cette zone de texte pour quatre fois plus et tapez \u2013 Pourquoi nous, T\u00e9moignages, Contactez-nous et Newsletter. Placez ces zones de texte une par une \u00e0 espacement \u00e9gal \u00e0 c\u00f4t\u00e9 de \u00ab\u00a0services\u00a0\u00bb.\n<\/p>\n
\n 22 Avec l’outil de s\u00e9lection s\u00e9lectionn\u00e9 et la touche Maj enfonc\u00e9e, s\u00e9lectionnez toutes ces zones de texte une par une. Allez dans le panneau de texte, changez la couleur en blanc. Choisissez le groupe de ces cases et placez-le sur le rectangle d’en-t\u00eate. (Centr\u00e9 verticalement et align\u00e9 avec la bordure droite de la page). Ceci est notre menu.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d30933a.webp\")
<\/a><\/p>\n\n 23 Encore une fois, avec l’outil de s\u00e9lection s\u00e9lectionn\u00e9 et la touche Maj enfonc\u00e9e, s\u00e9lectionnez ces zones de texte, le rectangle et la zone de texte example.com. En haut \u00e0 droite, vous verrez une option appel\u00e9e \u00c9pingler. Cliquez sur sa case centrale sup\u00e9rieure pour \u00e9pingler ces \u00e9l\u00e9ments. Cela signifie que lorsque l’utilisateur fera d\u00e9filer votre site, cet en-t\u00eate restera fixe en haut. C’est tr\u00e8s utile car l’utilisateur n’aura pas \u00e0 faire d\u00e9filer tout le chemin juste pour choisir une autre option.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d5928ff.webp\")
<\/a><\/p>\n\n 24 Acc\u00e9dez au panneau Calques et verrouillez le calque d’en-t\u00eate. Cela peut \u00eatre fait en cliquant \u00e0 l’int\u00e9rieur de la case \u00e0 gauche du nom de la couche. Lorsque vous verrouillez un calque ou un objet, cela n’affectera pas son apparence, mais vous ne pourrez pas s\u00e9lectionner ces \u00e9l\u00e9ments \u00e0 moins de les d\u00e9verrouiller. Nous avons fait cela afin d’\u00e9liminer compl\u00e8tement les risques de d\u00e9placer accidentellement les objets.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d843d05.webp\")
<\/a><\/p>\n\n 25 S\u00e9lectionnez le calque de contenu et r\u00e9duisez le panneau des calques.\n<\/p>\n
\n \u00c9tablir un diaporama
\n<\/h3>\n\n 26 Acc\u00e9dez \u00e0 la biblioth\u00e8que de widgets situ\u00e9e sur le c\u00f4t\u00e9 droit de la fen\u00eatre de l’application. Si ce n’est pas l\u00e0, allez dans le menu Fen\u00eatre> choisissez Biblioth\u00e8que de widgets. D\u00e9veloppez la section \u00ab\u00a0diaporamas\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0Vide\u00a0\u00bb. Cliquez et faites glisser cet objet sur le canevas. Une fen\u00eatre noire avec des options de diaporama appara\u00eetra.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235db65202.webp\")
<\/a><\/p>\n\n 27 Assurez-vous que les options sont d\u00e9finies comme indiqu\u00e9 dans l’image ci-dessous. Sous la section des pi\u00e8ces en bas, d\u00e9cochez les cases indiquant Pr\u00e9c\u00e9dent, Suivant, L\u00e9gendes et Compteur. Nous n’avons besoin d’aucun de ces \u00e9l\u00e9ments.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235deacba4.webp\")
<\/a><\/p>\n\n 28 Cliquez n’importe o\u00f9 sur le canevas pour faire dispara\u00eetre cette fen\u00eatre contextuelle. Maintenant, cliquez soigneusement \u00e0 l’int\u00e9rieur du diaporama. En cliquant dessus une fois, vous verrez que ‘Diaporama’ a \u00e9t\u00e9 \u00e9crit dans ‘le type de zone de s\u00e9lection actuelle’. Il est situ\u00e9 dans le coin sup\u00e9rieur gauche sous le menu de l’application. Cette zone vous permet de voir ce que vous avez s\u00e9lectionn\u00e9. C’est une fonctionnalit\u00e9 tr\u00e8s utile lorsque la mise en page devient compliqu\u00e9e. Cliquez \u00e0 nouveau et vous remarquerez que la description indique \u00ab\u00a0Hero Image\u00a0\u00bb.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e121ebd.webp\")
<\/a><\/p>\n\n 29 Augmentez manuellement la largeur de l’image du h\u00e9ros en l’agrandissant \u00e0 partir du milieu. Accrochez-le \u00e0 la fois aux bords de la page (pour lui donner une largeur de 100 %) et au bas du rectangle d’en-t\u00eate, comme indiqu\u00e9 ci-dessous.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e337282.webp\")
<\/a><\/p>\n\n 30 Allez dans le panneau de transformation et mettez H=500.\n<\/p>\n
\n 31 Ouvrez \u00e0 nouveau les options du diaporama en cliquant sur le petit cercle bleu avec un rectangle blanc \u00e0 l’int\u00e9rieur (il est situ\u00e9 dans le coin sup\u00e9rieur droit du diaporama).\n<\/p>\n
\n 32 Cliquez sur l’ic\u00f4ne du dossier \u00e0 c\u00f4t\u00e9 de l’option ‘Ajouter des images\u2026’, recherchez les images que nous avons t\u00e9l\u00e9charg\u00e9es pour le diaporama. S\u00e9lectionnez les quatre et cliquez sur Ouvrir.\n<\/p>\n
\n 33 Allez dans Fichier > choisissez \u00ab\u00a0Aper\u00e7u de la page dans le navigateur\u00a0\u00bb ou Ctrl+Maj+E et voyez comment votre diaporama fonctionnera une fois le site en ligne. Je vous recommande de m\u00e9moriser les raccourcis clavier que j’utilise dans ce tutoriel. Cela vous aidera \u00e0 acc\u00e9l\u00e9rer votre processus de conception.\n<\/p>\n
\n Cr\u00e9ation de la rubrique \u00ab\u00a0Services\u00a0\u00bb
\n<\/h3>\n\n 34 Maintenant que nous avons configur\u00e9 notre en-t\u00eate et notre diaporama, il est temps de cr\u00e9er des sections pour chaque \u00e9l\u00e9ment que nous avons ajout\u00e9 \u00e0 notre menu. Commen\u00e7ons par les \u00ab\u00a0services\u00a0\u00bb. Cr\u00e9ez une zone de texte et saisissez-y services (toutes les lettres en minuscules) et modifiez sa mise en forme comme suit.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e4de8f0.webp\")
<\/a><\/p>\n\n 35 Double-cliquez \u00e0 l’int\u00e9rieur de cette zone de texte et s\u00e9lectionnez uniquement la lettre ‘I’. Changez sa police en ‘Chunk’ et laissez tout pareil. Ajustez la hauteur de cette zone de texte. Lorsque vous r\u00e9duisez sa hauteur, une ligne pointill\u00e9e appara\u00eet \u00e0 un certain point et la bo\u00eete ne se raccourcit pas. Ne r\u00e9duisez pas la taille apr\u00e8s cela. Il s’agit de la hauteur la plus basse possible avec cette taille de police.\n<\/p>\n
\n 36 Avec la zone de texte s\u00e9lectionn\u00e9e, acc\u00e9dez au panneau de transformation et d\u00e9finissez l’angle de rotation sur -90 degr\u00e9s (90 degr\u00e9s n\u00e9gatifs).\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e695d45.webp\")
<\/a><\/p>\n\n 37 D\u00e9placez la zone de texte vers la gauche du canevas, comme indiqu\u00e9 ci-dessous.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e88e04c.webp\")
<\/a><\/p>\n\n 38 Vous voudrez peut-\u00eatre faire un petit zoom arri\u00e8re pour voir tout le contenu \u00e0 la fois ou pour ajuster les objets correctement. Pour ce faire, essayez de saisir diff\u00e9rentes valeurs (moins de 100 %) dans la section Niveau de zoom en haut. Apr\u00e8s avoir saisi la valeur, appuyez sur Entr\u00e9e.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235eab2968.webp\")
<\/a><\/p>\n\n 39 Allez dans Fichier > choisissez ‘Placer’. S\u00e9lectionnez la premi\u00e8re image que nous avons t\u00e9l\u00e9charg\u00e9e pour notre section de services. Cliquez sur ouvrir.\n<\/p>\n
\n 40 Le curseur changera d’apparence en un pistolet de lieu charg\u00e9 d’une image. Cliquez sur la toile pour la placer. D\u00e9placez-le et placez-le de sorte qu’il soit align\u00e9 avec le haut de la zone de texte \u00ab\u00a0services\u00a0\u00bb.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ed9df42.webp\")
<\/a><\/p>\n\n 41 Copiez cette image et collez-la deux fois. S\u00e9lectionnez ces images coll\u00e9es une par une et alignez-les \u00e0 espacement \u00e9gal avec la premi\u00e8re image.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f1531ed.webp\")
<\/a><\/p>\n\n 42 S\u00e9lectionnez la deuxi\u00e8me image, faites un clic droit dessus et choisissez ‘remplacer l’image’ (c’est la derni\u00e8re option). Recherchez la deuxi\u00e8me image et cliquez sur Ouvrir. Remplacez \u00e9galement la troisi\u00e8me image.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f44fa27.webp\")
<\/a><\/p>\n\n 43 Cr\u00e9ez des zones de texte pour les informations sur les services et appliquez la mise en forme des titres et des paragraphes comme indiqu\u00e9 ci-dessous. Les guides vous aideront \u00e0 les aligner correctement.\n<\/p>\n
- \n
- \n Pour les titres :<\/strong> Police: Raleway Bold, Taille = 20, Couleur: Noir, align\u00e9 \u00e0 gauche et interligne \u00e0 100 %.\n <\/li>\n
- \n Pour les paragraphes :<\/strong> Police : Questrial, Taille=15, Couleur : R=67 G=67 B=67, Align\u00e9 \u00e0 gauche et 120 % d’interligne.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f67e871.webp\")
<\/a><\/p>\n\n 44 Placez trois autres images comme nous l’avons fait dans les \u00e9tapes pr\u00e9c\u00e9dentes et cr\u00e9ez de la m\u00eame mani\u00e8re un texte de description pour elles. Vous devriez avoir le r\u00e9sultat suivant.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f8b3f61.webp\")
<\/a><\/p>\n\n R\u00e9sultat final de la section ‘Services’
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fb6b3b2.webp\")
<\/a><\/p>\n\n Cr\u00e9ation de la section \u00ab Pourquoi nous \u00bb
\n<\/h3>\n\n 45 Vient ensuite la section \u00ab Pourquoi nous \u00bb. Celui-ci est un peu compliqu\u00e9. Soyez prudent dans la s\u00e9lection des objets. Tout d’abord, cr\u00e9ez un rectangle de 100 % de largeur et H=996. Remplissez-le avec une couleur (R=47, G=48, B=55). Faites un clic droit sur ce rectangle> Organiser> choisissez \u00ab\u00a0envoyer \u00e0 l’arri\u00e8re\u00a0\u00bb (pas envoyer \u00e0 l’arri\u00e8re).\n<\/p>\n
\n 46 D\u00e9veloppez votre zone de travail en cliquant et en faisant glisser le guide \u00ab\u00a0bas de page\u00a0\u00bb afin d’avoir suffisamment d’espace pour cr\u00e9er du contenu qui sera plac\u00e9 sur ce rectangle que nous venons de cr\u00e9er.\n<\/p>\n
\n 47 Faites d\u00e9filer vers le bas jusqu’\u00e0 l’espace vide blanc et faites un autre rectangle de L=351 et H=351. Remplissez-le de couleur blanche et sans trait.\n<\/p>\n
\n 48 Allez \u00e0 l’option ‘rayon d’angle’ (elle se trouve \u00e0 c\u00f4t\u00e9 du trait sous le menu de l’application). Cliquez sur tous les coins pour les arrondir et mettez 500 dans la case \u00e0 c\u00f4t\u00e9.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fd21bf3.webp\")
<\/a><\/p>\n\n 49 Vous aurez un cercle. Faites glisser ce cercle sur le rectangle et ajustez-le comme suit. \u00c0 c\u00f4t\u00e9 du rayon d’angle, il existe une option appel\u00e9e \u00ab\u00a0Opacit\u00e9\u00a0\u00bb. Avec le cercle s\u00e9lectionn\u00e9, mettez 14 dans cette case.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ff30452.webp\")
<\/a><\/p>\n\n 50 Cr\u00e9ez une zone de texte et saisissez \u2013 pourquoi nous (tout petit). Changez sa police en Rammetto One, taille = 100, Couleur R = 241 G = 244 B = 247, en t\u00eate 100% et alignez-la au centre. Placez cette zone de texte \u00e0 l’int\u00e9rieur du cercle et alignez-la correctement.\n<\/p>\n
\n 51 Nous allons maintenant cr\u00e9er les lignes pointill\u00e9es. Faites un rectangle de W=9 et H=9, pas de remplissage. Cliquez sur le mot ‘trait’ \u00e0 c\u00f4t\u00e9 de remplir. Choisissez la couleur R=241 G=244 B=247. Cliquez sur l’ic\u00f4ne de la cha\u00eene pour la casser et mettre ‘1’ dans l’\u00e9paisseur du trait inf\u00e9rieur.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236015d3b8.webp\")
<\/a><\/p>\n\n 52 Copiez ce rectangle de trait d’un c\u00f4t\u00e9 et collez-le plusieurs fois. Disposez-les sur une seule ligne (zoomez un peu avec l’outil de zoom si vous avez du mal \u00e0 voir ces rectangles). Une fois que vous avez obtenu la longueur souhait\u00e9e de votre ligne pointill\u00e9e, s\u00e9lectionnez tous ces rectangles, faites un clic droit et choisissez \u00ab\u00a0Grouper\u00a0\u00bb. Copiez et collez ce groupe pour les autres lignes en pointill\u00e9s.\n<\/p>\n
\n 53 Pour les lignes pointill\u00e9es inclin\u00e9es, essayez de mettre diff\u00e9rents angles de rotation dans le panneau de transformation. J’ai utilis\u00e9 150 et 30 degr\u00e9s. Vous devrez supprimer certains rectangles de ce groupe afin d’avoir des longueurs plus courtes. Ajustez ces lignes pr\u00e8s du cercle comme indiqu\u00e9 ci-dessous.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823602da73a.webp\")
<\/a><\/p>\n\n 54 Nous allons maintenant ajouter du texte pour les num\u00e9ros, les titres et les descriptions. Utilisez les param\u00e8tres suivants pour chacun d’eux et ajustez ces zones de texte comme indiqu\u00e9 ci-dessous.\n<\/p>\n
- \n
- \n Pour les nombres :<\/strong> Police=Rammetto One, Couleur: R=196 G=214 B=193, centr\u00e9 et 100 % interligne, taille: 200 (pour le num\u00e9ro ‘1’), 160 (pour les nombres ‘2’ et ‘3’) et 120 (pour les num\u00e9ros ‘4’ et ‘5’).\n <\/li>\n
- \n Pour les titres :<\/strong> Police=Raleway Bold, Taille=18, Couleur :Blanc, Align\u00e9 au centre et 100 % en t\u00eate.\n <\/li>\n
- \n Pour les paragraphes :<\/strong> Police=Questrial, Taille=16, Couleur: R=241 G=244 B=247, Centr\u00e9 et 120 % d’interligne.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823605a97a7.webp\")
<\/a><\/p>\n\n R\u00e9sultat final de la section \u00ab Pourquoi nous \u00bb
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360890068.webp\")
<\/a><\/p>\n\n Cr\u00e9ation de la section \u00ab\u00a0T\u00e9moignages\u00a0\u00bb
\n<\/h3>\n\n 55 Encore une fois, cr\u00e9ez de l’espace pour travailler en faisant glisser vers le bas le guide de la page. Faites un rectangle de 100% de largeur et H=486.\n<\/p>\n
\n 56 Avec le rectangle s\u00e9lectionn\u00e9, cliquez sur le mot \u00ab Remplir \u00bb et cliquez sur \u00ab Ajouter une image \u00bb \u00e0 c\u00f4t\u00e9 de l’option d’image. Recherchez l’image de mod\u00e8le de mur de briques que nous avons t\u00e9l\u00e9charg\u00e9e. Sous l’option Ajustement, choisissez \u00ab\u00a0Carrelage\u00a0\u00bb pour remplir tout le rectangle avec cette texture.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360b46ae7.webp\")
<\/a><\/p>\n\n 57 Faites d\u00e9filer jusqu’\u00e0 l’espace vide et cr\u00e9ez une zone de texte de taille W = 406, H = 289 \u00e0 l’aide du panneau de transformation. Tapez – ‘ce que les autres ont \u00e0 dire’ (tout petit). Changez sa police en Rammetto One, taille = 70, alignez-la \u00e0 gauche, valeurs de couleur R = 37 G = 37 B = 37 et interlignage = 100%.\n<\/p>\n
\n 58 Avec cette zone de texte s\u00e9lectionn\u00e9e, cliquez sur le trait de mot, appliquez-lui un trait droit de poids un et de couleur noire. Faites glisser cette zone de texte et placez-la sur le rectangle avec un motif de mur de briques.\n<\/p>\n
\n 59 La prochaine \u00e9tape consiste \u00e0 ajouter des t\u00e9moignages de clients. Pour cela, nous utiliserons les images vectorielles de visage rond que nous avons t\u00e9l\u00e9charg\u00e9es sur freepik.com. Encore une fois, descendez dans un espace vide blanc afin de pouvoir personnaliser correctement votre composition.\n<\/p>\n
\n 60 Acc\u00e9dez \u00e0 la biblioth\u00e8que Widgets et faites glisser \u00ab\u00a0Vide\u00a0\u00bb de la section des compositions sur le canevas. Cliquez sur le signe plus pour ajouter trois autres d\u00e9clencheurs. S\u00e9lectionnez soigneusement le premier d\u00e9clencheur et assurez-vous de votre s\u00e9lection \u00e0 l’aide de la zone de s\u00e9lection actuelle qui indique le d\u00e9clencheur. Et juste \u00e0 c\u00f4t\u00e9, il y a une option appel\u00e9e \u00ab\u00a0Active\u00a0\u00bb. Cliquez dessus pour d\u00e9velopper. S\u00e9lectionnez l’\u00e9tat \u00ab\u00a0Normal\u00a0\u00bb et choisissez \u00ab\u00a0pas de remplissage\u00a0\u00bb et \u00ab\u00a0pas de contour\u00a0\u00bb pour cet \u00e9tat. R\u00e9p\u00e9tez cette op\u00e9ration pour chaque \u00e9tat qui est Rollover, Mouse Down et Active. Acc\u00e9dez au panneau de transformation avec le premier d\u00e9clencheur s\u00e9lectionn\u00e9 et mettez W = 10, H = 10.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360de4579.webp\")
<\/a><\/p>\n\n 61 R\u00e9p\u00e9tez l’\u00e9tape pr\u00e9c\u00e9dente pour chaque d\u00e9clencheur que nous avons. Cela signifie, n’appliquez aucun remplissage et aucun trait pour chaque \u00e9tat et transformez les d\u00e9clencheurs en taille 10 x 10. Rapprochez les d\u00e9clencheurs les uns des autres.\n<\/p>\n
\n 62 Maintenant. Nous personnaliserons les cibles pour chacun de ces d\u00e9clencheurs. Le grand rectangle que vous voyez est la cible. S\u00e9lectionnez le premier d\u00e9clencheur et s\u00e9lectionnez son \u00e9tat normal dans le panneau des \u00e9tats. Apr\u00e8s cela, s\u00e9lectionnez la cible de ce d\u00e9clencheur et n’appliquez aucun remplissage ni trait pour chaque \u00e9tat. Ensuite, allez dans le panneau de transformation et d\u00e9finissez la cible de W = 360, H = 370.\n<\/p>\n
\n 63 R\u00e9p\u00e9tez l’\u00e9tape pr\u00e9c\u00e9dente pour chaque cible. Assurez-vous simplement de s\u00e9lectionner d’abord le d\u00e9clencheur, de le rendre \u00e0 l’\u00e9tat normal, puis de s\u00e9lectionner la cible respective avec l’\u00e9tat normal, puis d’appliquer aucun remplissage ni trait. Vous n’aurez pas besoin de modifier la taille de chaque cible. Faites-le pour un seul et cela s’appliquera \u00e0 tous.\n<\/p>\n
\n 64 Maintenant, nous allons commencer \u00e0 ajouter du contenu \u00e0 cette composition. Allez dans Fichier> Placer et ouvrez la premi\u00e8re image de visage et placez-la en dehors de la composition. Faites glisser cette image et placez-la maintenant dans la composition. Vous verrez qu’un cercle bleu appara\u00eetra dans son coin sup\u00e9rieur droit, ce qui indique que cette image fait maintenant partie de la composition.\n<\/p>\n
\n 65 Cr\u00e9ez trois zones de texte \u2013 une pour le nom de la personne, une pour sa d\u00e9signation et une pour la d\u00e9claration ou l’examen. Appliquez la mise en forme comme indiqu\u00e9 ci-dessous et placez ces zones de texte dans la composition. Assurez-vous simplement que chacun d’eux a un cercle bleu dans le coin.\n<\/p>\n
- \n
- \n Pour le nom de la personne :<\/strong> Police: Nobile Medium Italic, taille = 18, Couleur: R = 37 G = 37 B = 37, align\u00e9 au centre et 100 % en t\u00eate.\n <\/li>\n
- \n Pour la d\u00e9signation :<\/strong> police : Nobile, taille = 15, couleur : R = 37 G = 37 B = 37, align\u00e9 au centre et 100 % d’interlignage.\n <\/li>\n
- \n Pour les d\u00e9clarations (avec virgules invers\u00e9es) :<\/strong> Police : PT Sans italique, taille = 18, couleur : R = 69 G = 64 B = 68, align\u00e9 au centre et interligne \u00e0 100 %.\n <\/li>\n<\/ul>\n
\n 66 Avec l’image du visage s\u00e9lectionn\u00e9e, appliquez un trait de poids 4 de chaque c\u00f4t\u00e9, couleur: blanc, arrondissez tous les coins et augmentez le rayon jusqu’\u00e0 ce qu’il s’enroule autour de l’image. J’ai utilis\u00e9 100 comme rayons d’angle.\n<\/p>\n
\n 67 Allez dans ‘Effets’ (situ\u00e9 \u00e0 c\u00f4t\u00e9 de l’option coins arrondis) et cochez la case ‘ombre’. Mettez les valeurs comme ; Couleur=Noir, Opacit\u00e9=37%, Flou=12, Angle=78 et Distance=5.\n<\/p>\n
\n 68 R\u00e9p\u00e9tez les \u00e9tapes pr\u00e9c\u00e9dentes (de 64 \u00e0 67) pour ajouter du contenu \u00e0 chaque cible et enregistrez les modifications (Ctrl+S). Placez cette composition sur le rectangle avec un motif de mur de briques.\n<\/p>\n
\n 69 Maintenant, s\u00e9lectionnez la composition enti\u00e8re (assurez-vous avec la zone de s\u00e9lection actuelle) et d\u00e9veloppez ses options en cliquant sur le petit cercle bleu. D\u00e9finissez les options comme indiqu\u00e9 ci-dessous. Appuyez sur Ctrl + Maj + E et voyez si cela fonctionne bien.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361123532.webp\")
<\/a><\/p>\n\n 70 Vous devriez avoir le r\u00e9sultat suivant.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361448e2e.webp\")
<\/a><\/p>\n\n R\u00e9sultat final de la section ‘T\u00e9moignages’
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823618421c8.webp\")
<\/a><\/p>\n\n Cr\u00e9ation de la section \u00ab\u00a0Contactez-nous\u00a0\u00bb
\n<\/h3>\n\n 71 La section suivante est Contactez-nous. Nous ajouterons une image d’arri\u00e8re-plan, un formulaire et quelques zones de texte dans cette section. Tout d’abord, faites un rectangle de 100% de largeur et H=692. Remplissez-le avec une image que nous avons t\u00e9l\u00e9charg\u00e9e pour cette section et choisissez \u00ab\u00a0\u00e9chelle \u00e0 remplir\u00a0\u00bb sous Ajustement. Changez son opacit\u00e9 \u00e0 72%.\n<\/p>\n
\n 72 Faites un autre rectangle de m\u00eame largeur et hauteur et remplissez-le avec un d\u00e9grad\u00e9. Mettez les valeurs de gradient comme ; Opacit\u00e9=90% \u00e0 46%, Couleur: Noir \u00e0 R=69 G=64 B=68, Point focal=66%, Direction: Horizontale et Taille: automatique. Placez ce rectangle sur l’image et assurez-vous qu’il s’enclenche avec chaque bord.\n<\/p>\n
\n 73 Acc\u00e9dez \u00e0 la biblioth\u00e8que de widgets. Sous formulaires, s\u00e9lectionnez \u00ab\u00a0contact simple\u00a0\u00bb et faites-le glisser sur le canevas. Une fen\u00eatre avec des options de formulaire appara\u00eetra. Indiquez le nom du formulaire : Formulaire de contact, Envoyez un e-mail \u00e0 : indiquez votre adresse e-mail dans laquelle vous souhaitez recevoir les informations saisies par les visiteurs. Apr\u00e8s l’envoi : s\u00e9lectionnez ‘rester sur la page actuelle’. La derni\u00e8re option est \u00ab\u00a0Modifier ensemble\u00a0\u00bb. Assurez-vous qu’il est coch\u00e9. De cette fa\u00e7on, vous devrez apporter des modifications \u00e0 un seul champ et elles seront appliqu\u00e9es \u00e0 tous. Cliquez n’importe o\u00f9 sur le canevas pour faire dispara\u00eetre la bo\u00eete d’options.\n<\/p>\n
\n 74 S\u00e9lectionnez le formulaire. Cliquez sur l’\u00e9tiquette ‘Nom’ et cliquez \u00e0 nouveau jusqu’\u00e0 ce que vous voyiez ‘\u00c9tiquette’ \u00e9crit dans la zone de s\u00e9lection actuelle. Appuyez sur supprimer. R\u00e9p\u00e9tez cette op\u00e9ration pour les \u00e9tiquettes d’e-mail et de message et supprimez-les.\n<\/p>\n
\n 75 S\u00e9lectionnez \u00e0 nouveau le formulaire et s\u00e9lectionnez le premier champ de formulaire indiquant \u00ab Entrer le nom \u00bb jusqu’\u00e0 ce que vous voyiez \u00ab Entr\u00e9e de texte \u00bb dans la zone de s\u00e9lection actuelle. N’appliquez aucun remplissage et contour inf\u00e9rieur (poids un et couleur blanche) pour chaque \u00e9tat, c’est-\u00e0-dire de Vide \u00e0 Focus. Pour l’\u00e9tat d’erreur, s\u00e9lectionnez aucun remplissage et trait inf\u00e9rieur de couleur rouge avec un poids de 1.\n<\/p>\n
\n 76 Apr\u00e8s cela, avec le champ e-mail s\u00e9lectionn\u00e9> choisissez \u00e0 nouveau son \u00e9tat vide et personnalisez la police et la couleur du texte pour chaque \u00e9tat comme indiqu\u00e9 ci-dessous.\n<\/p>\n
- \n
- \n Pour les \u00e9tats vide, non vide et focus :<\/strong> Police: Questrial, taille=14, couleur: blanc, align\u00e9 \u00e0 gauche, interligne 100 % et pas d’italique.\n <\/li>\n
- \n Pour l’\u00e9tat de survol :<\/strong> changez simplement la couleur du texte en R = 196 G = 196 B = 196 et pas d’italique.\n <\/li>\n
- \n Pour l’\u00e9tat d’erreur :<\/strong> modifiez la couleur du texte en rouge et sans italique.\n <\/li>\n<\/ul>\n
\n 77 Cliquez et s\u00e9lectionnez le bouton Soumettre. Choisissez son \u00e9tat normal, arrondissez tous les coins avec 40 rayons et augmentez sa largeur comme indiqu\u00e9 dans la capture d’\u00e9cran ci-dessous. Changez sa police en Raleway Bold, taille = 20, align\u00e9 au centre, couleur : R = 241 G = 244 B = 247, interlignage : ajustez le texte \u00ab\u00a0soumettre\u00a0\u00bb au centre du bouton en augmentant cette valeur (j’ai utilis\u00e9 130 %) .\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361be815c.webp\")
<\/a><\/p>\n\n 78 Pour ses \u00e9tats de survol et de souris enfonc\u00e9e, changez la couleur du trait et la couleur du texte en gris (R=127 G=127 B=127). Enfin, pour son \u00e9tat \u00ab\u00a0soumission en cours\u00a0\u00bb, changez la couleur du trait et du texte en bleu ciel (R = 41 G = 171 B = 226).\n<\/p>\n
\n 79 Lorsque vous s\u00e9lectionnez l’\u00e9tat ‘soumission en cours’ pour ce bouton de soumission, vous verrez qu’il y a une autre zone de texte qui dit ‘soumission du formulaire\u2026’. Cochez cette case et choisissez son \u00e9tat ‘soumission en cours’. Changez la police en Questrial, taille=14, couleur: gris, centr\u00e9 et pas d’italique. Choisissez son \u00e9tat \u00ab\u00a0soumettre avec succ\u00e8s\u00a0\u00bb et changez la couleur du texte en bleu ciel (pas d’italique). Choisissez son \u00e9tat \u00ab\u00a0soumettre l’erreur\u00a0\u00bb et changez la couleur du texte en rouge (pas d’italique). Le formulaire de contact est pr\u00eat.\n<\/p>\n
\n 80 Cr\u00e9ez deux zones de texte. Tapez – contactez-nous et dans sa deuxi\u00e8me ligne, tapez \u00ab\u00a0tous les champs sont obligatoires\u00a0\u00bb. Pour le texte contactez-nous, utilisez la police: Rammetto One, taille=60, couleur: R=241 G=244 B=247, interlignage=100% et align\u00e9 \u00e0 gauche. Pour le texte \u00ab\u00a0tous les champs sont obligatoires\u00a0\u00bb, utilisez la police : Nobile italic, taille=26, couleur : R=241 G=244 B=247, interlignage=100 % et align\u00e9 \u00e0 gauche. Pour cette zone de texte, appliquez le contour inf\u00e9rieur de poids 1 et de couleur blanche.\n<\/p>\n
\n 81 Tapez un paragraphe dans la deuxi\u00e8me zone de texte que nous avons cr\u00e9\u00e9e. Utilisez la police : PT Sans Italic, taille = 14, couleur : R = 241 G = 244 B = 247, interlignage = 120 %, align\u00e9 \u00e0 gauche et espace avant = 15.\n<\/p>\n
\n 82 Placez ces zones de texte et le formulaire sur l’image que nous avons plac\u00e9e. Ajustez-les comme suit.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361dd708d.webp\")
<\/a><\/p>\n\n 83 Cr\u00e9ez une zone de texte suppl\u00e9mentaire pour certaines informations de contact telles que l’adresse du bureau, l’e-mail et les num\u00e9ros de t\u00e9l\u00e9phone. Placez cette zone de texte sur l’image. Vous devriez avoir le r\u00e9sultat suivant.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361fd3a10.webp\")
<\/a><\/p>\n\n R\u00e9sultat final de la section \u00ab\u00a0Contactez-nous\u00a0\u00bb
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236220ca76.webp\")
<\/a><\/p>\n\n Cr\u00e9ation d’un pied de page
\n<\/h3>\n\n 84 La derni\u00e8re section est le pied de page. Il y a trois guides en bas, \u00e0 savoir le bas de la page, le pied de page et le bas du navigateur. Ce que vous devez faire maintenant est de vous assurer que le guide ‘bas de page’ s’aligne avec le bas de la section contactez-nous et que le guide ‘pied de page’ co\u00efncide avec le guide ‘bas de page’. Apr\u00e8s cela, vous pouvez faire glisser le guide \u00ab\u00a0en bas du navigateur\u00a0\u00bb vers le bas pour ajuster l’espace dont vous avez besoin pour le pied de page.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236248fda2.webp\")
<\/a><\/p>\n\n 85 Cr\u00e9ez deux rectangles de 100% de largeur et H=168 pour le premier et H=37 pour l’autre. Changez la couleur de remplissage du grand rectangle en blanc et utilisez R = 47, G = 48, B = 55 pour le plus court.\n<\/p>\n
\n 86 S\u00e9lectionnez le premier rectangle et essayez de le placer dans la zone de pied de page. Il n’ira pas l\u00e0-bas. Au lieu de cela, le guide de bas de page commencera \u00e0 s’\u00e9tendre vers le bas. Pour faire de ce rectangle un \u00e9l\u00e9ment de pied de page, cochez la case \u00ab\u00a0Pied de page\u00a0\u00bb situ\u00e9e en haut \u00e0 droite de la fen\u00eatre de l’application. Faites-le \u00e9galement pour le deuxi\u00e8me rectangle.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823626e43d3.webp\")
<\/a><\/p>\n\n 87 Placez maintenant ces rectangles dans la zone de pied de page et assurez-vous que le grand rectangle se trouve l\u00e9g\u00e8rement au-dessus du guide de pied de page. Le bas du rectangle color\u00e9 doit s’aligner avec le bas du guide du navigateur. Sinon, vous verrez un petit espace blanc apr\u00e8s le pied de page, ce qui n’est pas joli.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823629217b3.webp\")
<\/a><\/p>\n\n 88 Cr\u00e9ez des zones de texte pour le pied de page et saisissez ce que vous voulez. Cochez simplement la case \u00ab\u00a0pied de page\u00a0\u00bb pour les zones de texte que vous ajouterez. J’ai ajout\u00e9 du texte contenant des informations sur la clause de non-responsabilit\u00e9 et le droit d’auteur.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362b623c3.webp\")
<\/a><\/p>\n\n 89 Le badge \u00ab\u00a0Made with Adobe Muse CC\u00a0\u00bb peut \u00eatre ajout\u00e9 \u00e0 partir de la biblioth\u00e8que de widgets dans la section sociale. Vous pouvez \u00e9galement ajouter des liens vers votre page facebook, twitter, google+, LinkedIn, Pinterest, cha\u00eene YouTube ou lien vimeo.\n<\/p>\n
\n 90 Le symbole de copyright et de nombreux autres symboles que vous voyez \u00e0 c\u00f4t\u00e9 du texte Tous droits r\u00e9serv\u00e9s peuvent \u00eatre ajout\u00e9s \u00e0 partir du panneau \u00ab Glyphes \u00bb situ\u00e9 sur le c\u00f4t\u00e9 droit de la fen\u00eatre de l’application. Si ce n’est pas l\u00e0, allez dans le menu Fen\u00eatre> choisissez Glyphes.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362e4f736.webp\")
<\/a><\/p>\n\n Cr\u00e9ation de la rubrique \u00ab\u00a0Newsletter\u00a0\u00bb
\n<\/h3>\n\n 91 Jusqu’\u00e0 pr\u00e9sent, nous avons con\u00e7u des sections pour tous les \u00e9l\u00e9ments de menu sauf un et c’est ‘Newsletter’. Faisons quelque chose d’int\u00e9ressant avec \u00e7a. Rappelez-vous le symbole de la croix que nous avons t\u00e9l\u00e9charg\u00e9, il sera utilis\u00e9 ici (\u00e7a va si vous ne l’avez pas t\u00e9l\u00e9charg\u00e9, vous pouvez toujours suivre). Tout d’abord, s\u00e9lectionnez la zone de texte Newsletter et notez sa largeur et sa hauteur \u00e0 partir du panneau de transformation. Le mien fait 81 x 17.\n<\/p>\n
\n 92 Maintenant, ouvrez la biblioth\u00e8que de widgets et faites glisser \u00ab\u00a0Lightbox Display\u00a0\u00bb de la section des compositions. Supprimez les deux premiers d\u00e9clencheurs (situ\u00e9s en haut) et supprimez toutes les l\u00e9gendes (situ\u00e9es en bas). Faites en sorte que la taille du troisi\u00e8me d\u00e9clencheur soit la m\u00eame que celle de la zone de texte Newsletter qui est de 81 x 17. Modifiez son remplissage et son trait sur aucun pour tous les \u00e9tats.\n<\/p>\n
\n 93 Faites glisser la zone de texte de la newsletter et placez-la \u00e0 l’int\u00e9rieur de ce d\u00e9clencheur de mani\u00e8re \u00e0 ce que tous les bords de la zone de texte co\u00efncident avec les bords du d\u00e9clencheur. Faites maintenant glisser ce groupe et remettez-le dans le menu o\u00f9 il \u00e9tait plac\u00e9 pr\u00e9c\u00e9demment. Ce que nous avons fait, c’est que nous avons appliqu\u00e9 un lien vers la zone de texte Newsletter. Lorsque l’utilisateur cliquera dessus, le site Web dispara\u00eetra et la cible appara\u00eetra.\n<\/p>\n
\n 94 La prochaine \u00e9tape consiste \u00e0 personnaliser notre cible. S\u00e9lectionnez la zone grise et assurez-vous que la zone de s\u00e9lection actuelle indique \u00ab\u00a0Cible\u00a0\u00bb. Vous devrez cliquer trois fois pour le s\u00e9lectionner. Modifiez le remplissage et le trait sur aucun pour tous ses \u00e9tats.\n<\/p>\n
\n 95 Ajoutez deux zones de texte et un formulaire de contact simple (supprimez ses champs de nom et de message et conservez uniquement le champ de l’e-mail). Faites-les glisser \u00e0 l’int\u00e9rieur de cette composition et assurez-vous qu’ils ont tous un cercle bleu \u00e0 leurs coins.\n<\/p>\n
\n 96 Personnalisez le formulaire comme nous l’avons fait dans la section contactez-nous. Vous devriez avoir le r\u00e9sultat suivant. Pour le champ de texte \u00ab\u00a0Rester en contact\u00a0\u00bb, utilisez la police : Homard, taille=40, couleur :blanc, centr\u00e9 et interligne \u00e0 100 %. Pour le texte de description en dessous, utilisez la police: Ubuntu Light Italic, taille=14, couleur: blanc, centr\u00e9 et interligne \u00e0 120 %. Remplacez le texte du bouton d’envoi par \u00ab\u00a0S’abonner\u00a0\u00bb.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823631ea47b.webp\")
<\/a><\/p>\n\n 97 Maintenant, s\u00e9lectionnez le bouton de fermeture, d\u00e9placez-le et placez-le dans le coin sup\u00e9rieur droit de cet affichage lightbox, comme indiqu\u00e9 ci-dessous. Cliquez \u00e0 l’int\u00e9rieur jusqu’\u00e0 ce que vous voyiez ‘Label’ \u00e9crit dans la zone de s\u00e9lection actuelle. Supprimer l’\u00e9tiquette.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363507e52.webp\")
<\/a><\/p>\n\n 98 Modifiez le remplissage et le trait de ce bouton de fermeture sur aucun pour tous les \u00e9tats et faites en sorte que ses W=40 et H=40. Allez dans Remplir> ajouter une image et recherchez l’image crois\u00e9e. Choisissez ‘scale to fit’ sous l’option de montage.\n<\/p>\n
\n 99 Cliquez sur Newsletter et vous verrez un cercle bleu \u00e0 son coin. Cliquez dessus et assurez-vous que les options sont d\u00e9finies comme suit.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236383b97c.webp\")
<\/a><\/p>\n\n R\u00e9sultat final de la section ‘Newsletter’
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363ae64bc.webp\")
<\/a><\/p>\n\n Cr\u00e9ation d’hyperliens
\n<\/h3>\n\n 100 La derni\u00e8re t\u00e2che qui reste est d’appliquer des liens \u00e0 chaque section. Pour ce faire, choisissez l’option ‘ancrer le lien’ situ\u00e9e en haut au milieu ou appuyez sur la lettre ‘a’ de votre clavier. Vous verrez que le curseur change d’apparence en un pistolet de lieu charg\u00e9 d’une ancre de lien.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363d80277.webp\")
<\/a><\/p>\n\n 101 Lorsque vous cliquez sur le canevas pour le placer, une bo\u00eete de dialogue appara\u00eetra qui vous permettra de renommer une ancre.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363feb1d6.webp\")
<\/a><\/p>\n\n 102 Cr\u00e9ez des ancres de lien pour chaque section que nous avons con\u00e7ue, c’est-\u00e0-dire Accueil, Services, Pourquoi nous, T\u00e9moignages et Contactez-nous. Placez les ancres en haut de chaque section. L’ancre d’origine est illustr\u00e9e ci-dessous \u00e0 titre d’exemple. La mise en place de ces ancres est une \u00e9tape importante et doit \u00eatre effectu\u00e9e avec soin. Lorsque l’utilisateur cliquera sur un lien particulier, le site Web d\u00e9filera jusqu’\u00e0 la position o\u00f9 l’ancre a \u00e9t\u00e9 plac\u00e9e.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823642ca0c4.webp\")
<\/a><\/p>\n\n 103 Nous allons maintenant appliquer les liens. Pour ce faire, s\u00e9lectionnez la zone de texte \u00ab\u00a0Accueil\u00a0\u00bb. Allez dans l’option ‘Hyperliens’ (situ\u00e9e en haut), cliquez sur la petite fl\u00e8che vers le bas pour d\u00e9velopper la liste. Ici vous pouvez voir toutes les ancres que nous venons de placer. Liez-le \u00e0 l’ancre \u00ab\u00a0Accueil\u00a0\u00bb. R\u00e9p\u00e9tez cette \u00e9tape pour les autres zones de texte, \u00e0 l’exception de Newsletter, car nous lui avons appliqu\u00e9 un affichage lightbox.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364694c80.webp\")
<\/a><\/p>\n\n R\u00e9sultat final apr\u00e8s la cr\u00e9ation d’hyperliens
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364a29ed4.webp\")
<\/a><\/p>\n\n Touches finales – Modification des propri\u00e9t\u00e9s de la page et ajout de favicon
\n<\/h3>\n\n 104 Dans le mode Plan, faites un clic droit sur la page d’accueil et choisissez \u00ab Propri\u00e9t\u00e9s de la page \u00bb. Une bo\u00eete de dialogue appara\u00eetra. Choisissez l’onglet \u00ab\u00a0Options\u00a0\u00bb et sous le nom de la page, mettez – \u00ab\u00a0Bienvenue sur example.com\u00a0\u00bb et cliquez sur OK. C’est le texte qui appara\u00eetra en haut de la fen\u00eatre du navigateur.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364d02485.webp\")
<\/a><\/p>\n\n 105 Allez dans Fichier > Propri\u00e9t\u00e9s du site. Sous l’onglet Disposition, la derni\u00e8re option est ‘Favicon’. Lorsque vous passez la souris dessus, une fen\u00eatre contextuelle appara\u00eetra d\u00e9crivant ce qu’est un favicon et quelle devrait \u00eatre la taille optimale. Il est bon d’ajouter un favicon car cela aide \u00e0 faire ressortir votre marque et sert \u00e9galement \u00e0 aider les utilisateurs \u00e0 identifier facilement votre site s’ils l’ont mis en signet.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364f684c8.webp\")
<\/a><\/p>\n\n Test et exportation
\n<\/h3>\n\n 106 Testez votre site en allant dans Fichier > Aper\u00e7u du site dans le navigateur ou Ctrl+Alt+E. Ne choisissez pas \u00ab\u00a0Aper\u00e7u de la page dans le navigateur\u00a0\u00bb cette fois car les liens ne fonctionnent pas dans l’aper\u00e7u de la page. Vous voudrez peut-\u00eatre essayer de placer les ancres \u00e0 diff\u00e9rents endroits afin de vous assurer que lorsque l’utilisateur cliquera sur un lien, le site d\u00e9filera vers la bonne section et la bonne position.\n<\/p>\n
\n 107 Enfin, allez dans Fichier > Exporter au format HTML (Ctrl+E). Sous l’URL du site, mettez n’importe quel nom comme ‘example.com’ et choisissez l'emplacement. Cliquez sur OK. Le site Web est pr\u00eat.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236528be8c.webp\")
<\/a><\/p>\n\n R\u00e9sultat final de chaque page
\n<\/h3>\n\n Page de garde
\n<\/h5>\n<\/a><\/p>\n\n Rubrique ‘Services’
\n<\/h5>\n<\/a><\/p>\n\n Rubrique \u00ab\u00a0Pourquoi nous\u00a0\u00bb
\n<\/h5>\n<\/a><\/p>\n\n Rubrique \u00ab\u00a0T\u00e9moignages\u00a0\u00bb
\n<\/h5>\n<\/a><\/p>\n\n Rubrique ‘Contactez-nous’
\n<\/h5>\n<\/a><\/p>\n\n Section de pied de page
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382365f01860.webp\")
<\/a><\/p>\n\n Rubrique \u00ab\u00a0Newsletter\u00a0\u00bb
\n<\/h5>\n - \n Pour l’\u00e9tat de survol :<\/strong> changez simplement la couleur du texte en R = 196 G = 196 B = 196 et pas d’italique.\n <\/li>\n
- \n Pour la d\u00e9signation :<\/strong> police : Nobile, taille = 15, couleur : R = 37 G = 37 B = 37, align\u00e9 au centre et 100 % d’interlignage.\n <\/li>\n
- \n Pour les titres :<\/strong> Police=Raleway Bold, Taille=18, Couleur :Blanc, Align\u00e9 au centre et 100 % en t\u00eate.\n <\/li>\n
- \n Pour les paragraphes :<\/strong> Police : Questrial, Taille=15, Couleur : R=67 G=67 B=67, Align\u00e9 \u00e0 gauche et 120 % d’interligne.\n <\/li>\n<\/ul>\n
- \n Pour les titres :<\/strong> Police: Raleway Bold, Taille = 20, Couleur: Noir, align\u00e9 \u00e0 gauche et interligne \u00e0 100 %.\n <\/li>\n
- \n
- \n