Utiliser le bord du module avec un index Z bas comme arrière – plan pour Divi

Lorsque vous voulez créer un design unique pour votre site Web, penser en dehors des cadres peut vous aider à atteindre vos objectifs. Dans les tutoriels précédents, nous avons souvent utilisé des éléments de conception pour leurs options intégrées. Non seulement il vous aide à visualiser en temps réel le design que vous créez, mais il vous aide aussi à le rendre parfaitement adapté à vos besoins sur des écrans de différentes tailles. Dans le tutoriel Divi d’aujourd’hui, nous vous montrerons comment utiliser le bord de l’index Z bas du module pour créer un design étonnant qui peut être utilisé à de nombreuses fins. 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 de la bordure du module d’index Z bas pour obtenir la mise en page de la bordure du module d’index Z bas gratuit, vous devez d’abord 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! Abonnez – vous à notre chaîne YouTube et commençons à recréer
– Oui. Tout d’abord, ajoutez une nouvelle section à la page en cours de traitement. Ouvrez les paramètres de section et supprimez les remplissages par défaut en haut et en bas. Remplissage supérieur: 0px remplissage inférieur: 0px Overflow passe à l’onglet avancé et modifie overflow. Débordement horizontal: masquer le débordement vertical: masquer Ajouter une nouvelle ligne de structure de colonne continuer en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante: Couleur de fond sans ajouter de module, ouvrez les paramètres de ligne et changez la couleur de fond. Couleur de fond: # f3f3e6 Redimensionner passer à l’onglet conception et modifier les paramètres de taille en conséquence: utiliser la largeur personnalisée de la gouttière: Oui largeur de la gouttière: 1 hauteur de la colonne d’équilibre: Oui largeur: 100% largeur maximale: 100% L’espacement supprime le remplissage par défaut en haut et en bas de la ligne suivante.
Remplissage supérieur: 0px remplissage inférieur: 0px Configuration de la colonne 1 une fois la configuration de la ligne terminée, vous pouvez ouvrir les paramètres de la première colonne et apporter quelques modifications. Ajouter un fond de gradient en utilisant les paramètres suivants: couleur 1: rgb (0,0,0,0) couleur 2: # 2e2d3c direction de gradient: 90 degrés position de départ: 54% position finale: 54% La boîte d’ombre ajoute également une ombre de boîte. Intensité du flou de l’ombre de la boîte: 80 Px couleur de l’ombre: rgba (0,0,0,0,3) Ajoutez le formulaire texte # 1 à la colonne 1 laissez la zone de contenu vide et commencez à ajouter le formulaire maintenant! Entrez le formulaire de texte dans la première colonne et laissez la zone de contenu vide. Nous n’utiliserons ce module que pour ses paramètres intégrés. En raison de sa position (le premier module de la première colonne), l’indice Z du module est faible et sera affiché sous tous les autres modules suivants. Dimension sp
Na 2 ajoute une copie au module suivant et au dernier bouton. Saisissez une copie de la sélection. Passez à l’onglet conception et modifiez les paramètres du bouton. Chaque bouton utilise un style personnalisé: Oui taille du texte du bouton: 0,9vw (bureau), 2,5vw (tablette), 3vw (téléphone) couleur du texte du bouton: # f3e6 couleur de fond du bouton: # 2e2d3c largeur de la bordure du bouton: 0px rayon de la bordure du bouton: 0px caractères du bouton: Montserrat Vous avez terminé la conception du module bouton en ajoutant des valeurs d’espacement personnalisées! Marge supérieure: 2vw (bureau), 8vw (tablette et téléphone mobile) marge inférieure: 10vw (bureau), 15vw (tablette et téléphone mobile) Marge gauche: 8vw marge supérieure: 1,5vw (bureau), 2,5vw (tablette), 3vw (téléphone mobile) marge inférieure: 1,5vw (bureau), 2,5vw (tablette), 3vw (téléphone mobile) Marge gauche: 4vw (bureau), 8vw (tablette), 10vw (téléphone mobile) Marge droite: 4vw (bureau), 8vw (tablette), 10vw (téléphone) 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 vous montrons comment créer un résultat étonnant en utilisant de façon créative les paramètres de bord d’index Z bas d’un module vide. Nous avons également inclus des copies rotatives dans notre conception. Ce tutoriel décrit la polyvalence des options intégrées Divi et comment modifier les paramètres de chaque projet pour tenir compte des différentes tailles d’écran. Si vous avez des questions ou des suggestions, assurez – vous de laisser un commentaire dans la section commentaires ci – dessous! Si vous souhaitez en savoir plus sur Divi et recevoir plus de cadeaux sur Divi, assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous soyez toujours l’un des premiers à apprendre et à bénéficier de ce contenu gratuit.