Timanals gratuits! Commençons à recréer! Tout d’abord, ajoutez une nouvelle section à la page en cours de traitement. Ouvrez certains paramètres et changez la couleur de fond en noir. Couleur de fond: # 000000
Ajouter un formulaire texte à la colonne ajouter du contenu H2 le premier formulaire requis dans cette ligne est un formulaire texte qui contient du contenu H2. Paramètres de texte H2 passer à l’onglet conception du module de texte et modifier les paramètres de texte en conséquence H2: titre 2: caractères: titre 2 alignement du texte: titre central 2: taille du texte: 85 Px (bureau), 45 Px (tablette), 35 Px (téléphone) Titre 2 espacement des lettres: 2px hauteur de la ligne de titre 2: 1.1em
Ajoutez le module séparateur à la colonne de visibilité, puis ajoutez le module séparateur directement sous le module texte et assurez – vous que l’option afficher le séparateur est activée. Afficher les séparateurs: Oui Les paramètres de ligne passent à l’onglet conception du module et changent les paramètres de ligne comme suit: couleur de ligne: # 161616 style de ligne: emplacement de la ligne solide: en haut Le redimensionnement modifie également les paramètres de taille. Poids du séparateur: 14px largeur: 13% (bureau), 20% (tablette), 30% (téléphone) Alignement du module: milieu Ajoutez la structure de colonne de la ligne # 2 à la ligne suivante! Cette ligne sera utilisée pour notre première recommandation. Utilisez la structure de colonne suivante:
Image de fond du Bureau
Texte: 1,5 emtext Alignment: Center
Ensuite, sur l’onglet conception, changez la largeur entre les différentes tailles d’écran. Largeur: 63% (bureau), 100% (tablette et téléphone) Alignement du module: milieu Ajoutez le module personne à la colonne ajouter du contenu du module suivant, le module personne. Ajoutez votre nom, votre emplacement et un lien aux médias sociaux. Téléchargez l’image Téléchargez l’image carrée de votre choix plus tard. Les paramètres de l’icône passent à l’onglet conception et changent la couleur de l’icône dans les paramètres de l’icône. Couleur de l’icône: # 2b302e Image Convertit l’image en cercle en ajoutant des filets.
Tous les angles: 100 pixels Les paramètres du texte du titre changent ensuite les paramètres du texte du titre comme suit: police du titre: police du titre québécois poids: couleur du texte du titre en gras: # FFFFFF taille du texte du titre: 24px Paramètres du corps du texte il apporte également quelques modifications aux paramètres du texte du corps. Caractères du corps: couleur du corps: # FFFFFF taille du texte du corps: 15px Paramètres du texte de localisation nous changeons également les paramètres du texte de localisation. Police de position: couleur du texte position: # 1b66ff position taille du texte: 17px
Taille et largeur sur différentes tailles d’écran. Largeur: 25% (bureau), 100% (tablette et téléphone) Alignement du module: milieu L’espacement passe au prochain réglage d’espacement et ajoute une marge plus élevée. Marge supérieure: 100 pixels Pour s’assurer que tout le contenu du module personne est cohérent, nous allons à l’onglet avancé et ajoutons deux lignes de code CSS aux principaux éléments du module. Affichage: Flex;
Aligner les éléments: Centre; Image membre nous utiliserons une largeur personnalisée pour l’élément image me
Il couvre également des écrans plus petits. Tablette: largeur: 20%! Important Téléphone: largeur: 30%! Important
Marge droite: 5%; Une fois que vous avez terminé de cloner la ligne # 2 contenant le témoignage, vous pouvez cloner la ligne entière une fois. Pour changer l’image de fond d’une ligne, nous devons apporter quelques modifications à cette ligne répétée, d’abord l’image de fond sur le Bureau et la petite taille de l’écran. Vous trouverez la version rouge de l’image de fond dans le dossier de téléchargement. Changez l’espacement des lignes pour ajouter une marge supérieure négative à la ligne suivante. Marge supérieure: – 15% Changez la couleur du texte pour l’emplacement du formulaire personnel et complétez le réglage de la ligne de copie en changeant la couleur du texte de l’emplacement dans les paramètres du formulaire personnel. Couleur du texte de position: # ff233e Une fois que vous avez terminé de cloner la dernière ligne de témoignage copiée, vous pouvez la cloner. Modifier l’image de fond de ligne modifier l’image de fond de ligne en utilisant la version jaune dans le dossier de téléchargement. Changez la couleur du texte de position du module personne et changez la couleur du texte de position dans les paramètres du module personne, et vous êtes prêt! Couleur du texte de position: # ffbc1b Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau Mobile Dans cet article, nous partageons une belle mise en page des témoignages de ce mouvement que vous pouvez télécharger gratuitement! Nous utilisons un fond personnalisé et sommes en mesure de mettre en évidence chaque témoignage avec l’effet de défilement de Divi. Nous avons également recréé le design étape par étape! Si vous avez des questions ou des suggestions, n’hésitez pas à faire part de vos commentaires dans la section commentaires ci – dessous. Si vous êtes impatient d’en savoir plus sur Divi et d’obtenir plus de cadeaux sur Divi, allez à
Texte: 1,5 emtext Alignment: Center
Tous les angles: 100 pixels
Taille et largeur sur différentes tailles d’écran. Largeur: 25% (bureau), 100% (tablette et téléphone) Alignement du module: milieu
Aligner les éléments: Centre;
Il couvre également des écrans plus petits. Tablette: largeur: 20%! Important Téléphone: largeur: 30%! Important
Marge droite: 5%;