Comment décaler les colonnes et les modules Divi pour des conceptions uniques de grilles brisées
Publié: 2019-07-10La conception Web moderne consiste toujours à briser la grille. Cela se fait en étalant les éléments et les accents de conception dans des positions qui brisent la structure normale d'une disposition en grille. Vous pouvez nous voir appliquer beaucoup de ces conceptions de grille brisées dans nos superbes mises en page Divi. Habituellement, cela implique quelque chose comme déplacer des modules à l'extérieur d'une colonne ou d'une ligne afin qu'ils s'étendent à l'extérieur d'un conteneur ou chevauchent d'autres éléments sur la page. Mais vous n'avez peut-être pas pensé à déplacer la colonne réelle.
Dans ce tutoriel, je vais vous montrer comment décaler les colonnes et les modules Divi pour des conceptions de grilles brisées uniques. Avec les nouvelles options de colonnes de Divi, vous pouvez facilement déplacer les colonnes ainsi que les modules qu'elles contiennent. Cela vous permet de concevoir à la fois le module et la colonne avec des styles uniques pour une conception de grille brisée créative.
Commençons!
Aperçu
Voici un aperçu des exemples de conception que nous allons construire dans ce didacticiel.
Téléchargez GRATUITEMENT la disposition des colonnes et des modules Stagger Divi
Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Idée de base expliquée
L'idée de base derrière la façon de décaler les colonnes et les modules Divi pour des conceptions de grilles brisées uniques consiste à utiliser la propriété transform translate de Divi pour positionner les colonnes et les modules qu'elles contiennent.
Une fois les éléments décalés, vous disposez de toutes les caractéristiques de conception d'une colonne et d'un module pour ajouter des accents de conception qui créent des conceptions de grille brisées uniques.
Ainsi, par exemple, vous pouvez ajouter un arrière-plan unique (couleur, image, etc.) avec une ombre de boîte à votre colonne et un arrière-plan et une ombre de boîte complètement différents à votre module.
Maintenant que vous avez l'idée de base, créons le design à partir de zéro.
Ce dont vous avez besoin pour commencer
Pour commencer, vous aurez besoin des éléments suivants :
- Le thème Divi installé et actif
- Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)
- Quelques images à utiliser pour le contenu fictif
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Échelonner les colonnes et les modules pour créer une conception de grille brisée unique dans Divi
Tout d'abord, créez une nouvelle section régulière avec une ligne à deux colonnes.
Ajoutez ensuite un module d'appel à l'action dans la colonne 1.
Remplacez le texte du titre par « Module Divi » ou un autre titre court de votre choix.
Mettez ensuite à jour le module avec une couleur d'arrière-plan sombre, puis modifiez le texte du titre comme suit :
Couleur d'arrière-plan : #333333
Alignement du texte : à gauche
Police du titre : amer
Taille du texte du titre : 50px
Espacement des lettres du titre : 2px
Mettez ensuite à jour le bouton du module d'appel à l'action comme suit :
Taille du texte du bouton : 16px
Couleur du texte du bouton : #333333
Couleur d'arrière-plan du bouton :
Couleur de la bordure du bouton : #ffffff
Rayon de la bordure du bouton : 25px
Espacement des lettres des boutons : 2px
Police des boutons : Raleway
Poids de la police du bouton : gras
Style de police des boutons : TT
Ensuite, copiez le module et collez le doublon dans la colonne 2 afin d'avoir le même module d'appel à l'action dans chaque colonne.
Mettre à jour l'espacement des lignes
Ajoutons maintenant des marges supérieure et inférieure à la ligne pour faire de la place pour le design.
Marge : 20 % en haut, 20 % en bas
Ajouter des images d'arrière-plan de colonne
Même si nous ne pourrons pas encore les voir, nous allons ajouter des images de fond à chacune des colonnes. Ils deviendront visibles une fois que nous déplacerons notre module en dehors du conteneur de colonnes avec transform translate.
Allez-y et ouvrez les paramètres de la colonne 1 et ajoutez une image d'arrière-plan.
Ouvrez ensuite les paramètres de la colonne 2 et ajoutez une image d'arrière-plan.
Ajouter une ombre de boîte à chaque colonne
Ouvrez les paramètres de la colonne 1 et ajoutez l'ombre de boîte suivante :
Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 0px
Position verticale de l'ombre de la boîte : 0px
Force de propagation de l'ombre de la boîte : 100 px
Couleur de l'ombre : rgba(151 178 193 0,21)
Ajoutez ensuite le même style d'ombre de boîte à la colonne 2. Pour accélérer les choses, vous pouvez utiliser les options du clic droit pour copier les styles d'ombre de boîte de la colonne 1, puis les coller dans les styles d'ombre de boîte de la colonne 2.
Vous remarquerez que les ombres de la boîte se chevaucheront. L'utilisation d'une couleur d'ombre semi-transparente aidera à créer un effet de chevauchement sympa. C'est l'avantage d'utiliser des ombres de boîte dans la conception. Contrairement aux bordures, vous pouvez ajouter de grandes ombres qui ressemblent à des bordures, mais elles n'affectent pas l'espacement réel de la mise en page.
Décaler les colonnes Divi à l'aide de Transform Translate
À ce stade, nous sommes prêts à commencer à décaler les colonnes et les modules pour terminer la conception de la grille cassée. Tout d'abord, nous devons déplacer les colonnes vers le bord extérieur de la page. Ensuite, nous pouvons déplacer les modules vers le centre plus tard.
Décaler la colonne 1
Ouvrez le paramètre de la colonne 1 et ajoutez la propriété de traduction de transformation suivante.
Transformer l'axe X de translation : 25 %
Transformer l'axe Y de translation : -25% (ordinateur de bureau), -5% (tablette)
Décaler la colonne 2
Pour la colonne 2, ajoutez la propriété transform translate suivante.
Transformer Traduire l'axe X : -25%
Transformer l'axe Y : 25 % (ordinateur de bureau), 5 % (tablette)
Décaler les modules à l'aide de Transform Translate
Nous sommes maintenant prêts à décaler nos modules en les déplaçant à l'extérieur du conteneur de colonnes. Cela exposera l'image d'arrière-plan de la colonne et nous permettra d'ajouter une autre ombre de boîte au module pour un élément de conception supplémentaire qui se chevauche.
Module d'échelonnement 1
Ouvrez les paramètres du module d'appel à l'action dans la colonne 1 et mettez à jour les éléments suivants :
Transformer Traduire l'axe X : -60%
Transformer l'axe Y : 50 % (ordinateur de bureau), 10 % (tablette)
Ajouter une ombre de boîte au module 1
Ajoutez ensuite l'ombre de boîte suivante au module d'appel à l'action dans la colonne 1 :
Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 0px
Position verticale de l'ombre de la boîte : 0px
Force de propagation de l'ombre de la boîte : 100 px
Couleur de l'ombre : rgba(151 178 193 0,21)
Module d'échelonnement 2
Pour déplacer le module dans la colonne 2, mettez à jour les éléments suivants :
Transformer Traduire l'axe X : 60 %
Transformer l'axe Y de la traduction : 50 % (ordinateur de bureau), -10 % (tablette)
Ajouter une ombre de boîte au module 2
Ensuite, nous pouvons ajouter une ombre de boîte au module d'appel à l'action dans la colonne 2. Nous devons rendre cette ombre de boîte presque complètement transparente car elle chevauchera le module 1 et nous ne voulons pas rendre difficile la lecture du contenu.
Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 0px
Position verticale de l'ombre de la boîte : 0px
Force de propagation de l'ombre de la boîte : 100 px
Couleur de l'ombre : rgba(151,178,193,0,09)
Ajouter un cadre d'ombre de zone de rangée
Pour terminer la conception, ajoutons une ombre de boîte à la ligne qui sert d'élément de conception de cadre qui se trouve à l'arrière-plan.
Box Shadow : voir capture d'écran
Position verticale de l'ombre de la boîte : 0px
Couleur de l'ombre : #97b2c1
Conception finale
Voyons maintenant la conception finale.
Bureau
Tablette
Téléphone
Expérimenter avec différentes conceptions
Ce qui est cool avec cette conception, c'est qu'elle vous permet de modifier facilement le nombre de modules, les couleurs et l'espacement pour les nouvelles conceptions. Et vous pouvez également décaler les colonnes et les modules Divi dans différentes positions.
Ajout d'espacement au module pour créer une image d'arrière-plan de colonne de taille égale au module
Étant donné que la taille de la colonne est dictée par la taille du contenu qu'elle contient, quel que soit l'espace que vous ajoutez au module, la taille de la colonne augmentera également. Et puisque notre colonne a été décalée avec une image d'arrière-plan, c'est un moyen facile d'avoir cette image d'arrière-plan toujours à l'échelle de la taille du module pour une conception équilibrée.
Par exemple, ouvrez les paramètres du module d'appel à l'action dans la colonne 1 et mettez à jour le remplissage comme suit :
Rembourrage : 20% haut, 15% bas
Et remarquez comment l'image d'arrière-plan de la colonne 1 s'adapte à la taille du module.
Ajout de modules supplémentaires
De la même manière, l'ajout de plus de remplissage au module augmente la taille de l'arrière-plan de la colonne, l'ajout de modules supplémentaires dans la colonne augmentera également la taille de l'arrière-plan de la colonne.
Par exemple, dupliquez le module dans la colonne 2 et notez comment l'image d'arrière-plan s'agrandit pour accueillir l'espace nécessaire pour les deux modules dans la colonne.
Ensuite, vous pouvez déplacer un peu le module supérieur de la colonne 2 vers la droite pour un design alternatif agréable.
Voici le résultat.
Changer les couleurs
Si vous cherchez à faire correspondre la mise en page avec votre propre jeu de couleurs, un excellent moyen de le faire est de mettre à jour les couleurs de l'ombre de la boîte.
Voici un exemple de ce à quoi cela ressemblerait lors de la mise à jour des ombres de boîte semi-transparentes pour la colonne 1, le module 1 et le module 2.
Dernières pensées
J'espère que ce tutoriel vous a donné un peu d'inspiration sur la façon dont vous pouvez décaler les colonnes et les modules Divi pour créer vos propres conceptions de grilles brisées uniques. La technique est vraiment simple, impliquant principalement quelques propriétés de conversion de transformation pour décaler les colonnes et les modules et quelques ombres de boîte pour créer la conception cassée unique. N'hésitez pas à explorer plus d'options de couleurs et à introduire plus de modules pour voir où le design pourrait vous mener.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!