Tout ce que vous devez savoir sur les unités avancées de Divi 5

De grands outils de conception vous donnent le contrôle de tous les aspects de votre site Web. Qu'il s'agisse de clouer le rembourrage parfait ou de garantir des échelles de texte parfaitement entre les appareils, chaque détail compte. Divi est un compagnon de fidèle pour les concepteurs depuis des années, offrant une base solide pour créer des sites Web professionnels. Divi 5 va plus loin, introduisant une fonctionnalité appelée Unités avancées.

Les unités avancées de Divi 5 aident à améliorer la façon dont vous créez des sites Web. Des calculs dynamiques de calc () à la mise à l'échelle du fluide de CLAMP (), une gamme complète d'unités CSS comme VW et REM, et la flexibilité des variables CSS. Dans cet article, nous plongerons profondément dans des unités avancées, comment les utiliser dans le constructeur visuel, et pourquoi ils sont nécessaires pour chaque utilisateur Divi. Que vous soyez des dispositions de réglage fin ou que vous rêviez de nouvelles conceptions audacieuses, les unités avancées fournissent encore plus de contrôle sur la réactivité de votre conception.

Plongeons-nous.

Que sont les unités avancées dans Divi 5?

Les unités avancées de Divi 5 vous permettent de contrôler les éléments de conception avec son champ unitaire multifonctionnel. Il s'agit d'un champ d'entrée unique et puissant qui accepte le spectre complet des unités, fonctions et variables CSS.

Il s'agit d'un petit changement dans le constructeur visuel qui prend en charge toutes les unités CSS avec un nouveau support pour les variables CONT-CONTENT, UNSED, CALC (), CLAMP () et CSS.

Les unités avancées vous libèrent des contraintes des valeurs statiques. Vous n'avez pas à deviner les tailles de pixels fixes ou à lutter avec des points d'arrêt pour que les choses correspondent comme vous les voulez. Sans quitter le constructeur visuel, vous pouvez construire des dispositions qui fléchissent et évoluent sans effort - avec une typographie fluide, un espacement adaptatif et des conceptions consacrées à la fenêtre. Il ne s'agit pas seulement de plus d'options; Il s'agit de créativité plus intelligente et plus évolutive.

Exploration des unités avancées dans Divi 5

La fonctionnalité Advanced Units de Divi 5 offre diverses options de conception, chacune avec des moyens uniques de façonner les dispositions. Examinons les principaux acteurs et voyons comment ils fonctionnent.

Unités CSS dans Divi 5

Les unités avancées ouvrent une palette complète d'unités CSS, bien au-delà des pixels et des pourcentages. Prenez la largeur de la fenêtre (VW), par exemple - définissez la largeur d'une section sur 80VW , et il prendra toujours 80% de la largeur de la fenêtre (horizontalement), en évolution parfaitement du bureau au mobile.

Root EM (REM) attribue la taille de la taille de la police racine du site - idée pour une typographie cohérente, comme 4.5rem pour une rubrique.

Vous pouvez également essayer Fit-Content, qui mesure un élément en fonction de son contenu. Par exemple, l'utilisation du contenu de l'ajustement pour la largeur d'un en-tête peut s'assurer qu'elle s'adapte parfaitement. Vous pouvez ajouter un contenu ajusté au champ de largeur dans une ligne pour maintenir la tête compacte et proportionnelle, en évitant un espace excessif ou un débordement tout en maintenant un aspect poli.

Ces unités s'adaptent aux tailles et aux contextes d'écran, donnant des dispositions qui se sentent vivantes plutôt que verrouillées en place.

Calc () est une calculatrice dynamique

La fonction cacl () est comme une mini calculatrice intégrée à Divi. Il vous permet de mélanger les unités avec les opérations - addition, soustraction, multiplication et division - pour des résultats dynamiques. Un exemple classique est CALC (100% - 50px) , qui définit la largeur d'une section à 100% et soustrait 50 pixels. Si votre élément est aligné au centre, 25px des deux côtés sont réduits.

Vous pouvez utiliser CALC () pour un espacement réactif, comme la définition d'une section ou d'une largeur de ligne pour laisser des gouttières parfaites de chaque côté. Calc () s'adapte à la volée à mesure que la fenêtre change, garantissant que votre conception reste équilibrée sans faire de modifications manuelles.

Clamp () pour le contrôle du fluide

