Le texte et les images sont les éléments constitutifs du contenu en ligne, et vous n’aurez jamais assez de façons différentes de les styliser et de les afficher. Qu’il s’agisse de choisir différentes polices et couleurs pour le texte ou d’utiliser des éléments d’affichage tels que des curseurs pour les images, vous pouvez toujours faire quelque chose pour attirer l’attention sur les parties d’une page qui comptent le plus pour vous.
Si les curseurs d’image réguliers vous ont ennuyé ou si vous cherchez à présenter spécifiquement des images dans les cadres de différents appareils (comme les téléphones portables ou les ordinateurs portables), le widget Device Frame Slider est fait pour vous. Publié dans le cadre de notre plugin Qi Addons for Elementor, la plus grande collection gratuite d’addons Elementor que vous trouverez en ligne, il vous permettra d’ajouter des curseurs de cadre d’appareil à votre site Web en un rien de temps.
Pour vous aider à démarrer avec cet incroyable addon, nous avons publié un didacticiel vidéo qui vous guide tout au long du processus d’ajout d’un curseur de cadre de périphérique à une page de site WordPress.
Si vous préférez lire un didacticiel au lieu de regarder , vous êtes exactement là où vous devez être. Dans cet article, nous allons vous montrer comment :
Pour ajouter un curseur de cadre de périphérique dans WordPress à l’aide du Modules Qi pour Elementor plugin, vous devrez l’installer ainsi que le générateur de pages Elementor. Si vous n’êtes pas familier avec Elementor, ne vous inquiétez pas – le constructeur de page est très bien documenté, et vous pouvez utiliser notre tuto pour débutant pour démarrer rapidement. Lorsque vous êtes prêt, accédez à Plugins> Ajouter un nouveaurecherchez les plugins, installez-les et activez-les.
Nous utiliserons un exemple de la page de notre plugin pour montrer ce que vous pouvez faire avec le plugin. Vous pouvez l’utiliser comme point de départ pour votre exploration du plugin. N’oubliez pas non plus que nous utilisons notre thème Qi pour ce guide – les choses peuvent sembler différentes de votre côté, selon le thème que vous utilisez et ses paramètres. Dans cet esprit, commençons à préparer la page en créant l’arrière-plan.
Il est composé d’une image et d’un texte. Pour ajouter l’image, nous avons créé une nouvelle section, puis utilisé l’option Modifier la section pour afficher ses options. Sous Style, nous avons trouvé Arrière-plan et ajouté l’image, défini sa position sur « centre central », répété sur « sans répétition » et la taille sur « couvrir ».
Pour la prochaine étape, nous avons ajouté le texte à l’aide du widget Titre de la section, également disponible auprès de Qi Addons pour Elementor. Nous avons fait glisser le widget vers la section, écrit notre texte et utilisé les options de style de titre sous Style pour changer la balise de titre en H3, la couleur en #ffffff et la taille en 250 pixels.
Pour que tout ressemble exactement à l’exemple, nous avons également dû essayer les options avancées. Sous positionnement, nous avons choisi la position absolue car elle permet au curseur de se chevaucher avec le texte et de rester au-dessus de celui-ci. Nous avons également utilisé les options de décalage avec des valeurs de -1 pixel pour le décalage horizontal et 18 % pour le décalage vertical.
Avec l’arrière-plan défini, il est temps d’ajouter le widget de curseur de cadre de périphérique. Il suffit de le trouver dans le menu du widget et de le faire glisser vers la section avec l’arrière-plan, même si cela entraînera une image d’arrière-plan agrandie. Pour résoudre ce problème, nous avons accédé aux options du widget et, sous Style> Style, nous avons défini la largeur de l’appareil sur 254 pixels.
Lorsque vous êtes satisfait de l’apparence de votre widget en arrière-plan, vous pouvez passer à l’étape suivante : ajouter et modifier le contenu.
Le premier ensemble d’options dans la section Contenu sont les options générales. C’est ici que vous pouvez ajouter des images, choisir le type de cadre de périphérique que vous souhaitez afficher et si vous souhaitez activer l’ombre du cadre de périphérique. Nous avons ajouté trois images, choisi le cadre de l’appareil mobile et activé l’ombre.
Les paramètres du curseur sont le prochain lot d’options de contenu. Dans ces options, vous pouvez choisir l’un des deux effets de curseur, ainsi qu’activer la boucle de curseur, la lecture automatique, la navigation, la pagination et les liens personnalisés. C’est également là que vous définissez la durée de la diapositive et de l’animation.
Pour commencer, nous avons changé la durée de la diapositive à 1 700 millisecondes, pour qu’elle dure moins longtemps que les 5 000 millisecondes par défaut. Nous avons également désactivé la navigation par curseur, ainsi que la pagination.
Après avoir terminé avec les options de contenu, l’étape suivante consiste à styliser le curseur du cadre de l’appareil.
Les deux premiers ensembles d’options de style sont les options Style de navigation du curseur et Style de pagination du curseur. Ils seront à votre disposition si vous décidez d’activer la navigation par curseur et la pagination. En leur sein, vous pourrez tout définir, de la position et du type de navigation et de pagination à leur couleur et leur taille.
Puisque nous avons choisi de ne pas afficher la navigation et la pagination, nous pouvons passer à la section Style. Nous l’avons déjà visité lors de la création de l’arrière-plan – c’est là que nous définissons la largeur de l’appareil pour le rendre plus gérable. Les deux autres options qui se trouvent ici sont le rayon de la bordure de l’image – pour arrondir la bordure de l’image – et le décalage de l’image pour augmenter ou diminuer la taille de l’image par rapport au cadre.
Nous avons décidé de définir le rayon de bordure de l’image sur 40 pixels, pour éviter que les coins des images ne dépassent du cadre. Nous avons également apporté un ajustement mineur aux images en ajoutant un seul pixel aux options de décalage d’image à droite et en bas.
Et avec cela, notre curseur de cadre d’appareil a été terminé. Bien sûr, le vôtre peut être complètement différent – vous pouvez même entrer un cadre personnalisé si vous le souhaitez. Si vous voulez créer quelque chose qui ressemble à l’un des exemples sur la page du widget, voici comment vous pouvez le faire.
Enveloppons-le !
Lorsque vous souhaitez rendre les images de votre site Web plus attrayantes et accrocheuses, l’utilisation d’un curseur de cadre de périphérique pour les afficher est une excellente option. Grâce au widget Device Frame Slider de notre plug-in Qi Addons for Elementor, vous pouvez facilement créer un curseur et le personnaliser avec des options couvrant tout, des transitions aux liens et à la pagination. La meilleure partie est que vous pouvez avoir le widget opérationnel en quelques minutes – il est presque prêt à l’emploi dès la sortie de la boîte !
Soutenez notre effort ❤️
Si vous avez apprécié cet article, pensez à laisser un pourboire pour nous aider à continuer à publier du contenu de qualité.
