Le contenu fractionné est un type de page web très courant.typographiqueForme, généralement d'un c?té des images affichées, de l'autre c?té du contenu textuel affiché, la structure de la page est claire, l'accent est mis sur l'aspect visuel.
![Image [1]-Tutoriel Kadence Blocks : création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331145116966-image.png)
Bien que l'option par défaut WordPress L'éditeur de blocs ne prend pas en charge cette disposition, mais l'utilisation de la fonction Kadence Blocks Pro pour obtenir rapidement cet effet.
![Image [2]-Tutoriel Kadence Blocks : Création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331112434496-image.png)
Insérer et définir le bloc de fractionnement du contenu
- Ouvrez la page d'édition et ajoutez Fractionnement du contenu blocs
![Image [3]-Tutoriel Kadence Blocks : Création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331112507977-image.png)
- Définir les principaux paramètres, notamment l'ordre des graphiques, la largeur du contenu, etc.
![Image [4]-Tutoriel Kadence Blocks : Création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331112514496-image.png)
- Téléchargement ou sélection d'images dans la zone d'image
![Image [5]-Tutoriel Kadence Blocks : Création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331112538653-image.png)
- Ajouter un titre et un corps à une zone de texte
![Image [6]-Tutoriel Kadence Blocks : Création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331112603925-image.png)
![Image [7]-Tutoriel Kadence Blocks : Création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331112712754-image.png)
- Définition de la couleur d'arrière-plan des images et des sections de texte
![Image [8]-Tutoriel Kadence Blocks : Créer des colonnes graphiques avec la mise en page superposée](http://gqxi.cn/wp-content/uploads/2025/03/20250331112721529-image.png)
- Ajuster l'alignement vertical du contenu dans les blocs (haut, centre, bas)
![Image [9]-Tutoriel Kadence Blocks : Créer des colonnes graphiques avec une mise en page superposée](http://gqxi.cn/wp-content/uploads/2025/03/20250331112744202-image.png)
- Définit l'alignement général de l'ensemble du bloc de contenu fractionné (gauche, centre, droite).
![Image [10]-Tutoriel Kadence Blocks : Création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331112816563-image.png)
- Sauvegarder et prévisualiser la page d'accueil
![Image [11]-Tutoriel Kadence Blocks : Création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331112826526-image.png)
Réglage de l'effet de superposition (superposition graphique)
Le bloc Split Content permet de faire se chevaucher des sections graphiques et textuelles afin de créer un aspect plus dynamique.typographiqueForme.
![Image [12]-Tutoriel Kadence Blocks : Création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331112904580-image.png)
Les étapes sont les suivantes :
- Insérer un Disposition des lignes Conteneur, mis en page sur une seule colonne
- Ajout d'un bloc de contenu fractionné à une ligne
![Image [13]-Tutoriel Kadence Blocks : Création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331113000786-image.png)
- Définissez la couleur d'arrière-plan de la rangée comme vous le souhaitez, ou définissez-la en pleine largeur.
![Image [14]-Tutoriel Kadence Blocks : création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331113016447-image.png)
- Ajustement de la gauche et de la droite dans les paramètres de contenu divisé Marges négatives (marges négatives)Pour que la partie texte se superpose à l'image
![Image [15]-Tutoriel Kadence Blocks : création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331113055160-image.png)
- Ajouter des ombres au contenu si nécessaire pour améliorer la hiérarchie visuelle
![Image [16]-Tutoriel Kadence Blocks : création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331113104565-image.png)
- Ajuster l'espace occupé par le contenu en réduisant la hauteur minimale (Min Height).
![Image [17]-Tutoriel Kadence Blocks : création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331113111132-image.png)
- Ajuster les marges et l'espacement dans les différentes vues de l'appareil pour assurer l'équilibre visuel
![Image [18]-Tutoriel Kadence Blocks : création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331113216657-image.png)
réactifParamètres d'optimisation
Le bloc "Split Content" prend en charge un style indépendant pour les téléphones mobiles et les tablettes :
- Basculer vers le mobile en bas de l'éditeurvueDéfinition des marges intérieures et extérieures appropriées
![Image [19]-Tutoriel Kadence Blocks : création de colonnes graphiques et de dispositions de superposition](http://gqxi.cn/wp-content/uploads/2025/03/20250331113422541-image.png)
- Passer à l'affichage à plat pour affiner la mise en page du contenu et les espaces blancs
![Image [20]-Tutoriel Kadence Blocks : création de colonnes graphiques et de dispositions superposées](http://gqxi.cn/wp-content/uploads/2025/03/20250331113357494-image.png)
- Vérifier la présentation sur toutes les tailles d'appareils et procéder aux ajustements nécessaires
résumés
Le bloc "Split Content" vous permet de créer rapidement des dispositions de colonnes graphiques communes sans complexité.ouverture (jargon des échecs)Fonctionnement. Idéal pour présenter des produits, des équipes et du contenu promotionnel. Combiné à la disposition en rangées et aux marges négatives, il est facile d'ajouter des couches et des variations à vos pages avec des graphiques et du texte qui se chevauchent.
Lien vers cet article :http://gqxi.cn/fr/48315L'article est protégé par le droit d'auteur et doit être reproduit avec mention.
Pas de commentaires