Comment ajouter des boutons collants sur le site Web WordPress
Vous souhaitez ajouter des boutons collants Ă votre site WordPress? En utilisant des boutons dâaction persistants, lâutilisateur peut facilement obtenir des informations relatives au site Web. Ces informations peuvent ĂȘtre votre adresse e-mail, votre numĂ©ro de tĂ©lĂ©phone, votre localisation sur une carte Google, des liens vers des rĂ©seaux sociaux, etc. Dans cet article, je vais vous montrer comment ajouter des boutons collants Ă votre site WordPress.
Les boutons dâaction collants agiront comme un widget flottant. Ces boutons se verrouillent mĂȘme si lâutilisateur fait dĂ©filer vers le haut ou vers le bas. Il aura fiĂšre allure sur le site Web et le rendra plus convivial. Lâajout de boutons persistants permet dâamĂ©liorer les conversions et lâengagement des visiteurs.
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
- FooGallery â magnifique plugin de galerie dâimages WordPress
- Comment augmenter vos abonnés email sur votre site WordPress
- Comment ajouter du code aprĂšs la balise body dans WordPress
Source dâenregistrement: artisansweb.net