Construire des sites Web avec Tilda (Revue complète)
A propos de l'auteur
Nick Babich est un développeur, passionné de technologie et amateur d'UX. Il a passé les 10 dernières années à travailler dans l'industrie du logiciel avec un accent spécialisé sur… Plus sur Nick …
Quel que soit le site Web que vous souhaitiez créer, que ce soit une page de destination, un magasin en ligne ou un blog personnel, votre objectif est de faire fonctionner le contenu et le design harmonieusement et jouer les uns les autres. Avec Tilda il est beaucoup plus facile d’atteindre cet équilibre harmonieux.
(Ceci est un article sponsorisé.) Le Web moderne est très unifié. Les concepteurs utilisent les mêmes modèles et, par conséquent, les sites Web créés par différentes personnes ressemblent à des clones. La seule façon de se démarquer est de trouver du contenu.
Tilda est un éditeur de site Web qui peut être utilisé pour créer des sites Web, des pages de destination, des magasins en ligne et des projets spéciaux. Les créateurs de Tilda pratiquent une philosophie du «contenu d'abord»: le contenu précède le design. En tant que grands fans de storytelling, ils ont mis au point des mécanismes de blocs pour la création de sites Web, afin que les utilisateurs ne se contentent pas de créer des pages Web, mais racontent également des histoires sur leurs produits ou services. Et il aide à transformer les visiteurs en clients plus efficacement.
Cet article raconte comment Tilda diffère des autres créateurs de sites Web et comment cela vous aide à vous concentrer sur ce que vous savez et ce que vous aimez, sans avoir à penser à des choses techniques – car vous n'avez souvent pas le temps d'apprendre des choses techniques. Voici quelques avantages clés de l'utilisation de Tilda pour créer des sites Web.
La mécanique des blocs
Lorsque les concepteurs créent des sites Web, ils doivent souvent implémenter les mêmes objets encore et encore. Cela rend non seulement le processus de conception fastidieux, mais prend également un temps précieux.
Pour résoudre ce problème, l'équipe de Tilda a créé des blocs, qui sont des modules couramment utilisés. Ce mécanisme d'édition modulaire est au cœur de la plate-forme. Lorsque vous créez un site Web, vous n'avez pas besoin d'utiliser un modèle codé en dur. Tout ce que vous avez à faire est de choisir des blocs prédéfinis qui répondent à vos besoins.
Vous avez accès à une bibliothèque de 450 blocs. Cette bibliothèque est constamment mise à jour. Pour faciliter la navigation entre les blocs, Tilda les organise en catégories. Chaque bloc d'une collection est classé par fonction (par exemple, la couverture) ou par signification (par exemple, critiques de produits, «notre équipe», etc.).
Une collection de plus de 450 blocs pour répondre à presque tous les types de contenu. ( Grand aperçu )
Tous les blocs ont été créés par des concepteurs professionnels, vous n'avez donc pas à vous soucier des propriétés de conception de base. De plus, tous les blocs fonctionnent harmonieusement ensemble, vous n'avez donc pas à vous soucier de la façon d’ajuster un bloc à un autre.
Vous pensez peut-être: «Cela signifie-t-il que tous les sites Web créés à l’aide de blocs ressemblent à des clones?» Non. Tilda vous donne beaucoup de contrôle sur les détails. Presque tout dans un bloc est réglable.
Tilda vous permet de personnaliser les blocs en utilisant les zones de contenu et de paramètres. Cliquez sur le bouton "Contenu" pour modifier toutes les informations contenues dans un bloc. Le bouton "Paramètres" vous permet d'ajuster différents paramètres, tels que l'apparence visuelle d'un bloc. Si vous souhaitez modifier le texte, cliquez dessus et modifiez-le directement à l'écran. Pour remplacer une image, faites-la simplement glisser depuis le dossier de votre ordinateur.
Les principaux avantages de l'utilisation des blocs sont les suivants:
Readability Tilda met un fort accent sur la typographie. L’équipe de Tilda prend en charge tous les éléments typographiques tels que la longueur de ligne, l’espacement et la taille des polices dans des proportions harmonieuses. Chaque bloc est parfaitement équilibré pour rendre la lecture agréable.
Réactivité Il n'est pas nécessaire de passer du temps à optimiser les pages pour tablettes et smartphones.
Apparence visuelle L'apparence des blocs peut être modifiée dramatiquement: la taille des textes et des images, les boutons – vous pouvez tout faire vous-même dans l'onglet "Paramètres".
Résoudre des problèmes complexes En utilisant des blocs, vous pouvez résoudre des tâches complexes telles que la collecte d'applications ou la vente
Zero Block
Quelle que soit la richesse d’une collection de blocs par défaut, certains utilisateurs voudront toujours créer quelque chose de vraiment unique. Précisément pour ce cas, Tilda fournit un éditeur Zero Block : un éditeur intégré pour créer vos propres blocs. Considérez-le comme un éditeur graphique pour votre site Web qui vous permet d'explorer votre créativité: ajoutez du texte, une forme, un bouton, une image, une vidéo, une info-bulle, un formulaire, et même insérez du code HTML; déplacer, transformer et masquer chaque élément de la toile. Vous pouvez commencer à zéro et créer de nouveaux blocs uniques!
Tout ce que vous devez faire pour commencer à utiliser l'éditeur est de cliquer sur le bouton "Zéro" sur une page nouvellement créée. Zero Block vous permet de gérer tous les détails de votre conception. Vous pouvez changer les options de style pour les objets, changer leur position, changer leur taille et bien plus encore.
Voici à quoi ressemble ce processus:
En utilisant Zero Block, il est possible de transformer une idée prometteuse en réalité en concevant un bloc sur mesure. ( Grand aperçu )
Tout comme les blocs ordinaires, les blocs zéro sont adaptatifs. Tilda propose cinq modes pour adapter le contenu à différentes tailles d'écran. Vous pouvez prévisualiser un design dans les modes d'écran suivants:
tablette mobile (mode portrait),
(mode paysage), tablette
(portrait), tablette
(mode paysage),
Zero Block peut être utilisé avec des blocs existants. Il est possible de convertir un bloc existant en un bloc zéro et de le modifier comme vous le souhaitez.
Effets animés
L'animation apporte une sensation d'interactivité à l'expérience utilisateur. Correctement incorporée, l’animation donne vie aux éléments d’un site Web. Il y a beaucoup de manières différentes dont l'ajout de mouvement peut bénéficier aux utilisateurs. Par exemple, vous pouvez utiliser l'animation pour attirer l'attention de l'utilisateur sur un objet particulier (par exemple en attribuant un effet animé à un bouton d'appel à l'action pour attirer l'attention de l'utilisateur sur cet élément) ou à des fins purement esthétiques (par exemple: pour créer un sens de l'artisanat.
Tilda vous permet de créer de superbes pages interactives sans aucun code. Tilda propose trois types d’animation, que nous allons parcourir maintenant.
1. Animation de base
Dans tous les blocs standard, vous pouvez ajuster l'apparence de tout élément pour rendre le site plus vivant et intéressant. Par exemple, vous pouvez ajouter un effet animé à un titre de couverture.
Les animations fonctionnent dans tous les blocs, sauf le curseur. Pour ajouter un effet animé, il vous suffit de sélectionner l’effet souhaité dans les paramètres du bloc.
2. Extended Animation In Zero Block
Avec Tilda, vous pouvez également créer une animation pas à pas où tout élément de la page peut faire partie d'une séquence de mouvements. Tilda vous permet de définir la trajectoire des éléments. Vous pouvez implémenter des comportements complexes pour les éléments de la page et ajouter une interactivité maximale.
Un exemple d'animation pas à pas ( Grand aperçu ) [19659008] En plus des effets d'apparence, vous pouvez ajuster la parallaxe et la fixation. Parallax permet aux objets de se déplacer à des vitesses différentes lorsque les utilisateurs font défiler une page. La fixation vous permet de fixer un objet sur l'écran pendant le défilement. Vous pouvez jouer avec les paramètres suivants: vitesse, durée, délai, déclencheurs d'événement pour démarrer l'animation. Donnez vie aux éléments avec l'animation!
Voici une vidéo rapide qui montre comment créer un effet animé complexe
3. Blocs spécialement conçus
Ces blocs sont conçus pour ajouter des effets d'animation. Vous pouvez également créer une animation à l'aide de blocs spéciaux, tels que:
un effet de machine à écrire,
un effet de galaxie pour les couvertures,
un diaporama animé pour les couvertures
] et les blocs sonnent assez similaires, ils sont différents. Les modèles sont destinés aux cas d'utilisation courants (tels que les pages de destination pour les entreprises, les pages d'événements, les blogs, etc.); ils peuvent être utilisés comme base et modifiés ultérieurement en fonction de votre propre style. Choisissez un modèle correspondant le mieux à votre projet et personnalisez-le en fonction de vos préférences. Contrairement à de nombreux autres constructeurs de sites Web, Tilda ne force pas les utilisateurs à sélectionner un modèle dans une liste. Tilda fournit des modèles prêts à l'emploi. Créer des modèles pour les pages de destination, les boutiques en ligne, etc. Gagnez du temps en utilisant des modèles de magasin prédéfinis. ( Grand aperçu )
Il est également possible de concevoir votre propre modèle. Il vous suffit de concevoir votre propre page et de l'enregistrer en tant que modèle. Vous pouvez partager le modèle avec d'autres.
Optimisation SEO
Le Web a plus d'un milliard de sites Web et ne cesse de croître. Tous ces sites sont en concurrence pour les visiteurs. Dans le marché concurrentiel d'aujourd'hui, l'optimisation des moteurs de recherche (SEO) améliore le classement d'un site Web dans les résultats de recherche. Il est plus important que jamais et il est devenu une tâche cruciale pour les concepteurs de sites Web. une plate-forme conviviale pour les moteurs de recherche ; Les sites Web créés avec Tilda sont automatiquement indexés par les moteurs de recherche. Un fichier robots.txt (contenant des instructions spéciales pour les robots des moteurs de recherche) et un fichier sitemap.xml (répertoriant les URL du site Web) sont générés automatiquement.
peut améliorer les résultats de la recherche à l'aide de paramètres spéciaux:
Vous pouvez gérer les paramètres de titre et de description et définir des balises méta pour les objets HTML (par exemple, alt tags).
h2 et h3 . L'en-tête h1 est le plus important pour les moteurs de recherche.
Définissez les redirections https ou http, www ou non-www et 301 (une redirection 301 améliore le référencement lorsque vous modifiez une URL). Les utilisateurs ont accès au «Webmaster Dashboard» de Tilda. Cet outil teste un site Web contre les recommandations de base des moteurs de recherche et identifie les erreurs susceptibles d'affecter l'indexation. L'outil est disponible dans «Paramètres du site» → «Analytics and SEO» → «Tilda Webmaster Dashboard». Les utilisateurs peuvent cliquer sur «Vérifier les pages» dans «Erreurs et recommandations critiques» pour voir quelles pages nécessitent un travail. Tilda Webmaster Dashboard, un outil de référencement. ( Grand aperçu )
Si vous souhaitez des recommandations spécifiques sur l'optimisation SEO, envisagez de lire le guide de SEO par Tilda .
Fonts
95% des informations sur le Web sont en langage écrit . Comme l’indique Oliver Reichenstein dans son article «Le Web Design est à 95% typographique»: L’optimisation de la typographie optimise la lisibilité, l’accessibilité, la convivialité (!), L’équilibre graphique global.
Police Geometria, conçue par Gayaneh Bagdasaryan et Vyacheslav Kirilenko, avec la permission de Rentafont . Gratuit pour les utilisateurs de Tilda. ( Grand aperçu )
J'ai déjà mentionné que Tilda est fortement axée sur la typographie, mais il convient de dire quelques mots sur la collection de polices. Les polices ont un impact direct sur l’esthétique d’un site Web. Les utilisateurs de Tilda ont accès à une collection de polices enrichie. Tilda s'intègre avec Google Fonts et Typekit. Les utilisateurs peuvent utiliser des polices de caractères distinctes telles que Futura, Formular, Geometria, Circe, Kazimir et autres fournies par Rentafont .
Formulaires de collecte de données
créer et fidéliser les clients. Et l'un des principaux outils permettant aux entreprises de travailler avec ces clients est forms . Les formulaires permettent aux clients d'envoyer des applications et des commentaires, ou de s'abonner à une liste de diffusion. À l'aide de Tilda, vous pouvez créer des formulaires verticaux, horizontaux, contextuels et pas à pas. La bibliothèque a une catégorie distincte avec des options de conception prédéfinies.
Dans les formulaires verticaux, vous pouvez ajouter un nombre illimité de champs. Pour chaque champ, vous pouvez choisir son type: liste déroulante, case à cocher, numéro de téléphone, pièce jointe, etc. Tida fournit quelques champs de formulaire spéciaux, tels que «Split» et «Calculator». Le champ «Split» vous permet de diviser la forme en quelques étapes. Le champ «Calculatrice» vous permet de calculer le coût en utilisant une formule spécifique et d’indiquer le coût pour le visiteur avant de l’envoyer. Cela peut être extrêmement utile pour les sites de commerce électronique (lors de l'achat de produits).
Tilda s'intègre à divers services de réception de données. Il vous aide à résoudre les problèmes courants liés à la collecte de données, tels que:
Connexion d'e-mails, de messagers Telegram ou Slack, Trello ou Google Table pour poursuivre rapidement de nouvelles applications.
formez sur Tilda et connectez-le aux listes de diffusion de MailChimp, UniSender, SendGrid ou GetResponse.
Collecte de données sur les commandes en ligne dans un système CRM Tout ce que vous devez faire pour commencer à recevoir les données est de lier votre compte.
Tilda possède un constructeur intégré pour les e-mails qui vous permet de créer un e-mail attractif à partir de blocs en un rien de temps. Vous pouvez connecter les services MailChimp, UniSender, SendGrid et envoyer des messages directement depuis l'interface de Tilda. Si vous utilisez d'autres services de messagerie, le générateur de courrier électronique peut toujours vous être utile. Vous pouvez télécharger le code HTML d'un modèle créé dans Tilda et l'utiliser dans votre service.
Analytics intégrés
Tilda possède des outils d'analyse intégrés qui montrent les mesures de base de l'efficacité d'un site Web: vues de page, conversions de pages, engagement des visiteurs, etc. Ces indicateurs de performance clés répondent aux besoins de base des utilisateurs. Il est possible d'afficher des détails de haut niveau (performances générales) et des données spécifiques à une page.
permet l'analyse d'un site Web sans outils tiers. ( Grand aperçu )
Les utilisateurs de Tilda peuvent afficher les balises source, support et campagne dans le tableau UTM. Si vous cliquez sur la balise elle-même, vous serez redirigé vers une page où vous pourrez voir les statistiques liées à ce paramètre, telles que les visiteurs, les sessions, les prospects et une vue détaillée par jour.
des cas, vous avez parfois besoin de plus de données. Dans ce cas, vous devrez peut-être passer à Google Analytics. Tilda vous permet de connecter Google Analytics et Google Tag Manager pour surveiller le trafic de votre site Web. Vous n'avez pas besoin de coder pour ajouter des compteurs Google à vos pages. il suffit d'ajouter votre compte aux paramètres de la page lors de la configuration du suivi Analytics. Contrairement aux autres types de sites Web, les concepteurs de sites Web doivent non seulement créer un design de qualité mais également s’intégrer aux passerelles de paiement. La bonne nouvelle est que Tilda dispose d’outils de commerce électronique intégrés qui vous permettent de créer de petites boutiques en ligne en quelques minutes, pas en quelques heures ou en quelques jours.
Panier
Le widget panier est universel et vous pouvez l'utiliser pour vendre des biens et des services. Le panier est intégré au formulaire de commande que vous pouvez personnaliser comme vous le souhaitez. Ajoutez simplement les champs dont vous avez besoin et vous obtiendrez les informations dont vous avez besoin.
Le formulaire de commande est très convivial. Les visiteurs pourront ajouter un certain nombre de produits et modifier la quantité d'un produit. Vous pouvez modifier le formulaire de commande où vous le souhaitez – par exemple, vous pouvez ajouter différentes options de livraison et / ou un champ spécial pour les codes promotionnels. La somme finale est calculée automatiquement. Après un paiement réussi, le client recevra un courrier électronique contenant les détails de la commande (cette fonctionnalité est configurée dans les paramètres du système de paiement).
Activez le bloc de panier dans la catégorie «Magasin».
] Recevoir un paiement en ligne peut sembler être un problème. Mais avec Tilda, vous n’avez pas à vous inquiéter. La mise en place de passerelles de paiement est très simple. Il vous suffit de choisir votre mode de paiement préféré: carte de crédit, PayPal ou Stripe. Les détails de la commande seront envoyés à votre courrier électronique, Google Drive ou CRM – vous pouvez connecter n'importe quel service de réception de données. Grand aperçu )
Fonctions pour développeurs Web
Tilda fournit quelques excellentes fonctionnalités pour les développeurs Web:
API Tilda pour l'intégration de sites Web
Code sur mesure Vous pouvez toujours ajouter des fonctionnalités avancées à votre site Web avec du code . Il est facile d’ajouter du code HTML, JavaScript ou CSS sur mesure à votre site Web Tilda. Vous pouvez ajouter du code HTML à l'aide du bloc «Insérer HTML» ou incorporer n'importe quel type de code, y compris les balises script et style .
Exportation de données t voulez-vous dépendre de Tilda et souhaitez héberger votre site Web sur vos serveurs? Aucun problème. Tout ce que vous faites sur Tilda peut être facilement exporté dans une archive. Pour exporter votre code, allez dans «Paramètres du projet» → «Exporter». L'archive inclura le code HTML statique et tous les fichiers, tels que les images, CSS et JavaScript. Le code exporté est prêt à être utilisé. Pour exécuter le site Web, il vous suffit de décompresser l'archive et de copier les fichiers sur votre serveur.
Plate-forme de publication
Tilda n'est pas qu'un créateur de sites Web. C’est également une puissante plate-forme de publication en nuage. Les sites Web créés avec Tilda peuvent être publiés sur les serveurs de Tilda ou exportés vers le vôtre. Vous trouverez ci-dessous quelques avantages de l’utilisation de la plate-forme de publication de Tilda.
Hébergement non nécessaire
Avec Tilda, vous n’avez pas besoin de payer pour l’hébergement. Tilda garantit une vitesse de chargement élevée et une protection DDoS.
Optimisation de la vitesse de sortie Out Of The Box
La vitesse de chargement élevée est fournie par le réseau de distribution de contenu (CDN), utilisé pour stocker les images. Tous les sites Web créés sur Tilda ont le chargement paresseux activé par défaut. Cela permet de télécharger le contenu très rapidement, même sur les appareils mobiles.
Connecter votre nom de domaine
L'affectation d'une adresse unique à votre site Web est simple. Il suffit d'aller dans "Paramètres du projet" → "Domaine", et de mettre votre nom de domaine dans le champ "Domaine personnalisé".
Configurer HTTPS
Tilda fournit un HTTPS gratuit à ses utilisateurs. L'installation d'un certificat SSL est relativement facile. Allez dans "Paramètres" → "Analytics and SEO" → "Panneau Webmaster Tilda" → "Paramètres HTTPS", et générez votre certificat gratuit.
Who Tilda Is For
Maintenant que vous savez ce qu'est Tilda et ses caractéristiques a, il est temps de discuter de la façon dont les concepteurs Web peuvent utiliser cet outil. Selon l'équipe de Tilda, l'outil est utilisé à des fins diverses:
Création de sites Web pour les entreprises Il peut s'agir d'un site Web d'entreprise ou d'une petite boutique en ligne.
personnes à une conférence, présente un nouveau produit ou décrit un projet spécial
Créer un blog d'entreprise ou un magazine en ligne Il est possible de créer une présentation visuelle exceptionnelle pour un article ou une étude de cas à l'aide de Tilda. une hypothèse Créez un site Web qui sert de preuve de concept. Par exemple, créez une page de destination et vérifiez si des personnes sont intéressées par le produit ou le service.
Apprentissage des compétences Web Tilda éduque les concepteurs en fournissant des exemples sur la manière de créer les choses.
L'équipe de Tilda rassemble également les meilleurs exemples de sites Web créés à l'aide de l'outil sur sa page d'inspiration . Voici quelques sites Web inspirants conçus avec Tilda.
Vous pouvez également lire ce que les gens disent à propos de Tilda sur Capterra et Product Hunt (Tilda est devenue le produit du jour à 2016)
Rapports de tendances
Tilda vous aide à afficher des images, des vidéos et du texte de haute qualité dans une galerie entièrement personnalisable. «Visual Trends 2018» par Deposit Photos est un excellent exemple de la façon intéressante de présenter des informations visuelles.
Lorsqu'il est question de créer des pages Web pour des événements, il est essentiel de présenter de nombreuses informations de manière logique et facile à analyser. Check out UX Sofia 2018 un site Web pour une conférence UX. Il combine différentes informations, telles que les principaux entretiens et ateliers, des informations sur les haut-parleurs et l'emplacement, dans des blocs faciles à analyser.
Le but d'une page de destination est de convertir les visiteurs en clients. De nombreux facteurs peuvent influer sur les conversions, mais il est clair que des pages de destination mieux conçues surpassent les concurrents. Vérifiez la page d’accueil de Metric.ai qui contient un outil qui estime la rentabilité d’un projet.
Dans le monde moderne, la première interaction entre un client et une entreprise se fait en ligne. Les gens visitent un site Web et décident s'ils souhaitent faire affaire avec cette société. Le design joue un rôle essentiel dans la décision. Lorsqu'un site Web a l'air frais et moderne, il y a de meilleures chances que les gens travaillent avec l'entreprise. Quantum Attorneys utilise beaucoup d'effets visuels populaires (couleurs vives, duotones, typographie attirant l'attention) pour créer une sensation vraiment unique pour les visiteurs.
Les gens viennent souvent sur un site Web pour trouver l'inspiration. L'inspiration peut prendre plusieurs formes. Mais parfois, un design relativement simple peut susciter beaucoup d'émotions. L'espace blanc est l'un des aspects les plus importants du design. Découvrez le projet de Buro247 intitulé Silent Rebellion Fashion. L'esthétique noir et blanc associée à l'espace blanc crée une sensation unique.
Le free plan permet vous créez un site Web en utilisant une collection de 50 blocs fondamentaux. Ce plan a quelques limitations: Vous ne pouvez pas connecter votre propre domaine, et un élément de l'interface utilisateur indiquant «Made on Tilda» sera placé sur toutes les pages par défaut.
Le plan personnel est de 10 $ par mois. Ce plan vous permet de créer un site Web et d'accéder à la collection complète de blocs. Il vous permet également de configurer un domaine personnalisé. Il n’ya pas de frais supplémentaires lorsque vous créez un site Web de commerce électronique.
Le plan d’affaires est de 20 $ par mois. Il inclut tout dans le plan personnel mais vous permet également de créer jusqu'à cinq sites Web et d'exporter le code source.
Conclusion
Quel que soit le site Web que vous souhaitez créer, qu'il s'agisse d'une page de destination, blog votre objectif est de faire en sorte que le contenu et le design fonctionnent harmonieusement et se jouent mutuellement. Avec Tilda, il est devenu beaucoup plus facile d'atteindre cet équilibre harmonieux.
Inscrivez-vous sur la plate-forme et essayez vous-même toutes les fonctionnalités.
Grand aperçu 
Grand aperçu )
(ms, ra, al, yk , il)