Guide utile pour la conception des éléments circulaires dans Divi
Parfois, la conception d’un site Web nécessite des éléments circulaires. C’est une bonne façon de se débarrasser de la monotonie de conception de boîte standard sur le Web. La création d’un élément circulaire peut sembler simple (c’est vrai!), Cependant, si vous ne connaissez pas certaines règles de base, vous pourriez rencontrer des obstacles inutiles qui pourraient vous frustrer. Par exemple, il est parfois difficile d’aligner et d’ajuster correctement le contenu d’un élément circulaire. Alternativement, vous pourriez avoir du mal à faire en sorte que le cercle réponde à votre appareil mobile. Pour cette raison, certaines personnes se tournent vers l’utilisation d’images de fond circulaires comme contenu. Mais si vous ne voulez pas utiliser un fond d’image personnalisé, la prochaine meilleure option est d’utiliser CSS. La bonne nouvelle est que Divi élimine la nécessité de créer ses propres CSS personnalisés pour créer des éléments de boucle, ce qui facilite le processus. Si vous voulez donner une forme circulaire à l’élément dans Divi, cet article vous convient.
Dans ce tutoriel, je vous guiderai dans les bases de la création d’éléments circulaires, y compris des sections, des lignes et des modules, dans Divi. Ensuite, je vais vous montrer à quel point il est facile de mettre en œuvre ces techniques sur une mise en page prédéfinie. Regarde ça! Un voyeur.
Télécharger le fichier 
Téléchargement gratuit Abonnez – vous à notre newsletter
Partagez et envoyez – vous par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits étonnants. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et 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.
On va voir le tutoriel, non? Ce que vous devez faire est de créer une nouvelle page dans Divi. Vous fournissez ensuite le titre de la page et distribuez Divi Builder à l’avant. Sélectionnez l’option construire à partir de zéro. Nous ajouterons également la mise en page par défaut à la page plus tard, mais nous pouvons maintenant la construire à partir de zéro. Maintenant tu es prêt! Trois étapes de base pour créer un élément circulaire il y a en fait trois étapes simples pour créer un élément circulaire. Pour illustrer ces étapes, j’utiliserai Divi Builder pour les appliquer au formulaire d’invitation à l’action.
Étape 1: redimensionner un élément avec des valeurs égales de hauteur et de largeur la première étape consiste à définir la hauteur et la largeur à la même valeur égale. En gros, nous voulons d’abord transformer l’élément en un carré parfait, puis en un cercle parfait. Dans ce cas, nous lançons un appel à l’action à 10 VW de hauteur et de largeur.
Le texte sur l’appareil mobile peut devenir trop petit. J’aime utiliser des unités de longueur VW pour les titres, puis redimensionner le texte en pixels au besoin.
De plus, si vous prévoyez conserver la conception de l’élément circulaire sur l’écran de votre téléphone, vous devez minimiser le contenu et redimensionner l’élément circulaire pour maximiser l’espace. Avec notre exemple actuel, vous pouvez spécifier une valeur de longueur VW pour le texte du titre, puis redimensionner le formulaire sur votre téléphone comme suit: taille du texte du titre: 4vw largeur (téléphone): 70vw hauteur (téléphone: 70vw)
Et les pixels? C’est bien si vous voulez redimensionner le cercle en unités de longueur absolue, comme les pixels. Il vous suffit de vous assurer et d’effectuer les changements de taille nécessaires à chaque point d’arrêt affiché sur la tablette et le téléphone pour vous assurer que l’élément circulaire s’adapte à la fenêtre du navigateur. Dans certains cas, il est plus facile d’obtenir la bonne taille (ou plus exactement) sur la tablette et l’écran du téléphone en utilisant des pixels. Par exemple, nous utilisons le même formulaire d’action d’appel et utilisons des pixels au lieu de VW pour redimensionner et espacer le formulaire.
Vous pouvez mettre à jour la hauteur, la largeur et le remplissage comme suit: largeur: 500 Px hauteur: 500 Px remplissage personnalisé: 200 Px en haut, 20 Px à gauche, 20 Px à droite
Déplace la densité et remplit les valeurs de pixels sur l’écran. Par exemple, vous devrez peut – être changer la largeur et la hauteur à 300 Px. Pourquoi la longueur unitaire% ne peut – elle pas bien redimensionner un élément circulaire? Si vous voulez une solution plus réactive pour les éléments circulaires, vous pourriez penser que l’utilisation de pourcentages est la réponse. Cependant, lorsque vous redimensionnez des éléments sur une page Web, les unités de pourcentage de longueur pour la hauteur fonctionnent différemment des unités de pourcentage de longueur pour la largeur. Ceci est dû au fait que la hauteur par défaut de l’élément reste généralement la valeur par défaut (hauteur: voiture). Par exemple, si vous essayez de régler la hauteur de 100% au module Divi, le module ne s’ajustera pas parce que le conteneur principal (colonnes, lignes, sections, etc.) Ils ont tous une valeur d’altitude incertaine. Le navigateur n’a pas tenté de définir le module à tout (il ne peut pas). Ce n’est pas la largeur. La largeur par défaut de tout élément de bloc (ou div) est de 100%. Par conséquent, la largeur par défaut de toutes les sections, lignes et modules est de 100%, à moins que les paramètres ne soient modifiés. C’est pourquoi le% de longueur unitaire n’est pas le meilleur choix lorsque vous essayez de créer un élément circulaire réactif. Les éléments circulaires doivent avoir la même hauteur et la même largeur sur toutes les tailles du navigateur, de sorte qu’il est difficile d’utiliser des unités de longueur en pourcentage pour représenter la hauteur. Cependant, il existe des façons de faire fonctionner la hauteur et la largeur à 100% et d’appliquer des CSS plus personnalisés aux éléments principaux. Mais pour créer des éléments circulaires dans Divi, vous pouvez trouver plus facile d’utiliser VW par Unit é de longueur.