Le moyen le plus simple d’animer des sites Web WordPress : BeBuilder + Lottie

Cet article sponsorisé a été créé par nos partenaires de contenu, BAW Moyenne. Merci de soutenir les partenaires qui rendent SitePoint possible.

L’animation n’est pas comme les autres tendances de conception Web qui vont et viennent. Depuis quelques années, cette tendance a démontré son utilité pour améliorer l’expérience utilisateur. De l’engagement au divertissement, il y a beaucoup à faire avec l’animation sur un site Web.

Les concepteurs Web disposent actuellement de plusieurs façons d’animer des sites Web WordPress, comme les animations CSS et les GIF intégrés. Alors pourquoi BeTheme a-t-il ajouté une nouvelle fonctionnalité d’animation Lottie dans son BeBuilder ?

La création d’animations avec Lottie présente de nombreux avantages par rapport à d’autres méthodes. Dans cet article, nous allons explorer pourquoi Lottie est le meilleur moyen de créer des animations attrayantes et attrayantes aujourd’hui et comment son intégration avec BeBuilder et BeBuilder l’a rendu encore plus accessible aux utilisateurs de WordPress.

Pourquoi Lottie Animation est le meilleur moyen d’animer des sites Web WordPress

Lottie est l’un des moyens les plus récents et les plus efficaces de créer des animations pour vos sites WordPress. Qu’est-ce qui le rend exactement meilleur que les autres méthodes d’animation ? Jetons un coup d’œil aux principaux avantages de l’animation Lottie.

1. Aucun code n’est nécessaire pour travailler avec Lottie

Vous ne le sauriez jamais en le regardant, mais vous n’aurez pas à écrire une seule ligne de code pour créer des animations Lottie. Par exemple, voici à quoi ressemblent les animations Lottie sur le BeLottie site pré-construit.

Pour commencer, vous n’avez pas besoin de savoir comment utiliser Adobe After Effects pour créer ou modifier des fichiers d’animation Lottie. Vous pouvez obtenir des animations Lottie prédéfinies à partir de sources telles que LottieFiles et IconScout.

Une fois que vous avez vos animations Lottie, BeBuilder facilite leur ajout à votre site WordPress.

Localisez simplement l’élément Lottie dans la liste des éléments de l’interface utilisateur. Glissez-déposez-le dans le constructeur visuel. Ensuite, utilisez le Teneur paramètres sur la gauche pour télécharger le fichier Lottie dans votre médiathèque WordPress ou extraire l’animation à partir d’un lien externe.

Il n’est pas nécessaire d’apprendre HTML, CSS ou After Effects pour créer des animations avancées pour WordPress. BeBuilderLe générateur de pages sans code de et la fonction d’animation Lottie facilitent la création d’animations à l’aide d’outils intuitifs pour les concepteurs et les non-concepteurs.

2. Les animations Lottie sont faciles à personnaliser

Il existe un certain nombre de raisons pour lesquelles vous voudrez peut-être personnaliser votre animation Lottie. Pour commencer, vous voulez que l’animation corresponde à l’image de marque de votre site Web.

Si vous obtenez votre Lottie de LottieFiles, il est livré avec un éditeur qui vous permet de personnaliser :

• la vitesse d’animation
• Couleur de l’arrière plan
• couleurs de calque
• interactivité

Ainsi, vous pouvez modifier le contenu de l’animation Lottie directement depuis la source.

De plus, vous pouvez utiliser les paramètres de BeBuilder pour personnaliser le fonctionnement de l’animation Lottie. Par exemple, vous pouvez ajuster les paramètres liés à :

• déclencheur d’animation
• point de départ et d’arrivée
• sens avant ou arrière
• alignement
• Contexte
• visibilité réactive

Lottie est devenu aussi facile à modifier que tous les autres éléments de l’interface utilisateur de BeTheme.

3. Lottie est meilleur pour la performance

Parfois, lorsque nous animons des sites Web, nous devons le faire au prix d’autre chose.

Par exemple, certaines méthodes d’animation sont gourmandes en ressources et ralentissent le chargement des pages Web. D’autres méthodes d’animation peuvent entraîner des animations glitchy ou granuleuses, qui compromettent l’apparence générale du site Web.

Lottie est un fichier d’animation basé sur JSON. Cela ressemble beaucoup à SVG en ce sens que les deux sont des formats de fichiers vectoriels – de petite taille et de poids tout en étant entièrement évolutifs. Cela fait de Lottie le format de fichier d’animation idéal pour les performances.

