3 façons utiles d’utiliser l’option overflow dans Divi
Ajoutez du texte à la ligne et mettez à jour les paramètres de formulaire de texte suivants: ajoutez d’abord le titre H2 à la zone de contenu comme suit:
Débordement Les paramètres de conception sont ensuite mis à jour comme suit: en – tête 2 caractères: en – tête côté 2 poids de police: en – tête gras style de police 2: TT en – tête 2 alignement du texte: en – tête intermédiaire couleur du texte 2: # dddddd en – tête 2 taille du texte: 15vw en – tête 2 espacement des lettres: 0,1em en – tête 2 ombres de texte: voir en – tête 2 couleurs capture d’écran Ombres de texte: rgba (0,0,0,0,05) Maintenant, pour que le texte déborde dans la zone de contenu de ligne, nous devons utiliser des marges personnalisées. Ajoutez les marges personnalisées suivantes au formulaire de texte pour que la ligne (verticale) et chaque côté de la ligne (horizontale) débordent.Marges: – 6vw en haut, – 10vw à gauche, – 10vw à droite Ensuite, ajoutez un autre formulaire de texte sous le formulaire de texte que vous venez de créer et mettez à jour ce qui suit: contenu: Conception Votre contenu est ici. Modifier ou supprimer ce texte en ligne ou dans les paramètres de contenu du module. Vous pouvez également styliser tous les aspects de ce contenu dans les paramètres de conception du module, ou même appliquer des CSS personnalisés à ce texte dans les paramètres avancés du module. (au fait, un fragment de code comme celui – ci est un bon moyen de profiter des options de défilement de débordement.) Caractères du texte: alignement du texte du côté du texte: taille du texte du côté droit: 24 pixels (bureau), 16 pixels (téléphone) hauteur de la ligne de texte: 1,3 emmax. Largeur: 50% alignement du formulaire: remplissage du côté droit: 4vw côté droit
Maintenant, ajoutons une image au – delà de cette ligne. Créez un nouveau formulaire image sous les deux formulaires texte et Téléchargez l’image de votre choix. Ensuite, mettez à jour les paramètres de l’image comme suit: largeur maximale: 35vw marge: – 12vw en haut, – 8vw en bas, – 5vw ombrage de la boîte de gauche: voir l’emplacement de la capture d’écran
Frame Shadow horizontal: – 40 pixels Frame Shadow vertical Location: – 50 pixels Shadow color: rgba (0,0,0,0,17)
La conception qui définit la ligne comme étant visible maintenant, regardons la conception et définissons le flux de ligne comme étant visible.
Comme vous pouvez le voir, ces options de débordement par défaut visibles sont idéales pour créer de beaux dessins modernes. Maintenant, regardons ce qui se passe lorsque vous utilisez la propriété Hidden overflow sur cette ligne. Ouvrez les paramètres du circuit et mettez à jour ce qui suit: Débordement horizontal: masquer le débordement vertical: masquerC’est le résultat.
Comme vous pouvez le voir, le contenu débordé (en haut du titre et de l’image) est maintenant recadré et caché pour créer un design unique. Avec cette configuration, vous pouvez facilement utiliser les options de transformation pour ajuster et déplacer les éléments pour une conception correcte.
2 utiliser un défilement excessif permet à l’utilisateur de faire défiler verticalement le contenu l’exemple suivant décrit le défilement vertical de débordement. Cette option de débordement est utile pour ajouter du contenu glissant à une liste ou à une ressource liée. Vous pouvez convertir n’importe quel formulaire ou ligne en conteneur pour le contenu glissant. Voici comment utiliser un formulaire texte. Créez une section de règles de ligne à colonne. Ensuite, ajoutez un formulaire texte contenant:
Rouleau de débordement
Lorem ipsum dolor sit ametElite sacrificatrice
- Ad hoc ed do eiusmod
- Accouchement et incision douloureuse
- Minimum
- Quels exercices nostrud
- Laboratoire ullamco nisi ut
- Aliquip ex ea Commodo
- Conduite en état d’ébriété
- Réinitialiser dans le volume
- Velit esse cillum dolore eu
- Fugiat nullabet
- Les exceptions doivent être respectées
- Cuivre non producteur
- Je suis dans une impasse.
T à overflow et comment l’utiliser pour le prochain projet Divi. J’ai hâte d’entendre vos commentaires. Bonjour!