Votre premier site web réactif EverWeb 4 : Les blogs

This post is also available in: English (Anglais)

Dans l’article précédent de cette série, « Votre premier site web réactif EverWeb 3 : Travailler avec des pages réactives », nous avons expliqué comment ajouter et déplacer des objets de pleine largeur et de largeur fixe autour d’une page réactive dans EverWeb. Nous avons également exploré les widgets EverWeb qui ont été spécialement créés pour être utilisés dans la conception de sites web réactifs.

Dans cet article, nous allons ajouter un blog réactif à un site web …

Ajouter un blog réactif à votre site web
Il est facile d’ajouter un blog réactif à votre site web. Cliquez sur le bouton « Add Page » (Ajouter une page) dans la barre d’outils, puis sélectionnez « Blank Responsive Theme Template » (modèle de thème réactif vide) dans la colonne de gauche. Choisissez le style de page « blog » dans la partie droite de la page et cliquez sur « Select » (Sélectionner) pour ajouter le blog au projet de site web.

Conversion d’un blog de largeur fixe en un blog réactif
Si vous avez déjà créé un blog, celui-ci a probablement une présentation de page à largeur fixe (c’est-à-dire centrée ou alignée à gauche). Vous pouvez changer cela pour qu’il soit « réactif » dans la section Mise en page de l’onglet Paramètres de page de la fenêtre Inspecteur pour les pages « blog », « publications » et « archive ». Si vous venez de créer un blog de largeur fixe ou si vous avez un blog avec seulement quelques objets sur ses pages, le placement des objets sur les pages du blog ne devrait pas poser de problèmes. Cependant, si vous convertissez plusieurs objets sur la page, EverWeb vous avertira que le changement de type de page ne peut pas être annulé et vous demandera si vous souhaitez continuer malgré tout. Modifier la présentation des pages existantes de fixe à réactive (et vice versa) est une décision importante à prendre car les deux styles de mise en page sont fondamentalement différents dans leur fonctionnement. Vous devrez donc généralement reconstruire les pages de votre projet. Lorsque vous passez d’une disposition de page fixe à une page réactive, les objets seront déplacés et vos pages peuvent sembler très confuses. Il faut donc être prudent car, comme l’indique le message d’avertissement, il est impossible d’annuler le type de mise en page. Par conséquent, il est préférable de dupliquer votre fichier de projet existant et de travailler sur celui-ci plutôt que sur un fichier de projet existant (et probablement déjà en production).

Utiliser un blog réactif

Si vous avez ajouté un nouveau blog réactif à votre site web, vous remarquerez que le widget de blog (c’est-à-dire l’index du blog sur la page) est un objet pleine largeur. Une marge gauche et droite de taille 30 est incluse et peut être modifiée dans l’inspecteur de mesures si vous le souhaitez. Si vous avez converti votre blog à partir d’une mise en page de largeur fixe, définissez le widget de blog en « Full Width » (pleine largeur) ??dans l’inspecteur des mesures, puis ajoutez des marges gauche et droite.

Le logo « Made with Love with EverWeb » est inclus dans un widget Responsive Row dans le pied de page. Si vous avez converti votre blog en un blog réactif, vous constaterez peut-être que le contenu du pied de page a été transféré dans le corps principal de la page. Vous devrez donc déplacer ces objets vers le pied de page. L’utilisation d’un widget Responsive Row dans le pied de page permet de conserver ces objets correctement placés et redimensionnables dans la présentation de page réactive.

La réorganisation de votre blog, de vos publications et de vos pages d’archives peut être réalisée assez rapidement, mais n’oubliez pas que vous devrez peut-être repenser votre design à largeur fixe pour qu’il s’adapte aux méthodes de conception réactives. Cela peut impliquer d’explorer les nouveaux widgets réactifs d’EverWeb, d’utiliser des widgets tiers ou de réfléchir à de nouvelles façons d’obtenir ce que vous voulez pour tous les appareils, du mobile au bureau. Nous traiterons de ce sujet dans notre prochain article !

Utiliser une image de couverture dans un blog

L’environnement de blogage EverWeb n’a guère changé entre la version 2.7 et la version 2.8, de nombreux aspects du blog étant déjà prêts au réactif, comme l’éditeur de publication de blog et les moteurs de commentaires Facebook et Disqus. EverWeb 2.8 a introduit les options « Max Image Width » (Largeur d’image maximale) et « Max Image Height » (Hauteur d’image maximale) dans les paramètres du widget de la page « posts ». Ces paramètres définissent la taille souhaitée pour l’image de couverture de publication de blog. Sélectionnez d’abord l’image que vous souhaitez utiliser pour votre couverture à l’aide du bouton « Post Image » (Image de l’article), « Choose… » (Choisir …). Sélectionnez ensuite l’emplacement d’affichage de l’image à l’aide de l’option « Style ». L’image peut être au-dessus du message ou alignée à gauche ou à droite du message. Utilisez ensuite les options Largeur / Hauteur maximales de l’image pour définir la hauteur et la largeur maximales de l’image. Si vous choisissez zéro, l’image sera affichée dans sa taille d’origine.

Dans cet article, nous avons brièvement évoqué la conversion d’un site web d’une mise en page de largeur fixe en une mise en page réactive. Dans le prochain blog, nous examinerons ce sujet de manière plus approfondie…

Si vous avez un commentaire, une question ou des conseils pour d’autres utilisateurs EverWeb, veuillez nous en informer ! Nous aimerions avoir de vos nouvelles !

This post is also available in: English (Anglais)