Comment faire un ballon de football mobile visqueux à Divi

RTE 3: créer un bouton football pour créer un bouton football, nous utiliserons le module Blurb. Cela nous permet de créer un bouton qui ressemble à une application mobile (une petite icône avec un titre ci – dessous), idéal pour la navigation mobile.
Dans la colonne, ajoutez un nouveau module Blurb. Mettre à jour l’introduction comme suit: Titre: Corps de la page d’accueil: laisser en blanc utiliser l’icône: Oui icône: icône de la page d’accueil (voir capture d’écran) Sur l’onglet conception, mettez à jour le style de l’icône comme suit: couleur de l’icône: # FFF taille de la police de l’icône: 24px Ensuite, mettez à jour le texte du titre et redimensionnez les options comme suit: Police de l’en – tête: Montserrat poids de la police de l’en – tête: demi – gras style de la police de l’en – tête: tt alignement du texte de l’en – tête: couleur du texte de l’en – tête central: # FFF taille du texte de l’en – tête: 10px largeur maximale: 60 Px alignement du formulaire: Centre Continuer à ajouter le remplissage et le filet suivants au bleu: remplissage: 5px (haut, bas, gauche, droite) filet: 5px (haut, bas, gauche, droite) Pour ajouter une bordure autour de Blurb, nous utiliserons l’ombre de la boîte, principalement parce qu’elle n’ajoute pas d’espace supplémentaire réel à la conception. Shadows of Frame: see screenshot Frame Shadows horizontal Location: 0px Frame Shadows vertical Location: 0px Frame Shadows diffusion Force: 1px Shadow color: rgba (255255255,0,12) Pour supprimer l’espacement par défaut entre l’image Blurb et le titre, ajoutez le clip CSS suivant dans l’onglet avancé de l’image Blurb et du titre Blurb: Blur Margin Bottom CSS Image: 0px; Blurb CSS header fill bottom: 0px; De plus, les options de débordement horizontal et Vertical sont mises à jour pour être visibles. Cela garantit que la barre de configuration du module n’est pas coupée lors de l’édition dans Divi Builder. Copier ici
Collez la section pied de page et, lorsque vous passez le curseur sur elle, cliquez sur l’icône enregistrer dans la bibliothèque dans la barre de configuration partielle. Ensuite, nommez la mise en page et sauvegardez – la dans la bibliothèque. Résultats Voici un aperçu des résultats finaux. Partie 6: créer un modèle de barre de pied de page mobile # 3 Pour une autre alternative à cette barre de pied de page collante, nous pouvons apporter quelques innovations aux lignes en ajoutant des filets pour rendre la barre de pied de page plus comme un onglet. Mettez d’abord à jour les paramètres de zone, ouvrez les paramètres de zone existants et mettez à jour la couleur de fond collante à transparente. Couleur de fond (collante): transparente pour s’assurer que la rampe de fond est supprimée. Ensuite, ouvrez les paramètres de ligne et ajoutez la couleur de fond suivante: couleur de fond: # 1a2545 Dans l’onglet conception, mettre à jour ce qui suit: remplissage: 10px au filet supérieur: 20px en haut à gauche, 20px en haut à droite Pour enregistrer cette disposition collante du pied de page, cliquez sur l’icône enregistrer dans la bibliothèque dans la barre de configuration de la Section pendant que vous passez le curseur sur la section. Ensuite, nommez la mise en page et sauvegardez – la dans la bibliothèque. C’est le résultat. Partie 7: désactiver les pieds de page collants sur le Bureau pour masquer les pieds de page dans la vue du Bureau afin qu’ils ne soient affichés que sur les appareils mobiles, vous pouvez toujours mettre à jour les options de visibilité pour cette partie. Il suffit de sélectionner le Bureau sous l’option désactiver ouvrir. Le résultat final est un dernier regard sur la conception du football mobile. Coller le numéro de la barre de pied de page 1 coller le numéro de la barre de pied de page 2 coller le numéro de la barre de pied de page 3 idée finale créer la barre Pi