Sélectionner une page


La conception Web réactive est une nécessité de nos jours. Il ya plus de 8 milliards d’appareils mobiles actif dans le monde aujourd’hui. Et avec le nombre toujours croissant de smartphones et de tablettes, il est possible que certains visiteurs ne voient jamais votre site Web sur un ordinateur de bureau, du moins pas au départ. C’est pourquoi il est important de faire une première impression sur le téléphone et cela nécessite notre attention.

Heureusement, le thème Divi est réactif et utilise une combinaison de mises en page de grille fluides et de requêtes multimédias qui fonctionnent bien sur tous les appareils. Depuis la sortie de Divi 2.6, Divi Contrôles d’édition réactifs dans le personnalisateur de thème et Divi Builder, avec lesquels vous pouvez facilement afficher et personnaliser certains éléments de style en fonction des ordinateurs de bureau, des tablettes et des smartphones.

Bien que Divi s’occupe de la plupart des tâches lourdes à votre place, il peut arriver que vous deviez modifier votre conception adaptative pour certaines tailles d’écran. Pour cette raison, il est important de vous familiariser avec les points d’arrêt réactifs de Divi – les points auxquels la mise en page de votre site Web s’adapte à une taille d’écran particulière.

Aujourd’hui, je vais vous aider à trouver les points d’arrêt réactifs de Divi et comment utiliser les requêtes multimédias dans votre CSS pour peaufiner votre conception. Je vais même vous donner une liste des requêtes média de Divi que vous pouvez utiliser comme référence pour de futurs changements. Mais tout d’abord, jetons un coup d’œil aux contrôles d’édition réactifs de Divi.

Utilisation des contrôles d’édition réactifs de Divi Builder

Si vous n’avez pas utilisé les contrôles d’édition réactifs de Divis, c’est un bon point de départ. Divi vous a permis de voir facilement le rendu de votre site sur les trois principaux appareils (ordinateur de bureau, tablette et téléphone).

Vous pouvez les afficher dans le personnalisateur de thème. Ceci est utile lors de la modification de la conception du thème. Cliquez simplement sur les icônes de l’appareil en bas de la barre latérale du personnalisateur de thème.

Vous pouvez également voir dans Divi Builder comment chaque module est rendu sur chaque appareil. Lorsque vous affichez les paramètres d’un module, cliquez simplement sur l’icône en forme d’œil, puis sur les différents appareils pour afficher son contenu à n’importe quelle taille d’écran.

Vous pouvez même personnaliser certains paramètres de thème pour chacun de ces appareils. Par exemple, disons que vous souhaitez modifier la façon dont la taille de police d’un titre de présentation apparaît sur chaque appareil. Pour ce faire, ouvrez les paramètres du module Blurb et modifiez la taille de la police de l’en-tête sous les paramètres de conception avancés. Vous remarquerez une petite icône de téléphone qui apparaît. Cliquez sur le symbole du téléphone pour définir la même taille de police pour l’en-tête de chaque appareil.

Tout simplement non? C’est une option pratique pour apporter des modifications majeures à la conception réactive. Mais parfois, vous devez modifier davantage les points d’arrêt de Divi. Pour ce faire, vous devriez jeter un œil aux requêtes médias de Divi pour une compréhension plus approfondie.

Les requêtes multimédias intégrées de Divi

Les requêtes multimédias sont essentiellement un moyen de décomposer le CSS par type de support. Dans ce cas, le type de support est réglé sur « tous » (c’est-à-dire adapté à tous les périphériques). Les autres types de supports sont l’impression, l’écran et la voix. En CSS, le type de média est généralement suivi d’une fonction média, dans ce cas la largeur de l’appareil. Une fois que le type de média et les fonctionnalités ont été déterminés, vous pouvez ajouter un certain nombre de CSS imbriqués entre crochets qui ne seront appliqués qu’à cette requête média.

Jetez un œil à l’exemple de requête multimédia suivant:

@media all and (max-width: 980px) {
h1 {
font-size: 30px;
}
}

Remarque «tous» définit le type de support et «(max-width: 980px)» est la fonction multimédia, qui indique la largeur du périphérique auquel le CSS entre parenthèses doit être appliqué. Dans cet exemple, la taille de police h1 n’est que de 30 pixels sur un écran de 980 pixels ou moins.

Les plages de largeur générales pour chaque appareil sont les suivantes:

