Comment créer un titre en mode de fusion fractionné avec Divi

Ce n'est un secret pour personne que les modes de fusion peuvent vous aider à accorder une attention particulière à l'esthétique de la conception sur laquelle vous travaillez. Dans le passé, nous avons couvert des trucs et astuces pour le mode de fusion qui vous aident à créer des designs uniques et magnifiques. Maintenant, depuis la sortie de la mise à jour de la colonne, vous pouvez effectuer quelques opérations supplémentaires avec ces modes de fusion. L'une de ces choses est de créer un titre en mode de fusion divisé. Dans cet article, nous allons vous montrer comment obtenir un résultat époustouflant en combinant les modes de fusion des modules et des colonnes, les couleurs d'arrière-plan des colonnes et les marges négatives. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Téléchargez GRATUITEMENT la section Héros du mode Split Blend

Pour mettre la main sur la section héros du mode blend gratuit, vous devrez d'abord la 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 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 les fichiers

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.

TÉLÉCHARGER

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 !

Abonnez-vous à notre chaîne Youtube

Commençons à recréer !

Ajouter une nouvelle section

Espacement

Ajoutez une nouvelle section normale à la page sur laquelle vous travaillez et supprimez tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Boîte ombre

Passez aux options d'ombre de boîte et ajoutez une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 70px
• Couleur de l'ombre : rgba(0,0,0,0.07)

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Fond dégradé

Sans ajouter encore de modules, ouvrez les paramètres de ligne et appliquez un arrière-plan dégradé. Dans l'étape suivante de cet article, nous fusionnerons l'arrière-plan dégradé avec une image d'arrière-plan à l'aide d'un mode de fusion.

• Couleur 1: #00cbff
• Couleur 2: #bf35ff
• Direction du dégradé : 96 degrés

Image de fond

Ajoutez une image d'arrière-plan à la ligne et utilisez-la en combinaison avec les paramètres d'image d'arrière-plan suivants :

• Taille de l'image d'arrière-plan : couverture
• Position de l'image d'arrière-plan : Centre
• Répétition de l'image d'arrière-plan : aucune répétition
• Mélange d'images d'arrière-plan : écran

Dimensionnement

Accédez ensuite aux paramètres de dimensionnement et laissez la ligne occuper toute la largeur du conteneur de sections.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Supprimez tous les rembourrages supérieur et inférieur par défaut de la ligne suivante. Cela garantira que la couleur d'arrière-plan de la colonne 2, que nous ajoutons plus tard dans cet article, touche les bordures supérieure et inférieure des conteneurs de ligne et de section.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Affichage

Pour nous assurer que les deux colonnes apparaissent côte à côte sur des tailles d'écran plus petites, nous allons ajouter une seule ligne de code CSS à l'élément principal de la ligne.

display: flex;

Paramètres de la colonne 2

Couleur de l'arrière plan

Une fois que vous avez terminé les paramètres généraux de la ligne, continuez et ouvrez les paramètres de la deuxième colonne. Commencez par ajouter une couleur de fond blanc.

• Couleur d'arrière-plan : #FFFFFF

Filtres

Passez à l'onglet Conception et ajoutez un mode de fusion à toute la colonne.

• Mode de fusion : écran

Ajouter un module diviseur à la colonne 1

Visibilité

Il est temps de commencer à ajouter des modules ! Le seul module dont nous avons besoin dans la première colonne est un module diviseur. Ce module nous aidera à créer de l'espace dans la première colonne sans qu'un module n'apparaisse. Assurez-vous que l'option « Afficher le diviseur » du diviseur est désactivée.

• Afficher le diviseur : Non

Espacement

Passez aux paramètres d'espacement et ajoutez une marge inférieure pour créer de l'espace dans la première colonne.

• Marge inférieure : 50vw

Ajouter le module de texte n° 1 à la colonne 2

Ajouter un titre H1

Passons à la deuxième colonne ! Ici, nous allons commencer par le titre Module de texte. Saisissez du contenu H1 de votre choix.

