Comment créer votre propre design à l'aide de notre éditeur de design web Zero Block

Contrôlez chaque élément. Vous pouvez contrôler chaque élément du bloc tel que le texte, l'image, le bouton ou l'arrière-plan. Décidez de leur position, de leur taille et de la résolution de l'écran sur lequel ils apparaîtront.

Couches. Il s'agit d'un outil pratique pour créer de la profondeur grâce aux techniques de superposition et d'opacité. Chaque élément du site web peut être positionné par rapport à la grille ou aux bords de l'écran.

Typographie complexe. Les concepteurs ont toute liberté pour créer des solutions typographiques uniques.

Transparence. Définissez un niveau de transparence sur n'importe quel élément et des effets d'ombre en dessous, ajustez l'adaptabilité. Modifiez tous les paramètres tels que la composition, l'ensemble des éléments visibles, en fonction de la résolution de l'écran.

Panneaux. Ajoutez des panneaux colorés, des cartes de contenu ou téléchargez des images à l'intérieur de formes géométriques.

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 HTML. Ajoutez n'importe quel élément à Zero Block en insérant du code HTML (utilisez votre propre code ou des widgets IFrame qui vous permettent d'insérer du contenu provenant de fournisseurs tiers). Ajustez le positionnement de ces éléments sur chaque écran.

Info-bulle. Utilisez cet outil interactif pour ajouter de courtes fenêtres contextuelles. Vous pouvez modifier les paramètres tels que la couleur, l'ombre, la taille, télécharger une icône à l'intérieur d'un cercle ou une image au-dessus du texte.

Formulaire de rétroaction. Ajoutez des champs de saisie, des intégrations de capture de données, définissez le style du formulaire et animez-le.

Animation des éléments d'une page web. Ajoutez des animations lorsque des éléments web apparaissent sur une page : opacité, mise à l'échelle, lorsque des éléments apparaissent en bas, en haut, à gauche ou à droite.

Animation étape par étape. Rendez votre page plus dynamique et plus attrayante. Animez au clic, au défilement, au survol et lorsque l'élément apparaît à l'écran.

Défilement parallaxe. Utilisez le défilement parallaxe ou créez l'effet parallaxe à partir du mouvement de la souris.

Éléments fixes lors du défilement. Spécifiez la distance pendant laquelle l'élément doit rester fixe et son emplacement.

Si vous dessinez des mises en page dans un éditeur graphique avant de les utiliser, utilisez Zero Block pour les transférer telles quelles sur votre site web. Pour ce faire, Zero Block propose une grille de 12 colonnes et des spécifications personnalisables pour chaque élément, telles que 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.

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

Si vous créez une page web ou une page d'atterrissage et que vous ne trouvez pas le bon bloc dans la bibliothèque de Tilda, utilisez Zero Block. Voici quelques exemples concrets.

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.

Le bloc zéro est idéal pour rassembler des éléments aux bords irréguliers en une seule composition, en rendant toutes les distances visuellement identiques.

Zero Block fonctionne bien avec les calques, tels que les images qui se chevauchent, les textes sur un panneau, les boutons sur des images. Créez des effets supplémentaires en jouant sur leur positionnement.

Pour simplifier les choses lorsqu'il s'agit d'éléments multiples, utilisez les calques. Ce formidable outil vous permet de gérer chaque élément - changer sa position, le cacher ou le verrouiller.

Pour ouvrir les calques, utilisez les raccourcis clavier suivants : ⌘+ L ou Ctrl + L (pour Macs) ou Ctrl + L (pour Windows).

Zero Block permet aux utilisateurs de créer des compositions complexes à partir d'éléments multiples tels que des textes, des images, des lignes, des panneaux et des boutons.

Cette page d'atterrissage pour les nouvelles polices créée sur Tilda se compose de blocs comportant de multiples éléments.

L'effet de survol modifie l'apparence d'un élément lorsque l'utilisateur passe la souris dessus. Utilisez-le comme élément de conception supplémentaire ou comme élément fonctionnel d'un article ou d'une infographie.

Cette option est idéale lorsque vous souhaitez modifier quelque chose dans un bloc normal, mais qu'il n'est pas possible de le faire en changeant les paramètres.

Si vous avez sélectionné un bloc Tilda général et que vous souhaitez y apporter des modifications, utilisez simplement l'option Convert to Zero Block (Convertir en bloc zéro). Cela vous permettra de le modifier comme s'il s'agissait d'un bloc zéro. Cette option est disponible pour la majorité des blocs Tilda.

