Le contrôle du rotateur Elementor est l'une de ses nombreuses fonctionnalités et est largement utilisé pourPrésenter des produits, des images ou du contenu. Dans cet article, nous vous expliquons en détail comment vous pouvez personnaliser les flèches de rotation et les positions dans Elementor afin d'améliorer l'aspect visuel de votre site web.effet visuel.

Pourquoi dois-je personnaliser les flèches de rotation et leur position ?

Les flèches du rotateur sont l'un des principaux moyens utilisés par les utilisateurs pour interagir avec le rotateur. Leur conception, leur taille et leur position sont donc essentielles pour l'expérience de l'utilisateur. En personnalisant le style des flèches et en ajustant leur position, vous pouvez vous assurer qu'elles sont cohérentes avec le style général de votre site web et qu'elles s'affichent parfaitement sur différents appareils. Voici quelques raisons pour lesquelles vous pourriez vouloir personnaliser les flèches et leur position :

• cohérence de la marqueLes flèches doivent être cohérentes avec les couleurs et le style de votre marque.
• Amélioration de l'expérience de l'utilisateurLes flèches doivent être facilement cliquables sur tous les appareils, en ajustant leur position et leur taille.
• Création de modèles uniquesLes flèches : Remplacez les flèches par défaut par des icônes personnalisées afin de personnaliser le design de votre rotation.

Comment personnaliser les flèches de rotation et la position dans Elementor

Étape 1 : Choisir le bon contrôle de rotation

Dans Elementor, vous pouvez choisir parmi une variété de contrôles rotatifs, notammentrotation de l'imagerépondre en chantantContrôle du curseuretc. Tout d'abord, un widget rotatif doit être ajouté à la page. Les étapes sont les suivantes :

1. Ouvrez la personnalisation requisepage webrejoindre Éditeur Elementor.

2. Recherche dans le widget de la barre latérale "tourner" ou "curseur (élément d'interface informatique)"Le choix de la bonneContrôles de rotation(comme dans "rotation de l'image"ou"diapositive (photographie, logiciel de présentation)").

3. Faites-le glisser et déposez-le au bon endroit sur la page.

Étape 2 : Personnaliser le style de la flèche

Elementor offre la possibilité d'effectuer des ajustements de style de base aux flèches rotatives, mais pour une personnalisation plus avancée, vous devrez peut-être utiliser un CSS personnalisé.Tout d'abord, utilisez les outils de style intégrés d'Elementor pour effectuer quelques réglages de base :

1. Sélectionnez la commande de rotation dans le menu "typeDans l'onglet "Recherche", trouvez la rubrique "Recherche" de la page d'accueil.flèche de navigationLe cadre.

1. La couleur, la taille et l'arrière-plan des flèches peuvent être ajustés. Exemple :
   • couleurChoisissez la bonne couleur pour les flèches afin qu'elles correspondent à la marque ou au style général du site web.
   • ampleurLes flèches : Ajustez la taille des flèches en fonction de ce qui est affiché dans la rotation. Elles peuvent être agrandies de manière appropriée afin d'être également visibles sur les appareils mobiles.

Étape 3 : Ajustez la position de la flèche à l'aide d'une feuille de style CSS personnalisée

Si vous souhaitez contrôler plus précisément la position des flèches, vous pouvez le faire en personnalisant le CSS :

1. Dans l'éditeur Elementor, trouvez la section "niveau élevé"Onglet.

2. Faites défiler jusqu'à "CSS personnalisé"et ajoutez le code suivant :

/* Ajustez les flèches du carrousel pour qu'elles soient centrées horizontalement */
.slick-prev, .slick-next {
    top : 50% ; /* Centrer verticalement les flèches */
    transform : translate(-50%, -50%) ; /* Centrez horizontalement et verticalement les flèches */
    position : absolute ;
}

.slick-prev {
    left : 50% ; /* Centrer horizontalement la flèche gauche */
}

.slick-next {
    left : 50% ; /* Centrer horizontalement la flèche de droite */
}

Ce code centre horizontalement les flèches gauche et droite du rotateur, ce qui peut être modifié en changeant le paramètre gauche répondre en chantant droit pour contrôler précisément la distance entre la flèche et le contenu. Elle peut être modifiée pour répondre à vos besoins en matière de conception.

Étape 4 : Ajustement de la réactivité

Pour que les flèches rotatives s'affichent correctement sur tous les appareils, elles doivent être adaptées de manière réactive aux appareils mobiles et aux autres tailles d'écran. Dans Elementor, la position des flèches peut être ajustée avec précision pour chaque vue d'appareil :

1. Cliquez sur l'icône du dispositif d'édition et passez à "plateau"ou"appareil mobile (smartphone, tablette, etc.)"Vue.

2. Retour"niveau élevé"Utilisez les feuilles de style CSS personnalisées pour définir des styles et des positions de flèches différents en fonction de la taille de l'écran. Exemple :

@media (max-width : 768px) {
    .slick-prev {
        left : -15px ; /* Ajuster la position de la flèche gauche sur les appareils mobiles */
    }

    .slick-next {
        right : -15px ; /* Ajuster la position de la flèche droite sur les appareils mobiles */
    }
}

résumés

faire passer (un projet de loi, une inspection, etc.) Elementor Les styles personnalisés et les feuilles de style CSS de la section Flèches de rotation vous permettent de contrôler entièrement le style et la position des flèches de rotation afin de créer une apparence plus attrayante pour votre site web. Qu'il s'agisse d'ajuster la couleur ou la taille des flèches ou d'utiliser des icônes personnalisées, les options de personnalisation flexibles peuvent vous aider à obtenir le design idéal. Si vous avez d'autres besoins en matière de conception, allez plus loin ! Autres fonctions avancées d'Elementor!