Tout ce que vous devez savoir sur les points d'arrêt personnalisables de Divi 5

Préparez-vous à améliorer considérablement la façon dont vous créez des sites Web. Divi 5 a une nouvelle fonctionnalité passionnante, des points d'arrêt personnalisables, qui vous donne un contrôle incroyable sur la réactivité de votre site. Avec les nouveaux points d'arrêt personnalisables de Divi 5, vous pouvez créer une expérience transparente sur tous les appareils. Que vous conceviez pour un affichage de bureau massif ou le plus petit écran mobile, Divi 5 aide à vous assurer que votre site Web est parfait pour les pixels.

Dans cet article, nous couvrirons tout ce que vous devez savoir sur cette nouvelle fonctionnalité et vous montrer comment l'utiliser!

Découvrez la vidéo suivante pour voir la nouvelle fonctionnalité en action.

Télécharger Divi 5 avec des points d'arrêt personnalisables

Avec des points d'arrêt personnalisables, vous pouvez désormais affiner la réactivité de votre site Web pour mieux adapter les tailles d'écran différentes. Que vous conceviez pour des bureaux ultra-larges ou des écrans mobiles larges, Divi 5 met le contrôle entre vos mains.

Puis-je déjà utiliser Divi 5 sur mon site Web?

Vous pouvez utiliser Divi 5 sur votre site Web, mais sa disponibilité dépend de votre cas d'utilisation spécifique. Divi 5 est actuellement en phase publique alpha, ce qui signifie qu'il est toujours activement développé et raffiné. Bien qu'il ne soit pas encore recommandé pour tous les environnements de production, il existe des scénarios spécifiques où vous pouvez commencer à l'utiliser sans problèmes.

Utilisez Divi 5 sur les sites locaux et de mise en scène

Divi 5 est actuellement disponible pour les environnements locaux et de mise en scène, permettant aux utilisateurs de tester en toute sécurité ses nouvelles fonctionnalités sans affecter leurs sites Web en direct. Étant donné que Divi 5 est toujours en phase publique alpha, cette approche garantit que les utilisateurs peuvent expérimenter les améliorations de Divi 5, signaler les bogues et fournir des commentaires tout en maintenant la stabilité de leurs sites de production.

Vous pouvez utiliser Divi 5 en toute sécurité sur de nouveaux sites de production

Divi 5 est stable et prêt à lancer de nouveaux sites Web. Si vous partez de zéro, vous pouvez pleinement profiter de ses performances rapides, de son cadre modulaire et de sa technologie à l'épreuve des futurs sans vous soucier des problèmes de compatibilité vers l'arrière. Cependant, une phase de test approfondie est essentielle pour les sites existants qui s'appuient sur des intégrations tierces étendues avant de migrer. À ce stade, nous ne recommandons toujours pas de convertir les sites Web existants en Divi 5.

Comprendre les points d'arrêt personnalisables de Divi

Les points d'arrêt sont un aspect fondamental de la conception réactive. Ils agissent comme des seuils où le contenu de votre site se réorganise pour assurer une expérience utilisateur optimale, que quelqu'un navigue sur un smartphone, une tablette ou un bureau.

Les points d'arrêt de Divi 5 ont été considérablement améliorés, offrant plus de flexibilité et de contrôle que les versions précédentes de Divi. La personnalisation de jusqu'à sept points d'arrêt vous permet de réactiver la réactivité de votre site pour accueillir une gamme plus large d'appareils et de tailles d'écran.

Qu'est-ce qu'un point d'arrêt?

Un point d'arrêt est une largeur d'écran spécifique dans laquelle la conception de votre site Web s'adapte pour offrir une expérience de visualisation optimale sur différents appareils. Les points d'arrêt aident à vous assurer que votre contenu reste lisible, visuellement attrayant et facile à naviguer, quelle que soit la taille de l'écran.

Les sites Web réactifs sont conçus à l'aide de requêtes multimédias CSS, qui permettent d'appliquer différents styles lorsqu'un écran atteint une largeur particulière. Lorsque la taille de l'écran d'un visiteur traverse un point d'arrêt défini, le site Web ajuste automatiquement sa disposition, ses polices, son espacement ou d'autres éléments de conception pour maintenir la convivialité.

