5 astuces de programmation Squarespace pour développer votre audience | Molly Suber Thorpe | Skillshare
Menu
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

5 astuces de programmation Squarespace pour développer votre audience

teacher avatar Molly Suber Thorpe, Calligrapher & Designer

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Introduction et aperçu

      3:25

    • 2.

      Rediriger un formulaire sur mesure

      8:50

    • 3.

      Créer un lien de téléchargement

      3:05

    • 4.

      Capture de courriel téléchargeable

      5:06

    • 5.

      Code de coupon de capture

      4:38

    • 6.

      Capture de courriel

      3:30

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

1 899

apprenants

4

projets

À propos de ce cours

+ Aperçu de cours :

Dans ce cours, je vous partagerai 5 conseils de programmation précieux pour capturer les adresses e-mail des visiteurs de votre site et promouvoir des documents gratuits, des codes de coupon et d'autres contenus exclusifs.

Si vous faites un type de marketing en ligne, vous savez probablement qu'une liste de courriel solide est parmi les outils les plus puissants. Beaucoup de accent est mis sur la circulation sur votre site Web, mais une fois que les visiteurs sont là, vous voudrez capturer leurs détails pour le marketing futur.

Les sites Web de Squarespace disposent de certains des modèles les plus élégants et conviviaux sur place, et ils sont particulièrement populaires auprès des freelances créatifs pour cette raison. Cependant, les widgets et blocs utilisés pour créer des sites Squarespace exigent des workarounds créatifs pour obtenir juste le niveau de personnalisation que vous voulez.

Toutes les 5 techniques que je vous enseigne sont possibles avec seulement une connaissance de travail très basique de Squarespace, et seulement deux d'entre elles nécessitent un code personnalisé - mais n'ayez crainte ! Je vous donne littéralement le code exact dont vous avez besoin pour copier/coller, afin que le processus soit entièrement étouffé.

_________________________

