...
Actualités WEB et WordPress, thÚmes, plugins. Ici, nous partageons des conseils et les meilleures solutions de sites Web.

Comment ajouter des boutons collants sur le site Web WordPress

113

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

Source d’enregistrement: artisansweb.net

Source d’enregistrement: artisansweb.net

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails