Comment concevoir une mise en page \

Il peut être difficile de concevoir une disposition à cinq colonnes avec suffisamment d’espace pour le contenu. Sans parler du plus grand défi de s’assurer qu’il s’adapte à toutes les tailles de navigateur. Dans ce tutoriel, je vais vous montrer comment maximiser l’espace nécessaire pour le contenu d’une disposition en cinq colonnes sans affecter la conception d’écrans plus petits comme les tablettes et les smartphones. Cette conception est idéale pour présenter des produits, des services et des projets. Je vais également ajouter quelques fonctionnalités de conception supplémentaires pour obtenir de l’inspiration. On y va.
Un voyeur. La clé pour rendre une disposition à cinq colonnes réactive en utilisant des largeurs de ligne et de marge personnalisées est de donner d’abord suffisamment d’espace aux colonnes pour accommoder le contenu. Dans la conception de ce tutoriel, je vais spécifier 89% de largeur personnalisée pour les lignes qui contiennent cinq colonnes. Par conséquent, je vais créer plus d’espace en réglant la largeur de la gouttière à 1, ce qui élimine essentiellement toute marge entre les colonnes. Pour cette conception, il est important d’utiliser 89% de la largeur personnalisée au lieu de régler la ligne à pleine largeur, car vous pouvez régler la largeur de la gouttière à 1 et garder les marges de chaque côté de la ligne. Tu verras ce que je veux dire.
Une autre clé de l’utilisation des unités de longueur VW pour représenter l’espacement des titres et la réponse du texte dans une disposition à cinq colonnes est d’utiliser les unités de longueur VW pour séparer le contenu. Il est important d’être cohérent avec l’utilisation de Volkswagen tout au long de l’intervalle. Cela garantit une échelle constante sur toutes les tailles du navigateur lorsque vous ajustez la largeur de la fenêtre sans interruption ou saut d’élément. Il est également important d’utiliser la longueur unitaire VW pour le texte du titre afin que le texte ne se divise pas en nouveau texte.
Première colonne. Nous utiliserons deux blurbs par colonne dans ce design parce que nous avons besoin du Blurb supérieur pour contenir l’image de fond. Ouvrez les paramètres de description en haut de la première colonne et supprimez le texte du corps dans la zone de contenu. Ajouter l’image de fond et le gradient au module de flou supérieur, puis brouiller la même image de fond et ajouter un gradient pour écraser l’image comme suit: ajouter la couleur de fond du gradient gauche de l’image de fond: rgba (255255255,0) couleur de fond du gradient droit: rgba (18,18,18,0,65) position de départ: placer le gradient 50% au – dessus de l’image de flou supérieure Contexte: s Un gradient est nécessaire pour rendre le texte du titre plus lisible et l’image de fond plus claire. Titre texte et espacement en unités VW Ensuite, mettez à jour les paramètres de la carte de conception comme suit:
Taille du texte du titre: 2.7vw (bureau), 46px (tablette), 36px (smartphone) espacement des lettres du titre: – 3px Marges personnalisées: 1.5vw gauche, 1.5vw droite remplissage personnalisé: 35vw haut, 2vw bas, 1vw gauche, 1vw droite paramètres d’enregistrement. Le remplissage personnalisé du Haut de 35vw crée une longue image verticale unique. La valeur du texte du titre est de 2,7vw pour maintenir la cohérence de la taille du texte entre les différentes largeurs du navigateur. Lorsque nous ajouterons plus d’espacement aux lignes plus tard, le reste de l’espacement sera plus significatif. Personnalisez le Blurb inférieur, puis ouvrez les paramètres du deuxième module Blurb ci – dessous dans la première colonne et supprimez le texte du titre. Puis mettre à jour ce qui suit: alignement du corps du texte: couleur du corps du texte gauche: # 666666 remplissage personnalisé: 2vw top, 2vw Bottom, 2vw left, 2vw right Maintenant, nous sommes
Première colonne. Copiez – les et collez – les dans chaque colonne restante. Vous devez d’abord supprimer le module Blurb original des colonnes 2 et 3. Votre design devrait être comme ça maintenant. Partie 4: personnaliser les paramètres de section maintenant, nous mettons à jour les paramètres de section pour qu’ils aient un fond blanc et des ombres de cadre en bas, ce qui crée un espace pour les lignes qui se chevauchent. Couleur de fond: \ # FFFFFF Custom fill: default top, 5vw Bottom, default left, default right Frame Shadows: see the vertical Location of screenshot frames Shadows: – 200 Px force Blur Shadow frames: 0px Shadow color: \ # 121212 Partie 5: personnaliser les paramètres de ligne maintenant, nous retournons à la ligne et mettons à jour les paramètres comme suit:
Image de fond: \ # FFFFFF alignement de ligne: Centre largeur personnalisée: 89% largeur de la gouttière: 1 marge personnalisée: – 10vw remplissage personnalisé: 3vw haut, 3vw bas, 1,5vw gauche, 1,5vw boîte droite ombre: voir capture d’écran intensité de flou de boîte mentionnée plus tôt dans ce tutoriel: 80 Px, Les largeurs personnalisées et les largeurs de gouttières sont essentielles pour créer l’espace de contenu nécessaire à une disposition à cinq colonnes. À ce stade, la structure de base du projet est terminée. C’est la conception jusqu’à présent. Partie 6: ajouter la dernière touche de retouche maintenant nous pouvons ajouter plus de changements de conception pour le faire. Flou tout d’abord, nous zoomons la hauteur de l’image de fond floue en réduisant le remplissage de certaines images. Ouvrez les paramètres du module \
Cinq colonnes une technique de conception intéressante consiste à utiliser nos cinq colonnes pour ajouter un séparateur de section supérieure à la section juste au – dessus. L’arrière – plan du séparateur est affiché sur l’arrière – plan de cinq lignes de colonne, même s’il chevauche la partie ci – dessus. Pour ce faire, allez dans la section contenant le titre « Let’s Build something » et spécifiez un délimiteur comme suit: Comme la couleur du séparateur est la même que celle de l’arrière – plan de la Section avec une opacité de 15%, le séparateur est invisible en haut, mais devient visible en bas et sur les lignes de chevauchement. Parce que nous donnons une ombre de boîte à la ligne, cela crée un design unique. J’ai continué à mettre à jour certaines images de fond pour mieux comprendre les effets de conception des différentes images. C’est le dernier dessin. Un avantage de la disposition en cinq colonnes est qu’il y a une bonne disposition en deux colonnes sur la tablette. C’est ce qu’il ressemble sur un smartphone. J’aime explorer la puissance de Divi pour créer des mises en page réactives. Le défi de la mise en page à cinq colonnes est qu’il n’y a pratiquement pas beaucoup d’espace de contenu à moins que vous n’utilisiez la bonne technique pour séparer correctement le contenu afin qu’il so it bien ajusté à toutes les tailles de navigateur. J’espère que cette conception vous permettra d’utiliser une disposition à cinq colonnes pour votre prochain projet. J’ai hâte d’entendre vos commentaires. Bonjour!