Comment créer des conceptions de texte incurvé dans Divi

Si vous recherchez un moyen unique de présenter du texte sur une page Web, savoir comment créer des conceptions de texte incurvées dans Divi peut s'avérer utile. Ce type de conception fonctionnerait pour créer des graphiques personnalisés ou des conceptions d'en-tête créatives dans Divi sans avoir à utiliser un éditeur de photos. Habituellement, cela implique un html et un css plus complets à accomplir, mais avec Divi, le CSS personnalisé est minimal et vous avez tellement plus d'options intégrées pour concevoir facilement votre texte de manière unique.

Dans ce didacticiel, nous allons vous montrer comment créer quelques modèles de lettres incurvées que vous pouvez utiliser comme modèle utile à vos propres fins. Si quoi que ce soit, vous pouvez ajouter quelque chose de nouveau à votre boîte à outils de conception pour l'avenir.

Commençons.

Aperçu

Voici un aperçu des conceptions de texte incurvé que nous allons construire dans ce didacticiel.

Téléchargez GRATUITEMENT la mise en page des exemples de conception d'animation de lettres

Pour mettre la main sur les dessins de texte incurvé 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 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 !

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 ?

L'idée de base derrière la création de texte incurvé dans Divi

Pour créer du texte incurvé à l'aide de la méthode de ce didacticiel, vous devez ajouter chaque lettre de votre texte dans un module de texte distinct (vous devrez utiliser une police à espacement fixe pour de meilleurs résultats). Donnez au module de texte une hauteur définie. Ensuite, vous devez donner à chaque module de texte une position absolue centrée afin qu'ils s'empilent tous les uns sur les autres.

Ceci est important car nous voulons que chaque lettre tourne à partir du même point central. Après cela, vous pouvez utiliser les options de transformation de Divi pour faire pivoter chaque lettre le long de l'axe z pour créer le texte incurvé (pensez à utiliser une boussole en cours de mathématiques pour dessiner un cercle). Notez également que la hauteur de chaque module de texte détermine le rayon du cercle qui augmentera également la circonférence du cercle, et par conséquent plus d'espace entre les lettres.

Voici un exemple de 8 modules de texte pivotés par incréments de 45 degrés pour créer une disposition circulaire parfaite pour le texte. J'ai ajouté une bordure blanche autour de chaque module afin que vous puissiez facilement voir la rotation.

Et voici un exemple des mêmes modules de texte tournés par incréments de 20 degrés.

Commencer

Abonnez-vous à notre chaîne Youtube

Pour commencer, créez une nouvelle page dans Divi. Donnez ensuite un titre à votre page et déployez le constructeur Divi sur le front-end. Sélectionnez l'option « construire à partir de zéro ». Maintenant, vous êtes prêt à partir!

Création de la conception de texte incurvé

Création de la section et de la ligne

Créez d'abord une section régulière avec une ligne à une colonne.

Avant d'ajouter nos modules, continuez et mettez à jour les paramètres de la section comme suit :

• Couleur d'arrière-plan du dégradé à gauche : #1e003d
• Dégradé de fond à droite : #121212
• Type de dégradé : Radial

• Image d'arrière-plan : [insérer l'image du logo d'environ 100 pixels sur 100 pixels]
• Taille de l'image d'arrière-plan : taille réelle

Enregistrez les paramètres, puis passez aux paramètres de ligne et mettez à jour les éléments suivants :

• Largeur de gouttière : 1
• Largeur : 100 %
• Hauteur minimale : 400px
• Hauteur: 40vw
• Hauteur maximale : 600 px
• Rembourrage personnalisé : 0px en haut, 0px en bas

Ajoutez ensuite le CSS personnalisé suivant à l'élément principal de la colonne pour vous assurer que tous les modules de texte resteront centrés horizontalement :

Élément principal de la colonne CSS :

display:flex;
justify-content:center;

Création des modules de texte pour chaque lettre

Nous sommes maintenant prêts à ajouter notre premier module de texte avec notre première lettre. Pour ce faire, ajoutez un nouveau module de texte à la colonne de ligne et mettez à jour les éléments suivants :

