Un guide complet pour Zero Block

Contrôlez chaque élément. Vous pouvez contrôler chaque élément du bloc, y compris le texte, l'image, le bouton ou l'arrière-plan. Vous pouvez également décider de leur position, de leur taille et de la résolution d'écran sur laquelle ils apparaîtront.

Calques. Il s'agit d'un outil pratique pour créer de la profondeur à l'aide de techniques de superposition et d'opacité.

Bords de l'écran et alignement de la grille. Chaque élément du site web peut être positionné par rapport à la grille de mise en page ou aux bords d'un écran.

Résolutions d'écran personnalisées. Définissez des valeurs de résolution d'écran personnalisées pour que votre mise en page s'adapte parfaitement à un appareil spécifique. Les points d'arrêt peuvent être définis entre 320 px et 1920 px pour un contrôle réactif total.

Typographie avancée. Les designers disposent d'une liberté créative totale pour créer des solutions typographiques uniques.

Guides. Utilisez des guides visuels pour contrôler précisément votre mise en page. Vous pouvez les configurer pour qu'ils n'apparaissent qu'à certaines résolutions d'écran, afin de ne pas perdre de temps à les masquer lorsqu'ils ne sont pas nécessaires.

Zoom du plan de travail de 20 à 300 %. Cette plage facilite le travail avec les éléments du plan de travail. Zoomez pour ajuster les petits détails ou dézoomez pour voir l'ensemble du plan de travail, par exemple lorsque vous travaillez avec plusieurs éléments à la fois.

Positionnement flexible des images dans les formes. Ajustez manuellement la partie d'une image qui est visible à l'intérieur d'une forme. Cela vous donne plus de contrôle sur la disposition des blocs lorsque les options de positionnement par défaut ne correspondent pas à votre conception.

Groupes en tant qu'objets. Combinez plusieurs éléments en groupes pour simplifier la configuration des animations, la modification et la rotation des éléments, etc.

Opacité. Définissez le niveau d'opacité de n'importe quel élément et des effets d'ombre en dessous. Ajustez chaque paramètre, tel que la composition ou la visibilité des éléments, pour chaque résolution d'écran.

Plaques. Ajoutez des plaques colorées, des cartes de contenu ou placez des images à l'intérieur de formes.

Vidéo. Ajoutez des vidéos YouTube ou Vimeo à votre site web. Dans Zero Block, vous pouvez ajuster leur taille et leur position sur la page.

Ajout de code HTML. Ajoutez n'importe quel élément à Zero Block insérant du code HTML et ajustez le positionnement de ces éléments sur chaque écran.

Info-bulle. Utilisez cet outil interactif pour ajouter de courtes invites contextuelles. Vous pouvez personnaliser la couleur, l'ombre, la taille, sélectionner et télécharger une icône à l'intérieur d'un cercle ou une image au-dessus du texte.

Formulaire de commentaires. Ajoutez des champs de saisie et des services de capture de données. Définissez le style du formulaire et animez-le.

Éditeur vectoriel. Créez et modifiez des images vectorielles directement dans Zero Block. Grâce à l'éditeur vectoriel de Tilda, vous pouvez créer toutes sortes de formes et modifier des fichiers SVG importés.

Animation de l'apparence des éléments. Animez l'apparition des éléments web sur une page, par exemple en les faisant apparaître progressivement, en les zoomant ou en les faisant glisser depuis le haut, le bas, la gauche ou la droite de l'écran.

Animation étape par étape. Utilisez l'animation étape par étape pour rendre votre page plus attrayante et dynamique. Vous pouvez déclencher des animations au clic, au défilement, au survol ou lorsqu'un élément apparaît à l'écran. Vous pouvez également ajuster l'accélération de chaque étape pour contrôler la fluidité. Choisissez le bon réglage et affinez l'accélération à l'aide des courbes de Bézier.

Défilement parallaxe. Utilisez un effet de défilement parallaxe ou créez un effet parallaxe lors du déplacement de la souris.

