Ajoutez de belles diapositives à votre site Web avec le curseur MotoPress pour WordPress

MotoPress est bien connu dans la communauté WordPress pour son plugin WordPress pour l’éditeur de contenu de création de page. Depuis leur lancement l’année dernière, MotoPress a ajouté plus de produits à son portefeuille, y compris des modules complémentaires 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 sont superbes sur n’importe quel appareil. Voyons de plus près ce que MotoPress Slider peut faire.

Configurer 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 s’affichent. Il y a un onglet pour les paramètres, les contrôles 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 rendu pleine largeur ou vous pouvez définir la taille par défaut de la grille. Le retard du diaporama peut également être réglé dans cette zone. Si vous préférez, le diaporama peut être désactivé.

Nouveaux paramètres de curseur

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..

Nouvelles commandes de curseur

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 jusqu’à 767 pixels affichés à l’aide de la disposition du téléphone, tout ce qui se situe 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 curseur. Il y a aussi une boîte dans laquelle vous pouvez ajouter du code CSS personnalisé.

Nouvelle apparence du curseur

Une page de paramètres distincte est située dans le menu d’administration de MotoPress Slider qui vous permet de désactiver le curseur pour des groupes d’utilisateurs spécifiques.

Paramètres des groupes d'utilisateurs MotoPress Slider

Ne vous inquiétez pas trop de vos paramètres de curseur. Les valeurs par défaut devraient être correctes pour 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 il est très facile à comprendre une fois que vous savez où tout se trouve..

Page de création de diapositives MotoPress

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é calque et ces calques sont affichés 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 avec une priorité donnée au calque en haut. Dans mon exemple ci-dessus, j’ai deux couches: image et texte. Si je devais positionner le calque HTML après l’image, le texte ne serait pas visible.

L’interface fonctionne vraiment bien. Lorsque vous sélectionnez un calque dans la zone de canevas principale, les paramètres de ce calque s’affichent en dessous. Cliquez sur Supprimer sur votre clavier pour supprimer 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 dessin. 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 à 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 des couches, par ex. en haut à gauche, au centre, en bas à droite, etc..

Des dizaines d’animations peuvent être utilisées pour faire apparaître et masquer des couches. Cela inclut les fondus, les zooms, les retournements et les rebonds. Les couches peuvent être affichées et / ou masquées à 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 couches exactement quand vous les 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.

Options d'animation

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 mettre en ligne.

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é était qu’il n’y avait pas de roue chromatique pour sélectionner les couleurs. Vous devez saisir le code hexadécimal manuellement. J’espère 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 auquel le dégradé est appliqué.

Paramètres de couleur du curseur MotoPress

Si vous ne voulez pas de fond uni ou dégradé, vous pouvez utiliser une image. Vous pouvez sélectionner une image dans votre bibliothèque multimédia 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.

Paramètres d'image du curseur MotoPress

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 bibliothèque multimédia ou d’une URL externe.

Paramètres vidéo du curseur MotoPress

Les diapositives peuvent être rendues liées. Vous pouvez définir l’ID de lien, la classe, les attributs rel et title. Lorsqu’un visiteur clique sur la diapositive en question, il est redirigé vers l’URL que vous avez définie. Étant donné que les liens sont configurés diapositive par diapositive, vous pouvez créer un lien entre certaines diapositives et des sites Web externes et pas d’autres.

Paramètres du lien du curseur MotoPress

Les diapositives peuvent être limitées aux utilisateurs connectés. Cela pourrait être utilisé pour afficher uniquement les diapositives aux utilisateurs enregistrés. Vous pouvez également activer des diapositives 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 pendant la première semaine de décembre.

Paramètres de visibilité du curseur MotoPress

Dans le dernier onglet, vous pouvez définir un nom de classe CSS et un ID pour votre diapositive. Comme je l’ai indiqué précédemment, vous pouvez également styliser des calques individuels dans votre diapositive à l’aide de classes CSS personnalisées.

Paramètres divers de MotoPress Slider

Une fois que vous avez créé votre diapositive, vous pouvez l’enregistrer en utilisant le bouton Enregistrer en bas de la page. Cliquez sur le bouton Fermer pour accéder à 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.

Liste des diapositives MotoPress Slider

Enfin, vous pouvez insérer votre curseur terminé dans votre site Web en utilisant 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 pourrait faire. L’insertion d’arrière-plans, de textes, d’images, de boutons et de vidéos personnalisés ne prend pas longtemps.

Exemple de curseur MotoPress

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 retardant 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 pendant 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.

Exemple de curseur MotoPress

Tarification

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 détail à 49 $, la licence commerciale augmente la limite de site Web de un à cinq sites Web.

Tarification MotoPress Slider

La licence de développeur se vend à 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. La licence en volume est également disponible si vous souhaitez emballer MotoPress Slider dans un produit de votre choix.

MotoPress Slider est à 100% GPL. Une licence est requise pour obtenir les mises à jour automatiques et la prise en charge du plugin, mais le plugin est toujours pleinement utilisable si cette clé de licence n’est pas entrée.

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 des 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» quand j’ai commencé à comprendre comment tout fonctionnait. Le premier, c’est quand j’ai compris comment tirer le meilleur parti des couches. La seconde, c’est quand j’ai appris comment les animations peuvent être utilisées pour faire apparaître et masquer 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 couches. Cela permet d’utiliser de nombreuses astuces de présentation intéressantes, telles que la distribution de texte aux visiteurs du site Web et l’affichage d’images et de boutons aux points clés de la diapositive..

Une fois que vous maîtriserez ces techniques simples, je suis convaincu que vous pourrez créer des diapositives professionnelles à l’aide de MotoPress Slider. Si vous avez besoin d’inspiration, je vous recommande de vérifier le curseur qui s’affiche sur MotoPress car il met en évidence ce qui peut être réalisé à l’aide de simples couches de texte et d’image.

J’espère que vous avez apprécié ce regard sur MotoPress Slider. Si c’est le cas, je vous encourage à vous abonner à la newsletter WPExplorer pour recevoir des mises à jour gratuites de nos derniers articles et d’excellents conseils, astuces et offres WordPress.

Merci d’avoir lu.

Kevin

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me