Votre premier site web réactif EverWeb 2 : le design des pages

This post is also available in: English (Anglais)

Dans le premier blog de cette série, nous avons brièvement abordé les bases du design réactif et la manière dont il est appliqué dans EverWeb. Nous avons ensuite créé notre première page réactive.

Dans cet article, nous allons aborder les outils que vous utiliserez pour créer une super page réactive.

Objets sur les pages réactives
Lors de la création d’une page réactive, tous les objets de la page doivent être en pleine largeur. Un objet peut être une zone de texte, une forme, une image, un fichier audio, une vidéo ou un widget. Lorsque vous ajoutez un objet à la page, il deviendra automatiquement un objet pleine largeur. Parfois, cela peut ne pas être souhaitable car vous voudrez peut-être utiliser un objet à largeur fixe (c’est-à-dire pas en pleine largeur). Lorsque vous souhaitez effectuer cette opération, l’objet de largeur fixe doit être placé 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.

Construire une page réactive
Lorsque vous créez une page réactive, rappelez-vous qu’un objet de largeur pleine est comme une bande qui parcourt toute la largeur de la page. Au fur et à mesure que vous ajoutez des objets à la page, chaque « bande » d’objets pleine largeur est ajoutée à la page située immédiatement sous le dernier, en commençant par le haut. Vous pouvez réorganiser ces « bandes » en les faisant glisser de haut en bas de la page jusqu’à l’emplacement souhaité.

Commencez par le haut !
L’une des caractéristiques du responsive design est qu’aucun en-tête n’est nécessaire, ce qui est généralement une caractéristique du web design de largeur fixe. Dans la mesure où le design réactif utilise des objets pleine largeur, il n’est pas nécessaire de créer un en-tête en tant que tel. Toutefois, le menu de navigation des pages est généralement défini en haut de la page. Vous pouvez donc commencer à concevoir votre page en faisant glisser le widget Menu de navigation sur la page vierge.

Comme vous le verrez, le widget est ajouté à la page sous forme d’objet pleine largeur. Dans les paramètres du widget du menu de navigation, vous verrez également une section « Options réactives » dans laquelle vous pouvez configurer la navigation pour afficher un menu hamburger au lieu d’une navigation normale lorsque la page est affichée sur un appareil mobile. Cochez la case « Barre de navigation réactive » pour activer les « Options réactives ». Vous pouvez également ajouter un logo et le lier à une page de votre site web ou à une URL externe en utilisant les options « Logo » situées en bas des paramètres du widget.

Stylez le widget Menu de navigation de la même manière que lorsque vous construisez une page de largeur fixe.

Aller tout en bas
Maintenant que le widget Menu de navigation est en place, faites défiler la page. Vous remarquerez que, s’il n’y a pas de section d’en-tête dans une page réactive, il y a un pied de page. Dans cette zone se trouve l’image « Made with Love with EverWeb » au centre. Ce fichier image est placé dans un widget Responsive Row, ce qui est logique car vous ne voulez pas que l’image soit entièrement en largeur sur la page. Expérimentez en glissant et déposant le fichier eeweverweblove.png « Made With Love With EverWeb » 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ée en largeur plein immédiatement sous le widget Menu de navigation. Elle pourrait sembler un peu écrasée. Cliquez sur l’image. Vous verrez qu’il n’y a que deux poignées pour ajuster la hauteur de l’objet. Les poignées d’appui horizontales ne sont pas nécessaires car l’objet est un objet de pleine largeur. Faites glisser la poignée inférieure vers le bas si vous souhaitez voir l’ensemble de l’image. L’image étant toujours sélectionnée, supprimez-la à l’aide de la touche Retour arrière.

Le Widget Responsive Row
Maintenant retournez dans la zone Pied de page et cliquez sur l’espace blanc à l’intérieur du widget Responsive Row. Pour vérifier que la ligne réactive (ou tout objet de pleine largeur) est actuellement sélectionnée, cliquez ensuite sur l’espace vide à l’intérieur du widget et faites défiler jusqu’à l’option « Pick Layer » (Choisir un calque). Le nom de la ligne réactive que vous avez sélectionnée doit être coché. Appuyez sur « Echap » pour quitter le menu.

Le widget Responsive est un widget spécial qui vous permet d’ajouter des objets de largeur fixe dans une page réactive. Ceci est extrêmement utile pour les widgets ne pouvant pas être utilisés en pleine largeur, tels que les widgets PayPal, Timeline de page Facebook et Live Photo. Cela est également utile lorsque vous souhaitez utiliser les widgets pleine largeur uniquement en tant que widgets à 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ôt qu’en tant qu’objets en pleine largeur.

Quand le widget Responsive row est sélectionné, les paramètres du widget sont disponibles. Personnalisez le nom de la ligne réactive pour faciliter la distinction entre un widget Responsive Row et un autre, c’est-à-dire que vous pouvez renommer la ligne réactive en « Pied de page ».

Les objets de la ligne réactive peuvent être alignés verticalement ou horizontalement. Cliquez sur les menus déroulants et choisissez les options requises. Vous pouvez également définir « Padding » (Rembourrage) au-dessus et au-dessous des objets qui se trouvent dans le widget. Cela ajoute un espace supplémentaire entre chaque ligne réactive actuelle et l’objet de largeur totale situé au-dessus et/ou au-dessous de celle-ci.

Lorsque la ligne réactive est sélectionnée, 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éorganiser les objets à l’intérieur du widget Responsive Row, faites-le glisser et déposez-le d’un emplacement à l’intérieur du widget à un autre. Pendant que vous procédez ainsi, une barre bleue verticale apparaît pour vous guider dans le placement correct de l’objet.

Utilisez les options « Alignment » (Alignement) pour aligner les objets dans la ligne réactive, puis utilisez l’option « Insert Margin » (Insérer une marge) pour les répartir dans le widget Responsive Row horizontalement et/ou verticalement selon vos besoins.

Si vous souhaitez ajouter une couleur d’arrière-plan au widget Responsive Row, utilisez le menu « Shape Options » (Options de forme). Sélectionnez la section « Fill » (Remplissage) pour ajouter une expérience de « Remplissage couleur »

Expérimentez 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ère. Si vous souhaitez supprimer le widget Responsive Row, sélectionnez-le, puis appuyez sur la touche Retour arrière. N’oubliez pas que cette action supprimera tout le contenu du widget.

Dans le prochain article de la série, nous examinerons l’ajout de contenu à l’espace entre l’en-tête et le pied de page, ainsi que des options de personnalisation !

Si vous avez une question à propos de ce blog poste s’il vous plaît laissez-nous savoir dans la section Commentaires ci-dessous … merci !

This post is also available in: English (Anglais)