Éléments fixes lors du défilement. Spécifiez la distance sur laquelle l'élément doit rester fixe et son emplacement.
Appliquez des éléments fixes lors du défilement. Vous pouvez définir la distance sur laquelle l'élément sera fixe et sa position. Vous pouvez également rendre l'ensemble Zero Block . Cela vous permettra, par exemple, de créer un menu fixe avec une disposition non standard des éléments.

Mises en page automatiques. Simplifiez votre flux de travail en automatisant l'alignement des éléments au sein d'un groupe. Les mises en page automatiques vous aident à créer des designs plus rapidement, à échanger facilement du contenu et à adapter automatiquement les mises en page à différents appareils.

Si vous concevez des mises en page dans un éditeur graphique avant de faire quoi que ce soit, utilisez Zero Block les transférer telles quelles sur votre site web. Pour cela, Zero Block une grille de 12 colonnes et des paramètres personnalisables pour chaque élément. Ceux-ci comprennent les coordonnées, la taille, le positionnement par rapport à la grille ou à l'écran, les paramètres d'opacité et l'ombre. Utilisez ces outils pour recréer votre mise en page dans Zero Block.

Zero Block L'interfaceZero Block est similaire à celle d'un éditeur graphique. Il suffit d'ajouter les éléments nécessaires et de leur attribuer les coordonnées appropriées. C'est facile à faire dans Zero Block, surtout si vous l'avez déjà fait auparavant. Utilisez Zero Block transférer rapidement votre idée d'un éditeur graphique vers votre site web sans avoir à écrire de code.

Si vous créez une page web ou une page d'accueil et que vous ne trouvez pas le bloc adéquat dans la bibliothèque Tilda, le Zero Block vous sera Zero Block . Voici quelques exemples.

Les sites web créés sur Tilda sont souvent constitués de blocs, de sorte que les visiteurs font défiler les sections. Il s'agit d'une tendance à l'unification de la conception des sites web, où le contenu passe avant la conception.

Si vous souhaitez modifier la façon dont les visiteurs lisent les informations sur votre site web, Zero Block est un excellent outil pour cela.

Zero Block très bien pour rassembler des éléments aux contours irréguliers dans une seule composition en rendant toutes les distances visuellement similaires.

Dans Zero Block, l'utilisation des calques est un jeu d'enfant. Vous pouvez facilement superposer des images, des textes sur un panneau et des boutons sur des images. Créez des effets supplémentaires en jouant avec leur positionnement.

Pour simplifier les choses lorsqu'il y a plusieurs éléments, utilisez les calques. Cet outil vous permet de gérer chaque élément : modifier sa position, le masquer ou le verrouiller.

Pour ouvrir le panneau Calques, utilisez les raccourcis clavier suivants : ⌘+ L ou Ctrl + L (pour Mac) ou Ctrl + L (pour Windows).

Zero Block aux utilisateurs de créer des compositions personnalisées à plusieurs éléments, telles que des textes, des images, des lignes, des panneaux et des boutons. Vous pouvez également combiner plusieurs éléments en un seul objet. Par exemple, vous pouvez concevoir une fiche article et y ajouter un lien. Ce type de groupe d'éléments peut être animé, espacé avec des marges, doté d'une ombre et personnalisé à l'aide d'autres paramètres. Pour créer un groupe d'objets, sélectionnez plusieurs éléments, regroupez-les, puis dans les paramètres du groupe, choisissez Objet.

Cette page d'accueil présente les fonctionnalités de Tilda particulièrement utiles pour les entreprises et se compose de blocs contenant plusieurs éléments.

L'effet de survol modifie l'apparence d'un élément lorsque l'utilisateur passe la souris dessus. Vous pouvez l'utiliser comme élément de design supplémentaire ou comme élément fonctionnel d'un article ou d'une infographie.

Idéal dans les situations où il est impossible de modifier un bloc prédéfini comme vous le souhaitez à l'aide de ses paramètres.

Si vous avez sélectionné un bloc Tilda prêt à l'emploi et que vous souhaitez y apporter des modifications, utilisez l'option Convertir en Zero Block. Cela vous permettra de le modifier comme s'il s'agissait d'unZero Block. Cette option est disponible pour la plupart des blocs Tilda.

