Créer la deuxième partie: disposition diagonale pour la partie suivante, nous créerons une section diagonale contenant 4 images. N’oubliez pas que pour que ce design fonctionne, de
Utilisez la valeur par Unit é de longueur VW pour déterminer et toujours utiliser la même taille d’image. Ajouter une nouvelle section générale avec une structure de bande à quatre colonnes. Ensuite, ajoutez le module image dans la colonne de gauche. Mettre à jour le formulaire avec les paramètres suivants:
Mise à jour de la boîte lumineuse: s

Superposition de l’image: sur l’icône de superposition des couleurs: # FFFFFF superposition des couleurs lorsque la souris passe: rgba (87113113,0,69) Largeur totale de la Force: s afficher l’espace sous l’image: Non

Après avoir ajouté des images avec les paramètres appropriés, copiez le formulaire d’image pour créer les trois autres images et insérez – les dans chaque colonne. De cette façon, vous n’avez pas besoin de mettre à jour chaque paramètre. Puis téléchargez les nouvelles images séparément. Assurez – vous que votre image est exactement la même taille (600 pixels x 850 pixels).

Nous allons maintenant mettre à jour les paramètres de ligne pour créer une disposition pleine largeur et remplir les images entrelacées avec des personnalisations.
Mettre à jour les paramètres de ligne comme suit: rendre cette ligne pleine largeur: s utiliser la largeur de marge personnalisée: s largeur de marge: 1 remplissage personnalisé: 0px haut, 0px bas, 0px gauche, 0px droite colonnes de remplissage personnalisées 1: 15vw haut (bureau), 0px haut (tablette) Colonnes de remplissage personnalisées 2: 10vw haut (bureau), 0px top (table) Custom Column 3 fill: 5vw top (Desktop), 0px top (table) Notez que les trois premières colonnes ont un remplissage supérieur personnalisé qui diminue graduellement pour créer une disposition d’image diagonale.

Enregistrer les paramètres. Avec nos photos, nous avons ajouté des partitions pour compléter la conception. Allez à la section paramètres et mettez à jour ce qui suit: séparateur: style de séparateur supérieur: voir la couleur du séparateur de capture d’écran: # FFFFFF hauteur du séparateur: 20vw (bureau), 0px (tablette), 0px (SM)
Dans les deux autres colonnes Aller aux paramètres de ligne et mettre à jour ce qui suit: colonne 1 couleur de fond: # 577171 colonne 2 couleur de fond: # 577171 colonne 3 couleur de fond: # 577171 Sur l’onglet conception, mettre à jour la taille et l’espacement comme suit: largeur de la gouttière: 3 largeur égale hauteur de la colonne: s remplissage personnalisé: 0px remplissage personnalisé de la colonne 1 en bas (bureau): 12vw en haut, 6vw remplissage personnalisé de la colonne 1 en bas (tablette): 0vw En haut, 0vw bas personnalisation colonne 2 remplissage (bureau): 6vw haut personnalisation colonne 2 remplissage (tablette): 0vw haut personnalisation colonne 3 Remplissage: 0px haut Enregistrer les paramètres. N’oubliez pas de mettre à jour vos photos avec de nouvelles images. Maintenant, vérifiez le résultat final… Disposition diagonale réactive cette conception met en évidence la force de la longueur unitaire VW. Parce que nous avons utilisé VW tout au long de la conception pour séparer et redimensionner les éléments, les résultats seront entièrement adaptés à la taille de tous les navigateurs de bureau. Sur les tablettes et les smartphones, la disposition sera conforme à la conception propre normale, sans éléments diagonaux. L’utilisation de Divi pour concevoir une disposition diagonale donne des résultats très uniques. Le secret est d’utiliser les unités de longueur VW, de combiner correctement la hauteur du séparateur, la taille de l’image et l’espacement, et d’ajuster la conception à la largeur du navigateur. Ce n’est que la partie émergée de l’iceberg que vous pouvez créer avec différents modules, séparateurs et couleurs. J’espère que cela vous inspirera à créer votre propre chef – d’œuvre géométrique. J’ai hâte d’entendre vos commentaires dans les commentaires qui suivent. Bonjour!