# Bloc zéro Créer un site web à l’aide du **Zero Block** dans le **Mavibot** est un moyen rapide et pratique de créer un site web professionnel sans aucune connaissance en programmation. N’hésitez pas à expérimenter, à personnaliser le design et à ajouter du contenu pour rendre votre site unique et performant.
Le **Zero Block** est un éditeur de conception web entièrement personnalisable dans **Mavibot**. Il vous permet de créer des designs uniques pour des blocs individuels ou pour l’ensemble du site, sans aucune restriction.
## Comment ajouter le bloc Pour ajouter le **Zero Block** à la page, cliquez sur le bouton "+" dans la barre d’outils d’édition.
Après avoir cliqué sur le bouton "+", le menu « Ajouter un nouveau bloc » apparaîtra à droite. Sélectionnez le **« Zero Block »** et passez à l’édition.
Il existe un menu de paramètres du bloc. ## Hauteur du contenu Vous pouvez utiliser ce champ pour modifier la taille du bloc. La valeur par défaut est 550 px.
#### Redimensionnement de la zone de grille Il sert à adapter le design du site à différentes tailles d’écran.
Il est désactivé par défaut, mais vous pouvez aussi sélectionner « mise à l’échelle automatique selon la largeur de la fenêtre ». ## Paramètres d’arrière-plan Vous pouvez choisir la couleur d’arrière-plan à l’aide d’une large palette de couleurs. Déplacez le curseur vers la nuance souhaitée, cliquez sur le cercle et sélectionnez la couleur désirée. Vous pouvez également saisir le code de la nuance.
Vous pouvez ajouter un fichier d’arrière-plan aux formats SVG, PNG, JPG ou GIF. La taille du fichier ne doit pas dépasser 30 Mo. Exemple 1. Ajout d’un fichier JPG.
L’alignement par défaut de l’image est défini sur Centre Centre. Vous pouvez sélectionner une autre position dans la liste ou définir vous-même la position en cliquant sur l’icône à droite.
Exemple 1. Affichage par défaut de l’image en position Centre Centre. Exemple 2. Affichage de l’image en position Haut Gauche. La position par défaut du « comportement » est définie sur « défilement », vous pouvez sélectionner la position « fixe ». Lorsque vous modifiez la position, l’arrière-plan se déplace.
## Ajout d’éléments Cliquez sur le bouton « Ajouter un élément » à gauche. Il y a des calques en bas du bouton, et vous pouvez les modifier les uns par rapport aux autres en superposant un élément sur un autre.
Le bouton Ajouter un élément crée un nouveau calque avec l’élément sélectionné :
Chaque élément ouvre son propre menu de paramètres. Cliquez sur le bouton « Enregistrer » après avoir configuré l’élément.
### Texte Vous pouvez ajouter un élément avec du texte.
Exemple d’ajout de texte à un bloc Vous pouvez utiliser des polices standard ou choisir les vôtres. Vous pouvez également modifier la couleur du texte, l’interlignage, la taille des lettres et leur espacement, la position du texte dans le bloc, ajuster la casse du texte, et plus encore :
### Image Pour ajouter l’image souhaitée, téléchargez le fichier depuis le système. Pour cela, cliquez sur l’icône de téléchargement. Vous pouvez également ajouter une image en insérant un lien vers celle-ci dans le champ approprié. Collez l’URL de l’image souhaitée et choisissez comment elle s’ouvrira : dans une nouvelle fenêtre ou sur une nouvelle page.
Vous pouvez ajuster sa position sur la page après avoir inséré l’image. Choisissez comment elle sera positionnée par rapport au bord gauche ou droit, ou placez-la au centre. Vous pouvez également régler la transparence de l’image et d’autres paramètres d’affichage, tels que le flou ou l’arrondi.
Exemple d’ajout d’une image à un bloc L’arrière-plan peut être modifié à tout moment. ### Forme Vous pouvez ajouter une forme au bloc (par défaut, il s’agit d’un rectangle). Dans les paramètres, vous pouvez sélectionner une autre forme : cercle ou ligne. Vous pouvez également personnaliser la forme comme vous le souhaitez : aligner, ajouter des effets, changer la couleur, l’arrière-plan, le style, etc.
Paramètres de la forme :
Exemple d’ajout d’une forme à un bloc ### Bouton Pour ajouter un bouton, cliquez sur « Ajouter un élément » et sélectionnez « Bouton » :
Dans la section des paramètres, vous pouvez personnaliser l’apparence du bouton selon vos goûts. Choisissez un style, une couleur, un arrière-plan, un niveau de flou et d’autres options. Vous pouvez également modifier la police, la couleur et la taille du texte dans le bouton.
Pour que le bouton soit actif, vous devez ajouter un lien vers la page souhaitée dans les paramètres de l’élément, dans la section Bouton. Lorsque vous cliquez sur le bouton, le lien sera ouvert. Pour voir si le bouton fonctionne, vous devez enregistrer les modifications, fermer les paramètres du bloc et aller dans l’aperçu du site. ### Vidéo Vous pouvez utiliser cet outil pour ajouter n’importe quelle vidéo et configurer son affichage dans le bloc.
Vous pouvez ajouter des vidéos depuis diverses ressources dans le bloc zéro :
Pour cela, sélectionnez simplement l’emplacement exact de la vidéo (Youtube, Vimeo ou MP4), puis collez l’URL dans le champ des liens. Vous pouvez également ajouter des vidéos depuis le stockage de fichiers. Pour cela, copiez le lien vers la vidéo dans le stockage de fichiers :
Puis sélectionnez le type de vidéo MP4 dans les paramètres de l’élément « Vidéo » :
Et collez le lien vers la vidéo depuis le stockage de fichiers. ### Astuce Cet élément vous permet d’ajouter une infobulle avec n’importe quel contenu. Vous pouvez modifier l’élément selon vos goûts dans les paramètres.
Vous pouvez rendre l’infobulle semi-transparente et la placer au-dessus du texte, de l’arrière-plan ou de l’image :
Lorsque vous survolez l’infobulle (sur la page du site, PAS en mode édition), un certain texte s’affichera : N’oubliez pas d’enregistrer les actions effectuées dans les paramètres à l’aide de la fonction « Enregistrer ». ### Galerie Vous pouvez ajouter un nouvel élément au bloc zéro de la même manière que les précédents :
Mavibot ajoute deux images par défaut. Mais vous pouvez aussi télécharger vous-même les images dont vous avez besoin pour la galerie. Pour cela, allez dans le calque de la galerie (le bouton de calque se trouve à gauche de l’écran ou cliquez directement sur l’image). Dans les paramètres de l’élément, à l’aide des fonctions disponibles, vous pouvez, si nécessaire, aligner la galerie par rapport au bord gauche ou droit, ou la centrer. Vous pouvez également déplacer un élément en maintenant le bouton gauche de la souris enfoncé et en cliquant sur l’élément.
De plus, vous pouvez régler la transparence, la rotation et d’autres effets pour les images afin de rendre l’affichage de la galerie dans le bloc plus intéressant. Il existe deux options de taille d’image dans la galerie : « cover » — la largeur totale de l’image et « contain » — avec des bordures. Exemple 1. Taille de l’image — « cover »
Exemple 2. Taille de l’image — « contain ».
La fonction de défilement en boucle permet de passer automatiquement de la dernière image de la galerie à la première sans avoir à faire défiler les précédentes. Si la fonction de défilement en boucle est désactivée, il faut utiliser manuellement les flèches pour revenir à la première image. Vous pouvez également sélectionner la vitesse de défilement des images et la lecture automatique pour faire défiler la galerie automatiquement. Dans les paramètres des boutons de la galerie, vous pouvez modifier leur couleur, leur forme (les rendre triangulaires ou en forme de flèches), leur emplacement, leur taille et d’autres paramètres.
Dans les paramètres, vous pouvez également ajuster le cadre de la galerie, son style, ses arrondis, ainsi qu’ajouter des ombres et d’autres effets.
### Accordéon L’élément de bloc Accordéon universel est une solution graphique pratique pour un site web sous forme de liste de notes textuelles avec des éléments déroulants : L’Accordéon est facile à intégrer à votre site web et à personnaliser selon vos besoins : il peut être adapté à toutes les exigences. Pour ajouter un élément au bloc, ouvrez les paramètres du bloc universel. Vous verrez « Accordéon » dans la liste des éléments disponibles.
Pour appliquer les paramètres de style souhaités à un élément, vous devez cliquer dessus. Ensuite, le constructeur de paramètres « Accordéon » apparaîtra à droite, comme pour les autres éléments du bloc zéro.
Après avoir cliqué sur la flèche, une fenêtre contextuelle avec des informations apparaîtra à l’écran, par exemple avec la réponse à une question :
Pour modifier le texte d’un élément, double-cliquez avec le bouton gauche de la souris sur un élément existant dans le modèle créé. Vous pouvez modifier le texte dans la liste déroulante de la même manière. Après avoir sélectionné le texte à modifier, les paramètres de texte apparaîtront en haut de l’écran, similaires à ceux utilisés dans n’importe quel éditeur de texte.
Dans ce menu de texte supplémentaire, vous pouvez modifier des paramètres de police tels que l’épaisseur, l’inclinaison, la hauteur et d’autres. Passons maintenant au menu de droite des paramètres de base de l’élément. Vous pouvez également y modifier la police : choisissez la couleur, la saturation, la casse, la transparence, ainsi qu’ajouter votre propre police et d’autres options. Dans les paramètres de l’Accordéon, vous pouvez ajouter davantage de questions, réponses, etc. Vous devez cliquer sur Ajouter :
Vous pouvez également modifier le design de la question et de la réponse, les rendre plus arrondis, rendre l’arrière-plan transparent, ajuster le changement d’arrière-plan au survol de la question ou de la réponse, organiser le cadre dans un certain style et d’autres paramètres — tout dépend de votre imagination et de vos préférences.
Dans Zero block, vous pouvez combiner divers éléments pour créer un style de site web unique et mémorable. Cela vous permettra d’étonner vos clients avec des solutions de design originales. Après avoir terminé le travail sur la page, vous devez l’adapter à différentes tailles d’écran. ### Formulaire L’élément « Formulaire » du bloc Zero vous permet d’utiliser le formulaire de collecte de demandes là où c’est vraiment nécessaire. Vous pourrez collecter des demandes et des contacts précisément là où l’utilisateur est le plus impliqué, sans avoir à les afficher dans un formulaire séparé.
Pour ajouter un formulaire au bloc zéro, cliquez sur « +Ajouter un élément », puis sélectionnez « Formulaire » dans la liste déroulante qui s’ouvre. Le bloc « Formulaire » apparaîtra sous forme de boutons sur les messageries auxquels vous pouvez ajouter des questions et modifier les boutons :
Pour ajouter des questions au formulaire, par exemple sous la forme de « Saisissez votre e-mail », « Décrivez votre question » et autres, vous devez cliquer sur le bouton « Configurer les questions » dans le menu de paramètres de droite :
Puis créez vos questions dans le formulaire :
Le résultat peut être le suivant :
Vous pouvez ajouter la case à cocher « J’accepte la politique de traitement des données personnelles » :
Vous pouvez également modifier les boutons de réseaux sociaux :
Et personnaliser le titre et le sous-titre du formulaire. Double-cliquez sur le champ de texte, après quoi vous pourrez saisir le texte nécessaire, ainsi que modifier la police, le gras, la couleur du texte, etc. :
Pour plus d’informations sur les types de champs de question, consultez l’article «[Réponses du forum](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/otvety-form)". ### reCAPTCHA Pour installer reCAPTCHA, vous devez spécifier une paire de clés (clé publique et clé secrète) dans les paramètres généraux du site et activer la vérification reCAPTCHA dans le bloc zéro du formulaire de collecte de données. Vous pouvez choisir n’importe quel service qui fournit une protection de site web à l’aide d’un captcha. Dans cette section, nous verrons comment installer un captcha Google. Étape 1. Obtention des clés
Tout d’abord, vous devez remplir les informations de base pour recevoir les clés : sélectionnez les types de captcha ; ajoutez le domaine du site sur lequel vous prévoyez d’installer la protection. Ensuite, cliquez sur « Envoyer ». Étape 2. Saisie des clés
Ensuite, vous verrez une paire de clés que vous devez copier et coller dans les paramètres de la page du site dans MaviBot. Pour cela : 1\) Trouvez le bouton des paramètres de la page du site dans le panneau supérieur :
2\) Allez dans les paramètres des informations de base : 3\) Dans les paramètres des informations de base, saisissez les valeurs de la paire de clés que vous avez reçues précédemment :
Étape 3. Activer reCAPTCHA dans le bloc zéro. Allez dans le bloc zéro où vous avez installé un formulaire de collecte de données, ou dans le bloc zéro où vous prévoyez de créer un formulaire reCAPTCHA :
Cliquez sur l’élément « Formulaire » dans le bloc zéro pour ouvrir la barre de menu de droite. Nous avons décrit ci-dessus comment créer un formulaire de collecte de données et le modifier dans la section «[Formulaire](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/sekcii-bloki/universalnyi-blok-zero-block#forma)» ci-dessus. Ensuite, trouvez les boutons pour activer reCAPTCHA :
Activez reCAPTCHA (si nécessaire, vous pouvez activer les avertissements en anglais) :
Puis enregistrez les paramètres. {% hint style="success" %} C’est fait ! Vous savez maintenant comment activer reCAPTCHA dans le bloc Zero. {% endhint %} {% hint style="info" %} La manière d’adapter la page dans le bloc zéro a été décrite dans [l’article du même nom](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/sekcii-bloki/universalnyi-blok-zero-block/kak-adaptirovat-stranicu-v-universalnom-bloke). {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.mavibot.ai/doc/fr/websites/sites/blocks/zero.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.