Ritto, tapez votre adresse e mail ci dessous, puis cliquez sur pour accéder au paquet Layout. 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 drsquoextraire 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é? voulez faire tourner le texte dans une vue verticale, ne pouvez pas déterminer la direction de rotation du texte. Le texte peut être tourné dans le sens contraire des aiguilles drsquoune montre pour être lu de bas en haut. Alternativement, pouvez faire tourner le texte dans le sens des aiguilles drsquoune montre pour le lire de haut en bas. voulez savoir lequel est le plus facile à lire, je ne suis pas sûr qursquoil y ait une réponse. Vous pouvez essayer de trouver des indices sur la direction du titre sur lrsquoétagère. Mais les pratiques varient drsquoun pays à lrsquoautre (la norme américaine est dans le sens des aiguilles drsquoune montre, du haut vers le bas).
Dans ce tutoriel, je vais tourner le texte dans le sens contraire des aiguilles drsquoune montre dans la plupart des cas, principalement parce que jrsquoaime 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 nrsquohésitez pas à essayer différentes directions. Sur certains navigateurs, comme chrome et Safari, le texte devient un peu flou lorsque utilisez les attributs de rotation de la transformation. Pour résoudre ce problème, pouvez ajouter une valeur drsquoorigine de transformation de 51% ou 52% le long de lrsquoaxe des X. cela devrait résoudre ce problème.
Partie 1: construction de titres à lrsquoaide 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 lrsquooption 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 drsquoutiliser les valeurs en pourcentage ici pour rendre la conception plus réactive, donc devez les saisir manuellement. Changer la roue de lrsquoaxe X: 45° Notez que le débordement du formulaire texte est caché à lrsquoexté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. Crsquoest 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 srsquoagit drsquoune disposition utile pour afficher du contenu tel qursquoun 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 lrsquoun 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 drsquoimage 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 lrsquoespace 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 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 que lrsquoonglet texte est sélectionné):
Conception
Lorem ipsum dolor sit amet
Il srsquoagit drsquoun 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 à lrsquoonglet 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 drsquoé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. Nrsquooubliez pas qursquoune fois lrsquoaffichage 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 lrsquoaxe 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 lrsquoespacement correct, nous devons remplacer lrsquoespace 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, pouvez copier des sections. Le numéro de la liste triée restera lsquo1rsquo. Pour modifier ce paramètre, devez remplacer lrsquoétiquette de liste ordonnée commençant par:
Cela permettra à la liste de commencer par le numéro 2 au lieu de 1. Crsquoest tout. On a fini! Utilisation drsquoun 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 drsquoattirer lrsquoattention sur le contenu. De plus, si le faites bien, il peut vraiment rendre le design incroyable. Jrsquoespère que ce tutoriel montrera comment faire tourner le texte pour de meilleurs projets. Jrsquoai hâte drsquoentendre vos commentaires. Bonjour!
