« Peut-on garder exactement cette mise en page, mais sortir de Squarespace ? » Un cabinet d’architecture, lassé des limites de personnalisation et du coût mensuel de cette plateforme propriétaire, souhaitait migrer vers WordPress tout en conservant la structure visuelle de sa page d’accueil, pensée avec soin par un graphiste quelques années plus tôt.
Le thème de blocs choisi comme base était compatible avec l’éditeur de site, disponible depuis la sortie de WordPress 5.9 plus tôt dans l’année. La méthode retenue a consisté à décomposer la page Squarespace existante en sections indépendantes, puis à reconstruire chacune d’elles avec les blocs natifs disponibles, sans dépendre d’aucune extension de constructeur de pages.
Étape 1 : décomposer la page existante en sections
Une capture d’écran complète de la page Squarespace a permis d’identifier sept sections distinctes : un bandeau plein écran avec une photo de réalisation, une phrase d’accroche du cabinet, une grille de trois projets récents, une section « notre approche » en deux colonnes, une frise chronologique des réalisations, une citation d’un client et un bloc de contact final.
Étape 2 : recréer le gabarit de page d’accueil
Un fichier front-page.html a été créé dans le thème, assemblant ces sept sections avec les blocs Groupe, Colonnes et Image de couverture disponibles nativement, sans faire appel à un seul bloc tiers.
<!-- wp:cover {"url":"realisation-01.jpg","align":"full"} -->
<div class="wp-block-cover alignfull">
<div class="wp-block-cover__inner-container">
<!-- wp:heading {"level":1} -->
<h1>Cabinet Fictif Architecture</h1>
<!-- /wp:heading -->
</div>
</div>
<!-- /wp:cover -->
Étape 3 : reconstruire la frise chronologique sans extension
La frise chronologique, section la plus complexe visuellement, a été recréée à l’aide du bloc Colonnes combiné à des blocs Groupe imbriqués, chacun représentant une année de réalisation, sans recourir à un bloc de frise dédié qui n’existait pas nativement à ce stade.
Étape 4 : vérifier la fidélité section par section
Chaque section reconstruite a été comparée visuellement à la capture d’écran d’origine, en portant une attention particulière aux marges et aux proportions d’image, souvent différentes entre le moteur de rendu de Squarespace et celui de WordPress.
- Le bandeau plein écran a nécessité un ajustement de la hauteur minimale du bloc Image de couverture, non identique par défaut à l’original.
- La grille de projets a demandé de recalculer les proportions d’image pour respecter le même ratio que sur le site d’origine.
- La section de contact final a été simplifiée volontairement, l’ancien formulaire embarqué Squarespace n’ayant pas d’équivalent direct et devant être reconstruit séparément avec le formulaire natif de commentaires détourné en formulaire de contact simple.
Étape 5 : isoler l’en-tête et le pied de page en template parts
L’en-tête, identique sur toutes les pages du site Squarespace d’origine, a été extrait en un fichier header.html réutilisable, de même que le pied de page, tous deux gérés désormais comme des template parts partagés par l’ensemble des gabarits du nouveau site.
Ce que cette migration n’a pas traité
Le référencement du nouveau site, question distincte relevant d’une catégorie à part entière, n’a volontairement pas été abordé ici : redirections d’URL, conservation du maillage existant et suivi du positionnement après migration ont fait l’objet d’un chantier séparé, mené une fois la structure visuelle validée par le client.
Reconstruire fidèlement une mise en page existante avec des blocs natifs demande de la patience section par section, mais évite toute dépendance à un constructeur de pages supplémentaire sur le nouveau site.
En résumé
Pour ce cabinet d’architecture, sortir de Squarespace n’a pas signifié renoncer à la mise en page existante : une décomposition méthodique en sept sections, reconstruites une à une avec les blocs natifs de l’éditeur de site, a permis de conserver l’essentiel de l’identité visuelle d’origine, en isolant l’en-tête et le pied de page en template parts réutilisables pour la suite du site.