+ Compétences et sujets cités :

  • Redirigez les visiteurs à une page de remerciement personnalisée lorsqu'ils soumettent votre formulaire de contact. C'est une fonction importante qui manque dans les offres Squarespace actuelles, mais mon contournement vous permettra de capter l'attention de votre public plus longtemps. Une page de redirection personnalisée peut comprendre une simple note de remerciements, de publicités pour des produits ou des invitations à vous suivre sur les réseaux sociaux.
  • Offrez du contenu gratuit et téléchargeable à votre audience par des boutons et des liens de texte.
  • Capturez les adresses e-mail des visiteurs en échange de téléchargements gratuits et/ou de codes de réduction. (C'est un excellent hack, et un moyen facile d'inciter les visiteurs à s'inscrire à votre newsletter ! )
  • Créez le texte dans votre formulaire pour fenêtres pop-up et les champs de confirmation de newsletter, pour un look professionnel conforme à l'apparence de votre site.
  • Utilisez une page de couverture (atterrissage par c.a.) pour offrir des téléchargements ou des coupons gratuits en échange de s'inscrire par e-mail, et redirigez ces soumissions de formulaire vers une page de remerciement personnalisée

_________________________

+ Pré-requis :

  • Un site de Squarespace, il peut être très simple, ou même un travail en cours !
  • Connaissance de travail très basique de l'arrière extrémité de Squarespace, vous n'avez pas besoin d'être un pro de Squarespace ou d'avoir une expérience avec le codage.

==> Si vous avez besoin de connaître les bases de l'arrière de Squarespace avant de suivre ce cours, je vous suggère ce cours : https://skl.sh/3RUa39m

_________________________

+ Liens : Voici des liens mentionnés tout au long de ce cours.

_________________________

+ Consultez mon…

  1. Livres : https://mollysuberthorpe.com/books
  2. Freebies : https://mollysuberthorpe.com/newsletter
  3. Produits : https://mollysuberthorpe.com/shop

+ Suivez mon Instagram et marquez-moi dans vos projets : @mollysuberthorpe

Rencontrez votre enseignant·e

Teacher Profile Image

Molly Suber Thorpe

Calligrapher & Designer

Top Teacher

I design custom lettering for brands and individuals, Procreate brushes for artists, fonts for designers, and freelancing tools for creatives. I’m the author of four books for lettering artists and teach the craft both online and in person.

 

 

I’m lucky to have worked with some awesome clients over the years, including Google Arts & Culture, Martha Stewart, Fendi, and Michael Kors. My work and words have been featured in such publications as The Guardian, The Wall Street Journal, Martha Stewart Weddings, LA Times, and Buzzfeed.

I love connecting with my students so please please share your projects with me. If you do so on Instagram, tag me with @mollysuberthorpe so I’m sure to see it!&nb... Voir le profil complet

Level: All Levels

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Introduction et Aperçu: Bienvenue à cinq hacks de programmation Squarespace pour augmenter votre audience. Si vous avez un site e-commerce, portfolio en ligne ou un blog, alors vous savez probablement qu' une liste de courrier électronique robuste est parmi les outils marketing les plus puissants. Beaucoup d'entre nous incitent notre public à s'abonner en proposant des téléchargements gratuits, des codes promo et des offres exclusives auxquelles seule notre liste de diffusion est éligible. Les sites Web de Squarespace ont certains des modèles les plus élégants et les plus conviviaux, et ils sont particulièrement populaires auprès des indépendants créatifs pour cette raison. Parfois, cependant, les widgets et les blocs utilisés pour construire les sites nécessitent de contournement créatives pour obtenir uniquement la fonction et le niveau de personnalisation que vous voulez. Dans ce cours, je vais partager cinq conseils de programmation inestimables pour capturer les adresses électroniques des visiteurs de votre site et promouvoir des documents gratuits et des offres exclusives. Toutes ces techniques sont possibles avec seulement une connaissance très basique de Squarespace, et elles fonctionnent avec tous les modèles Squarespace. Seulement deux des techniques nécessitent un code personnalisé, mais je vais littéralement vous donner le code exact dont vous avez besoin pour copier et coller afin que le processus soit entièrement infaillible. Les techniques spécifiques que je vais vous enseigner comprennent, comment ajouter du code à votre formulaire de contact, pour rediriger les visiteurs à habituer page de remerciement. Les personnes qui vous contactent par le biais de votre site ou d'un public captif. vous respectez le formulaire de contact par défaut de Squarespace, fenêtre de confirmation, vous perdez l'occasion parfaite de partager plus avec eux sur votre entreprise . Je vais également vous montrer comment offrir contenu téléchargeable gratuit à votre public via des boutons et des liens texte. Je vais vous montrer comment capturer les adresses e-mail des visiteurs en échange de téléchargements et de codes promo. Je vais également vous montrer comment styliser le texte dans fenêtres contextuelles de votre formulaire et les champs de confirmation de votre newsletter, ce qui ajoutera un aspect professionnel cohérent à votre site et sera cohérent avec votre image de marque. Enfin, je vais vous montrer comment vous pouvez utiliser une page de couverture pour proposer des téléchargements gratuits ou des coupons en échange inscriptions par e-mail, puis rediriger ces formulaires vers la page de remerciement personnalisée traçable que vous aurez faite à l'étape 1. Pour suivre ce cours, vous devez déjà avoir un compte Squarespace, et au moins le début d'un site Web. Il peut être aussi simple site cependant, même un travail en cours. Vous aurez également besoin de connaissances de base sur le back-end de Squarespace. Cependant, vous n'avez pas besoin d'être un pro Squarespace ou d'avoir une expérience du codage ou de la programmation. Si vous avez besoin d'apprendre les bases de Squarespace avant de suivre ce cours, je recommande fortement le cours Skillshare de Squarespace intitulé Personal Branding Essentials. Vous pouvez trouver le lien en direct vers ce cours Squarespace dans la section ci-dessus de cette classe. Cette classe est axée sur la mise en réseau. En décidant de ce que devrait être le projet de classe, j'ai pensé qu'il vaudrait mieux commencer qu'avec vos pairs. Aujourd'hui, je vais vous demander de créer une page de remerciement personnalisée comme décrit dans la toute première vidéo de leçon. Vous allez configurer une redirection vers cette page à partir de n'importe quel formulaire de votre site. Ensuite, vous publierez une capture d'écran de cette nouvelle page de remerciement personnalisée et partagerez un lien vers votre site. Soit la page de remerciement elle-même, soit le formulaire de contact que les visiteurs doivent soumettre pour voir votre nouvelle page. Bien sûr, si votre site n'est pas encore en direct sur Internet, c'est bon. Vous n'avez pas besoin de partager un lien en direct. Mais si vous en avez un, ce serait génial de partager et de réseauter avec vos collègues étudiants. 2. Rediriger la forme à la page personnalisée de remerciements: Par défaut, lorsque les utilisateurs soumettent un formulaire Squarespace Contact, le formulaire lui-même se transforme en message de remerciement dès que le bouton Soumettre est enfoncé. La raison pour laquelle je n'aime pas cela est que, A, je veux ajouter des appels à l'action aux utilisateurs qui me contactent, comme leur demande de télécharger quelque chose, visiter ma boutique, suivre mon blog, etc. B, quand il s'agit de référencement et d'analyse, Je ne peux pas suivre les utilisateurs qui soumettent mon formulaire de contact, par conséquent, je ne peux pas capturer cette audience. Si votre utilisateur de pixel Facebook, par exemple, vous ne pouvez pas installer un pixel pour suivre les utilisateurs qui soumettent réellement vos formulaires, vous ne pouvez suivre que les utilisateurs qui visitent la page sur laquelle le formulaire est affiché. Pour beaucoup d'entre vous, ma première raison d'avoir une jolie page de redirection est une raison suffisante pour le faire, mais si le SEO est très important pour vous et que vous faites beaucoup de publicité Facebook et utilisez le pixel Facebook, alors cette technique est un must. Ceci est ma page actuelle, qui est la page vers laquelle les visiteurs sont redirigés après avoir soumis le formulaire sur ma page de contact. Vous pouvez voir que je l'ai gardé assez simple. J' ai juste un graphique qui exprime mes remerciements, une note confirmant que le message a été envoyé, puis un certain nombre d'appels à l'action. Ici, par exemple, je partage un lien vers un nouveau guide de ressources en ligne que j'ai créé pour lettrer les artistes, liens vers ma chaîne Skillshare, mon Instagram, mes livres, et un appel à l'action pour m'inscrire à mon bulletin d'information d'atelier. Ces pages de remerciement sont un endroit vraiment idéal pour intégrer un ou plusieurs appels à l'action, parce que votre audience sur cette page sera toujours des utilisateurs qui ont eu assez d'intérêt pour vous ou votre site Web pour vous avoir contacté pour commencer. Il s'agit d'un public privilégié pour rappeler toutes les fonctionnalités et les choses que vous offrez. Que ce soit un e-shop ou un blog, du contenu téléchargeable, Instagram, page Facebook, ce que vous avez, utilisez cette page au maximum pour atteindre les personnes qui ont déjà exprimé de l'intérêt pour vous et votre site Web. Même si j'ai déjà cette page de remerciement, je vais en commencer une nouvelle pour pouvoir vous guider à partir de zéro. Voici donc le backend de mon site web. Commencez par aller dans la section Non lié de votre site, en cliquant sur le signe plus pour créer une nouvelle page. Je vais sélectionner une simple page blanche ici, mais techniquement, vous pouvez choisir l'une de ces options. Je donne le titre de cette nouvelle page, « Merci ». La mise en page que vous pouvez choisir dépend de vous, mais je veux que cette page soit simple, donc je vais sélectionner cette première conception minimaliste, puis cliquer sur Démarrer l'édition. Je vais rapidement faire quelques personnalisations ici. Maintenant que la maquette de la page de remerciement est terminée, je dois l'incorporer dans le formulaire de page de contact. Donc, je viens ici à ma page Contact, nous pouvons également y accéder d'ici dans la barre latérale de mes pages. Je fais défiler jusqu'à mon formulaire, j' édite la page, puis j'édite le formulaire lui-même. Commencez par passer à l'onglet Avancé. Cette zone Post-Soumettre Message vous permet de saisir n'importe quel type de message comme merci dans le mode normal par défaut pour Squarespace. C' est là que lorsque quelqu'un soumet le formulaire, le formulaire lui-même se transformera en une petite note de remerciement et ce que vous écrivez ici est ce qu'il va voir. Mais pour l'instant, nous le gardons vide, et nous défilons ici jusqu'à Post-Soumettre HTML. Maintenant, tout le but de ce hack ou de la solution de contournement que je vous montre arrive juste ici. Au lieu d'écrire un message dans cette boîte, nous allons en fait entrer le code qui va forcer le site Web à rediriger vers une nouvelle page de votre site Web lorsque quelqu'un clique sur « Soumettre ». Cette nouvelle page, bien sûr, sera la page de remerciement que nous venons de faire. Avant que nous puissions réellement créer ce code, je vais annuler de cela, mes modifications parce que je n'ai pas fait de changements cruciaux tout à l'heure. Annuler le mode d'édition de cette page Contact. Faites défiler vers le bas jusqu'à ma nouvelle page de remerciements que je viens de faire, et je vais cliquer sur ce bouton d'engrenage pour les paramètres. C' est ce que j'ai besoin de voir. J' ai besoin de regarder l'URL slug pour cette page. Cela signifie que l'URL directe de cette page Web particulière est l'URL/remerciements de mon site Web. Si je viens ici à une nouvelle fenêtre de navigateur, vous pouvez voir que cela fonctionne très bien déjà. Parce que nous avons créé cette page et l'avons mise dans la section non liée de notre panneau de pages, cela signifie qu'elle n'est pas directement liée à n'importe où sur votre site Web, mais qu'elle est toujours une page en direct sur Internet. C' est exactement ce dont nous avons besoin pour pouvoir rediriger les gens vers cette page sans avoir de lien vers celle-ci sur le site. Rappelez-vous ce qu'est votre limace d'URL et nous passons à l'étape suivante. Retour ici dans la page Contact. Encore une fois, j'édite la page, édite le formulaire Contact. En arrivant ici à Avancé, faisant défiler vers le bas jusqu'à Post-Soumettre HTML. Vous n'avez pas besoin d'être capable d'écrire du code pour ce faire. J' ai rendu ça super facile pour toi. Il y a des sites Web impressionnants qui génèrent du code open source pour beaucoup de fonctions couramment utilisées. La fonction dont nous avons besoin aujourd'hui est une simple redirection d'URL. J' ai déjà trouvé pour vous un générateur de redirection. J' ai l'URL juste ici sur l'écran pour vous, mais aussi le lien en direct est dans la section à propos de cette classe. Pour l'URL vers laquelle nous devons rediriger, je veux que vous indiquiez l'adresse web complète pour le site que nous venons de créer. Dans mon cas, c'est ceci, le pluralbellestudio.com/remerciements. Une fois que vous faites cela, il suffit de cliquer sur ce bouton, « Générer le code de redirection pour moi. » Maintenant, copiez ce code entier et collez-le. Donc, je le copie ici, puis je le colle ici dans le champ HTML Post-Soumettre. Parce que c'est un joli code gratuit, les auteurs ont inclus un peu de publicité pour leur site Web. Je suis bien avec ça, donnez du crédit là où c'est dû. Le crédit n'apparaîtra nulle part sur le côté visible de votre site, donc il n'y a absolument rien à craindre. Si pour une raison quelconque vous ne pouvez pas accéder à ce code, je l'ai placé dans un document Google Drive, auquel vous pouvez accéder et copier, puisque c'est du code open source, sur le lien que j'ai sur l'écran ici, ou dans le lien en direct que j'ai inclus dans la section à propos de cette classe. Le générateur de code astucieux a inclus mon URL unique à trois points différents dans ce code, donc quand j'appuie sur « Appliquer » et puis enregistrer ma page, cela devrait fonctionner. Maintenant, c'est super important. Malheureusement, dans le backend de Squarespace, vous ne pouvez pas tester les champs de soumission de formulaire comme celui-ci. Donc on va devoir aller au front de mon site web. Je veux aller à la page Contact. Je ne suis pas dans le backend, je suis sur mon site web réel. Je sais que parce que ici dans le backend, je suis à mon URL pluralbelle.squarespace.com, et ici sur mon URL personnalisée réelle, pluralbellestudio.com. Donc je viens ici sur mon vrai site et je vais juste mettre un faux petit message et appuyer sur « Soumettre ». Comme la magie, j'ai maintenant été redirigé vers cette nouvelle page de remerciements que j'ai créée il y a une minute. 3. Créer un lien de téléchargement: Une fonctionnalité de vue très courante ces jours-ci est d'offrir un téléchargement gratuit aux visiteurs de votre site. Squarespace facilite l'ajout d'un lien ou d'un bouton pour télécharger un fichier. Dans la vidéo suivante, je vais vous montrer comment créer un lien de téléchargement en échange de la capture des visiteurs, de l' adresse e-mail et d'autres informations de contact. Mais d'abord, assurez-vous que vous savez comment créer un lien qui télécharge un fichier de manière simple et traditionnelle dans Squarespace. Ici, je suis sur l'un de mes sites Web, calligrafile.com, où j'offre fréquemment des téléchargements gratuits aux lecteurs du blog. Dans ce billet particulier, nous avons fait équipe avec le magazine majuscule pour donner un fichier PDF imprimable de leur belle affiche abecédaire. En cliquant sur ce bouton, les visiteurs peuvent télécharger un PDF haute résolution de qualité d'impression de cette affiche, qui s'ouvre dans une nouvelle fenêtre et permet aux gens de zoomer, d'imprimer ou de télécharger. Comment ai-je fait ça ? Eh bien, c'est vraiment assez simple. Je vais en faire un autre juste pour qu'on puisse tous jeter un oeil à la façon dont je l'ai fait. Commençons par éditer cette page. Je vais ajouter ce bouton de téléchargement ici. Je vais cliquer pour ajouter un nouveau widget et faire défiler vers le bas jusqu'au bouton, Je vais titre ce téléchargement gratuit, et le lien de clic. Je vais sélectionner cet onglet souvent négligé appelé fichiers, et ici je suis invité soit à ajouter un nouveau fichier, soit à utiliser un fichier existant que j'ai téléchargé dans le passé. Pour cette démonstration, je vais en ajouter un tout nouveau, naviguant vers mon fichier PDF. C' est un fichier assez volumineux et cela n'a vraiment pas d'importance, et c'est bien que vous puissiez télécharger des fichiers volumineux ici. Une fois qu'il est téléchargé, il va apparaître dans ma liste de fichiers existants, et la dernière étape consiste à faire défiler vers le bas et à cliquer sur « Ouvrir dans une nouvelle fenêtre ». J' aime que presque tous les liens de mon site s'ouvrent dans une nouvelle fenêtre afin que les utilisateurs ne soient pas envoyés en dehors de mon site Web. En cliquant à l'extérieur de ce mini pop-up, je viens ici et je sélectionne le style du bouton, que ce soit moyen, grand, aligné au centre de la page ou à gauche ou à droite, etc. Maintenant, quand je clique sur » Appliquer » et je sauvegarde mon billet de blog, Je vois que cliquer sur le bouton fait exactement ce que nous espérions. Les mêmes étapes peuvent être utilisées pour ajouter un lien vers le texte, ne doit pas seulement être un bouton, donc ici je viens d'ajouter ce texte de téléchargement gratuit dans le corps du texte du billet de blog, et je vais ajouter un lien. Allez dans les fichiers, fichier existant l'abecedary de l'écriture que je viens de télécharger la fenêtre ouverte, cliquez juste en dehors de cette pop-up et appuyez sur « Enregistrer », et je suis tout terminé. 4. Capture d'e-mail téléchargeable: Comme vous venez de le voir, donner un téléchargeable sur Squarespace est facile. Mais ce qui n'est pas facile, c'est de forcer les visiteurs à terminer un appel à l'action afin d'obtenir ce téléchargement. Le plus courant de ces appels à l'action est une capture d'adresse e-mail, ce qui signifie que les visiteurs s'inscrivent à votre liste de diffusion ou à votre newsletter afin d'avoir accès à votre téléchargement. C' est un excellent moyen de capturer de nouveaux adeptes. Ici, je suis sur une page de mon propre site web. Je veux donner aux visiteurs un téléchargement gratuit de fond d'écran s'ils s'inscrivent à ma newsletter. Il y a deux façons d'y arriver. L' option la plus basique et minimale utilise le widget de newsletter et l'option légèrement plus fantaisie utilise le widget de formulaire. Je vous raccompagnerai à travers les deux maintenant. Je vais commencer par éditer ma page, puis ajouter un widget de newsletter. Je vais juste le mettre en bas de la page avant le pied de page. Ici, je vais personnaliser mon texte. Je vais choisir de cliquer sur Exiger le champ Nom car je veux également capturer les noms de mes visiteurs, mais c'est facultatif. Si vous voulez capturer encore plus de détails sur les visiteurs, vous pouvez également utiliser un widget de formulaire au lieu du widget de newsletter, qui est la technique que je vais vous montrer ensuite. Donc, en revenant à l'onglet Avancé, je vais éditer mon message Post-Soumettre, puis je vais lier au fichier téléchargeable comme nous l'avons fait dans la vidéo précédente. Je vais télécharger mon fichier de fond d'écran maintenant et cliquez sur Ouvrir dans une nouvelle fenêtre. Ensuite, je vais accéder à l'onglet Stockage et connecter ma méthode préférée de capture d'e-mails. Une fois que j'ai enregistré, je peux tester cela ici sur cet écran après avoir reçu la page. Super. Maintenant, je vois ce message apparaître et je peux cliquer sur le lien et obtenir mon téléchargement gratuit. La version légèrement plus fantaisie de cette solution de contournement utilise le widget de formulaires. Donc encore une fois, je vais éditer ma page et au même endroit qu'avant, j'ajouterai un widget de formulaires au lieu d'un widget de newsletter. Je vais supprimer le champ d'objet et le champ de message, ne laissant que le nom et l'adresse e-mail. Maintenant, comme avant, vous pouvez également supprimer le champ de nom et simplement capturer une adresse e-mail. Vous pouvez également ajouter encore plus de champs à vérifier. Par exemple, vous pouvez les forcer à répondre à un sondage en ajoutant questions de case à cocher ou de bouton radio ou même un champ d'enquête lui-même. Vous pouvez les forcer à mettre dans leur propre URL de site Web, n'importe quoi comme ça, vous pouvez capturer dès maintenant. Je vais nommer ce formulaire Free Downloadable, bien que nous puissions changer cela plus tard si vous voulez. Sous Stockage, exprimez votre adresse e-mail, qui sera la méthode par défaut capturer les informations après qu'un visiteur aura cliqué sur Soumettre. Mais nous ne voulons pas vous envoyer d'e-mail, nous voulons simplement saisir leurs détails. Encore une fois, je vais me connecter à mon service de capture d'e-mails préféré. Dans l'onglet Avancé, répétez les étapes du widget Newsletter, en ajoutant le texte du lien de téléchargement dans la zone Post-Soumettre le message. En revenant ici, je vais décider que je veux que mon bouton soit aligné au centre de mon formulaire. Je vais changer le texte du bouton Soumettre pour dire, voyons, Obtenir mon fond d'écran gratuit ! Maintenant, l'étape suivante cool, et la façon dont c'est une option plus fantaisiste, est que je vais faire défiler ici et cliquez sur Activer le mode Lightbox. Cela transforme votre formulaire en bouton de sorte que lorsque les utilisateurs cliquent dessus, une fenêtre contextuelle les invite à entrer leurs coordonnées. Je vais donc entrer le texte de ce bouton maintenant, puis cliquez sur Appliquer. Pour tester cela, comme nous l'avons vu dans la vidéo précédente, vous allez devoir enregistrer votre page et ensuite aller sur votre site Web réel, à votre URL réelle. Actualisez la page sur laquelle vous aviez ceci pour que votre nouveau formulaire apparaisse , puis testez-le en cliquant sur le bouton. Tellement cool, cette forme est apparue. Je vais mettre mes informations et obtenir mon papier peint gratuit. Génial. Dans ma prochaine vidéo, je vais partager quelques conseils pour coiffer cette fenêtre de confirmation contextuelle, ainsi que comment amener les utilisateurs à entrer leurs coordonnées en échange d'un code promo. 5. Capture d'e-mail Code coupon: Maintenant, vous êtes tous des gens intelligents et capables, donc je suis sûr que vous avez probablement déjà compris comment révéler un code promo aux gens en échange de leurs coordonnées. Mais dans cette vidéo, non seulement je vais vous le montrer, mais je vais vous expliquer comment ajouter une certaine personnalisation stylistique et de mise en page à la fenêtre contextuelle du formulaire. Pour l'exemple d'aujourd'hui, je vais donner aux gens 25 % de rabais sur les timbres en caoutchouc de ma boutique s'ils me fournissent leurs coordonnées et s'inscrivent à ma newsletter. Étant donné que certains modèles Squarespace ont différentes façons de créer des codes de réduction et des coupons, veuillez utiliser le lien sur mon écran si vous avez besoin d'aide pour en configurer un. J' ai aussi le lien en direct vers cela dans la section à propos de cette classe. Je veux mettre un bouton pour que les gens obtiennent ce code promo ici dans ma boutique. Donc, je vais modifier ma page et je pense que je vais la mettre ici avec un peu d'entretoise au-dessus. Je vais mettre un widget de formulaire et comme avant, supprimer le Sujet, supprimer le Message. Maintenant, le nom du formulaire est le titre qui apparaîtra sur la première fenêtre contextuelle. Je pense que je vais appeler ça, prendre votre coupon. Une fois cela fait, je vais dans Stockage, déconnecte mon adresse e-mail et me connecte à ma méthode de capture d'e-mails. Maintenant, allons à Avancé. Je veux changer l'étiquette du bouton Envoyer pour obtenir votre coupon. Dans le message Post-Soumettre, je veux obtenir un peu plus de fantaisie que dans ma vidéo précédente. Je veux que le code promo lui-même soit vraiment gros. Donc, je vais effacer le message Post-Soumettre , puis revenir à Post- Soumettre HTML à la place. Le fait que nous puissions utiliser HTML pour styliser ce texte est ce qui va le rendre un peu plus fantaisiste. Je vais taper mon message ici. Maintenant, avant de taper le code promo sur cette ligne suivante, je veux ajouter un peu de style HTML. Je pense que je veux que le code lui-même soit le grand texte H1 ou en-tête que j'ai sur mon site Web. C' est assez simple. C' est une balise HTML vraiment facile. Je vais mettre un caret gauche, H1, caret droit. Squarespace est vraiment génial car il ajoute automatiquement la fermeture de votre codage. Tout ce que vous avez à faire est de taper ce qui se passe entre les deux balises. Actuellement, la façon dont cela va ressembler est que ce message supérieur va être comme le texte de paragraphe de base que vous voyez ici. Il sera aligné à gauche et timbres heureux également alignés à gauche, sera sur la ligne suivante. Ce sera juste grand à l' apparence de mes en-têtes H1 mais je pense que je veux que tout cela soit centré. En cliquant sur Sauvegarder ici au tout début de mon texte, je vais ajouter du code plus super simple. Maintenant, j'ai ajouté un div ici et Squarespace m'a utilement donné la balise de fin pour cette div, mais je ne le veux pas là. Je le veux à la toute fin de mon texte. Je vais le couper et le coller à la fin du texte. Maintenant, bien sûr, si vous êtes familier avec HTML, vous savez que vous pouvez ajouter beaucoup plus ici, soit un changement de police, de couleur, de taille, qu'est-ce que vous avez, il y a beaucoup plus qui peut être fait ici, mais enseigner dans classe de style HTML approfondie est une chose légèrement différente. Ensuite, je vais descendre ici et activer le mode Lightbox. Je vois que le bouton apparaît sur la gauche, donc je vais venir ici en haut et changer l'alignement au centre. Puis descendez à l'étiquette du bouton Ouvrir et je pense que je vais mettre Obtenez votre coupon pour 25% de rabais sur les tampons en caoutchouc. Ensuite, je vais appuyer sur Appliquer et Enregistrer et me rappeler qu'avec un formulaire, vous devez retourner à votre site Web d'origine. Cliquez sur Actualiser, et ce n'est qu'alors que votre nouveau formulaire et votre formulaire mis à jour apparaîtront. Alors je vais cliquer dessus. Super, fonctionne bien jusqu'à présent. Prends mon coupon. Super. Tout est centré et mon code promo est vraiment grand. 6. Capture de messages de page d'accueil: Les astuces que je viens de partager avec vous pour donner des téléchargeables et des codes coupons en utilisant des formulaires peuvent également être facilement incorporées dans les pages de destination des espaces carrés, ou aussi connu sous le nom de pages de couverture. Ici, j'ai une page de destination très basique que que j'ai faite pour cette classe avec la configuration par défaut. Juste un seul bouton, qui est la valeur par défaut qui mène à la page d'accueil de mon site. Ici, dans mon backend où je peux éditer ma page de destination et quand il passer à l'action où je peux éditer des boutons, des liens et des formulaires. Je peux voir ici le bouton par défaut qui mène à la page d'accueil. Mais pour garder les choses simples pour cette démonstration, je vais supprimer le bouton et juste le remplacer par le formulaire. Je vais étiqueter le bouton, télécharger votre fond d'écran gratuit. Bien sûr, la plupart des sites Web qui ont une page de destination ne vont pas être juste du papier peint gratuit de la publicité. Peut-être que vous voulez donner un e-book gratuit ou quelque chose d'un peu plus substantiel. Néanmoins, cela vous montrera comment cela est fait. Je vais cliquer sur Modifier le formulaire maintenant, et nous avons traversé cela, mais la fenêtre semble un peu différente, je vais vous conseiller qu'il n'y aura d'option pour en faire une boîte lumineuse parce que le et la seule façon de le faire sur une page de destination est de faire en sorte que le formulaire lui-même soit une fenêtre contextuelle. Rappelez-vous que le nom du formulaire est le titre d'un écran de confirmation. Je vais simplement le titre, Enjoy. Je vais supprimer les champs d'objet et de message. Pour quelque chose de différent, je vais simplement ajouter un champ de site Web, assurant que ce n'est pas nécessaire, mais en demandant aux gens d'entrer leur site Web. Dans le stockage, encore une fois, je m'assurerai, si vous avez votre e-mail ici par défaut, déconnecter et de me connecter à un fournisseur de capture de courrier électronique par défaut. Plus et avancé, je vais donner le titre de ce bouton de soumission, télécharger mon fond d'écran et je vais remplir le message ici avec le lien de téléchargement. Rappelez-vous dans les fichiers, j'ai encore ce fichier existant ici. Je vais aller dans le fichier existant, le sélectionner, ouvrir une nouvelle fenêtre, puis je peux appuyer sur Enregistrer. Mais juste pour vous rappeler, ici, tout ce que je vous ai montré dans la vidéo précédente sur post soumettre HTML fonctionnera ici. Cela inclut le style du type comme le centrage et le marquage avec une balise H1 ou H2. Mais il inclut aussi ce que je vous ai montré au tout début de cette classe, où vous pouvez rediriger les utilisateurs vers une nouvelle page de votre site Web et à cette fin, cela pourrait être une excellente idée. Vous pouvez les rediriger vers une page que vous avez créée à propos de votre téléchargement. Disons que vous avez un e-book gratuit ou un paquet d'échantillons pour apprendre la calligraphie. Eh bien, vous pouvez les rediriger via ce formulaire vers cette page où vous montrez des exemples, vous leur montrez comment l'utiliser, vous annoncez le produit mais ce site ne sera accessible qu' aux personnes qui ont traversé cette étape initiale . Maintenant, je dois appuyer sur Enregistrer ici et si je développe l'écran avec cette flèche, je peux réellement tester le formulaire sur cette page, contrairement au cas avec beaucoup d'autres pages. Super, je clique dessus, tout cela arrive et je clique sur télécharger mon fond d'écran.