Téléchargez et utilisez 6 diviseurs de modules GRATUITS pour Divi
Publié: 2019-01-07À présent, nous nous sommes tous habitués aux diviseurs de section inclus dans Divi. Dans les didacticiels précédents, nous vous avons également montré comment appliquer ces séparateurs de section aux modules et aux lignes. Mais si vous souhaitez utiliser des diviseurs de modules qui ne sont connectés qu'aux modules et non à d'autres éléments de conception, cet article est pour vous. Nous allons partager 6 diviseurs de modules GRATUITS que vous pouvez utiliser pour tout type de site Web Divi que vous créez. Ces diviseurs de modules seront inclus dans un fichier d'illustrateur que vous pourrez télécharger plus loin dans cet article. Ce tutoriel vous aidera également à créer votre propre type de diviseurs de modules.
Allons-y !
Aperçu
Avant de plonger dans le didacticiel, examinons rapidement les 6 diviseurs de modules différents que vous pourrez télécharger et leur apparence sur différentes tailles d'écran.
Bureau
Téléphone
Téléchargez les diviseurs de modules GRATUITEMENT
Pour mettre la main sur les diviseurs de modules, vous devrez d'abord les télécharger à l'aide du 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 encore plus de bienfaits Divi et un pack Divi Layout gratuit tous les lundis et vendredis ! 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 !
Commençons!
Abonnez-vous à notre chaîne Youtube
Modifier les couleurs du séparateur dans Illustrator
Ouvrir le fichier Illustrator dans le dossier téléchargé
Dans la première partie de ce tutoriel, nous allons préparer les diviseurs de modules dont nous avons besoin. Dans le dossier de téléchargement, vous pouvez trouver les diviseurs de module pour une palette de couleurs spécifique. Cependant, si vous souhaitez utiliser une autre palette de couleurs, vous devrez créer les séparateurs de modules dont vous avez besoin à l'aide du fichier illustrator que vous pouvez trouver dans le dossier de téléchargement.
Choisissez le style de diviseur de module, déverrouillez le calque et activez la visibilité
Une fois que vous avez ouvert le fichier illustrator, allez-y et sélectionnez le diviseur de votre choix dans l'onglet Calques. Déverrouillez le calque et activez l'option de visibilité pour pouvoir commencer tout de suite.
Cliquez sur Module Divider & Change Color
Maintenant, selon le nombre de modules pour lesquels vous souhaitez créer un diviseur, le nombre de diviseurs de module dont vous avez besoin peut différer. Pour recréer l'exemple que nous vous avons montré au début de l'article, par exemple, nous aurons besoin du diviseur de module en quatre couleurs différentes. Commencez par le premier en changeant la couleur du séparateur en blanc.
- Couleur du séparateur : #ffffff
Exporter le diviseur de module PNG pour le Web
Une fois que vous avez modifié la couleur, vous pouvez continuer en enregistrant le module image en tant que fichier image PNG pour le Web.
Répétez les étapes pour chaque couleur requise (x4)
Comme mentionné précédemment, vous aurez besoin de divers diviseurs de module. Répétez les étapes précédentes pour chacune des couleurs.
- Couleur 1 : #ffffff
- Couleur 2: #2759f6
- Couleur 3: #97adf4
- Couleur 4: #b2ceff
Créer un design Divi
Aperçu du back-end
Une fois que vous avez enregistré tous les diviseurs de modules, il est temps de passer à Divi ! Le résultat final que nous créons ressemblera à ceci sur le backend :
Ajouter une nouvelle section
Ajoutez une nouvelle page ou ouvrez une page existante et ajoutez-y une section normale.
Ajouter une nouvelle ligne
Structure des colonnes
Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :
Dimensionnement
Sans ajouter encore de modules, ouvrez les paramètres de ligne et apportez quelques modifications aux paramètres de dimensionnement.
- Faire cette ligne en pleine largeur : Oui
- Utiliser une largeur de gouttière personnalisée : Oui
- Largeur de gouttière : 1
Ajouter un module d'image à la colonne 1
Télécharger le diviseur de module blanc
Le premier module dont nous aurons besoin, dans la colonne 1, est un module Image. Téléchargez le premier diviseur de module que vous pouvez trouver dans le dossier de téléchargement ou choisissez celui que vous avez modifié dans votre propre palette de couleurs.
Couleur de l'arrière plan
Ensuite, ajoutez une couleur d'arrière-plan au module Image. Cette couleur doit correspondre à la couleur d'arrière-plan de n'importe quel module qui vient ensuite.
- Couleur d'arrière-plan : #2759f6
Dimensionnement
Ensuite, accédez aux paramètres de dimensionnement et activez l'option "Forcer la pleine largeur".
- Forcer la pleine largeur : Oui
Ajouter le module Blurb à la colonne 2
Ajouter du contenu
Le deuxième module dont nous avons besoin dans la colonne 1 est un module Blurb. Commencez par ajouter du contenu de votre choix.
Sélectionnez l'icône
Ensuite, sélectionnez une icône de votre choix.
Couleur de l'arrière plan
Continuez en ajoutant la même couleur d'arrière-plan que vous avez utilisée pour le diviseur de module Image Module.
- Couleur d'arrière-plan : #2759f6
Paramètres des icônes
Ensuite, allez dans les paramètres de l'icône et apportez quelques modifications.
- Couleur de l'icône : #ffffff
- Placement des images/icônes : en haut
- Utiliser la taille de la police de l'icône : Oui
- Taille de la police de l'icône : 50px
Paramètres de texte
Modifiez également les paramètres de texte.
- Orientation du texte : Centre
- Couleur du texte : clair
Paramètres du texte du titre
Modifiez également l'apparence du texte du titre.
- Poids de la police du titre : ultra gras
- Style de police du titre : majuscule
Espacement
Et créez de l'espace pour le module en utilisant un rembourrage personnalisé.
- Rembourrage supérieur : 50px
- Rembourrage inférieur : 50px
- Remplissage gauche : 50px
- Rembourrage droit : 50 px
Clone Image Module 3 Fois & Blurb Module Deux Fois
Une fois que vous avez terminé de modifier le premier module Image (contenant le diviseur de module) et le module Blurb, vous pouvez continuer et cloner le module Image trois fois et le module Blurb deux fois. Cela donnera le résultat suivant dans le backend :
Placer les doublons dans le bon ordre
Modifiez l'ordre des doublons pour vous assurer de commencer avec un module Image suivi d'un module Blurb, comme indiqué ci-dessous :
Modifier les couleurs d'arrière-plan des doublons du module Blurb
Ensuite, modifiez les couleurs d'arrière-plan des modules Blurb.
- Module de présentation n° 2 : 97adf4
- Module de présentation n°3 : #b2ceff
Changer le diviseur de module dans le module d'image
Ouvrez le premier module d'image en double et téléchargez le deuxième diviseur de module que vous avez créé (ou choisissez-en un que vous pouvez trouver dans le dossier de téléchargement).
Changer la couleur d'arrière-plan du module d'image du diviseur de module (correspondance avec la couleur d'arrière-plan du module Blurb suivant)
Après avoir téléchargé le nouveau diviseur de module, vous devrez également modifier la couleur d'arrière-plan de ce module d'image. Assurez-vous de faire correspondre cette couleur avec la couleur d'arrière-plan du module Blurb qui vient ensuite.
- Diviseur de module #2 : #2759f6
Répétez les étapes pour les deux modules de séparation restants
Répétez les étapes précédentes pour les deux diviseurs de module restants dans la colonne et le tour est joué !
- Couleur d'arrière-plan du diviseur de module #3 : #97adf4
- Couleur d'arrière-plan du diviseur de module n° 4 : #b2ceff
Aperçu
Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil aux 6 diviseurs de modules différents que vous avez pu télécharger au début de cet article !
Bureau
Téléphone
Dernières pensées
Dans cet article, nous avons partagé 6 diviseurs de modules gratuits que vous pouvez utiliser pour tout type de site Web que vous créez. Ces diviseurs de modules peuvent vous aider à créer un design plus ludique et à créer des modules uniques et amusants. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!