Zero Block: Comment créer un bloc personnalisé

Pour ajouter un Zero Block à la page, cliquez sur Zéro tout en bas de la page. Vous pouvez également le trouver au bas de la bibliothèque de blocs, juste en dessous de la catégorie "Autres".

Le site Zero Block conserve toutes les caractéristiques des blocs habituels : il peut être copié, retiré, supprimé et masqué. Il possède des paramètres, mais au lieu d'un bouton "Contenu", il possède un bouton "Éditeur de bloc". Cliquez sur ce bouton si vous souhaitez modifier le bloc, et l'éditeur de bloc s'ouvrira.

Le site Zero Block possède deux espaces de travail, ou conteneurs : le conteneur de grille et le conteneur de fenêtre, qui indiquent les limites de l'écran d'un navigateur.

Le conteneur de grille prend en charge la même grille que le site Tilda- 12colonnes (1200 px). Si vous alignez des objets sur la grille et que vous placez des éléments à l'intérieur du conteneur de grille, ils resteront toujours dans les limites des 12 colonnes, quelle que soit la taille de l'écran.

Cliquez sur le bouton plus dans le coin supérieur gauche de l'éditeur de blocs pour ajouter un élément à la page. Vous pouvez ajouter un texte, une image, une forme, un bouton, une vidéo, une infobulle, un HTML, un formulaire, une galerie ou un vecteur.

Un site Zero Block prend en charge toutes les manipulations de base de la souris : les éléments peuvent être déplacés, redimensionnés, copiés (en maintenant la touche Alt enfoncée) et plusieurs éléments peuvent être sélectionnés.

Vous pouvez redimensionner un élément d'image sans modifier ses proportions.

La hauteur des éléments de texte change automatiquement en fonction du volume du texte.

Les tailles des boutons et des formes peuvent être modifiées dans toutes les directions.

Lorsque plusieurs éléments sont sélectionnés, ils peuvent être alignés horizontalement ou verticalement les uns par rapport aux autres ou par rapport au conteneur.

L'édition d'éléments de blocs à l'aide d'un clavier accélère considérablement le processus de travail, c'est pourquoi nous recommandons l'utilisation de touches de raccourci.

Vous pouvez également accéder à la liste des raccourcis clavier à partir du menu contextuel de l'éditeur de blocs.

Vous pouvez accéder aux paramètres complets de n'importe quel élément en cliquant sur Paramètres dans le coin inférieur droit de l'écran.

Par défaut, le panneau Paramètres est masqué afin de préserver la clarté de l'espace de travail.

Utilisez la rangée de boutons supérieure pour aligner rapidement un élément verticalement ou horizontalement sur le conteneur.

Les coordonnées de l'élément sont indiquées ci-dessous. Elles peuvent être exprimées en pixels ou en pourcentage. Nous examinons ci-dessous cette fonction en détail.

L'origine est indiquée par une croix bleue.

Vous pouvez également voir les paramètres de l'élément : la largeur et la hauteur, mesurées en pixels.

Lorsque vous téléchargez une image, elle prend la taille du cadre dans lequel elle est téléchargée. Cliquez sur Taille d'origine dans le panneau Paramètres de l'élément pour rétablir la taille d'origine de l'image.

Si vous souhaitez recadrer l'image en forme de cercle, définissez le rayon d'arrondi.

Pour obtenir un cercle régulier, l'image originale doit être de forme carrée et le rayon d'arrondi doit être égal à la moitié du côté. Par exemple, si la taille de l'image est de 100×100 px, définissez un rayon égal à 50.

Vous pouvez ajouter une ombre à l'image. Pour ce faire, sélectionnez la couleur de l'ombre, l'opacité, le décalage x et y, le degré de flou et d'étalement dans le panneau Paramètres de l'élément.

Chaque image peut avoir un texte alternatif (balise alt). Les moteurs de recherche interprètent le texte alternatif comme des mots-clés et les utilisent pour indexer la page. Veillez donc à ce que le texte alternatif soit pertinent par rapport au contenu de votre site web en général et qu'il reflète le contenu de l'image.