• Contenu : d (juste la seule lettre)
• Police de texte : Ubuntu Mono (toute police à espacement fixe fera l'affaire)
• Texte Couleur du texte : #ffffff
• Taille du texte : 5vw (bureau), 40px (téléphone)
• Orientation du texte : centre
• Hauteur minimale : 200 px
• Hauteur: 20vw
• Hauteur maximale : 300 pixels

Ensuite, mettez à jour l'origine de la transformation vers le bas. Cela va être important pour déterminer où se produit la rotation du texte. Nous voulons que le module de texte tourne au point inférieur du module. Même si ce premier module de texte n'aura pas besoin d'être tourné, il est important de l'ajouter ici afin que nous puissions conserver cette option chaque fois que nous dupliquerons le module de texte pour les lettres supplémentaires.

• Origine de la transformation : 100 % (ou en bas)

Ajoutez ensuite le CSS personnalisé suivant à l'élément principal pour donner au module de texte une position absolue.

position: absolute !important;

Création et rotation des autres modules de texte

Pour créer le reste des lettres, nous allons dupliquer le module de texte. Une fois que nous avons dupliqué le module de texte, tout ce que nous aurons à faire est de mettre à jour la lettre, puis d'augmenter la rotation de 45 degrés avec chaque nouveau module.

Étant donné que les modules de texte seront empilés au-dessus de chacun sur le front-end, il est préférable d'utiliser le mode d'affichage filaire pour effectuer ces mises à jour.

Allez-y et dupliquez le module de texte, puis mettez à jour les éléments suivants :

• Contenu : je
• Axe z de rotation de transformation : 45 deg

Continuez le processus de duplication du module de texte, puis de mettre à jour le module de texte avec une nouvelle lettre et d'augmenter la rotation de transformation de 45 degrés. Voici une ventilation des 6 mises à jour du module de texte restantes :

Module de texte 3

• contenu : v
• Axe z de rotation de transformation : 90 deg

Module de texte 4

• contenu : je
• Axe z de rotation de transformation : 135 deg

Module de texte 5

• contenu : d
• Axe z de rotation de transformation : 180 deg

Module de texte 6

• contenu : je
• Axe z de rotation de transformation : 225 deg

Module de texte 7

• contenu : v
• Axe z de rotation de transformation : 270 degrés

Module de texte 8

• contenu : je
• Axe z de rotation de transformation : 315 degrés

C'est ça! Découvrez maintenant le résultat final.

Résultat final

Ajustement de la taille du texte et du degré de rotation pour un texte plus long

Si vous souhaitez ajuster le texte incurvé pour des options de conception de texte plus grandes, vous pouvez modifier la taille du texte et transformer la rotation de chaque module de texte.

Déployez le mode d'affichage filaire, puis utilisez la fonction de multisélection de Divi pour sélectionner tous les modules de texte contenant les lettres incurvées. Cliquez ensuite pour ouvrir les paramètres de l'un des modules de texte sélectionnés pour ouvrir le modal de paramétrage des éléments qui mettra à jour tous les modules sélectionnés à la fois.

Sous les paramètres de l'élément, modifiez la taille du texte du texte à 40px sur le bureau.

Enregistrez les paramètres, puis ouvrez les paramètres de chacun des modules de texte et mettez à jour les lettres et la rotation pour chacun. Laissez le premier module de texte avec une rotation de 0 degré, puis augmentez la rotation de l'axe z de 10 degrés pour chaque module de texte qui suit. Ensuite, dupliquez le module de texte pour encore plus de lettres si nécessaire. Dans cet exemple, je vais épeler "elegant.themes".

Voici la répartition de la lettre de contenu et la rotation nécessaire pour chaque module de texte.

• Module de texte 1
  • contenu : e
  • Axe z de rotation de transformation : 0 deg
• Module de texte 2
  • contenu : l
  • Axe z de rotation de transformation : 10 deg
• Module de texte 3
  • contenu : e
  • Axe z de rotation de transformation : 20 deg
• Module de texte 4
  • contenu : g
  • Axe z de rotation de transformation : 30 deg
• Module de texte 5
  • contenu : un
  • Axe z de rotation de transformation : 40 deg
• Module de texte 6
  • contenu : n
  • Axe z de rotation de transformation : 50 deg
• Module de texte 7
  • contenu : t
  • Axe z de rotation de transformation : 60 deg
• Module de texte 8
  • teneur: .
  • Axe z de rotation de transformation : 70 deg
• Module de texte 9
  • contenu : t
  • Axe z de rotation de transformation : 80 deg
• Module de texte 10
  • contenu : h
  • Axe z de rotation de transformation : 90 deg
• Module de texte 10
  • contenu : e
  • Axe z de rotation de transformation : 100 deg
• Module de texte 11
  • contenu : m
  • Axe z de rotation de transformation : 110 deg
• Module de texte 12
  • contenu : e
  • Axe z de rotation de transformation : 120 degrés
• Module de texte 13
  • Contenu
  • Axe z de rotation de transformation : 130 deg

Voici le résultat à ce jour.

Un moyen simple d'ajuster la rotation de l'ensemble du texte consiste à appliquer une rotation de transformation à la ligne. Ouvrez les paramètres de ligne et utilisez la molette de contrôle z-index pour positionner le texte incurvé où vous le souhaitez.

Voici la conception finale.

N'hésitez pas à explorer l'ajout de texte et à peaufiner le degré de rotation pour obtenir le bon espacement entre les lettres. Vous pouvez également ajuster la hauteur des modules de texte pour diminuer ou augmenter le rayon.

Dernières pensées

Créer des conceptions de texte incurvé dans Divi est un processus assez simple une fois que vous comprenez comment cela fonctionne. Cet article devrait vous aider à comprendre la géométrie impliquée dans la configuration des modules de texte afin qu'ils tournent sur une courbe. Et une fois que vous avez bien configuré, en plus de quelques extraits de css personnalisés, vous pouvez utiliser les paramètres de conception intégrés de Divi pour être assez créatif. J'espère que cela vous donnera un peu d'inspiration pour créer vos propres conceptions de texte incurvées uniques.

Et, si vous souhaitez ajouter une animation à vos lettres courbes, consultez notre article sur la façon d'animer des lettres.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!