Décomposons ce processus en plusieurs étapes. Par exemple, modifions le bloc de tarification en positionnant les icônes à l'extérieur des panneaux d'information.

Exemple d'un bloc converti en Zero Block:

Les blocs prédéfinis de Tilda offrent de nombreux paramètres. Ajoutez celui qui convient le mieux à partir de la bibliothèque. Ouvrez le panneau Paramètres et vérifiez si vous pouvez ajuster le modèle en fonction de votre objectif. Il est possible que vous n'ayez Zero Block besoin Zero Block .

Les exemples ci-dessous ont été conçus à l'aide des blocs prédéfinis de Tilda.

Sur Tilda, vous pouvez définir les marges séparément pour les ordinateurs de bureau et les appareils mobiles.

Sur Tilda, les blocs prédéfinis sont disposés sur une grille de 12 colonnes. Vous pouvez définir les retraits comme étant égaux à n'importe quel nombre de colonnes. Si vous avez conçu votre bloc dans Zero Block tenir compte de la grille, vous ne pourrez pas définir les mêmes retraits pour les blocs prédéfinis (vous devrez les convertir en Zero Block).

Supposons que vous alterniez des blocs prédéfinis et des blocs Zero Zero Block dans la mise en page de votre site web. Si vous pouvez placer des éléments où vous le souhaitez dans Zero Block, cela n'est pas possible dans les blocs prédéfinis. Il est donc important de garder à l'esprit que les blocs prédéfinis ne peuvent être positionnés que sur la grille.

Nous vous recommandons d'utiliser une grille lorsque vous concevez votre site web dans Zero Block. Positionnez les éléments principaux par rapport à la grille. De cette façon, votre conception peut être facilement combinée avec tous les autres blocs Tilda.

Sélectionnez le thème d'interface préféré pour l'éditeur : standard, clair ou foncé. Vous pouvez également réduire la taille de l'interface pour chacun d'entre eux afin qu'ils occupent moins d'espace à l'écran. Où l'activer : Zero Block cliquez sur « Tab » → Zero Block → Thème.

Dans Zero Block, vous pouvez ajouter des éléments plus complexes que des textes, des images, des formes et des boutons.

Ajoutez et configurez des vidéos provenant de YouTube, Vimeo, Kinescope, iFrame, ou téléchargez un fichier MP4 ou WebM. Modifiez la taille et le format de l'image, son opacité, créez des ombres et appliquez des animations.

Dans les paramètres vidéo, vous pouvez configurer la lecture automatique, activer ou désactiver la lecture en boucle, définir l'heure de début et de fin de chaque vidéo et télécharger votre propre couverture.

Ajoutez n'importe quel élément en intégrant du code HTML. Par exemple, des éléments interactifs, des enregistrements en ligne, des lecteurs de musique, des calendriers, des calculatrices et des publications sur les réseaux sociaux. Vous pouvez ajuster la position de ces éléments sur chaque écran.

Une info-bulle est une invite interactive qui apparaît lorsque le curseur de la souris est positionné sur un élément d'un site Web. Elle peut être utile si vous décrivez un sujet complexe et souhaitez décrire ses différentes parties sur une photo. Par exemple, si vous vendez des cottages dans un lotissement, vous pouvez dessiner un plan et marquer chaque bâtiment sur ce plan.

L'info-bulle offre plusieurs paramètres pratiques : vous pouvez ajuster la couleur, l'ombre et la taille, télécharger une icône qui apparaîtra à l'intérieur d'un cercle ou télécharger une image qui s'affichera lorsque le curseur passera dessus.

Une fois que vous avez terminé de placer les éléments/info-bulles sur la page, n'oubliez pas de vérifier la position de chaque info-bulle pour toutes les résolutions. Sinon, l'invite risque d'être coupée en haut, en bas ou sur les bords du bloc.

