Comment utiliser WPBakery pour créer une rotation dynamique des images : tutoriels détaillés

WPBakery Il s'agit d'un produit populaire WordPress Le plugin d'édition de pages qui offre de nombreuses fonctionnalités puissantes pour concevoir facilement différents types de pages et de mises en page. Avec WPBakery, vous pouvez facilement créer des effets de rotation d'images dynamiques pour augmenter l'interactivité et l'attrait visuel de votre page. Cet article vous fournira un tutoriel détaillé sur la façon d'utiliser WPBakery pour construire des pages et des mises en page.Rotation dynamique de l'image.

1) Installation et activation de WPBakery Page Builder

Tout d'abord, assurez-vous que le constructeur de pages WPBakery est installé et activé sur le site. L'installation peut être effectuée en suivant les étapes ci-dessous :

• Connectez-vous au backend de WordPress.
• Dans le menu de gauche, sélectionnez plug-in (composant logiciel) > Ajouter un nouveau plugin.
• Téléchargez les documents que vous avez achetésWPBakery Page Builderet cliquez sur Installation en cours.
• Une fois l'installation terminée, cliquez sur commencer à utiliser.

2. créer une nouvelle page ou modifier une page existante

Allez dans le backend de WordPress et sélectionnez page webpuis sélectionnez la page que vous souhaitez modifier, ou cliquez sur le bouton Ajouter une nouvelle page Créer une nouvelle page. Cliquez sur la pageéditeur (logiciel)Accédez à l'écran de modification.

3. module de rotation d'image utilisant WPBakery

Dans WPBakery, vous pouvez passer le paramètrerotation de l'image(Slider) pour obtenir un effet de rotation dynamique de l'image. Voici les étapes détaillées :

Étape 1 : Ajouter des lignes et des colonnes

1. Lorsque vous cliquez sur Editer la page, dans l'écran d'édition de WPBakery, cliquez sur le bouton + Ajouter un élément.

2. Dans la liste déroulante des éléments, sélectionnez classificateur pour les objets dans les lignes tels que les mots(Rangée). Ajoute un conteneur à votre rotation.

3. dans une nouvelle ligne, puis sélectionnez autonome(1 colonne).

Etape 2 : Insérer l'élément slider de WPBakery

1. Dans une seule colonne, cliquez sur + Ajouter un élémentRechercher et sélectionner rotation de l'image(Carrousel d'images).

2. Une fois ajouté, vous verrez un panneau de configuration contenant la rotation de l'image.

Étape 3 : Configuration de la rotation de l'image

1. Télécharger une image: dans "photographie"Cliquez sur la section + Ajouter une image pour sélectionner les images à afficher. Plusieurs images peuvent être sélectionnées et la rotation les affichera dans l'ordre.

2. Paramètres de rotationDans la section "Paramètres de rotation", vous pouvez configurer les options suivantes :
   • autoplay(Lecture automatique) : lorsque cette option est activée, l'image est lue automatiquement.
   • vitesse de lecture(Vitesse) : Définit la vitesse de changement d'image.
   • bouton de navigation(Navigation) : activer les boutons fléchés de navigation pour que les utilisateurs puissent passer manuellement d'une image à l'autre.
   • bouton de radiomessagerie(Pagination) : active un bouton de pagination qui permet à l'utilisateur de passer d'une image à l'autre en bas de la page.
   • boucle(Boucle) : lorsque cette option est activée, l'image revient de la première à la dernière, créant ainsi une boucle infinie.

Étape 4 : Configuration de l'effet d'animation

WPBakery fournit une variété d'effets d'animation pour ajouter un sens de dynamisme à la rotation. Ils se trouvent dans la section effet de transition(Effet de transition) pour sélectionner un autre effet d'animation, par exemple :

• mouvement de glissement(Diapositive)
• fondu enchaîné(fondu)
• bascule(Flip)

Ces effets permettent un changement d'image plus fluide.

4. les ajustements de style et de conception

Pour mieux coordonner la rotation avec la conception de votre page, il est possible de la personnaliser à l'aide de styles :

• Dans le panneau Paramètres de rotation de l'image, sélectionnez Options de conception(Options de conception).

• En ajustant marge(Marge) et marge intérieure(Padding), en ajustant la valeur (px) dans la boîte des parties, peut modifier la distance entre la rotation et d'autres éléments.

• faire passer (un projet de loi, une inspection, etc.) couleur de fond(Arrière-plan), vous pouvez définir la couleur d'arrière-plan de la rotation ou ajouter un arrière-plan en dégradé.

• utiliser CSS personnalisé(Custom CSS) pour effectuer des ajustements de style plus détaillés afin de s'assurer que la rotation est cohérente avec le style général du site.

5. l'optimisation mobile

Sur les appareils mobiles, veillez à ce que les rotations de vos images s'affichent correctement :

1. Le constructeur de pages WPBakery peut être configuré pour s'afficher différemment selon les appareils. Pour ce faire, il suffit d'ajuster le paramètre Paramètres réactifsLa rotation est ainsi optimisée pour les appareils mobiles ou les tablettes.
2. Veiller à ce que les images tournantes soient adaptées au petit écran, avec la possibilité de définir une taille différente pour chaque image. largeur minimale(largeur minimale) afin que la rotation s'affiche clairement sur différentes tailles d'écran.

6. enregistrer et publier

Une fois que vous avez terminé tous les réglages, cliquez sur le coin supérieur droit de l'écran d'accueil. mettre à jour pour enregistrer vos modifications. Prévisualisez ensuite la page pour voir à quoi ressemblera la rotation. Si tout fonctionne, vous pouvez cliquer sur le bouton poste.

Elementor vs WPBakery : quel est le meilleur constructeur de pages WordPress ?

28 août 16:07

08010