Paramètres de texte H1

Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Police de titre : Poppins
• Poids de la police d'en-tête : gras
• Couleur du texte de l'en-tête : #FFFFFF
• Taille du texte de l'en-tête : 12vw
• Espacement des lettres d'en-tête : -0.2vw

Espacement

Nous créons également de l'espace autour du module et le poussons vers la gauche en appliquant des valeurs de marge personnalisées. La marge gauche négative joue un rôle important dans la création du mode de fusion divisé. Il permet à une partie de la copie d'apparaître sous la première colonne qui ne contient aucune couleur d'arrière-plan.

• Marge supérieure : 18vw
• Marge inférieure : 2vw
• Marge gauche : -27.3vw

Filtres

Maintenant, dans cette prochaine étape, la magie opérera ! Nous combinons un mode de fusion de module et de colonne pour permettre à l'arrière-plan de la ligne d'apparaître. Assurez-vous de sélectionner le mode de fusion suivant pour le module de texte :

• Mode de fusion : différence

Ajouter le module de texte n° 2 à la colonne 2

Ajouter du contenu

Passons au deuxième module ! Ajoutez du contenu de votre choix.

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Police de texte : Poppins
• Alignement du texte : Justifier
• Couleur du texte : #000000
• Taille du texte : 0,8 vw (ordinateur de bureau), 1,5 vw (tablette), 2,3 vw (téléphone)
• Hauteur de la ligne de texte : 2,5 em (ordinateur de bureau et tablette), 2,2 em (téléphone)

Espacement

Ajoutez ensuite des valeurs de marge personnalisées.

• Marge inférieure : 1vw
• Marge gauche : 5vw
• Marge droite : 14vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)

Ajouter le module diviseur à la colonne 2

Visibilité

Passons au module suivant, qui est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Ligne

Passez à l'onglet Conception et modifiez les paramètres de ligne en conséquence :

• Couleur de la ligne : #FFFFFF
• Style de ligne : solide
• Position de la ligne : Haut

Dimensionnement

Modifiez également les paramètres de dimensionnement du diviseur.

• Poids du diviseur : 0.7vw
• Largeur : 9%
• Hauteur : 0px

Espacement

Et ajoutez des valeurs d'espacement personnalisées.

• Marge supérieure : 2vw (ordinateur de bureau), 5vw (tablette et téléphone)
• Marge inférieure : 3vw (ordinateur de bureau), 6vw (tablette et téléphone)
• Marge gauche : 5vw

Filtres

Enfin, appliquez un mode de fusion pour permettre à l'image d'arrière-plan de la ligne et au dégradé de transparaître.

• Mode de fusion : différence

Ajouter un module de bouton à la colonne 2

Ajouter une copie

Passons au module suivant et dernier, qui est un module de bouton. Entrez une copie de votre choix.

Alignement

Passez à l'onglet Conception et assurez-vous que l'alignement des boutons est défini sur la gauche.

• Alignement des boutons : à gauche

Paramètres des boutons

Modifiez également les paramètres des boutons.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Couleur du texte du bouton : #000000
• Rayon de la bordure du bouton : 0px
• Police des boutons : Poppins

Espacement

Et enfin, ajoutez des valeurs de marge et de remplissage personnalisées aux paramètres d'espacement.

• Marge inférieure : 10vw (ordinateur de bureau), 15vw (tablette et téléphone)
• Marge gauche : 5vw
• Rembourrage supérieur : 1vw
• Rembourrage inférieur : 1vw
• Rembourrage gauche : 3vw
• Rembourrage droit : 3vw

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Dernières pensées

Dans cet article, nous vous avons montré comment utiliser les nouvelles options de colonne de Divi pour créer de superbes titres en mode de fusion fractionné. Ce tutoriel ne fait que montrer à quel point les options intégrées de Divi sont polyvalentes et comment, à chaque mise à jour de Divi, les logiciels de conception tiers deviennent inutiles. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.