Ajoutez un formulaire en ligne horizontal ou vertical à Zero Block. Ensuite, personnalisez chaque paramètre, tel que les champs de saisie ou les services de capture de données, les messages de réussite et d'erreur, les styles de formulaire ou les animations.

Dans Zero Block, vous pouvez créer et modifier des éléments vectoriels. Par exemple, des formes inhabituelles, des icônes ou de petits éléments dessinés tels que des soulignements ou des flèches. L'éditeur vectoriel est également pratique pour affiner les éléments SVG importés directement sur Tilda.

Chaque élément peut se voir attribuer des coordonnées relatives aux quatre côtés d'un écran ou d'une grille, une opacité et une ombre ; vous pouvez également faire pivoter les éléments ou leur attribuer un lien.

Les règles facilitent le travail avec les éléments de mise en page. Il s'agit de lignes horizontales en haut et de lignes verticales sur le bord gauche de l'écran, à partir desquelles vous pouvez « tirer » des guides. Les règles et les guides vous aident à définir la disposition souhaitée des éléments dans la mise en page, à contrôler les retraits et l'alignement, et à maintenir des tailles et des proportions constantes pour les éléments. Pour activer les règles, allez dans Paramètres dans Zero Block Afficher les règles.

Chaque élément peut se voir attribuer une taille en pixels ou un pourcentage de la taille de l'écran. Par exemple, si vous souhaitez créer un élément qui occupera la moitié de l'écran quelle que soit sa taille, définissez sa largeur et sa hauteur en %, et non en pixels.

Découvrez de nombreuses surprises avec Zero Block. Voici une liste des effets que vous pouvez utiliser sur votre site web.

Utilisez un bouton pour les effets de survol dans Zero Block. Vous pouvez le redimensionner à votre guise et même lui donner une forme arrondie en ajustant les paramètres. Vous souhaitez qu'il soit visible uniquement au survol ? Rendez-le transparent, puis sélectionnez une opacité de 30 % et la couleur de votre choix pour le survol.

Placez le bouton sur les éléments que vous souhaitez recouvrir avec l'effet de survol. Il peut s'agir d'images ou de texte. Si nécessaire, attribuez un lien URL au bouton.

Pour verrouiller un élément pendant le défilement, modifiez les paramètres de l'image en sélectionnant Comportement — Fixe. Cette fonctionnalité est disponible pour les images d'arrière-plan et les images à l'intérieur d'une forme. Si vous appliquez cette option à une image à l'intérieur d'un panneau, l'image s'étendra sur tout l'écran. Cependant, elle ne sera visible qu'à l'intérieur de la forme. Si plusieurs formes de ce type sont utilisées dans un bloc, l'image à l'intérieur sera une continuation d'elle-même.

Vous pouvez combiner des images fixes et des images statiques pour créer des effets supplémentaires et des compositions inhabituelles.

Si vous souhaitez que certains éléments s'affichent en dehors de Zero Block se superposent aux blocs adjacents, utilisez Overflow. Vous trouverez cette option dans le panneau Paramètres de Zero Block.

Dans Zero Block, vous pouvez également définir différents paramètres pour les axes X et Y. Cela peut être utile lorsque vous souhaitez créer des cartes qui défilent horizontalement sans déplacement vertical.

Si vous définissez X sur «Hidden » (Masqué) et Y sur «Visible/Auto » (Visible/Auto), une barre de défilement verticale apparaîtra dans Zero Block, et le bloc sera fixé jusqu'à ce que tout le contenu le long de l'axe Y soit affiché.

Et si vous réglez X sur « Visible/Auto » et Y sur « Masqué », le contenu situé en dehors du canevas sur l'axe X s'affichera lors du défilement horizontal.

Le Zero Block être verrouillé sur la page afin qu'il reste en haut ou en bas de la page lors du défilement. Cela est utile, par exemple, pour créer un menu fixe avec un design personnalisé. Pour configurer le verrouillage, allez dans Paramètres → Position et débordement.

Vous pouvez également faire en sorte que le bloc n'apparaisse pas immédiatement, mais après quelques défilements (Décalage d'apparition). Dans ce cas, vous pouvez utiliser l'une des deux animations d'apparition : Fade In ou Slide Up/Down.