Décomposons ce processus en plusieurs étapes. Par exemple, modifions le bloc tarifaire en plaçant des icônes à l'extérieur des panneaux d'information.

Exemple de conversion d'un autre bloc en bloc zéro :

Nos blocs standard disposent de nombreux paramètres. Ajoutez le bloc le plus approprié de la bibliothèque, ouvrez l'onglet des paramètres et vérifiez si vous pouvez adapter le modèle à votre objectif. Il est possible que vous n'ayez pas besoin de Zero Block du tout.

Les exemples ci-dessous sont des conceptions basées sur nos blocs standard.

Si vous deviez auparavant convertir un bloc normal en bloc zéro, vous n'avez plus besoin de le faire. Tilda offre désormais la possibilité de définir les retraits séparément pour les ordinateurs et les appareils mobiles.

Nos blocs réguliers sont disposés sur une grille de 12 colonnes. Vous pouvez définir des retraits pour chaque en-tête égal à n'importe quel nombre de colonnes. Si vous avez conçu votre bloc en Zero Block sans tenir compte de la grille, vous ne pourrez pas définir les mêmes retraits pour les blocs réguliers (vous devrez les convertir en Zero Block).

Par exemple, vous alternez des blocs réguliers et des blocs Zero Block dans la conception de votre site web. Si vous pouvez placer des éléments où vous le souhaitez dans un bloc zéro, il ne sera pas possible de les répéter dans un bloc normal. Il est donc bon de garder à l'esprit que nos blocs réguliers ne peuvent être positionnés que sur la grille.

Nous vous recommandons d'utiliser une grille lorsque vous concevez votre site web avec Zero Block. Positionnez les éléments principaux par rapport à la grille - votre design peut maintenant être facilement combiné avec tous les autres blocs Tilda.

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

Vous pouvez ajouter ou modifier des vidéos provenant de YouTube et de Vimeo. Modifiez la taille et le format de la vidéo, ainsi que son opacité, créez des ombres et appliquez des animations.

Dans les paramètres vidéo, vous pouvez régler la lecture automatique, activer et 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 à l'aide du code HTML. Il peut s'agir de votre propre code ou de l'iFrame d'un widget tiers. Il peut s'agir, par exemple, d'éléments interactifs, d'enregistrements en ligne, de lecteurs de musique, de calendriers, de calculatrices, de messages sur les médias sociaux. Vous pouvez ajuster la position de ces éléments sur chaque écran.

L'infobulle est une petite invite interactive qui apparaît lorsque le curseur de la souris est placé sur un élément d'un site web. Elle peut être utile si vous décrivez un sujet complexe et que vous souhaitez en décrire les éléments sur une photo. Par exemple, si vous vendez des maisons dans un lotissement, vous pouvez dessiner une carte et marquer chaque bâtiment sur cette carte.

L'infobulle dispose de nombreux paramètres pratiques : modifiez la couleur, l'ombre, la taille ou choisissez et téléchargez une icône qui apparaîtra à l'intérieur d'un cercle ou un texte qui s'affichera au survol de la photo.

Une fois que vous avez fini de placer les éléments/infobulles sur la page, n'oubliez pas de vérifier la position de chaque infobulle sur les écrans de toutes les résolutions, sinon l'invite risque d'être coupée par le haut, le bas ou les bords du bloc.

Ajoutez un formulaire de rétroaction horizontal ou vertical à Zero Block et modifiez chaque paramètre, par exemple en ajoutant des champs de saisie ou des intégrations de capture de données, des messages de réussite ou d'erreur, des styles de formulaire ou des animations.

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

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 prendra la moitié de l'écran quelle que soit sa taille. Dans ce cas, définissez sa largeur et sa hauteur en % et non en pixels.

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

Utilisez un bouton pour les effets de survol dans Zero Block Vous pouvez lui donner la taille que vous voulez et vous pouvez même le rendre rond en ajustant les paramètres. Vous souhaitez qu'il ne soit visible qu'au survol ? Rendez-le transparent. Et tant que vous y êtes, choisissez une opacité de 30 % et n'importe quelle couleur pour le bouton de survol.

Placez le bouton au-dessus des éléments que vous souhaitez voir couverts par l'effet de survol. Il peut s'agir d'images ou de texte. Si nécessaire, transformez le bouton en lien.

