Comment ajouter des boutons collants sur le site Web WordPress

Dernière mise à jour Oct 18, 2021

Teneur

Ajoutez des boutons collants à votre site WordPress

Début

Il existe 2 façons d’ajouter des boutons collants dans WordPress. Une façon est de créer le code à partir de zéro et l’autre est d’utiliser un plugin. Pour ce tutoriel, je vais utiliser un plugin. La raison est évidente, si nous pouvons obtenir un bon plugin qui peut faire notre petite tâche, alors pourquoi perdre du temps à le construire à partir de zéro.

Il est logique de coder si vous souhaitez créer des fonctionnalités volumineuses et complexes. Dans de tels cas, les plugins peuvent ne pas convenir à votre objectif et il est préférable de ne pas s’y fier car leurs mises à jour peuvent endommager les fonctionnalités. Mais pour les petites tâches comme celle-ci (boutons collants), vous pouvez compter sur des plugins.

WP Sticky est l’un des plugins les plus efficaces pour ajouter des éléments collants à votre site Web. C’est un petit plugin sympa qui vous permet d’ajouter un nombre illimité d’éléments collants, compatible avec tous les thèmes, plugins et constructeurs de pages, et toute la procédure peut être effectuée en quelques minutes. Il met l’accent sur la simplicité du processus, de sorte que l’ensemble de la procédure consiste à :

Nommez votre élément
Déplacez et cliquez sur le bouton Sélectionner un élément
Sélection de l’élément souhaité que vous souhaitez rendre collant
En cliquant sur "Enregistrer les modifications"

Et c’est à peu près tout – l’élément sélectionné est maintenant attaché à votre site. Il y a pas mal de paramètres inclus, vous pouvez donc jouer avec l’opacité de l’élément collant, choisir un effet Fade-in ou Slide down, définir la plage de défilement, etc. De plus, vous pouvez définir différentes préférences selon les exigences de votre site Web idéalement – vous pouvez ajouter une restriction basée sur un critère spécifique, ce qui signifie que l’élément n’apparaîtra pas comme collant sur celui sélectionné :

Pages
Des postes
Catégories
Mots clés:
Ou types de messages

Bien sûr, vous pouvez le modifier partout ou l’empêcher sur l’un des éléments mentionnés pour obtenir un contrôle total sur le plugin. Vous vous inquiétez de la façon dont ils s’afficheront sur différents appareils ? Cela peut également être configuré dans l’onglet Appareils, où vous pouvez choisir la taille exacte de l’écran sur lequel vos éléments apparaîtront comme collants. Vous pouvez choisir presque n’importe quel élément que vous aimez, que ce soit un en- tête collant, un menu collant, un widget, une navigation, une vidéo… tout peut être configuré en quelques minutes et vous pouvez en créer autant que vous le souhaitez. Efficace, élégant et aussi simple que possible.

De plus, il existe d’autres outils pour vous aider à créer des éléments collants sur votre site. En même temps, installez et activez le plugin Smart Floating Action Buttons – Buttonizer. Dans la section suivante, nous verrons comment utiliser ce plugin.

Ajoutez des boutons collants à votre site WordPress

Après avoir installé le plugin, allez dans le menu "Buttonizer" dans le panneau de configuration. Ce plugin n’a pas de page de paramètres backend. Au lieu de cela, il fournit une interface pour que vous puissiez voir immédiatement l’impact des modifications.

Le plugin fournit plus de 25 actions au clic. Disons à partir d’une liste que vous souhaitez ajouter un e-mail, un téléphone et Google Map à vos boutons collants sur un site Web.

Cliquez sur le bouton Ajouter et nommez le bouton. Je donne au bouton le nom "Téléphone". Après cela, vous verrez un bouton dans le front-end, comme indiqué ci-dessous.

Puisque ce bouton est pour un "numéro de téléphone", nous devons le configurer. Cliquez sur l’icône Paramètres à côté de TÉLÉPHONE. Le panneau d’options pour personnaliser le bouton s’ouvrira.

Dans la liste déroulante Action du bouton, sélectionnez Action d’appel (numéro de téléphone). Ajoutez votre numéro de téléphone dans la zone de texte.

Ensuite, je veux définir une icône de téléphone pour ce bouton. Cela peut être fait à partir des sections STYLE >> ICON. Sous l’icône ICNE, cliquez sur SÉLECTIONNER L’ICNE, une fenêtre contextuelle s’ouvrira dans laquelle vous sélectionnerez une icône dans la bibliothèque Font Awesome.

En suivant le même processus, nous pouvons ajouter autant de boutons au site. Pour chaque bouton, sélectionnez l’action de bouton correspondante et vous obtiendrez différentes options pour le bouton.

Enfin, nous voulons définir la position des boutons collants. Pour ce faire, cliquez sur l’icône "Paramètres" à côté de "NOUVEAU GROUPE".

Dans la section Position, vous pouvez obtenir les paramètres de réglage de la position des boutons. Je veux qu’il soit droit et centré. Donc, j’ai mis "0%" sous "HORIZONTAL" et la partie centrale sous "VERTICAL".

Les plugins Buttonizer offrent de nombreuses autres fonctionnalités avec lesquelles vous devriez jouer et vous familiariser avec. Le plugin fournit des options pour la couleur des boutons, l’animation des boutons, l’arrière-plan, les classes personnalisées, la visibilité des appareils, etc.

Une fois les paramètres ci-dessus appliqués, les boutons collants apparaîtront sur le site Web, comme indiqué dans la capture d’écran ci-dessous.

J’espère que vous avez découvert l’ajout de boutons collants à votre site WordPress. S’il vous plaît partager vos pensées et suggestions dans la section commentaires ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net