Zero Block cinq résolutions d'écran de base pour modifier la réactivité de votre site web : 320px, 480px, 640px, 960px et 1200px. Vous pouvez étendre cette plage en ajoutant des points d'arrêt. Les points d'arrêt vous permettent d'obtenir une mise en page parfaite pour tous les éléments du site web à des résolutions spécifiques. Une configuration flexible peut être utile, par exemple, lorsque les utilisateurs visitent le site web sur des appareils dont la résolution d'écran est irrégulière.

Lors de la conception Zero Block, il est essentiel de tester l'affichage du site web sur tous les écrans. Vous pouvez le faire directement dans Zero Block cliquant sur l'image de l'appareil correspondant.

Zero Block conçu de manière à ce que chaque élément de chaque écran puisse être personnalisé individuellement. Lorsque vous modifiez la composition ou le contenu de l'un d'entre eux, le bloc peut apparaître différemment sur les écrans à faible résolution en raison des différences de longueur de ligne ou de taille des éléments.

Lorsque vous créez un Zero Block zéro, n'oubliez pas de personnaliser manuellement les mises en page pour chaque résolution. Gardez cela à l'esprit avant de publier le site web.

Si l'ensemble de votre site web est conçu dans Zero Block, il est plus pratique de le diviser en blocs distincts. De cette façon, vous pouvez désactiver des blocs pour les écrans à faible résolution ou les désactiver temporairement pour l'ensemble du site web.

Si vous utilisez beaucoup de détails sur un grand écran, vous pouvez simplifier et rendre plus concise la mise en page sur les écrans à faible résolution afin de faciliter la perception.

Voici un exemple de composition visuelle unique pour chaque taille d'écran :

Si vous n'aimez pas le design adaptatif et souhaitez repartir de zéro, vous pouvez effacer les paramètres des éléments pour les résolutions d'écran inférieures. Pour ce faire, sélectionnez un ou plusieurs éléments → cliquez avec le bouton droit pour ouvrir le menu contextuel → Effacer le design adaptatif.

La mise en page automatique dans Zero Block une technique de conception qui vous permet de créer rapidement des mises en page, de modifier le contenu et d'adapter la conception à différentes résolutions d'écran. Elle est pratique pour créer des éléments tels que des cartes, des boutons comportant plusieurs éléments, des éléments de menu, etc. Consultez le guide de configuration de la mise en page automatique dans le centre d'aide.

Les mises en page automatiques contrôlent le placement des éléments d'un groupe les uns par rapport aux autres. Une fois la direction et les distances définies, ils s'alignent automatiquement selon ces règles, indépendamment des modifications apportées au contenu du groupe. Par exemple, si vous devez ajouter une autre image à un groupe lors de la création d'une galerie, celle-ci s'« adaptera » selon les règles spécifiées. Vous n'aurez pas besoin de déplacer manuellement les autres éléments du groupe.

Consultez le tutoriel sur l'utilisation des mises en page automatiques :

Vous pouvez animer chaque élément tel qu'il apparaît dans Zero Block. Il existe six types d'animations :

Chaque type d'animation comprend ses propres paramètres. Examinons-les.

La durée correspond à la longueur de l'animation en secondes. Plus la valeur est élevée, plus l'animation est lente.

La distance est l'espace entre la position initiale d'un élément animé et sa position finale. Elle n'est spécifiée que pour les animations où les objets apparaissent depuis les côtés.

L'échelle correspond à la taille d'un élément au début de l'animation, exprimée en pourcentage de la taille d'origine. Ce paramètre est défini lorsqu'un agrandissement ou une réduction est effectué. Si la valeur est supérieure à 100, l'élément est plus grand au départ et il est réduit à sa taille d'origine. Si la valeur est inférieure à 100, l'élément est agrandi à sa taille d'origine.

Le délai correspond au retard de lecture de l'animation, en secondes. Si la valeur est 0, l'animation démarre dès que le bloc apparaît sur la page.

