{"id":4388,"date":"2019-04-14T05:34:22","date_gmt":"2019-04-14T03:34:22","guid":{"rendered":"https:\/\/www.allaboutiweb.com\/?p=4388"},"modified":"2019-04-14T05:34:22","modified_gmt":"2019-04-14T03:34:22","slug":"votre-premier-site-web-reactif-everweb-5-du-design-fixe-au-design-reactif","status":"publish","type":"post","link":"https:\/\/www.allaboutiweb.com\/fr\/2019\/04\/votre-premier-site-web-reactif-everweb-5-du-design-fixe-au-design-reactif\/","title":{"rendered":"Votre premier site web r\u00e9actif EverWeb 5 : Du design fixe au design r\u00e9actif\u00a0!"},"content":{"rendered":"

Si vous utilisez EverWeb<\/a> depuis longtemps, vous serez certainement ravi(e) des nouvelles fonctionnalit\u00e9s de r\u00e9activit\u00e9 introduites dans la version 2.8. Pour beaucoup d\u2019entre vous, c\u2019est l\u2019occasion id\u00e9ale de convertir les sites web existants \u00e0 largeur fixe en sites web r\u00e9actifs. Si vous envisagez ce saut, voici quelques astuces pour le rendre aussi simple que possible…<\/p>\n

    \n
  1. Utilisez toujours une copie de votre fichier de projet, car le changement de mise en page de largeur fixe \u00e0 r\u00e9actif ne peut pas \u00eatre annul\u00e9. Il est \u00e9galement int\u00e9ressant de noter que vous ne pouvez pas dupliquer un blog dans un fichier de projet EverWeb, il est donc pr\u00e9f\u00e9rable de dupliquer le fichier de projet. Pour copier votre fichier de projet, acc\u00e9dez \u00e0 la fen\u00eatre \u00ab\u00a0Projects\u00a0\u00bb (Projets). Cliquez sur les fl\u00e8ches haut \/ bas \u00e0 droite du nom du fichier de projet dans la liste \u00ab\u00a0Recent Projects\u00a0\u00bb (Projets r\u00e9cents). S\u00e9lectionnez \u00ab\u00a0Duplicate\u2026\u00a0\u00bb (Dupliquer…) dans le menu. Une fois le duplicata cr\u00e9\u00e9, il sera ajout\u00e9 \u00e0 la liste des projets r\u00e9cents avec le m\u00eame nom que l’original mais avec \u00ab\u00a0Copy\u00a0\u00bb ajout\u00e9 \u00e0 la fin.<\/li>\n
  2. Conservez toujours une source de r\u00e9f\u00e9rence originale \u00e0 port\u00e9e de main lors de la refonte de votre site. Vous pouvez vous y r\u00e9f\u00e9rer lors de l’\u00e9dition de pages converties. Utilisez la page en production de votre site web, le fichier de projet d’origine (par exemple, placez les fichiers de projet d’origine et les fichiers \u00e0 copier c\u00f4te \u00e0 c\u00f4te) ou dupliquez chaque page du projet avant de la convertir. Une r\u00e9f\u00e9rence visuelle facilite la localisation et le repositionnement des objets sur la page convertie pour recr\u00e9er la m\u00eame page, ou une pr\u00e9sentation similaire, \u00e0 la page d’origine.<\/li>\n
  3. Lorsque vous modifiez la pr\u00e9sentation de la page de Largeur fixe \u00e0 R\u00e9actif, vous constaterez peut-\u00eatre que votre page est en d\u00e9sordre, avec des objets sur toute la page, surtout s\u2019il y en a beaucoup. Les objets superpos\u00e9s dans une disposition de largeur fixe seront d\u00e9sormais affich\u00e9s les uns \u00e0 c\u00f4t\u00e9 des autres dans une disposition r\u00e9active, si vous avez utilis\u00e9 une forme comme couleur de fond, par exemple. Si possible, supprimez les formes sous-jacentes \u00e0 d\u2019autres objets. Si vous utilisez des cadres pour des images, supprimez-les avant de modifier la mise en page.<\/li>\n
  4. Certains objets existants deviendront redondants dans une mise en page r\u00e9active, comme dans le cas des formes de fond ci-dessus. Il en va de m\u00eame si vous utilisez une forme d’arri\u00e8re-plan pour le widget Menu de navigation. Ce n’est plus n\u00e9cessaire car il est inclus dans les param\u00e8tres du widget. Certains objets, tels que les lignes \u00e0 largeur fixe parfois utilis\u00e9es pour s\u00e9parer des sections dans des pages \u00e0 largeur fixe, doivent \u00eatre compl\u00e8tement supprim\u00e9s car ils ne fonctionnent pas correctement dans une page sensible. Une approche simple et propre est pr\u00e9f\u00e9rable pour une conception r\u00e9active.<\/li>\n
  5. Tentez une approche \u00abde haut en bas\u00bb. M\u00eame si, au d\u00e9part, votre page convertie ressemble \u00e0 une fr\u00e9n\u00e9sie visuelle, vous pouvez faire beaucoup pour la remettre rapidement en ordre. Essayez de travailler m\u00e9thodiquement du haut de la page vers le bas. Cela signifie g\u00e9n\u00e9ralement que vous devez d’abord localiser le widget du menu de navigation. Une fois que vous l’avez trouv\u00e9, vous pouvez choisir une largeur maximale dans l’inspecteur des mesures et activer les options r\u00e9actives du widget dans les param\u00e8tres du widget. Faites glisser le widget en haut de la page. Si vous utilisez des zones de texte, vous pouvez choisir de les rendre pleine largeur pour vous aider \u00e0 organiser rapidement votre page. Si vous souhaitez conserver des objets \u00e0 largeur fixe, vous pouvez \u00e9galement ajouter un widget Responsive Row \u00e0 la page et y incorporer la (les) zone (s) de texte (voir astuce suivante pour plus d’informations\u00a0!)<\/li>\n
  6. Utilisez le widget Responsive Row. Lorsque vous modifiez la mise en page Pour r\u00e9actif, vous pouvez avoir des objets tels que des boutons, des ic\u00f4nes de r\u00e9seaux sociaux, des images et du texte qui seraient mieux plac\u00e9s dans un widget Responsive Row. Les boutons de r\u00e9seaux sociaux sont parfaits pour une telle t\u00e2che. Ajoutez d’abord un widget Responsive Row \u00e0 la page. Suivant Cliquez ensuite sur l\u2019objet que vous souhaitez incorporer dans le widget Ligne sensible. Dans le menu qui appara\u00eet, s\u00e9lectionnez \u00ab\u00a0Embed In\u2026\u00a0\u00bb (Incorporer dans\u2026), puis choisissez le widget Responsive Row que vous venez d\u2019ajouter \u00e0 la page.<\/li>\n
  7. Lorsque vous utilisez une pr\u00e9sentation de page r\u00e9active, les objets que vous placez sur la page seront toujours en pleine largeur, alors comment pouvez-vous inclure des marges gauche et\/ou droite ? Certains widgets et zones de texte vous permettent d’ajouter un \u00ab remplissage \u00bb aux objets pleine largeur, mais il existe un meilleur moyen de s\u00e9lectionner cette option. S\u00e9lectionnez l\u2019objet auquel vous souhaitez ajouter des marges, et cliquez sur l’inspecteur de m\u00e9triques. Dans la section \u00ab Size \u00bb (Taille) de l’inspecteur, vous verrez le param\u00e8tre \u00ab Margins \u00bb (Marges) pour les marges gauche et droite. Ajoutez les valeurs de marge souhait\u00e9es. La page s’ajustera automatiquement dans la fen\u00eatre de l’\u00e9diteur.<\/li>\n
  8. Tester le design de votre page est plus important que jamais\u00a0! Comme vous ne disposez que d\u2019un design de page (au lieu de deux, voire de trois) pour tous les p\u00e9riph\u00e9riques, il est important de tester tous les p\u00e9riph\u00e9riques, en particulier si vous modifiez ult\u00e9rieurement la conception de votre page. Le fait que votre page ait une belle apparence sur un type d’appareil ne signifie pas n\u00e9cessairement qu’elle sera belle sur un autre type d\u2019appareil.<\/li>\n
  9. D\u00e9cisions sur le design. Jusqu’\u00e0 pr\u00e9sent, nous avons examin\u00e9 les aspects pratiques de la conversion de pages d’une largeur fixe en mise en page r\u00e9active. Le processus en soi peut \u00e9galement vous obliger \u00e0 prendre des d\u00e9cisions de modification de conception en cours de route. Les approches de conception \u00e0 largeur fixe et \u00e0 conception r\u00e9active ne sont pas les m\u00eames. Vous devrez donc peut-\u00eatre supprimer des objets, utiliser des widgets diff\u00e9rents ou repenser certains aspects de votre conception et de votre flux de travail lors de la conversion en une mise en page r\u00e9active. En fait, cela peut s’av\u00e9rer \u00eatre une bonne occasion de mettre \u00e0 jour votre site web si vous ne l’avez pas d\u00e9j\u00e0 fait depuis un certain temps\u00a0!<\/li>\n
  10. Une fois que vous avez converti vos pages de fixes en pages r\u00e9actives, vous souhaiterez peut-\u00eatre supprimer toutes les pages redondantes de largeur fixe dans votre fichier de projet. Il vaudrait \u00e9galement la peine de v\u00e9rifier les Assets inutilis\u00e9s pouvant \u00eatre supprim\u00e9s. Cela r\u00e9duira la taille du fichier de projet, ce qui vous permettra de continuer \u00e0 \u00e9diter le fichier de projet de mani\u00e8re dynamique et \u00e0 \u00e9conomiser de l’espace disque. N’oubliez pas qu’avant de prendre de telles mesures, assurez-vous de conserver une copie de sauvegarde de votre fichier projet au cas o\u00f9 vous auriez besoin de la restaurer ult\u00e9rieurement.<\/li>\n<\/ol>\n

    EverWeb fait de la conversion de votre site web de largeur fixe \u00e0 r\u00e9actif, un processus simple, surtout si vous prenez des mesures de pr\u00e9caution et \u00eates ouvert \u00e0 la possibilit\u00e9 de modifications de la conception en cours de route.<\/p>\n

    Si vous avez des id\u00e9es ou des questions, veuillez nous en informer dans la section Commentaires ci-dessous.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Si vous utilisez EverWeb depuis longtemps, vous serez certainement ravi(e) des nouvelles fonctionnalit\u00e9s de r\u00e9activit\u00e9 introduites dans la version 2.8. Pour beaucoup d\u2019entre vous, c\u2019est l\u2019occasion id\u00e9ale de convertir les sites web existants \u00e0 largeur fixe en sites web r\u00e9actifs. Si vous envisagez ce saut, voici quelques astuces pour le rendre aussi simple que possible… Utilisez toujours une copie de votre fichier de projet, car le changement de mise en page de largeur fixe \u00e0 r\u00e9actif ne peut pas \u00eatre annul\u00e9. Il est \u00e9galement int\u00e9ressant de noter que vous ne pouvez pas dupliquer un blog dans un fichier de projet […]<\/p>\n","protected":false},"author":32825,"featured_media":4390,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[264,258,265,259,249,266,261],"tags":[],"class_list":["post-4388","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-didacticiels","category-everweb-fr","category-logiciel","category-site-web-reactif","category-trucs-et-astuces","category-web-design-fr","category-widgets-fr"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/4388\/"}],"collection":[{"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/users\/32825\/"}],"replies":[{"embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/comments\/?post=4388"}],"version-history":[{"count":2,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/4388\/revisions\/"}],"predecessor-version":[{"id":4391,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/4388\/revisions\/4391\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/media\/4390\/"}],"wp:attachment":[{"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/media\/?parent=4388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/categories\/?post=4388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/tags\/?post=4388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}