Comment mettre en place une section de héros
Création et édition d'une page de couverture de site web
Comment choisir la bonne image de fond : dimensions, format et proportions
Mise en place du titre, du sous-titre et d'autres textes
Comment créer une page de couverture étroite qui n'occupe pas toute la hauteur du premier écran ?
Comment améliorer la lisibilité en créant un filtre de couleur pour une image d'arrière-plan, en remplissant une page de couverture d'une couleur unie et en assurant la transition vers le bloc suivant ?
Configuration d'une vidéo qui sera lue en arrière-plan ou lorsque vous cliquerez sur le bouton Lecture
Comment rendre une page de couverture attrayante sur les appareils mobiles ?
Mise en place d'un formulaire de collecte de données sur la page d'accueil
Ajouter des comptes à rebours à une date et une heure spécifiques
Comment convertir et modifier une page de couverture en Zero Block
La couverture est la première chose que les internautes voient sur votre page. Elle présente le contenu et les incite à s'y intéresser ou résume ce qui rend votre projet unique. Une couverture contient généralement une image d'arrière-plan : une photo élégante, une vidéo captivante, une couleur, un dégradé ou une texture.
Voici quelques conseils qui vous aideront à travailler plus efficacement avec les couvertures, les arrière-plans et les vidéos.
Voici quelques conseils qui vous aideront à travailler plus efficacement avec les couvertures, les arrière-plans et les vidéos.
Zone visible
Contrairement aux pages d'un magazine, les pages d'un site web n'ont pas de zone de visualisation fixe. Chaque appareil a une taille d'écran et un rapport d'aspect différents. En outre, les zones d'affichage varient d'un navigateur à l'autre. Par exemple, les navigateurs dotés d'une barre de signets fixe offrent une zone d'affichage plus petite. L'image de couverture est recadrée pour apparaître sans bordure à l'écran.
Image de fond
Téléchargez une image d'arrière-plan dans le panneau Contenu du bloc→ Image d'arrière-plan.
Pour que l'image soit belle, suivez ces conseils sur les meilleurs paramètres de l'image d'arrière-plan.
Meilleure taille :
Il s'agit des meilleurs paramètres pour les images téléchargées :
Format : JPG
Largeur : 1680px
Résolution : 72 dpi
Modèle de couleur : RGB
Compression : 10
Il s'agit des meilleurs paramètres pour les images téléchargées :
Format : JPG
Largeur : 1680px
Résolution : 72 dpi
Modèle de couleur : RGB
Compression : 10
Si vous n'êtes pas satisfait de la qualité de l'image, modifiez-la au préalable dans un éditeur graphique à l'aide de l'article de référence ci-dessous.
Avant de choisir une image, lisez notre article "Comment créer une couverture pour un site web" sur Tilda Education. Il contient des conseils pour créer votre propre page de couverture et des liens vers des sites de photographies de qualité.
Mise en forme du texte
Le texte est la partie la plus importante de toute page de couverture, car c'est le premier message que voit le visiteur du site web. Les pages de couverture comportent un titre, un sous-titre, une description et une note supérieure pour transmettre le message et mettre en évidence ce qui est important.
Vous pouvez remplir les pages de couverture avec du texte de deux manières : en utilisant le panneau Contenu du bloc ou en cliquant sur le texte lors de l'édition de la page.
Vous pouvez remplir les pages de couverture avec du texte de deux manières : en utilisant le panneau Contenu du bloc ou en cliquant sur le texte lors de l'édition de la page.
Modification du texte en cliquant sur un bloc
Modification du texte dans la section Contenu d'un bloc
Vous pouvez mettre en forme le texte à l'aide du panneau de contrôle situé en haut de l'écran ou en modifiant la taille, la couleur ou d'autres paramètres du texte dans le panneau Paramètres du bloc → Typographie.
Mise en forme du texte à l'aide du panneau de contrôle supérieur
Changements de format dans le panneau Paramètres du bloc
Pour créer une couverture attrayante, consultez l'article Comment créer une couverture pour un site web, qui contient des exemples pratiques de combinaisons de textes et d'images d'arrière-plan, ainsi que le guide Créer une proposition de vente unique (USP) pour un site web, qui vous permettra de rendre votre page de couverture attrayante pour les visiteurs en moins de dix secondes.
Hauteur du couvercle
Une couverture fine a une hauteur de 60 ou 70 %, et non de 100 %. Elle a une fonction plus formelle, car l'attention de l'utilisateur se porte sur les informations qui suivent la couverture.
Pour créer une telle couverture, allez dans le champ "Hauteur" dans les paramètres du bloc. Vous pouvez définir la hauteur en pixels (par exemple 400 px) ou en unités de mesure de la hauteur de la fenêtre, en pourcentage (1vh correspond à 1 % de la zone visible). Nous recommandons de définir la hauteur en vh.
Pour créer une telle couverture, allez dans le champ "Hauteur" dans les paramètres du bloc. Vous pouvez définir la hauteur en pixels (par exemple 400 px) ou en unités de mesure de la hauteur de la fenêtre, en pourcentage (1vh correspond à 1 % de la zone visible). Nous recommandons de définir la hauteur en vh.
Couleur de la couverture : Paramètres du filtre
Comment modifier la tonalité de l'image de fond
Nous modifions la tonalité de l'image lorsque nous voulons rendre le texte de la couverture plus lisible. Pour ce faire, ouvrez le panneau Paramètres du bloc de couverture et ajustez la couleur du filtre. Vous voyez ici une image de couverture à laquelle une couleur de filtre a été appliquée. Parfois, c'est la couleur de la marque ou la couleur primaire d'un site web qui est utilisée pour la tonalité.
Nous modifions la tonalité de l'image lorsque nous voulons rendre le texte de la couverture plus lisible. Pour ce faire, ouvrez le panneau Paramètres du bloc de couverture et ajustez la couleur du filtre. Vous voyez ici une image de couverture à laquelle une couleur de filtre a été appliquée. Parfois, c'est la couleur de la marque ou la couleur primaire d'un site web qui est utilisée pour la tonalité.
Paramètres de filtrage dans le panneau Contenu du bloc
Tilda Couverture du centre d'assistance : le filtre devient progressivement orange.
Comment fondre la couleur dans la couleur du bloc suivant
Parfois, la couverture doit se fondre doucement dans le bloc suivant. Pour obtenir cet effet, la couleur du filtre final doit être réglée sur une opacité de 100 %. La couleur du filtre doit être la même que celle du bloc suivant.
Parfois, la couverture doit se fondre doucement dans le bloc suivant. Pour obtenir cet effet, la couleur du filtre final doit être réglée sur une opacité de 100 %. La couleur du filtre doit être la même que celle du bloc suivant.
En doublant la hauteur de la couverture et en appliquant ces deux paramètres simultanément, vous obtiendrez l'effet illustré ci-dessous :
Remplissage en dégradé et en couleur
Il existe deux paramètres de tonalité dans les réglages du bloc : l'opacité et la couleur. Réglez l'opacité à 100 % et sélectionnez une couleur - ce sera la couleur de la couverture.
Si vous choisissez des couleurs différentes, l'une se fondra dans l'autre en douceur.
Couverture vidéo
Vous pouvez utiliser une vidéo au lieu d'une image. Il y a deux façons de procéder.
Comment ajouter une vidéo YouTube
Téléchargez une vidéo sur YouTube ou trouvez-en une qui existe déjà. Accédez ensuite au panneau Contenu du bloc de couverture et collez le lien de la vidéo dans le champ approprié. Vous pouvez ainsi créer une couverture vidéo.
Notre entreprise
Des experts dans l'art
Art Basel organise des expositions d'art moderne et contemporain de grande qualité et se tient chaque année à Bâle, Miami Beach et Hong Kong.
Comment ajouter des vidéos WebM et MPEG-4
Vous pouvez utiliser des convertisseurs en ligne pour créer des vidéos WebM et MPEG-4 et les héberger sur votre serveur ou sur le site web du service de conversion. Par exemple, gfycat.com permet à la fois la conversion et l'hébergement.
Ouvrez le panneau Paramètres du bloc de couverture et ajoutez les liens vidéo dans les champs correspondants.
Ouvrez le panneau Paramètres du bloc de couverture et ajoutez les liens vidéo dans les champs correspondants.
Pourquoi utiliser les deux formats ?
Les navigateurs utilisent des formats différents, il n'y a donc pas de format unifié. Lorsqu'un utilisateur arrive sur votre site web, il doit voir une vidéo que son navigateur peut lire. Dans le cas contraire, la couverture apparaîtra vide.
Les navigateurs utilisent des formats différents, il n'y a donc pas de format unifié. Lorsqu'un utilisateur arrive sur votre site web, il doit voir une vidéo que son navigateur peut lire. Dans le cas contraire, la couverture apparaîtra vide.
Point important: Actuellement, il n'est pas possible de télécharger votre fichier vidéo sur Tilda, mais vous pouvez utiliser des services tiers qui fournissent un lien direct vers le fichier vidéo.
Certains des services en nuage les plus populaires fournissent également un lien direct vers un fichier. Par exemple, pour obtenir un lien direct vers un fichier vidéo sur Dropbox, vous devez remplacer le lien dropbox.com par dl.dropboxusercontent.com. Vous pouvez également télécharger le fichier vers vos services d'hébergement tels que Selectel et autres.
Certains des services en nuage les plus populaires fournissent également un lien direct vers un fichier. Par exemple, pour obtenir un lien direct vers un fichier vidéo sur Dropbox, vous devez remplacer le lien dropbox.com par dl.dropboxusercontent.com. Vous pouvez également télécharger le fichier vers vos services d'hébergement tels que Selectel et autres.
Page de couverture pour l'affichage mobile
Les écrans présentent un large éventail de rapports d'aspect et la couverture peut apparaître différemment sur différents appareils. Si les rapports d'aspect courants ne modifient pas radicalement l'image de couverture, les appareils mobiles peuvent l'altérer au point de la rendre méconnaissable. Prenez le temps d'apprendre à créer une couverture (ou tout autre bloc) adaptée aux appareils mobiles à l'aide de ce guide complet.
Pourquoi les vidéos de couverture ne sont pas lues sur les appareils mobiles
En raison des particularités des systèmes d'exploitation mobiles, les vidéos de couverture ne sont pas lues sur les appareils mobiles. Les systèmes d'exploitation mobiles désactivent la lecture automatique. Si vous avez créé une couverture vidéo à lecture automatique, n'oubliez pas d'ajouter une image dans le panneau Contenu du bloc de couverture. L'image s'affichera lorsque la vidéo ne pourra pas être lue, c'est-à-dire lorsque les visiteurs accéderont à votre site web à partir de smartphones ou de tablettes.
En raison des particularités des systèmes d'exploitation mobiles, les vidéos de couverture ne sont pas lues sur les appareils mobiles. Les systèmes d'exploitation mobiles désactivent la lecture automatique. Si vous avez créé une couverture vidéo à lecture automatique, n'oubliez pas d'ajouter une image dans le panneau Contenu du bloc de couverture. L'image s'affichera lorsque la vidéo ne pourra pas être lue, c'est-à-dire lorsque les visiteurs accéderont à votre site web à partir de smartphones ou de tablettes.
Formulaire sur une page de couverture
Vous trouverez un formulaire de saisie sur les pages de couverture suivantes : CR26 (Couverture avec un champ de saisie), CR26AN (Couverture avec plusieurs entrées), CR32 (Couverture avec un formulaire aligné à droite), CR34 (Couverture avec un compte à rebours et un formulaire d'abonnement), CR36 (Couverture avec une image ou une vidéo YouTube et un formulaire en deux colonnes)
Vous pouvez avoir un aperçu du formulaire en visitant la Bibliothèque de blocs → Couverture et en choisissant votre option préférée.
Vous pouvez avoir un aperçu du formulaire en visitant la Bibliothèque de blocs → Couverture et en choisissant votre option préférée.
Les formulaires des pages de couverture ont la même fonction et peuvent être personnalisés de la même manière que les formulaires ordinaires. Pour personnaliser votre formulaire, lisez l'article Comment configurer les formulaires de capture de données.
Ajout d'un compte à rebours
Les pages de couverture des blocs CR34 et CR35 présentent un compte à rebours jusqu'à une date précise. Cette fonction est particulièrement pratique si vous créez une page pour une promotion ou un événement.
Dans le panneau Contenu de ces blocs, vous pouvez définir la date, l'heure et le fuseau horaire de l'heure de début de l'événement.
Dans le panneau Contenu de ces blocs, vous pouvez définir la date, l'heure et le fuseau horaire de l'heure de début de l'événement.
Si la date est correctement réglée, une minuterie apparaît sur la page de couverture.
Conversion d'une page de couverture en Zero Block
Les blocs comportant des couvertures sont des exemples éprouvés de bonne conception qui s'adaptent automatiquement à tous les appareils. Mais il est parfois nécessaire d'ajouter un élément ou de créer une page de couverture personnalisée. Vous pouvez le faire à l'aide de l'éditeur Tilda's Zero Block .
De nombreux blocs de couverture peuvent être convertis en Zero Block pour une édition supplémentaire. Pour ce faire, allez dans les paramètres du bloc, faites défiler vers le bas et cliquez sur le bouton "Convert to Zero Block".
Ensuite, la couverture est convertie en Zero Block. Le format sera adapté correctement. Si vous avez déjà effectué vos modifications, elles ne seront pas sauvegardées, soyez donc prudent lors de la conversion de la couverture.
Exemple : Comment cultiver une couverture
Image verticale
Image carrée
Image horizontale étroite
Image horizontale, format 16:9
