Largeur totale Les curseurs sont un élément de conception populaire qui capte l'attention et qui est idéal pour mettre en valeur des images, des promotions et des messages clés. Elementor permet de créer facilement un slider pleine largeur sur un site WordPress. Ce guide fournit des étapes détaillées et des exemples pour vous aider à configurer et à personnaliser un slider pleine largeur.
Étape 1 : Installer et activer le plugin Elementor
If Elementor isn’t installed, follow these steps:
- Connectez-vous au tableau de bord de WordPress.
- Naviguez jusqu'à Plugins > Ajouter un nouveau Plugins.
- Dans la barre de recherche, tapez Elementorpuis cliquez sur Installer.
- Une fois installé, cliquez sur Activer.
Ce guide utilise Elementor Proqui comprend le Curseur widget. If Elementor Pro isn’t available, a third-party plugin like Addons essentiels pour Elementor offre également une fonctionnalité de curseur.
Étape 2 : Créer une nouvelle page ou modifier une page existante
Pour ajouter le curseur, vous pouvez soit créer une nouvelle page ou éditer un autre existant:
- Aller à Pages > Ajouter un nouveau Page pour une nouvelle page ou sélectionnez une page existante à modifier.
- Cliquez sur Modifier avec Elementor pour ouvrir l'éditeur Elementor.
Étape 3 : Ajouter le widget Slider
Dans Elementor, utilisez le widget Slider :
- Cliquez sur le bouton Ajouter un nouveau conteneur et choisissez un disposition en une colonne.
- Dans le panneau de gauche, recherchez le Curseur et faites-le glisser dans la section.
Étape 4 : Configurer les paramètres du curseur
Personnalisez le contenu de la barre de défilement :
- Ajouter le contenu de la diapositive: Cliquez sur chaque diapositive, téléchargez des images et ajoutez une légende. titre, descriptionet un appel à l'action bouton.
- Exemple: A travel blog could showcase popular destinations with a “En savoir plus" ou "Explorer” button.
- Définir des images d'arrière-plan: Utilisez des images à haute résolution (au moins 1920 px de large) pour préserver la clarté.
- Meilleures pratiques: Optimisez les images entre 100KB et 300KB pour un chargement plus rapide.
- Liens vers les boutons: Link each slide’s button to relevant pages, such as product pages or blog posts.
Étape 5 : Définir la mise en page pleine largeur
Pour afficher le curseur en pleine largeur :
- Sélectionnez la section dans laquelle se trouve le widget du curseur et cliquez sur Éditer le conteneur.
- Dans le cadre de la Mise en page onglet, définissez Largeur du contenu à Largeur totale.
- Fixer Écart entre les colonnes à Pas d'écart afin que le curseur couvre toute la largeur de l'écran.
- Allez à la page Avancé et définissez Marge et Rembourrage à zéro, en veillant à ce que le curseur s'aligne sur les bords de l'écran.
- Un portfolio photographique pourrait utiliser des curseurs pleine largeur pour les images de paysage, couvrant l'écran sans marges.
Step 6: Customize the Slider’s Appearance
To adjust the slider’s style:
- Réglages de la hauteur: Dans le Contenu et ajustez la hauteur pour qu'elle corresponde à la conception. Des options telles que Adaptation à l'écran ou des paramètres de hauteur personnalisés (par exemple, 600px) sont disponibles.
- Incrustation d'arrière-plan: Dans l'onglet Style, ajoutez un arrière-plan semi-transparent pour améliorer la lisibilité du texte.
- Utilisez une incrustation foncée sur les images claires ou une incrustation claire sur les images foncées.
- Typographie: You can adjust fonts, styles, and colors to match the site’s branding. Elementor allows you to customize typography for titles, descriptions, and buttons.
- Effets d'animation: Ajouter Animations d'entrée ou Effets de survol dans le Avancé pour l'interactivité.
Étape 7 : Sauvegarde et prévisualisation
Après avoir finalisé les réglages du curseur :
- Cliquez sur Publier ou Mise à jour.
- Utilisez le Avant-première (icône de l'œil) pour voir à quoi ressemblera le curseur en direct.
Vérifiez que le curseur se charge correctement et qu'il s'affiche bien sur différents appareils (ordinateur de bureau, tablette et mobile).
Conclusion
Un slider pleine largeur ajoute de l'impact visuel, en mettant en valeur des contenus tels que des promotions ou des messages critiques. Elementor offre un large éventail d'options de personnalisation, ce qui simplifie la création d'un slider réactif et attrayant.
Questions fréquemment posées
1. Why isn’t the slider displaying in full width?
Vérifiez que le Section et Colonne sont réglés sur Largeur totale et que la marge et Rembourrage sont mises à zéro.
2. Comment puis-je accélérer le temps de chargement des curseurs ?
Optimisez les images en les enregistrant dans des formats tels que JPEG ou WebP. La taille des fichiers doit idéalement se situer entre 100 Ko et 300 Ko.
3. Comment puis-je rendre le curseur plus interactif ?
L'utilisation Animations d'entrée et Effets de survol in Elementor’s Avancé L'onglet peut apporter une touche dynamique.