Le bloc de basculement de contenu vous permet d'afficher deux sections de texte différentes avec un interrupteur interactif. Ce bloc offre un moyen pratique et efficace de présenter plusieurs ensembles d'informations sur votre site Web, permettant aux utilisateurs de passer facilement d'une zone de contenu textuel à une autre.
Avec le bloc de basculement de contenu, vous pouvez créer des affichages comparatifs, présenter des plans tarifaires alternatifs, des scénarios avant/après, ou fournir tout type de contenu textuel commutable. Cela crée une expérience de navigation épurée tout en maximisant la valeur de l'espace de votre page.
Ajouter le bloc de basculement de contenu à vos pages
Suivez ces étapes pour ajouter un bloc de basculement de contenu à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser le bloc Basculement de contenu dans la section souhaitée de votre page.
Localisez le bloc de basculement de contenu dans le panneau des blocs et faites-le glisser à l'emplacement souhaité sur la page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc de basculement de contenu pour ouvrir ses paramètres. Dans l'onglet Contenu, vous pouvez configurer les deux zones de contenu textuel entre lesquelles les utilisateurs basculeront.
Zone de contenu 1 :
- Titre 1 : Entrez le texte du titre qui apparaîtra au-dessus de la première zone de contenu. Cette étiquette aide les utilisateurs à comprendre le contenu qu'ils consultent.
- Contenu de la section : Choisissez si vous souhaitez afficher du contenu textuel personnalisé, du contenu existant de votre site ou des parties de modèle dans la première zone de basculement.
- Contenu 1 : Ajoutez votre contenu textuel qui apparaîtra lorsque le basculement sera positionné sur la première position.
Zone de contenu 2 :
- Titre 2 : Entrez le texte du titre qui apparaîtra au-dessus de la deuxième zone de contenu. Cette étiquette décrit l'option de contenu alternative.
- Contenu de la section : Choisissez si vous souhaitez afficher du contenu textuel personnalisé, du contenu existant de votre site ou des parties de modèle dans la deuxième zone de basculement.
- Contenu 2 : Ajoutez votre contenu textuel qui apparaîtra lorsque le basculement sera activé sur la deuxième position.
Configurez les titres et le contenu textuel des deux zones de basculement dans l'onglet Contenu.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc de basculement de contenu :
Titre / Contenu :
- Typographie du titre 1 : Personnalisez la famille de polices, la taille, le poids, la hauteur de ligne et l'espacement des lettres pour le premier titre. Cliquez sur Modifier pour accéder aux contrôles typographiques détaillés.
- Typographie du titre 2 : Personnalisez la famille de polices, la taille, le poids, la hauteur de ligne et l'espacement des lettres pour le deuxième titre. Cliquez sur Modifier pour accéder aux contrôles typographiques détaillés.
- Typographie du contenu 1 : Personnalisez les paramètres typographiques de la première zone de contenu textuel. Cliquez sur Modifier pour accéder aux contrôles typographiques détaillés.
- Typographie du contenu 2 : Personnalisez les paramètres typographiques de la deuxième zone de contenu textuel. Cliquez sur Modifier pour accéder aux contrôles typographiques détaillés.
- Couleur du titre 1 : Définissez la couleur du texte du premier titre pour qu'elle corresponde à la conception de votre page
- Couleur du titre 2 : Définissez la couleur du texte du deuxième titre pour qu'elle corresponde à la conception de votre page
- Couleur du contenu 1 : Définissez la couleur du texte de la première zone de contenu
- Couleur du contenu 2 : Définissez la couleur du texte de la deuxième zone de contenu
- Couleur d'arrière-plan : Définissez la couleur d'arrière-plan de l'ensemble du bloc de basculement de contenu
Commutateur :
- Style de commutateur : Choisissez le style visuel de votre interrupteur à bascule. Les options incluent Rond (bascule circulaire), Carré (bascule rectangulaire) et Boîte d'étiquette (bascule basée sur du texte avec un style de boîte)
- Taille du commutateur : Sélectionnez la taille de votre interrupteur à bascule. Les options incluent Grande, Moyenne, Petite et Mini pour correspondre aux besoins de votre conception
- Première couleur d'arrière-plan : Définissez la couleur d'arrière-plan de la première position de bascule (lorsque la zone de contenu 1 est active)
- Deuxième couleur d'arrière-plan : Définissez la couleur d'arrière-plan de la deuxième position de bascule (lorsque la zone de contenu 2 est active)
- Couleur du commutateur : Définissez la couleur de l'élément de bascule lui-même
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc de basculement de contenu (Haut, Droite, Bas, Gauche). Cela détermine l'espace qui apparaît entre le basculeur et les éléments environnants
- Rembourrage : Ajustez l'espacement intérieur de votre bloc de basculement de contenu (Haut, Droite, Bas, Gauche). Cela crée un espace de respiration entre le contenu textuel et les bords du bloc
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc de basculement de contenu. Cet ID est créé automatiquement par SeedProd pour le style personnalisé ou le ciblage JavaScript
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé
- Attributs personnalisés : Ajoutez tous les attributs HTML à l'élément conteneur du basculeur. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-section|comparison)
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc de basculement de contenu sur les écrans d'ordinateur
- Masquer sur tablette : Masquez le bloc de basculement de contenu sur les appareils tablettes
- Masquer sur mobile : Masquez le bloc de basculement de contenu sur les appareils mobiles
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui se jouent lorsque le basculement de contenu défile dans la vue. Les options incluent Rebondir, Fondu, Zoom avant, Rotation avant et bien d'autres. Cela permet d'attirer l'attention sur votre basculeur interactif et crée un intérêt visuel
Personnalisez la typographie, les couleurs, l'apparence du commutateur et l'espacement dans l'onglet Avancé.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé la configuration du bloc de basculement de contenu et la personnalisation de son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc de basculement de contenu à votre page ! Le bloc de basculement de contenu améliore l'engagement des utilisateurs en offrant un moyen interactif de présenter des options de contenu textuel alternatives sans encombrer votre page. Expérimentez avec différents styles de basculeurs, couleurs et combinaisons de contenu pour créer une comparaison efficace ou un affichage d'informations qui sert votre public.