TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Widget coulissant flottant CSS pour Weebly

16

Il existe de nombreuses raisons pour lesquelles vous devez placer un bouton d’appel à l’action sur votre site. Par exemple, vous pouvez être intéressé par la collecte d’e-mails pour l’envoi de newsletter. Le défi ici est de trouver une position attrayante pour le bouton afin que les utilisateurs cliquent et agissent dessus. Le bouton flottant est une solution simple à ce problème de placement qui flotte sur une position fixe lorsque les utilisateurs font défiler la page. Cela aidera à augmenter la visibilité et le taux de clics sur le bouton. Dans cet article, discutons de la façon de créer un widget coulissant flottant CSS qui glissera lorsque l’utilisateur survolera l’image du bouton flottant.



Avant d’aller de l’avant, voici à quoi ressemblera le widget. Vous pouvez placer l’image du bouton d’abonnement flottant sur le côté gauche avec le code de l’élément de newsletter à l’intérieur du slideout. Le formulaire de newsletter glissera au survol et les utilisateurs pourront s’inscrire facilement.

Widget coulissant flottant CSS pour Weebly

Widget coulissant flottant CSS

Vous pouvez placer n’importe quel code personnalisé à l’intérieur du slideout et voici quelques exemples de cas d’utilisation :

  • Bouton flottant contactez-nous avec le formulaire de contact intégré dans le slideout. Vous pouvez également envoyer les utilisateurs vers une page de contact distincte en créant un lien vers la page.
  • Bouton de rétroaction avec n’importe quel formulaire de contact tiers intégré.
  • Tout type de widgets comme l’horloge, la météo, le calendrier, etc. comme slideout.

Comment créer un slideout flottant CSS avec un bouton d’appel à l’action ?

Le widget est composé de trois composants :

  • Une image
  • Code CSS
  • Code HTML

1 – Préparation de l’image

Vous trouverez ci-dessous l’image que nous avons utilisée sur le widget de démonstration. Vous pouvez préparer une image similaire avec une taille approximative de 50 x 200 pixels.

Widget coulissant flottant CSS pour Weebly

Vous pouvez utiliser n’importe quel outil de traitement d’image comme Snagit ou Photoshop pour créer des images de qualité. Sinon, vous pouvez utiliser des outils comme Paint disponibles gratuitement sur tous les PC Microsoft. Vous pouvez également télécharger des boutons Creative Commons sur Internet qui peuvent être utilisés librement sur votre site.

Une fois l’image prête, accédez à la section « Thème > Modifier HTML/CSS > Éléments » sur votre éditeur Weebly. Téléchargez l’image sur votre site et l’URL pour accéder à l’image devrait être comme « http://votresite.com/files /thème/nom-image.jpg “.

Widget coulissant flottant CSS pour Weebly

Téléchargement d’une image sur le site Weebly

2 – Code CSS

Il existe deux façons d’utiliser le widget: l’une consiste à placer le widget sur l’ensemble du site afin que le widget apparaisse sur toutes les pages de votre site et la seconde consiste à placer le widget uniquement sur certaines pages de votre site Weebly.

Pour l’ensemble du site, copiez le code ci-dessous, collez-le dans la section "Paramètres > SEO > Code d’en-tête" de votre site Weebly et enregistrez vos modifications. Pour le niveau de la page, collez le code CSS dans la section « Pages > Sélectionnez la page > Paramètres de référencement > Code d’en-tête ».

<style type="text/css"> /* Slideout outer button */ #slideout { position: fixed; z-index: 1; top: 80px; left: 0; padding: 25px 0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } /* Slideout inner widget area */ #slideout_inner { position: fixed; top: 80px; left: -305px; background: #ffeb3b; width: 250px; padding: 25px; height: 200px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; } /* Hover alignment */ #slideout:hover { left: 300px; } #slideout:hover #slideout_inner { left: 0; } </style>

3 – Code HTML

Glissez-déposez un élément « Embed Code » n’importe où sur le site et insérez le code HTML ci-dessous :

<div id="slideout"> /* Insert Weebly Image */ <img src="Your Weebly Image URL" alt="Subscribe" /> <div id="slideout_inner"> <div> /* Insert Code for Content Shown in Slideout */ </div> </div> </div>

Si votre CSS est efficace au niveau du site, le code HTML peut être intégré sur n’importe quelle page de votre site. Si votre code CSS n’est efficace que sur une page particulière, insérez le code HTML sur cette page spécifique.

Le code HTML comporte deux parties :

  • Image – ajoutez votre propre URL de l’image du site Weebly à partir de l’étape 1.
  • Code du widget à afficher sur le slideout. Ici, vous pouvez ajouter n’importe quel code d’intégration tiers tel quel. Si vous souhaitez utiliser les éléments par défaut de Weebly comme la newsletter ou le formulaire de contact, lisez la suite.

