Votre premier site web réactif EverWeb 3 : Travailler avec des pages réactives

This post is also available in: English (Anglais)

Dans le blog précédent de cette série, « Votre premier site web réactif EverWeb 2 : le design des pages », nous avons créé une page réactive et avons examiné ses fonctionnalités telles que les paramètres de mise en page et le widget Responsive Row. Nous avons également ajouté le widget Menu de navigation à la page.

Cet article explique comment utiliser efficacement les objets de la page, tels que le texte, les formes, les images, les médias et les widgets. Jetons tout d’abord un coup d’œil aux widgets EverWeb qui ont été spécialement créés pour être utilisés dans une mise en page réactive…

Le widget Responsive Row
Le widget Responsive Row est un conteneur pour les objets pleine largeur et non pleine largeur. Alors que les objets pleine largeur sont généralement ajoutés seuls à une page réactive, vous pouvez placer un objet pleine largeur dans un widget Responsive Row lorsque vous souhaitez ajouter des marges intérieures supérieures et inférieures supplémentaires ou lors de l’ajout d’une couleur d’arrière-plan. Le widget Responsive Row est également le moyen d’inclure des objets non pleine largeur sur une page réactive. Sélectionnez simplement le widget Responsive Row et faites-y glisser les objets souhaités, ou utilisez la barre d’outils pour inclure du texte, des formes, des images ou des widgets.

Le widget Responsive Image Gallery
Comme vous l’avez probablement remarqué, EverWeb 2.8 possède deux widgets de galerie d’images ! Vous pouvez utiliser les deux widgets dans une page réactive, bien que le widget Image Gallery » (Galerie d’images) doive être placé dans un widget Responsive Row, car il s’agit d’un objet dont la largeur n’est pas pleine. Le widget « Responsive Image Gallery » est un objet pleine largeur, il n’est donc pas nécessaire de le placer dans un widget Responsive Row.

Les deux widgets fonctionnent de la même manière, mais le widget Responsive Image Gallery offre une variété de styles d’affichage personnalisables, ce qui vous permet de bénéficier de davantage de flexibilité que ceux trouvés dans le widget Image Gallery.

Le widget FlexBox
Le widget FlexBox vous permet de combiner du texte, une image ou une vidéo, et un bouton dans la combinaison de votre choix. Cela offre une incroyable souplesse dans la conception des mises en page, le bouton étant un « appel à l’action » efficace. Les objets du widget FlexBox peuvent être inclus ou exclus pour que la page ait l’aspect que vous souhaitez.

Le widget Text Section
C’est est un autre widget très flexible dans lequel une image peut être utilisée comme focus central, avec du texte et des boutons utilisés selon les besoins. Encore une fois, de nombreuses combinaisons de disposition différentes sont possibles et vous pouvez inclure ou exclure des objets à votre guise.

Le idget Navigation Menu
Bien que le widget Navigation Menu ne soit pas nouveau, il a été mis à jour avec EverWeb 2.7 et 2.8 avec de nouvelles « Options réactives ». L’ajout le plus utile au widget est peut-être que vous pouvez ajouter un menu de style Hamburger à votre site, y compris votre propre logo, du côté opposé du Hamburger.

Travailler avec une page réactive

Le travail avec du texte, des formes, des images, des supports et des widgets dans une page réactive constitue la même expérience que lorsque vous travaillez dans une présentation de page de largeur fixe. Il convient toutefois de noter qu’il existe quelques différences mineures lors de l’utilisation de quelques fonctionnalités EverWeb dans une présentation de page réactive :

1. La position de défilement est utilisée pour créer un lien hypertexte vers un point spécifique d’une page. Les pages réactives sont évolutives, mais pour le moment, les ancres de défilement sont fixes. Par conséquent, il est préférable de ne pas utiliser cette fonctionnalité dans les pages réactives. Nous espérons qu’elle arrive dans les pages réactives dans un futur proche !
2. Si vous ajoutez un cadre photo à une image d’une page réactive, le cadre photo et l’image s’afficheront l’un après l’autre au lieu d’être placés l’un au-dessus de l’autre lors de la prévisualisation ou de la publication. Comme pour la position de défilement, il est préférable de limiter l’utilisation de cette fonctionnalité aux présentations à largeur fixe pour le moment.
3. Modifier la mise en page. Si vous souhaitez convertir une mise en page de largeur fixe en une mise en page réactive, vous pouvez penser qu’elle est aussi simple qu’un changement de mise en page de Centré/Aligné à gauche sur Réactif. Toutefois, la modification de la mise en page peut poser un problème car les deux types de mises en page sont fondamentalement différents. 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ègle générale, il est préférable de créer une nouvelle page réactive et de reconstruire la page à largeur fixe à partir de zéro.
4. Liens hypertextes. L’utilisation des nouveaux widgets FlexBox et Text Section vous permet d’inclure du texte en hyperlien lorsque vous utilisez l’éditeur de texte avec style dans les paramètres de ces widgets. Le texte héritera des styles de lien hypertexte utilisés dans les styles par défaut du projet.

Dimensionner et déplacer les objets

Il est facile de déplacer des objets pleine largeur car ils ne peuvent que se déplacer de haut en bas de la page. Lorsque vous sélectionnez un objet de pleine largeur, vous verrez qu’il ne comporte que des poignées de sélection en haut et en bas et non sur les côtés. Utilisez ces poignées de sélection pour redimensionner la hauteur de l’objet.

Les objets placés dans un widget Responsive Row afficheront des poignées de sélection de tous les côtés de l’objet sélectionné. Les marges peuvent être redimensionnées dans n’importe quelle dimension.

Pour déplacer un objet pleine largeur, glissez et déposez-le à son nouvel emplacement. Lorsque vous déplacez un widget Responsive Row, placez le curseur de la souris sur un espace vide à l’intérieur du widget, puis faites-le glisser, sinon vous risquez de glisser-déposer d’un objet que vous avez placé dans le widget Responsive Row.

Incruster des objets

Lorsque vous ajoutez des objets à une page réactive, ils sont ajoutés à la page en pleine largeur par défaut. Toutefois, si vous avez d’abord sélectionné un widget Responsive Row, l’objet ajouté sera placé dans le widget Responsive Row en tant qu’objet à largeur fixe.

Pour déplacer des objets de l’intérieur d’un widget Responsive Row à un autre, effectuez un simple glisser-déposer. L’objet du premier widget Responsive Row au widget Responsive Row cible. Vous pouvez également effectuer un clic secondaire (ou clic droit) sur l’objet que vous souhaitez déplacer, puis utiliser l’option « Embed In » (incruster dans). Cliquez sur le nom de la ligne réactive dans laquelle vous souhaitez que l’objet soit placé.

Vous pouvez également incruster des objets pleine largeur dans un widget Responsive Row à l’aide de l’option « Embed In ». 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ésactiver l’option « Full Width » si vous souhaitez que l’objet devienne largeur fixe.

Définition des marges

Une dernière astuce consiste à définir les marges des objets pleine largeur sur la page. Sélectionnez l’objet de pleine largeur auquel vous souhaitez ajouter une marge, puis accédez à l’inspecteur des mesures. Utilisez les options de marge gauche et droite selon les besoins. Définir les marges est utile pour éviter que votre contenu ne se trouve au bord de l’écran. Dans le prochain épisode, nous allons examiner les blogs dans un environnement réactif. Comme toujours, si vous avez des questions ou des commentaires, n’hésitez pas à nous contacter dans la section Commentaires ci-dessous. Merci !

This post is also available in: English (Anglais)