Un fond asymétrique coupe le bord d'une section à travers la page en biais au lieu de la laisser à plat Il brise la pile habituelle de bandes horizontales, et l'œil suit la diagonale vers le bas dans la section suivante Les pages d'atterrissage et les pages d'accueil SaaS l'utilisent constamment.
Elementor n'a toujours pas d'“skew cette section” bascule, donc vous le faites avec quelques lignes de CSS. Trouble is, Elementor's own Custom CSS field is locked behind Pro. C'est pourquoi ce tutoriel utilise le gratuit Extension CSS personnalisée dans Master Addons(en), qui ajoute une boîte CSS à chaque élément sur Elementor gratuit.
Ce guide a été reconstruit pour le fonctionnement réel d'Elementor en 2026. la version originale de ce message a été écrite contre les sections et les colonnes intérieures, et les deux sont désormais héritées. Tout ce que ci-dessous utilise Conteneurs Flexbox, élément de mise en page par défaut d'Elementor depuis la 3.6 et la seule structure que vous obtenez sur une nouvelle page.
Ce dont vous avez besoin avant de commencer
- Sans élément (3.6 ou plus récent, donc les conteneurs sont allumés)
- Additions maîtres: installez-le gratuitement depuis WordPress.org: activez ensuite l'extension Custom CSS
- Un conteneur avec une couleur d'arrière-plan ou un jeu d'images. Ne sautez pas ça. Skew transforme la boîte, donc si la boîte n'a rien de visible dedans, vous ne verrez aucun changement Un conteneur transparent est la raison numéro un pour laquelle les gens pensent que cette astuce est cassée.
Vous n'aurez besoin d'Elementor Pro à aucun moment Si vous l'avez déjà, son champ CSS personnalisé natif se comporte de la même manière, alors collez le code à la place.
Comprendre le biais avant de coller quoi que ce soit
L'inclinaison est une transformation CSS. transform: skew(0deg, -10deg) incline l'élément le long de l'axe Y de dix degrés, transformant ses bords supérieur et inférieur en diagonales.
Ce qui fait trébucher les gens, c'est qu'une transformation s'applique à l'élément et tout ce qu'il contient. Hier un conteneur et vous biaisez son arrière-plan, bien sûr, mais vous biaisez également le titre, le bouton et l'image qui s'y trouve. Votre texte finit par s'incliner.
Donc vous contre-balayez Nichez un deuxième récipient à l'intérieur du premier et inclinez-le en arrière du même montant dans la direction opposée Le parent va à moins dix degrés, l'enfant va à plus dix, et ils annulent Fond coudé, contenu droit.
Deux conteneurs, deux règles, des valeurs opposées C'est tout.
Étape 1 : Construisez la structure du conteneur
Ouvrez votre page dans Elementor et déposez un Conteneur. Réglez sa largeur sur Pleine Largeur C'est celui extérieur, celui qui porte l'angle.
Maintenant, faites glisser un deuxième conteneur à l'intérieur du premier. Ce conteneur imbriqué contient le contenu réel : titre, texte, bouton, image, quelle que soit la section. Concevez-le comme vous le souhaitez.
Donc la structure est :
- Conteneur extérieur: couleur d'arrière-plan ou image, obtient le biais
- Conteneur intérieur: tout votre contenu, obtient le contre-skew
Maintenir une page plus ancienne encore construite sur les Sections et les Sections Intérieures ? la logique est identique Les biais d'éléments extérieurs, les uns-skews d'éléments intérieurs Pour tout ce qui est nouveau cependant, utilisez les Conteneurs Ils expédient beaucoup moins de DOM, ce qui s'additionne si vous vous souciez de Vitesse de la page de l'élémentateur.
Étape 2 : Ajoutez le biais CSS au conteneur extérieur
Sélectionnez le conteneur extérieur, allez au Avancé tab, et trouvez le MA personnalisé CSS boîte que Master Addons ajoute Collez ceci dans :
selector {
padding: 400px 0;
margin-top: -200px;
transform: skew(0deg, -10deg);
overflow: hidden;
}Voici ce que chaque ligne fait, pour que vous puissiez l'ajuster plutôt que de simplement espérer :
selectorest le raccourci d'Elementor pour “cet élément spécifique.” Master Addons le met à votre disposition, de sorte que la règle ne peut pas fuir sur d'autres conteneurs.padding: 400px 0donne au conteneur suffisamment d'espace vertical pour que les bords inclinés aillent quelque part, Plissez un court conteneur et il vous suffit de couper les coins.margin-top: -200pxtire le conteneur vers le haut dans celui au-dessus de lui de sorte que la diagonale se chevauche, au lieu de laisser un triangle blanc derrière. La moitié de la valeur de remplissage est un rapport de départ décent.transform: skew(0deg, -10deg)est l'angle lui-même Le négatif s'incline dans un sens, le positif dans l'autre.overflow: hiddenempêche les coins asymétriques de se déverser latéralement Laissez-le éteint et vous obtiendrez une barre de défilement horizontale, sur laquelle je reviendrai.
Une chose qui mérite d'être signalée : si vous avez également touché le Transformer contrôles dans le propre onglet Avancé d'Elementor, ils se battront avec ce CSS, puisque les deux écrivent dans le même transform la propriété et le dernier à charger gagnent Choisissez une place pour définir l'angle et laissez l'autre tranquille.
La version 2020 de ce didacticiel répertoriait quatre lignes préfixées par le fournisseur (-webkit-, -moz-, -ms-, -o-). Les supprimer. Non préfixé transform fonctionne dans tous les navigateurs depuis environ une décennie maintenant, et ces lignes supplémentaires rendent la boîte CSS plus difficile à lire.
Étape 3 : Contre-balayez le conteneur intérieur
À ce stade, votre contenu est incliné avec l'arrière-plan. Sélectionnez le récipient intérieur« Ouvrez son onglet Avancé et collez-le dans MA Custom CSS » :
selector {
transform: skew(0deg, 10deg);
}Même numéro, signe opposé. Conteneur extérieur à -10deg signifie conteneur intérieur à 10deg. Changez l'un sans changer l'autre et votre texte se situe sous un léger angle que les lecteurs remarquent même s'ils ne peuvent pas dire pourquoi.
Enregistrer et prévisualiser Vous devriez avoir un arrière-plan incliné avec du contenu droit posé dessus Si l'éditeur l'affiche toujours incliné, rechargez l'onglet de l'éditeur ; CSS personnalisé est parfois en retard dans l'iframe d'aperçu.
Étape 4 : Corrigez le débordement mobile (ne sautez pas ceci)
La plupart des didacticiels s'arrêtent à l'étape 3, et c'est pourquoi les sections asymétriques sont retirées des sites en direct une semaine plus tard.
Hésitez un élément pleine largeur et ses coins dépassent le bord de la fenêtre d'affichage Sur le bureau, personne ne le remarque Sur un téléphone, ce surplomb vous donne une barre de défilement horizontale et la page commence à glisser latéralement sous le pouce de l'utilisateur Il se lit comme cassé, car il est.
Deux choses l'empêchent :
- Gardez
overflow: hiddensur le conteneur biaisé, comme dans le code ci-dessus. - Réduisez l'angle sur les petits écrans. Une inclinaison de 10 degrés qui semble nette sur un moniteur de 1440 px se transforme en une diagonale dure sur un téléphone de 375 px, et elle ronge votre titre.
Ajoutez ceci sous le code dans la case CSS du conteneur extérieur :
@media (max-width: 767px) {
selector {
padding: 200px 0;
margin-top: -100px;
transform: skew(0deg, -4deg);
}
}Et l'inversion correspondante dans le conteneur intérieur :
@media (max-width: 767px) {
selector {
transform: skew(0deg, 4deg);
}
}Maintenant, l'effet baisse au lieu de détruire la mise en page Testez-le sur un vrai téléphone, pas seulement l'aperçu réactif de l'éditeur, puisque le volet d'aperçu ne reproduit pas toujours le débordement Si vous exécutez des points d'arrêt personnalisés plutôt que les valeurs par défaut d'Elementor, le Extension personnalisée des points d'arrêt vous permet de faire correspondre ces requêtes multimédias à la largeur réelle de votre appareil.
L'alternative moderne : clip-path, sans contre-inclinaison du tout
Le biais asymétrique fonctionne, et c'est ce qu'enseignait le tutoriel original Il existe cependant une méthode plus propre maintenant, et pour une nouvelle construction, c'est généralement celle que je recherche.
clip-path découpe une forme hors de l'élément plutôt que de la transformer Puisqu'il se clipse au lieu de tourner, le contenu à l'intérieur ne bouge jamais, donc il n'y a pas de conteneur imbriqué et pas de deuxième valeur à garder synchronisé.
Un conteneur, une règle :
selector {
padding: 160px 0;
clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}Ces quatre coordonnées sont les coins, dans le sens des aiguilles d’une montre en haut à gauche. Poussez les pourcentages pour changer l’angle : augmentez le 6% pour une coupe plus raide, déposez-la vers 0 pour quelque chose de plus subtil Vous pouvez aussi incliner seulement le bord inférieur et laisser le haut plat, ce qui est le motif habituel pour un héros.
Quelle méthode utiliser ?
| Situation | Utilisation | Pourquoi |
|---|---|---|
| Nouvelle page, je veux un bord incliné | clip-path | Un conteneur, une règle, le contenu n'est jamais touché |
| Vous voulez le fond image lui-même à incliner | skew | clip-path coupe la boîte, il ne fait pas tourner ce qu'il y a à l'intérieur |
| Un seul bord doit être incliné | clip-path | Skew incline toujours les deux bords ensemble |
| Maintenir une page plus ancienne déjà construite avec skew | skew | Aucune raison de reconstruire quelque chose qui fonctionne |
Chaque navigateur actuel gère les deux. Vérifiez le tables de support de chemin de clip sur MDN si vous êtes coincé à soutenir quelque chose d'inhabituel.
Sautez entièrement le CSS : importez le modèle prêt à l'emploi
Vous ne voulez pas toucher au code ? la disposition en arrière-plan asymétrique est livrée comme modèle Modifier n'importe quelle page avec Elementor, cliquez sur le Bibliothèque de modèles Master Addons icône à côté du bouton d'élément d'ajout, et recherchez le modèle d'arrière-plan asymétrique Importez-le, puis échangez votre propre texte et vos propres couleurs.
Même technique, déjà câblée Le Bibliothèque de modèles Master Addons a des pages prêtes, des sections, des en-têtes et des pieds de page construits de la même manière, et le Kits de modèles allez plus loin avec des conceptions de sites complètes de plusieurs pages.
Où les arrière-plans asymétriques fonctionnent réellement
Il convient de dire, parce que cet effet est surutilisé : les sections inclinées gagnent leur garde quand elles marquent une transition Héros en fonctionnalités, fonctionnalités en prix, tarification en témoignages Ils donnent un rythme à une longue page.
Ils cessent de fonctionner lorsque chaque section est inclinée Plus rien ne se lit comme une transition et la page se sent juste occupée Sur une longue page de destination, deux ou trois bords inclinés suffisent généralement.
Si vous voulez plus de profondeur sans la géométrie, d'autres effets se superposent bien. Arrière-plans dégradés animés ajoutez un mouvement de couleur lent, particules ajouter une couche interactive, et verriermorphisme donne aux cartes un look givré qui se pose bien contre un panneau biaisé Le Transforme l'extension met également des commandes de rotation, d'échelle et d'inclinaison dans l'interface utilisateur de l'élémenteur, si vous préférez faire glisser un curseur plutôt que de taper des degrés.
Dépannage
- Rien n'a changé. Le conteneur n'a pas d'arrière-plan Définissez une couleur ou une image et regardez à nouveau.
- Toute la page défile de côté. Ajouter
overflow: hiddenau conteneur biaisé, puis vérifiez que son parent ne déborde pas aussi. - Le texte est toujours incliné. Le contre-balai est sur le mauvais élément, ou le signe est faux Si le récipient extérieur est négatif, celui intérieur doit être positif.
- Écart blanc au-dessus de la section. Augmentez le négatif
margin-topainsi, l’angle s’enfonce davantage dans la section ci-dessus. - L'angle saute de manière imprévisible. Les commandes Transform intégrées d'Elementor sont définies sur le même élément et remplacent votre CSS. Effacez-les.
- Pas de boîte MA Custom CSS sur l'onglet Avancé. L'extension est éteinte Master Addons, puis Settings, puis Extensions, et activez-la.
Questions fréquemment posées
Puis-je créer un arrière-plan asymétrique en Elementor gratuit ?
Oui. Elementor free n'a pas de champ CSS personnalisé, mais l'extension CSS personnalisée Master Addons en ajoute un à chaque élément, et c'est gratuit Collez la transformation asymétrique dans la boîte CSS personnalisée MA de l'onglet Avancé du conteneur Aucune licence Elementor Pro nécessaire.
Pourquoi mon texte est-il incliné après avoir biaisé la section ?
Une transformée CSS s'applique à l'élément et à tous ses enfants, de sorte que le contenu s'incline avec l'arrière-plan Nichez un conteneur à l'intérieur et donnez-lui la valeur d'inclinaison opposée. Conteneur extérieur à -10deg, intérieur à 10deg1, et les deux s'annulent.
Un arrière-plan asymétrique nuit-il à la vitesse de la page ?
Non, les deux transform et clip-path les propriétés accélérées par GPU sont-elles gérées par le compositeur du navigateur. Ils n'ajoutent aucun script ni aucune requête HTTP supplémentaire. Quelques lignes de CSS coûtent bien moins cher qu'une image de forme inclinée.
Comment changer l'angle de l'inclinaison ?
Modifier la valeur du degré. skew(0deg, -10deg) est une inclinaison modérée, -5deg est subtil, -15deg est dramatique Modifiez la valeur du conteneur extérieur et la contre-valeur du conteneur intérieur ensemble, en les gardant égaux et opposés.
Ai-je encore besoin de préfixes de fournisseurs comme - webkit-transform ?
Non non préfixé transform fonctionne dans tous les principaux navigateurs depuis des années Les lignes préfixées des tutoriels plus anciens, y compris la version 2020 de celui-ci, peuvent être supprimées en toute sécurité.
Envelopper
Créer un arrière-plan asymétrique dans Elementor se résume à deux règles dans deux cases CSS : biaiser le conteneur extérieur, contre-incliner celui intérieur Ajouter overflow: hidden, assouplissez l'angle sur mobile, et il tiendra le coup sur les appareils réels plutôt que seulement dans l'éditeur Sur une nouvelle build, clip-path vous donne le même look avec la moitié de la configuration.
Tout fonctionne sur Elementor gratuit, depuis Additions maîtres c'est ce qui met la boîte CSS personnalisée là pour commencer Si vous voulez plus tard le reste de la boîte à outils (Theme Builder, Popup Builder, l'ensemble complet d'extensions), c'est ce qui Pro couvertures, mais rien dans ce tutoriel n'en a besoin.
Lecture connexe: Effets d'animation d'élémenteurs, comment ajouter des effets flottants dans Elementor, et comment créer un en-tête collant dans Elementor.
