Comment ajouter un effet de survol dans divi builder

Wordpress

Il existe de nombreuses façons de rendre une page web de votre site web plus attrayante. L’une d’entre elles est que vous pouvez ajouter un effet de survol à un certain élément sur la page. Si vous avez un site Web basé sur WordPress construit avec Divi Builder , vous pouvez ajouter sans effort un effet de survol à un élément de votre page. Au fait, qu’est-ce que Divi Builder ?

Au cas où vous ne connaîtriez pas Divi Builder. C’est un plugin de constructeur de page pour WordPress tout comme Elementor (Elementor est le constructeur de page WordPress le plus populaire). Il est également livré avec un éditeur visuel pour vous faciliter la création de la page. Divi Builder est livré avec quelques fonctionnalités intégrées pour ajouter des effets d’animation, y compris ceux que vous pouvez ajouter lorsqu’un visiteur survole un certain élément sur votre page. Jetez un œil au screencast ci-dessous.

Les effets de survol ci-dessus sont créés avec Divi Builder. Divi Builder lui-même fait usage de la transformation CSS pour la fonctionnalité d’effet de survol. Donc, techniquement, lorsque vous ajoutez un effet de survol à un certain élément dans Divi Builder, vous mettez en œuvre la transformation CSS à votre page.

Dans Divi Builder, l’élément de conception tombe dans trois types : section, ligne et module. Vous pouvez ajouter un effet de survol à ces trois types d’éléments. Dans cet exemple, nous allons vous montrer comment ajouter un survol à un module d’image (comme vous pouvez le voir sur le screencast ci-dessus).

Comment ajouter un effet de survol dans Divi Builder

D’abord, vous devez préparer une section ainsi qu’une rangée sur la zone de toile de Divi Builder. Pour ce faire, cliquez sur le bouton plus bleu pour ajouter une nouvelle section (vous pouvez ajouter une section ordinaire pour cet exemple). Insérez une ligne et sélectionnez la structure de colonne en fonction de vos besoins. Dans cet exemple, nous sélectionnons la structure à trois colonnes.

Une fois la ligne ajoutée, cliquez sur l’icône plus grise sur l’une des colonnes pour ajouter un module. Puisque nous voulons ajouter l’effet de survol à l’image, alors sélectionnez Image pour ajouter le module Image.

Le panneau de paramètres du module Image apparaîtra juste après avoir ajouté le module Image. Pour ajouter une image, vous pouvez cliquer sur le support d’image sur le bloc Image sous l’onglet Contenu .

Une fois l’image ajoutée, allez sur l’onglet Design et ouvrez le bloc Transform . Sur le bloc Transform , cliquez sur l’icône du curseur, puis sur l’onglet de survol (qui est également représenté par une icône de curseur).

Sélectionnez un type de transformation que vous souhaitez ajouter en cliquant sur l’un des onglets disponibles et utilisez votre souris pour définir la valeur. Ou, vous pouvez également définir la valeur de la transformation manuellement en tapant votre valeur préférée.

C’est tout. Vous pouvez appliquer les modifications en cliquant sur l’icône verte de la liste de contrôle dans le coin inférieur droit du panneau de paramètres.

Pour rendre votre page plus attrayante, vous pouvez également afficher une image différente au survol. Vous pouvez cette article pour en savoir plus.

Vous pouvez passer par le même chemin pour ajouter un effet de survol à une section et à une ligne. Tout d’abord, ouvrez le panneau des paramètres, puis allez dans l’onglet Design . Dans l’onglet Conception , vous pouvez ouvrir le bloc Transformation . Vous pouvez définir l’effet de survol sur ce bloc comme nous venons de le couvrir ci-dessus.

YouTube video: Comment ajouter un effet de survol dans Divi Builder


Rate article