Applications du secteur

Dans le secteur de la vente d’échangeurs thermiques, chaque appareil est conçu pour être performant dans un ou plusieurs domaines spécifiques. Cependant, chaque entreprise a sa propre manière de classer ces domaines d’activité, en les répartissant selon des catégories et sous-catégories qui lui sont propres.

Après avoir réalisé les maquettes de certaines pages d’application, nous avons finalement défini l’arborescence qui serait propre à notre site. Une fois cette structure validée, j’ai pu la mettre en place directement sur le site WordPress, en organisant les pages selon cette hiérarchie et en créant les liens nécessaires pour faciliter la navigation.

Arborescence de la section

Au sommet de cette arborescence, nous retrouvons la page « Division », regroupant les trois grands domaines. Dans chacun de ces domaines, il y a différentes industries, qui sont elles-mêmes composées des pages « Applications ».

Conception des premières pages

Pour la création de mes premières pages dédiées aux différentes applications des échangeurs thermiques, je me suis beaucoup appuyé sur le modèle que j’avais conçu au préalable sur Canva. Grâce à la présence, dans le thème, des modules dont je m’étais inspiré, j’ai pu recréer facilement la structure visuelle que j’avais imaginée.

Concernant l’aspect visuel, j’ai sélectionné les images et logos directement dans Canva, en choisissant ceux qui me semblaient les plus représentatifs de chaque secteur d’application. Une fois toutes les pages finalisées, j’ai remplacé les visuels temporaires par des images téléchargées depuis Adobe Stock, après validation.

Cependant, malgré la validation initiale de mon modèle, j’ai rapidement constaté certaines erreurs d’adaptation pour le format web. Par exemple :

J’avais justifié l’ensemble de mes paragraphes, ce qui n’est plus une pratique courante sur le web

La majorité de mes éléments étaient centrés, notamment les titre

Il n’y avait pas de réelle variation dans l’alignement des modules (gauche/droite), ce qui donnait un rendu visuellement assez répétitif.

En remarquant cela, j’ai progressivement ajusté mon modèle pour qu’il soit mieux adapté aux standards du web et pour offrir une expérience utilisateur plus fluide et plus agréable.

Ajustements continus des pages

Tout au long du projet, les pages de la section « Applications » ont été celles qui ont connu le plus de modifications. Ces ajustements constants étaient surtout dus au souci de maintenir une cohérence visuelle et fonctionnelle avec l’ensemble du site, et avec l’apparition de nouvelles idées ou besoins au fil de l’avancement du projet.

Étant donné que toutes ces pages étaient basées sur un même modèle de départ, j’ai d’abord créé une page de référence avec les bons paramètres (mise en page, alignements, couleurs, typographies…), puis je l’ai dupliquée pour chaque application, en adaptant les contenus selon le secteur concerné.

De nombreuses modifications ont également été causées par des dysfonctionnements de certains modules du thème. Comme David et moi avions sélectionné les mêmes modules dès le début du projet, dès qu’un module posait un problème, nous le remplacions systématiquement sur toutes les pages concernées du site.

Une fois l’arborescence des applications validée, nous avons aussi enrichi la navigation interne en ajoutant, en bas de chaque page d’application, un lien vers d’autres applications de la même industrie.

Enfin, nous avons effectué une revue complète de toutes les pages « Applications » pour configurer le responsive de ces pages et importer les photo via adobe stock en fonction de si elle avait été validée par notre responsable ou non si ce n’était pas le cas il nous a fournis des liens vers des exemples pour qu’on ait une idée du type de photo attendus.

En cours de chargement…

Cela prend trop de temps ?

Recharger le document

Ouvrir dans un nouvel onglet

Découvrez les différentes difficultés que l’on a rencontrés avec les modules du thème

Bloc Hero :
Composer de l’image de fond avec un overlay noir qui a une opacité à 0,2.
Le bloc a une hauteur de 400 px et pour la version mobile 250 px.

