Il est tentant de déposer une page de destination entière et de cliquer sur convertir. Pour une page longue, travailler section par section est globalement plus rapide et bien plus facile à vérifier.
Pourquoi les découpes sont gagnantes
- Une unité plus petite est facile à inspecter d’un coup d’œil. Vous pouvez voir immédiatement si une section héros a été convertie correctement ; vous ne pouvez pas le vérifier pour quarante sections à la fois.
- Vous évitez d’importer par accident l’en-tête du site, le pied de page et la bannière de cookies.
- Si une section est mal convertie, vous corrigez cette source et la relancez seule au lieu de tout refaire.
- L’imbrication reste moins profonde, car vous ne transportez pas les conteneurs extérieurs de la page.
Deux façons de découper
Le sélecteur visuel
Chargez la page, puis utilisez le sélecteur visuel pour survoler l’aperçu rendu et cliquer sur le bloc souhaité. Il récupère le balisage de cet élément — et, surtout, il apporte la feuille de style de la page avec lui, de sorte qu’un bloc dont le style repose sur un fichier CSS à classes se convertit tout de même avec ses styles intacts.
La racine de copie
Convertissez toute la page une fois, ouvrez la carte Structure, puis cliquez sur l’icône cible sur la ligne souhaitée. Cette ligne devient la racine de copie et seule sa sous-arborescence est exportée — les conteneurs extérieurs sont supprimés. Vous pouvez également exclure des lignes individuelles à l’aide de l’icône en forme de croix.
Un flux de travail qui passe à l’échelle
- Convertissez et collez d’abord la section héros. Soignez-la — espacements, polices, états de survol des boutons.
- Descendez la page une section à la fois, en collant chacune sous la précédente.
- Après toutes les deux ou trois sections, parcourez les trois vues d’appareil. Détecter tôt un problème responsive coûte bien moins cher qu’à la fin.
- Enregistrez au fur et à mesure tout ce que vous réutiliserez — une rangée de fonctionnalités, un bloc de témoignage — dans la bibliothèque de modèles Elementor.
Gardez les sections séparées
Résistez à la tentation de tout fusionner dans un conteneur géant. Garder un conteneur de niveau supérieur par section correspond à la manière dont les pages Elementor sont normalement construites, rend la réorganisation triviale et vous permet de définir les arrière-plans et les espacements au niveau de la section sans vous battre avec l’arborescence.
Pourquoi le sélecteur emporte la feuille de style avec lui
Il y a ici une subtilité qui détermine si le découpage fonctionne tout court. Sur une page dont le style repose sur du CSS à classes dans l’en-tête du document, le balisage propre d’un élément ne contient presque aucune information de style — <section class="hero"> ne vous dit rien de l’apparence de .hero.
Ainsi, lorsque vous confirmez une sélection, le sélecteur ne renvoie pas l’élément seul. Il ajoute au début les blocs de style de la page au balisage extrait, de sorte que la découpe arrive autonome et se convertit avec son apparence intacte. Ses propres styles de surbrillance sont balisés et exclus, de sorte qu’aucun élément d’interface du sélecteur ne s’immisce dans votre sortie.
C’est pourquoi la sélection d’une section depuis une page Tailwind ou Bootstrap fonctionne, alors que copier le outerHTML de cette section depuis les outils de développement puis le coller donnerait un balisage sans style. Si vous extrayez manuellement plutôt qu’avec le sélecteur, copiez aussi les blocs de style — sinon, vous convertissez un squelette.
Quelle méthode de découpage pour quelle situation
Les deux voies ne sont pas interchangeables, et choisir la mauvaise fait perdre du temps :
- Utilisez le sélecteur lorsque vous disposez de toute la page et n’en voulez qu’une partie. Il est visuel, il règle pour vous le problème de feuille de style et vous ne chargez jamais le reste de la page dans le convertisseur. Idéal pour extraire une section héros d’une référence au style d’un concurrent ou d’un grand modèle.
- Utilisez la racine de copie lorsque vous voulez plusieurs parties d’une même page. Convertissez une fois, puis réexportez différentes sous-arborescences sans relancer l’analyse à chaque fois. Idéal pour parcourir méthodiquement une page que vous comptez reconstruire entièrement.
Surveillez l’imbrication au fur et à mesure
Le découpage a un effet secondaire que l’on remarque tard : chaque découpe arrive en portant autant de niveaux de conteneurs qu’il y en avait au-dessus d’elle dans la source. Collez quatre découpes et vous pouvez vous retrouver avec quatre sections à quatre profondeurs différentes, ce qui rend la page finale incohérente à modifier même si elle paraît correcte.
La carte Structure affiche la profondeur d’imbrication maximale pour chaque conversion. Jetez-y un coup d’œil pour chaque découpe et visez la même profondeur faible à chaque fois — généralement en plaçant la racine de copie un ou deux niveaux plus bas plutôt qu’en acceptant le conteneur le plus externe. Ici, la cohérence entre les sections compte plus que le chiffre absolu.
Remarque sur les en-têtes, pieds de page et bannières de cookies
La conversion d’une page entière récupère tout ce qui se trouve dans le corps, ce qui, sur une page réelle, signifie l’en-tête du site, le pied de page, une barre de cookies et éventuellement un widget de chat. Rien de tout cela n’a sa place dans votre section, et le supprimer ensuite dans Elementor est plus lent que de ne jamais l’importer.
C’est l’argument pratique le plus fort en faveur du découpage. Cela évite aussi une mauvaise surprise précise : un en-tête importé en position fixe est rétrogradé en position absolue pendant la conversion — délibérément, pour qu’il ne puisse pas recouvrir tout votre site —, ce qui laisse un bloc en forme d’en-tête flotter au-dessus de votre section jusqu’à ce que vous le trouviez et le supprimiez.
Quand convertir toute la page est acceptable
Les pages courtes — une section héros, deux ou trois sections et un appel à l’action en pied de page — se convertissent proprement en un seul passage. L’approche section par section est rentable sur les longues pages marketing et sur toute page dont le balisage n’a pas été écrit en pensant à la conversion.
Une règle raisonnable : si vous pouvez voir toute la page en trois hauteurs de défilement et qu’elle n’a pas d’habillage de site, convertissez-la entière. Tout ce qui est plus long, ou tout ce qui a été capturé depuis un site réel plutôt que rédigé comme un bloc autonome, est plus rapide en découpes.