Contexte et premier échange

Une cliente, novice en web et informatique, a demandé d’ajuster son site : expliquer la visibilité sur son nom, réduire la taille des textes et images, et réorganiser une section « Association tactile ». La première réponse détaillait chaque point sans jargon inutile, proposant notamment un devis SEO séparé pour intégrer son nom dans les balises et textes.

précision sur le référencement naturel (SEO)

définition et enjeux

Le SEO (Search Engine Optimization) regroupe les bonnes pratiques pour que les moteurs de recherche associent un site à des mots‑clés spécifiques. Pour que le nom de la cliente apparaisse en premier, il fallait :

• identifier le mot‑clé principal (« Nom Prénom »),
• rédiger des textes intégrant ce mot‑clé selon des règles de hiérarchie (titres H1, H2, balises meta),
• optimiser les URL et les descriptions,
• générer des liens entrants depuis des sites tiers.

Cette prestation n’étant pas dans le contrat initial, un devis complémentaire a été proposé.

clarification weTransfer et création de page interne

envoi de fichiers et format

La cliente a envoyé un PDF intitulé « créativité 1ère partie.pdf » contenant du texte. Pour la lisibilité, il avait été suggéré de fournir le même contenu en format Word afin de l’intégrer directement dans l’éditeur WordPress. À défaut, le PDF serait conservé.

création d’une nouvelle page

Il a été confirmé que le bouton « en savoir plus » pointerait désormais vers une page interne au site, et non vers un site externe. Cette page supplémentaire a été chiffrée à 50 € hors contrat initial.

conception d’une frise d’images en Divi

première version statique

Pour présenter une suite d’images en frise responsive, un module Code Divi a été fourni :

<style>
  .frise-full {
    width: 100vw;
    overflow: hidden;
    display: flex;
    scroll-snap-type: x mandatory;
  }
  .frise-full img {
    flex: 0 0 auto;
    height: 200px;
    object-fit: cover;
    margin-right: 5px;
    scroll-snap-align: start;
  }
</style>
<div class="frise-full">
  <img src="[URL_IMAGE_1]" alt="">
  <!-- autres URL d’images -->
</div>

Cette solution offrait un défilement manuel horizontal, mais la cliente souhaitait un défilement automatique.

animation automatique et continuité de la boucle

version initiale d’animation

Un code CSS et JavaScript a été proposé pour déclencher le scroll automatique sur les petits écrans :

@media (max-width: 768px) {
  .frise-track {
    animation: scroll-left 20s linear infinite;
  }
}
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

Un script détectait le débordement pour ajouter la classe d’animation.

boucle infinie et images non rognées

Suite aux retours, la piste d’images a été dupliquée pour assurer une boucle fluide. L’animation est désormais active sur tous les écrans, avec les images redimensionnées pour éviter le rognage :

<style>
  .frise-full { width: 100vw; overflow: hidden; }
  .frise-track { display: flex; animation: scroll 30s linear infinite; }
  .frise-track img {
    flex: 0 0 auto;
    max-height: 200px;
    object-fit: contain;
    margin-right: 5px;
  }
  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
</style>
<div class="frise-full">
  <div class="frise-track">
    <img src="[URL_IMAGE_1]" alt="">
    <!-- duplication complète des images -->
  </div>
</div>

Cette version répondait pleinement aux attentes : défilement automatique continu, images visibles en totalité et sans saut.

résolution et contact

Le projet a abouti après plusieurs itérations, alliant explications pédagogiques, ajustements techniques et écoute active. Pour toute aide complémentaire ou projet similaire, n’hésitez pas à nous contacter afin de bénéficier de notre expertise en développement WordPress et animation CSS.