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

outils :

Vidéo explicative

L'agence Webflow Gemeos mets à votre disposition une vidéo pour vous montrer comment faire en moins de 5 minutes.

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 class dans le script à la place de "yourclass"

3. Publiez votre site et testez 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"
Photo de l'auteur
Sandro D.
Mis à jour le
8/10/2024
Growth Marketer, expert Webflow et touche à tout. Je m'occupe des opérations commerciale, veille au bon déroulement des projets et m’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)
Vous êtes bridé avec votre site actuel ?
On en discute ?
Accueil
>
Gemeos Académie
>
Rendre un élément déplaçable sur son site web
Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

développés avec les meilleurs outils et les meilleurs pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour le design de votre site web

Webflow

Pour l’intégration de votre site web

Client-first

Pour organiser vos projets

Wized

Pour ajouter des fonctionnalité à vos projets

Make

Pour l’automatisation de vos flux de travail