La fonction CLAMP () vous aide à contrôler les tailles qui s'ajustent en douceur sur les tailles d'écran. Il utilise trois valeurs: une taille minimale, une taille préférée et une taille maximale. Un bon exemple est la clamp (36px, 4vw, 48px) .

Cela signifie que la taille commence à 36px, augmente sur la base de 4% de la largeur de la fenêtre, mais ne dépasse jamais 48px. C'est super pour le texte, comme un module de cap qui a l'air bien sur les petits téléphones et les grands écrans. Clamp () garantit que votre conception reste équilibrée et lisible quel que soit l'appareil.

Variables CSS pour la flexibilité globale

Les variables CSS (ou propriétés personnalisées) vous permettent de définir des valeurs réutilisables, comme –Font-Size: 5EM , dans les options de thème de Divi ou le champ CSS Paramètres de la page. Lorsque vous ajoutez des variables CSS dans Divi 5, assurez-vous de les enfermer dans l'élément parent comme ceci:

:root {
--font-size:5em;
}

Une fois défini, vous pouvez supprimer Var (–Size) dans le champ de taille de texte d'un en-tête pour l'appliquer.

C'est un gain de temps qui maintient votre conception cohérente et modifiable à la volée.

Valeurs sans unité

Les unités avancées de Divi 5 incluent également les valeurs initiales, non set et auto. La propriété initiale réinitialise une propriété CSS à sa valeur par défaut telle que définie par la spécification CSS. Par exemple, la couleur des paramètres: Initial sur un paragraphe le retourne en noir, en ignorant tout style personnalisé ou hérité. Undet efface une propriété à son état naturel, agissant comme initial pour les propriétés non héritées ou revoyant à des valeurs héréditaires le cas échéant. Pendant ce temps, Auto permet au navigateur de décider d'une valeur basée sur le contexte, tel que la hauteur d'une section s'étire pour s'adapter à son contenu.

Comment fonctionnent les unités avancées dans Divi 5

Les unités avancées de Divi 5 apportent un nouveau niveau de contrôle directement dans le constructeur visuel, ce qui facilite la création de conceptions dynamiques réactives. Vous pouvez taper instantanément n'importe quelle unité, fonction ou variable CSS - comme VW, calc () ou clamp () - et voir les résultats. Voici comment fonctionnent les unités avancées en Divi.

Largeur de section réactive avec calc ()

Disons que vous voulez une section qui s'étend sur 80% de la hauteur de la fenêtre, mais supprime un rembourrage du haut et du bas. Accédez à l'onglet de conception de la section, localisez le champ de hauteur et ajoutez CALC (80VH - 60PX) dans le champ.

Ce calcul permet à la section d'évoluer de manière fluide avec la fenêtre, en maintenant 80% de la hauteur de la fenêtre tout en soustrayant 30px en haut et en bas.

Typographie fluide avec clamp ()

CLAMP () peut être utile si vous avez besoin de titres qui poussent avec la taille de l'écran mais restez lisibles. Dans l'onglet de conception d'un module d'en-tête, définissez la taille du texte de titre sur CLAMP (52px, 2vw, 36px) .

Cela définit le texte à 52px, augmente en fonction de 2% de la largeur de la fenêtre et plafonne la taille à 36px - offrant sans effort une typographie réactive et équilibrée.

Tailles de polices axées sur la variable

Les variables CSS de Divi 5 sont un excellent moyen d'obtenir l'uniformité dans l'espacement, le texte et d'autres domaines. Vous pouvez définir des variables une fois, puis les utiliser à plusieurs reprises dans vos conceptions simplement en les ajoutant à un module, une colonne, une ligne ou un champ d'unité de section. Par exemple, disons que vous souhaitez des tailles de cap cohérentes sans les définir manuellement ou utiliser un préréglage de groupe d'options pour les définir.

Vous pouvez ajouter ce qui suit dans les options de thème ou les paramètres de page , sous Avancé> CSS personnalisé :

:root{
--text-size-h1: 86px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 36px;
--text-size-h5: 28px;
--text-size-h6: 20px;
}

À partir de là, ajoutez simplement une variable à la taille du texte de titre dans n'importe quel module de cap. Par exemple, pour cette rubrique dans notre section Héros, nous ajoutons simplement var (–Text-size-h1) . Divi le reconnaîtra comme une variable et attribuera le style approprié à votre cap.

