Réglage du diaporama de la page d'accueil WoodMart et optimisation de la vitesse de chargement

existent Thèmes WoodMartL'ajout d'un rotateur de page d'accueil permet d'améliorer les performances visuelles de la page, tout en se concentrant sur l'affichage du contenu principal. Les paragraphes suivants présentent deux paramètres courants et fournissent des techniques pratiques d'optimisation du chargement pour vous aider à créer une page d'accueil attrayante et qui ne tra?ne pas en longueur.

Image[1]-Les diaporamas de la page d'accueil de WoodMart et l'optimisation de la vitesse de chargement

Ajouter une image tournante du diaporama de la page d'accueil

Méthode 1 : Utiliser le curseur intégré de WoodMart

  • Connectez-vous au backend de WordPress, cliquez sur "Pages", trouvez la page d'accueil et cliquez sur "Edit with Elementor".
Image [2] - Configuration du diaporama de la page d'accueil de WoodMart et optimisation de la vitesse de chargement
  • Dans la partie supérieure de la page, cliquez sur le signe "+" pour créer une nouvelle ligne et insérez le composant "WoodMart Slider" (ou utilisez l'équivalent dans WPBakery).
Image [3] - Configuration du diaporama de la page d'accueil de WoodMart et optimisation de la vitesse de chargement
  • Sélectionnez l'accessoire du curseur ou cliquez sur "Sélectionner le curseur" pour créer une nouvelle zone de rotation.
Image [4] - Configuration du diaporama de la page d'accueil de WoodMart et optimisation de la vitesse de chargement
Image [5]-Optimisation de la vitesse de chargement et du diaporama de la page d'accueil de WoodMart
  • Ajouter des titres, des boutons, des liens directs, etc. à chaque diapositive
  • Définissez l'animation de commutation (par exemple, fondu, diapositive, etc.), la durée de l'intervalle de commutation (environ 5 secondes sont recommandées) et l'activation ou non de la lecture automatique.
Image [6] - Configuration du diaporama de la page d'accueil de WoodMart et optimisation de la vitesse de chargement
  • Cliquez sur "Mettre à jour" pour revenir à la page d'accueil et voir les résultats.

Méthode 2 : Utiliser le plugin Slider Revolution

WoodMart intègre le puissant plugin Slider Revolution pour les scènes rotatives qui nécessitent des animations complexes et des superpositions de couches.

  • Cliquez sur "Slider Revolution" sur le c?té gauche du backend pour modifier le curseur.
Image [7] - Configuration du diaporama de la page d'accueil de WoodMart et optimisation de la vitesse de chargement
  • Définissez la taille du curseur, par exemple largeur 1920px, hauteur 800px.
Image [8] - Configuration du diaporama de la page d'accueil de WoodMart et optimisation de la vitesse de chargement
  • Ajouter un diaporama : téléchargez une image de fond et ajoutez des couches de texte, des boutons, des liens, etc.
Image [9] - Configuration du diaporama de la page d'accueil de WoodMart et optimisation de la vitesse de chargement
  • Cliquez sur chaque couche pour définir laanimetels que le fondu, le zoom, le temps de retard, etc.
Image [10]-Optimisation de la vitesse de chargement et du diaporama de la page d'accueil de WoodMart
  • Lorsque vous avez terminé, cliquez sur le bouton "Enregistrer" dans le coin inférieur droit.
Image [11]-Optimisation de la vitesse de chargement et du diaporama de la page d'accueil de WoodMart
  • Retournez dans l'éditeur Elementor et insérez le module "Revolution Slider" dans la page d'accueil et sélectionnez le nom du slider que vous venez de créer.
Image [12]-Optimisation de la vitesse de chargement et du diaporama de la page d'accueil de WoodMart
  • Sauvegardez la page et actualisez le frontend pour voir les résultats.

Conseils pour optimiser la vitesse de chargement

Bien que l'attrait visuel du diaporama soit fort, la taille de l'image est trop grande ou chargée de manière déraisonnable, ce qui ralentit la vitesse d'ouverture de la page d'accueil. Voici quelques suggestions pratiques d'optimisation :

Images compressées

Il est recommandé que toutes les images tournantes soient au format WebP et compressées à moins de 150 Ko. Les outils suivants peuvent être utilisés :

  • TinyPNG
  • Squoosh
  • Plugin ShortPixel (Plugin WordPress)

Activer le chargement paresseux

dépense ou frais Elementor Pro Si vous utilisez un autre constructeur, vous pouvez installer le fichier WP Rocket et activer le chargement paresseux des images. Il est recommandé de définir la première diapositive comme n'étant paschargement paresseux (informatique)Le reste du chargement différé permet d'éviter le premier écran blanc de la page.

Image [13]- Paramètres du diaporama de la page d'accueil de WoodMart et optimisation de la vitesse de chargement

Contr?le du nombre de diapositives

Il n'est pas recommandé d'ajouter plus de 3 diapositives pour éviter de charger les piles. 3 diapositives ou moins permettent de présenter les points clés et de concentrer l'attention.

Rationalisation des animations et des calques

Revolution Slider offre de nombreuses fonctions d'animation, mais le co?t de chargement est élevé. Il est recommandé de désactiver les animations de couches redondantes et de ne conserver que des transitions simples pour réduire le temps de rendu.

remarques finales

WoodMart Supporte de multiples fa?ons d'ajouter une image rotative à la page d'accueil, avec une compatibilité et une esthétique solides. Que vous préfériez une configuration simple ou que vous ayez besoin d'une performance visuelle complexe, saisissez laOptimisation des imageset le contr?le des animations, il est facile de créer une page d'accueil attrayante qui se charge rapidement.


Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !
Service clientèle WeChat
Service clientèle WeChat
Tel : 020-2206-9892
QQ咨詢(xún):1025174874
(iii) Courriel : info@361sale.com
Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.
? Déclaration de reproduction
Cet article a été rédigé par Little Lin
LA FIN
Si vous l'aimez, soutenez-le.
félicitations1448 partager (joies, avantages, privilèges, etc.) avec les autres
commentaires achat de canapé

Veuillez vous connecter pour poster un commentaire

    Pas de commentaires