3 façons utiles d'utiliser les options de débordement dans Divi

Les options de débordement intégrées de Divi facilitent l'ajout de propriétés CSS de débordement (c'est-à-dire visible, masqué, défilement) à n'importe quel élément de la page. Ceci est utile pour créer facilement des conceptions uniques et du contenu défilant. Dans cet article, je vais expliquer ce que font réellement ces options de débordement. Et, je vais vous présenter trois façons utiles d'utiliser le débordement sur votre propre site Divi.

Commençons.

Comprendre les options de débordement de Divi

Les options de débordement de Divi vous permettent de définir la propriété de débordement css d'un élément sur l'une des valeurs suivantes :

1. Par défaut – La valeur par défaut est visible (voir ci-dessous).
2. Visible – Le contenu qui déborde restera visible et ne sera pas tronqué lorsqu'il s'étend à l'extérieur de la boîte. Comme il s'agit du paramètre par défaut de Divi, vous aurez rarement besoin de le sélectionner.
3. Défilement – ​​Le contenu débordant sera masqué, mais les utilisateurs pourront faire défiler le contenu masqué verticalement ou horizontalement.
4. Caché - Le contenu débordant en dehors de la boîte sera caché (sans possibilité de faire défiler)
5. Auto – Cette option activera la fonctionnalité de défilement chaque fois que nécessaire (c'est-à-dire que le contenu s'étend au-delà de la boîte). Cela serait utile pour les conceptions avec une hauteur ou une largeur définie qui doivent avoir des capacités de défilement sur des navigateurs plus petits.

Divi a une option de débordement pour le débordement horizontal et vertical vous permettant de définir différentes valeurs de propriété pour chacun. Cela est pratique lorsque vous souhaitez ajouter une fonctionnalité de défilement vertical à un élément, mais que vous ne souhaitez pas qu'une barre de défilement apparaisse également horizontalement.

Voici quelques illustrations rapides tirées des conceptions de ce didacticiel pour vous aider à comprendre le fonctionnement des options de débordement.

Débordement visible (par défaut)

Dans cet exemple, le contenu qui a été positionné en dehors du conteneur de lignes reste visible, ce qui est le paramètre par défaut pour tous les éléments de Divi.

Débordement caché

Une fois que vous avez ajouté la propriété masquée de débordement à la ligne, le contenu à l'extérieur de la zone est tronqué et entièrement masqué.

Parchemin de débordement

L'utilisation du défilement de débordement vous permet de masquer le contenu à l'extérieur du conteneur de la boîte (un peu comme le débordement masqué). La principale différence est qu'une barre de défilement apparaît permettant à l'utilisateur de faire défiler le contenu qui existe au-delà des limites du conteneur.

Par exemple, voici un module de texte d'une hauteur de 400px. Le contenu du module de texte s'étend au-delà du module de texte mais reste visible par défaut.

Mais une fois que vous avez ajouté la propriété de défilement de débordement vertical au module de texte, la barre de défilement apparaît, permettant à l'utilisateur de faire défiler le contenu masqué.

Maintenant que vous comprenez un peu mieux les options de débordement, penchons-nous sur la création de quelques exemples pratiques de façons utiles de les utiliser dans la vie réelle.

Abonnez-vous à notre chaîne Youtube

3 façons utiles d'utiliser les options de débordement de Divi dans Divi

#1 Utiliser Overflow Hidden pour couper le contenu débordant pour des conceptions uniques

Pour comprendre comment utiliser la propriété masquée overflow, nous allons créer un exemple de conception rapide avec un texte débordant et une image débordante. Ensuite, nous verrons comment la conception change lors de la configuration de notre ligne pour qu'elle déborde masquée.

Tout d'abord, créez une section régulière avec une ligne à une colonne. Avant de commencer à ajouter des modules, donnons à la section le remplissage suivant :

Rembourrage personnalisé : haut 12vw, bas 12vw

Mettez ensuite à jour les paramètres de ligne comme suit :

Largeur: 80vw
Largeur maximale: 80vw
Remplissage : 0px en haut, 0px en bas
Box Shadow : voir capture d'écran
Force du flou d'ombre de la boîte: 80px

Ajoutez ensuite un module de texte à la ligne et mettez à jour les paramètres de module de texte suivants :

