MotoPress est bien connu dans la communauté WordPress pour son plugin WordPress d’éditeur de contenu de création de pages. Depuis leur lancement l’année dernière, MotoPress a ajouté plus de produits à son portefeuille, notamment des modules complémentaires de plugin et des thèmes WordPress.
En février de cette année, ils ont sorti MotoPress Slider ; leur deuxième plugin WordPress majeur. Le plugin est réactif, donc les diapositives qu’il vous aide à créer ont fière allure sur n’importe quel appareil. Regardons de plus près ce que MotoPress Slider peut faire.
Configuration d’un nouveau curseur MotoPress
MotoPress Slider est incroyablement facile à configurer. Lorsque vous choisissez de créer un nouveau curseur, trois courtes pages de paramètres vous sont présentées. Il existe un onglet pour les paramètres, les commandes et l’apparence du curseur.
Dans l’onglet des paramètres du curseur, vous pouvez nommer votre curseur et l’alias utilisé pour le shortcode du curseur. Le curseur peut être fait sur toute la largeur ou vous pouvez définir la taille par défaut de la grille. Le délai du diaporama peut également être réglé dans cette zone. Si vous préférez, le diaporama peut être désactivé.
Neuf contrôles de curseur peuvent être activés ou désactivés dans l’onglet suivant. Vous pouvez configurer des commandes telles que des flèches, des boutons de lecture, des compteurs, etc.
Dans l’onglet Apparence, vous pouvez définir la taille de pixel par défaut pour les écrans de téléphone, de tablette et de bureau. Les paramètres d’origine sont tout jusqu’à 767 pixels affichés en utilisant la disposition du téléphone, tout ce qui est compris entre 768 et 991 pixels utilise la disposition de la tablette et tout ce qui dépasse 992 pixels utilise l’affichage du bureau.
Une classe CSS personnalisée peut être appliquée à votre slider. Il y a aussi une boîte dans laquelle vous pouvez ajouter du code CSS personnalisé.
Une page de paramètres distincte se trouve dans le menu administrateur de MotoPress Slider et vous permet de désactiver le curseur pour des groupes d’utilisateurs spécifiques.
Ne vous inquiétez pas trop des paramètres de votre curseur. Les valeurs par défaut devraient convenir à la plupart d’entre vous et il y a un bouton en bas de la zone de création du curseur qui vous permet de revenir et de modifier les paramètres à tout moment.
Ajout de diapositives à votre nouveau curseur MotoPress
Dans la zone suivante, vous pouvez ajouter des diapositives à votre curseur. Vous pouvez voir une capture d’écran de cette zone ci-dessous. Cela peut sembler un peu intimidant à première vue, mais c’est très facile à comprendre une fois que vous savez où tout se trouve.
En haut se trouvent sept onglets : Général, couleur, image, vidéo, lien, visibilité et divers. Un aperçu de votre curseur domine le cœur de la page et en dessous vous trouverez des options pour ajouter du texte, des images, des boutons et des vidéos. Chaque type de contenu est appelé couche et ces couches sont affichées sur le côté droit de la page.
Vous pouvez réorganiser l’ordre des calques par glisser-déposer. Le placement des calques fonctionne de la même manière que dans les applications graphiques telles que Photoshop, la priorité étant donnée au calque du haut. Dans mon exemple ci-dessus, j’ai deux calques : Image et texte. Si je devais positionner le calque HTML après l’image, le texte ne serait pas visible.
L’interface fonctionne très bien. Lorsque vous sélectionnez un calque dans la zone de canevas principale, les paramètres de ce calque s’affichent en dessous. Cliquer sur supprimer sur votre clavier supprimera le calque de votre diapositive. Deux boutons de suppression sont également disponibles : l’un supprime le calque que vous avez sélectionné, l’autre supprime tous les calques.
Les calques peuvent être déplacés dans la zone de canevas. Lorsque vous le faites, vous verrez les coordonnées X et Y changer. Ceci est utile car cela signifie que vous pouvez positionner des calques sur plusieurs diapositives exactement dans la même position (ce qui est très utile pour positionner du contenu tel que du texte). Une grille à neuf cases peut également être utilisée pour positionner les calques, par exemple en haut à gauche, au centre, en bas à droite, etc.
Des dizaines d’animations peuvent être utilisées pour le fondu entrant et sortant des calques. Cela inclut les fondus, les zooms, les retournements et les rebonds. Les calques peuvent être affichés et/ou masqués à un moment donné (en millisecondes). C’est, à mon humble avis, l’une des meilleures fonctionnalités du plugin car il vous permet d’afficher les calques exactement quand vous le souhaitez.
Des styles prédéfinis sont également disponibles, mais si vous préférez, vous pouvez définir des classes CSS personnalisées pour une couche particulière.
Dans l’onglet général, vous pouvez nommer votre diapositive et choisir si votre diapositive est publiée ou enregistrée en tant que brouillon. De cette façon, vous pouvez faire preuve de créativité et enregistrer vos diapositives avant de les utiliser.
L’onglet couleur vous permet de sélectionner une couleur ou un dégradé pour l’arrière-plan de votre diapositive. Une chose qui m’a ennuyé, c’est qu’il n’y avait pas de roue chromatique pour sélectionner les couleurs. Vous devez saisir le code hexadécimal manuellement. Espérons que c’est quelque chose qu’ils aborderont dans une future version du plugin. L’option dégradé vous permet de définir deux couleurs et l’angle d’application du dégradé.
Si vous ne voulez pas d’arrière-plan de couleur unie ou dégradé, vous pouvez utiliser une image. Vous pouvez sélectionner une image dans votre médiathèque WordPress ou définir une URL d’image externe. Les attributs de taille, de répétition et de position peuvent tous être définis.
MotoPress Slider prend également en charge les arrière-plans vidéo. Si vous préférez, des vidéos peuvent être insérées dans vos diapositives à l’aide de calques. Vous pouvez afficher des vidéos de YouTube, Vimeo, de votre médiathèque ou d’une URL externe.
Les diapositives peuvent être liées. Vous pouvez définir les attributs d’ID de lien, de classe, de rel et de titre. Lorsqu’un visiteur clique sur la diapositive en question, il sera redirigé vers l’URL que vous avez définie. Étant donné que les liens sont configurés diapositive par diapositive, vous pouvez faire en sorte que certaines diapositives renvoient à des sites Web externes et pas à d’autres.
Les diapositives peuvent être limitées aux utilisateurs connectés. Cela pourrait être utilisé pour n’afficher les diapositives que pour les utilisateurs enregistrés. Vous pouvez également rendre les diapositives actives pendant une période spécifique. Cela pourrait être utilisé pour une variété d’utilisations. Par exemple, vous pouvez créer des diapositives pour promouvoir un concours au cours de la première semaine de décembre.
Dans le dernier onglet, vous pouvez définir un nom de classe CSS et un ID pour votre diapositive. Comme je l’ai noté précédemment, vous pouvez également styliser des calques individuels dans votre diapositive à l’aide de classes CSS personnalisées.
Une fois que vous avez créé votre diapositive, vous pouvez enregistrer la diapositive en utilisant le bouton Enregistrer en bas de la page. En cliquant sur le bouton Fermer, vous accédez à la liste des diapositives, c’est-à-dire à toutes les diapositives que vous avez créées pour ce curseur particulier.
Vous pouvez modifier, dupliquer ou supprimer des diapositives existantes. La duplication d’une diapositive est une option pratique si vous souhaitez créer une diapositive similaire. Sinon, vous pouvez créer une nouvelle diapositive à partir de zéro.
Enfin, vous pouvez insérer votre curseur terminé dans votre site Web à l’aide de l’alias de shortcode que vous avez défini pour votre curseur.
Le curseur MotoPress
Ils disent que la beauté est dans l’œil du spectateur, mais j’ai été très impressionné par ce que MotoPress Slider pouvait faire. Il ne faut pas longtemps pour insérer des arrière-plans, du texte, des images, des boutons et des vidéos personnalisés.
Si vous visitez la page d’informations principale de MotoPress Slider, vous verrez un excellent exemple de ce qui peut être réalisé en utilisant le plugin. Il met en évidence comment les calques et retarder le chargement des calques peuvent être utilisés pour créer des curseurs professionnels en quelques minutes. La façon dont les calques apparaissent au fil du temps au cours d’une diapositive donne l’impression que vous regardez une présentation vidéo (même lorsque les vidéos ne sont pas utilisées). C’est un effet simple qui transforme vraiment les diapositives.
Prix
MotoPress a adopté un système de tarification équitable pour son plugin de curseur. Leur licence personnelle coûte 19 $ et offre un an d’assistance et de mises à jour pour un site Web. Au prix de 49 $, la licence commerciale augmente la limite de site Web de un à cinq sites Web.
La licence développeur coûte 99 $. Il offre un support prioritaire aux développeurs et offre un an de support et de mises à jour à un nombre illimité de sites Web. Une licence en volume est également disponible si vous souhaitez intégrer MotoPress Slider dans votre propre produit.
Le curseur MotoPress est à 100% GPL. Une licence est requise pour obtenir les mises à jour automatiques et la prise en charge du plug-in, mais le plug-in est toujours entièrement utilisable si cette clé de licence n’est pas saisie.
Dernières pensées
Tous les plugins de curseur WordPress ont une courbe d’apprentissage et MotoPress Slider n’est pas différent. Vous devez passer au moins vingt ou trente minutes à jouer avec les diapositives jusqu’à ce que vous commenciez à comprendre de quoi le plugin est capable.
Après une courte période d’utilisation du plugin, j’ai eu quelques moments « Aha » où j’ai commencé à comprendre comment tout fonctionnait. La première, c’est quand j’ai compris comment tirer le meilleur parti des calques. La seconde est quand j’ai appris comment les animations peuvent être utilisées pour fondre et fondre du texte, des boutons et des images. Cependant, la fonctionnalité qui m’a vraiment fait apprécier le potentiel du curseur MotoPress était l’option de retarder l’apparition des calques. Cela permet d’utiliser de nombreuses astuces de présentation intéressantes, telles que l’envoi de texte au goutte-à-goutte aux visiteurs du site Web et l’affichage d’images et de boutons à des points clés de la diapositive.
Une fois que vous aurez maîtrisé ces techniques simples, je suis convaincu que vous serez en mesure de créer des diapositives professionnelles à l’aide de MotoPress Slider. Si vous avez besoin d’inspiration, je vous recommande de vérifier le curseur affiché sur MotoPress car il met en évidence ce qui peut être réalisé en utilisant de simples calques de texte et d’image.
J’espère que vous avez apprécié ce regard sur MotoPress Slider. Si tel est le cas, je vous encourage à vous abonner à la newsletter Themelocal pour recevoir des mises à jour gratuites de nos derniers articles et d’excellents conseils, astuces et offres WordPress.
Merci d’avoir lu.
Kévin