Obtenir le code HTML de l’élément Weebly par défaut

Ici, nous expliquons avec l’élément newsletter et le processus reste le même pour d’autres éléments tels que les formulaires de contact et de RSVP. Insérez un élément de newsletter sur une page et publiez votre site. Si vous avez déjà un élément de newsletter existant, vous pouvez réutiliser le même élément. Ouvrez maintenant la page avec la newsletter sur le navigateur, accédez à la vue développeur en cliquant avec le bouton droit de la souris et en choisissant l’option inspecter l’élément.

Widget coulissant flottant CSS pour Weebly

Copie du code de l’élément du bulletin d’information

Survolez le code et copiez l’intégralité du bloc de code lié à l’élément newsletter. Sur les navigateurs comme Chrome, vous pouvez simplement cliquer sur la première balise div et appuyer sur « contrôle + v » ou « commande + v ». Cela copiera l’intégralité du bloc de code pour l’élément de newsletter sélectionné. En savoir plus sur la façon d’ afficher le code source dans Google Chrome. Utilisez ce code à l’intérieur du code HTML pour le widget coulissant et le code HTML complet ressemblera à ci-dessous :

<div id="slideout"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88392-61320d0b64b6e.png" alt="Subscribe" /> <div id="slideout_inner"> /* START OF NEWSLETTER ELEMENT CODE */ <div> <form enctype="multipart/form-data" action="https://widgetcode.weebly.com/ajax/apps/formSubmitAjax.php" method="POST" id="form-100440182464484169" accept-charset="UTF-8" target="form-100440182464484169-target-1480443240994"> <div id="100440182464484169-form-parent" class="wsite-form-container" style="margin-top:10px;"> <ul class="formlist" id="100440182464484169-form-list"> <div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;"> <label class="wsite-form-label" for="input-885026583907653749">Email <span class="form-required">*</span></label> <div class="wsite-form-input-container"> <input id="input-885026583907653749" class="wsite-form-input wsite-input wsite-input-width-370px" type="text" name="_u885026583907653749"> </div> <div id="instructions-885026583907653749" class="wsite-form-instructions" style="display:none;"></div> </div></div> </ul> </div> <div style="display:none; visibility:hidden;"> <input type="text" name="wsite_subject"> </div> <div style="text-align:center; margin-top:10px; margin-bottom:10px;"> <input type="hidden" name="form_version" value="2"> <input type="hidden" name="wsite_approved" id="wsite-approved" value="approved"> <input type="hidden" name="ucfid" value="100440182464484169"> <input type="submit" style="position:absolute;top:0;left:-9999px;width:1px;height:1px"><a class="wsite-button" onclick="document.getElementById('form-100440182464484169').submit()"><span class="wsite-button-inner">Subscribe to Newsletter</span></a> </div> </form><iframe name="form-100440182464484169-target-1480443240994" id="form-100440182464484169-target-1480443240994" style="display: none;"></iframe> </div> /* END OF NEWSLETTER ELEMENT CODE */ </div> </div>

Vous pouvez utiliser les formulaires de contact et de RSVP de la même manière que celle expliquée ci-dessus. Assurez-vous de ne pas supprimer la newsletter d’origine ou l’élément du formulaire de contact de votre site, si le formulaire d’origine est supprimé, le code intégré à l’intérieur du widget ne fonctionnera pas. Pour une implémentation à l’échelle du site, vous pouvez ajouter le code HTML dans la disposition du pied de page du site afin que vous n’ayez pas besoin d’incorporer le code sur chaque page.

Personnalisation du widget

Le code du widget est très flexible et vous pouvez le personnaliser selon vos besoins en modifiant les paramètres. Voici quelques options dont vous pourriez avoir besoin pour adapter le widget sur votre site :

  • Hauteur fixe – la hauteur fixe du bouton flottant est de 80px comme défini en utilisant "top" dans les classes CSS #slideout et #slideout_inner. Vous pouvez changer à n’importe quelle hauteur requise selon vos besoins.
  • Largeur du slideout – la largeur du slideout est définie comme 300px au total. Vous pouvez ajuster la largeur en modifiant le paramètre "gauche" dans les classes CSS #slideout, #slideout_inner et slideout:hover.
  • Couleurs – ajustez la couleur du slideout en changeant "l’arrière-plan" dans la classe #slideout_inner.
  • Image coulissante et widget – vous pouvez utiliser n’importe quelle image de votre choix et intégrer n’importe quel code de widget tiers au lieu d’un élément de newsletter comme expliqué ci-dessus.

Source d’enregistrement: www.webnots.com
Leave A Reply

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