Avec l'introduction de plus de points d'arrêt dans Divi 5, vous pouvez limiter le besoin de requêtes multimédias CSS pour définir des points d'arrêt pour d'autres appareils.

Combien de points d'arrêt dois-je utiliser?

Le nombre de points d'arrêt dépend de l'utilisation de l'appareil de votre public. Les utilisateurs accèdent aux sites Web de différentes tailles d'écran, des petits smartphones aux écrans de bureau ultra-large. Traditionnellement, les concepteurs de sites Web ont utilisé trois points d'arrêt standard - ordinateur de bureau, tablette et mobile - mais Divi 5 étend cette capacité, permettant jusqu'à 7 points d'arrêt personnalisables pour une plus grande flexibilité.

Est-ce que pour plus de points d'arrêt ralentira mon site?

Non, l'activation de plus de points d'arrêt dans Divi 5 ne ralentira pas vos sites Web. Contrairement aux anciennes méthodes de gestion de la conception réactive, le nouveau cadre de Divi 5 est optimisé pour les performances, garantissant que des points d'arrêt supplémentaires n'ajoutent pas de charge inutile à votre site.

Les points d'arrêt sont-ils activés sur un site Web ou un niveau de page?

Les points d'arrêt de Divi 5 sont activés et appliqués au niveau du site Web, et non par page. Une fois que vous avez activé et personnalisé les points d'arrêt, ils affecteront l'ensemble du site Web, assurant une conception cohérente et réactive sur toutes les pages. Tout changement que vous apportez aux points d'arrêt ajustera universellement la façon dont votre site réagit à différentes tailles d'écran plutôt que de se limiter aux pages individuelles.

Comment les points d'arrêt personnalisables fonctionnent en divi

Le système hautement flexible et intuitif de Divi 5 est parfait pour gérer les points d'arrêt, vous donnant un plus grand contrôle sur la conception réactive de votre site Web. Contrairement aux versions précédentes, Divi 5 vous permet de personnaliser jusqu'à 7 points d'arrêt, garantissant que votre site est parfait sur chaque appareil. Ce système est conçu pour être convivial tout en offrant des options avancées pour ceux qui en ont besoin.

Où trouver des points d'arrêt

Dans Divi 5, les points d'arrêt sont intégrés dans les paramètres de votre page, ce qui les rend faciles à localiser et à personnaliser. Vous pouvez y accéder directement dans le constructeur visuel, en garantissant un flux de travail rationalisé.

Comment permettre des points d'arrêt

Ouvrez la page que vous souhaitez modifier et activer le constructeur visuel en cliquant sur Modifier avec Divi .

Cliquez sur le menu Ellipsis (trois points) situé dans la barre des tâches principale du constructeur visuel.

À l'intérieur des paramètres, vous trouverez une série de commutateurs à bascule qui vous permettent d'activer ou de désactiver les points d'arrêt au besoin.

Une fois activée, chaque point d'arrêt sera visible dans la barre des tâches, vous permettant d'apporter des modifications tout au long de votre conception sans cliquer sur des contrôles réactifs dans des lignes ou des modules individuels pour ajuster les paramètres.

Devriez-vous utiliser des points d'arrêt standard ou les vôtres?

Les points d'arrêt standard de Divi 5 sont conçus pour couvrir les tailles d'écran les plus courantes, y compris les téléphones, les tablettes et les ordinateurs de bureau. Ces points d'arrêt prédéfinis sont plus que suffisants pour de nombreux concepteurs, car ils s'adressent à la plupart des utilisateurs et des appareils.

Cependant, il existe des scénarios où la création de points d'arrêt personnalisés peut être bénéfique. Par exemple, si vous souhaitez accueillir des moniteurs ultra-larges, des smartphones pliables ou des tablettes plus petites, les points d'arrêt personnalisés peuvent vous aider à modifier votre conception pour ces cas d'utilisation.

