Point culminant du plugin Divi – Slider n’importe quoi

Le module slider Divi standard est un slider puissant. Les fonctionnalités incluent un en-tête, un bouton, du texte, un média, un lien, un arrière-plan, une superposition, etc. Et si vous vouliez créer des mises en page avec le Divi Builder et les placer dans la diapositive ? C'est exactement ce que fait Anything Slider.

Anything Slider est un plugin tiers de CakeWP qui vous permet d'utiliser les mises en page Divi dans les diapositives. Vous pouvez en faire beaucoup plus que de simples curseurs. Il comprend également le module AS Menu qui peut être utilisé en conjonction avec le module slider pour créer :

• Onglets
• Carrousels
• Sections interactives
• Bascule de tarification
• Galeries filtrables
• CTA interactifs
• Produits filtrables
• Une page Web

Anything Slider fonctionne avec Divi, Extra et le plugin Divi Builder. Dans ce point culminant du plugin, nous examinerons ce que Anything Slider peut faire. Les images proviennent d'Unsplash.com.

• Voir CakeWP.com pour les informations d'achat.

Installer n'importe quoi Slider

Téléchargez et activez le plugin comme vous le feriez avec n'importe quel plugin premium. Une fois activé, survolez le menu Plugins dans le tableau de bord et sélectionnez Anything Slider License. Saisissez votre clé de licence et sélectionnez Activer la licence. Ensuite, sélectionnez Enregistrer les modifications.

Deux nouveaux modules sont ajoutés au Divi Builder : Anything Slider et AS Menu. Ensemble, ils peuvent créer des designs intéressants.

Tout Paramètres du module de curseur

Les paramètres incluent les nouvelles diapositives, les commandes suivantes/précédentes, les commandes de point, les commandes d'affichage au survol, le curseur de boucle, l'animation, la hauteur, le glissement de la souris, etc. L'onglet Conception comprend des styles personnalisés pour les commandes Suivant et Précédent, le nombre de diapositives par écran, la marge entre diapositives, couleurs de points, et plus encore.

Paramètres de la diapositive du curseur n'importe quoi

Cliquez sur Ajouter une nouvelle diapositive. Ici, vous verrez une liste déroulante appelée Disposition des diapositives où vous choisirez les dispositions pour les diapositives. Il peut s'agir de mises en page prédéfinies, de mises en page que vous avez créées et enregistrées dans la bibliothèque ou de mises en page que vous avez téléchargées.

Paramètres du module de curseur de menu AS

Les paramètres incluent l'orientation du menu, l'alignement, etc. L'onglet Conception comprend les polices, l'espacement, les arrière-plans, les couleurs, etc. Vous allez créer les éléments de menu en cliquant sur Ajouter un nouvel élément de menu. Vous allez coller l'URL, choisir une icône, choisir une image, etc.

Kits de démarrage Anything Slider

Anything Slider utilise des mises en page pour créer les diapositives. Pour vous aider à démarrer, il existe de nombreux kits de démarrage et packs de mise en page gratuits que vous pouvez télécharger sur le site Web du développeur. Importez-les dans la bibliothèque Divi pour les utiliser.

Création d'un curseur personnalisé

J'ai créé mes propres mises en page et j'ai sélectionné chacune d'elles comme diapositive. Vous pouvez ajouter autant de diapositives que vous le souhaitez. Je trouve qu'il est préférable de les étiqueter afin que vous sachiez quelle diapositive est laquelle si vous souhaitez apporter des modifications.

Cette diapositive comprend une image et un compteur de barres. Vous pouvez voir la navigation par points dans le coin gauche et les curseurs des deux côtés. Dans cet exemple, ma souris survole le bouton de navigation gauche. Tous les styles sont personnalisables.

Animations

Les diapositives peuvent être animées et vous pouvez les faire glisser automatiquement ou non. Il comprend une animation pour l'entrée et la sortie. Il contient près de 80 animations, y compris toutes les bases telles que rebond, élastique, jello, pulse, shake, tada, wobble, swing, fade, flip, rotation, zoom, et bien plus encore. Vous pouvez faire en sorte que l'animation s'arrête au survol.

Boutons de navigation

Les boutons de navigation peuvent être stylisés indépendamment. Style à la fois normal et survol pour les icônes, les bordures, les couleurs, etc.

Dans cet exemple, j'ai stylisé le bouton de navigation indépendamment et augmenté la taille des points (vous pouvez spécifier n'importe quelle taille en pixels pour les points). L'animation de survol modifie la couleur et le rayon de la bordure. Il comprend les mêmes fonctionnalités de style que la plupart des modules Divi.