Ajoutez d'abord un en-tête h2 dans la zone de contenu comme suit :

<h2>Overflow</h2>

Mettez ensuite à jour les paramètres de conception comme suit :

Police de titre 2 : Lato
Poids de la police de l'en-tête 2 : gras
Titre 2 Style de police : TT
Titre 2 Alignement du texte : au centre
Titre 2 Couleur du texte : #dddddd
Titre 2 Taille du texte : 15vw
Espacement des lettres de l'en-tête 2 : 0,1 em
Titre 2 Ombre de texte : voir capture d'écran
Titre 2 Couleur de l'ombre du texte : rgba(0,0,0,0.05)

Maintenant, pour que le texte déborde de la zone de contenu de la ligne, nous devons utiliser des marges personnalisées. Ajoutez la marge personnalisée suivante au module de texte pour la faire déborder au-dessus de la ligne (verticalement) et de chaque côté de la ligne (horizontalement).

Marge : -6vw en haut, -10vw à gauche, -10vw à droite

Ensuite, ajoutez un autre module de texte sous celui que vous venez de créer et mettez à jour les éléments suivants :

Teneur:

<h3>design</h3>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

(Au fait, des extraits de code comme celui-ci sont un excellent moyen de tirer parti de l'option de défilement de débordement.)

Police du texte : Lato
Texte Alignement du texte : à droite
Taille du texte : 24px (bureau), 16px (téléphone)
Hauteur de la ligne de texte : 1,3 em
Largeur maximale : 50 %
Alignement du module : à droite
Rembourrage : 4vw droit

Ajoutons maintenant une image qui déborde en dehors de la ligne. Créez un nouveau module d'image sous les deux modules de texte, puis téléchargez une image de votre choix.

Mettez ensuite à jour les paramètres de l'image comme suit :

Largeur maximale: 35vw
Marge : -12vw en haut, -8vw en bas, -5vw à gauche
Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : -40 px
Position verticale de l'ombre de la boîte : -50px
Couleur de l'ombre : rgba(0,0,0,0.17)

Conception avec la ligne définie sur Débordement visible (par défaut)

Voyons maintenant la conception en gardant notre débordement de ligne visible (valeur par défaut).

Comme vous pouvez le voir, ces options visibles de débordement par défaut sont idéales pour créer des designs magnifiques et modernes.

Concevoir avec une ligne définie sur Débordement masqué

Voyons maintenant ce qui se passe lorsque nous utilisons la propriété Overflow Hidden pour la ligne. Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Débordement horizontal : masqué
Débordement vertical : masqué

Voici le résultat.

Comme vous pouvez le voir, le contenu débordant (le titre supérieur et l'image) est maintenant coupé et masqué pour créer un design unique. Et avec cette configuration, vous pouvez facilement tirer parti des options de transformation pour mettre à l'échelle et déplacer les éléments pour obtenir la conception parfaite.

#2 Utilisation du défilement de débordement pour permettre aux utilisateurs de faire défiler le contenu verticalement

L'exemple suivant présente le défilement de débordement vertical. Cette option de débordement est pratique pour ajouter du contenu défilant à des listes de liens ou de ressources. Vous pouvez transformer n'importe quel module ou ligne en un conteneur pour le contenu défilant. Voici comment le faire avec un module de texte.

Créez une section régulière avec une ligne à une colonne. Ajoutez ensuite un module de texte avec le contenu suivant :

<h3>overflow scroll</h3>
<ol>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">consectetur adipiscing elit</a></li>
<li><a href="#">sed do eiusmod tempor</a></li>
<li><a href="#">incididunt ut labore et dolore</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">quis nostrud exercitation</a></li>
<li><a href="#">ullamco laboris nisi ut</a></li>
<li><a href="#">aliquip ex ea commodo</a></li>
<li><a href="#">Duis aute irure dolor in</a></li>
<li><a href="#">reprehenderit in voluptate</a></li>
<li><a href="#">velit esse cillum dolore eu</a></li>
<li><a href="#">fugiat nulla pariatur</a></li>
<li><a href="#">Excepteur sint occaecat</a></li>
<li><a href="#">cupidatat non proident</a></li>
<li><a href="#">sunt in culpa qui officia</a></li>
<li><a href="#">deserunt mollit anim id</a></li>
<li><a href="#">est laborum</a></li>
</ol>

Mettez ensuite à jour les paramètres de conception du module de texte comme suit :

Police du texte : Lato

Couleur du texte du lien : #333333
Taille du texte du lien : 18px

Couleur du texte de la liste commandée :
Taille du texte de la liste commandée : 20px
Hauteur de la ligne de liste commandée : 1,8 em
Type de style de liste ordonnée : decimal-leader-zero

Titre 3 Poids de la police : Ultra gras
Titre 3 Taille du texte : 50px
Largeur maximale : 500 px
Rembourrage : 3 % en haut, 3 % en bas, 8 % à gauche, 8 % à droite

Voici à quoi ressemble le module de texte avant de donner un scroll de hauteur et de débordement.

Maintenant, mettez à jour le module de texte avec une hauteur maximale de 400px. Étant donné que la valeur de débordement par défaut du module de texte est visible, vous remarquerez que le texte déborde sous le module.

Il ne nous reste plus qu'à régler le débordement vertical pour qu'il défile comme suit :

Débordement vertical : faites défiler

Voici la conception finale.

Pour plus d’exemples sur l’utilisation du scroll overflow vertical sur votre site Divi, consultez ces publications :

• Comment créer une maquette de galerie de défilement avec les nouvelles options de débordement de Divi
• Comment concevoir une zone de widget de messages récents défilant dans Divi

#3 Utilisation du défilement de débordement pour permettre aux utilisateurs de faire défiler le contenu horizontalement

L'utilisation du défilement de débordement pour le défilement horizontal est un autre moyen de garder votre contenu accessible à partir d'un emplacement concis. De plus, c'est également un excellent moyen d'intégrer une fonctionnalité de balayage latéral sur mobile sans plug-in.

Pour vous montrer comment faire, nous allons construire ensemble un exemple rapide.

Tout d'abord, créez une section régulière avec une ligne à une colonne.

Ajoutez ensuite un module de présentation à la ligne.

Vous pouvez remplacer l'image par défaut par une nouvelle image ou icône. Mettez ensuite à jour les paramètres de conception avec quelques ajustements :

Alignement du texte : au centre
Police du titre : Lato
Poids de la police du titre : lourd
Rembourrage : 3% à gauche, 3% à droite

Dupliquez le module de présentation 5 fois afin d'avoir un total de 6 présentations dans votre colonne de ligne.

Mettez ensuite à jour les paramètres de ligne avec le CSS personnalisé suivant dans l'élément principal de la colonne.

display: grid;
grid-template-columns: repeat(6, 50%);

Cela donnera à votre colonne de textes de présentation une disposition en grille horizontale avec 6 colonnes chacune avec une largeur de 50% du conteneur (ou dans ce cas la ligne). Cela signifie que deux textes de présentation/colonnes occuperont l'espace à l'intérieur de la ligne. Les 4 autres modules s'étendront à l'extérieur de la rangée sur le côté droit. C'est là que la propriété de défilement de débordement est utile. Mettez à jour l'option de débordement suivante :

Débordement horizontal : défilement

Vous pouvez maintenant ajuster la largeur de la rangée selon vos besoins et les deux textes de présentation seront toujours bien alignés. Voici la conception finale.

J'ai ajouté une ombre de boîte à la ligne pour que vous puissiez mieux voir la boîte de contenu. Remarquez comment deux textes de présentation s'afficheront initialement jusqu'à ce que l'utilisateur fasse défiler vers la droite.

Pour plus d'informations, consultez l'article complet sur la création de cartes magnétiques horizontales.

Dernières pensées

Les éléments qui se chevauchent et les éléments de positionnement en dehors de la disposition de grille typique sont de plus en plus courants de nos jours. La plupart du temps, cela est fait uniquement à des fins de conception. Comprendre comment utiliser les options de débordement de Divi vous aidera à comprendre comment masquer ou afficher du contenu en dehors d'un conteneur pour créer ces designs uniques. Et, comprendre le défilement de débordement sera également utile pour ajouter du contenu défilant à votre site Web.

J'espère que cet article a aidé à faire la lumière sur la propriété overflow et comment vous pouvez l'utiliser pour votre prochain projet Divi.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!