Maîtriser Avada Responsive Design : Principes et guide d'installation

Thème AvadaNon seulement l'option par défautPrise en charge de la mise en page réactive.Il est également doté d'une suite complète d'outils d'aide à la décision intégrés.Système de contrôle flexibleAvada est une application web qui vous aide à vous adapter facilement à une variété d'écrans d'appareils. Cet article détaille le fonctionnement des fonctionnalités réactives d'Avada et la manière de les configurer pour vous aider à créer des sites web performants sur ordinateur de bureau, tablette et mobile.

I. Fonctionnalités d'Avada Responsive Design

Avada, oui.Thème entièrement réactifTous les modèles, modules et éléments sont disponibles sur différents appareils.auto-adaptation. En outre, il prend en charge les fonctions suivantes :

• Paramètres globaux de réactivité(contrôle des points d'arrêt, zoom, mise à l'échelle des polices, etc.)
• Paramètres réactifs au niveau des éléments(peut être stylisé individuellement pour différents appareils)
• Aperçu réactif en temps réel(Vous pouvez visualiser l'effet sans changer d'appareil)
• Mécanisme de chargement d'images réactif(Charger l'image de la taille la plus appropriée à l'écran)

II. options réactives d'Avada

Chemin : Avada > Options > Responsive

1. la conception réactive

Cette option est activée par défaut. Lorsqu'elle est désactivée, la page aura une largeur fixe et perdra la fonction d'adaptation. En règle générale, il est préférable de la laisser activée.

2. quatre points d'arrêt principaux (points d'arrêt)

Ces points de rupture déterminent le moment où la page commence à changer de présentation en fonction de la largeur de l'écran :

3. zoom sur les appareils mobiles

confinementappareil mobile (smartphone, tablette, etc.)Permet ou non de zoomer sur le contenu de la page à l'aide de deux doigts. Il est généralement recommandé de l'activer pour améliorer l'expérience de l'utilisateur.

4. personnaliser la valeur du point d'arrêt pour les petits et moyens écrans

Vous pouvez définir la valeur du pixel de départ pour "Écran moyen" et "Petit écran".

Exemple :

• Point de départ de l'écran central : 1100px
• Point de départ pour les petits écrans : 800px

Ces valeurs affecteront directement la prévisualisation réactive et la logique d'affichage de l'élément.

5. définir une taille de police adaptée

• Responsive Typography Sensitivity (sensibilité à la typographie): Contrôlepolice de caractères des titresLa vitesse à laquelle la taille se réduit sur les petits écrans ; plus la valeur est élevée, plus la police se réduit rapidement sur les mobiles.0 désactive la mise à l'échelle adaptative des polices.
• Facteur de taille minimale des caractères
  • Contrôle un multiple de la taille minimale de la police :
    • Réglé sur 0 : pas de limite minimale de police
    • Réglé sur 1 : la plus petite police = la police actuelle
    • Réglé sur 2 : police minimale = deux fois la police actuelle

Grâce à ces deux paramètres, vous pouvez conserver des polices agréables et lisibles sur mobile sans perdre la hiérarchie.

III. comportement réactif de la disposition en colonnes

Chemin : Avada Builder > Container > Paramètres des colonnes

Dans Avada Builder, chaque module de colonne peut être configuré avec un nom de colonne différent.écran (de télévision, d'ordinateur ou de cinéma)La largeur de l'image suivante. Par défaut :

• L'écran moyen hérite de la largeur de colonne de l'écran large
• Le petit écran est automatiquement mis en pleine largeur (100%)

Vous pouvez également modifier une colonne particulière :

1. Cliquez sur le paramètre "Colonne".
2. Passer à l'affichage réactif (icône en haut à gauche)
3. Définissez des largeurs de colonne différentes pour les écrans de grande, moyenne et petite taille, par exemple 1/4, 1/2 et 1/1.

IV. prévisualisation d'Avada Builder Responsive

Lorsque vous utilisez Avada Builder pour la conception de pages, la barre d'outils comporte une "icône d'affichage réactif" sur laquelle vous pouvez cliquer pour basculer entre les différents émulateurs d'appareils :

• Grand (bureau)
• Moyen (plat)
• Petit (téléphones portables)

Lors de l'édition de contenu sur un autre écran, Avada activera le "Responsive Settings Set" pour cette taille, c'est-à-dire :

• Il est possible de configurer des éléments pour chaque appareil individuellement à l'aide de la fonctionmargeetstyle calligraphiqueetalignementetampleuret al. (et autres auteurs)
• Les réglages n'affectent pas les autres tailles deouverture (jargon des échecs)Indépendants les uns des autres.

Recommandations communes d'optimisation

• La mise en page en plusieurs colonnes n'est pas recommandée pour les petits écrans.Suggérer de passer à une mise en page empilée sur une seule colonne
• Le contenu mobile ne doit pas être trop long.Conserver le message principal sur le premier écran ou dans un délai de deux écrans.
• Polices et tailles de boutons adaptéesIl faut tester la facilité avec laquelle les utilisateurs cliquent sur leurs doigts.
• Utilisez la prévisualisation réactive pour tester itérativement chaque page, chaque bloc de contenu dans le site Web de laPerformances à différentes tailles

résumés

Non seulement la fonctionnalité responsive d'Avada est activée par défaut, mais elle fournit également des options de configuration complètes, des aperçus de simulation d'appareil et des paramètres responsive au niveau du module. Qu'il s'agisse d'une simple auto-adaptation ou d'un contrôle complexe du contenu différencié par appareil, Avada permet de le faire facilement sans écrire de code. Pour en savoir plus surTutoriel du thème Avadaet des informations, veuillez suivreRéseau de fluctuation des photonsIl est mis à jour quotidiennement avec de nombreux tutoriels et informations sur WordPress.