Toute image peut être transformée en lien de sorte que lorsque l'utilisateur clique dessus, il est dirigé vers une autre page. Allez dans le panneau Paramètres de l'élément et spécifiez le lien et s'il doit être ouvert dans la même fenêtre ou dans une nouvelle.

Lorsque vous ajoutez une forme, un carré apparaît sur la page, qui peut être transformé en rectangle, en cercle ou en ligne.

Rectangle: modifiez la longueur des côtés en faisant glisser les points de contrôle.

Ou spécifiez les valeurs dans les paramètres de l'élément.

Cercle. Pour créer un cercle, définissez un rayon d'arrondi égal à la moitié de la longueur du côté du carré.

Ligne. Réglez la hauteur du rectangle sur 1-5 px dans les paramètres de l'élément ; vous obtiendrez ainsi une ligne.

Les formes peuvent se voir attribuer une ombre, une bordure et un lien.

Vous pouvez modifier la taille, la couleur et le rayon d'arrondi du bouton. Vous pouvez également lui ajouter une ombre et une bordure.

Vous pouvez définir la légende et le lien du bouton dans le panneau Paramètres de l'élément. Vous pouvez également y définir la taille, le type, l'opacité et la couleur de la police.

Vous pouvez définir le comportement du bouton. Par exemple, la couleur d'arrière-plan, la couleur du texte et la couleur de la bordure changent lorsque le bouton est survolé.

L'infobulle est un élément de bloc interactif qui affiche un texte et/ou une image lorsque vous passez le pointeur dessus.

Vous pouvez ajuster la couleur, l'ombre et la taille de l'info-bulle, définir l'icône affichée à l'intérieur du cercle, télécharger l'image qui s'affichera lorsque vous passerez le pointeur au-dessus de l'info-bulle et créer une animation.

Veillez à vérifier l'emplacement de l'infobulle sur toutes les résolutions d'écran après avoir disposé les éléments dans le bloc afin que l'infobulle ne soit pas coupée sur les bords du bloc.

Vous pouvez ajouter un formulaire horizontal ou vertical à un site Zero Block. Vous aurez accès à tous les paramètres de base du formulaire, comme l'ajout de champs de saisie, la connexion de services de capture de données, la configuration de messages de réussite et d'erreur, la modification de sa conception et la création d'une animation.

Pour modifier les champs de saisie, allez dans le panneau Paramètres de l'élément et cliquez sur Champs de saisie. Ici, vous pouvez personnaliser les champs de saisie comme dans un bloc de formulaire ordinaire.

Pour connecter des services de capture de données au formulaire, allez dans le panneau Paramètres de l'élément et cliquez sur Services. Vous pouvez y connecter les services de capture de données au formulaire.

Dans Zero Block, vous pouvez ajouter une galerie d'images. Vous pouvez modifier la largeur et la hauteur de la galerie comme pour l'élément Shape.

Vérifions les paramètres de la galerie :

Stretch : Il y a deux paramètres : Cover et Contain.

Pour Cover, les images rempliront complètement la zone de la galerie, elles peuvent donc être recadrées si leur format est différent de celui de la galerie.

Pour Contain, les images de la galerie seront dans leur format original, elles ne seront donc pas recadrées sur des galeries de n'importe quel format.

Position. Elle définit la position de l'image par rapport à la zone de la galerie. Par exemple, si le paramètre Haut gauche est sélectionné, l'image sera positionnée par rapport au coin supérieur gauche de la galerie.

Boucle. Ce paramètre permet de faire défiler en boucle les diapositives (images) de la galerie. Il comporte deux paramètres : Loop et None : Boucle et Aucune.

Pour Boucle, les diapositives de la galerie seront bouclées à l'infini, c'est-à-dire que la première diapositive apparaîtra après la dernière.

Pour l'option Aucune, il n'y a pas de bouclage et la galerie s'arrêtera à la dernière diapositive.

Vitesse des diapositives définit le type d'animation pour le changement des diapositives. Elle comporte trois paramètres : Aucun, Lent et Rapide.

Pour l'option Aucun, aucune animation n'est utilisée lorsque vous changez de diapositive.

Pour l'option Lent, les diapositives sont changées lentement.

