Le Jardin Des Mots
Le Jardin Des Mots
Pour ce projet, j’ai dû créer un site WordPress, nommé Le Jardin Des Mots, pour une librairie. Il avait pour but de concevoir un site Vitrine, avec Blog, pour une librairie qui souhaitait un espace réservé aux membres inscrits. Ce projet a été réalisé, lors de mes cours de CMS (Content Management System), durant ma 1ère année d’étude en Bachelor « Cycle Web et Multimédia », option « Développement », à MyDigitaSchool de Vannes.
Compétences
Développement d’un site avec gestion de membre
Recherche de la gestion d’un blog
Logiciels
Utilisation du CMS WordPress
Utilisation du langage CSS
Développement du projet
Pour commencer, j'ai regardé à quoi ressembler les sites web de librairie afin de m'en inspirer. Pour après concevoir le wireframe du site, pour avoir un idée précise du visuel final.- J'ai créé l'identité visuelle pour la librairie (Voir Identité Visuelle Le Jardin Des Mots)
- Tout d’abord, j’ai installé sur mon nom de domaine, le CMS WordPress, afin d’accéder au tableau de bord et d'implémenter le site web. Pour ce projet, j’ai utilisé le thème Kadence, qui offre une grande liberté de personnalisation.
- Pour réaliser ce site, j’ai utilisé plusieurs extensions :- LiteSpeed Cache qui optimise également le site grâce à la mise en cache pour accélérer le chargement des pages.- Kadence Blocks qui la création des pages avec des blocs prédéfinis intégrés à Gutenberg.- Spectra qui permet d’ajouter des animations pour rendre le site plus dynamique.
- - MetaSlider qui m’a permis de créer les différents carrousels et sliders pour le site.- reSmush.it Optimizer Image pour que les images soient allégées, pour qu'elles ne surchargent pas le serveur qui héberge le site web.- Ultimate Member pour permettre la gestion des membres, avec l'inscription et l'accès restreint à certaines pages.
- Dans le Header, nous trouvons le logo et le nom du site, puis la navigation qui est différente si l'utilisateur est connecté à son compte membre ou non.
Dans le Footer, nous retrouvons les réseaux sociaux de la librairie, le menu des pages légales et le copyright avec un rappel du logo. - - La page d'accueil est composée d'un Hero avec un texte accrocheur, un bouton CTA ("Call To Action") et les données de la librairie comme le nombre d'ouvrages qu'elle possède, d'une section qui met en avant les 3 prochains évènements et la dernière section pour les valeurs de la librairie.- Sur la page "Actualités", nous retrouvons les articles des évènements de la librairie, l'utilisateur a la possibilité de les commenter.
- - Ensuite, la page "À Propos de nous" se décline en 4 sections. La première est séparée en 2 colonnes avec une image à gauche et une description de la librairie à droite. La deuxième section est une image illustrant l'univers de la librairie. La troisième est un slider, regroupant quelques avis laissés par des clients. Enfin, la dernière est la zone indiquant les contacts et une mini map, pour situer la librairie.- Puis, la page "Mon Club Lecteur", accessible seulement, pour les membres connectés, est composée de la liste des prochains évènements qui sont réservables avec un bouton qui confirme la réservation par un pop-up.
- - Poursuivons avec la page "Compte", l'endroit où l'utilisateur peut retrouver ses informations personnelles, avec la possibilité de modifier son mot de passe, gérer sa confidentialité et d'opter pour la suppression de son compte.- Après, la page "Le Club Lecteur", accessible pour tous les utilisateurs, est organisée de features, pour montrer les avantages d'une inscription, d'un bouton pour s'inscrire et d'un slider avec des images de la librairie.- Enfin, les pages "Connexion" et "Inscription" ont chacune un formulaire spécifique respectivement pour se connecter ou pour s'inscrire.
- Ce projet m'a permis d'approfondir mes connaissance en création de site WordPress et d'apprendre à implémenter un espace restreint ainsi que de gérer l'accès spécifique à des membres.
Recherche
Pour commencer, j’ai regardé à quoi ressembler les sites web de librairie afin de m’en inspirer. Pour après concevoir le wireframe du site, pour avoir un idée précise du visuel final.
Identité visuelle
J’ai créé l’identité visuelle pour la librairie (Voir Identité Visuelle Le Jardin Des Mots [Bientôt disponible])
Développement
Thème du site
Tout d’abord, j’ai installé sur mon nom de domaine, le CMS WordPress, afin d’accéder au tableau de bord et d’implémenter le site web. Pour ce projet, j’ai utilisé le thème Kadence, qui offre une grande liberté de personnalisation.
Extensions
Pour réaliser ce site, j’ai utilisé plusieurs extensions :
Zoning
Dans le Header, nous trouvons le logo et le nom du site, puis la navigation qui est différente si l’utilisateur est connecté à son compte membre ou non.
Dans le Footer, nous retrouvons les réseaux sociaux de la librairie, le menu des pages légales et le copyright avec un rappel du logo.
Pages
La page d’accueil est composée d’un Hero avec un texte accrocheur, un bouton CTA (« Call To Action ») et les données de la librairie comme le nombre d’ouvrages qu’elle possède, d’une section qui met en avant les 3 prochains évènements et la dernière section pour les valeurs de la librairie.
Sur la page « Actualités », nous retrouvons les articles des évènements de la librairie, l’utilisateur a la possibilité de les commenter.
Ensuite, la page « À Propos de nous » se décline en 4 sections. La première est séparée en 2 colonnes avec une image à gauche et une description de la librairie à droite. La deuxième section est une image illustrant l’univers de la librairie. La troisième est un slider, regroupant quelques avis laissés par des clients. Enfin, la dernière est la zone indiquant les contacts et une mini map, pour situer la librairie.
Puis, la page « Mon Club Lecteur », accessible seulement, pour les membres connectés, est composée de la liste des prochains évènements qui sont réservables avec un bouton qui confirme la réservation par un pop-up.
Poursuivons avec la page « Compte », l’endroit où l’utilisateur peut retrouver ses informations personnelles, avec la possibilité de modifier son mot de passe, gérer sa confidentialité et d’opter pour la suppression de son compte.
Après, la page « Le Club Lecteur », accessible pour tous les utilisateurs, est organisée de features, pour montrer les avantages d’une inscription, d’un bouton pour s’inscrire et d’un slider avec des images de la librairie.
Enfin, les pages « Connexion » et « Inscription » ont chacune un formulaire spécifique respectivement pour se connecter ou pour s’inscrire.
Conclusion
Ce projet m’a permis d’approfondir mes connaissance en création de site WordPress et d’apprendre à implémenter un espace restreint ainsi que de gérer l’accès spécifique à des membres.
Quelques visuels
Liens
Visualisez le site avec le bouton ci-dessous :