Parfois, la conception damp;rsquoun site Web nécessite des éléments circulaires. Camp;rsquoest une bonne façon de se débarrasser de la monotonie de conception de boîte standard sur le Web. La création damp;rsquoun élément circulaire peut sembler simple (camp;rsquoest vrai!), Cependant, si ne connaissez pas certaines règles de base, pourriez rencontrer des obstacles inutiles qui pourraient frustrer. Par exemple, il est parfois difficile damp;rsquoaligner et damp;rsquoajuster correctement le contenu damp;rsquoun élément circulaire. Alternativement, pourriez avoir du mal à faire en sorte que le cercle réponde à votre appareil mobile. Pour cette raison, certaines personnes se tournent vers lamp;rsquoutilisation damp;rsquoimages de fond circulaires comme contenu. Mais si ne voulez pas utiliser un fond damp;rsquoimage personnalisé, la prochaine meilleure option est damp;rsquoutiliser 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. voulez donner une forme circulaire à lamp;rsquoélément dans Divi, cet article convient.
Dans ce tutoriel, je guiderai dans les bases de la création damp;rsquoéléments circulaires, y compris des sections, des lignes et des modules, dans Divi. Ensuite, je vais montrer à quel point il est facile de mettre en œuvre ces techniques sur une mise en page prédéfinie. Regarde ça! Un voyeur. Pour obtenir un exemple damp;rsquoélément circulaire conçu dans ce tutoriel, devez damp;rsquoabord le en utilisant les boutons ci dessous. Pour accéder au téléchargement, devez abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci dessous. En tant que nouvel utilisateur, recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! êtes déjà sur la liste, il suffit de saisir votre adresse e mail ci dessous et cliquez sur . Vous ne serez pas « ré abonné » ou recevrez un courriel supplémentaire.
Télécharger le fichier
Téléchargement gratuit Abonnez à notre newsletter
Partagez et envoyez par courriel une copie du dernier paquet de mise en page de la page damp;rsquoatterrissage Divi, ainsi quamp;rsquoun grand nombre damp;rsquoautres ressources, conseils et astuces Divi gratuits étonnants. Suivez nous et serez bientôt maître Divi. êtes déjà abonné, entrez votre adresse e mail ci dessous et 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 damp;rsquoextraire le fichier zip et de faire glisser le fichier json dans Divi Builder.
On va voir le tutoriel, non? Ce que devez faire est de créer une nouvelle page dans Divi. Vous fournissez ensuite le titre de la page et distribuez Divi Builder à lamp;rsquoavant. Sélectionnez lamp;rsquooption 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, jamp;rsquoutiliserai Divi Builder pour les appliquer au formulaire damp;rsquoinvitation à lamp;rsquoaction.
É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 damp;rsquoabord transformer lamp;rsquoélément en un carré parfait, puis en un cercle parfait. Dans ce cas, nous lançons un appel à lamp;rsquoaction à 10 VW de hauteur et de largeur. Étape 2: ajouter un rayon de bord de 50% aux quatre coins Étape 2: ajouter un rayon de bord de 50% aux quatre coins Étape 2: ajouter un rayon de bord de 50% aux quatre coins Dans Divi, pouvez changer le rayon du bord du projet sous lamp;rsquooption appelée filet.
Étape 3: ajuster le compte
Le texte sur lamp;rsquoappareil mobile peut devenir trop petit. Jamp;rsquoaime utiliser des unités de longueur VW pour les titres, puis redimensionner le texte en pixels au besoin.
De plus, si prévoyez conserver la conception de lamp;rsquoélément circulaire sur lamp;rsquoécran de votre téléphone, devez minimiser le contenu et redimensionner lamp;rsquoélément circulaire pour maximiser lamp;rsquoespace. Avec notre exemple actuel, 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) Comme pouvez le voir, tout est maintenant parfait pour les éléments circulaires sur lamp;rsquoécran du téléphone.
Et les pixels? Camp;rsquoest bien si voulez redimensionner le cercle en unités de longueur absolue, comme les pixels. Il suffit de assurer et damp;rsquoeffectuer les changements de taille nécessaires à chaque point damp;rsquoarrêt affiché sur la tablette et le téléphone pour assurer que lamp;rsquoélément circulaire samp;rsquoadapte à la fenêtre du navigateur. Dans certains cas, il est plus facile damp;rsquoobtenir la bonne taille (ou plus exactement) sur la tablette et lamp;rsquoécran du téléphone en utilisant des pixels. Par exemple, nous utilisons le même formulaire damp;rsquoaction damp;rsquoappel 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 Ce Design ressemble beaucoup au Bureau, mais chaque fois que regardez un élément circulaire sur lamp;rsquoécran de votre téléphone, des problèmes surgissent. Comme lamp;rsquoélément circulaire est redimensionné en pixels (en unités de longueur absolue), il samp;rsquoétend au delà du conteneur et du navigateur sur lamp;rsquoécran du téléphone. Camp;rsquoest pourquoi la réglementation
Déplace la densité et remplit les valeurs de pixels sur lamp;rsquoécran. Par exemple, 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? voulez une solution plus réactive pour les éléments circulaires, pourriez penser que lamp;rsquoutilisation de pourcentages est la réponse. Cependant, lorsque 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 lamp;rsquoélément reste généralement la valeur par défaut (hauteur: voiture). Par exemple, si essayez de régler la hauteur de 100% au module Divi, le module ne samp;rsquoajustera pas parce que le conteneur principal (colonnes, lignes, sections, etc.) Ils ont tous une valeur damp;rsquoaltitude incertaine. Le navigateur namp;rsquoa pas tenté de définir le module à tout (il ne peut pas). Ce namp;rsquoest 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. Camp;rsquoest pourquoi le% de longueur unitaire namp;rsquoest pas le meilleur choix lorsque 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 quamp;rsquoil est difficile damp;rsquoutiliser 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 damp;rsquoappliquer des CSS plus personnalisés aux éléments principaux. Mais pour créer des éléments circulaires dans Divi, pouvez trouver plus facile damp;rsquoutiliser VW par Unit é de longueur. Aligner le contenu damp;rsquoun élément de boucle si voulez aligner le contenu damp;rsquoun élément de boucle, il y a en fait deux options
Guide utile pour la conception des éléments circulaires dans Divi
