La structure des éléments d’intégration de Divi permet de définir et de modéliser traditionnellement différentes sections, lignes, colonnes et modules. Mais ils peuvent aussi être utilisés de façon créative pour améliorer la structure de conception de la page. Dans ce tutoriel, nous vous montrerons comment utiliser les contours de colonne pour mettre en évidence les mailles de conception Divi. Nous utiliserons une ligne absolument positionnée pour créer un beau profil de colonne de fond et la fusionner avec d’autres lignes dans cette section. Vous pouvez également télécharger gratuitement le fichier json! On y va.
Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Bureau Mobile Téléchargement gratuit de la mise en page des contours de colonne pour obtenir gratuitement la mise en page des contours de colonne, vous devez d’abord utiliser les boutons en bas pour télécharger. 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! Commençons à recréer! Ajouter une nouvelle section débordement ajouter une nouvelle Section d’abord à la page sur le cu
Titre 2: police: source code pro titre 2 poids de la police: gras couleur du texte titre 2: rgba (3538211,0.46) Titre 2: taille du texte: 4vw (bureau), 60 Px (tablette), 50 Px (téléphone cellulaire) Titre 2 espacement des lettres: 5px
Titre 2 ombres de texte longueur horizontale: 0,05 em titre 2 ombres de texte longueur verticale: 0,07 em titre 2 ombres de texte couleur: # bddfed Mouvement vertical nous ajouterons également quelques mouvements verticaux. Activer le mouvement vertical: est le décalage initial: 2 décalage moyen: 0 décalage final: – 2 effet de mouvement actif: milieu de l’élément Ajouter un formulaire de texte 2 à la colonne 2 ajouter un autre formulaire de texte sous le formulaire de texte précédent et entrer le contenu descriptif de votre choix.
Paramètres de texte passer à l’onglet conception du module et modifier les paramètres de texte en conséquence: caractères de texte: pro source couleur du texte: rgba (3538211,0.76) taille du texte: 15px hauteur de la ligne de texte: 2em Mouvement vertical ce module utilisera également un certain mouvement vertical. Activer le mouvement vertical: est le décalage initial: 2 décalage moyen: 0 décalage final: – 2 effet de mouvement actif: milieu de l’élément Ajouter un module bouton à la colonne 1 Ajouter copier la colonne 1 le dernier module dont nous avons besoin est un module bouton. Ajoutez une copie de votre choix.
Passez à l’onglet conception du module et modélisez les boutons comme suit: chaque bouton utilise un style personnalisé: Oui couleur du texte du bouton: # 2326d3 rayon de la bordure du bouton: 0px Caractères du bouton: code source pro afficher l’icône du bouton: Oui emplacement de l’icône du bouton: afficher l’icône seulement lorsque la souris est sur le bouton à gauche: Non Espacement Q