Télécharger et utiliser 6 séparateurs Divi gratuits

Jusqu’à présent, nous nous sommes habitués aux séparateurs de sections contenus dans Divi. Dans le tutoriel précédent, nous avons également montré comment appliquer ces séparateurs de section aux formulaires et aux lignes. Cependant, si vous souhaitez utiliser un séparateur de modules qui se connecte uniquement au module et non à d’autres éléments de conception, cet article vous convient. Nous partagerons 6 Dividers gratuits que vous pouvez utiliser pour n’importe quel type de site Divi que vous créez. Ces séparateurs de table seront inclus dans le fichier illustrateur que vous pouvez télécharger plus loin dans cet article. Ce tutoriel vous aidera également à créer votre propre type d’allocateur de modules.
Allons – y! Avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux 6 différents diviseurs de modules que vous pouvez télécharger et à leur apparence sur différents écrans de taille. Bureau Téléphone Pour obtenir des distributeurs de modules, vous devez d’abord les 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 des paquets gratuits Divi Layout le lundi et le vendredi de la semaine! 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! Allons – y!
Abonnez – vous à nos changements de canaux YouTube
La couleur du séparateur dans l’illustrateur ouvre le fichier illustrateur dans le dossier téléchargé. Dans la première partie de ce tutoriel, nous préparerons le séparateur de table désiré. Dans le dossier de téléchargement, vous pouvez trouver le séparateur de module pour une palette spécifique. Cependant, si vous utilisez une palette différente, vous devez créer le séparateur de table nécessaire en utilisant le fichier illustrateur dans le dossier de téléchargement. Après avoir sélectionné le style du séparateur de module, déverrouillé le calque et activé la visibilité pour ouvrir le fichier illustrateur, continuez à sélectionner le séparateur que vous avez sélectionné dans l’onglet calques. Déverrouillez le calque et activez les options de visibilité afin que vous puissiez commencer immédiatement. Cliquez sur le séparateur de formulaire et changez immédiatement de couleur. Le nombre de séparateurs de formulaire requis peut varier en fonction du nombre de modules que vous souhaitez créer. Par exemple, pour reproduire l’exemple que nous vous avons montré au début de l’article, nous avons besoin de quatre couleurs différentes de séparateurs de modules. À partir du premier, changez la couleur du séparateur en blanc. Couleur du séparateur: # FFFFFF Une fois que vous avez exporté le séparateur de module PNG vers le Web pour changer de couleur, vous pouvez continuer à enregistrer le module image en tant que fichier image PNG sur le Web. Répétez les étapes ci – dessus pour chaque couleur nécessaire (x4) et vous aurez besoin de différents séparateurs de modules. Répétez pour chaque couleur.
Couleur 1: # FFFFFF couleur 2: # 2759f6 couleur 3: # 97adf4 couleur 4: # b2ceff Après avoir sauvegardé tous les séparateurs de modules, créez l’arrière – plan de l’aperçu de conception Divi et il est temps d’aller à Divi! Le résultat final que nous avons créé à l’arrière – plan est similaire à ceci: Ajouter une nouvelle section ajouter une nouvelle page ou ouvrir une page existante et ajouter une section normale. Ajouter une nouvelle ligne de structure de colonne continuer en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante: Redimensionner
Sans ajouter de module, ouvrez les paramètres de ligne et faites quelques modifications aux paramètres de taille.
Faire cette ligne pleine largeur: Oui utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 Ajouter le module image à la colonne 1 charger le séparateur de module blanc colonne 1, le premier module dont nous avons besoin est le module image. Téléchargez le premier séparateur de table que vous pouvez trouver dans le dossier de téléchargement, ou sélectionnez le séparateur de table que vous modifiez dans la palette. Ensuite, ajoutez une couleur de fond au formulaire d’image. Cette couleur doit correspondre à la couleur de fond de tout module ultérieur. Couleur de fond: # 2759f6 Ensuite, allez au réglage de taille et activez l’option force Full Width.
Largeur totale: Oui Ajouter le module Blurb à la colonne 2 ajouter la colonne 1 Le deuxième module dont nous avons besoin est le module Blurb. Ajoutez d’abord quelque chose de votre choix. Sélectionnez l’icône, puis sélectionnez l’icône que vous avez sélectionnée. Continuer à ajouter la même couleur de fond pour le module image du diviseur de module. Couleur de fond: # 2759f6 Paramètres de l’icône, puis allez aux paramètres de l’icône et faites quelques modifications. Couleur de l’icône: # FFFFFF image \/ emplacement de l’icône: utiliser la taille de la police de l’icône en haut: est la taille de la police de l’icône: 50 px Les paramètres de texte changent également les paramètres de texte. Orientation du texte: centrer la couleur du texte: effacer Les paramètres du texte du titre changent également l’apparence du texte du titre. Poids de la police de titre: style de police de titre super gras: majuscules L’espacement e crée de l’espace pour le module en utilisant un remplissage personnalisé. Remplissage en haut: 50 Px remplissage en bas: 50 Px remplissage à gauche: 50 Px remplissage à droite: 50 px Clone du module image
Après avoir édité le premier module d’image (y compris le séparateur de module) et le module flou trois fois et deux fois, vous pouvez continuer à cloner le module d’image trois fois et le module flou deux fois. Cela produira les résultats suivants à l’arrière – plan: Placer les répliques dans le bon ordre modifier l’ordre des répliques pour s’assurer qu’elles commencent par le formulaire image, puis le formulaire d’introduction, comme suit: Changez la couleur de fond de la copie du module Blurb, puis changez la couleur de fond du module Blurb. Module Blurb # 2: # 97adf4 module Blurb # 3: # b2ceff Changez le séparateur de formulaire dans le formulaire image pour ouvrir le premier formulaire image dupliqué et charger le deuxième séparateur de formulaire pour le formulaire créé (ou sélectionnez un séparateur qui peut être trouvé dans le dossier de téléchargement). Changez la couleur de fond du module image du diviseur de module (qui correspond à la couleur de fond du module Blurb suivant) après le chargement du nouveau diviseur de module, vous devez également changer la couleur de fond du module image. Assurez – vous que cette couleur correspond à la couleur de fond du module Blurb qui sera fournie plus tard.
Séparateur de module no 2: # 2759f6 Répétez les étapes ci – dessus pour les deux autres séparateurs de modules répétez les étapes ci – dessus pour les deux autres séparateurs de modules dans la colonne et c’est fait! Séparateur de module No 3 couleur de fond: # 97adf4séparateur de module # 4 couleur de fond: # b2ceff Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les 6 séparateurs de modules différents que vous avez essayé de télécharger au début de cet article! Bureau Téléphone Dans cet article, nous avons partagé 6 séparateurs libres que vous pouvez utiliser pour n’importe quel type de site Web que vous construisez. Ces séparateurs de modules vous aident à créer des conceptions plus intéressantes et à créer des modules uniques et intéressants. Si vous avez des questions ou des suggestions, assurez – vous de laisser un commentaire dans la Section
Voici un commentaire!