Comment ajouter des codes courts à Slider Revolution

Cet article fait partie de notre série en cours de didacticiels Slider Revolution. Vous pouvez trouver tous les articles de cette série dans notre guide complet de la révolution des curseurs.

L’un des grands avantages de WordPress est qu’il utilise ces petites choses appelées shortcodes, qui aider les utilisateurs à ajouter tous les éléments étonnants à leur site Web. Ils sont pratiques, légers, faciles à utiliser et extrêmement importants pour tout administrateur WordPress. Donc aujourd’hui, nous allons parler de la façon d’ajouter des shortcodes à Slider Revolution.

Que sont les codes courts ?

Dans WordPress, les shortcodes sont petits morceaux de code qui peuvent être placés dans le backend de votre site Web pour ajouter un certain élément, fonctionnalité ou fonctionnalité de conception. Ils peuvent être utilisés pour ajouter des galeries, des vidéos, des éléments de mise en page, des sections de page avec des icônes ou des illustrations, des infographies comme des camemberts, des compteurs, etc. Bien sûr, ils peuvent également être utilisés pour les curseurs. Thèmes WordPress premium généralement disposent d’une grande sélection de shortcodes personnalisés que les utilisateurs peuvent ajouter à leurs pages – ou curseurs – en quelques clics.

Pourquoi ajouter des shortcodes à Slider Revolution

Slider Revolution a des possibilités créatives presque infinies. Pourtant, il est parfois plus facile de simplement copier un shortcode précédemment stylisé sur votre curseur que de créer les calques vous-même à partir de zéro. Pensez-y : lorsque vous souhaitez créer un élément complexe dans Slider Revolution, vous pouvez le faire en utilisant plusieurs calques qui se chevauchent et se réunissent pour créer cet élément. Cependant, cela signifie également vous devez animer chaque calque séparément, même si vous voulez qu’ils aient tous la même animation. Si, d’un autre côté, vous utilisez un shortcode précédemment stylisé et l’ajoutez au curseur en tant que calque, vous n’aurez pas à passer par tous ces tracas. Il est clair que cette méthode permet de gagner un temps considérable, alors voyons comment ajouter des codes courts à Slider Revolution.

Comment ajouter des codes abrégés à votre curseur

Avant de commencer, vous devriez, évidemment, choisissez le shortcode que vous souhaitez utiliser et testez-le, juste pour vous assurer qu’il correspond bien à vos besoins. Accédez au shortcode dans votre backend et insérez-le dans une page de test aléatoire. Vous pouvez ensuite le copier à l’aide du mode Éditeur de texte et le coller dans votre curseur – mais nous y reviendrons plus tard.

Notre thème Goodwish peut servir de bon exemple d’utilisation de shortcodes dans les curseurs. Plus précisément, l’Ecology Home, comme on le voit ci-dessous :

Ce genre de chose pourrait certainement être construit en utilisant des shortcodes sur la page, sans utiliser le plugin, mais nous voulions l’animer et nous avons trouvé que Slider Revolution était parfait pour cela.

Nous pouvons voir que le côté gauche du curseur comporte du texte et un bouton CTA (l’ajout de boutons dans Slider Revolution est un autre processus simple). De l’autre côté, nous avons un élément infographique avec un compteur animé. Cela a été ajouté en utilisant notre coutume Code abrégé du graphique à secteurs, combiné avec du texte au-dessus et une forme rectangulaire pour l’arrière-plan. Un élément comme celui-ci peut être créé dans Slider Revolution couche par couche, en utilisant une couche pour le cercle fin, une autre couche pour le gras, une couche pour le pourcentage et une autre pour le texte du titre ci-dessous.

Donc non seulement il faudrait ajouter quatre calques différents, mais il faudrait aussi les animer, un par un. Le shortcode Pie Chart, cependant, a ses propres animations, donc lorsque vous insérez le shortcode dans le cadre de travail du curseur, vous obtenez toutes les fonctionnalités avec lui. Il est livré avec des options de base/générales comme le Type de texte central où vous pouvez choisir entre un pourcentage et un titre ; en dessous, nous avons un champ pour la valeur du pourcentage, et le troisième est pour définir le titre sous le cercle. Si vous ne souhaitez pas conserver le style prédéfini, vous pouvez choisir votre propre balise de titre. Il existe également une option pour ajouter du texte, mais dans notre exemple, le curseur n’en a pas utilisé.

Dans le shortcode Pie Charts, il existe un onglet « Options de conception » séparé. C’est ici que vous pouvez choisir les couleurs préférées pour l’élément. Vous pouvez également modifier les tailles et la marge sous le graphique si vous n’aimez pas les paramètres par défaut.

Une fois que vous avez défini tous les éléments de votre shortcode, et aussi vérifié sur la page en direct, vous pouvez copier le code en passant en mode d’édition de texte. Dans notre cas, le code est [edgtf_pie_chart type_of_central_text=”percent” percent=”90″ title=”Raised So Far” active_color=”#ffffff” inactive_color=”#f6cd7d” title_color=”#ffffff” percent_color=”#ffffff”].

Il est maintenant temps d’ajouter le shortcode au curseur. Collez-le simplement dans un calque de texte dans Slider Revolution et définissez les options de calque comme vous le feriez pour tout autre calque.

Et c’est à peu près tout ce qu’il y a à faire. Le shortcode dans la couche de texte se transforme en élément infographique de notre exemple dans le thème Goodwish, et tout autre shortcode que vous décidez d’utiliser fera de même.

En conclusion

L’ajout de codes courts aux curseurs Slider Revolution peut être extrêmement utile dans des cas comme celui dont nous avons discuté aujourd’hui. Comme nous l’avons vu, cela vous fait gagner beaucoup de temps que vous perdriez autrement à créer des calques séparés, et vous obtenez un contrôle total de la stylisation et de la personnalisation. Tout ce que vous avez à faire est de trouver un shortcode qui vous convient et de le modifier un peu pour l’adapter à vos besoins.