{"id":351005,"date":"2022-03-30T06:23:22","date_gmt":"2022-03-30T06:23:22","guid":{"rendered":"https:\/\/www.lafactory.online\/?p=351005"},"modified":"2022-03-30T06:23:27","modified_gmt":"2022-03-30T06:23:27","slug":"comment-limiter-les-effets-de-defilement-aux-conteneurs-de-colonne-avec-divi","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-limiter-les-effets-de-defilement-aux-conteneurs-de-colonne-avec-divi\/","title":{"rendered":"Comment limiter les effets de d\u00e9filement aux conteneurs de colonne avec Divi"},"content":{"rendered":"<div id=\"post-125624\">\n<p>Les effets de d\u00e9filement de Divi permettent d&rsquo;apporter une toute nouvelle dimension au design que vous cr\u00e9ez. Avec chaque nouvelle fonctionnalit\u00e9 Divi, nous essayons \u00e9galement de partager des didacticiels qui vous aideront \u00e0 voir votre conception Web sous un angle diff\u00e9rent. Dans ce tutoriel, nous vous montrerons comment limiter les effets de d\u00e9filement des modules aux conteneurs de colonnes. Cela signifie que, quel que soit le type d&rsquo;effet de d\u00e9filement que vous ajoutez, l&rsquo;effet de mouvement du module ne d\u00e9passera pas le conteneur de la colonne. Cela permet d&rsquo;obtenir un beau design encadr\u00e9 et interactif. Nous recr\u00e9erons un exemple \u00e0 partir de z\u00e9ro et vous pourrez \u00e9galement t\u00e9l\u00e9charger le fichier JSON gratuitement !<\/p>\n<p>C&rsquo;est parti.<\/p>\n<h2>Pr\u00e9visualisation<\/h2>\n<p>Avant de nous plonger dans le tutoriel, jetons un coup d&rsquo;\u0153il rapide au r\u00e9sultat sur diff\u00e9rentes tailles d&rsquo;\u00e9cran.<\/p>\n<h3>Bureau<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124947 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/divi-limit-container-desktop-preview.gif\" alt=\"column containers\" width=\"1000\" height=\"603\" \/><\/p>\n<h3>Mobile<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124948 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/divi-limit-container-mobile-preview.gif\" alt=\"column containers\" width=\"440\" height=\"848\" \/><\/p>\n<h2>T\u00e9l\u00e9chargez la mise en page gratuite Limit Scroll Effects GRATUITEMENT<\/h2>\n<p>Pour mettre la main sur la mise en page gratuite des effets de d\u00e9filement de limite, vous devrez d&rsquo;abord la t\u00e9l\u00e9charger en utilisant le bouton ci-dessous. Pour avoir acc\u00e8s au t\u00e9l\u00e9chargement, vous devez vous inscrire \u00e0 notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonn\u00e9, vous recevrez encore plus d&rsquo;avantages de Divi et un pack de mises en page Divi gratuit chaque lundi ! Si vous \u00eates d\u00e9j\u00e0 sur la liste, il suffit d&rsquo;entrer votre adresse e-mail ci-dessous et de cliquer sur t\u00e9l\u00e9charger. Vous ne serez pas \u00ab\u00a0r\u00e9inscrit\u00a0\u00bb et ne recevrez pas d&rsquo;e-mails suppl\u00e9mentaires.<\/p>\n<div class=\"et_bloom_locked_container et_bloom_optin_1\" data-page_id=\"125624\" data-optin_id=\"optin_1\" data-list_id=\"mailchimp_c886a2fc0a\" data-current_optin_id=\"optin_1\">\n<div class=\"et_bloom_locked_form\">\n<div class=\"et_bloom_inline_form et_bloom_optin et_bloom_make_form_visible et_bloom_optin_1\" style=\"display: none;\">\n<div class=\"et_bloom_form_container  with_edge carrot_edge et_bloom_border_solid et_bloom_rounded et_bloom_form_text_light et_bloom_form_bottom et_bloom_inline_1_field\">\n<div class=\"et_bloom_form_container_wrapper clearfix\">\n<div class=\"et_bloom_form_content et_bloom_1_field et_bloom_bottom_inline\">\n<h2 class=\"et_bloom_success_message\">Vous vous \u00eates inscrit avec succ\u00e8s. Veuillez v\u00e9rifier votre adresse e-mail pour confirmer votre abonnement et avoir acc\u00e8s aux packs hebdomadaires gratuits de mises en page Divi !<\/h2>\n<\/div>\n<\/div>\n<p><span class=\"et_bloom_close_button\">\u00a0<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2>Commen\u00e7ons \u00e0 recr\u00e9er !<\/h2>\n<p><iframe loading=\"lazy\" title=\"How to Limit Scroll Effects to Column Containers with Divi\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/BYR8rBqOE-A?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><a class=\"button primary-button inline-button accent-red\" href=\"https:\/\/www.youtube.com\/c\/elegantthemes?sub_confirmation=1\">S&rsquo;abonner \u00e0 notre cha\u00eene Youtube<\/a><\/p>\n<h3>Ajouter une nouvelle section r\u00e9guli\u00e8re<\/h3>\n<p>Commencez par ajouter une nouvelle section r\u00e9guli\u00e8re \u00e0 la page sur laquelle vous travaillez.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124949 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/alstc1.jpg\" alt=\"column containers\" width=\"880\" height=\"611\" \/><\/p>\n<h3>Ajouter une nouvelle rang\u00e9e<\/h3>\n<h4>Structure de colonnes<\/h4>\n<p>Continuez en ajoutant une nouvelle ligne \u00e0 la section en utilisant la structure de colonne suivante :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124950 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/alstc2.jpg\" alt=\"column containers\" width=\"880\" height=\"614\" \/><\/p>\n<h4>Dimensionnement<\/h4>\n<p>Sans ajouter de modules \u00e0 la ligne, ouvrez les param\u00e8tres de la ligne et modifiez les param\u00e8tres de dimensionnement en cons\u00e9quence :<\/p>\n<ul>\n<li>Utiliser une largeur de goutti\u00e8re personnalis\u00e9e : Oui<\/li>\n<li>Largeur de la goutti\u00e8re : 1<\/li>\n<li>\u00c9galiser les hauteurs des colonnes : Oui<\/li>\n<li>Largeur : 90<\/li>\n<li>Largeur maximale : 1580px<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124951 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/alstc3.jpg\" alt=\"column containers\" width=\"880\" height=\"775\" \/><\/p>\n<h3>Param\u00e8tres de la colonne 1<\/h3>\n<h4>Image d&rsquo;arri\u00e8re-plan<\/h4>\n<p>Ensuite, ouvrez les param\u00e8tres de la colonne 1 et t\u00e9l\u00e9chargez l&rsquo;image &lsquo;divi-column-background&rsquo; que vous trouverez dans le dossier de t\u00e9l\u00e9chargement au d\u00e9but de ce tutoriel.<\/p>\n<ul>\n<li>Taille de l&rsquo;image d&rsquo;arri\u00e8re-plan : Couverture<\/li>\n<li>Position de l&rsquo;image d&rsquo;arri\u00e8re-plan : Centre<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124952 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/alstc4.jpg\" alt=\"column containers\" width=\"880\" height=\"860\" \/><\/p>\n<h4>Espacement<\/h4>\n<p>Passez aux param\u00e8tres d&rsquo;espacement et ajoutez des renforts en haut et en bas.<\/p>\n<ul>\n<li>Rembourrage sup\u00e9rieur : 100px<\/li>\n<li>Rembourrage inf\u00e9rieur : 100px<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124953 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/alstc5.jpg\" alt=\"column containers\" width=\"880\" height=\"855\" \/><\/p>\n<h4>Bordure<\/h4>\n<p>Ajoutez \u00e9galement des coins arrondis.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124954 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/alstc6.jpg\" alt=\"column containers\" width=\"880\" height=\"863\" \/><\/p>\n<h4>Ombre port\u00e9e<\/h4>\n<p>Nous utiliserons \u00e9galement une ombre port\u00e9e subtile.<\/p>\n<ul>\n<li>Position verticale de l&rsquo;ombre de la bo\u00eete : 51px<\/li>\n<li>Intensit\u00e9 du flou de l&rsquo;ombre port\u00e9e : 46px<\/li>\n<li>Couleur de l&rsquo;ombre : rgba(0,0,0,0,0.08)<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124955 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/alstc7.jpg\" alt=\"column containers\" width=\"880\" height=\"815\" \/><\/p>\n<h4>D\u00e9bordements<\/h4>\n<p>Nous allons terminer la configuration des colonnes en r\u00e9glant les d\u00e9bordements sur cach\u00e9. C&rsquo;est une partie cruciale de ce tutoriel. En r\u00e9glant les d\u00e9bordements sur hidden, vous vous assurez qu&rsquo;aucun module \u00e0 l&rsquo;int\u00e9rieur du conteneur de la colonne ne les d\u00e9passe.<\/p>\n<ul>\n<li>D\u00e9bordement horizontal : Cach\u00e9<\/li>\n<li>D\u00e9bordement vertical : Cach\u00e9<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124956 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/alstc8.jpg\" alt=\"column containers\" width=\"880\" height=\"799\" \/><\/p>\n<h3>Ajouter le module de texte #1 \u00e0 la colonne 1<\/h3>\n<h4>Ajouter le contenu H3<\/h4>\n<p>Il est temps d&rsquo;ajouter des modules, en commen\u00e7ant par un premier module de texte dans la colonne 1. Ajoutez le contenu H3 de votre choix.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124957 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/alstc9.jpg\" alt=\"column containers\" width=\"880\" height=\"772\" \/><\/p>\n<h4>Param\u00e8tres du texte H3<\/h4>\n<p>Passez \u00e0 l&rsquo;onglet Conception et modifiez les param\u00e8tres du texte H3 en cons\u00e9quence :<\/p>\n<ul>\n<li>Titre 3 Police : Poppins<\/li>\n<li>Poids de la police de l&rsquo;en-t\u00eate 3 : lourd<\/li>\n<li>Couleur du texte de l&rsquo;en-t\u00eate 3 : rgba(0,0,0,0,0.15)<\/li>\n<li>Taille du texte Heading 3 : 200px (Desktop), 150px (Tablet), 100px (Phone)<\/li>\n<li>Espacement des lettres de l&rsquo;ent\u00eate 3 : -12px (Desktop), -10px (Tablet), -7px (Phone)<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124958 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/alstc10.jpg\" alt=\"column containers\" width=\"880\" height=\"950\" \/><\/p>\n<h4>Espacement<\/h4>\n<p>Pour augmenter la largeur de notre module, nous allons ajouter une marge n\u00e9gative \u00e0 gauche et \u00e0 droite aux param\u00e8tres d&rsquo;espacement.<\/p>\n<ul>\n<li>Marge gauche : -50<\/li>\n<li>Marge de droite : -50<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124959 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/alstc11.jpg\" alt=\"column containers\" width=\"880\" height=\"906\" \/><\/p>\n<h4>Mouvement horizontal<\/h4>\n<p>Nous allons compl\u00e9ter les param\u00e8tres du module en ajoutant un mouvement horizontal aux param\u00e8tres de l&rsquo;effet de d\u00e9filement. N&rsquo;h\u00e9sitez pas \u00e0 utiliser tout autre type d&rsquo;effet de d\u00e9filement ici, quel que soit votre choix, il ne d\u00e9passera pas le conteneur de la colonne car nous avons masqu\u00e9 les d\u00e9bordements de la colonne dans l&rsquo;une des \u00e9tapes pr\u00e9c\u00e9dentes de ce tutoriel.<\/p>\n<ul>\n<li>Activer le mouvement horizontal : Oui<\/li>\n<li>D\u00e9calage de d\u00e9part : 5 (\u00e0 45 %)<\/li>\n<li>D\u00e9calage moyen : 0 (\u00e0 75 %)<\/li>\n<li>D\u00e9calage final : -4<\/li>\n<li>D\u00e9clenchement de l&rsquo;effet de mouvement : Milieu de l&rsquo;\u00e9l\u00e9ment<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124960 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/alstc12.jpg\" alt=\"column containers\" width=\"880\" height=\"912\" \/><\/p>\n<h3>Ajouter le module de texte n\u00b02 \u00e0 la colonne 1<\/h3>\n<h4>Ajouter du contenu<\/h4>\n<p>Passons au module suivant, qui est un autre module de texte. Ajoutez un contenu de description de votre choix.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124961 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/alstc13.jpg\" alt=\"column containers\" width=\"880\" height=\"949\" \/><\/p>\n<h4>Param\u00e8tres du texte<\/h4>\n<p>Passez \u00e0 l&rsquo;onglet Conception et modifiez les param\u00e8tres du texte en cons\u00e9quence :<\/p>\n<ul>\n<li>Police du texte : Open Sans<\/li>\n<li>Couleur du texte : #969696<\/li>\n<li>Taille du texte : 18px (Desktop), 16px (Tablet), 14px (Phone)<\/li>\n<li>Hauteur de la ligne de texte : 2.4em<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124962 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/alstc14.jpg\" alt=\"column containers\" width=\"880\" height=\"936\" \/><\/p>\n<h4>Espacement<\/h4>\n<p>Compl\u00e9tez les param\u00e8tres du module en ajustant les valeurs de marge pour les diff\u00e9rentes tailles d&rsquo;\u00e9cran.<\/p>\n<ul>\n<li>Marge sup\u00e9rieure : 100px (ordinateur de bureau), 60px (tablette), 50px (t\u00e9l\u00e9phone)<\/li>\n<li>Marge inf\u00e9rieure : 200px (ordinateur de bureau), 180px (tablette), 100px (t\u00e9l\u00e9phone)<\/li>\n<li>Marge gauche : 100px (ordinateur de bureau), 50px (tablette et t\u00e9l\u00e9phone)<\/li>\n<li>Marge de droite : 100px (ordinateur de bureau), 50px (tablette et t\u00e9l\u00e9phone)<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124963 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/alstc15.jpg\" alt=\"column containers\" width=\"880\" height=\"962\" \/><\/p>\n<h3>Ajouter le module de boutons \u00e0 la colonne 1<\/h3>\n<h4>Ajouter une copie<\/h4>\n<p>Le prochain et dernier module dont nous avons besoin dans la colonne 1 est un module de bouton. Entrez une copie de votre choix.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124964 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/blstc1.jpg\" alt=\"column containers\" width=\"880\" height=\"877\" \/><\/p>\n<h4>Param\u00e8tres des boutons<\/h4>\n<p>Modifiez les param\u00e8tres des boutons du module comme suit :<\/p>\n<ul>\n<li>Utiliser des styles personnalis\u00e9s pour les boutons : Oui<\/li>\n<li>Taille du texte du bouton : 24px (Desktop), 20px (Tablet), 18px (Phone)<\/li>\n<li>Couleur du texte du bouton : #000000<\/li>\n<li>Couleur du d\u00e9grad\u00e9 1 : #f2f2f2<\/li>\n<li>Couleur du d\u00e9grad\u00e9 2 : #ffffff<\/li>\n<li>Type de d\u00e9grad\u00e9 : Lin\u00e9aire<\/li>\n<li>Direction du d\u00e9grad\u00e9 : 270deg<\/li>\n<li>Position de d\u00e9part : 50%<\/li>\n<li>Position de fin : 50%<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124965 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/blstc2.jpg\" alt=\"column containers\" width=\"880\" height=\"866\" \/><\/p>\n<ul>\n<li>Largeur de la bordure du bouton : 0px<\/li>\n<li>Rayon de la bordure du bouton : 0px<\/li>\n<li>Espacement des lettres du bouton : -1px<\/li>\n<li>Police de caract\u00e8res du bouton : Poppins<\/li>\n<li>Poids de la police du bouton : Medium<\/li>\n<li>Afficher l&rsquo;ic\u00f4ne du bouton : Oui<\/li>\n<li>Placement de l&rsquo;ic\u00f4ne du bouton : Gauche<\/li>\n<li>Afficher l&rsquo;ic\u00f4ne au survol du bouton uniquement : Non<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124966 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/blstc3.jpg\" alt=\"column containers\" width=\"880\" height=\"888\" \/><\/p>\n<h4>Espacement<\/h4>\n<p>Ensuite, ajoutez des valeurs d&rsquo;espacement personnalis\u00e9es.<\/p>\n<ul>\n<li>Marge inf\u00e9rieure : 50px<\/li>\n<li>Marge sup\u00e9rieure : 50px<\/li>\n<li>Rembourrage inf\u00e9rieur : 50px<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124967 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/blstc4.jpg\" alt=\"column containers\" width=\"880\" height=\"946\" \/><\/p>\n<h4>Positionner<\/h4>\n<p>Et terminez les r\u00e9glages du module en repositionnant le module Bouton.<\/p>\n<ul>\n<li>Position : Absolue<\/li>\n<li>Emplacement : En bas \u00e0 gauche<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124968 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/blstc5.jpg\" alt=\"column containers\" width=\"880\" height=\"895\" \/><\/p>\n<h3>Ajouter un module image \u00e0 la colonne 2<\/h3>\n<h4>T\u00e9l\u00e9charger l&rsquo;image<\/h4>\n<p>Dans la deuxi\u00e8me colonne, le seul module dont nous avons besoin est un module Image. T\u00e9l\u00e9chargez une image de votre choix.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124969 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/blstc6.jpg\" alt=\"column containers\" width=\"880\" height=\"767\" \/><\/p>\n<h4>Dimensionnement<\/h4>\n<p>Ensuite, forcez la largeur totale dans les param\u00e8tres de dimensionnement.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124970 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/blstc7.jpg\" alt=\"column containers\" width=\"880\" height=\"756\" \/><\/p>\n<h4>Bordure<\/h4>\n<p>Modifiez ensuite les param\u00e8tres de bordure pour les diff\u00e9rentes tailles d&rsquo;\u00e9cran.<\/p>\n<ul>\n<li>En haut \u00e0 gauche : 0px (ordinateur de bureau), 20px (tablette et t\u00e9l\u00e9phone)<\/li>\n<li>En haut \u00e0 droite : 20px<\/li>\n<li>Bas gauche : 0px (ordinateur de bureau), 20px (tablette et t\u00e9l\u00e9phone)<\/li>\n<li>En bas \u00e0 droite : 20px<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124971 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/blstc8.jpg\" alt=\"column containers\" width=\"880\" height=\"766\" \/><\/p>\n<h4>Positionner<\/h4>\n<p>Repositionner le module sur le bureau. Ramenez-le par d\u00e9faut sur les \u00e9crans plus petits.<\/p>\n<ul>\n<li>Position : Absolue (Bureau), Par d\u00e9faut (Tablette et t\u00e9l\u00e9phone)<\/li>\n<li>Emplacement : Centre (Bureau)<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124972 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/blstc9.jpg\" alt=\"column containers\" width=\"880\" height=\"671\" \/><\/p>\n<h3>Cloner la rang\u00e9e autant de fois que vous le souhaitez<\/h3>\n<p>Une fois que vous avez termin\u00e9 la rang\u00e9e et tous ses modules, vous pouvez cloner la rang\u00e9e enti\u00e8re autant de fois que vous le souhaitez.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124973 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/blstc10.jpg\" alt=\"column containers\" width=\"880\" height=\"602\" \/><\/p>\n<h4>Modifier le contenu et l&rsquo;image<\/h4>\n<p>Modifiez le contenu et l&rsquo;image en cons\u00e9quence et le tour est jou\u00e9 !<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124974 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/blstc11.jpg\" alt=\"column containers\" width=\"880\" height=\"666\" \/><\/p>\n<h2>Pr\u00e9visualisation<\/h2>\n<p>Maintenant que nous avons suivi toutes les \u00e9tapes, jetons un dernier coup d&rsquo;\u0153il au r\u00e9sultat sur diff\u00e9rentes tailles d&rsquo;\u00e9cran.<\/p>\n<h3>Bureau<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124947 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/divi-limit-container-desktop-preview.gif\" alt=\"column containers\" width=\"1000\" height=\"603\" \/><\/p>\n<h3>Mobile<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-124948 size-full\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/divi-limit-container-mobile-preview.gif\" alt=\"column containers\" width=\"440\" height=\"848\" \/><\/p>\n<h2>R\u00e9flexions finales<\/h2>\n<p>Dans cet article, nous vous avons montr\u00e9 comment limiter vos effets de d\u00e9filement aux conteneurs de colonne en utilisant les options de d\u00e9bordement de Divi en combinaison avec les effets de d\u00e9filement des modules. D\u00e8s qu&rsquo;un module d\u00e9passe le conteneur de colonne, il dispara\u00eet, ce qui donne lieu \u00e0 un design interactif encadr\u00e9 soign\u00e9. Vous avez \u00e9galement pu t\u00e9l\u00e9charger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n&rsquo;h\u00e9sitez pas \u00e0 laisser un commentaire dans la section commentaire ci-dessous.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Les effets de d\u00e9filement de Divi permettent d&rsquo;apporter une toute nouvelle dimension au design que vous cr\u00e9ez. Avec chaque nouvelle fonctionnalit\u00e9 Divi, nous essayons \u00e9galement de partager des didacticiels qui vous aideront \u00e0 voir votre conception Web sous un angle diff\u00e9rent. Dans ce tutoriel, nous vous montrerons comment limiter les effets de d\u00e9filement des modules [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":351006,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[106],"tags":[],"class_list":["post-351005","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/351005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/comments?post=351005"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/351005\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/351006"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=351005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=351005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=351005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}