Le bloc « Content Toggle » vous permet d'afficher deux sections de texte différentes à l'aide d'un bouton 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 Content Toggle, vous pouvez créer des affichages comparatifs, présenter différents plans tarifaires, présenter des scénarios avant/après ou proposer tout type de contenu textuel commutable. Cela permet d'offrir une expérience de navigation épurée tout en optimisant la valeur de l'espace de votre page.
Ajouter le bloc de basculement de contenu à vos pages
Suivez ces étapes pour ajouter un bloc Content Toggle à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, glissez-déposez le bloc Content Toggle dans la section souhaitée de votre page.
Repérez le bloc « Content Toggle » 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 Content Toggle pour ouvrir ses paramètres. Dans l'onglet Content, vous pouvez configurer les deux zones de contenu textuel entre lesquelles les utilisateurs pourront basculer.
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 d'afficher du contenu textuel personnalisé, du contenu existant provenant de votre site ou des éléments de modèle dans la première zone à bascule.
- Contenu 1 : Ajoutez votre contenu textuel qui apparaîtra lorsque le bouton sera réglé 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 alternatif.
- Contenu de la section : choisissez d'afficher du contenu textuel personnalisé, du contenu existant provenant de votre site ou des éléments de modèle dans la deuxième zone à bascule.
- Contenu 2 : Ajoutez votre contenu textuel qui apparaîtra lorsque le bouton sera basculé en deuxième position.
Configurez les en-têtes et le contenu textuel des deux zones d'activation dans l'onglet Contenu.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc Content Toggle :
Titre / Contenu :
- En-tête 1 Typographie : personnalisez la police, la taille, le poids, l'interligne et l'espacement des lettres pour le premier titre. Cliquez sur Modifier pour accéder aux commandes typographiques détaillées.
- En-tête 2 Typographie : personnalisez la police, 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 commandes typographiques détaillées.
- Contenu 1 Typographie : personnalisez les paramètres typographiques de la première zone de contenu textuel. Cliquez sur Modifier pour accéder aux commandes typographiques détaillées.
- Contenu 2 Typographie : personnalisez les paramètres typographiques de la deuxième zone de contenu textuel. Cliquez sur Modifier pour accéder aux commandes typographiques détaillées.
- Couleur du titre 1 : définissez la couleur du texte du premier titre afin qu'elle corresponde au design de votre page.
- Couleur du titre 2 : définissez la couleur du texte du deuxième titre afin qu'elle corresponde au design de votre page.
- Contenu 1 Couleur : définissez la couleur du texte pour la première zone de contenu.
- Couleur du contenu 2 : définissez la couleur du texte pour la deuxième zone de contenu.
- Couleur d'arrière-plan : définissez la couleur d'arrière-plan pour l'ensemble du bloc « Afficher/Masquer le contenu ».
Commutateur :
- Style de commutateur : choisissez le style visuel de votre commutateur à bascule. Les options disponibles sont : Rond (commutateur circulaire), Carré (commutateur rectangulaire) et Boîte d'étiquette (commutateur textuel avec style de boîte).
- Taille de l'interrupteur : sélectionnez la taille de votre interrupteur à bascule. Les options disponibles sont Grande, Moyenne, Petite et Mini, afin de répondre à vos besoins en matière de conception.
- Première couleur d'arrière-plan : définissez la couleur d'arrière-plan pour la première position du bouton bascule (lorsque la zone de contenu 1 est active).
- Couleur d'arrière-plan secondaire : définissez la couleur d'arrière-plan pour la deuxième position du bouton bascule (lorsque la zone de contenu 2 est active).
- Couleur du commutateur : définissez la couleur de l'élément commutateur à bascule lui-même.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc Content Toggle (haut, droite, bas, gauche). Cela détermine l'espace qui apparaît entre le bouton bascule et les éléments environnants.
- Remplissage : ajustez l'espacement intérieur de votre bloc Content Toggle (haut, droite, bas, gauche). Cela crée un espace entre le contenu textuel et les bords du bloc.
Attributs :
- ID CSS : affiche l'identifiant unique généré automatiquement pour votre bloc Content Toggle. Cet ID est créé automatiquement par SeedProd pour le ciblage personnalisé des styles ou JavaScript.
- Classe personnalisée : ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques à partir de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : ajoutez tous les attributs HTML à l'élément conteneur du bouton bascule. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur (par exemple, data-section|comparison).
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc « Afficher/Masquer le contenu » sur les écrans de bureau.
- Masquer sur tablette : masquer le bloc « Afficher/Masquer le contenu » sur les tablettes.
- Masquer sur mobile : masquer le bloc « Afficher/Masquer le contenu » sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque le bouton de basculement du contenu apparaît à l'écran. Les options disponibles incluent Rebond, Fondu entrant, Zoom avant, Rotation entrante et bien d'autres encore. Cela permet d'attirer l'attention sur votre bouton de basculement interactif et de créer un intérêt visuel.
Personnalisez la typographie, les couleurs, l'apparence des boutons bascules et l'espacement dans l'onglet Avancé.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Content Toggle et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Content Toggle à votre page ! Le bloc Content Toggle améliore l'engagement des utilisateurs en offrant un moyen interactif de présenter différentes options de contenu textuel sans encombrer votre page. Testez différents styles, couleurs et combinaisons de contenu pour créer un affichage efficace des comparaisons ou des informations qui répondra aux besoins de votre public.