Pour fixer un élément pendant le défilement, réglez les paramètres de l'image sur Comportement - Fixe. Cette fonctionnalité est disponible pour les images d'arrière-plan à l'intérieur d'une forme. Si vous l'appliquez à l'image à l'intérieur d'un panneau, la taille de l'image s'étendra au plein écran, mais elle ne sera visible qu'à l'intérieur de la forme. Si vous utilisez plusieurs formes de ce type dans le bloc, l'image à l'intérieur de celles-ci sera la continuation de la même image.

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

Si vous souhaitez que certains éléments soient affichés en dehors du bloc zéro et superposés aux blocs adjacents, choisissez l'option Débordement. Vous la trouverez dans les paramètres du bloc.

Les modèles de blocs zéro peuvent être adaptés aux cinq types d'écrans les plus courants. Votre bloc sera toujours agréable à regarder sur n'importe quel appareil.

N'oubliez pas de vérifier l'aspect de votre Zero Block sur tous les écrans. Il vous suffit d'appuyer sur le bouton représentant l'appareil dont vous avez besoin dans Zero Block.

Chaque élément de chaque écran est personnalisable dans Zero Block, de sorte que si vous modifiez la composition ou le contenu sur l'un des écrans, un bloc en résolution inférieure peut sembler différent en raison de la différence de longueur de la ligne ou de la taille des éléments.

En créant un Zero Block à partir de zéro, configurez l'adaptabilité pour chaque appareil individuellement. Il est important de garder cela à l'esprit avant de publier votre site web.

Si vous concevez l'intégralité de votre site en Zero Block, il est plus pratique de le diviser en blocs distincts. Cela vous permettra de désactiver les blocs pour les écrans à faible résolution ou de les désactiver temporairement pour l'ensemble du site web.

Si vous utilisez beaucoup de détails sur un grand écran, simplifiez votre conception pour les écrans à faible résolution afin de la rendre plus agréable à l'œil.

Voici un exemple de composition visuelle individuelle sur chaque écran :

Vous pouvez animer chaque élément tel qu'il apparaît dans Zero Block. Nous avons prévu six types d'animations :

Chaque type d'animation a ses propres paramètres. Voyons ce qu'ils signifient.

Durée - la durée de l'animation en secondes. Plus la valeur est élevée, plus l'animation est lente.

Distance - l'espace entre la position initiale d'une animation et sa position finale. Elle n'est spécifiée que pour les animations où les objets apparaissent sur les côtés.

Échelle - la taille d'un élément au début d'une animation en pourcentage de la taille d'origine. Ce paramètre est défini lors d'une augmentation ou d'une réduction de l'échelle. Si la valeur est supérieure à 100, l'élément est plus grand dès le départ et il est ramené à sa taille d'origine ; si la valeur est inférieure à 100, l'élément est ramené à sa taille d'origine.

Délai - le délai de lecture de l'animation, en secondes. Si la valeur est nulle, l'animation démarre dès que le bloc apparaît sur la page.

Quand l'utiliser ? Cette fonction peut s'avérer utile lorsqu'un autre objet chevauche ou biffe un élément important. Si un écran présente plusieurs objets animés, attribuez une fonction de retard différente à chaque élément. Cela vous permet de diriger l'œil du spectateur, en le conduisant d'un élément à l'autre.

Décalage du déclencheur est la distance, mesurée en pixels à partir du bord inférieur de l'écran, à laquelle les éléments apparaissent sur la page. Par défaut, l'animation commence dès que l'élément entre dans la page. Si vous souhaitez retarder l'animation jusqu'à ce que l'objet soit visible par le spectateur (et non tout en bas de la page), définissez la distance à partir du bord inférieur à 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.

Une fois que vous avez défini les paramètres nécessaires, vérifiez l'animation sans quitter l'éditeur. Activez l'élément que vous avez animé, cliquez sur Jouer l'élément pour un seul élément et sur Jouer tout si vous avez animé plusieurs éléments et que vous souhaitez voir comment ils fonctionnent ensemble.

Si vous souhaitez voir apparaître sur votre page des éléments interactifs avec lesquels les utilisateurs voudront s'engager, mettez en évidence l'élément que vous souhaitez animer et passez à l'animation pas à pas dans les paramètres de l'élément.

Les éléments apparaissent et se déplacent lorsque l'utilisateur fait défiler une page vers le haut ou vers le bas.

Exemples d'animation sur rouleau :

N'hésitez pas à utiliser ces exemples d'animation dans vos projets personnels.

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

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