Utilisation de points d'arrêt personnalisés dans Divi 5

La personnalisation des points d'arrêt réactifs est utile pour résoudre les bizarreries de conception ou les problèmes d'affichage de contenu sur des appareils moins courants ou des résolutions d'écran. Ils peuvent également aider à améliorer les performances du site Web en chargeant uniquement les styles nécessaires pour une taille d'écran donnée, en réduisant les temps de chargement des pages.

Heureusement, Divi 5 rend incroyablement facile de personnaliser ces points d'arrêt réactifs en quelques clics.

Avec les paramètres de périphérique réactifs ouverts, définissez le point d'arrêt du téléphone sur la largeur souhaitée, puis répétez les étapes des autres appareils. Étant donné que nous voulons rendre le site accessible pour des appareils plus petits, nous allons définir le numéro sur 360px pour les téléphones. Une fois que vous avez ajouté les pixels souhaités, cliquez sur le bouton Enregistrer pour continuer.

Divi 5 vous fera savoir que vous êtes sur le point d'ajuster les points d'arrêt de votre site Web. Cliquez sur le bouton de mise à jour pour confirmer la modification.

Nous ajouterons les points d'arrêt suivants pour les tailles d'écran restantes:

Ces points d'arrêt couvrent une gamme d'appareils pour garantir que votre site Web couvre la plupart des tailles d'écran et des cas d'utilisation:

• Téléphone: 767px couvre la plupart des tailles d'écran de smartphone, y compris des modèles plus anciens comme l'iPhone 8 ou le Samsung G7.
• L'exécution du téléphone: 860px couvre la plupart des écrans de téléphone en mode paysage, y compris l'iPhone 14 Pro (et au-dessus) et les appareils Android modernes.
• Tablette: 980px est bon pour la plupart des écrans de tablette en mode portrait, y compris tous les iPads.
• Tablet large: 1024px est standard pour la vue du paysage dans la plupart des iPads et des tablettes Samsung.
• Écran large: 1280px est une bonne largeur pour la plupart des ordinateurs portables plus petits (Windows ou MacOS), y compris MacBook Air, MacBook Pro 13 ″ et des appareils Windows comparables.
• Ultrawide: 2560px couvre des écrans de bureau plus grands, tels que MacBook Pro 15 ″ et 16 ″, les IMAC et les moniteurs à haute définition standard.

Personnalisation de votre conception réactive à l'intérieur des préréglages

L'un des aspects les plus puissants de Divi 5 est la façon dont ses points d'arrêt personnalisables s'intègrent parfaitement aux préréglages. Cela vous permet de créer un design vraiment réactif sur l'ensemble de votre site Web avec un minimum d'effort. Un exemple parfait est de modifier le préréglage H1 d'un site de démarrage pour s'assurer que tous les H1 sont parfaits à chaque taille d'écran.

Commencez par cliquer n'importe où dans le H1 dans la section Héros pour afficher ses paramètres.

Ensuite, cliquez sur le champ de préréglages de cap dans l'en-tête du module.

Une liste prédéfinie apparaîtra. Localisez le préréglage qui a une coche bleue à côté.

Survolez le préréglage actif pour révéler ses paramètres. Cliquez sur l' icône des paramètres pour le modifier.

Cliquez sur l' onglet Conception , puis ajustez la taille du texte de titre à la taille souhaitée.

Gardez les paramètres prédéfinis ouverts et cliquez sur la taille de l'écran suivante dans la barre des tâches Divi 5 pour ajuster la taille de l'en-tête.

Répétez les étapes ci-dessus pour ajuster les préréglages de cap pour les tailles d'écran restantes. Une fois que vous avez terminé cela, cliquez sur le bouton Enregistrer le préréglage .

Lorsque vous échangez des points d'arrêt, les changements de taille se refléteront dans le préréglage de cap.

Édition réactive dans divi 4 vs divi 5

