Visuel

Rendre un élément déplaçable sur son site web

outils :

Sommaire

Vidéo explicative

1. Ajoutez une class aux éléments que vous voulez rendre déplaçable

2. Ajoutez ce script dans le </body> dans les paramètres de votre page

 < script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
   </script>
 < script>
     $(function() {
        $(".yourclass").draggable({
      });
    });
</script>

Pensez à bien mettre votre classe dans le script à la place de "yourclass"

3. Publiez votre site et tester le résultat

4. Bonus : ajouter une animation au hover pour une meilleure expérience

  1. Sélectionnez l'élément sur lequel vous voulez ajouter l'interaction dans la vue de conception.
  2. Dans le panneau d'interaction, cliquez sur "Ajouter une interaction" pour créer une nouvelle interaction.
  3. Sélectionnez "Hover" dans la liste des déclencheurs d'interaction.
  4. Dans la section "Actions", cliquez sur "Ajouter une action" pour créer une nouvelle action.
  5. Sélectionnez "Scale" dans la liste des actions disponibles.
  6. Entrez "1.05" dans le champ de saisie de la valeur d'agrandissement pour augmenter la taille de l'élément de 5%.
  7. Cliquez sur "Ajouter une action" dans la section Hover out et dupliquer votre action précédente
  8. Rétablissez les paramètres par défaut (scale = 1)
  9. Enregistrez les modifications en cliquant sur "Appliquer"

5. Exemple

Nos autres tutoriels

Enrichir des données d’entreprise sur la base du numéro de SIREN dans Webflow

OutilS
Webflow
Wized
Catégorie
DATA/Tracking

Optimiser son maillage pour le SEO

OutilS
Webflow
Catégorie
SEO

Modifier le nom d’un formulaire

OutilS
Webflow
Catégorie
Fonctionnel
Voir tous nos tutoriels