Quand utiliser le délai ? Il peut être utile si un autre objet chevauche ou recouvre un élément important. Si plusieurs objets animés sont présents sur une même page, attribuez des délais différents à chaque élément. Cela vous permettra de guider le regard du spectateur, en le conduisant d'un élément à l'autre.

Le décalage de déclenchement correspond à la distance, mesurée en pixels, entre le bord inférieur de l'écran et l'endroit où l'élément apparaît sur la page. Par défaut, l'animation commence dès que l'élément franchit la ligne inférieure de la page. Si vous souhaitez retarder l'animation jusqu'à ce que l'élément soit visible pour le spectateur (et non tout en bas de la page), définissez la distance par rapport au bord inférieur à partir de laquelle l'animation commencera. Si l'objet est initialement situé à une distance inférieure à la valeur de ce paramètre, il ne sera pas visible tant que l'utilisateur n'aura pas fait défiler la page vers le bas.

Une fois que vous avez défini les paramètres nécessaires, vérifiez l'animation directement dans l'éditeur. Pour voir l'élément animé en action, cliquez sur « Lire l'élément » pour un seul élément, et sur « Tout lire » pour plusieurs éléments et voir comment ils fonctionnent ensemble.

Avec l'animation étape par étape, vous pouvez attribuer des étapes de transformation séquentielles à n'importe quel élément de page et permettre aux visiteurs d'interagir avec eux.

Pour ajouter une animation étape par étape à un élément dans Zero Block, sélectionnez l'élément, ouvrez ses paramètres et accédez à la section Animation étape par étape (située à la fin des paramètres de l'élément).

Les éléments apparaissent et se déplacent lorsque le visiteur fait défiler la page vers le haut ou vers le bas.

Tous les exemples d'animation ci-dessous sont disponibles sous forme de modèles. Vous pouvez donc les ajouter à vos projets et les utiliser comme vous le souhaitez.Exemples d'animation

s lors du défilement :

Ce type d'animation est déclenché lorsqu'un élément apparaît à l'écran.

Élément à l'écran — l'animation est déclenchée lorsqu'un élément traverse le bas du navigateur et apparaît sur la page Web.

Bloc à l'écran — l'animation est déclenchée lorsqu'un Zero Block l'élément traverse le bas du navigateur et apparaît sur la page Web.

Ce type d'animation est déclenché lorsqu'un visiteur passe la souris sur un élément.

Ce type d'animation est déclenché lorsqu'un visiteur clique sur l'élément.

Chaque type d'animation dispose de paramètres supplémentaires :

Start Trigger est un événement qui déclenche l'animation. Choisissez entre Window Top, Window Center et Window Bottom.
Le déclencheur Window Bottom est défini par défaut ; l'animation démarre dès qu'elle franchit le bas du navigateur.

Trigger Offset est la distance en pixels à partir du déclencheur Start Trigger sélectionné. L'animation démarre une fois cette distance parcourue.

Loop est un paramètre qui vous permet de répéter indéfiniment les étapes spécifiées. Vous pouvez soit répéter l'animation un nombre infini de fois (définissez Boucle avec inversion), soit la lire une seule fois (définissez Boucle une fois).

L'accélération définit la fluidité de l'animation. Sur Tilda, vous pouvez choisir l'un des 29 types d'Easing qui affecteront l'affichage de l'animation configurée. Le type de lissage sélectionné peut être modifié à l'aide des courbes de Bézier.