Divi a toujours été un leader dans la conception réactive, mais Divi 5 l'a fait passer à un tout nouveau niveau. Alors que Divi 4 a fourni une base solide pour créer des sites Web réactifs, Divi 5 apporte des fonctionnalités qui rendent l'édition réactive plus intuitive, flexible et puissante que jamais. Voici un aperçu de la façon dont Divi 5 améliore les capacités de Divi 4.

Transition sans effort entre les points d'arrêt

Dans Divi 4, la commutation entre les points d'arrêt est assez simple mais implique plus de temps et n'est pas aussi fluide que la transition que vous pouvez trouver dans Divi 5.

Divi 5 améliore ce flux de travail avec une interface plus lisse et plus intuitive. Maintenant, vous pouvez passer instantanément entre les points d'arrêt, en prévisualisant votre conception lorsque vous ajustez, sans décalage. Cette nouvelle version de Divi vous permet d'apporter des modifications de conception à la volée en fonction du point d'arrêt que vous consultez. Il n'y a plus de commutation entre les modes ou les bascules constants. Cette expérience transparente fait gagner du temps et assure un design plus cohérent et poli à chaque point d'arrêt.

De 3 à 7 points d'arrêt

Divi 4 prend en charge 3 points d'arrêt différents; Ceux-ci peuvent également être trouvés dans Divi 5.

• Desktop: 981px et au-dessus
• Tablette: <980px
• Mobile: <767px

Bien que ces points d'arrêt couvrent les bases, ils échouent parfois lorsqu'ils s'adaptent à la variété des appareils et des tailles d'écran utilisées par le public moderne. Les concepteurs peuvent parfois avoir besoin de requêtes multimédias CSS pour cibler différentes tailles d'écran, en particulier pour les moniteurs ultra-larges ou les appareils mobiles plus petits.

Divi 5 a abordé cette limitation en élargissant le nombre de points d'arrêt à 7 options personnalisables, ce qui facilite la cible un plus grand nombre d'appareils.

• Téléphone: <767px
• Téléphone large: < 860px
• Tablette: <980px
• Tablette large: < 1024px
• Desktop: > 981px
• Écran large: > 1280px
• Ultra large: > 1440px

Cette flexibilité accrue vous permet d'adapter votre conception pour une gamme plus large d'appareils, garantissant que votre site est parfait sur tout, des smartphones compacts aux grands moniteurs à haute résolution. Par exemple, vous pouvez désormais créer un point de rupture de tablette dédié en mode paysage ou optimiser votre site pour les écrans ultra-large utilisés dans des paramètres professionnels.

Échelle de toile pour un contrôle complet

L'une des nouvelles fonctionnalités les plus excitantes de Divi 5 est la mise à l'échelle de Canvas, qui donne aux concepteurs un contrôle sans précédent sur la façon dont leur site Web apparaît dans différentes résolutions.

C'est à quoi ressemble la mise à l'échelle en toile dans Divi 4:

La fonction de rediffusion en toile de Divi 5 rend toute l'expérience encore plus intuitive. En quelques clics, vous pouvez mettre à l'échelle le canevas de conception pour correspondre aux résolutions d'écran spécifiques, montrant exactement comment votre site apparaîtra sur différents appareils. Cette fonctionnalité est utile pour tester des écrans mobiles plus petits ou des moniteurs de bureau ultra-large, garantissant que votre conception est impeccable - acrossant la carte.

Divi 5 est à jamais inclus dans votre adhésion Divi Lifetime

Les points d'arrêt personnalisables de Divi 5 permettent aux concepteurs de créer des sites Web réactifs avec une plus grande précision. Que vous affiniez une disposition existante ou que vous construisiez un site à partir de zéro, ces nouveaux outils vous offrent la flexibilité pour élaborer des expériences parfaites pour les pixels pour chaque taille d'écran.

L'une des meilleures parties de Divi 5 est qu'elle sera à jamais incluse dans votre adhésion Divi (sans frais supplémentaires). Si vous passez à un abonnement Divi Lifetime dès aujourd'hui, vous aurez accès (et des mises à jour) à Divi 5 pour des frais ponctuels et bénéficierez de ce produit en évolution pour les années à venir.