Tous les blocs utilisent les mêmes paramètres globaux pour les polices, les arrière-plans et l'affichage, garantissant un style visuel cohérent sur l'ensemble de votre site tout en permettant un contenu de bloc différent.

Pour configurer les paramètres globaux d'un bloc, placez votre curseur dessus et sélectionnez le bouton Paramètres qui apparaît.

Cliquez sur le bouton Paramètres pour ouvrir le menu des paramètres globaux de la section sur la droite.

Paramètres de police

Vous pouvez modifier les paramètres suivants :

  • Police et style : La famille de polices, le style (Normal ou Italique) et le poids (gras).
  • Espacement : L'espacement des lettres, la hauteur de ligne et la taille de la police.

Pour les blocs comportant à la fois un champ Titre et un champ Texte, vous avez deux options de style :

  1. Appliquer un style de police unique à l'ensemble du bloc pour l'uniformité.
  2. Activer l'option Police supplémentaire pour définir des styles distincts pour le Titre et le Texte, créant ainsi des rôles visuels distincts au sein du même bloc.

Comment ajouter une police personnalisée

Pour ajouter une police personnalisée, trouvez le bouton du même nom et cliquez dessus :

Vous serez redirigé vers une page avec une grande variété de polices différentes :

Étape 1. Trouvez la police souhaitée

a) Cela peut être fait à l'aide de la barre de recherche :

