Un nouvel article réalisations pour vous parler,aujourd'hui, des modifications réalisées pour Magali du blog Say le Pompom.
Magali m'a contacté pour créer un menu déroulant, ajouter une bannière d'articles récents sous l'en-tête de son blog, créer un affichage des articles en grille, modifier et réarranger l'apparence de son pied de page.
Avant d'aller plus loin, voici à quoi ressemblait son blog avant mon travail :
Tout d'abord, Magali voulait changer les miniatures des articles sur sa page d'accueil et les pages de recherche. Pour cela j'ai créé des aperçus des articles avec : la première image de l'article, les libellés, la date, le titre, et un extrait de l'article :
Ensuite j'ai créé un diaporama des derniers articles qui à été ajouté sous l'en-tête du blog :
Le pied de page à été entièrement réorganisé et modifié. Tout d'abord, il fait maintenant 100% de la largeur de la page. Ensuite, il y avait beaucoup de choses à afficher, j'ai donc délimité le pied de page en 3 sections distincts de par leur couleur de fond. En premier on retrouve le formulaire d'inscription aux articles. Sur une 2e ligne on retrouve un gadget Instagram, une liste de liens Blogroll, et une liste de liens Shopping. Pour finir sur une 3e ligne on retrouve les boutons vers les réseaux sociaux et les attributions.
Voici l'ancien pied de page :
Et le nouveau pied de page :
En plus de ces modifications, le blog à été adapté aux différentes tailles d'écrans (responsive), et la version mobile à été modifiée pour correspondre à la version web :
Modifications réalisées :
- Création d'un diaporama sous l'en-tête du blog affichant les derniers articles publiés, en accord avec le design du blog.
- Ajustement du pied de page à 100% de largeur de la page
- Modification de l'apparence du pied de page et réarrangement de son contenu
- Création d'un menu déroulant
- Modification de la version mobile pour qu'elle corresponde à la version ordinateur
- Affichage automatique des articles en aperçu sur la page d'accueil
- Adaptation du blog pour le rendre responsive : pour qu'il s'ajuste aux différentes tailles d'écran