Petit Guide de mise en page

(mise à jour le 08/03/2017)

 

 

Petite note : si vous avez des besoins visuels particuliers : retouche photo, détourage difficile, montage…n’hésitez pas à m’en parler. 
De la même façon, il m’arrive de repasser derrière vos articles pour aérer le contenu (l’utilisation de wordpress est parfois difficile pour la gestion des sauts de ligne)  enlever les balises qui se rajoutent parfois dans le code, éventuellement corriger les styles typos ou nettoyer une photo dont la qualité me parait douteuse, il peut aussi m’arriver de proposer d’autres photos pour compléter un article ou une idée de mise en page différente…surtout pour les gros articles « revue », mais en aucun cas je ne touche au contenu (c’est Samuel qui intervient pour toutes les discussions éditoriales) – Anto

 


Formats d’images

 

Les images dans les articles font 900px de large. Dans l’idéal format carré (900×900), sinon essayer de privilégier un ratio 4:3 (900×675). Si vous devez utiliser un autre format, conserver 900px de large, quelque soit la hauteur.  Ne pas mettre de contours, ni d’effets d’ombre.

Les nommer de façon explicite pour une gestion plus facile dans la bibliothèque. Ex : Nomarticle_900x900.jpg Il y a un plugin dans la Bibliothèque de média nommé  « Remplacer le media » qui permet de mettre à jour une image dans le site,  et d’impacter toutes les pages où elle est présente. Ne pas hésiter à utiliser des images détourées sur fond blanc qui est la couleur de fond du site (255,255,255), par exemple comme l’image de une de l’article ‘DDB, le pouvoir du point’ car ça aère la grille, et ça lie au texte avec l’effet de transparence.

 

Les images dans les sliders font 1140x570px (un ratio 2:1). Les sliders sont uniquement utilisés dans les articles « revue ». Les nommer de façon explicite pour une gestion plus facile dans la bibliothèque. Ex : Nomarticle_1140x570.jpg

 

Les images de une (« featured image ») doivent être  dans l’idéal l’une des images 900x900px car elles sont reprises ensuite sur les lanceurs de la home d’aspect carré. Néanmoins si vous choisissez un format différent pour l’image à la une, un recadrage-centrage sera effectué dessus pour obtenir le carré affiché sur la home (l’image ne sera pas complète, l’essentiel étant qu’elle ne soit pas déformée).

 


Typos

 

Le site utilise deux typos (Google fonts) : Oswald pour les titres et mises en avant et Libre Baskerville pour les textes courants.

H1 : gros titres en titre 1 / Oswald

H2 : titre 3 / Oswald

H3 : titre 3 / Oswald (souvent utilisé pour rythmer un article long, faire ressortir des parties)

H4 : titre 4 / Libre Baskerville Titre de paragraphe. Sur un « newsfeed », pour le chapeau par exemple. Sur une interview, pour les questions.

H5 : titre 5 / Libre Baskerville. Pour les textes d’interview par exemple.
H6 : titre 6 / Libre Baskerville. Pour les légendes de photos. A utiliser centré.

Style courant : paragraphe. En Libre Baskerville. Ne pas hésiter à l’utiliser en italique pour les noms courants, et gras pour faire ressortir un mot.  Les liens passent en rouge.

 


Rédiger une « newsfeed »

 

Créer un nouvel article dans le menu « Articles ».  Lui attribuer la catégorie « Feed » et il sera affiché dans le Newsfeed.
Il est possible de partir d’un article existant, en utilisant la fonction « dupliquer l’article » pour s’en servir comme modèle.

L’idée du newsfeed, c’est de privilégier l’aspect visuel, et des textes plus courts que dans des articles. C’est un mode de publication plus fréquent, utilisé pour les coups de cœur, annoncer une expo, un focus d’artiste.

Utiliser H4 pour le chapeau, et Paragraphe pour le texte courant.

Les photos sont centrées, avec leur légende en H6 centrées sous chaque photo.

En fin d’article, si besoin rajouter des liens vers d’autres sites pour plus d’infos.

Les liens doivent être en « nouvelle fenêtre » (_blank) pour éviter que les internautes quittent notre site.

Vous pouvez éditer des « tags » dans la colonne de droite, qui seront affichés en bas d’article.

Ne pas oublier de choisir une « image à la une » (colonne de droite)

Ne pas toucher aux options « Jupiter Page Options » qui sont définies ailleurs.

Ne pas hésiter à éditer des textes de référencement dans « All in One Seo Pack » tout en bas de l’article, surtout ‘titre’ , ‘description’ et ‘mots clés’.

 


Rédiger un article « revue »

 

Même principe que pour le Newsfeed sauf que l’article rentre dans une ou plusieurs catégories.  Au besoin, n’hésitez pas à créer de nouvelles catégories.
Note : il faudra éviter de créer des noms de catégories trop proches, quand on aura beaucoup d’articles on les mettra à plat pour en faire un mode de navigation avec un accès direct par menu.

Intégrer  le slider en début d’article (voir dessous pour en créer un). Utiliser l’outil Masterslider pour l’importer (le petit picto « M » de la barre d’outil). Sinon, un copier/coller de son shortcode fera aussi l’affaire.

Ne pas hésiter à bien rythmer l’article, aérer, faire ressortir des textes en H3.

Ne pas hésiter à mettre des vidéos  Viméo, Youtube, Ina, ou players Bandcamp ou Soundcloud. En général, en bas d’article.  On essaye de mettre ces players centrés, en 900px. Si problème pour intégrer, me demander pour customiser le code.

Pour les interviews « triple vrille », regarder sur un modèle existant pour un modèle de mise en page.  L’interview utilise le style « bloc de citation » qui mettra un fond gris léger derrière, et les styles H4 pour les questions, H5 pour les réponses, titre de l’interview en H3, nom de l’auteur juste dessous en H6 calé à gauche. C’est important de remettre le nom de l’auteur (même s’il est déjà en intro d’article), car l’intervieweur peut être une autre personne que l’auteur de l’article, et si l’article est long, c’est bien de repréciser qui pose les questions.

 


Réaliser un slider

 

Utiliser l’outil « Master Slider » (colonne de gauche).

Dans la liste des slides existant, en dupliquer un existant pour éviter d’éditer toutes les options (il y en a trop…)

Un shortcode lui sera attribué. On peut soit le copier-coller dans l’article, mais aussi utiliser l’outil d’importation dans un article (plus simple).

Dans le slider dupliqué, effacer les slides précédents, utiliser « add slide », et choisir les images 1140×570 (possible de toutes les importer en une seule fois, plusieurs slides seront créés).

Possible d’intervertir l’ordre des images (par glisser-déposé).

De préférence utiliser entre 3 et 7 images. En dessous, un slider est obsolète, et au dessus, l’internaute moyen ne fera pas le tour complet.. autant utiliser les images supplémentaires dans le corps de l’article. Une idée intéressante c’est aussi d’utiliser une même image avec deux cadrages différents dans l’article, ex. avoir un détail zoomé dans le slider, et l’image complète dans l’article.

 

Tapez votre recherche et appuyez sur Entrée