Prenons un exemple rapide. Il s’agit d’un bouton JPG « Télécharger » disponible sur un site Web de ressources gratuites.

Une conception similaire le bouton peut être trouvé sur LottieFilesseulement c’est animé.

La différence entre ces deux fichiers va au-delà de l’esthétique. Le JPG de Vecteezy est de 57 Ko. Le JSON de LottieFiles est de 15 Ko.

Bien sûr, d’autres facteurs ont un impact sur la taille d’un fichier, comme la taille de sortie. Cependant, ce sont des graphismes similaires et, malgré l’animation dans le Lottie, il pèse beaucoup moins.

De plus, Lottie s’intègre parfaitement avec BeBuilder, le constructeur de pages le plus rapide pour WordPress. Ainsi, vous n’aurez pas à vous soucier d’un thème lent ou d’un plugin de création de page interférant avec la vitesse et la qualité natives de Lottie lorsque vous utilisez les deux ensemble.

4. Lottie est entièrement réactive

Bien que BeBuilder offre aux utilisateurs la possibilité de masquer leurs éléments Lottie sur certains appareils, il s’agit d’un paramètre que vous n’aurez pas besoin d’utiliser.

Les fichiers Lottie sont vectoriels, ce qui signifie qu’ils s’adapteront à n’importe quelle taille d’écran. Par exemple, disons que nous intégrons un tacos ambulants Lottie dans la page d’accueil pour BeFoodTruck 2.

Lorsque nous ouvrons le mode réactif et passons la vue du bureau à la tablette au mobile, le fichier d’animation répond en conséquence à la nouvelle taille d’écran. Aucun ajustement n’est nécessaire de votre côté pour redimensionner ou repositionner la Lottie.

Compte tenu de l’importance du design réactif pour les marques et les consommateurs d’aujourd’hui, Lottie est un outil d’animation extrêmement utile dans le design réactif. Lorsque vous l’associez aux sites pré-construits réactifs de BeTheme ainsi qu’au constructeur de page réactif de BeBuilder, vous aurez à votre disposition la centrale réactive complète pour WordPress.

5. Le combo Lottie/BeTheme améliore l’expérience utilisateur

Une animation de tacos ambulants est certainement très amusante à regarder, mais nous pouvons faire bien plus avec des animations que simplement divertir les visiteurs. En programmant des microanimations pour répondre aux visiteurs au bon endroit et au bon moment, nous pouvons les inciter à passer à l’action.

Utilisons le bloc d’appel à l’action sur le BeCarRental3 site Web à titre d’exemple.

Il y a une icône verte représentant une voiture/un smiley à côté des mots « Entreprise conviviale », juste au-dessus du bouton d’appel à l’action. Bien que cette marque de confiance soit accrocheuse, certains visiteurs peuvent défiler trop rapidement au-delà de toute la section statique pour la remarquer.

Ce que vous pourriez faire, c’est ajouter du mouvement à la section. Une option serait d’échanger le Réserver une voiture bouton pour une Lottie animée. Cette micro-animation attirerait l’attention des visiteurs directement sur le bouton et inciterait davantage d’entre eux à s’arrêter et à considérer l’invitation à « Réserver une voiture ».

Une autre option consiste à remplacer la marque de confiance par un graphique Lottie déclenché par défilement.

Ici, nous voyons ce qui se passe lorsque le l’assurance automobile propose une animation de page de chargement est réutilisé pour notre bloc d’appel à l’action.

Au lieu que la Lottie joue en boucle, l’animation ralentit et se synchronise avec les mouvements des visiteurs. Nous avons pu le faire en modifiant un seul paramètre à l’intérieur de BeBuilder, en mettant à jour le Gâchette depuis défaut pour sur défilement.

Bien que le bouton reste inchangé, l’ajout de mouvement à cette section – et directement au-dessus du bouton – aidera à augmenter l’engagement.

Les animations Lottie ne sont qu’une raison de plus pour faire de BeTheme votre thème WordPress de prédilection

Lottie change sérieusement la donne en matière d’animation de sites Web. Et c’est tout seul.

Lorsque vous intégrez Lottie à BeTheme et BeBuilder, vous disposerez de tous les outils dont vous avez besoin pour faire passer vos conceptions (et vos expériences utilisateur) au niveau supérieur. De plus, vous n’aurez pas à augmenter le coût, le temps de lancement ou les efforts requis pour animer vos sites Web BeTheme. Tout a été rendu aussi intuitif et transparent que possible pour vous.