skip to Main Content

Comment créer de belles transitions de pages sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Que ce soit dans le monde qui nous entoure ou dans l’espace numérique, il y a beaucoup de distractions et elles sont toutes en concurrence pour attirer notre attention.

C’est pourquoi il y a tellement d’accent mis sur la conception de sites Web d’une manière efficace :

  • L’utilisation des couleurs et des images pour susciter les bonnes émotions et réactions ;
  • La mise en place des appels à l’action simples exactement où et quand les visiteurs se sentent motivés pour faire quelque chose.

L’un des points que nous essayons de respecter autant que possible est l’importance de la vitesse de notre site web. Si vous ne pouvez pas fournir à vos visiteurs un accès quasi-instantané à votre site web et aux pages qui s’y trouvent, tous vos efforts ne serviront à rien.

Supposons que quelqu’un clique sur un lien à partir de votre page d’accueil et il y a un écran blanc pendant que la nouvelle page se charge. Cela pourrait surprendre les visiteurs, qui se demanderont probablement pourquoi la nouvelle page prend autant de temps.

Parfois cela ne sera pas lié à la rapidité du chargement. C’est donc là où l’animation entre les transitions de pages devient intéressante.

Mais avant, si vous n’avez jamais installé WordPress découvrez Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog 

Ensuite revenons vers ce pourquoi nous sommes là

En quoi les transitions des pages sont utiles ?

L’animation, en général, est un excellent moyen pour ajouter plus de vie à la conception Web. Cependant, il doit être utilisé de manière stratégique et devrait s’aligner bien avec le style général du site web. Cela vaut pour l’animation élémentaire de base (comme faire tourner une icône lorsque quelqu’un la survole) ainsi que les transitions entre les pages.

Voici quelques raisons pour lesquelles l’animation fonctionne particulièrement bien pour les transitions de page :

  • Mouvement : Le bon type et la bonne vitesse permet de maintenir les visiteurs, tout en chargeant le contenu en arrière-plan.
  • Divertissement : Si votre animation permet une certaine forme d’interactivité, vous pouvez occuper les visiteurs durant le chargement.
  • Débit : Comme vous raconter l’histoire de votre site Web, vous devez avoir des transitions en douceur d’une page à l’autre. Plutôt que de compter sur un changement simple.
  • Suspens : Il y a certaines transitions qui visent à créer une sorte de « pop » ou de surprise que les visiteurs rencontrent. C’est particulièrement adaptés aux sites web à page unique qui révèlent différentes « pages » via un parchemin.
  • Modernisation : Les sites Web avec le bon type d’animation apparaissent plus modernes que leurs homologues statiques, que ce soit par l’utilisation de la vidéo, le défilement parallaxe, et dans ce cas, les transitions de page.

Quelques outils pour y arriver

En ce qui concerne les animations, vous pouvez vraiment exploiter ces effets d’animation en utilisant du CSS, HTML et jQuery. Si vous n’êtes pas confortable avec ces langages, alors ne vous inquiétez pas.

WordPress, possède quelques outils disponibles pour vous aider. Il est important de noter cependant que, même si il y a des plugins WordPress pour vous aider à animer les transitions de page, la plupart sont limités dans leurs capacités.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Donc, si vous êtes plus habitué à compter sur des plugins et des thèmes WordPress pour vous aider à créer des sites Web, il suffit de définir vos attentes en conséquence.

Quel que soit votre niveau de compétence sur WordPress ou dans le codage, voici les outils que nous vous recommandons pour apporter un peu de vie supplémentaire à vos transitions de page.

1. Animate IT

En termes de plugins, c’est avec dernier que vous aurez envie de commencer. Il couvre toutes vos bases en termes de transitions de page, des effets d’animation au défilement, ainsi que l’animation au vol stationnaire.

Animate-It-plugin-WordPress