Vous pouvez tester l'animation obtenue à l'aide des boutons Play Element (voir l'animation de l'élément sélectionné) / Play All (lire l'animation de tous les éléments du bloc). Cette option est disponible pour tous les types d'animation, à l'exception de l'animation au défilement.

Pour plus de commodité, vous pouvez travailler sur l'animation dans deux onglets du navigateur : modifiez le Zero Block l'un et ouvrez l'aperçu de la page dans l'autre. Cela vous permet de vérifier rapidement le résultat sans quitter Zero Block. Avant de tester le résultat, n'oubliez pas d'enregistrer vos modifications dans Zero Block d'actualiser la page d'aperçu.

Lorsque vous utilisez l'animation étape par étape, vous pouvez ajouter des étapes et personnaliser les propriétés de chacune d'entre elles. Cela déclenchera des modifications dans les paramètres de chaque élément sélectionné sur votre page Web. Créez une trajectoire et des mouvements pour vos éléments sur la page en fonction de plusieurs étapes.

Pour modifier l'état initial d'un élément (si vous souhaitez qu'il soit invisible au début, par exemple), définissez l'opacité sur 0 et la durée sur 0 seconde ou 0 pixel (pour l'animation au défilement).

À l'aide des paramètres d'étape, vous pouvez modifier les propriétés de l'élément auquel l'animation est appliquée.

Vous pouvez définir la position (Déplacer), la taille (Échelle), la transparence (Opacité) de l'élément, ainsi que son angle de rotation (Rotation).

Parallaxe lors du défilement. Lorsque vous appliquez cette animation à un élément, sa vitesse de déplacement diffère de celle des autres éléments lors du défilement de la page. Dans les paramètres, vous pouvez définir sa vitesse de déplacement : à une vitesse faible comprise entre 0 et 100, il se déplacera plus lentement que le défilement, à une vitesse élevée comprise entre 100 et 200, il se déplacera beaucoup plus rapidement.

Parallaxe lors du déplacement de la souris. Un élément doté de ce type d'animation se déplace dans la direction opposée au mouvement du curseur. Son amplitude de mouvement vertical et horizontal peut être définie dans les paramètres.

Ce type d'animation vous permet de verrouiller des éléments pendant le défilement. Dans les paramètres, vous pouvez spécifier la distance à laquelle les éléments restent fixes à une position spécifique (le verrouillage ne se produit qu'à l'intérieur du bloc). Après avoir défilé jusqu'à la distance spécifiée, l'élément ne sera plus fixe et défilera avec les autres éléments de la page.

Les paramètres vous permettent également de spécifier ce qui déclenchera le verrouillage : le bord supérieur de la fenêtre, le bord inférieur ou le centre. Le décalage de déclenchement vous permet de contrôler la distance par rapport au bord de la fenêtre, garantissant ainsi que l'élément ne reste pas collé à celui-ci. Il est également utile lorsque vous souhaitez verrouiller plusieurs éléments à la fois à une certaine distance les uns des autres.

Si vous utilisez des animations dans votre projet, ne surchargez pas la page avec trop d'effets ; il suffit généralement d'animer 20 à 30 % du contenu. Une animation excessive peut être intrusive et agaçante, et ralentit également la vitesse de chargement de la page.

Si vous créez un bloc à partir de zéro, il est utile de concevoir d'abord l'ensemble de la page afin de voir comment ce bloc se compare aux autres. Une fois que vous avez fait cela, n'oubliez pas de configurer ses paramètres d'adaptabilité. Si vous traduisez du texte dans Zero Block vous le modifiez simplement, vérifiez son apparence sur chaque version d'écran, même si tout semble correct sur le premier écran. En raison des différentes tailles de police et de la longueur des lignes, le texte peut apparaître différemment selon les écrans.

Si vous souhaitez que deux éléments restent dans la même position l'un par rapport à l'autre, quelle que soit la résolution de l'écran, définissez le positionnement des éléments comme « Grid Container » (Conteneur de grille) ou « Window Container » (Conteneur de fenêtre).

Pour en savoir plus sur la configuration du positionnement des éléments, consultez le Centre d'aide :

Si vous positionnez le texte par rapport à la grille et que vous souhaitez qu'il reste toujours à l'écran, assurez-vous que son conteneur ne dépasse pas la zone de la grille. Créer une mise en page soignée est une bonne habitude : vous éviterez ainsi toute mauvaise surprise lors de la publication du bloc.

Utilisez Zero Block créer des sites Web impressionnants et des solutions typographiques innovantes. C'est un outil utile pour vos solutions de conception. Ajoutez de la personnalité à votre site Web grâce à des effets spéciaux, une typographie et un design original. Tout est entre vos mains maintenant !