Général • Brief

Cette refonte du site vitrine de Jackie’s met en avant l’identité visuelle fraichement créée pour cette traiteuse végan. L’ambiance colorée, douce et chaleureuse accompagne l’idée d’une nourriture réconfortante et saine. J’ai réalisé le graphisme puis développement du site via un thème WordPress sur-mesure.

Général • Outils

Logo WordPress
Logo Elementor
Logo Sage

Général • Édition

Afin de permettre une édition facilitée, les pages complexes sont réalisées à l’aide de l’éditeur de page Elementor. Pour reproduire fidèlement les maquettes, j’ai développé plusieurs modules intégrés à l’éditeur et éditables en direct.

Pages • Accueil

Pages • Contact

Responsive design

Modules personnalisés
   pour Elementor

Si la structure générale des pages peut être construite facilement à l’aide d’Elementor, certains éléments graphiques des maquettes ne peuvent être recréés avec les modules natifs.

J’ai donc profité de cette occasion pour approfondir mes connaissances techniques de l’éditeur en développant plusieurs modules totalement intégrés. Aux options simples mais pratiques, ces modules interactifs permettent une visualisation et une édition moderne et en temps réel.

L’API d’Elementor est combinée à des templates Laravel pour le front et Backbone JS pour le back.

Poster animé

Module personnalisé

Ce module affiche des lignes de texte texturé qui s’adaptent automatiquement à la taille de leur conteneur.

Côté front, le contour puis chaque ligne de texte est animé et affiché progressivement lorsque le poster devient visible.

Fond en découpe

Extensions modules natifs

Les maquettes réalisées proposaient un design aux sections marquées mais ouvertes à l’aide de coins en découpe en forme de vague.

Obtenu à l’aide d’une astuce CSS, j’ai souhaité rendre cette option facilement utilisable en l’intégrant directement aux fonctionnalités des éléments natifs colonne & section tout en proposant plusieurs options de personnalisation comme la position, la couleur ou la taille.

Éléments flottants

Module personnalisé

Les éléments décoratifs animés au scroll et au mouvement de la souris disposent également de leur propre module Elementor, ce qui permet d’adapter totalement leur placement à la page.

Le module propose plusieurs éléments reliés à des templates uniques : l’ajout de nouveaux éléments est ainsi facile à mettre en place.

Optimisation
performances
et SEO

Performances

Les sites WordPress utilisant un éditeur de page pour la construction de leur page sont rarement optimisés et parfois franchement lents, hormis les démos proposées pour convaincre. De plus, l’utilisation de nombreuses images animées au mouvement de la souris peut amener à ralentir le site, notamment sur mobile. Toutefois, après un certain nombre d’optimisations techniques, le site affiche des notes de performance satisfaisantes de 97 pour desktop sur l’outil de Google PageSpeed Insights.

Référencement

Le travail sur le référencement naturel et l’optimisation du code pour le SEO a également permis d’être rapidement placé dans les premières positions lors de recherches Google importantes telles que « traiteur vegan » « traiteur végétalien », « buffet végétarien »… et ce malgré la faible quantité de pages.

Performances PageSpeed mobile
Performances PageSpeed desktop

Faites appel à
mes services !

Vous avez des besoins en graphisme ou conception web ? Échangeons ensemble et je vous proposerai un devis adapté à vos attentes et votre budget.
Contacter Clément Bernard