Guide de paramétrage des sliders dans les thèmes WoodMart

WoodMart Le thème propose un slider léger qui permet de créer rapidement des effets de rotation d'image fluides qui s'exécutent plus rapidement, sont plus faciles à configurer et ont moins d'impact sur votre site que des plugins tels que Revolution Slider. Cette fonctionnalité s'appuie sur WordPress Les types d'articles personnalisés permettent aux utilisateurs de profiter des avantages suivants WPBakery Page Builder peut-être Elementor Effectuer la mise en page et la gestion du contenu, afin d'améliorer la visualisation dynamique de la page.

Création de curseurs

Les sliders améliorent la présentation visuelle d'une page et attirent l'attention des visiteurs sur le contenu essentiel. Les étapes de base pour créer un slider sont les suivantes :

Allez dans le backend de WordPress et cliquez sur Slides > Slider pour accéder à la page de gestion des sliders.

Créez un nouveau curseur en saisissant les informations nécessaires.

personnalisationcurseur (élément d'interface informatique)mettre en place

Mise en page

Animation de changement de diapositive (Animation de changement de diapositive)

Dans cette section, différents curseurs peuvent être sélectionnés pour modifier l'animation :

• Diapositive - Effet de bascule par défaut.
• Fade - Permet de faire entrer et sortir la diapositive en douceur.
• Parallaxe - Effet de commutation par défilement parallaxe.
• Distorsion - Animation avec effets spéciaux de déformation.

Coulisseau extensible

• Cette option est utilisée pour Si la barre de défilement doit être en plein écran ou non.
• L'état actuel est NO (éteint)ce qui signifie que le curseur ne remplira pas automatiquement toute la largeur de l'écran.
• Si cette option est activée (OUI), la barre de défilement s'adaptera à toute la largeur de la page, ce qui convient à l'affichage d'images de grande taille en plein écran.

Hauteur sur le bureau

• Cette option permet de régler la hauteur du curseur à l'extrémité du bureau.
• La hauteur est actuellement fixée à 500pxLa valeur peut être ajustée en faisant glisser le curseur selon les besoins.
• Visible dans l'icône de droite, ce paramètre de hauteur ne s'applique qu'à la page bureauLes côtés tablette et mobile peuvent être réglés individuellement.

Style des flèches

Style des flèches

Dans cette section, vous pouvez choisir le style des flèches de navigation sur le curseur, avec quatre options :

• Flèche par défaut(actuellement sélectionné)
• flèche en trait fin
• flèche circulaire
• Flèches cachées (pas de flèches de navigation)

Si vous ne souhaitez pas que l'utilisateur passe d'une diapositive à l'autre à l'aide des flèches, vous pouvez sélectionner la dernière option pour masquer les flèches.

Schéma de couleurs des flèches

• Deux gammes de couleurs sont disponibles :
  • Fond noir, flèches blanches
  • Fond blanc, flèches noires

Adapté à différents styles de sites web, vous pouvez choisir en fonction de la couleur d'arrière-plan de la page.

Paramètres personnalisés

• État actuel : Désactivé (NO)ce qui signifie que les paramètres par défaut sont utilisés.
• Si vous activez cette option, vous pouvez effectuer des réglages de personnalisation plus avancés, tels que la taille de la flèche, la couleur, les bordures, etc.

Style de pagination

Style de pagination

Cette section permet de sélectionner le style d'indicateur de pagination pour le curseur, quatre types étant proposés :

• Dot paging (coché par défaut): Affiche la progression actuelle du curseur sous la forme d'un point, ce qui convient au style minimaliste.
• pagination numériqueAffichage numérique de la position du curseur, par exemple "01 - 02", pour une meilleure visualisation.
• Points + barre de progression: Combine les points et les barres de progression pour des dessins plus dynamiques.
• Masquer la paginationLa navigation par pagination n'est pas affichée, ce qui convient aux conceptions ne nécessitant pas de pagination.

Alignement horizontal de la pagination

Ce paramètre détermine la position horizontale de la navigation par pagination dans la barre de défilement et offre trois options :

• justification à gauche
• Centré (actuellement sélectionné)
• aligné à droite

Schéma de couleurs de pagination (Schéma de couleurs de pagination)

Ce paramètre permet de sélectionner le schéma de couleurs de la navigation par pagination :

• Fond noir, indicateur de pagination blanc
• Fond blanc, indicateur de pagination noir

Des ajustements peuvent être effectués en fonction de la palette de couleurs globale du site web afin de garantir un effet visuel cohérent.

Paramètres personnalisés

• État actuel : Désactivé (NO)indique que les paramètres par défaut sont utilisés.
• Si vous activez les paramètres personnalisés, vous pouvez ajuster la taille, l'espacement, la couleur, etc. des indicateurs de pagination afin d'obtenir une configuration plus avancée et personnalisée.

Une fois la création réussie, vous pouvez afficher les curseurs créés dans une liste et ajouter du contenu aux curseurs pour les rendre plus utiles dans les étapes suivantes.

Paramètres personnalisés des diapositives

La configuration du curseur peut déterminer sa présentation dans l'espace de travail. Diapositives > Diapositive > Modifierdiapositive (photographie, logiciel de présentation)Les paramètres clés suivants peuvent être ajustés :

ouverture (jargon des échecs)

Paramètres de mise en page

• Contenu pas d'espace: Actuellement état ferméSi cette option est activée, il n'y aura pas de rembourrage supplémentaire dans la zone de contenu à l'intérieur du curseur.

• Contenu pleine largeur: Actuellement état ferméSi cette option est activée, le contenu du curseur remplit automatiquement toute la largeur du curseur, ce qui permet d'obtenir un effet d'affichage plein écran.

• Largeur du contenuLa largeur du contenu de la barre de défilement peut être réglée manuellement et est actuellement d'environ 750pxIl peut être déplacé et ajusté en fonction des besoins de conception.

Position du contenu

• Trois modes de fonctionnement sont disponibles (Desktop, Tablet, Mobile)La mise en page du contenu peut être configurée séparément pour différents appareils afin de garantir l'adaptabilité du curseur.
• Alignement vertical du contenuLe système d'alignement : propose trois types d'alignement, le type actuellement sélectionné est le suivant aligné au centre(c'est-à-dire que le contenu se trouve au milieu du curseur).
• Alignement horizontal du contenu: Trois options sont proposées, la sélection actuelle est la suivante justification à gauchec'est-à-dire que le contenu est situé à gauche du curseur.

contextes

Couleur d'arrière-plan (Couleur)

• existent Couleur pour sélectionner un arrière-plan de couleur unie. Si vous ne souhaitez pas utiliser d'image d'arrière-plan, vous pouvez cliquer sur le sélecteur de couleurs pour définir une couleur appropriée.

Image de fond

• Télécharger l'image d'arrière-planVous pouvez cliquer sur Télécharger permet de télécharger une image qui servira d'arrière-plan à la barre de défilement.
• Dispositif adaptatif: Fourni Ordinateur de bureau, tablette, mobile Trois options pour définir l'image d'arrière-plan pour différents appareils afin d'assurer un bon affichage dans toutes les tailles d'écran.

Taille de l'arrière-plan

• Cette option permet de régler l'affichage de l'image d'arrière-plan et offre deux possibilités :
  • CouvertureL'image d'arrière-plan s'étire pour remplir toute la zone du curseur, en coupant éventuellement une partie du contenu de l'image, mais en veillant à ce que l'arrière-plan recouvre entièrement le curseur.
  • ContenirL'image d'arrière-plan sera affichée dans son intégralité, laissant éventuellement une zone vide dans le curseur, mais le contenu de l'image ne sera pas recadré.

Position d'arrière-plan

• Les options actuelles sont les suivantes Centre CentreCela signifie que l'image d'arrière-plan sera alignée sur le curseur au point central. Si vous devez l'ajuster, vous pouvez choisir une autre position, par exemple :
  • Bas gauche - en bas à gauche
  • Centre Centre - aligné au centre
  • Haut de la page - en haut à droite
  • Fond central - centré sur le fond
  • Haut du centre - centré sur le haut
  • Gauche Centre - Centré sur la gauche
  • Haut gauche - en haut à gauche
  • Centre droit - Centre droit
  • Fond droit - en bas à droite
  • Sur mesure - personnalisable

Paramètres

Activer le jeu automatique

• État actuel : Désactivé (NO)
• Cette option détermine si le curseur est automatiquement tourné, et si elle est activée, le boutondiapositive (photographie, logiciel de présentation)basculera automatiquement à des intervalles déterminés sans qu'il soit nécessaire de cliquer manuellement.
• Convient pour afficher un contenu dynamique, tel que des produits populaires, des informations promotionnelles, etc., afin d'améliorer l'attrait visuel de la page.

Scroll Loading Slider (Init Carousel on Scroll)

• État actuel : Désactivé (NO)
• Cette option détermine si le script n'est chargé qu'après l'affichage du curseur, ce qui permet d'optimiser les performances de la page et de réduire le temps de chargement initial.
• Idéal pour les pages contenant plusieurs curseurs, en particulier lorsque le contenu est long, afin de réduire le nombre de scripts inutiles et d'améliorer la fluidité de la page.

Ajouter des diapositives à un curseur

existentcurseur (élément d'interface informatique)Ajout de diapositives

L'écran suivant apparaît dans la barre latérale de la page Créer ou modifier une diapositive individuelle. Sa principale fonction est d'affecter la diapositive en cours d'édition à un ou plusieurs curseurs créés :

• Tous les curseurs(Tous les curseurs) : tous les curseurs créés pour le site sont répertoriés et l'utilisateur peut choisir les curseurs auxquels il souhaite affecter la diapositive en cours.
• Les plus utilisés(Most Frequently Used) : Les curseurs les plus fréquemment utilisés sont listés ici pour une sélection rapide des curseurs les plus utilisés.
• Cliquez sur le bas de la page "+ Ajouter un nouveau curseur" Vous pouvez directement créer un nouveau curseur et ajouter rapidement la diapositive actuelle au curseur nouvellement créé.

Cette fonction permet de gérer rapidement et efficacement l'association entre les diapositives et les curseurs afin d'optimiser l'efficacité de la gestion du contenu.

Tri des diapositives

suivantsWordPressLa zone de paramétrage des attributs de l'article dans le backend, où l'option Ordre est utilisée pour définir l'ordre d'affichage des diapositives ou des pages.

Précisez :

• Commande: :
  Permet de définir l'ordre de la page, de l'article ou de la diapositive en cours dans une liste ou un affichage frontal.
  • Le nombre par défaut est "0". Plus le nombre est petit, plus le tri est avancé.
  • Par exemple, si vous entrez "0" ou un nombre négatif (par exemple, "-1"), l'élément sera affiché en haut de la page d'accueil.
  • La saisie d'un nombre plus élevé (par exemple "5" ou "10") permet d'afficher l'élément plus loin dans le tri.

Cette fonction permet de contrôler de manière flexible l'ordre dans lequel les diapositives ou les pages sont affichées sur votre site web, ce qui permet de mieux organiser et présenter le contenu.

Mise en place d'images vedettes

• Sur le côté droit de l'écran Image en vedette cliquez sur "Définir l'image en vedette".
• Sélectionnez une image dans votre bibliothèque de médias WordPress ou téléchargez-en une nouvelle.

Ajouter une barre de défilement à une page

WoodMart Soutien aux thèmes WPBakery Page Builder répondre en chantant Elementor Deux façons d'insérer le curseur :

Utilisation d'Elementor

• Accédez à l'écran d'édition de la page Elementor.
• augmenter Curseur WoodMart Widget to page.
• Sélectionnez le curseur créé dans la liste déroulante et ajustez la taille et le style selon vos besoins.
• Après avoir confirmé qu'il n'y a pas d'erreur, cliquez sur mettre à jourpour que les modifications soient effectives.

utiliser WPBakery Page Builder

• entrer dans Éditeur de pagesPasser à Éditeur dorsal de WPBakery .
• augmenter Curseur WoodMart à l'endroit approprié de la page.
• Dans Paramètres du composant, sélectionnez le curseur à insérer.
• Après avoir enregistré les modifications, actualisez la page pour avoir un aperçu de l'apparence du curseur.

mise en garde

• Blocs contenant des curseurs La largeur doit être fixée à par défaut (réglage)Sinon, il peut y avoir des problèmes typographiques.
• Diapositive plein écran Doit figurer dans les paramètres du curseur Activer le curseur d'étirementet veiller à ce que Contenu pleine largeur est activée pour garantir l'adaptabilité aux différents appareils.

résumés

WoodMart La fonction "slider" du thème permet aux utilisateurs de créer rapidement des effets de rotation de haute qualité et d'optimiser la présentation visuelle du site web. Une bonne utilisation des sliders permet non seulement d'attirer l'attention des visiteurs sur des informations clés, mais aussi d'améliorer la hiérarchie de la page et de rendre l'ensemble du site plus professionnel.