Bloc à l'écran - est déclenchée lorsqu'un bloc zéro contenant l'élément traverse le bas du navigateur et apparaît sur la page web.

L'animation démarre lorsque le curseur passe au-dessus d'un élément.

L'animation commencera lorsque l'utilisateur cliquera sur l'élément.

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

Déclencheur de démarrage -un événement qui déclenche l'animation. Vous avez le choix entre le haut de la fenêtre, le centre de la fenêtre et le bas de la fenêtre.

Un déclencheur de bas de fenêtre est défini par défaut ; l'animation démarre dès que la fenêtre franchit le bas du navigateur.

Décalage du déclencheur est la distance en pixels entre le déclencheur sélectionné et le début de l'animation.

Boucle d'animation est un paramètre qui contrôle la répétition perpétuelle de l'animation.

Vous pouvez tester l'animation à l'aide du bouton Play Element / Play All. Cette option est disponible pour tous les types d'animation, à l'exception de l'animation sur le défilement.

Pour plus de commodité, vous pouvez utiliser deux onglets de navigateur : l'un pour l'édition dans Zero Block et l'autre pour l'ouverture de l'aperçu de la page. De cette façon, vous pouvez vérifier votre résultat sans quitter Zero Block. Veillez à enregistrer toutes les modifications et à actualiser la page de prévisualisation avant de tester votre page web.

Lorsque vous choisissez l'animation pas à pas, vous pouvez ajouter des étapes et personnaliser les propriétés de chaque étape qui déclencheront des changements dans les paramètres de chaque élément sélectionné sur votre page web. Créez une trajectoire et des mouvements de vos éléments sur la page en fonction d'un certain nombre d'é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é à zéro et la durée à 0 seconde ou 0 pixel (pour une animation sur le défilement).

À l'aide des paramètres d'étape, vous pouvez modifier les propriétés de l'élément que vous animez.

Vous pouvez définir sa position (Move), sa taille (Scale), sa transparence (Opacity) et son angle de rotation (Scale).

Défilement parallaxe. Lorsque vous appliquez cette animation à un élément, la vitesse à laquelle il se déplace sera différente de celle des autres éléments lorsque vous faites défiler une page. Vous pouvez définir la vitesse de son mouvement dans les paramètres de la page : à une vitesse lente de 0 à 100, l'élément se déplacera plus lentement que le défilement, à une vitesse élevée de 100 à 200, il se déplacera beaucoup plus rapidement.

Parallaxe lors du déplacement du pointeur de la souris. Un élément doté de ce type d'animation se déplace dans la direction opposée au mouvement du pointeur. Vous définissez la zone de son mouvement vertical ou horizontal dans les paramètres de la page.

Ce type d'animation permet de fixer les éléments pendant le défilement. Dans les paramètres, vous pouvez spécifier la distance à laquelle l'élément restera fixé à un endroit (toujours à l'intérieur du bloc). La distance est fixée en pixels. Après un défilement jusqu'à la distance spécifiée, l'élément n'est plus fixé et continue à défiler avec la page.

Vous pouvez définir les déclencheurs de défilement dans les paramètres : en haut, en bas ou au centre de la fenêtre. Le décalage de déclenchement vous permet de contrôler la marge entre le bord de la fenêtre et l'élément. Il est également utile lorsque vous souhaitez fixer plusieurs éléments en même temps à une certaine distance les uns des autres.

Si vous créez un bloc à partir de zéro, il est utile de concevoir d'abord la page entière pour voir comment ce bloc se compare aux autres. Une fois cette étape franchie, n'oubliez pas de configurer ses paramètres d'adaptabilité. Si vous traduisez un texte dans Zero Block et que vous le modifiez simplement, vérifiez qu'il fonctionne dans Zero Block même si tout semble correct sur le premier écran. En raison des différentes tailles de police et de la longueur de la ligne, le texte peut sembler différent sur d'autres écrans.

Si vous souhaitez que deux éléments restent dans la même position l'un par rapport à l'autre, définissez le positionnement des éléments comme Conteneur de grille ou Conteneur de fenêtre.

Si vous positionnez le texte par rapport à la grille et que vous souhaitez qu'il reste toujours à l'intérieur de l'écran, veillez à ce que son conteneur ne dépasse pas la zone de la grille. Créer une mise en page soignée est une bonne habitude à prendre ; vous éviterez ainsi les mauvaises surprises lors de la publication du bloc.