Blogger cover

Thème Blogger : un design moderne pour votre site web

Le jeudi, 28 septembre 2017

Dans Web design

Blogger est un nouveau thème responsive qui, comme le thème Smart, est basé sur le Framework EMS Framework, spécialement conçu pour e-monsite.

Il est donc optimisé pour être affiché de manière optimale sur tout type d'écran, du smartphone à l'ordinateur de bureau. Il est également "mobile first", c'est à dire optimisé pour un affichage par défaut sur terminal mobile, ce qui ne l'empêche pas d'être compatible avec toutes les résolutions existantes.

Un layout inédit

Le "layout" (signifiant "mise en page" en anglais) de votre site désigne la manière dont les zones le constituant (menu principal, menu vertical, zone de contenu, entête…) sont agencées les unes par rapport aux autres. De manière classique, l'entête du site sera le plus souvent placée en haut du site, un menu vertical sera positionné à gauche ou à droite et un pied de page placé en bas du site.

Un menu principal affiché verticalement

Jusqu'à présent, tous les thèmes proposés sur e-monsite ne vous permettaient d'afficher votre menu principal que de manière horizontale, le plus souvent en haut du site, au dessus ou en dessous de l'entête.

Le thème Blogger innove sur ce point en vous offrant la possibilité d'afficher verticalement votre menu principal, sur la gauche de la zone de contenu. Un bouton placé dans l'entête du site contrôle l'ouverture / fermeture du menu principal, permettant ainsi d'étendre la largeur de la zone de contenu du site.

Menu principal affiché verticalement
Menu principal du site affiché verticalement

Ce type de configuration conviendra parfaitement pour un blog par exemple où le menu principal pourrait permettre d'accéder rapidement aux diverses catégories. Sur le même principe, un menu principal affiché verticalement conviendrait également pour une galerie photo ou une boutique en ligne.

Bien sûr, il est toujours possible d'afficher horizontalement le menu principal. Qu'il soit horizontal ou vertical, le thème Blogger offre la possibilité de fixer le menu principal, afin de le rendre accessible en permanence.

Exemples de positionnement du menu horizontal
Exemples de positionnement du menu horizontal

Une entête avec une image et/ou un carrousel

Depuis la structure du site (accessible via Configuration > Menus), vous pouvez afficher une large image ainsi qu'un carrousel d'images sous l'entête du site. Vous pouvez également afficher simultanément ces deux zones. Pour certaines déclinaisons du thème, une image par défaut vous est proposée. Vous pouvez bien sûr la conserver ou choisir de la remplacer par une autre.

Une galerie photo façon "Pinterest"

Depuis les options d'une catégorie du module "Album photos", vous pouvez définir la manière dont les photos de la catégorie seront affichées sur le site (vignettes, listing…). En choisissant le mode d'affichage "Liste (image en grand format + détails)", les photos de la catégorie s'afficheront automatiquement en quinconce (communément appelé "effet masonry" en web design), comme l'illustre la capture d'écran ci-dessous :

Effet masonry sur vos galeries photos
Affichage de photos en quinconce

Notez que cet effet "masonry" est également repris pour l'affichage des billets du module Blog.

Des vignettes personnalisables

Beaucoup d'éléments du site sont affichées sous forme de vignette : produits de la boutique, catégories du module Album Photos… Le thème Blogger vous permet de personnaliser leur apparence en vous offrant la possibilité de définir :

  • le nombre maximal de vignettes par ligne : vous pouvez afficher jusqu'à six vignettes sur une même ligne. Le nombre de vignettes dépendra essentiellement de la largeur de la zone de contenu du site et de la résolution de l'écran. Ainsi, un site sans menu vertical disposera d'une zone de contenu plus conséquente et permettra d'afficher un nombre plus élevé de vignettes par ligne.
  • la hauteur des vignettes : La hauteur d'une vignette dépend de son contenu. À partir d'une case à cocher, vous pouvez choisir d'harmoniser la hauteur de vos vignettes. 
  • l'apparence de la description courte : les vignettes s'accompagnent le plus souvent d'un court texte descriptif dont vous pouvez définir le mode d'affichage, comme l'illustre l'image ci-dessous :

Exemples de mise en forme de la description dans les vignettes
Exemples de mise en forme de la description dans les vignettes

Mise en avant de vos réseaux sociaux

Le thème Blogger permet également de mettre en avant vos liens vers les différents réseaux sociaux. Après avoir défini les urls vers les différents réseaux sociaux en rapport avec votre site (depuis Configuration > Réglages > Infos sur le site), choisissez la disposition de ces liens sur votre site web : dans l'entête, sur le côté de la page ou dans le pied de page.

Liens vers les différents réseaux sociaux
Exemple d'affichage des liens vers les différents réseaux sociaux associés à votre site.

Themes Responsive Design