Comment faire tourner le texte d’un projet de mise en page unique dans Divi (tutoriel + téléchargement gratuit de mise en page)

Ritto, tapez votre adresse e – mail ci – dessous, puis 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! Pour importer une mise en page dans une page, il suffit d’extraire le fichier zip et de faire glisser le fichier json dans Divi Builder.
Revenons au tutoriel. Dans quelle direction le texte doit – il être tourné? Si vous voulez faire tourner le texte dans une vue verticale, vous ne pouvez pas déterminer la direction de rotation du texte. Le texte peut être tourné dans le sens contraire des aiguilles d’une montre pour être lu de bas en haut. Alternativement, vous pouvez faire tourner le texte dans le sens des aiguilles d’une montre pour le lire de haut en bas. Si vous voulez savoir lequel est le plus facile à lire, je ne suis pas sûr qu’il y ait une réponse. Vous pouvez essayer de trouver des indices sur la direction du titre sur l’étagère. Mais les pratiques varient d’un pays à l’autre (la norme américaine est dans le sens des aiguilles d’une montre, du haut vers le bas).
Dans ce tutoriel, je vais tourner le texte dans le sens contraire des aiguilles d’une montre dans la plupart des cas, principalement parce que j’aime la façon dont le texte est affiché sur le côté gauche de la page (peut – être que je préfère incliner la tête vers la gauche). Mais n’hésitez pas à essayer différentes directions. Sur certains navigateurs, comme chrome et Safari, le texte devient un peu flou lorsque vous utilisez les attributs de rotation de la transformation. Pour résoudre ce problème, vous pouvez ajouter une valeur d’origine de transformation de 51% ou 52% le long de l’axe des X. cela devrait résoudre ce problème.
Partie 1: construction de titres à l’aide de textes verticaux Pour la première partie de la mise en page, nous créerons un titre de texte vertical. Pour ce faire, nous utiliserons l’option Transform pour faire tourner le module Blurb. Pour
Par conséquent, ajoutez un formulaire texte au – dessus du formulaire bleu dans la colonne 1. Mettre à jour le texte avec le mot « caractéristique ». Puis modélisez le formulaire de texte comme suit: couleur de fond: \ # f6454f caractères de texte: poids des caractères Multi – texte: demi – gras couleur du texte: \ # FFFFFF espacement des lettres de texte: 3px hauteur de la ligne de texte: 2,5 emtext direction: Centre Spécifiez maintenant une largeur personnalisée pour le formulaire texte comme suit: largeur: 180 Px alignement du formulaire: à gauche Ensuite, utilisez les options de conversion suivantes pour placer les modules de texte dans le coin supérieur gauche de la colonne: Transform trans X: – 25% Transform y axis: 70% il est important d’utiliser les valeurs en pourcentage ici pour rendre la conception plus réactive, donc vous devez les saisir manuellement. Changer la roue de l’axe X: – 45° Notez que le débordement du formulaire texte est caché à l’extérieur de la colonne pour compléter le projet. Tout ce que nous avons à faire est de copier les modules dans la première colonne et de les coller dans les deuxième et troisième colonnes. C’est le résultat final. Partie 3: créer un titre vertical pour le contenu La partie suivante de la mise en page utilise des techniques similaires pour faire tourner et positionner le formulaire texte comme titre vertical du contenu. Il s’agit d’une disposition utile pour afficher du contenu tel qu’un service. Je vais également démontrer une approche créative pour créer des titres verticaux vraiment uniques en utilisant des listes. Voici comment faire. Créez une nouvelle section générale avec une ligne dans la colonne. Ensuite, copiez l’un des modules Blurb dans les lignes des trois colonnes de la disposition ci – dessus. Cela nous donnera un avantage de conception. Puis mettre à jour les paramètres de flou comme suit: placement d’image \/ flou: marge personnalisée gauche (bureau): 200 Px marge personnalisée gauche (téléphone): 0px marge personnalisée gauche: 10
0 pixels vers le haut, 100 pixels vers le bas La marge de gauche crée l’espace nécessaire pour le formulaire de texte vertical que nous allons ajouter. La bordure est ensuite ajoutée au module bleu comme suit: largeur de la bordure: 2px couleur de la bordure: # eeeeee Créez un formulaire texte avec du contenu promotionnel et vous pouvez maintenant ajouter un formulaire texte. Créez un nouveau formulaire texte et placez – le directement au – dessus du formulaire bleu. Ensuite, ajoutez le HTML suivant à la zone de contenu (assurez – vous que l’onglet texte est sélectionné): Conception Lorem ipsum dolor sit amet Il s’agit d’un HTML qui utilise des listes ordonnées (OL), des balises H5 et des listes non ordonnées (UL). Cela nous permet de personnaliser chaque élément de liste et H5 dans un formulaire texte en utilisant les options de conception intégrées de Divi. Cette technique peut être utilisée pour créer de grands dessins de liste. Ensuite, allez à l’onglet conception et mettez à jour ce qui suit: caractères de la liste non ordonnée: poids des caractères de la liste non ordonnée Muli: taille du texte de la liste légère non ordonnée: 15 Px type de style de la liste non ordonnée: aucune entrée d’élément de la liste non ordonnée: 0.01px Caractères de la Liste ordonnée: Abril fatface Liste ordonnée couleur du texte: taille du texte de la Liste ordonnée: 40 Px espacement des lettres de la Liste ordonnée: 4px avec hauteur de ligne de la Liste ordonnée: 1.3 em avec type de style de la Liste ordonnée: zéro après le point décimal initial Titre de caractère 5: Muli titre 5 poids de police: ultralight titre 5 style de police: tt titre 5 taille du texte: 62px Redimensionner, tourner et positionner le formulaire texte maintenant que nous avons la conception du texte, donnons – lui une largeur personnalisée. N’oubliez pas qu’une fois l’affichage vertical tourné, la largeur du module change en hauteur du module. Largeur personnalisée: 300
Alignement du module Px: à gauche Pour faire tourner le texte, mettre à jour ce qui suit: changer le volant de l’axe X: – 90 degrés (bureau), 0 degrés (téléphone) Nous devons réinitialiser la rotation affichée par le téléphone à 0 degrés. Puis mettre à jour les options de transformation translate: Transform translate x axis: – 10% (Desktop), 0% (phone) Transform translate y axis: 50% (Desktop), 0% (phone) Les paramètres de transformation ajustent légèrement la position du formulaire texte. Cependant, pour obtenir l’espacement correct, nous devons remplacer l’espace négatif laissé par le formulaire texte au – dessus du formulaire bleu. Pour ce faire, nous devons ajouter une marge inférieure négative au formulaire de texte comme suit: marge personnalisée (bureau): – 150 Px marge personnalisée inférieure (téléphone): 0px en bas Copier une section et mettre à jour le numéro de départ de la Liste ordonnée pour créer plusieurs sections de cette disposition, vous pouvez copier des sections. Le numéro de la liste triée restera ‘1’. Pour modifier ce paramètre, vous devez remplacer l’étiquette de liste ordonnée commençant par: Cela permettra à la liste de commencer par le numéro 2 au lieu de 1. C’est tout. On a fini! Utilisation d’un bureau graphique de texte rotatif pour la mise en page finale Tablettes et téléphones portables Savoir faire tourner le texte (ou tout contenu réel) dans Divi est un bon moyen d’attirer l’attention sur le contenu. De plus, si vous le faites bien, il peut vraiment rendre le design incroyable. J’espère que ce tutoriel vous montrera comment faire tourner le texte pour de meilleurs projets. J’ai hâte d’entendre vos commentaires. Bonjour!