Les curseurs pleine largeur (FWS) sont un élément de conception très populaire. Non seulement ils affichent de belles et grandes images, mais ils peuvent aussi vous aider à faire passer votre message principal et à attirer l'attention de l'utilisateur. UtilisezElementorVous pouvez facilement configurer différentes diapositives pleine largeur pour chaque page. Cet article explique en détail comment ajouter des diapositives pleine largeur pour différentes pages.

Étape 1 : Installer et activer Elementor

Installation d'Elementor Pro(optionnel)

• Utilisez Elementor Pro pour débloquer des fonctionnalités plus avancées, telles que le module Advanced Slideshow.
• Après avoir installé Elementor ProTéléchargez et activez-la.

Étape 2 : Créez des diaporamas pleine largeur distincts pour chaque page

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

Tout d'abord, allez dans le tableau de bord de WordPress et cliquez sur "page web">"Ajouter une nouvelle page"pour créer une nouvelle page ou modifier une page existante.

2. ajouter des structures de pleine largeur

existentÉditeur ElementorDans la section "Recherche", cliquez sur le bouton "+"pour ajouter une nouvelle région, sélectionnez le bouton construction pleine largeur(Colonne unique). Cette option permet à la diapositive de s'étendre sur toute la largeur de la page.

3. ajouter des éléments de diapositive

Dans la bibliothèque de composants d'Elementor, trouvez et faites glisser le composant "Diapositives" (Diapositives) dans la zone de structure pleine largeur. Vous verrez que la diapositive par défaut a été affichée.

4. personnaliser le contenu des diapositives

• Télécharger une imageCliquez sous chaque diapositive sur la page "photographie"Téléchargez l'image que vous souhaitez afficher. Assurez-vous que la résolution de l'image est suffisamment élevée pour s'adapter à la mise en page pleine largeur. La largeur recommandée est de 1920 pixels.

• Définition du titre et de la descriptionVous pouvez ajouter des titres et des descriptions personnalisés à chaque diapositive afin de présenter le message principal ou d'attirer l'attention de l'utilisateur.

• bouton de lienVous pouvez également définir un CTA pour chaque diapositive (Appel à l'action) qui renvoie à la page concernée. Il suffit de configurer le texte du bouton et le lien.

5. ajuster les styles de diapositives

Elementor propose un certain nombre de paramètres pour rendre votre diaporama plus personnel :

• réglage de la hauteur: vous pouvez le trouver dans "ouverture (jargon des échecs)"Sélectionnez l'option "adaptation à l'écran"ou définissez manuellement la hauteur de la diapositive pour vous assurer que la taille de la diapositive correspond à la conception de la page.
• effet de transition: dans "niveau élevé"Dans l'option Effets d'animation, vous pouvez définir des effets de transition pour le passage d'une diapositive à l'autre, tels qu'un fondu entrant et un fondu sortant, un glissement horizontal ou vertical, etc.

6) Paramètres de largeur totale

Pour vous assurer que le diaporama occupe toute la largeur de la page, vous devez ajouter une nouvelle valeur à la propriétéSectionLe cadre :

• Sélectionnez la section où se trouve la diapositive et allez dans Style > Disposition des diapositives.

• commandant en chef (militaire) Largeur du contenu Régler sur "largeur totale"et veiller à ce que "Section étirement"L'option est active.

Étape 3 : Configurer des diapositives différentes pour des pages différentes

Si vous souhaitez fournir lepage différenteEn utilisant une présentation de diapositive différente, vous pouvez répéter les étapes ci-dessus et créer une nouvelle présentation de diapositive pour la rubriqueTéléchargez des images et des contenus différents pour chaque page.

1. copier des diapositives existantes et les modifier

• Dans l'éditeur Elementor, vous pouvez le faire en cliquant avec le bouton droit de la souris sur la zone de diapositive et en sélectionnant "faire une copie de"Vous pouvez copier une configuration de diapositives sur d'autres pages, puis remplacer le contenu tel que les images, les titres et les liens de boutons.

2. l'utilisation de modèles de pages

Si vous souhaitez mettre en place rapidement des diaporamas pleine largeur pour plusieurs pages, vous pouvez également utiliser la fonction de diaporama d'Elementor.Modèles de pageFonction :

• Après avoir conçu le diaporama de la première page, cliquez sur le bouton Enregistrer et sélectionnez "Enregistrer comme modèle".

• Sur d'autres pages, vous pouvez simplementbâtonLe modèle et personnaliser les images et le contenu.

Étape 4 : Optimiser les performances des diapositives

Les diaporamas pleine largeur chargent des images à haute résolution et peuvent donc affecter la vitesse de chargement des pages. Pour garantir les performances de votre site web, il est recommandé d'effectuer les optimisations suivantes :

• Images compresséesAvant de télécharger les images des diapositives, utilisez un outil tel que TinyPNG ou ImageOptim pourImages compresséesréduisant ainsi la taille du fichier image.
• Activer le plugin de cachePour améliorer les performances globales, il est recommandé d'installer et de configurer des plugins de mise en cache tels queWP Super Cachepeut-êtreW3 Total Cache.

Étape 5 : Vérifier la réactivité de la conception

Assurez-vous que votre diaporama pleine largeur s'affiche bien sur les appareils mobiles et les tablettes. Allez dans l'éditeur Elementor et trouvez "mode de réponse" pour voir comment le diaporama fonctionne sur différents appareils, en ajustant la taille du texte et l'affichage de l'image si nécessaire.

résumés

Avec Elementor, vous pouvez créer des diaporamas pleine largeur distincts pour différentes pages, présentant des images haute résolution et des informations convaincantes. Cela permet non seulement d'améliorer l'expérience de l'utilisateur, mais aussi d'ajouter un impact visuel à votre site web. N'oubliez pas d'adapter les images, le contenu et la conception aux besoins de chaque page afin que chaque diaporama corresponde au thème de la page.