Comment faire pivoter le texte pour des conceptions de mise en page uniques dans Divi (tutoriel + téléchargement de mise en page GRATUIT)

La plupart d'entre nous sont habitués à lire le texte de droite à gauche et de haut en bas. Mais lorsqu'il s'agit de conception de sites Web, il peut être judicieux de s'affranchir de la norme. Une façon de le faire est la rotation du texte. Faire pivoter du texte sur votre site Web peut sembler peu pratique, mais cela semble avoir sa place. En fait, l'orientation verticale du texte semble être courante dans la conception Web moderne. Et, bien que la plupart des textes pivotent uniquement à des fins de conception, l'argument peut être avancé que le texte pivoté (ou vertical) (bien que plus difficile à lire) peut être une technique efficace pour attirer l'attention.

Avec Divi, vous pouvez faire pivoter n'importe quel élément de votre page à l'aide des options de transformation intégrées. Donc, dans ce tutoriel, je vais vous montrer comment réussir à faire pivoter du texte pour créer des mises en page uniques dans Divi. Pour ce faire, je vais concevoir une mise en page en trois parties qui incorpore des exemples de texte pivoté.

Commençons.

Aperçu

Voici un aperçu de l'ensemble de la mise en page que nous allons construire dans le didacticiel. Notez qu'il existe des exemples de texte pivoté dans trois sections différentes de la mise en page.

Téléchargez GRATUITEMENT la mise en page complète de ce didacticiel

Pour mettre la main sur la mise en page gratuite Rotated Text Designs, vous devez 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 la mise en page

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.

Revenons maintenant au tutoriel.

Choses à garder à l'esprit lorsque vous faites pivoter du texte

Dans quelle direction devez-vous faire pivoter le texte ?

