Zero Block : Comment créer un bloc personnalisé

Pour ajouter un Zero Block à la page, cliquez sur Zero tout en bas de la page. Vous pouvez également le trouver en bas de la bibliothèque de blocs, juste en dessous de la catégorie « Autre ».

Un Zero Block conserve toutes les fonctionnalités de bloc normales : il peut être copié, supprimé, supprimé et masqué. Il a des paramètres, mais au lieu d’un bouton « Contenu », il a un bouton « Éditeur de blocs ». Cliquez dessus si vous souhaitez modifier le bloc, et l’éditeur de bloc s’ouvrira.

Un Zero Block comporte deux espaces de travail, ou conteneurs : le conteneur de grille et le conteneur de fenêtre, qui indiquent les limites d’un écran de navigateur.

Le conteneur de grille prend en charge la même grille que Tilda : 12 colonnes (1200 px). Si vous alignez des objets sur la grille et localisez des éléments à l’intérieur du conteneur de grille, ils resteront toujours dans les limites de 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 info-bulle, un code HTML, un formulaire ou une galerie.

Un 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.

La taille des boutons et des formes peut être modifiée 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 au conteneur.

L'édition d'éléments de bloc à l'aide d'un clavier accélère considérablement le processus de travail, c'est pourquoi nous vous recommandons d'utiliser des raccourcis clavier.

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é pour garder l'espace de travail clair.

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

Vous pouvez voir les coordonnées de l'élément ci-dessous. Ils peuvent être donnés en pixels ou en pourcentage. Ci-dessous, nous examinons cette fonctionnalité en détail.

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

Vous pouvez également afficher les paramètres de l'élément : largeur et hauteur, mesurés 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éinitialiser l'image à sa taille d'origine.

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

Pour faire 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, alors assurez-vous que le texte alternatif est pertinent pour le contenu de votre site Web en général et reflète le contenu de l'image.

Toute image peut être transformée en lien de sorte que lorsque l'utilisateur clique dessus, il sera redirigé 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, cercle ou ligne.

Rectangle : modifiez les longueurs latérales en faisant glisser les points de contrôle.

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

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

Ligne. Définissez la hauteur du rectangle sur 1-5 px dans les paramètres de l’élément ; Ainsi, vous ferez une ligne.

Les formes peuvent avoir une ombre, une bordure et un lien qui leur sont attribués.

Vous pouvez modifier la taille, la couleur et le rayon d'arrondi du bouton. Vous pouvez également y 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. Là, vous pouvez également définir sa taille, son type, son opacité et sa couleur de 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'info-bulle est un élément de bloc interactif qui affiche un indice textuel et/ou une image lorsque vous passez le pointeur dessus.

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

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

Vous pouvez ajouter un formulaire horizontal ou vertical à un Zero Block. Vous aurez accès à tous les paramètres de base du formulaire, tels que 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 son design 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 normal.

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

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)

C’est suffisant pour que votre design s’affiche correctement sur tous les appareils.

Après avoir personnalisé un Zero Block sur le plan de travail principal, changez les types d’écran et effectuez les ajustements nécessaires, tels que la largeur de la colonne de texte, la taille de l’image, la taille de la police, la hauteur du plan de travail ou la disposition des éléments.

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

Dans l'exemple ci-dessous, l'élément de texte a tous ses paramètres 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 des éléments 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 plan de travail.

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

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

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

Vous pouvez également personnaliser le rendu de l’image d’arrière-plan (Début du filtre/Fin du filtre) et le comportement du contenu concernant l’image d’arrière-plan : Si vous définissez une valeur « Fixe », le contenu (texte et formes) se déplacera pendant le 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 "Autre".

Dans l’onglet Contenu du bloc, spécifiez l’ID du Zero Block dont vous avez besoin (ou choisissez-le manuellement en cliquant sur le lien « Choisir Zero Block »). Par défaut, le lien vers la fenêtre contextuelle est le lien #zeropopup, vous pouvez le modifier pour n’importe quel nom que vous aimez, mais vous devez garder le signe dièse au début. Ensuite, le bloc fonctionnera comme une fenêtre contextuelle habituelle 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 du fond (couleur, opacité), la couleur de l'icône de fermeture, la vitesse d'animation,
votre propre Z-index et d'autres paramètres.