Comment utiliser Divi (téléchargement gratuit!) pour faire un excellent service d’affichage sur votre appareil mobile

Configuration du texte du module. Orientation du texte: Focus Le lien vers les paramètres de texte modifie également les paramètres de texte du lien. Polices de liens: Poppins poids de police de liens: gras style de police de liens: soulignement couleur de soulignement de liens: # 000000 couleur de texte de liens: # 000000 taille de texte de liens: 3vw (téléphone), 2vw (tablette), 1vw (bureau) Paramètres de texte H3 et paramètres de texte H3. Titre 3 caractères: Poppins titre 3 poids de police: ultralight titre couleur du texte 3: # 000000 titre 3 taille du texte: 4vw (téléphone), 3vw (tablette), 2vw (bureau) Titre 3 hauteur de la ligne de texte: 1,9 em (rond) ou 3 em (ovale) Espacement pour créer une forme à partir de ce module, nous ajouterons des marges personnalisées et des valeurs de remplissage aux paramètres d’espacement. Marge gauche: 5vw marge droite: – 5vw remplissage supérieur: 17vw (téléphone), 20vw (tablette), 15vw (bureau) Remplissage inférieur: 17vw (téléphone), 20vw (tablette), 15vw (bureau) Bordure nous Arrondissons le carré en ajoutant \
Cloner le formulaire texte 4 fois maintenant que nous avons terminé l’édition du premier formulaire texte, nous pouvons continuer à le cloner 4 fois. Placer deux exemplaires dans la deuxième colonne. Modifier la copie # 1 pour continuer l’espacement en changeant les paramètres d’espacement de la première copie. Marge supérieure: 20vw marge gauche: – 5vw marge droite: 5vw Modifier la couleur de fond de la copie # 2 ouvre la deuxième copie et change la couleur de fond. Couleur de fond: rgba (255248209,0,92) L’espacement modifie également les paramètres d’espacement. Edge
Largeur personnalisée de la gouttière: Oui largeur de la gouttière: 1 Espacement ajoutez des marges personnalisées et des valeurs de remplissage à côté pour optimiser la conception de toutes les tailles d’écran. Marge supérieure: 2vw marge inférieure: 2vw marge supérieure: 10vw (téléphone mobile et tablette), 5vw (bureau) marge inférieure: 10vw (téléphone mobile et tablette), 5vw (bureau) Marge gauche: 2vw (téléphone mobile et tablette), 20vw (bureau) Marge droite: 2vw (téléphone mobile et tablette), 20vw (bureau) Nous avons également utilisé l’ombre mince de la boîte. Boîte d’ombre floue forcée: 50 Px couleur d’ombre: rgba (0,0,0,0,07) Enfin et surtout, placez les deux colonnes côte à côte en ajoutant une ligne de code CSS à l’élément principal de l’onglet avancé. Affichage: Flex; Ajoutez le module Blurb à l’icône de sélection de colonne 1 maintenant nous pouvons commencer à ajouter des modules! Le seul module dont nous avons besoin dans la colonne 1 est le module Blurb. Sélectionnez l’icône que vous avez sélectionnée. Ensuite, ajoutez un fond de gradient. Couleur 1: # 7b28ef couleur 2: # 29b6e5 direction du gradient: 142° Paramètres de l’icône modifier les paramètres de l’icône plus tard. Couleur de l’icône: # FFFFFF emplacement de l’icône: taille de la police de l’icône utilisée en haut: Oui taille de la police de l’icône: 5vw (téléphone et tablette), 4vw (bureau) Redimensionner e modifie les paramètres de taille. Largeur: 48% (téléphone et tablette), 78% (bureau) Espacement nous avons également ajouté des marges personnalisées et des valeurs de remplissage pour optimiser la conception de toutes les tailles d’écran. Marge supérieure: 2vw (téléphone mobile) Marge supérieure: 8,5vw (téléphone mobile), 9vw (tablette), 6vw (bureau) marge inférieure: 3vw (téléphone mobile), 5vw (tablette), 4vw (bureau) Border convertit plus tard le module en cercle en ajoutant \
O. taille du texte: 2vw (téléphone cellulaire), 1,7vw (tablette), 0,8vw (bureau) Direction du texte: à gauche L’espacement affecte également les valeurs d’espacement. Marge supérieure: 0vw marge gauche: – 20vw (téléphone mobile et tablette), 0vw (bureau) Marge droite: 0vw marge supérieure: 3vw (téléphone mobile et tablette), 2vw (bureau) Marge gauche: 5vw (téléphone mobile et tablette), 2vw (bureau) Bordure et ajouter une bordure gauche. Largeur du bord gauche: 5px couleur du bord gauche: # f4f4 style du bord gauche: double couleur Ajouter un module bouton – poussoir à la colonne 2 ajouter copier la colonne 2 le module suivant et le dernier module dont nous avons besoin sont les modules bouton – poussoir. Ajoutez des copies. Ensuite, allez à l’onglet conception et modifiez les paramètres du bouton. Utiliser un style personnalisé pour les boutons: Oui taille du texte du bouton: 2.5vw (téléphone), 2vw (tablette), 1vw (bureau) couleur du texte du bouton: # 4f77e8 largeur de la bordure du bouton: 1px couleur de la bordure du bouton: # 4f77e8 Rayon du bord du bouton: 1px caractère du bouton: Poppins L’espacement change également la valeur de l’espacement. Marge supérieure: 4vw (téléphone mobile et tablette), 2vw (ordinateur de bureau) Marge gauche: – 20vw (téléphone mobile et tablette), 0vw (ordinateur de bureau) Maintenant que nous avons terminé l’édition de la ligne et de tous ses modules, nous pouvons le cloner deux fois. Changez l’icône assurez – vous de changer l’icône des deux modules Blurb. Changer l’arrière – plan de la rampe change également l’arrière – plan de la rampe. Couleur 1: # ff2885 couleur 2: # d6ac24 Couleur 1: # 70ff1e couleur 2: # 2699ff Changez la couleur d’ombre de la boîte pour correspondre à la couleur d’ombre de la boîte avec le nouveau fond de gradient. Couleur de l’ombre: rgba (255208,2,0,37) Couleur de l’ombre: rgba (42255,0,0,37) Modifiez la bordure du bouton et la couleur du texte et complétez la conception en changeant la bordure du bouton et la couleur du texte. Couleur du texte du bouton: # e96c54 couleur de la bordure du bouton: # e96c54 Couleur du texte pulsé
Porte: # 4dcb93 couleur de la bordure du bouton: # 4dcb93 Pour obtenir la Section services mobiles gratuits, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire. Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Aperçu nous avons terminé toutes les étapes, maintenant regardons les résultats de déplacement pour les deux exemples. Exemple 1 Exemple # 2 Dans cet article, nous vous montrons deux façons créatives d’afficher des services sur un appareil mobile en utilisant uniquement les options intégrées de Divi. Nous espérons que cette approche mobile d’abord stimulera également votre créativité. Si vous avez des questions ou des suggestions, assurez – vous de laisser un commentaire dans la section commentaires ci – dessous!