Sélectionnez les critères nécessaires pour la police :

  • Catégorie de police
  • sans-serif (lettres sans empattement)
  • serif (lettres avec empattement)
  • handwriting (police imitant l'écriture manuscrite)
  • monospace (police à chasse fixe ou disproportionnée, police dans laquelle tous les caractères ont la même largeur)
  • display (police grasse d'affichage)
  • Prise en charge linguistique
  • Cyrillique
  • Latin

b) Pour trouver une police manuellement, faites défiler la liste dans le ruban de formatage.

Étape 2. Cliquez sur la police sélectionnée :

Vous verrez une fenêtre modale avec les options de police :

Étape 3. Sélectionnez une option de police en cochant la case à côté de celle dont vous avez besoin :

Étape 4. Cliquez sur le bouton "Ajouter" :

Vos paramètres de police personnalisée s'afficheront ici une fois enregistrés.

Étape 6. Cliquez sur "Enregistrer" :

Les polices ajoutées apparaîtront dans la même liste que les polices par défaut.

Paramètres d'arrière-plan

Personnalisez l'arrière-plan de la section avec une couleur unie, un dégradé, une image ou une vidéo.

Vous pouvez superposer une couleur ou un dégradé sur une image d'arrière-plan.

L'image peut être ajoutée en tant que fichier ou sous forme de lien vers l'image :

Une vidéo peut être ajoutée depuis le stockage

Tout d'abord, téléchargez votre fichier vidéo dans le stockage de fichiers.

Paramètres de l'image d'arrière-plan

Contrôle du positionnement de l'image

Une image dans une section est positionnée à l'aide de deux paramètres indépendants :

  1. Alignement horizontal (axe X)
  2. Alignement vertical (axe Y)

Spécifiez la position à l'aide d'un mot-clé ou d'une combinaison :

Mot-clé Effet
top, bottom, center Alignement vertical
left, right, center Alignement horizontal
bottom left, top right, center center Position combinée

Pour un contrôle précis, vous pouvez également utiliser des valeurs numériques :

  • Pourcentages (par exemple, 30% 75%)
  • Pixels (par exemple, 20px 100px)
  • Ou unités mixtes

Options de dimensionnement de l'image

Vous pouvez contrôler les dimensions d'une image à l'aide des méthodes suivantes :

1. Définir des dimensions personnalisées

Définissez la largeur et la hauteur à l'aide de valeurs flexibles.

  • Format : [largeur] [hauteur]
  • Exemple 1 (Pixels) : 500px 300px
  • Exemple 2 (Pourcentage) : 15% 10%

2. Utiliser un mot-clé prédéfini

Spécifiez un seul paramètre pour appliquer un comportement de mise à l'échelle spécifique :

  • contain — Redimensionne l'image pour qu'elle tienne entièrement dans la hauteur de la section tout en conservant son rapport hauteur/largeur (Exemple 3).
  • cover — Affiche l'image à ses dimensions en pixels d'origine (Exemple 4 : taille d'origine 1268 × 1343 px).

Répétition de l'image

Cette option est désactivée par défaut. Les paramètres disponibles incluent :

Comment épingler une image

Activez ce commutateur pour définir une image d'arrière-plan fixe. Lorsqu'il est actif, l'image reste immobile pendant le défilement, permettant au contenu de se déplacer dessus.

Couleur et dégradé d'arrière-plan

Vous pouvez personnaliser l'arrière-plan de la section avec une couleur unie ou choisir un dégradé parmi les options disponibles.

Paramètres d'affichage

Vous pouvez spécifier où cette section est visible (par exemple, sur quels appareils ou plateformes). Par défaut, elle est affichée sur le site Web et sur Facebook. À l'aide du menu déroulant, vous pouvez sélectionner une option d'affichage pour ce bloc, par exemple en le rendant visible uniquement sur le site Web.

Rayon de bordure :

Le rayon de bordure est indiqué en pixels - px.

Hauteur de la section

La hauteur de la section peut être définie à l'aide des unités suivantes :

  • px : pixels (valeur fixe)
  • vh : hauteur de la fenêtre (réactive à la taille de l'écran)

Largeur de la section

Largeur d'une colonne = 106 px

Par défaut, la largeur de la section est définie sur plein écran et le contenu est affiché dans une disposition à 8 colonnes.

Exemple 1 : Le contenu est centré dans la section et s'étend sur 5 colonnes de la disposition.

Exemple 2. Une section s'étend sur 8 colonnes, le contenu couvrant toute la largeur de la section :

Effet d'apparition déclenché par le défilement

Activez ce commutateur pour activer les animations déclenchées par le défilement pour votre contenu. Vous pouvez choisir de faire apparaître le contenu depuis le bas, le haut, la gauche ou la droite.

Affichage du contenu

Le contenu est affiché horizontalement et centré par défaut. Il peut être décalé vers le bord gauche ou droit de la page.

Verticalement, le contenu est aligné en haut par défaut. Il peut être déplacé vers le bas ou centré sur la page.

Pour adapter le texte aux écrans étroits selon les styles Mavibot, veuillez activer ce curseur :

Marges (pour la section)

Marges externes

Vous pouvez utiliser ces champs pour ajuster l'espacement entre les sections. Par défaut, le remplissage interne (haut/bas/gauche/droite) est défini sur 0 px.

Pour appliquer des marges égales sur tous les côtés, saisissez la valeur dans le champ principal. Les marges supérieure, inférieure, gauche et droite seront définies automatiquement.

Pour garantir une cohérence visuelle, les marges doivent être configurées individuellement pour chaque section.

Marges internes

Utilisez ces champs pour ajuster la marge interne de la section. Par défaut, la marge (haut, bas, gauche, droite) est définie sur 32 px.

Plage de visibilité par appareil

La plage de visibilité détermine sur quels appareils (par exemple, ordinateur de bureau, tablette, mobile) ce bloc sera affiché. Ce paramètre est configuré individuellement pour chaque bloc.

Pourquoi est-ce utile et comment cela fonctionne-t-il ?

Si un bloc (par exemple, une couverture) s'affiche bien sur un ordinateur de bureau mais pas sur un mobile, vous pouvez le configurer pour qu'il apparaisse uniquement sur les appareils avec une largeur d'écran de 960 pixels ou plus. Cela garantit que le bloc n'est visible que dans les vues de bureau et masqué sur les appareils mobiles.

Ensuite, vous devez copier ce bloc et personnaliser son apparence spécifiquement pour les appareils mobiles (changer la photo, la taille de la police, etc.). Pour ce bloc, définissez la visibilité dans la plage de 0 à 960 pixels. Ce sera la version mobile du bloc.

En conséquence, la version de bureau sera affichée sur les ordinateurs, tandis que la version mobile sera affichée sur les smartphones et les tablettes.

La plage de visibilité (différentes valeurs de paramètres) est nécessaire pour pouvoir personnaliser l'apparence de l'unité pour un appareil spécifique en sélectionnant la résolution. Par exemple, si le bloc ne s'affiche pas bien sur une tablette ou sur un modèle de téléphone spécifique, vous pouvez personnaliser son apparence en fonction de la résolution de ces appareils.

Par défaut, la section est affichée sur les appareils de toute taille.

Exemple

Configurez la première section pour les appareils mobiles et les tablettes

  • Créez une section
  • Définissez sa plage de visibilité de 0 à 640 px
  • Téléchargez une image optimisée pour les petits écrans

La deuxième section est pour les PC (ordinateurs portables). Définissez la plage de visibilité à partir de 641 pixels et plus.

  • Enregistrez vos modifications et accédez à la page d'édition. Pour votre commodité, les paramètres de visibilité de la section y seront affichés.

Pour tester l'apparence des sections sur un appareil spécifique, accédez à la page d'aperçu du site. Cliquez sur le bouton droit de la souris et cliquez sur "Afficher le code".

Sélectionnez l'appareil sur lequel vous souhaitez voir à quoi ressemblera le site.

Minutage d'apparition

Vous pouvez utiliser ce champ pour définir le délai avant l'apparition d'une section, spécifié en secondes (s) ou en minutes (m).