Un guide utile pour concevoir des éléments circulaires dans Divi
Publié: 2019-05-01De temps en temps, la conception d'un site Web nécessite des éléments circulaires. C'est un bon moyen de sortir de la monotonie des conceptions de boîtes standard sur une page Web. Créer des éléments circulaires peut sembler simple (et c'est en fait !), mais si vous n'êtes pas familier avec quelques règles de base, vous pouvez rencontrer quelques obstacles inutiles qui peuvent être assez frustrants.
Par exemple, il est parfois difficile d'aligner le contenu et de l'adapter à l'intérieur d'un élément en forme de cercle avec l'espacement correct. Ou vous pouvez trouver difficile de rendre le cercle réactif pour les appareils mobiles. Pour cette raison, certains ont plutôt eu recours à un arrière-plan d'image circulaire pour le contenu. Mais si vous ne souhaitez pas utiliser d'arrière-plan d'image personnalisé, votre meilleur pari est d'utiliser CSS. La bonne nouvelle est que Divi élimine le besoin de créer votre propre CSS personnalisé pour créer des éléments circulaires, ce qui facilite grandement le processus. Donc, si jamais vous avez voulu donner à un élément une forme de cercle dans Divi, ce post est fait pour vous.
Dans ce tutoriel, je vais vous expliquer les bases de la création d'éléments circulaires dans Divi (y compris les sections, les lignes et les modules). Ensuite, je vais vous montrer à quel point il est facile de mettre en œuvre ces techniques sur une mise en page prédéfinie.
Vérifiez-le!
Aperçu
Téléchargez l'exemple de mise en page des éléments circulaires GRATUITEMENT
Pour mettre la main sur les exemples d'éléments circulaires conçus dans ce tutoriel, vous devrez d'abord le 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 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.
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.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, créez une nouvelle page dans Divi. Donnez ensuite un titre à votre page et déployez le constructeur Divi sur le front-end. Sélectionnez l'option « construire à partir de zéro ».
Nous ajouterons également une mise en page prédéfinie à notre page un peu plus tard, mais pour l'instant, nous pouvons commencer à créer à partir de zéro.
Maintenant, vous êtes prêt à partir!
Les trois étapes de base pour créer un élément circulaire
Il y a vraiment trois étapes simples pour créer un élément circulaire. Pour illustrer ces étapes, je vais appliquer ces étapes à un module d'appel à l'action à l'aide de Divi Builder.
Étape 1 : élément de taille avec des valeurs de hauteur et de largeur égales
La première étape consiste à définir la hauteur et la largeur sur la même valeur égale. Fondamentalement, nous voulons faire de l'élément un carré parfait avant d'en faire un cercle parfait. Dans cet exemple, donnons au module d'appel à l'action une hauteur et une largeur de 10vw.
Étape 2 : Ajoutez un rayon de bordure de 50 % pour les quatre coins
La deuxième étape consiste à définir le rayon de la bordure de l'élément (ou du module) à 50 % aux quatre coins. Dans Divi, vous pouvez modifier le rayon de la bordure d'un élément sous l'option intitulée « Coins arrondis ».
Étape 3 : Aligner le contenu dans l'élément circulaire
La troisième étape consiste à aligner le contenu de l'élément circulaire. Nous pouvons le faire en ajustant le remplissage de l'élément. (En outre, je couvre un moyen d'utiliser flex pour centrer verticalement le contenu plus tard dans cet article)
Dans cet exemple, nous pouvons ajouter le remplissage suivant pour rapprocher notre contenu du centre de l'élément circulaire :
Rembourrage personnalisé : 18vw en haut, 3vw à gauche, 3vw à droite
Bien sûr, il y a encore des ajustements qui peuvent être nécessaires pour s'assurer que le texte/contenu s'adapte à l'intérieur de l'élément circulaire sur mobile, mais cela couvre la configuration de base.
Vous remarquerez peut-être que j'ai utilisé l'unité de longueur vw pour dimensionner et espacer mon élément circulaire. Ceci est utile pour créer un design réactif plus cohérent. Je vais t'expliquer.
Utilisation d'unités de longueur relative pour rendre les éléments circulaires réactifs
Utilisation de l'unité de longueur VW pour la hauteur et la largeur
De toutes les unités de longueur relative, l'unité de longueur vw est l'une de mes préférées pour la conception réactive. Étant donné que l'unité de longueur vw est relative à la largeur de la fenêtre du navigateur (et non à l'élément parent), vous pouvez obtenir une conception cohérente qui s'ajuste en douceur à la taille de la fenêtre du navigateur.
Jetons un coup d'œil à notre exemple de module d'appel à l'action circulaire lorsque je réduis la largeur du navigateur.
Utilisation de l'unité de longueur VW pour le contenu des éléments circulaires
L'utilisation de l'unité de longueur vw pour la taille et le contenu des éléments circulaires est une bonne combinaison pour une conception réactive. Fondamentalement, cela permet au contenu (comme le texte ou les images) de s'adapter de manière transparente à la taille de l'élément de cercle pour une conception cohérente sur tous les navigateurs. Cependant, vous devez faire attention à l'utilisation de l'unité de longueur vw pour le corps du texte, car le texte peut devenir beaucoup trop petit sur mobile. J'aime utiliser l'unité de longueur vw pour les en-têtes, puis ajuster la taille du corps du texte avec des pixels selon les besoins.
De plus, si vous prévoyez de conserver la conception de l'élément circulaire sur l'écran du téléphone, vous devrez réduire votre contenu au minimum et ajuster la taille de l'élément circulaire pour un espace maximum.
En utilisant notre exemple actuel, vous pouvez donner à votre texte de titre une valeur de longueur vw, puis redimensionner le module sur mobile comme suit :
Taille du texte du titre : 4vw
Largeur (téléphone): 70vw
Hauteur (téléphone : 70vw
Comme vous pouvez le voir, tout le contenu se trouve désormais parfaitement dans l'élément circulaire sur l'écran du téléphone.
Et les Pixels ?
Si vous souhaitez utiliser des unités de longueur absolue (comme des pixels) pour dimensionner votre cercle, c'est parfaitement bien. Vous aurez juste besoin de vous assurer et d'effectuer les ajustements de taille nécessaires à chaque point d'arrêt pour l'affichage de la tablette et du téléphone afin de vous assurer que l'élément circulaire s'adapte à l'intérieur de la fenêtre du navigateur. Dans certains cas, il peut être plus facile d'utiliser des pixels pour obtenir le bon dimensionnement (ou plus exact) sur les écrans des tablettes et des téléphones.
Par exemple, prenons le même module d'appel à l'action et utilisons des pixels (au lieu de vw) pour dimensionner et espacer notre module.
Vous pouvez mettre à jour la hauteur, la largeur et le remplissage comme suit :
Largeur : 500px
Hauteur : 500px
Rembourrage personnalisé : 200 pixels en haut, 20 pixels à gauche, 20 pixels à droite
Cette conception sera similaire sur le bureau, mais le problème survient chaque fois que vous affichez l'élément circulaire sur l'écran du téléphone. Étant donné que l'élément circulaire est dimensionné à l'aide de pixels (une unité de longueur absolue), l'élément circulaire s'étendra à l'extérieur du conteneur et du navigateur sur l'écran du téléphone.
C'est pourquoi il est important d'ajuster la largeur et les valeurs de pixel de remplissage sur les écrans mobiles. Par exemple, vous devrez peut-être modifier la largeur et la hauteur à 300 pixels à la place.
Pourquoi l'unité % de longueur ne fonctionne pas vraiment bien pour le dimensionnement d'éléments circulaires
Si vous souhaitez une solution plus réactive pour les éléments circulaires, vous pouvez penser que l'utilisation de pourcentages est la solution. Cependant, lors du dimensionnement des éléments sur une page Web, l'unité de longueur en pourcentage pour la hauteur ne fonctionne pas de la même manière que l'unité de longueur en pourcentage pour la largeur. En effet, la hauteur par défaut des éléments est généralement laissée à la valeur par défaut (hauteur : auto). Ainsi, par exemple, si vous essayez de donner 100% de hauteur à un module Divi, le module ne s'ajustera pas car les conteneurs parents (colonne, ligne, section, etc.) ont tous une valeur indéfinie pour la hauteur. Le navigateur n'essaie pas fondamentalement de définir le module à 100% de rien (ce qu'il ne peut pas). Ce n'est pas le cas pour la largeur. La largeur par défaut de tout élément de bloc (ou div) est de 100 %. Ainsi, toutes les sections, lignes et modules ont cette largeur par défaut de 100 %, à moins qu'ils ne soient modifiés par les paramètres. C'est pourquoi l'unité de longueur % n'est pas la meilleure option à utiliser lorsque vous essayez de créer un élément circulaire réactif. L'élément circulaire doit avoir la même hauteur et la même largeur sur toutes les tailles de navigateur, il est donc difficile d'y parvenir en utilisant une unité de longueur en pourcentage pour la hauteur. Cependant, il existe des moyens de faire fonctionner 100% de hauteur et de largeur avec des CSS plus personnalisés appliqués aux éléments parents. Mais pour créer des éléments circulaires dans Divi, vous trouverez peut-être plus facile de travailler avec l'unité de longueur vw.
Alignement du contenu dans un élément circulaire
Si vous souhaitez aligner du contenu au sein d'un élément circulaire, vous avez vraiment deux options que je considérerais simples lors de l'utilisation de Divi. Vous pouvez utiliser le remplissage pour aligner le contenu, ce qui vous donne plus de contrôle sur l'endroit où vous souhaitez que le contenu soit affiché dans l'élément cercle. Ou vous pouvez utiliser la propriété flex (avec remplissage) pour vous assurer que le contenu est affiché directement au centre du cercle.
Alignement du contenu de l'élément circulaire avec le remplissage
Pour aligner le contenu à l'intérieur d'un élément de cercle à l'aide du remplissage, je suggérerais d'utiliser une unité de longueur relative (comme % ou vw) afin que le remplissage augmente ou diminue avec la taille du conteneur ou la largeur du navigateur. Vous ne voulez pas utiliser d'unités de longueur absolue pour le remplissage à l'intérieur d'un élément circulaire qui est dimensionné à l'aide d'unités relatives. Le résultat serait incohérent et le design se briserait sur mobile. Par exemple, si vous aviez un élément circulaire qui avait une hauteur de 10vw et une largeur de 10vw. Cet élément diminuerait en taille à mesure que le navigateur diminuerait en largeur. Si vous ajoutiez un rembourrage de 100px en haut de l'élément, les 100px resteraient à chaque fois que vous ajustez la largeur du navigateur et cassez le design. Cependant, si vous ajoutiez un rembourrage 3vw, ce rembourrage s'ajusterait bien avec l'élément.
C'est pourquoi j'ai suggéré d'utiliser le remplissage vw dans notre exemple de module d'appel à l'action.
Alignement du contenu de l'élément circulaire avec la propriété Flex
Si vous ne voulez pas trop vous soucier de la mise en place des rembourrages supérieur et inférieur pour vous assurer que le contenu est centré verticalement, vous pouvez utiliser la propriété flex. En ajoutant quelques extraits de css au parent (élément circulaire), vous pouvez vous assurer que tout le contenu reste centré verticalement. Ensuite, vous pouvez utiliser l'alignement, le remplissage ou la marge pour vous assurer que le contenu reste également centré horizontalement.
Voici ce que je veux dire.
En utilisant notre exemple, ouvrez les paramètres du module d'appel à l'action.
Réglez ensuite les rembourrages supérieur et inférieur sur 0px.
Accédez ensuite à l'onglet avancé et ajoutez l'extrait de code CSS suivant à l'élément principal :
display:flex; align-items: center;
Pour ce module particulier, il y a un peu de rembourrage supplémentaire sous la description de la promo qui va perturber un peu l'alignement. Vous pouvez donc vous en débarrasser en ajoutant le CSS suivant à la description de la promotion :
padding-bottom: 0px
Consultez cet article sur la façon d'aligner verticalement le contenu pour plus d'informations.
Mise en pratique : ajout d'éléments circulaires à une mise en page prédéfinie
Maintenant que vous comprenez mieux comment créer des éléments circulaires dans Divi, voyons comment cela pourrait fonctionner sur une mise en page réelle. Pour cet exemple, je vais utiliser la page de destination Farmer de Divi du Farmer Layout Pack.
Chargez la mise en page de la page de destination des agriculteurs sur votre page
Pour commencer, ajoutons d'abord la mise en page Farmer Landing Page à la page. Pour ce faire, ouvrez le menu des paramètres et le bas du Divi Builder et cliquez sur le bouton charger depuis la bibliothèque. Dans la fenêtre contextuelle de chargement à partir de la bibliothèque, recherchez le pack de mise en page Farmer et sélectionnez-le. Cliquez ensuite pour utiliser la page de destination des agriculteurs.
Cela chargera la mise en page sur la page.
Créer un en-tête de section circulaire
Pour le premier exemple, nous allons convertir la section d'en-tête supérieure de la mise en page en un élément circulaire. Pour ce faire, nous utiliserons nos trois règles de base :
1 : élément de taille avec des valeurs de hauteur et de largeur égales
2: Ajouter un rayon de bordure de 50% pour les quatre coins
3: Aligner le contenu dans l'élément circulaire
Ouvrez les paramètres de la section et mettez à jour les éléments suivants :
Largeur : 70vw (ordinateur de bureau), 70vw (tablette), 80vw (téléphone)
Largeur maximale : 1080px
Alignement de la section : centre
Hauteur : 70vw (ordinateur de bureau), 70vw (tablette), 80vw (téléphone)
Hauteur maximale : 1080px
Notez que j'ai ajouté des valeurs de hauteur et de largeur supplémentaires pour la tablette et le téléphone et j'ai également ajouté une hauteur et une largeur maximales. L'important est de vous assurer que toutes les valeurs de hauteur et toutes les valeurs de largeur sont égales.
Maintenant, nous devons ajouter notre rayon de bordure de 50% aux quatre coins.
Coins arrondis : 50 % (les quatre coins)
Puisqu'il s'agit d'une section, le contenu comprend une ligne à deux colonnes avec plusieurs modules. Avec autant de contenu, nous devons faire quelques ajustements de taille aux modules pour nous assurer que le contenu s'intègre dans la section.
Tout d'abord, ouvrez les paramètres du module de texte supérieur dans la colonne 1 qui contient le titre de la section. Ensuite, mettez à jour la taille du texte du titre comme suit :
en-tête Taille du texte: 4vw
Diminuez ensuite la quantité de corps de texte dans le module de texte directement sous le module de texte contenant l'en-tête.
Nous pouvons maintenant aligner le contenu en ajustant l'espacement de la ligne. Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :
Marge personnalisée : 10vw top (ordinateur de bureau), 5vw (tablette), 0vw (téléphone)
Rembourrage personnalisé : 3vw à gauche, 3vw à droite
Pour rendre la forme du cercle plus visible, nous pouvons ajouter un séparateur de section supérieure et déplacer la position de l'image d'arrière-plan en haut à gauche.
Voyons maintenant le résultat.
Créer des modules de présentation circulaires
Essayons maintenant de faire quelques présentations circulaires sur cette mise en page. Pour cet exemple, utilisons les quatre modules de présentation sous la section intitulée « Nos produits ». Une fois que vous l'avez trouvé, ouvrez les paramètres du module de présentation en haut de la colonne 2.
Mettez ensuite à jour la taille du module comme suit :
Largeur de l'image : 7vw
Largeur : 50vw (bureau), 80vw (téléphone)
Largeur maximale : 400 px
Alignement du module : centre
Hauteur : 50vw (bureau), 80vw (téléphone)
Hauteur maximale : 400 pixels
Ensuite, ajoutez votre rayon de bordure ou vos coins arrondis :
Coins arrondis : 50 %
Après cela, mettons à jour la conception et l'espacement du contenu comme suit :
Placement des images/icônes : en haut
Taille du texte du titre : 2vw (ordinateur de bureau), 20px (tablette)
Orientation du texte : centre
Rembourrage personnalisé : 0vw en haut, 0vw en bas, 4vw à gauche, 4vw à droite
Enfin, alignons verticalement le contenu à l'aide de la propriété flex en ajoutant le CSS personnalisé suivant à l'élément principal :
display: flex; align-items: center;
Étendre le style circulaire à tous les éléments de présentation de la section
Cela prend en charge la conception circulaire de notre premier module. Il ne nous reste plus qu'à étendre les paramètres de conception du module de présentation aux trois autres présentations de la section. Pour ce faire, faites un clic droit sur le module de présentation que nous venons de concevoir et sélectionnez "Étendre les styles de présentation". Dans la fenêtre contextuelle Étendre les styles, sélectionnez pour étendre le style dans toute la section.
Résultat final
Voyons maintenant le résultat final.
Dernières pensées
J'espère que vous avez appris quelques conseils utiles sur la façon de créer des éléments circulaires dans Divi. En comprenant trois étapes de base et en utilisant correctement les unités de longueur pour dimensionner et espacer votre élément, vous pouvez créer assez facilement le design circulaire que vous recherchez. Et, il peut être vraiment amusant d'incorporer des éléments circulaires sur une mise en page Divi existante ou prédéfinie. N'hésitez pas à explorer la création de modules circulaires, de rangées ou même de sections entières !
J'ai hâte de vous entendre dans les commentaires.
À votre santé!