Les boutons et les points ont été déplacés vers la droite avec les boutons en haut et les points en bas. Vous pouvez les placer des deux côtés ou à gauche, au centre ou à droite pour le haut ou le bas. Vous pouvez également désactiver chacun d'eux si vous préférez. Entre les boutons et les points, il y a beaucoup de combinaisons pour les options de mise en page.

Module de menu AS

Le module AS Menu est idéal pour ajouter plus d'options de navigation et peut utiliser des icônes et des images. Il comprend des options d'orientation horizontale et verticale et peut être stylisé comme n'importe quel autre module.

Le module AS Menu crée un menu pour que vos visiteurs puissent naviguer à travers les diapositives. Les diapositives elles-mêmes incluent une balise de navigation à la fin de l'URL (dans la barre d'adresse de votre navigateur). Utilisez cette balise pour chaque élément de menu. Dans cet exemple, la balise URL de la diapositive 1 est #s_1.

J'ai placé le menu en bas, augmenté la taille de la police et ajouté un arrière-plan pour le faire ressortir. Les mots sont cliquables, mais dans cet exemple, ils ne ressemblent pas à des boutons. C'est facile à changer.

J'ai ajouté un rembourrage personnalisé et ajusté les couleurs de survol et d'arrière-plan.

J'ai également supprimé les boutons de navigation du curseur et placé le module AS Menu en haut. Le menu s'affiche en orientation horizontale. Le remplissage avec des couleurs d'arrière-plan crée des boîtes autour du texte. En utilisant le rembourrage, vous pouvez rendre les boutons aussi grands que vous le souhaitez.

J'ai ajusté la mise en page à 2 colonnes (3/4 + 1/4) et placé l'orientation du menu à la verticale.

Le menu sur le côté crée des possibilités intéressantes, surtout si l'on considère les fonctionnalités d'image et d'icône du module. Voyons ce que nous pouvons faire avec cela.

Créer une page unique

Vous pouvez créer des pages entières à l'aide du curseur, puis glisser entre elles automatiquement, avec la navigation par boutons et points, ou avec le module de menu. Pour cet exemple, j'ai créé une nouvelle page pleine largeur avec un module AS Menu en 1/4 à gauche et le Anything Slider en 3/4 à droite. J'ai ajouté une image d'arrière-plan à la section avec une superposition pour aider à décrire visuellement le site Web en un coup d'œil.

Pour cet exemple, je voulais utiliser la fonction d'image du module AS Menu. Pour ce menu, j'ajoute des images pour chacun des éléments du menu. Il comprend également des icônes, qui peuvent être utilisées avec les images ou seules.

Pour les diapositives, j'ai créé des mises en page avec un seul module de blog avec une seule catégorie sélectionnée.

Le module AS Slider affichera toutes les mises en page du blog sous forme de diapositives individuelles. J'ai désactivé les contrôles suivant/précédent et les points.

Le curseur affiche le module de blog pour chaque catégorie tandis que le menu de gauche, qui est réglé sur une orientation verticale, affiche des images pour les catégories et fonctionne comme une navigation entre les diapositives. Le curseur est configuré pour faire pivoter les diapositives pour afficher le dernier message de chaque catégorie. Cela signifie que toute la page d'accueil, à l'exception de la navigation, est un curseur. Bien entendu, le menu peut également être placé au-dessus, en dessous ou à droite.

Tout Slider Documentation

La documentation est fournie sur le site Web de CakeWP et comprend un aperçu avec des images et plusieurs vidéos, dont un guide de démarrage et un didacticiel. Il comprend également des démos pour vous donner des idées sur la façon d'utiliser les modules.

Licence, assistance et mises à jour

Le plugin peut être utilisé sur des sites Web pour vous et vos clients en fonction de la licence que vous choisissez. Vous avez le choix entre trois licences :

• 1 emplacement – ​​30,00 $
• 5 emplacements – 50,00 $
• Sites illimités – 120,00 $

Toutes les licences incluent un an de support et de mises à jour.

• Voir CakeWP.com pour les informations d'achat.

Dernières pensées

Anything Slider est un module intéressant. La possibilité d'utiliser les mises en page Divi sous forme de diapositives ouvre de nombreuses possibilités de conception. J'aime particulièrement utiliser des images dans le module de menu. Les modules sont faciles à utiliser et la documentation fournit des instructions étape par étape pour vous aider à démarrer.

Si vous souhaitez étendre vos curseurs au-delà du curseur Divi standard, Anything Slider pourrait être le plugin que vous souhaitez.

Nous aimerions vous entendre. Avez-vous utilisé Anything Slider ? Faites-nous part de votre expérience dans les commentaires.

Image en vedette via VectorsMarket / shutterstock.com