Vous pouvez également contrôler les retards, la durée, désactiver les animations pour les mobiles, choisir le type d’animation, et plus encore, et vous pouvez faire tout cela à partir d’une interface facile à utiliser dans les pages WordPress, les articles, et les widgets.

Télécharger | Démo | Hébergement Web

2. Page scroll to id

Pour un défilement vertical, horizontal, ou quelque chose d’un peu plus compliqué que cela, ce plugin vous aidera à définir cela. Il dispose également d’un écran de configuration assez complet où vous pouvez faire des ajustements à la vitesse d’animation, faites défiler le style, la destination cible ou une position de la page, et plus encore.

Page-scroll-to-id-plugin WordPress

Ce plugin peut nécessiter une modification CSS pour le faire fonctionner correctement, de sorte que vous ne devez utiliser ce plugin que si vous êtes à l’aise avec ces modifications.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Télécharger | Démo | Hébergement Web

Découvrez aussi quelques plugins WordPress premium  

Vous pouvez utiliser d’autres plugins WordPress pour donner une apparence moderne et pour optimiser la prise en main de votre blog ou site web.

Nous vous proposons donc ici quelques plugins WordPress premium qui vous aideront à le faire.

1. WooCommerce Multi Currency

WooCommerce Multi Currency est un plugin assez impressionnant qui vous permet d’afficher votre boutique en plusieurs devise. Il ajoute une option qui permet à l’utilisateur de basculer à tout moment entre les devises. Le changement entre les devises est assez rapide, ce qui le rend encore plus pratique.

Vu qu’il est susceptible de fonctionner avec plusieurs devises, avoir la capacité d’être disponible en plusieurs langues n’est qu’une suite logique. WooCommerce Multi Currency est donc compatible avec PolyLang, WPML et bien d’autre plugin. Il propose également un détecteur de région, qui permettra d’afficher la monnaie locale du visiteur.

Télécharger | Démo | Hébergement Web

2. WP Attractive Donations System 

Ce plugin unique vous permet de créer facilement et rapidement sur votre site Web WordPress, de magnifiques et attrayantes sections dédiées à la collecte de dons. Chaque campagne de collecte de dons pourra avoir ses propres étapes, montants, textes, couleurs, images et supporter des paiements en utilisant Paypal ou Stripe.

Comme fonctionnalités on y retrouve entre autres : la gestion des panneau dédiés aux dons, le support des passerelles de paiement populaires, une personnalisation complète de votre panneau ou widget, la possibilité de configurer des paiements récurrents, la personnalisation des couleurs, police, textes et symbole monétaire, une interface utilisateur belle et intuitive, le support des shortcodes et Visual Composer, un service à la clientèle à l’écoute, le support du multilingue et autres. 

Télécharger | Démo | Hébergement Web

3. Product Category Rating

Le plugin WordPress Product Category Rating permet de mettre facilement en valeur vos commentaires cinq étoiles en utilisant des widgets et des shortcodes.

La note moyenne du produit est calculée en fonction de chaque note reçue par le produit. Entre le constructeur de shortcodes facile à utiliser et les widgets intégrés, vous pourrez facilement ajouter un système d’évaluation à votre site Web grâce à ce magnifique système.

Ses fonctionnalités sont entre autres : le support du type personnalisé de post, la prise en charge du multisite, une documentation détaillée, le support du multilingue et plus.

Télécharger | Démo | Hébergement Web

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Ressources recommandées

Découvrez d’autres ressources recommandées qui vous accompagneront dans la création et la gestion de votre site web.

Conclusion

Voilà ! C’est tout pour ce tutoriel. Nous espérons que ces plugins vous aideront à créer de belles transitions de pages sur votre blog WordPress. N’hésitez pas à partager cet articles avec vos amis sur vos réseaux sociaux préférés

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress.

Si vous avez des suggestions ou des remarques, laissez-les dans notre section commentaires.

…  

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
13 Partages
Partagez8
Tweetez1
Enregistrer4