Si vous souhaitez faire pivoter le texte pour un affichage vertical, vous ne savez peut-être pas dans quelle direction faire pivoter le texte. Vous pouvez faire pivoter le texte dans le sens inverse des aiguilles d'une montre afin que le texte se lise de bas en haut. Ou, vous pouvez faire pivoter le texte dans le sens des aiguilles d'une montre pour qu'il se lise de haut en bas. Si vous vous demandez lequel est le plus facile à lire, je ne suis pas sûr qu'il y ait une réponse. Vous pouvez essayer d'obtenir un indice à partir de l'orientation des titres de livres sur une étagère. Mais différents pays le font différemment (la norme aux États-Unis est dans le sens des aiguilles d'une montre, de haut en bas).

Dans ce didacticiel, je vais faire pivoter le texte dans le sens inverse des aiguilles d'une montre dans la plupart des cas, principalement parce que j'aime son apparence sur le côté gauche de la page (je préfère peut-être incliner la tête vers la gauche). Mais n'hésitez pas à essayer différentes directions.

Le problème du flou

Sur certains navigateurs (comme Chrome et Safari), le texte devient un peu flou lors de l'utilisation de la propriété transform rotate. Pour résoudre le problème, vous pouvez ajouter une valeur d'origine de transformation de 51 % ou 52 % le long de l'axe X. Cela devrait résoudre le problème.

Partie 1 : Créer l'en-tête avec du texte vertical

Pour cette première partie de la mise en page, nous allons créer un en-tête avec du texte vertical. Pour ce faire, nous allons faire pivoter un module de présentation en utilisant les options de transformation.

Pour commencer, créez une section régulière avec une rangée de deux colonnes.

Avant d'ajouter un module, supprimez le rembourrage supérieur et inférieur de la section en mettant à jour les paramètres de section suivants :

Rembourrage personnalisé : 0px en haut, 0px en bas

Ensuite, mettez à jour les paramètres de ligne comme suit :

• Image d'arrière-plan : [ajouter une image d'une largeur d'au moins 1 920 pixels]
• Couleur d'arrière-plan de la colonne 1 : #121212

• Largeur personnalisée : 100 %
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : OUI
• Rembourrage personnalisé (bureau): 0px en haut, 0px en bas
• Rembourrage personnalisé (tablette) : 40 % à droite
• Rembourrage personnalisé (téléphone) : 30 % à droite
• Remplissage personnalisé de la colonne 1 (bureau) : 200 pixels en haut, 200 pixels en bas
• Rembourrage personnalisé de la colonne 1 (tablette) : 150 pixels en haut, 150 pixels en bas

• 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 : -100px
• Couleur de l'ombre : #f6454e

Création du module de présentation

Nous sommes maintenant prêts à ajouter notre contenu d'en-tête. Pour ce faire, ajoutez un module de présentation dans la colonne de gauche de la ligne.

Mettez à jour le contenu suivant :

• Titre : Divi Design
• Contenu : votre contenu va ici.
• Utiliser l'icône : OUI
• Icône : ampoule

• Couleur de l'icône : #f6454e
• Taille de la police de l'icône : 32 px
• Orientation du texte : centre
• Niveau d'en-tête du titre : H1 (car c'est l'en-tête principal de la page)
• Police du titre : Muli
• Style de police du titre : TT
• Couleur du texte du titre : #ffffff
• Taille du texte du titre : 70 px (ordinateur de bureau), 50 px (tablette), 36 px (téléphone)
• Couleur du corps du texte : #cccccc
• Espacement des lettres du corps : 4px
• Largeur : 500px
• Alignement du module : centre

Remarque importante : étant donné que nous allons faire pivoter le module de présentation de manière à ce qu'il se trouve verticalement, la largeur personnalisée de 500 pixels deviendra la hauteur du module de présentation vertical. Il est donc important que le contenu s'adapte à l'intérieur de ce module. Pour cet exemple, j'utilise une petite quantité de texte et je redimensionne la police du titre sur différents appareils afin que le texte ne se divise pas en une nouvelle ligne et ne gâche pas le design.

Rotation du module Blurb à l'aide des options de transformation

Pour faire pivoter le module de présentation (et tout son contenu), mettez à jour les options de transformation suivantes :

• Transformation Rotation Axe X : -90 degrés

Vous devrez entrer la valeur -90deg manuellement. Cela vous donnera un alignement vertical de bas en haut du contenu.

Vous remarquerez peut-être que le texte est un peu flou si vous utilisez Chrome ou Safari. Cela peut parfois se produire lors de l'utilisation de la propriété transform:rotate. Pour résoudre ce problème, vous pouvez légèrement ajuster l'origine de la transformation comme suit :

• Axe Y de l'origine de la transformation : 51 %

Vous devrez peut-être ajuster un peu cette valeur jusqu'à ce que le texte soit clair. Par exemple, 52 % peuvent sembler clairs sur certains modèles.

Création d'un bouton vertical

Ensuite, nous allons ajouter un bouton en bas de notre en-tête pour rappeler à l'utilisateur de faire défiler la page vers le bas. Ensuite, nous pouvons faire pivoter le bouton en utilisant les options de transformation comme nous l'avons fait pour le module de présentation.

Créez une nouvelle ligne avec une structure à une colonne.

Avant d'ajouter notre module de boutons, mettez à jour les paramètres de ligne comme suit :

• Couleur d'arrière-plan : #f6454e
• Largeur personnalisée : 100 %
• Largeur de gouttière : 1

Ensuite, ajoutez un module de bouton à la ligne et mettez à jour les options de bouton suivantes :

• Alignement des boutons : centre
• Utiliser des styles personnalisés pour le bouton : OUI
• Taille du texte du bouton : 16px
• Couleur du texte du bouton : #ffffff
• Largeur de la bordure du bouton : 0px
• Espacement des lettres des boutons : 9px
• Poids de la police : léger
• Style de police : TT
• Icône du bouton : flèche vers la droite

Rotation et positionnement du bouton

Pour faire pivoter et positionner le bouton, nous utiliserons une combinaison de marges et transformerons la rotation comme suit :

• Marge personnalisée (bureau) : -50px en haut, 50px en bas, -50px à gauche
• Marge personnalisée (tablette) : 0px restant
• Transformer Rotation Axe X: 90deg

Cette fois, le bouton est tourné de 90 degrés (dans le sens des aiguilles d'une montre) afin d'obtenir un affichage vertical de haut en bas pour le texte. Cela semble être approprié puisque nous voulons que l'utilisateur fasse défiler vers le bas.

Partie 2 : Rotation des modules de texte pour créer des étiquettes en diagonale

Dans cette prochaine section de la mise en page, nous allons créer trois textes de présentation avec des modules de texte pivotés utilisés comme étiquettes. C'est un excellent moyen d'afficher les éléments en vedette sur votre page.

Voici comment procéder.

Créez une nouvelle section régulière avec une ligne à trois colonnes. Ajoutez ensuite un module de présentation à la première colonne.

Choisissez d'utiliser l'icône d'ampoule au lieu de l'image par défaut.

Ensuite, mettez à jour le module de présentation comme suit :

• Couleur de l'icône : #f6454e
• Taille de la police de l'icône : 32 px
• Rembourrage personnalisé : 3vw en bas, 3vw à gauche, 3vw à droite

Ensuite, mettez à jour les paramètres de ligne comme suit :

• Couleur de fond de la colonne 1 : #eeeeee
• Couleur de fond de la colonne 2 : #eeeeee
• Couleur de fond de la colonne 3 : #eeeeee
• Égaliser les hauteurs de colonne : OUI

Cette prochaine étape est cruciale lorsque nous ajoutons notre conception d'étiquette de module de texte pivoté. Nous voulons que le débordement du module de texte soit masqué en dehors de la colonne. Pour nous assurer que cela se produise, nous devons ajouter la propriété "overflow: hidden" à chacune des colonnes en tant que CSS personnalisé.

Sous l'onglet avancé, ajoutez le CSS personnalisé suivant :

Colonne 1 Élément principal CSS :

overflow: hidden;

Colonne 2 Élément principal CSS :

overflow: hidden;

Colonne 3 Élément principal CSS :

overflow: hidden;

Ajout et rotation du module de texte en tant qu'étiquette

Ensuite, ajoutez un module de texte juste au-dessus du module de présentation dans la colonne 1.

Mettez à jour le contenu du texte avec le mot « En vedette ».

Ensuite, stylisez le module de texte comme suit :

• Couleur de fond : #f6454e
• Police du texte : Muli
• Poids de la police de texte : demi-gras
• Texte Couleur du texte : #ffffff
• Espacement des lettres du texte : 3px
• Hauteur de la ligne de texte : 2,5 em
• Orientation du texte : centre

Donnez maintenant au module de texte une largeur personnalisée comme suit :

• Largeur : 180px
• Alignement du module : à gauche

Ensuite, positionnez le module de texte dans le coin supérieur gauche de la colonne à l'aide des options de transformation suivantes :

• Transformer traduire l'axe X : -25 %
• Transformer traduire l'axe Y : 70 %

Il est important d'utiliser des valeurs en pourcentage ici pour rendre la conception plus réactive, vous devrez donc les saisir manuellement.

Transformation Rotation Axe X : -45 deg

Notez que le débordement du module de texte est masqué à l'extérieur de la colonne pour terminer la conception.

Il ne nous reste plus qu'à copier les modules dans la première colonne et les coller dans les colonnes 2 et 3.

Voici le résultat final.

Partie 3 : Création de titres verticaux pour votre contenu

Cette partie suivante de la mise en page utilise des techniques similaires pour faire pivoter et positionner un module de texte en tant que titre vertical pour votre contenu. Il s'agit d'une mise en page utile pour présenter des éléments tels que des services. Je vais également montrer une manière créative d'utiliser des listes pour créer un en-tête vertical unique.

Voici comment procéder.

Créez une nouvelle section régulière avec une ligne à une colonne.

Copiez ensuite l'un des modules de présentation dans la rangée à trois colonnes de la mise en page ci-dessus. Cela nous donnera une longueur d'avance sur la conception.

Mettez ensuite à jour les paramètres du texte de présentation comme suit :

• Placement de l'image/du flou : à gauche
• Marge personnalisée (bureau) : 200 pixels restants
• Marge personnalisée (téléphone) : 0px restant
• Rembourrage personnalisé : 100 pixels en haut, 100 pixels en bas

La marge de gauche crée l'espace dont nous aurons besoin pour le module de texte vertical que nous ajouterons.

Ajoutez ensuite une bordure au module de présentation comme suit :

• Largeur de la bordure : 2px
• Couleur de la bordure : #eeeeee

Création du module de texte

Avec le contenu de présentation en place, nous pouvons maintenant ajouter notre module de texte. Créez un nouveau module de texte, puis placez-le directement au-dessus du module de présentation.

Après cela, ajoutez le code html suivant dans la zone de contenu (assurez-vous que l'onglet texte est sélectionné) :

<ol>
  <li><h5>Design</h5>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
    </ul>
  </li>
</ol>

C'est html qui utilise une liste ordonnée (ol), une balise h5 et une liste non ordonnée (ul). Cela nous permet de personnaliser chacun des éléments de la liste et le h5 séparément en utilisant les options de conception intégrées de Divi dans le module de texte.

Cette technique peut être utilisée pour créer des conceptions de liste étonnantes.

Ensuite, passez à l'onglet Conception et mettez à jour les éléments suivants :

• Police de la liste non ordonnée : Muli
• Poids de la police de liste non ordonnée : léger
• Taille du texte de la liste non ordonnée : 15 px
• Type de style de liste non ordonné : aucun
• Retrait d'élément de liste non ordonné : 0,01 px

• Police de la liste ordonnée : Abril Fatface
• Couleur du texte de la liste commandée :
• Taille du texte de la liste commandée : 40 px
• Espacement des lettres de la liste ordonnée : 4px
• Hauteur de la ligne de liste commandée : 1,3 em
• Type de style de liste ordonnée : zéro non significatif décimal

• Police de titre 5 : Muli
• Titre 5 Poids de la police : ultra léger
• Titre 5 Style de police : TT
• Titre 5 Taille du texte : 62px

Dimensionnement, rotation et positionnement du module de texte

Maintenant que la conception du texte est en place, donnons-lui une largeur personnalisée. N'oubliez pas que la largeur du module deviendra la hauteur du module une fois que nous le ferons pivoter pour l'afficher verticalement.

• Largeur personnalisée : 300px
• Alignement du module : à gauche

Pour faire pivoter le texte, mettez à jour les éléments suivants :

• Transformation Rotation Axe X : -90 degrés (ordinateur de bureau), 0 degrés (téléphone)

Nous devons réinitialiser la rotation à 0 deg pour l'affichage du téléphone.

Mettez ensuite à jour l'option Transformer la traduction :

• Transformer traduire l'axe X : -10 % (ordinateur de bureau), 0 % (téléphone)
• Transformer l'axe des Y : 50 % (ordinateur de bureau), 0 % (téléphone)

Les paramètres de transformation ajustent légèrement la position du module de texte. Mais, pour obtenir notre espacement correct, nous devons remplacer l'espace négatif laissé par le module de texte au-dessus du module de présentation. Pour ce faire, nous devons ajouter une marge inférieure négative au module de texte comme suit :

• Marge personnalisée (bureau): -150px bas
• Marge personnalisée (téléphone) : 0px en bas

Dupliquer la section et mettre à jour le numéro de début de la liste commandée

Pour créer plus de sections de cette mise en page, vous pouvez dupliquer la section. Le numéro de la liste ordonnée sera toujours « 1 ». Pour changer cela, vous devez remplacer la balise d'ouverture de la liste ordonnée (ol) par la suivante :

<ol start="2">

Cela permettra à la liste de commencer par le numéro 2 au lieu de 1.

C'est ça. Nous avons tous terminé !

Conception finale de la mise en page avec des conceptions de texte pivotées

Bureau

Tablette et téléphone

Dernières pensées

Savoir comment faire pivoter du texte (ou n'importe quel contenu) dans Divi est un excellent moyen d'attirer l'attention sur votre contenu. De plus, si vous le faites correctement, cela peut vraiment faire ressortir le design. J'espère que ce didacticiel vous donnera de l'inspiration sur la façon dont vous pouvez implémenter la rotation du texte pour des designs encore plus beaux.

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

À votre santé!