Dans le premier blog de cette s\u00e9rie, nous avons bri\u00e8vement abord\u00e9 les bases du design r\u00e9actif et la mani\u00e8re dont il est appliqu\u00e9 dans EverWeb. Nous avons ensuite cr\u00e9\u00e9 notre premi\u00e8re page r\u00e9active.<\/p>\n
Dans cet article, nous allons aborder les outils que vous utiliserez pour cr\u00e9er une super page r\u00e9active.<\/p>\n
Objets sur les pages r\u00e9actives<\/strong> Construire une page r\u00e9active<\/strong> Commencez par le haut\u00a0!<\/strong> Comme vous le verrez, le widget est ajout\u00e9 \u00e0 la page sous forme d’objet pleine largeur. Dans les param\u00e8tres du widget du menu de navigation, vous verrez \u00e9galement une section \u00ab\u00a0Options r\u00e9actives\u00a0\u00bb dans laquelle vous pouvez configurer la navigation pour afficher un menu hamburger au lieu d’une navigation normale lorsque la page est affich\u00e9e sur un appareil mobile. Cochez la case \u00ab\u00a0Barre de navigation r\u00e9active\u00a0\u00bb pour activer les \u00ab\u00a0Options r\u00e9actives\u00a0\u00bb. Vous pouvez \u00e9galement ajouter un logo et le lier \u00e0 une page de votre site web ou \u00e0 une URL externe en utilisant les options \u00ab\u00a0Logo\u00a0\u00bb situ\u00e9es en bas des param\u00e8tres du widget.<\/p>\n Stylez le widget Menu de navigation de la m\u00eame mani\u00e8re que lorsque vous construisez une page de largeur fixe.<\/p>\n Aller tout en bas<\/strong> Le Widget Responsive Row<\/strong> Le widget Responsive est un widget sp\u00e9cial qui vous permet d’ajouter des objets de largeur fixe dans une page r\u00e9active. Ceci est extr\u00eamement utile pour les widgets ne pouvant pas \u00eatre utilis\u00e9s en pleine largeur, tels que les widgets PayPal, Timeline de page Facebook et Live Photo. Cela est \u00e9galement utile lorsque vous souhaitez utiliser les widgets pleine largeur uniquement en tant que widgets \u00e0 largeur fixe (par exemple, le widget Google Maps) ou lorsque vous souhaitez ajouter des zones de texte, des formes et des images en tant qu’objets de largeur fixe plut\u00f4t qu’en tant qu’objets en pleine largeur.<\/p>\n Quand le widget Responsive row est s\u00e9lectionn\u00e9, les param\u00e8tres du widget sont disponibles. Personnalisez le nom de la ligne r\u00e9active pour faciliter la distinction entre un widget Responsive Row et un autre, c\u2019est-\u00e0-dire que vous pouvez renommer la ligne r\u00e9active en \u00ab\u00a0Pied de page\u00a0\u00bb.<\/p>\n Les objets de la ligne r\u00e9active peuvent \u00eatre align\u00e9s verticalement ou horizontalement. Cliquez sur les menus d\u00e9roulants et choisissez les options requises. Vous pouvez \u00e9galement d\u00e9finir \u00ab\u00a0Padding\u00a0\u00bb (Rembourrage) au-dessus et au-dessous des objets qui se trouvent dans le widget. Cela ajoute un espace suppl\u00e9mentaire entre chaque ligne r\u00e9active actuelle et l’objet de largeur totale situ\u00e9 au-dessus et\/ou au-dessous de celle-ci.<\/p>\n Lorsque la ligne r\u00e9active est s\u00e9lectionn\u00e9e, utilisez la barre d’outils pour ajouter des zones de texte et des formes au widget. Ajoutez d’autres widgets et images en les faisant glisser depuis l’onglet Widgets et la liste des Assets, respectivement. Si vous souhaitez r\u00e9organiser les objets \u00e0 l’int\u00e9rieur du widget Responsive Row, faites-le glisser et d\u00e9posez-le d’un emplacement \u00e0 l’int\u00e9rieur du widget \u00e0 un autre. Pendant que vous proc\u00e9dez ainsi, une barre bleue verticale appara\u00eet pour vous guider dans le placement correct de l’objet.<\/p>\n Utilisez les options \u00ab\u00a0Alignment\u00a0\u00bb (Alignement) pour aligner les objets dans la ligne r\u00e9active, puis utilisez l’option \u00ab\u00a0Insert Margin\u00a0\u00bb (Ins\u00e9rer une marge) pour les r\u00e9partir dans le widget Responsive Row horizontalement et\/ou verticalement selon vos besoins.<\/p>\n Si vous souhaitez ajouter une couleur d’arri\u00e8re-plan au widget Responsive Row, utilisez le menu \u00ab\u00a0Shape Options\u00a0\u00bb (Options de forme). S\u00e9lectionnez la section \u00ab\u00a0Fill\u00a0\u00bb (Remplissage) pour ajouter une exp\u00e9rience de \u00ab\u00a0Remplissage couleur\u00a0\u00bb<\/p>\n Exp\u00e9rimentez en ajoutant des objets au widget Responsive Row. Si vous devez supprimer un objet dans le widget, faites-le en cliquant dessus et en appuyant sur la touche Retour arri\u00e8re. Si vous souhaitez supprimer le widget Responsive Row, s\u00e9lectionnez-le, puis appuyez sur la touche Retour arri\u00e8re. N’oubliez pas que cette action supprimera tout le contenu du widget.<\/p>\n Dans le prochain article de la s\u00e9rie, nous examinerons l’ajout de contenu \u00e0 l’espace entre l’en-t\u00eate et le pied de page, ainsi que des options de personnalisation !<\/p>\n Si vous avez une question \u00e0 propos de ce blog poste s’il vous pla\u00eet laissez-nous savoir dans la section Commentaires ci-dessous … merci !<\/p>\n","protected":false},"excerpt":{"rendered":" Dans le premier blog de cette s\u00e9rie, nous avons bri\u00e8vement abord\u00e9 les bases du design r\u00e9actif et la mani\u00e8re dont il est appliqu\u00e9 dans EverWeb. Nous avons ensuite cr\u00e9\u00e9 notre premi\u00e8re page r\u00e9active. Dans cet article, nous allons aborder les outils que vous utiliserez pour cr\u00e9er une super page r\u00e9active. Objets sur les pages r\u00e9actives Lors de la cr\u00e9ation d’une page r\u00e9active, tous les objets de la page doivent \u00eatre en pleine largeur. Un objet peut \u00eatre une zone de texte, une forme, une image, un fichier audio, une vid\u00e9o ou un widget. Lorsque vous ajoutez un objet \u00e0 la […]<\/p>\n","protected":false},"author":32825,"featured_media":4370,"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-4350","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\/4350\/"}],"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=4350"}],"version-history":[{"count":3,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/4350\/revisions\/"}],"predecessor-version":[{"id":4357,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/4350\/revisions\/4357\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/media\/4370\/"}],"wp:attachment":[{"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/media\/?parent=4350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/categories\/?post=4350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/tags\/?post=4350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nLors de la cr\u00e9ation d’une page r\u00e9active, tous les objets de la page doivent \u00eatre en pleine largeur. Un objet peut \u00eatre une zone de texte, une forme, une image, un fichier audio, une vid\u00e9o ou un widget. Lorsque vous ajoutez un objet \u00e0 la page, il deviendra automatiquement un objet pleine largeur. Parfois, cela peut ne pas \u00eatre souhaitable car vous voudrez peut-\u00eatre utiliser un objet \u00e0 largeur fixe (c’est-\u00e0-dire pas en pleine largeur). Lorsque vous souhaitez effectuer cette op\u00e9ration, l’objet de largeur fixe doit \u00eatre plac\u00e9 dans un widget Responsive Row. Nous reviendrons plus tard sur ce sujet… Alternativement, certains widgets EverWeb vous permettent d’ajouter des objets d’une largeur fixe dans leur pleine largeur, tels que les widgets Text Section ou FlexBox.<\/p>\n
\nLorsque vous cr\u00e9ez une page r\u00e9active, rappelez-vous qu’un objet de largeur pleine est comme une bande qui parcourt toute la largeur de la page. Au fur et \u00e0 mesure que vous ajoutez des objets \u00e0 la page, chaque \u00ab\u00a0bande\u00a0\u00bb d’objets pleine largeur est ajout\u00e9e \u00e0 la page situ\u00e9e imm\u00e9diatement sous le dernier, en commen\u00e7ant par le haut. Vous pouvez r\u00e9organiser ces \u00ab\u00a0bandes\u00a0\u00bb en les faisant glisser de haut en bas de la page jusqu’\u00e0 l’emplacement souhait\u00e9.<\/p>\n
\nL’une des caract\u00e9ristiques du responsive design est qu’aucun en-t\u00eate n’est n\u00e9cessaire, ce qui est g\u00e9n\u00e9ralement une caract\u00e9ristique du web design de largeur fixe. Dans la mesure o\u00f9 le design r\u00e9actif utilise des objets pleine largeur, il n’est pas n\u00e9cessaire de cr\u00e9er un en-t\u00eate en tant que tel. Toutefois, le menu de navigation des pages est g\u00e9n\u00e9ralement d\u00e9fini en haut de la page. Vous pouvez donc commencer \u00e0 concevoir votre page en faisant glisser le widget Menu de navigation sur la page vierge.<\/p>\n
\nMaintenant que le widget Menu de navigation est en place, faites d\u00e9filer la page. Vous remarquerez que, s’il n’y a pas de section d’en-t\u00eate dans une page r\u00e9active, il y a un pied de page. Dans cette zone se trouve l\u2019image \u00ab\u00a0Made with Love with EverWeb\u00a0\u00bb au centre. Ce fichier image est plac\u00e9 dans un widget Responsive Row, ce qui est logique car vous ne voulez pas que l’image soit enti\u00e8rement en largeur sur la page. Exp\u00e9rimentez en glissant et d\u00e9posant le fichier eeweverweblove.png \u00ab\u00a0Made With Love With EverWeb\u00a0\u00bb depuis la liste des Assets vers un espace vide de la page entre le widget Menu de navigation et le pied de page. Vous remarquerez que l’image est plac\u00e9e en largeur plein imm\u00e9diatement sous le widget Menu de navigation. Elle pourrait sembler un peu \u00e9cras\u00e9e. Cliquez sur l’image. Vous verrez qu’il n’y a que deux poign\u00e9es pour ajuster la hauteur de l’objet. Les poign\u00e9es d’appui horizontales ne sont pas n\u00e9cessaires car l’objet est un objet de pleine largeur. Faites glisser la poign\u00e9e inf\u00e9rieure vers le bas si vous souhaitez voir l\u2019ensemble de l\u2019image. L’image \u00e9tant toujours s\u00e9lectionn\u00e9e, supprimez-la \u00e0 l’aide de la touche Retour arri\u00e8re.<\/p>\n
\nMaintenant retournez dans la zone Pied de page et cliquez sur l’espace blanc \u00e0 l’int\u00e9rieur du widget Responsive Row. Pour v\u00e9rifier que la ligne r\u00e9active (ou tout objet de pleine largeur) est actuellement s\u00e9lectionn\u00e9e, cliquez ensuite sur l’espace vide \u00e0 l’int\u00e9rieur du widget et faites d\u00e9filer jusqu’\u00e0 l’option \u00ab\u00a0Pick Layer\u00a0\u00bb (Choisir un calque). Le nom de la ligne r\u00e9active que vous avez s\u00e9lectionn\u00e9e doit \u00eatre coch\u00e9. Appuyez sur \u00ab\u00a0Echap\u00a0\u00bb pour quitter le menu.<\/p>\n