Comment faire à & # 39; Icône Blurb dans Divi
Formulaire. Largeur du contenu: 100% largeur: Bureau: 11vw tablette: 19vw Téléphone: 22vw
L’espacement ajoute également des valeurs d’espacement. Marge supérieure: – 5vw marge inférieure: 0vw marge gauche: – 1vw remplissage supérieur et inférieur: 4vw Bordure pour fournir une forme unique à l’icône, ajoutez un rayon de bordure à chaque coin (sauf en bas à gauche). Filet: 50vw, coin inférieur gauche 0vw. Boîte d’ombre enfin, ajoutez une ombre de boîte. Ombres de boîte: première option ombres de boîte intensité du flou: 50px Personnaliser CSS par défaut, les icônes ont des marges inférieures. Pour en sortir, nous ajouterons une ligne de code CSS dans la boîte CSS personnalisée de l’image Blurb. Image floue: marge inférieure: 0px; Marge inférieure: 0px; Ajouter un formulaire texte à la colonne 1 ajouter du contenu H3 sous l’icône ajouter un formulaire texte qui contient du contenu H3 de votre choix. L’arrière – plan va aux paramètres d’arrière – plan et ajoute un arrière – plan gradué. Arrière – plan: Gradient I: transparent II: jaune # edf000 direction du gradient: 180 degrés position initiale et finale: 74% Ensuite, modélisez le texte H3. Titre texte niveau du titre: H3 caractères H3: josefin sans alignement H3: couleur du caractère central H3: Noir # oooooooo taille du texte H3: Bureau: 2.4vw tablette: 3.4vw Téléphone: 4.8vw espacement des lettres H3: 0em Dans les paramètres de taille, ajustez la largeur de la tablette et du téléphone. Largeur: comprimé: 50% Téléphone: 60% L’espacement se poursuit en allant aux paramètres d’espacement et en ajustant les valeurs de marge. Marges gauche et droite: 5vw remplissage supérieur: 1vw Enfin, utilisez les options de conversion pour faire tourner le module. Traduction de transformation: Axe X: – 20vw axe Y: 13vw roue de transformation: première option, 280 degrés Ajouter un formulaire d’appel à l’action àNNA 1 supprime le contenu par défaut de l’en – tête et ajoute des boutons et du contenu textuel le prochain et dernier formulaire dont nous avons besoin dans la colonne 1 est le formulaire d’invitation à l’action. Ajoutez votre sélection et supprimez la copie du titre. Ajouter un lien ajoute un lien connexe au bouton. Arrière – plan assurez – vous que l’arrière – plan n’a pas de couleur. Ensuite, allez dans l’onglet conception et modifiez les paramètres du texte du corps. Caractères du corps: rouge foncé alignement du corps: couleur du Corps gauche: gris foncé # 666666 taille du texte du corps: Bureau: 1.2vw tablette: 2.6vw téléphone mobile: 3.1vw hauteur de la ligne du corps: 1.8em Les boutons peuvent également modifier les styles de boutons. Taille du texte du bouton: Bureau: 1vw tablette: 2vw Téléphone: 3vw couleur du texte du bouton: gris foncé Complétez la configuration du module en ajoutant des remplissages à gauche et à droite. Remplissage à gauche et à droite: 7vw Supprimer la colonne 2 et cloner la colonne 1 ajuster les paramètres de la colonne 2 retournez maintenant aux paramètres de ligne et supprimez la deuxième colonne. Ensuite, clonez la première colonne. Dans les prochaines étapes, nous ajusterons certains paramètres dans la colonne copier. Changez d’abord la couleur de l’icône du module Blurb. Couleur de l’icône: eau # 00ffd4 Changez l’arrière – plan de la rampe et copiez le texte suivant. Couleur de fond: eau # 00ffd4 modifier le contenu Recréer l’exemple 2 Dans le deuxième exemple, ajoutez le module Blurb à la colonne 1 pour supprimer le contenu par défaut! Ajoutez le module Blurb à la colonne 1 et supprimez tout contenu par défaut. Sélectionnez l’icône, puis sélectionnez une icône. L’arrière – plan ajoute maintenant la couleur d
Fond jaune. Couleur de fond: jaune Les icônes continuent en changeant les paramètres des icônes sur l’onglet conception. Couleur de l’icône: blanc # FFFFFF emplacement de l’icône: taille de la police de l’icône supérieure: Bureau: tablette 3vw: 11vw Téléphone: 12vw Une fois la couleur et le style de fond stylisés, redimensionnez le module. Largeur du contenu: 100% L’espacement modifie également les paramètres d’espacement. Marge inférieure: 0vw marge gauche et droite: 3vw marge supérieure et inférieure: 2vw La bordure ajoute un rayon de bord à chaque coin suivant. Filets: 2vw les quatre coins Complétez la conception du module en ajoutant des ombres minces. Ombres de boîte: première option Supprimez l’ombre du cadre et la couleur de fond de la colonne 1, puis activez les paramètres de la colonne 1 et supprimez la couleur de fond et l’ombre de la boîte. Custom CSS supprime la marge inférieure par défaut appliquée à l’icône Blurb en ajoutant une ligne de code CSS à l’onglet avancé. Image floue: marge inférieure: 0px; Marge inférieure: 0px; Ajoutez le formulaire d’invitation à l’action à la colonne 1 ajoutez le contenu du titre, du corps et des boutons sous la Feuille de promotion, ajoutez le formulaire d’invitation à l’action et entrez une partie de votre sélection. Ajouter un lien ajouter un lien au bouton suivant. Continuez en ajoutant un fond blanc. Couleur de fond: blanc Dans l’onglet conception, modélisez le texte du titre H3. Niveau du titre: H3 caractères H3: josefin sans couleur de caractère H3: gris foncé # 3f3f3f taille H3: Bureau: 2vw tablette: 4vw Téléphone: 6vw poids de ligne H3: 2.3 em Le corps est ensuite modélisé. Caractères du corps: texte rouge foncé alignement du texte du corps: texte gauche couleur du corps: gris foncé # 666666 taille du corps
Texte du texte: Bureau: 1.1vw tablette: 2.2vw Téléphone: 3.1vw hauteur de la ligne de carrosserie: 1.8em Bouton basculer vers les paramètres du bouton et changer le style du bouton comme suit: taille du texte du bouton: Bureau: 1vw tablette: 2vw Téléphone: 3vw couleur du texte du bouton: gris très foncé # 3f3f3f caractères du bouton: josefin sans bouton largeur de la bordure: 2 – X couleur de la bordure du bouton: gris très foncé # 3f3f3f marges supérieures et inférieures du bouton: 3vw remplissage du bouton Haut et bas: 1vw gauche et droite remplissage des boutons: 3vw Espacement maintenant, réglez l’espacement. Marge inférieure: – 1vw rembourrage supérieur: 6vw rembourrage gauche et droit: 7vw Ensuite, arrondissez le filet dans les paramètres de bordure. Filets: 2vw Boîte d’ombre enfin, ajoutez une ombre de boîte. Ombres de boîte: première option ombres de boîte intensité du flou: 50px Supprimer la colonne 2 et cloner la colonne 1 ajuster les paramètres de la colonne 2, comme dans l’exemple précédent, aller aux paramètres de ligne et supprimer la deuxième colonne. Copiez la première colonne et Ajustez certains paramètres. Le module Blurb change l’arrière – plan du module Blurb du jaune à l’eau. Couleur de l’icône de fond: vert clair # 00ffd4 Vous pouvez également modifier le contenu et les liens du formulaire d’appel à l’action. Modifier le contenu du titre modifier le lien Recréer l’exemple 3 Ajoutez le module Blurb à la colonne 1 pour supprimer le contenu par défaut des exemples suivants et finaux! Ajoutez le module Blurb à la colonne 1 et supprimez le contenu par défaut. Sélectionnez l’icône sélectionnez l’icône. L’arrière – plan ajoute un arrière – plan jaune vif au module. Couleur de fond: jaune Icônes noir et ajuster la couleur de l’icône de position: Noir # 000000 emplacement de l’icône: taille de police de l’icône de gauche: Bureau: tablette 3vw + téléphone: 8vw Continuer en changeant la largeur et la hauteur du module. Largeur