Meilleures pratiques pour les unités avancées

Pour tirer le meilleur parti des unités avancées de Divi 5, une approche réfléchie peut gagner du temps et garantir que vos conceptions brillent. Voici quelques meilleures pratiques pour vous guider:

Commencer simple

Si vous êtes nouveau dans l'utilisation des fonctions et des variables CSS, facilitez les unités familières comme les pixels (PX) ou les pourcentages (%), expérimentez CALC () pour les ajustements dynamiques de base. Par exemple, essayez Calc (100% - 40px) pour une largeur de section avant de plonger dans les variables CLAMP () ou CSS. Cela renforce la confiance sans vous écraser dès le début.

Levier des variables pour les styles communs

Définissez les variables CSS dans les options de thème pour la cohérence à l'échelle du site. Par exemple, le paramètre –But: 30px vous permet de réutiliser cet espacement entre les sections, les lignes et les modules. Les variables CSS peuvent également être bonnes pour définir une taille de texte uniforme pour tous vos titres. Une modification met à jour tout, accélérant le processus de conception et en gardant votre conception cohérente.

Tester la réactivité

Le système de vue réactif de Divi est un excellent moyen de concevoir votre conception sur plusieurs tailles d'écran. Après avoir appliqué des unités comme VW ou CLAMP (), basculez entre le bureau, la tablette et la vue mobile pour vous assurer que votre disposition s'adapte en douceur. Un en-tête réglé sur CLAMP (20px, 3vw, 40px) peut être parfait sur un bureau, mais peut avoir besoin de régler pour les écrans plus petits, alors testez-le pour être sûr.

Ne soyez pas trop compliqué

Bien que vous puissiez nidiquer des fonctions comme CALC (clamp (20px, 5vw, 50px) - 10px), vous devez vous en tenir à des formules simples, au moins pendant que vous apprenez. Une complexité excessive peut ralentir les performances et rendre le dépannage plus difficile lorsque les choses n'apparaissent pas comme elles le devraient. Tenez-vous à des calculs propres et utiles pour faciliter la vie.

Pourquoi les unités avancées élèvent divi 5

Les unités avancées sont idéales pour rationaliser le processus de conception. Voici quelques-uns des principaux avantages qui accompagnent cette nouvelle fonctionnalité:

• Création Freedom: Mélanger les unités, les fonctions et les variables déverrouille les dispositions qui prenaient plus de temps à réaliser dans les versions précédentes de Divi. Des formules simples vous permettent d'ajuster les hauteurs, les largeurs, les tailles de police, etc. Cette flexibilité vous permet de construire mieux et d'exécuter plus rapidement, le tout dans le constructeur visuel.
• De meilleurs conceptions réactives: les unités avancées déplacent Divi vers des conceptions fluides qui s'adaptent sans effort. L'utilisation de VW ou CLAMP () garantit que votre site est naturel sur n'importe quel appareil, en réduisant le besoin de remplacements manuels et en offrant une expérience polie.
• Il est à l'épreuve des futurs: les unités avancées s'alignent avec la mission de Divi 5 pour moderniser le constructeur visuel pour le Web d'aujourd'hui. En embrassant la pleine puissance de CSS, Divi 5 vous offre les outils nécessaires pour créer des sites Web modernes. Il ne s'agit pas seulement de suivre; Il s'agit de rester en avance sur la courbe avec des outils qui reflètent ce que les développeurs professionnels utilisent.

Téléchargez le dernier divi 5 alpha

Les unités avancées sont une caractéristique utile qui a récemment été ajoutée à Divi 5. De la précision de CALC () à la fluidité de CLAMP () et à l'efficacité des variables CSS, ces outils rendent l'espacement, le dimensionnement et l'évolutivité plus intuitifs que jamais. Que vous utilisiez Divi depuis des années ou que vous l'ayez simplement découvert, vous pouvez créer des sites Web réactifs et dynamiques avec moins d'efforts.

Prêt à le voir vous-même? Téléchargez Divi 5 Alpha maintenant et commencez à expérimenter avec des unités avancées. Jouez avec VW et VH pour l'espacement de la fenêtre, TEST CLAMP () pour la typographie ou configurez des variables pour repenser la façon dont vous construisez. C'est une chance de pousser vos créations plus loin et de découvrir ce qui est possible.