Comment optimiser la disposition Divi des appareils mobiles

Nous savons tous que les sites Web doivent être optimisés pour les appareils mobiles. En fait, la stratégie de conception du Web s’est transformée en « priorité mobile ». Cela est logique étant donné que plus de 4 milliards de personnes dans le monde utilisent des téléphones portables. Le constructeur visuel de Divi est un outil de conception utile pour créer des sites Web mobiles. Il dispose de nombreuses fonctionnalités structurelles intégrées qui peuvent être installées sur des tablettes et des smartphones sans que vous ayez à faire quoi que ce soit. De plus, vous pouvez définir des paramètres de réponse personnalisés pour toutes les parties, lignes et formulaires de votre bureau, tablette et smartphone. Cela donne une forte impulsion à votre conception mobile.
Cet article est conçu pour vous aider à comprendre les options disponibles dans Divi afin que vous puissiez apporter ces changements en toute sécurité à votre appareil mobile. Ces connaissances vous aideront à « déplacer d’abord » au début d’un projet plutôt qu’à corriger la conception du mouvement après coup. Les conseils partagés dans cet article vous aideront à faire ce qui suit: contrôler l’espacement vertical entre les noeuds et les lignes pour créer un Blurb pleine largeur (ou n’importe quel module) sur l’appareil mobile, mais ne pas ajuster l’espacement des colonnes inutile sur le bouton d’optimisation mobile de l’appareil mobile sur le Bureau Commençons.
Ce que vous devez commencer pour commencer, vous aurez besoin de ce qui suit: le thème Divi (installé et actif) a chargé une nouvelle page avec le forgeron aperçu de la mise en page Voici un aperçu de la conception de la tablette et du smartphone que nous allons construire. Gardez à l’esprit que les changements que vous apportez sont minimes, mais la technologie que vous utilisez vous aidera à réfléchir correctement à la façon d’apporter des changements plus avancés à la mise en page. Définissez l’espacement par défaut entre les sections et les lignes à 0 par défaut, Divi définit l’espacement par défaut entre les lignes et les sections. Si vous accédez à une personnalisation
Dans la conception du Bureau, vous pouvez restaurer une partie de l’espace en ajoutant des remplissages aux lignes. Si nous voulons restaurer des lignes de 80% de largeur, nous devons ajouter 10% de remplissage de chaque côté (10% + 10% = 20% et 100% – 20% = 80%). Cela garantit que votre contenu représente 80% de la page. Maintenant, nous pouvons ajuster le remplissage de la tablette et du smartphone à 0%, de sorte que la publicité \/ le contenu occupe toute la largeur de la page. Pour s’assurer qu’ils se chevauchent, vous pouvez ajouter une marge inférieure personnalisée – 30 Px pour les deux premiers flous. Cela les pousse à travers la limite inférieure de 30 Px ajoutée à la colonne et cache les ombres de boîte pour une conception propre sur l’appareil mobile. Hauteur de la cloison des appareils mobiles la hauteur de la cloison joue un rôle important dans bon nombre de nos aménagements. Mais il est également important d’avoir une conception cohérente sur les appareils mobiles. Il existe des techniques pour vous aider à personnaliser la hauteur de la partition de votre appareil mobile. Tout d’abord, vous devriez envisager de définir votre taille en unités de longueur VW. Consultez la section mise en page de la page d’information du forgeron, qui comporte trois étiquettes directement en dessous. Si vous regardez la hauteur de l’espacement supérieur sur cette disposition, vous remarquerez qu’il est réglé à 18vw. Cela garantit que le séparateur s’adapte parfaitement à la fenêtre du navigateur sans avoir à définir d’autres valeurs pour la tablette et le smartphone. Le réglage des valeurs des pixels fait que le séparateur est fusionné ou étendu sur différentes largeurs de navigateur, car la hauteur ne change jamais avec la largeur du séparateur. Vous pouvez ajouter des valeurs Px supplémentaires pour les tablettes et les appareils mobiles, mais la solution est un peu discontinue parce que lorsque vous ajustez votre navigateur, la conception saute à différentes hauteurs. En bref, l’utilisation du public garantira
Votre conception restera exactement la même pour toutes les tailles de navigateur, et les valeurs Px feront bouger et sauter la conception. Cela ne signifie pas que vous ne pouvez pas ajouter de paramètres supplémentaires pour personnaliser votre conception de téléphone. En fait, pour les appareils mobiles, vous pourriez préférer une disposition plus propre. Tout ce que vous avez à faire est d’ajuster la hauteur du séparateur pour qu’il ait une plus petite hauteur et peut – être moins que la répétition horizontale. Par exemple, vous pouvez ajouter une hauteur de séparation de 10vw à un smartphone avec une répétabilité horizontale de 0,3 pour une conception plus plate et une transition plus lisse. Ou réglez la hauteur à 0 sur votre smartphone pour éliminer complètement la ligne de séparation. Sur votre appareil mobile, vous voulez que ces boutons soient faciles à reconnaître et à cliquer. Par conséquent, au lieu de réduire les boutons sur l’appareil mobile, il est préférable d’ajuster la zone cliquable pour qu’elle occupe une plus grande largeur d’écran de l’appareil mobile. Par exemple, pour naviguer sur un site en utilisant un pouce, il n’est pas facile de cliquer sur le petit bouton d’alignement gauche de la courbe de droite. L’utilisateur doit le contacter. Une façon de résoudre ce problème est de s’assurer que les boutons de votre appareil mobile sont de pleine largeur. Dans Divi, vous pouvez redimensionner les boutons de votre téléphone de plusieurs façons. La façon la plus simple est d’ajouter un remplissage personnalisé au bouton. En utilisant la mise en page de la page À propos du serrurier, allez en haut et Ajustez les paramètres du bouton pour avoir les remplissages personnalisés suivants sur votre smartphone: remplissage personnalisé (smartphone): 1EM en haut, 1EM en bas, 2em à gauche, 2em à droite La valeur EM est liée à la taille du texte du bouton actuellement réglé à 20 Px sur le smartphone. Donc 1EM est égal à 20px. Donc par
La valeur maximale de I est 479px, ce qui est un bon point d’arrêt Divi pour les téléphones mobiles. Pour revenir aux paramètres du module bouton, ajoutez le bloc de classe CSS dans l’onglet avancé. Vérifiez maintenant les résultats sur place. Notez le changement de bouton au point d’arrêt. Vous pouvez également ajouter ce type de bouton à un bouton bleu sur la mise en page pour obtenir le même effet. Maintenant, regardons la conception finale de la tablette et du smartphone. Taille du texte, Président et hauteur de ligne il existe de nombreuses études sur la façon d’équilibrer correctement la taille du texte, le Président et la hauteur de ligne pour une lisibilité optimale. En général, 16px semble assez petit pour les appareils mobiles. La hauteur de la ligne doit être comprise entre 1,4 em (140% de la taille de la police) et 2 em (200% de la taille de la police), selon la taille du texte. Une plus grande taille de texte devrait avoir une hauteur de ligne plus élevée. Ainsi, 16px fonctionne bien à une hauteur de ligne de 1,6 EM, tandis que la taille de police de 18 pixels semble meilleure à une hauteur de 1,8 em. Lorsque j’ai écrit cet article dans l’éditeur WordPress, j’ai remarqué que la police était 13px et que la hauteur de la ligne était de 1,5 em. Je dois dire qu’elle franchissait les limites de ma prescription de lunettes. La longueur de ligne est le nombre de caractères autorisés sur une ligne de texte donnée. Pour la plupart des gens, le Président pratique est d’environ 45 – 85 caractères par ligne. Je ne vais pas vous donner de bonnes pratiques précises pour déterminer ces valeurs, mais je peux vous donner une idée générale. Prenons par exemple notre disposition. La taille du texte du corps est fixée à 18 Px. Cette taille peut fonctionner correctement sur la plupart des téléphones cellulaires, mais pour certains téléphones cellulaires, cela peut entraîner une longueur de ligne inférieure à Q