Bloc d’introduction :
Ce bloc n’a aucune marge en haut afin de le coller au hero. Elle est composée d’un bloc avec une couleur de fond verte (#95123) et un paragraphe écrit en blanc.

Bloc titre du thème :
Ce bloc est un conteneur présent à plusieurs niveaux du site, nous l’avons conservé sur cette page, il introduit les principales difficultés dans le secteur d’activité.

Bloc challenge du secteur :
Ce bloc est inspiré d’un module du thème et il est structuré de la manière suivante :

Un conteneur principal avec une direction horizontale
Des conteneurs secondaires avec une direction verticale
Dans chacun de ces conteneurs verticaux, la composition est la suivante, un conteneur horizontal qui détient une icône est un séparateur. Hors de ce dernier conteneur, il y a un titre (H3) et un paragraphe.

Bloc statistique du thème :

Les paramètres initiaux de ce bloc était déjà correct avec des animations, des statistiques. Les modifications principales ont été la modification du fond avec une couleur verte (#95C123) et un overlay d’une image de notre logo avec une opacité de 0,3. J’ai pu insérer mes logos en SVG après un téléchargement dans la couleur souhaitée (#FFFFFF).

Bloc titre :

Ce bloc est un titre classique (H2) centrer pour introduire la section du bien fait de nos échangeurs dans le secteur. La couleur du titre est en verte (#006939).

Bloc du thème :

Ce bloc m’a été utile pour mettre en avant nos échangeurs dans le secteur d’activité. Il est en réalité pas un conteneur classique comme les précédents, mais une section composait de deux colonnes. En fonction de l’application sur laquelle, je travaillais, la colonne de droite pouvait avoir plus de hauteur que celle de gauche ou inversement. Dans ce cas-là j’appliquer une position fixe à une des deux pour qu’il y ait un effet de défilements et que les deux soit visibles jusqu’à la fin du bloc.

Colonne de gauche

J’ai utilisé cette colonne comme illustration du secteur. Il y a au sein de celle-là deux blocs côte à côte, un composé d’un fond vert (#95C123) avec un rappel du secteur d’activité traité et un slogan et l’autre d’une image verticale de la même taille. En dessous, il y a une image de la largeur des deux éléments.

Colonne de droite

la structure de cette colonne est assez simple et répétitive, elle est composée d’un titre (H3) et d’une description. Ensuite chaque nouvelle section est séparée par un espaceur de 50 px.

Onglet (Produit / Applications) :

Ce bloc m’a permis d’insérer les deux portfolios, sans avoir trop de contenu visible en même temps en fin de page. J’ai justifié les onglets en haut à gauche de leurs contenus. La couleur du titre d’onglet est toujours blanche (#FFFFFF) et concernant le fond il est vert (#006939) lorsque l’onglet est actif ou que l’on survole, sinon pour l’onglet inactif, il est en vert clair ( #95C123).

Carrousel :

Les carrousels au sein des onglets sont configurés afin d’afficher quatre éléments à l’écran. Lorsqu’il a donc plus de produits dans le carrousel, l’option du défilement automatiques est donc activée. Les flèche de navigation ont un fond vert (#006939) et un fond vert clair au survol (#95C123).
Chaque diapositive est composée d’une image avec une hauteur de 280 px et une largeur de 100%.
Pour le carrousel de l’onglet produit, il y a également un conteneur blanc avec une largeur de 86 % et un décalage de 215 en partant du sommet, ce bloc détient un titre (H3, #006939).
Pour celui de l’onglet applications, le titre écrit en blanc est directement centré.

Modules et leurs paramètres

Voici une représentation des blocs que j’ai utilisé pour la version finale des pages « Applications », avec les paramètres que j’ai définis pour chacun.

Au final, on retrouve surtout des blocs créés avec Elementor, et très peu issus directement du thème installé. Même si je ne les ai pas utilisés tels quels, les modules du thème m’ont quand même servi de base d’inspiration. Ils m’ont aidé à imaginer la structure et le style des blocs que j’ai ensuite recréés avec Elementor, car cet outil me permettait beaucoup plus de liberté et de personnalisation.

Grâce à cette méthode, j’ai pu garder une cohérence visuelle sur toutes les pages, et surtout faire en sorte qu’elles soient bien adaptées à tous les écrans (responsive).

Responsive design

Nous avions décidé de faire une revue de toutes les pages pour le coter responsive une fois qu’elle aurait toute été finalisé. Nous avons donc remarqué que certain bloc n’avait pas automatiquement une mise en page adapté surtout pour les versions mobiles.

Afin de remédier à cela pour de nombreux blocs, j’ai dû les dupliquer puis masquer le bloc initiale dans ses paramètres avancés sur la version mobile, puis, j’ai configuré la copie de ce bloc avec des paramètres adapter au mobile. Ce nouveau bloc a donc lui dans ses paramètres avancés l’option pour le masquer sur les versions ordinateurs et tablettes.

De manière générale les modifications faites sur ces blocs dupliquée sont le fait que tous les textes sont centrés et surtout pour les carrousels, l’effet de défilements infinis est toujours présent, car il y a une seule diapositive affichée à l’écran

De plus, j’ai enlevé le bloc avec les onglets pour la version mobile qui dysfonctionné, j’ai reproduit la mise en forme du bloc de l’onglet avec elementor en conservant un carrousel en dessous.

Conceptions des pages parente

Comme vous pouvez les constater dans l’arborescence, les pages « Applications » sont les plus basses dans l’organisation, elle possède une page parente « Industrie » et ces pages industries, possède une page parente « Divisions ».

Les pages divisions et applications possèdent le même bloc titre du thème que les applications, cela permet de garder une cohérence graphique, nous avons décidé de ne pas mettre de fil d’Ariane, mais ces titres sont un moyen efficace pour permettre aux utilisateurs de se repérer sur leurs positions dans le site.

Ensuite pour la page « Industrie » nous retrouvons un carrousel avec les mêmes paramètres que celui en bas de la page application. Tandis que pour la page « Division » le carrousel est différent, car le nombre de diapositives à l’affichage est de trois la taille l’image est donc de 380 px en hauteur avec une largeur de 100%.