Transkripte
1. Einführung und Übersicht: Willkommen bei fünf Squarespace-Programmierhacks, um Ihr Publikum zu erweitern. Wenn Sie eine E-Commerce-Website,
Online-Portfolio oder einen Blog haben , dann wissen Sie wahrscheinlich, dass eine robuste E-Mail-Liste zu den leistungsstärksten Marketing-Tools gehört. Viele von uns locken unser Publikum zum Abonnieren, indem sie kostenlose Downloads, Gutscheincodes und exklusive Angebote anbieten, für die nur unsere Mailingliste berechtigt ist. Squarespace-Websites haben einige der elegantesten und benutzerfreundlichsten Vorlagen da draußen, und sie sind besonders beliebt bei kreativen Freiberuflern aus diesem Grund. Manchmal erfordern die Widgets und Blöcke, die zum Erstellen der Websites verwendet werden kreative Problemumgehungen, um nur die Funktion und den Grad der Anpassung zu erhalten, die Sie möchten. In dieser Klasse werde ich
fünf wertvolle Programmiertipps teilen, um die E-Mail-Adressen Ihrer Websitebesucher zu erfassen und kostenlose Materialien und exklusive Angebote zu fördern. All diese Techniken sind
nur mit einem sehr grundlegenden Arbeitswissen von Squarespace möglich , und sie arbeiten mit allen Squarespace-Vorlagen. Nur zwei der Techniken erfordern benutzerdefinierten Code, aber ich werde Ihnen buchstäblich den genauen Code geben, den Sie
kopieren und einfügen müssen , damit der Prozess völlig narrensicher ist. Die spezifischen Techniken, die ich Ihnen beibringen werde, sind, wie Sie Code zu Ihrem Kontaktformular hinzufügen, um Besucher zu gewöhnen Dankeschön Seite umleiten. Personen, die Sie über Ihre Website oder ein gefangenes Publikum kontaktieren. Sie verlieren die perfekte Gelegenheit, mehr mit ihnen über Ihr Unternehmen zu teilen, wenn Sie mit dem Standard-Kontaktformular, Bestätigungsfenster von Squarespace bleiben. Ich werde Ihnen auch zeigen, wie Sie Ihrem Publikum
kostenlos herunterladbare Inhalte über Buttons und Textlinks anbieten können. Ich zeige Ihnen, wie Sie die E-Mail-Adressen der Besucher
im Austausch für Downloads und Gutscheincodes erfassen können. Ich werde Ihnen auch zeigen, wie Sie den Text in
Ihren Formular-Popupffenstern und Newsletter-Bestätigungsfeldern formatieren , die Ihrer Website ein professionelles, konsistentes Aussehen verleihen und mit Ihrem Branding zusammenhängen. Schließlich werde ich Ihnen zeigen, wie Sie eine Titelseite verwenden können, um kostenlose Downloads oder Coupons im Austausch für
E-Mail-Anmeldungen
anzubieten und diese Formulare dann
auf die nachverfolgbare benutzerdefinierte Dankesseite umleiten , die Sie in Schritt 1 erstellt haben. Um in dieser Klasse mitzuverfolgen, müssen
Sie bereits ein Squarespace-Konto haben, und zumindest den Anfang einer Website. Es kann als einfache Website sein, obwohl, sogar eine Arbeit in Arbeit. Sie benötigen außerdem sehr grundlegende Kenntnisse über das Back-End von Squarespace. Sie müssen jedoch kein Squarespace-Profi sein oder keine Erfahrung mit der Programmierung oder Programmierung haben. Wenn Sie die Grundlagen von Squarespace lernen müssen, bevor Sie diese Klasse besuchen, empfehle
ich Squarespaces eigene Skillshare Klasse namens Personal Branding Essentials. Den Live-Link zu diesem Squarespace-Kurs finden Sie im obigen Abschnitt dieser Klasse. In dieser Klasse dreht sich alles um Vernetzung. Bei der Entscheidung, was das Klassenprojekt sein sollte, dachte
ich, wir sind besser zu beginnen als mit Ihren Kollegen. Heute werde ich Sie bitten, eine benutzerdefinierte
Dankesseite zu erstellen , wie im allerersten Lektionsvideo beschrieben. Sie werden eine Weiterleitung zu dieser Seite von einem beliebigen Formular auf Ihrer Website einrichten. Dann posten Sie eine Bildschirmaufnahme dieser neuen angepassten Dankesseite und teilen Sie einen Link zu Ihrer Website. Entweder die Dankesseite selbst oder das Kontaktformular, das Besucher einreichen müssen, um Ihre neue Seite zu sehen. Natürlich, wenn Ihre Website noch nicht im Internet live ist, ist das in Ordnung. Sie müssen keinen Live-Link freigeben. Aber wenn Sie einen haben, wäre
es großartig, sich mit Ihren Kommilitonen zu teilen und sich mit ihnen zu vernetzen.
2. Umleitung Formula auf Benutzerdefinierte Danksagung: Wenn Benutzer ein Squarespace-Kontaktformular senden, wird
das Formular selbst standardmäßig in eine
Dankesnachricht umgewandelt , sobald die Schaltfläche „Senden“ gedrückt wird. Der Grund, warum ich das nicht mag, ist, dass, A, Ich möchte Calls to Action für Benutzer hinzufügen, die mich kontaktieren, wie fragt sie, etwas herunterladen, besuchen Sie meinen Shop, folgen Sie meinem Blog, etc. B, wenn es um SEO und Analytics geht, Ich kann die Benutzer, die mein Kontaktformular absenden, nicht verfolgen Daher kann ich diese Zielgruppe nicht erfassen. Wenn Ihr Facebook-Pixelbenutzer zum Beispiel kein Pixel installieren kann, um Benutzer zu verfolgen, die tatsächlich Ihre Formulare absenden, können
Sie nur Benutzer verfolgen, die die Seite besuchen, auf der sich das Formular befindet. Für viele von Ihnen ist mein erster Grund,
eine hübsche Umleitungsseite zu haben , genug Grund, dies zu tun, aber wenn SEO ist sehr wichtig für Sie und Sie tun viele Facebook-Werbung und verwenden Facebook-Pixel, dann ist diese Technik ein Muss. Dies ist meine aktuelle Seite, der die Besucher weitergeleitet werden zuder die Besucher weitergeleitet werden, nachdem sie das Formular auf meiner Kontaktseite abgeschickt haben. Sie können sehen, dass ich es ziemlich einfach gehalten habe. Ich habe nur eine Grafik, die meinen Dank ausdrückt, eine Notiz, die bestätigt, dass die Nachricht gesendet wurde, und dann eine Reihe von Aufrufen zum Handeln. Hier teile ich zum Beispiel einen Link zu
einem neuen Online-Ressourcenführer, den ich für Schriftting-Künstler erstellt habe, Links zu meinem Skillshare Kanal, meinem Instagram, meinen Büchern und einem Aufruf zur Aktion, um sich für meinen Workshop Newsletter, News Bulletin anzumelden. Diese Dankes-Seiten sind ein wirklich großartiger Ort, um einen oder mehrere Calls to Action zu integrieren, da Ihre Zielgruppe auf dieser Seite immer Benutzer sein wird, die
genug Interesse an Ihnen oder Ihrer Website hatten , um Sie zu Beginn kontaktiert zu haben. Dies ist ein erstklassiges Publikum, um an all
die coolen Funktionen und Dinge zu erinnern , die Sie anbieten. Ob es sich um einen E-Shop oder ein Blog, herunterladbare Inhalte, Instagram, Facebook-Seite, was haben Sie, nutzen Sie diese Seite bis zum Maximum, um die Menschen zu erreichen, die bereits Interesse an Ihnen und Ihrer Website zum Ausdruck gebracht haben. Obwohl ich bereits diese Dankeschön Seite
habe, werde ich eine neue beginnen, damit ich Sie von Grund auf durch sie führen kann. Also hier ist das Backend meiner Website. Gehen Sie zunächst in den Abschnitt Nicht verknüpft auf Ihrer Website und
klicken Sie auf das Pluszeichen, um eine neue Seite zu erstellen. Ich werde hier eine einfache leere Seite auswählen, aber technisch gesehen können Sie eine dieser Optionen auswählen. Ich betitele diese neue Seite: „Danke“. Das Layout, das Sie auswählen können, liegt an Ihnen, aber ich möchte, dass diese Seite einfach ist.
Daher wähle ich dieses erste minimalistische Design aus und klicke dann auf Bearbeiten starten. Ich werde hier schnell einige Anpassungen vornehmen. Jetzt, da das Thank You Page Mockup fertig ist, muss
ich es in das Kontaktseitenformular integrieren. Also komme ich hier auf meine Kontaktseite, wir können auch von hier aus in meiner Seitenleiste zu ihr navigieren. Ich scrolle nach unten zu meinem Formular, bearbeite die Seite und bearbeite dann das Formular selbst. Beginnen Sie, indem Sie auf die Registerkarte Erweitert gehen. In diesem Feld „Nachricht nach Absenden“ würden Sie jede Art von Nachricht wie Dankeschön im normalen Standardmodus für Squarespace eingeben. Dies ist, wo, wenn jemand das Formular absendet, verwandelt sich
das Formular selbst in eine kleine Dankeschön und was auch immer Sie hier schreiben, ist das, was sie sehen werden. Aber im Moment halten wir es leer, und wir scrollen hier nach unten zu Post-Submit HTML. Jetzt passiert der ganze Punkt dieses Hacks oder Workaround, den ich Ihnen zeige, genau hier. Anstatt eine Nachricht in dieses Feld zu schreiben, werden
wir tatsächlich Code eingeben, der die Website zwingen wird auf eine neue Seite Ihrer Website umzuleiten, wenn jemand auf „Senden“ klickt. Diese neue Seite
wird natürlich die Dankeschön Seite sein, die wir gerade gemacht haben. Bevor wir diesen Code tatsächlich erstellen können, werde
ich das abbrechen, meine Änderungen
verwerfen, weil ich gerade keine entscheidenden Änderungen vorgenommen habe. Abbrechen aus dem Bearbeitungsmodus dieser Kontaktseite. Scrollen Sie nach unten zu meiner neuen Dankesseite, die ich gerade gemacht habe, und ich werde auf diese Zahnradschaltfläche für die Einstellungen klicken. Das ist es, was ich sehen muss. Ich muss mir die URL-Slug für diese Seite ansehen. Dies bedeutet, dass die direkte URL zu dieser bestimmten Webseite die URL/Danke meiner Website ist. Wenn ich hier zu einem neuen Browserfenster komme, können
Sie sehen, dass das schon gut funktioniert. Da wir diese Seite erstellt und in den nicht verlinkten Bereich unseres Seiten-Panels eingefügt haben, bedeutet
dies, dass sie eigentlich nicht direkt mit irgendwo auf Ihrer Website verlinkt ist, aber es ist immer noch eine Live-Seite im Internet. Das ist genau das, was wir brauchen, um Menschen auf diese Seite umleiten zu können , ohne einen Link darauf auf der Website zu haben. Denken Sie daran, was Ihre URL Slug ist und wir fahren mit dem nächsten Schritt fort. Zurück hier auf der Kontaktseite. Auch hier bearbeite ich die Seite und bearbeite das Kontaktformular. Kommen Sie hierher zu Advanced, scrollen Sie nach unten zu Post-Sumb HTML. Sie müssen keinen Code schreiben können, um dies zu tun. Ich habe das super einfach für dich gemacht. Es gibt tolle Websites, die Code
generieren, Open-Source-für viele häufig verwendete Funktionen ist. Die Funktion, die wir heute brauchen, ist eine einfache URL-Umleitung. Ich habe bereits für Sie einen Umleitungsgenerator gefunden. Ich habe die URL direkt hier auf dem Bildschirm für Sie, aber auch der Live-Link ist im Abschnitt über dieser Klasse. Für die URL, zu der wir umleiten müssen, möchte
ich, dass Sie die vollständige Webadresse für die Website, die wir gerade gemacht haben, eingeben. In meinem Fall, das ist das, die pluralbellestudio.com/danke. Sobald Sie das tun, klicken Sie einfach auf diese Schaltfläche, „Generieren Sie den Umleitungscode für mich.“ Kopieren Sie nun den ganzen Code und fügen Sie ihn ein. Also kopiere ich es hier und füge es dann hier in das Post-Submit HTML-Feld ein. Da dies ein schöner kostenloser Code ist, haben
die Autoren ein bisschen Werbung für ihre Website aufgenommen. Mir geht es aber gut,
wenn es fällig ist. Das Guthaben wird nirgendwo auf der sichtbaren Seite Ihrer Website erscheinen,
also gibt es absolut nichts, worüber man sich Sorgen machen muss. Wenn Sie aus irgendeinem Grund nicht auf diesen Code zugreifen können, habe ich ihn in ein Google Drive-Dokument eingefügt, das Sie zugreifen und kopieren können, da dies Open-Source-Code ist, über den Link, den ich hier auf dem Bildschirm habe, oder in dem Live-Link, den ich im Abschnitt über dieser Klasse enthalten habe. Der raffinierte Codegenerator hat
meine eindeutige URL an drei verschiedenen Punkten in diesem Codeenthalten meine eindeutige URL an drei verschiedenen Punkten in diesem Code Wenn ich
also auf „Übernehmen“ klicke und dann meine Seite speichere, sollte dies funktionieren. Nun, das ist super wichtig. Leider können
Sie im Backend von Squarespace keine Formularübermittlungsfelder wie diese ausprobieren. Also müssen wir zum Frontend meiner Website gehen. Ich möchte auf die Kontaktseite gehen. Ich bin nicht im Backend, ich bin auf meiner eigentlichen Website. Ich weiß das, weil
ich hier im Backend bei meiner pluralbelle.squarespace.com URL bin, und hier drüben unter meiner echten benutzerdefinierten URL pluralbellestudio.com. Also komme ich hier rüber zu meiner echten Website und ich werde nur eine falsche kleine Nachricht eintragen und „Senden“ drücken. Wie Magie wurde ich nun auf
diese neue Dankeseite weitergeleitet , die ich vor einer Minute erstellt habe.
3. Erstelle einen Download-Link: Eine sehr häufige Anschauungsfunktion in diesen Tagen ist es, Ihren Website-Besuchern einen kostenlosen Download anzubieten. Squarespace macht es einfach, einen Link oder eine Schaltfläche hinzuzufügen, um eine Datei herunterzuladen. Im nächsten Video zeige ich Ihnen, wie Sie
einen Download-Link im Austausch für die Erfassung von Besuchern,
E-Mail-Adresse und anderen Kontaktinformationen erstellen einen Download-Link im Austausch für die Erfassung von Besuchern, . Aber zuerst stellen wir sicher, dass Sie wissen, wie Sie einen Link erstellen können, der eine Datei auf traditionelle einfache Weise in Squarespace
herunterlädt. Hier bin ich auf einer meiner Websites, calligrafile.com, wo ich häufig kostenlose Downloads für Leser des Blogs anbieten. In diesem speziellen Beitrag
haben wir uns mit Großbuchstaben zusammengetan, um eine druckbare PDF-Datei ihres schönen abecedary Plakats zu verschenken. Durch Anklicken dieses Buttons können
Besucher ein PDF in hoher Auflösung in Druckqualität dieses Plakats herunterladen, das sich in einem neuen Fenster öffnet und Menschen das Zoomen, Drucken oder Herunterladen ermöglicht. Wie habe ich das gemacht? Nun, es ist wirklich ganz einfach. Ich werde noch einen machen, nur damit wir alle einen Blick darauf werfen können, wie ich es gemacht habe. Beginnen wir mit der Bearbeitung dieser Seite. Ich werde diesen Download-Button direkt hier hinzufügen. Ich werde klicken, um ein neues Widget hinzuzufügen und scrollen Sie nach unten zur Schaltfläche, Ich werde diesen kostenlosen Download Titel, und den Klick durch Link. Ich werde diese oft übersehene Registerkarte namens Dateien auswählen, und hier werde ich entweder aufgefordert,
eine neue Datei hinzuzufügen oder eine vorhandene Datei zu verwenden, die ich in der Vergangenheit hochgeladen habe. Für diese Demonstration werde ich eine brandneue hinzufügen zu meiner PDF-Datei
navigieren. Es ist eine ziemlich große Datei und das spielt wirklich keine Rolle, und es ist schön, dass Sie hier große Dateien zum Download hochladen können. Sobald es hochgeladen ist, wird es in meiner Liste der vorhandenen Dateien angezeigt, und der letzte Schritt besteht darin, nach unten zu scrollen und auf „In einem neuen Fenster öffnen“ zu klicken. Ich mag fast alle Links auf meiner Website, um in
einem neuen Fenster zu öffnen , so dass Benutzer nicht außerhalb meiner Website gesendet werden. Klicken Sie außerhalb dieses Mini-Pop-up, Ich komme hier nach unten und wählen Sie das Styling der Schaltfläche, ob es geht, um mittel, groß, ausgerichtet in der Mitte der Seite oder der linken oder rechten, usw. Jetzt, wenn ich klicke“ Bewerben“ und ich speichere meinen Blogbeitrag, sehe
ich, dass das Klicken auf die Schaltfläche genau das tut, was wir erhofft haben. Die exakt gleichen Schritte können verwendet werden, um einen Link zu Text hinzuzufügen, muss nicht nur eine Schaltfläche sein, also hier habe ich gerade diese kostenlosen Download-Texte in den Body-Text des Blog-Posts hinzugefügt, und ich werde einen Link hinzufügen. Gehen Sie zu Dateien, bestehende Datei die abecedary des Schreibens, dass ich gerade hochgeladen Open-ended Fenster, klicken Sie direkt außerhalb dieses Pop-up und drücken Sie „Speichern“, und ich bin alles fertig.
4. Email herunterladbar: Wie Sie gerade gesehen haben, ist es einfach, ein herunterladbares auf Squarespace zu
verschenken. Aber was nicht einfach ist, ist es, Besucher zu zwingen einen Call to Action
abzuschließen, um diesen Download zu erhalten. Die häufigste dieser Aufrufe zum Handeln ist eine E-Mail-Adresserfassung,
d. h., dass sich Besucher für Ihre Mailingliste oder Newsletter anmelden, um Zugriff auf Ihren Download zu haben. Dies ist eine großartige Möglichkeit, neue Follower zu erfassen. Hier bin ich auf einer Seite meiner eigenen Website. Ich möchte Besuchern einen kostenlosen Wallpaper-Download zur Verfügung stellen, wenn sie sich für meinen Newsletter anmelden. Es gibt zwei Möglichkeiten, dies zu tun. Die einfachste und minimalste Option verwendet das Newsletter-Widget und die etwas schickere Option verwendet das Formular Widget. Ich begleite dich jetzt durch beide. Ich werde beginnen, indem ich meine Seite editiere und dann ein Newsletter-Widget hinzufüge. Ich werde es einfach hier ganz unten auf der Seite vor der Fußzeile setzen. Hier werde ich meinen Text anpassen. Ich werde wählen, klicken Sie auf Namensfeld erforderlich, weil ich auch die Namen meiner Besucher erfassen
möchte, aber das ist optional. Wenn Sie noch mehr Besucherdetails erfassen möchten, können
Sie auch ein Formularwidget anstelle des Newsletter-Widgets verwenden, was die Technik ist, die ich Ihnen als nächstes zeigen werde. ich auf die Registerkarte Erweitert komme, werde
ich meine Post-Submit Nachricht bearbeiten, dann werde ich auf die herunterladbare Datei verlinken, wie wir es im vorherigen Video getan haben. Ich lade jetzt meine Hintergrunddatei hoch und klicke auf In neuem Fenster öffnen. Als Nächstes komme ich zur Registerkarte „Speicher“ und verbinde meine bevorzugte Methode der E-Mail-Erfassung. Sobald ich gespeichert habe, kann ich dies direkt hier auf diesem Bildschirm testen, nachdem ich die Seite erhalten habe. Großartig. Jetzt sehe ich diese Nachricht Pop-up und ich kann auf den Link klicken und meinen kostenlosen Download erhalten. Die etwas schickere Version dieser Problemumgehung verwendet das Forms Widget. Also wieder, ich werde meine Seite bearbeiten und an der gleichen Stelle wie zuvor, werde
ich ein Formular-Widget anstelle eines Newsletter-Widgets hinzufügen. Ich werde das Betrefffeld und das Nachrichtenfeld entfernen, wobei nur der Name und die E-Mail-Adresse übrig bleiben. Nun, wie zuvor, können Sie auch das Namensfeld entfernen und einfach eine E-Mail-Adresse erfassen. Sie können auch noch weitere Felder hinzufügen, die Sie überprüfen können. Sie können sie beispielsweise dazu zwingen, an einer Umfrage teilzunehmen, indem Fragen zu
Checkbox oder Optionsfeld oder sogar ein Umfragefeld selbst hinzufügen. Sie können sie zwingen, ihre eigene Website-URL zu setzen, so
etwas, das Sie jetzt erfassen können. Ich werde dieses Formular kostenlos herunterladbar nennen, obwohl wir das später ändern können, wenn Sie möchten. Unter Speicher, z. B. Ihre E-Mail-Adresse,
die die Standardmethode ist, um dieInformationen zu
erfassen, nachdem ein Besucher auf „Absenden“ geklickt die die Standardmethode ist, um die hat. Aber wir möchten Ihnen keine E-Mail senden, wir wollen nur ihre Details erfassen. Also wieder, ich werde mich mit meinem bevorzugten E-Mail-Capture-Dienst verbinden. der Registerkarte Erweitert Wiederholen Sie aufder Registerkarte Erweitertdie Schritte aus dem Newsletter-Widget fügen Sie im Feld „Nachricht nach Absenden“ den Text für den Downloadlink hinzu. wieder hier oben komme, werde
ich entscheiden, dass ich meine Tastenausrichtung in der Mitte meines Formulars möchte. Ich werde den Text der Schaltfläche „Senden“ ändern, um zu sagen, mal sehen, Holen Sie sich mein kostenloses Hintergrundbild! Jetzt ist der coole nächste Schritt, und die Art und Weise, in der dies eine schickere Option
ist, dass ich hier nach unten scrollen und auf Lightbox-Modus aktivieren klicken. Dadurch wird Ihr Formular in eine Schaltfläche umgewandelt, sodass Benutzer, wenn sie darauf klicken, ein Pop-up auffordert, ihre Details einzugeben. Also werde ich den Text dieser Schaltfläche jetzt eingeben und dann auf Übernehmen klicken. Um dies zu testen, wie wir im vorherigen Video gesehen haben, müssen
Sie Ihre Seite speichern und dann tatsächlich zu Ihrer echten Website gehen, zu Ihrer tatsächlichen URL. Aktualisieren Sie die Seite, auf der Sie diese Seite hatten, damit Ihr neues Formular
angezeigt wird , und testen Sie es dann, indem Sie auf die Schaltfläche klicken. So cool, diese Form tauchte auf. Ich werde meine Informationen eingeben und mein kostenloses Hintergrundbild bekommen. Ehrfürchtig. In meinem nächsten Video werde
ich einige Tipps zum Styling dieses Popup-Bestätigungsfensters teilen, sowie wie man Benutzer dazu bringt, ihre Kontaktdaten im Austausch für einen Gutscheincode einzugeben.
5. Email: Jetzt seid ihr alle klugen, fähigen Menschen, also bin ich mir sicher, dass ihr wahrscheinlich schon herausgefunden habt, wie man den Leuten
einen Gutscheincode im Austausch für ihre Kontaktdaten offenbart . Aber in diesem Video werde ich Ihnen nicht nur zeigen, dass, sondern ich werde behandeln, wie Sie eine
stilistische und Layout-Anpassung zum Formular-Pop-up-Fenster hinzufügen . Für das heutige Beispiel gebe ich den Leuten 25 Prozent Rabatt die Stempel in meinem Shop, wenn sie
mir ihre Kontaktdaten mitteilen und mich für meinen Newsletter anmelden. Da einige Squarespace-Vorlagen
unterschiedliche Möglichkeiten haben , Rabattcodes und Gutscheine zu erstellen, verwenden
Sie bitte den Link auf meinem Bildschirm, wenn Sie Hilfe bei der Einrichtung eines Codes benötigen. Ich habe auch den Live-Link dazu im Abschnitt über dieser Klasse. Ich möchte einen Knopf für Leute setzen, um diesen Gutscheincode direkt hier in meinem Shop zu bekommen. Also werde ich
meine Seite bearbeiten und ich denke, ich werde sie direkt hier mit einem kleinen Abstandshalter darüber setzen. Ich werde ein Formular Widget setzen und wie zuvor, löschen Sie den Betreff, löschen Sie die Nachricht. Jetzt ist der Formularname der Titel, der im ersten Popup angezeigt wird. Ich denke, ich rufe das an, schnappen Sie sich Ihren Gutschein. Sobald ich das getan habe, gehe ich zu Speicher, trenne meine E-Mail-Adresse und stelle eine Verbindung zu meiner E-Mail-Erfassungsmethode her. Jetzt gehen wir zu Fortgeschritten. Ich möchte die Beschriftung „Senden“ ändern, um Ihren Gutschein zu erhalten. In der Post-Submit-Nachricht möchte
ich ein bisschen schicker werden als in meinem vorherigen Video. Ich möchte, dass der Gutscheincode selbst wirklich groß ist. Also werde ich die Post-Submit-Nachricht löschen und dann zu Post- Submit HTML statt. Die Tatsache, dass wir HTML verwenden können, um
diesen Text zu stilisieren , ist, was es ein wenig schicker machen wird. Ich schreibe hier meine Nachricht ein. Bevor ich nun den Gutscheincode in dieser nächsten Zeile eintippe, möchte
ich ein wenig HTML-Styling hinzufügen. Ich denke, ich möchte, dass der Code selbst der große H1- oder Kopfzeilentext ist, den ich auf meiner Website habe. Das ist ganz einfach. Dies ist ein wirklich einfaches HTML-Tag. Ich werde ein linkes Caret setzen, H1, rechtes Caret. Squarespace ist wirklich großartig, weil es automatisch das Schließen Ihrer Codierung hinzufügt. Alles, was Sie tun müssen, ist einzugeben, was zwischen den beiden Tags liegt. Derzeit ist die Art und Weise, wie dies aussehen wird, dass diese Top-Nachricht wird wie der grundlegende Absatztext, den Sie hier sehen, aussehen. Es wird links ausgerichtet und glückliche Stempel auch links ausgerichtet, wird in der nächsten Zeile sein. Es wird einfach so groß sein, wie meine H1-Header aussehen, aber ich denke, ich möchte, dass all dies zentriert wird. hier am
Anfang meines Textes auf Backup klicke , werde
ich noch einen super einfachen Code hinzufügen. Jetzt habe ich hier ein div hinzugefügt und Squarespace hat mir hilfsbereit das End-Tag für dieses div gegeben, aber ich will es nicht dort. Ich will es am Ende meines Textes. Ich schneide es aus und füge es am Ende des Textes ein. Nun natürlich, wenn Sie mit HTML vertraut sind, wissen
Sie, dass Sie hier so viel mehr hinzufügen können, ob es sich um eine Änderung der Schriftart, Farbe, Größe, was Sie haben, es gibt viel mehr, was hier getan werden kann, aber Unterricht in eingehende HTML-Styling-Klasse ist eine etwas andere Sache. Als nächstes komme ich hierher und aktiviere den Lightbox-Modus. Ich sehe, dass die Schaltfläche auf der linken Seite erscheint, also komme ich hier nach oben und ändere die Ausrichtung in Mitte. Dann kommen Sie nach unten öffnen Button Etikett und ich denke, ich werde setzen Sie Ihren Gutschein für 25% Rabatt Gummistempel. Als nächstes werde ich Übernehmen und Speichern drücken und denken Sie daran, dass
Sie mit einem Formular zu Ihrer ursprünglichen Website zurückkehren müssen. Klicken Sie auf Aktualisieren, und erst dann wird Ihr neues und aktualisiertes Formular angezeigt. Also klicke ich darauf. Toll, funktioniert so weit gut. Hol dir meinen Gutschein. Großartig. Alles ist zentriert und mein Gutscheincode ist wirklich groß.
6. Die Seite der Landung per E-Mail: Die Tricks, die ich gerade mit Ihnen geteilt habe, um herunterladbare und Gutscheincodes mit
Formularen zu verschenken , können auch leicht in Square Spaces Landing Pages integriert werden, oder auch als Deckblätter bekannt. Hier habe ich eine sehr einfache Landing Page, die ich für diese Klasse mit dem Standard-Setup erstellt habe. Nur eine einzige Schaltfläche, die die Standardeinstellung ist, die auf die Homepage meiner Website führt. Hier drüben in meinem Backend, wo ich meine Zielseite bearbeiten kann und wann es zum Handeln kommen, wo ich Schaltflächen, Links und Formulare bearbeiten kann. Ich kann hier den Standard-Button sehen, der zur Homepage führt. Aber um die Dinge für diese Demonstration einfach zu halten, werde
ich die Schaltfläche löschen und sie einfach durch das Formular ersetzen. Ich werde den Button beschriften, laden Sie Ihr kostenloses Hintergrundbild herunter. Natürlich werden die meisten Websites, die
eine Zielseite haben , nicht nur Werbung für kostenlose Wallpaper sein. Vielleicht möchten Sie ein kostenloses E-Book oder etwas Wesentlicheres verschenken. Nichtsdestotrotz wird Ihnen das zeigen, wie es gemacht wird. Ich klicke jetzt auf Formular bearbeiten, und wir haben das durchgemacht, aber das Fenster sieht ein wenig anders aus.
Ich rate Ihnen, dass es keine Option geben
wird , dies zu einer Lichtbox zu machen, weil die Standard und die einzige Möglichkeit, dies auf einer Landingpage zu tun, besteht darin, dass das Formular selbst ein Popup-Fenster ist. Denken Sie daran, dass der Formularname der Titel eines Bestätigungsbildschirms ist. Ich werde es einfach betiteln, Genieße. Ich lösche Betreff- und Nachrichtenfelder. Aus Gründen etwas Anderes werde
ich nur ein Website-Feld hinzufügen, um
sicherzustellen, dass es nicht erforderlich ist, aber Leute bitten, ihre Website einzugeben. Im Speicher, wieder, werde ich sicherstellen, dass, wenn Sie Ihre E-Mail hier als Standard haben,
trennen Sie sie und stellen Sie eine Verbindung zu einem Standard-E-Mail-Capture-Anbieter her. Über und Fortgeschrittene, Ich werde diesen Submit-Button
titeln, mein Hintergrundbild herunterladen und ich werde die Nachricht hier mit dem Download-Link ausfüllen. Denken Sie daran, in Dateien, ich habe immer noch diese vorhandene Datei hier drüben. Ich gehe in die vorhandene Datei, wähle sie aus, öffne es neues Fenster, und dann kann ich Speichern drücken. Aber nur um Sie daran zu erinnern, genau hier,
alles, was ich Ihnen im vorherigen Video über Post einreichen HTML gezeigt habe, wird hier funktionieren. Dazu gehört das Styling des Typs wie das Zentrieren und das Markieren mit einem H1- oder H2-Tag. Aber es enthält auch, was ich Ihnen am Anfang dieser Klasse gezeigt habe, wo Sie Benutzer auf eine neue Seite auf Ihrer Website umleiten können und zu diesem Zweck könnte
das tatsächlich eine gute Idee sein. Sie können sie auf eine Seite umleiten, die Sie über Ihren Download gemacht haben. Nehmen wir an, Sie haben ein kostenloses E-Book oder ein Paket von Proben für Menschen, um Kalligraphie zu lernen. Nun, Sie können sie über dieses Formular auf diese Seite umleiten, wo Sie Beispiele zeigen, Sie zeigen ihnen, wie Sie es verwenden, Sie werben für das Produkt, aber diese Website wird nur die Menschen zugänglich
sein, die diesen ersten Schritt durchlaufen haben . Jetzt muss ich hier Speichern drücken und wenn ich den Bildschirm mit diesem Pfeil erweitern, kann
ich das Formular auf dieser Seite testen, anders als bei vielen anderen Seiten. Großartig, ich klicke darauf, all dies kommt auf und ich klicke auf mein Hintergrundbild herunterladen.