Grand bureau: 1405px et plus
Bureau standard: entre 1100px et 1405px
Ordinateurs portables et grandes tablettes: entre 980px et 1100px
Comprimés: entre 768px et 980px
Smartphones et petites tablettes: entre 320px et 768px;
Smartphones: entre 320px et 480px;

Voici une liste des principales requêtes média utilisées dans le thème Divi. Vous pouvez l’utiliser comme modèle utile pour votre CSS personnalisé.

/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {
 
}

/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {

}

/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {

}

/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {

}

/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {

}

/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {

}

Affinez vos conceptions avec des requêtes multimédias

Vous pouvez utiliser les requêtes multimédias intégrées de Divi pour ajouter du CSS personnalisé pour chaque appareil. Je suggère d’utiliser le personnalisateur de thème pour cela. Vous pouvez ajouter votre CSS personnalisé à votre thème et voir les résultats pour n’importe quel appareil en temps réel au même endroit.

Accédez à dans votre tableau de bord WordPress Divi → Personnalisateur de thème.

Ensuite, sélectionnez CSS supplémentaire dans la barre latérale en bas.

Dans cet exemple, j’ai une page simulée avec un en-tête et quatre modules de présentation, chacun avec un module de boutons.

Supposons que vous souhaitiez uniquement augmenter la largeur des boutons sur les smartphones. Pour ce faire, copiez la requête multimédia suivante ciblant les smartphones:

@media all and (max-width: 480px) {

}

Ensuite, ajoutez le CSS souhaité pour ce nouveau style de bouton entre les crochets de ma requête multimédia:

@media all and (max-width: 480px) {
.et_pb_module.et_pb_button {
display: block;
}
}

Collez ensuite la requête multimédia dans la zone de texte CSS supplémentaire.

Vous pouvez désormais basculer entre les vues de l’appareil en cliquant sur les icônes de l’appareil en bas de la barre latérale du personnalisateur de thème pour afficher les modifications.

Notez la modification de la largeur des touches dans la vue du smartphone.

Ciblez des largeurs plus spécifiques à l’aide des outils de développement de navigateur.

Les points d’arrêt intégrés de Divi ne sont pas assez spécifiques pour certaines conceptions. Parfois, vous devez ajouter vos propres points d’arrêt et requêtes multimédias personnalisés. Par exemple, vous constaterez peut-être que votre en-tête doit être ajusté à la largeur de 1000px au lieu d’attendre que Divi le casse à la largeur de 980px. Pour effectuer ces types d’ajustements, vous pouvez utiliser les outils de développement de votre navigateur pour identifier ces points d’arrêt.

Si vous utilisez Chrome, ils ont un outil que vous pouvez utiliser pour le faire Tester les fenêtres réactives et spécifiques à l’appareil. Pour accéder à l’outil, cliquez avec le bouton droit de la souris sur l’écran et sélectionnez l’élément Inspecter dans le menu déroulant qui apparaît. Cliquez sur la petite icône dans la barre d’outils de l’appareil.

Utilisez ensuite le menu ci-dessus pour modifier la vue de l’appareil ou définir une largeur personnalisée.

Vous pouvez même faire glisser la taille de l’écran pour identifier les problèmes que vous devez résoudre ainsi que la largeur exacte à viser.

Après avoir défini le point d’arrêt, créez une requête multimédia pour votre modification CSS personnalisée. Par exemple, si vous devez changer la taille de votre police h1 entre 780px et 1000px en 30px, créez la requête multimédia suivante et ajoutez-la à votre CSS personnalisé:

@media all and (min-width: 780px) and (max-width: 1000px) {
h1 {
font-size: 30px;
}
}

C’est ça!

Dernières pensées

La plupart de ce dont vous avez besoin pour un site Web réactif est déjà intégré à Divi. Cependant, en fonction de la conception de votre site, vous devrez peut-être ajouter plus de CSS personnalisé aux points d’arrêt de Divi en utilisant les requêtes multimédias intégrées de Divi. Et si cela ne suffit pas, vous pouvez toujours utiliser les outils de développement de navigateur pour trouver les points d’arrêt dont vous avez besoin.

Il existe de nombreux outils. Firefox en a un Mode de conception réactif Vous pouvez utiliser. Si vous utilisez Safari, vous l’avez un nouveau mode de design réactif également.

J’ai hâte de vous entendre dans les commentaires!





Source link

Recent Posts