Superposition typographique, création de 5 dessins de titres uniques en Divi
Regarde encore. Dans la zone de contenu, ajouter le titre H3 suivant: Nos processus Ajoutez ensuite un fond blanc au formulaire:
Couleur de fond: # FFFFFF Dans l’onglet conception, mettre à jour ce qui suit: titre 2 taille du texte: 10vw largeur: 100% (bureau), 32% (tablette), 33% (smartphone) Titre 3 Police: Ubuntu compression titre 3 alignement du texte: Centre du titre 3 taille du texte: 32 pixels (bureau), 20 pixels (tablette), 16 pixels (smartphone) Ensuite, Rafraîchissez l’espacement des modules de texte pour les rendre plus réactifs sur votre appareil mobile: Marges personnalisées (tablette): – 5vw en haut, – 10vw Marges personnalisées (smartphone): – 5vw en haut, – 12vw supprime maintenant les gradients de fond dans les sections et les lignes.
Ensuite, ajoutez un peu de rembourrage à la ligne en mettant à jour les paramètres de ligne suivants: rembourrage personnalisé (bureau): 5vw en haut, 5vw en bas rembourrage personnalisé (tablette): 0vw en haut, 0vw en bas c’est le résultat final. Conception du titre 3 Cette fois, nous allons déplacer le titre vers la gauche et empiler chaque lettre verticalement. Ensuite, je vais changer la police et fournir la bordure appropriée à la ligne pour compléter le bord du module. Copiez la deuxième partie du dessin et mettez à jour les paramètres du formulaire comme suit: supprimez d’abord le titre H3 dans la zone de contenu.
En – tête 2 Police: Ubuntu Compressed en – tête 2 taille du texte: 6vw largeur: 54% (bureau), 16,4% (tablette), 17,5% (smartphone) Alignement du module: gauche (par défaut) Pour ajuster votre appareil mobile, mettez à jour l’espacement suivant: Custom Edge (tablette): – 15vw Lower Custom Edge (smartphone): – 17vw Lower Edge va maintenant aux paramètres de ligne et met à jour ce qui suit pour obtenir l’espacement correct. Remplissage personnalisé: 2vw en haut, 2vw en bas, 10vw à gauche
Puis ajoutez une bordure à la ligne PE
R compléter le bord du module. Largeur du bord supérieur: 4px largeur du bord inférieur: 4px
Il ne reste plus qu’à faire glisser le module dans la colonne de gauche de la ligne. Vérifiez le résultat final. Conception du titre # 4 pour la dernière conception du titre, je vais aligner complètement le titre Empilé à gauche, puis ajouter quelques couleurs et des effets d’ombre cool box. Mettez d’abord à jour les paramètres de ligne pour supprimer le remplissage de gauche. Puis mettre à jour les paramètres du formulaire de texte pour inclure ce qui suit: couleur de fond: # 5b7796 couleur du texte: titre clair 2: Le Caire titre 2 style de police: titre par défaut 2 taille du texte: 10vw
Taille du texte: 5vw Custom fill: 2vw top, 2vw Bottom, 4vw left, 4vw right Reset the default border style and update the New Border settings as follows: Right Border width: 0.2 emright Border color: # FFFFFF Bottom Border width: 0.2 emright Border color: # ffff
Maintenant, comme vous pouvez le voir, la valeur de 0,2em pour le bord peut sembler petite. C’est parce que la valeur EM est basée sur la valeur du caractère du corps que nous avons modifiée spécifiquement pour 5vw. Puisque nous voulons que la largeur du bord corresponde à la taille de l’en – tête, nous devons fournir une valeur de longueur unitaire VW pour le texte du corps, qui sera mise à l’échelle avec la taille du navigateur. Maintenant, donnons un bon effet de grille brisée à une ombre ombragée. Ombres de cadre: voir capture d’écran ombres de cadre position horizontale: 20 Px ombres de cadre position verticale: 20 Px ombres couleur: # 5b7796 ombres de cadre position: ombres extérieures Ensuite, mettez à jour la taille du module move. Largeur: 50% (bureau), 13% (tablette), 16% (smartphone) Enfin, retirez le remplissage et les bords de la ligne. Alors vérifiez r
