{"id":4353,"date":"2019-04-12T04:25:46","date_gmt":"2019-04-12T02:25:46","guid":{"rendered":"https:\/\/www.allaboutiweb.com\/?p=4353"},"modified":"2019-04-16T15:11:19","modified_gmt":"2019-04-16T13:11:19","slug":"votre-premier-site-web-reactif-everweb-3-travailler-avec-des-pages-reactives","status":"publish","type":"post","link":"https:\/\/www.allaboutiweb.com\/fr\/2019\/04\/votre-premier-site-web-reactif-everweb-3-travailler-avec-des-pages-reactives\/","title":{"rendered":"Votre premier site web r\u00e9actif EverWeb 3\u00a0: Travailler avec des pages r\u00e9actives"},"content":{"rendered":"

Dans le blog pr\u00e9c\u00e9dent de cette s\u00e9rie, \u00ab Votre premier site web r\u00e9actif EverWeb 2 : le design des pages<\/a> \u00bb, nous avons cr\u00e9\u00e9 une page r\u00e9active et avons examin\u00e9 ses fonctionnalit\u00e9s telles que les param\u00e8tres de mise en page et le widget Responsive Row. Nous avons \u00e9galement ajout\u00e9 le widget Menu de navigation \u00e0 la page.<\/p>\n

Cet article explique comment utiliser efficacement les objets de la page, tels que le texte, les formes, les images, les m\u00e9dias et les widgets. Jetons tout d\u2019abord un coup d’\u0153il aux widgets EverWeb<\/a> qui ont \u00e9t\u00e9 sp\u00e9cialement cr\u00e9\u00e9s pour \u00eatre utilis\u00e9s dans une mise en page r\u00e9active…<\/p>\n

Le widget Responsive Row<\/strong>
\nLe widget Responsive Row est un conteneur pour les objets pleine largeur et non pleine largeur. Alors que les objets pleine largeur sont g\u00e9n\u00e9ralement ajout\u00e9s seuls \u00e0 une page r\u00e9active, vous pouvez placer un objet pleine largeur dans un widget Responsive Row lorsque vous souhaitez ajouter des marges int\u00e9rieures sup\u00e9rieures et inf\u00e9rieures suppl\u00e9mentaires ou lors de l’ajout d’une couleur d’arri\u00e8re-plan. Le widget Responsive Row est \u00e9galement le moyen d’inclure des objets non pleine largeur sur une page r\u00e9active. S\u00e9lectionnez simplement le widget Responsive Row et faites-y glisser les objets souhait\u00e9s, ou utilisez la barre d\u2019outils pour inclure du texte, des formes, des images ou des widgets.<\/p>\n

Le widget Responsive Image Gallery<\/strong>
\nComme vous l’avez probablement remarqu\u00e9, EverWeb 2.8 poss\u00e8de deux widgets de galerie d’images\u00a0! Vous pouvez utiliser les deux widgets dans une page r\u00e9active, bien que le widget Image Gallery\u00a0\u00bb (Galerie d\u2019images) doive \u00eatre plac\u00e9 dans un widget Responsive Row, car il s’agit d’un objet dont la largeur n’est pas pleine. Le widget \u00ab\u00a0Responsive Image Gallery\u00a0\u00bb est un objet pleine largeur, il n’est donc pas n\u00e9cessaire de le placer dans un widget Responsive Row.<\/p>\n

Les deux widgets fonctionnent de la m\u00eame mani\u00e8re, mais le widget Responsive Image Gallery offre une vari\u00e9t\u00e9 de styles d’affichage personnalisables, ce qui vous permet de b\u00e9n\u00e9ficier de davantage de flexibilit\u00e9 que ceux trouv\u00e9s dans le widget Image Gallery.<\/p>\n

Le widget FlexBox <\/strong>
\nLe widget FlexBox vous permet de combiner du texte, une image ou une vid\u00e9o, et un bouton dans la combinaison de votre choix. Cela offre une incroyable souplesse dans la conception des mises en page, le bouton \u00e9tant un \u00ab\u00a0appel \u00e0 l’action\u00a0\u00bb efficace. Les objets du widget FlexBox peuvent \u00eatre inclus ou exclus pour que la page ait l’aspect que vous souhaitez.<\/p>\n

Le widget Text Section<\/strong>
\nC\u2019est est un autre widget tr\u00e8s flexible dans lequel une image peut \u00eatre utilis\u00e9e comme focus central, avec du texte et des boutons utilis\u00e9s selon les besoins. Encore une fois, de nombreuses combinaisons de disposition diff\u00e9rentes sont possibles et vous pouvez inclure ou exclure des objets \u00e0 votre guise.<\/p>\n

Le idget Navigation Menu<\/strong>
\nBien que le widget Navigation Menu ne soit pas nouveau, il a \u00e9t\u00e9 mis \u00e0 jour avec EverWeb 2.7 et 2.8 avec de nouvelles \u00ab\u00a0Options r\u00e9actives\u00a0\u00bb. L\u2019ajout le plus utile au widget est peut-\u00eatre que vous pouvez ajouter un menu de style Hamburger \u00e0 votre site, y compris votre propre logo, du c\u00f4t\u00e9 oppos\u00e9 du Hamburger.<\/p>\n

Travailler avec une page r\u00e9active<\/strong><\/p>\n

Le travail avec du texte, des formes, des images, des supports et des widgets dans une page r\u00e9active constitue la m\u00eame exp\u00e9rience que lorsque vous travaillez dans une pr\u00e9sentation de page de largeur fixe. Il convient toutefois de noter qu’il existe quelques diff\u00e9rences mineures lors de l’utilisation de quelques fonctionnalit\u00e9s EverWeb dans une pr\u00e9sentation de page r\u00e9active\u00a0:<\/p>\n

    \n
  1. La position de d\u00e9filement est utilis\u00e9e pour cr\u00e9er un lien hypertexte vers un point sp\u00e9cifique d’une page. Les pages r\u00e9actives sont \u00e9volutives, mais pour le moment, les ancres de d\u00e9filement sont fixes. Par cons\u00e9quent, il est pr\u00e9f\u00e9rable de ne pas utiliser cette fonctionnalit\u00e9 dans les pages r\u00e9actives. Nous esp\u00e9rons qu\u2019elle arrive dans les pages r\u00e9actives dans un futur proche\u00a0!<\/li>\n
  2. Si vous ajoutez un cadre photo \u00e0 une image d’une page r\u00e9active, le cadre photo et l’image s’afficheront l’un apr\u00e8s l’autre au lieu d’\u00eatre plac\u00e9s l’un au-dessus de l’autre lors de la pr\u00e9visualisation ou de la publication. Comme pour la position de d\u00e9filement, il est pr\u00e9f\u00e9rable de limiter l’utilisation de cette fonctionnalit\u00e9 aux pr\u00e9sentations \u00e0 largeur fixe pour le moment.<\/li>\n
  3. Modifier la mise en page. Si vous souhaitez convertir une mise en page de largeur fixe en une mise en page r\u00e9active, vous pouvez penser qu\u2019elle est aussi simple qu\u2019un changement de mise en page de Centr\u00e9\/Align\u00e9 \u00e0 gauche sur R\u00e9actif. Toutefois, la modification de la mise en page peut poser un probl\u00e8me car les deux types de mises en page sont fondamentalement diff\u00e9rents. EverWeb vous en avertira ainsi que le fait que vous ne pouvez pas annuler le type de mise en page si vous continuez. En r\u00e8gle g\u00e9n\u00e9rale, il est pr\u00e9f\u00e9rable de cr\u00e9er une nouvelle page r\u00e9active et de reconstruire la page \u00e0 largeur fixe \u00e0 partir de z\u00e9ro.<\/li>\n
  4. Liens hypertextes. L’utilisation des nouveaux widgets FlexBox et Text Section vous permet d’inclure du texte en hyperlien lorsque vous utilisez l’\u00e9diteur de texte avec style dans les param\u00e8tres de ces widgets. Le texte h\u00e9ritera des styles de lien hypertexte utilis\u00e9s dans les styles par d\u00e9faut du projet.<\/li>\n<\/ol>\n

    Dimensionner et d\u00e9placer les objets<\/strong><\/p>\n

    Il est facile de d\u00e9placer des objets pleine largeur car ils ne peuvent que se d\u00e9placer de haut en bas de la page. Lorsque vous s\u00e9lectionnez un objet de pleine largeur, vous verrez qu’il ne comporte que des poign\u00e9es de s\u00e9lection en haut et en bas et non sur les c\u00f4t\u00e9s. Utilisez ces poign\u00e9es de s\u00e9lection pour redimensionner la hauteur de l’objet.<\/p>\n

    Les objets plac\u00e9s dans un widget Responsive Row afficheront des poign\u00e9es de s\u00e9lection de tous les c\u00f4t\u00e9s de l’objet s\u00e9lectionn\u00e9. Les marges peuvent \u00eatre redimensionn\u00e9es dans n’importe quelle dimension.<\/p>\n

    Pour d\u00e9placer un objet pleine largeur, glissez et d\u00e9posez-le \u00e0 son nouvel emplacement. Lorsque vous d\u00e9placez un widget Responsive Row, placez le curseur de la souris sur un espace vide \u00e0 l’int\u00e9rieur du widget, puis faites-le glisser, sinon vous risquez de glisser-d\u00e9poser d’un objet que vous avez plac\u00e9 dans le widget Responsive Row.<\/p>\n

    Incruster des objets<\/strong><\/p>\n

    Lorsque vous ajoutez des objets \u00e0 une page r\u00e9active, ils sont ajout\u00e9s \u00e0 la page en pleine largeur par d\u00e9faut. Toutefois, si vous avez d\u2019abord s\u00e9lectionn\u00e9 un widget Responsive Row, l\u2019objet ajout\u00e9 sera plac\u00e9 dans le widget Responsive Row en tant qu\u2019objet \u00e0 largeur fixe.<\/p>\n

    Pour d\u00e9placer des objets de l\u2019int\u00e9rieur d\u2019un widget Responsive Row \u00e0 un autre, effectuez un simple glisser-d\u00e9poser. L\u2019objet du premier widget Responsive Row au widget Responsive Row cible. Vous pouvez \u00e9galement effectuer un clic secondaire (ou clic droit) sur l’objet que vous souhaitez d\u00e9placer, puis utiliser l’option \u00ab\u00a0Embed In\u00a0\u00bb (incruster dans). Cliquez sur le nom de la ligne r\u00e9active dans laquelle vous souhaitez que l’objet soit plac\u00e9.<\/p>\n

    Vous pouvez \u00e9galement incruster des objets pleine largeur dans un widget Responsive Row \u00e0 l’aide de l’option \u00ab\u00a0Embed In\u00a0\u00bb. Dans ce cas, l’objet de pleine largeur reste sur toute la largeur du widget Responsive Row, utilisez donc l’inspecteur de mesures pour d\u00e9sactiver l’option \u00ab\u00a0Full Width\u00a0\u00bb si vous souhaitez que l’objet devienne largeur fixe.<\/p>\n

    D\u00e9finition des marges<\/strong><\/p>\n

    Une derni\u00e8re astuce consiste \u00e0 d\u00e9finir les marges des objets pleine largeur sur la page. S\u00e9lectionnez l’objet de pleine largeur auquel vous souhaitez ajouter une marge, puis acc\u00e9dez \u00e0 l’inspecteur des mesures. Utilisez les options de marge gauche et droite selon les besoins. D\u00e9finir les marges est utile pour \u00e9viter que votre contenu ne se trouve au bord de l’\u00e9cran. Dans le prochain \u00e9pisode, nous allons examiner les blogs dans un environnement r\u00e9actif. Comme toujours, si vous avez des questions ou des commentaires, n’h\u00e9sitez pas \u00e0 nous contacter dans la section Commentaires ci-dessous. Merci\u00a0!<\/p>\n","protected":false},"excerpt":{"rendered":"

    Dans le blog pr\u00e9c\u00e9dent de cette s\u00e9rie, \u00ab Votre premier site web r\u00e9actif EverWeb 2 : le design des pages \u00bb, nous avons cr\u00e9\u00e9 une page r\u00e9active et avons examin\u00e9 ses fonctionnalit\u00e9s telles que les param\u00e8tres de mise en page et le widget Responsive Row. Nous avons \u00e9galement ajout\u00e9 le widget Menu de navigation \u00e0 la page. Cet article explique comment utiliser efficacement les objets de la page, tels que le texte, les formes, les images, les m\u00e9dias et les widgets. Jetons tout d\u2019abord un coup d’\u0153il aux widgets EverWeb qui ont \u00e9t\u00e9 sp\u00e9cialement cr\u00e9\u00e9s pour \u00eatre utilis\u00e9s dans une […]<\/p>\n","protected":false},"author":32825,"featured_media":4372,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[258,265,259,266,261],"tags":[],"class_list":["post-4353","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-everweb-fr","category-logiciel","category-site-web-reactif","category-web-design-fr","category-widgets-fr"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/4353\/"}],"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=4353"}],"version-history":[{"count":2,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/4353\/revisions\/"}],"predecessor-version":[{"id":4362,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/4353\/revisions\/4362\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/media\/4372\/"}],"wp:attachment":[{"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/media\/?parent=4353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/categories\/?post=4353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/tags\/?post=4353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}