Pour l'option Rapide, les diapositives sont changées rapidement.

Autoplay définit la vitesse de changement automatique des diapositives en secondes.
Si vous n'avez pas spécifié la valeur en secondes, il n'y a pas de changement automatique des diapositives.

L'option Zoomable permet de zoomer dans les images de la galerie en cliquant dessus. Elle possède deux paramètres : Zoom sur clic et Aucun.

L'option Zoom sur clic permet d'agrandir les images au clic.

L'option Aucun permet de ne pas agrandir les images au clic.

L'onglet Flèches comprend des paramètres qui définissent l'aspect des flèches (boutons).

L'onglet Points comprend des paramètres qui définissent l'aspect des points situés sous la galerie. Les points affichent le nombre de diapositives.

Chaque diapositive (image) a ses propres paramètres :

Vous pouvez ici ajouter une légende d'image, une balise Alt pour le référencement, inclure une vidéo YouTube ou Vimeo, ainsi qu'un lien auquel vous accéderez lorsque vous cliquerez sur cette diapositive.

Tilda prend en charge le responsive design pour tous les types d'écran de base :
1200-max (ordinateurs de bureau)
980-1200 (tablette horizontale)
640-980 (tablette verticale)
480-640 (smartphone horizontal)
320-480 (smartphone vertical)

Cela suffit pour que votre design s'affiche correctement sur tous les appareils.

Après avoir personnalisé un Zero Block sur l'artboard principal, changez de type d'écran et faites les ajustements nécessaires, comme la largeur de la colonne de texte, la taille de l'image, la taille de la police, la hauteur de l'artboard ou la disposition de l'élément.

Les paramètres qui ont été modifiés pour un type d'écran donné sont mis en évidence. Les paramètres qui reflètent ceux d'un autre type d'écran sont grisés. De cette manière, il est facile de voir quels paramètres ont été modifiés.

Dans l'exemple ci-dessous, tous les paramètres de l'élément texte sont en gris. Cela signifie qu'ils sont les mêmes pour le type d'écran actuel que pour le précédent.

Si nous modifions la taille de la police et les coordonnées de l'élément pour un type d'écran donné, les valeurs ne seront plus colorées en gris. Cela signifie que les nouveaux paramètres sont uniques pour ce type d'écran.

Si vous cliquez sur un espace vide, vous verrez les paramètres du tableau d'art.

Vous pouvez spécifier la hauteur du conteneur de la grille en pixels à l'aide de votre clavier. Vous pouvez modifier la valeur en faisant glisser le bord du conteneur. La largeur du conteneur de grille est fixée à 1200px.

Vous pouvez personnaliser la couleur d'arrière-plan de l'ensemble du bloc dans les paramètres de l'Artboard.

Vous pouvez télécharger une image d'arrière-plan pour l'ensemble du bloc dans les paramètres de l'Artboard.

Vous pouvez également personnaliser le rendu de l'image d'arrière-plan (début et fin du filtre) et le comportement du contenu par rapport à l'image d'arrière-plan : Si vous définissez une valeur "Fixe", le contenu (texte et formes) se déplacera lors du défilement, tandis que l'image restera en place.

Pour qu'un bloc apparaisse en cliquant sur un bouton ou un lien, ajoutez le bloc modificateur T1093 de la catégorie "Autres".

Dans l'onglet Contenu du bloc, indiquez l'ID du site Zero Block dont vous avez besoin (ou choisissez-le manuellement en cliquant sur le lien "Choose Zero Block"). Par défaut, le lien vers la fenêtre contextuelle est le lien #zeropopup. Vous pouvez le remplacer par le nom de votre choix, mais vous devez conserver le signe dièse au début. Le bloc fonctionnera alors comme une pop-up classique et sera caché sur la page.

Pour en savoir plus sur le fonctionnement des blocs pop-up, consultez l'article "Pop-ups".

Dans les paramètres du bloc T1093, vous pouvez sélectionner les paramètres de l'arrière-plan (couleur, opacité), la couleur de l'icône de fermeture, la vitesse d'animation,
votre propre Z-index, et d'autres paramètres.