Cinq méthodes merveilleuses pour simuler le module de témoignage Divi

La seule chose que les visiteurs recherchent toujours sur le site est une lettre de recommandation. Ils représentent la crédibilité et influencent le processus décisionnel des dirigeants ou des clients potentiels lorsqu’ils visitent votre site Web. En plus de vous assurer que vous avez de solides références à partager, il est important de les rendre visuellement attrayantes. Dans cet article, nous vous montrerons 5 bonnes façons de modéliser le module de recommandation Divi en utilisant seulement les options intégrées. Allons – y! Aperçu avant d’aller plus loin dans ce tutoriel, examinons les résultats finaux sur différents écrans de taille.
Bureau Mobile Recréer l’exemple 1 Abonnez – vous à notre canal YouTube Ajoutez une nouvelle section et commençons par le premier exemple! Créez une nouvelle page et ajoutez une section normale. Ajouter une nouvelle ligne de structure de colonne continuer en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante: Redimensionnez sans ajouter de module, ouvrez les paramètres de ligne et faites quelques modifications aux paramètres de taille. Faire cette ligne pleine largeur: Oui utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 Ajouter le module image à la colonne 1 charger l’image il est temps de commencer à ajouter le module! Le premier module dont nous avons besoin est le module image dans la colonne 1. Continuez à télécharger l’image carrée que vous avez sélectionnée. Le filtre passe ensuite aux paramètres du filtre et joue différents effets. Saturation: 40% contraste: 126% Ajouter un module bouton à la colonne 1 Ajouter une copie le deuxième et dernier module est un module bouton. Ajoutez quelques copies de votre choix. Ensuite, allez aux paramètres du bouton et faites quelques changements à l’apparence du bouton. Utiliser un style personnalisé pour les boutons: Oui taille du texte du bouton: 14px couleur 1: # 5400ff couleur 2: # 00fff6direction du gradient: 1
Et les colonnes 1 et 2, vous pouvez Cloner le module et placer une copie dans les deux autres colonnes. N’oubliez pas de changer l’image de votre deuxième témoignage. Changer le bouton fond de la rampe change également l’arrière – plan de la rampe du bouton. Couleur 1: # ff001d couleur 2: # 3700ff direction du gradient: 100 degrés Changez la couleur de la bordure du témoignage et faites correspondre la couleur de la bordure à l’arrière – plan du nouveau Gradient du bouton. Couleur de la bordure gauche: # ff001d Recréer l’exemple 2 Ajoutez une nouvelle section au deuxième exemple! Ajouter une nouvelle section générale à la page. Ajouter une nouvelle ligne de structure de colonne sans modifier la section en utilisant la structure de colonne suivante: Continuez en ouvrant les paramètres de ligne et en apportant quelques modifications aux paramètres de taille.
Faire cette ligne pleine largeur: Oui utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 Espacement ensuite, ajoutez des valeurs de remplissage personnalisées aux lignes et aux colonnes. Remplissage à gauche: 200 pixels (bureau), 30 pixels (tablette), 25 pixels (téléphone) remplissage à droite: 200 pixels (bureau), 30 pixels (tablette), 25 pixels (téléphone) remplissage à gauche colonne 1: 5px (bureau), 0px (tablette et téléphone) remplissage à droite colonne 1: 2,5 Px (bureau), 0 Px (tablette et téléphone) remplissage à gauche colonne 2: 2,5 Px (bureau), 0 Px (tablette et téléphone) colonne de remplissage droite 2: 2,5 Px (bureau), 0 Px (tablette et téléphone) colonne de remplissage gauche 3: 2,5 Px (bureau), 0 Px (tablette et téléphone) colonne de remplissage droite 3: 5px (bureau), 0px (tablette et téléphone) Ajouter un module vidéo à la colonne 1 Liens vidéo le premier module dont nous avons besoin dans la colonne 1 est un module vidéo. Connectez cette vidéo à votre vidéo recommandée. Les superpositions d’images ajoutent également des superpositions d’images. Ajouter un module de test
Le deuxième et dernier module requis dans la colonne 1 est le module recommandé. Commencez par ajouter les détails du témoignage. Désactivez l’icône de précaution, puis désactivez l’icône de référence dans les paramètres du projet. Afficher l’icône devis: Non Couleur de fond ajouter un fond blanc plus tard. Couleur de fond: # FFFFFF Paramètres du corps du texte il modifie également les paramètres du texte du corps. Couleur du corps du texte: # 000000 espacement des lettres du corps: – 0,5 Px hauteur de la ligne du corps: 1,7 em L’espacement, et ajoutez des marges personnalisées et des valeurs de remplissage aux paramètres d’espacement. Marge inférieure: 30 Px (tablette et téléphone mobile) Marge supérieure: 50 Px marge inférieure: 50 Px marge gauche: 80 Px marge droite: 80 px Bordure nous fournissons également au module un filet \ Enfin, pour créer un peu de profondeur, nous avons ajouté une nuance au module recommandé. Intensité du flou de l’ombre de la boîte: 80 Px force de diffusion de l’ombre de la boîte: – 10px couleur de l’ombre: rgba (0,0,0,0,3) Après avoir édité les deux modules dans la colonne 1, Cloner le module trois fois et placer les modules dupliqués dans les colonnes restantes, Cloner le module deux fois et placer les modules dupliqués dans les deux colonnes restantes. Modifier les liens vidéo, le contenu et les superpositions d’images n’oubliez pas de modifier les liens vidéo, le contenu et les superpositions d’images pour les nouvelles références. Recréer l’exemple 3 Ajoutez une nouvelle section au troisième exemple! Ajouter une nouvelle section générale à la page. Ajouter une nouvelle ligne de structure de colonne continuer en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante: Colonne couleur de fond 1, puis allez aux paramètres de fond et ajoutez une couleur de fond à la première colonne.
Ensuite, allez à l’onglet conception et ajoutez des marges supérieures et inférieures personnalisées. Marge supérieure: 50 Px marge inférieure: 50 px Ajouter un module image à la colonne 1 charger le logo de l’entreprise le troisième et dernier module dont nous avons besoin dans la première colonne est le module image. Vous pouvez utiliser ce formulaire pour ajouter un logo d’entreprise lié au témoignage. Une fois que vous avez cloné tous les modules et placé des modules dupliqués dans la colonne 2, vous pouvez continuer à cloner tous les modules de la colonne 1 après les avoir édités. Une fois terminé, placez la copie dans la deuxième colonne. Changez l’image et copiez le témoignage pour vous assurer que vous modifiez le contenu du témoignage tout en éditant l’image. Recréer l’exemple # 4 Ajoutez une nouvelle section au quatrième exemple! Ajoute une nouvelle section à la page. Ajouter une nouvelle ligne – structure de colonne ajouter une nouvelle ligne à la Section pour continuer en utilisant la structure de colonne suivante: Colonne image de fond 1 ouvre les paramètres de ligne et ajoute une image de fond à la première colonne. Colonne 1 image de fond dupliquée: aucune duplication L’image de fond de la troisième colonne est la même que celle de la troisième colonne. Colonne 3 image de fond dupliquée: aucune duplication Ensuite, allez aux paramètres de taille et faites quelques changements. Faire cette ligne pleine largeur: Oui utiliser une largeur d’espacement personnalisée: Oui largeur d’espacement: 1 hauteur de colonne équilibrée: Oui Ensuite, supprimez les remblais supérieurs et inférieurs par défaut. Remplissage supérieur: 0px remplissage inférieur: 0px Ajouter un module de recommandation à la colonne 1 ajouter du contenu continuer en ajoutant un module de recommandation à la première colonne. Une fois terminé, ajoutez les détails du témoignage. Le fond de rampe fournit également un fond de rampe pour le module. Couleur 1: # 8b32ff couleur 2: # ff35ae direction du gradient
: 120 degrés Ensuite, faites quelques modifications aux paramètres de l’icône. Couleur de l’icône de citation: # 000000 couleur de fond de l’icône de citation: # FFFFFF Le paramètre de texte e change la couleur du texte dans le paramètre de texte. Couleur du texte: clair Espacement pour que le module ait un carré, nous ajouterons un remplissage personnalisé aux paramètres d’espacement. Remplissage supérieur: 100 Px remplissage inférieur: 100 Px remplissage gauche: 100 Px remplissage droit: 100 px Vous devez également utiliser une ombre subtile pour augmenter la profondeur du témoignage. Intensité du flou de l’ombre du cadre: 80 Px force de diffusion de l’ombre du cadre: – 10px couleur de l’ombre: # ff35ae L’idée qui sous – tend ce témoignage est qu’une fois placé dessus, le témoignage disparaîtra et l’image apparaîtra. Pour ce faire, nous utiliserons un filtre d’opacité dans la configuration du filtre. Assurez – vous que l’opacité par défaut est de 100%. Opacité: 100% Filtre en vol stationnaire et supprime toute opacité en vol stationnaire. Opacité: 0% Cloner le module de témoignage dans la colonne 3 après avoir édité le module de témoignage dans la colonne 1, cloner et placer la copie dans la colonne 3. Changez la rampe de fond changez l’arrière – plan de la rampe pour la copie suivante. Couleur 1: # 32b0ff couleur 2: # 89009e direction du gradient: 120 degrés Cloner la ligne e cloner la ligne entière. Supprimer l’arrière – plan gradué du témoignage et changer la couleur de l’arrière – plan l’étape suivante consiste à supprimer l’arrière – plan gradué du formulaire de témoignage et à utiliser la couleur de l’arrière – plan blanc. Couleur de fond: # FFFFFF Après avoir supprimé l’arrière – plan de la rampe, vous pouvez changer la couleur du texte dans les paramètres du texte. Couleur du texte: noir Recréer l’exemple 5 Ajouter nu
La section OVA va au prochain et dernier exemple de ce tutoriel! Ajouter une nouvelle section générale à la page. La couleur de fond change la couleur de fond de la section. Couleur de fond: \ # EDED Ajouter une nouvelle ligne de structure de colonne, puis ajouter une nouvelle ligne en utilisant la structure de colonne suivante: Vous pouvez également apporter quelques modifications aux paramètres de taille. Faire cette ligne pleine largeur: Oui utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 2 Ajouter un formulaire texte à la colonne 1 ajouter du contenu continuer en ajoutant un formulaire texte à la première colonne. Ajoutez une copie du témoignage à la boîte de contenu. La couleur de fond e change la couleur de fond du module. Couleur de fond: # FFFFFF Ensuite, allez dans l’onglet conception et changez l’orientation du texte dans les paramètres du texte. Orientation du texte: Focus L’espacement ajoute également des valeurs de marge personnalisées. Marge gauche: 50 pixels (bureau et tablette), 20 pixels (téléphone), marge droite: 50 pixels (bureau et tablette), 20 pixels (téléphone) Ajouter un formulaire de recommandation à la colonne 1 Ajouter directement en dessous du formulaire de texte vous pouvez continuer à ajouter un formulaire de recommandation. Indiquez le nom de l’auteur, son titre et le nom de l’entreprise. Le chargement de l’image charge également l’image dans les paramètres de l’image. Fond de rampe et ajouter un fond de rampe. Couleur 1: # 5b32ff couleur 2: # 32e5f2 direction du gradient: 100 degrés Allez à l’onglet conception et modifiez les paramètres de l’icône devis pour continuer. Couleur de l’icône de citation: # 000000 couleur de fond de l’icône de citation: # FFFFFF Les paramètres de texte changent également l’orientation du texte dans les paramètres de texte. Orientation du texte: centrer la couleur du texte: effacer Paramètres du corps du texte, par conséquent, utilisez