Wie man eine benutzerdefinierte Squarespace Website in 7. 1 mit dem neuesten Builder erstellt (Juli 2022)

1. Einführung: Hey, da kümmert sich um Karen, co-creative hier in diesem Kurs, wir werden eine komplett benutzerdefinierte Squarespace-Website erstellen. Wenn Sie also eine Squarespace-Website besuchen möchten, diese aber etwas ausgefeilter und professioneller gestalten möchten und nicht nur das Layout des Ausstechers, das mit einigen Demo-Inhalten geliefert wird Das hat Squarespace. Dieser Kurs ist für Sie bestimmt. Sie müssen kein fortgeschrittener Website-Mitarbeiter sein, um dies tun zu können. Squarespace ist ziemlich benutzerfreundlich und solange Sie wissen, wo Sie bestimmte Dinge anpassen und wie Sie bestimmte Elemente selbst hinzufügen können. Das wirst du auf jeden Fall schaffen. Ich schlage vor, dass Sie Ihre Kopie und Ihre Bilder bereits für Ihre Website ausgewählt haben. Und wir starten Ihr Squarespace-Konto, fügen Ihre Seiten hinzu, arbeiten mit den Demo-Inhalten und passen sie an, indem wir einige sehr grundlegende Dinge wie Code durchgehen Ihr Squarespace-Konto, fügen Ihre Seiten hinzu, arbeiten mit den Demo-Inhalten und passen sie an, indem wir einige sehr grundlegende Dinge wie Code durchgehen einige sehr grundlegende Dinge wie Code Änderungen, damit Sie die vollständig benutzerdefinierte Website erstellen können. Ich nehme dich über die Schulter und zeige dir einige Optionen. Dies sind Squarespace-Websites , die vollständig benutzerdefiniert sind. Normalerweise fange ich mit einem Demo-Layout an, aber ich bleibe nicht bei ihnen. Also ja, lass mich meine Bilder loswerden. Es ist abgeschnitten. Also nochmal, dieser ist für Friseurseiten. Also ganz anders. Der erste war Ballett. Dieser ist ein Gesundheitscoach. Diese sehen jedoch nicht wie der zahnärztliche Inhalt aus, auf dem sie basieren , da sie vollständig angepasst sind. Also werde ich dir im nächsten Video zeigen, wie das geht. Sobald wir angefangen haben, richten wir dein Squarespace-Konto ein und legen los. In Ordnung, wir sehen uns da drin. 2. Squarespace beginnen: Okay, hier fangen wir in diesem kurzen kleinen Teil an. Ich werde dir zeigen, wie du dein Squarespace-Konto zum Laufen bringst. Lass uns gehen. Du gehst natürlich auf squarespace.com. Okay, lass uns hier zu meinem Video gehen. Sie werden also entweder auf Erste Schritte klicken wollen. Wenn du noch kein Squarespace-Konto hast. Das bringt Sie direkt zu diesem Template-Builder. Für mich melde ich mich an und treffe dich in diesem Bereich. Also bin ich eingeloggt. Gleicher Vorgang, erstellen Sie eine Website, leere Vorlage oder eine andere Vorlage. Ich werde auf eine andere Vorlage klicken. Und jetzt bin ich wieder da, wo du bist. Wenn Sie auf Erste Schritte klicken, wählen Sie hier nur eine Vorlage aus und auch hier werden Sie vollständig angepasst . Also lass dich nicht zu sehr darauf einlassen. einfach etwas aus, von dem Sie glauben, dass es schön und sauber ist. Wenn es das ist, was du anstrebst oder ein bisschen mehr Persönlichkeit hast, wollen sie das. So können Sie so viel durchgehen und stöbern, wie Sie möchten. Ich mache weiter. Ich habe diesen gesehen, mit dem ich anfangen möchte. Dann haben Sie auch eine Vorschau, wenn Sie etwas näher sehen möchten . Aber auch hier wird dies komplett angepasst. Also fühle dich nicht verheiratet, du musst damit verheiratet sein. Ich richte gerade den Demo-Inhalt ein. Das ist also der Titel deiner Seite. Normalerweise empfehle ich, dass der Titel Ihrer Website Ihr Unternehmen beschreibt. Ich mache das für einen Kunden. Okay. Und im Süden können Sie das auch später ändern, also machen Sie sich darüber keine Sorgen. Dies führt Sie durch ein sehr schnelles Tutorial. Sie können das schnell durchstehen , weil ich Ihnen alles zeigen werde , was Sie wissen müssen. Okay, jetzt hast du also im Grunde deine Seite eingerichtet. Zuerst gehe ich gerne ins Marketing, SEO. Stellen wir sicher, dass der Titel so aussieht, wie Sie es möchten, oder? Und dann war's das wirklich. Sie haben Ihre Site eingerichtet. Wenn Sie eine Domain sofort verbinden möchten, können Sie dies hier tun und die Schritte zum Abrufen einer Domain ausführen, oder bedeutet das, dass Sie Eigentümer sind? Abgesehen davon wird Ihre Website gestartet, sobald Sie sich durchklicken und diese Vorlage erhalten sobald Sie sich durchklicken und diese Vorlage erhalten haben. 3. Seiten hinzufügen: In Ordnung, wenn Sie also eines meiner anderen Website-Tutorials gesehen haben , wissen Sie, dass ich zuerst gerne damit beginne alle meine Webseiten zu erstellen. Dies gibt mir die Möglichkeit, die Kopf- und Fußzeile genau zu gestalten und alle meine Seiten ziemlich schnell durchzugehen und anzupassen. Es ist also nur ein Teil meines Prozesses. Du musst nicht unbedingt hier anfangen. Aber was ich hier in unsere Demo-Website komme, ist wieder, ich mache einfach weiter und erstelle, stelle sicher, dass ich alle Seiten habe, die ich will. Das wird also in deinem Seiten-Tab sein. Und Sie müssen sicherstellen , dass Sie alle Seiten haben. Also für mich, die Homepage, okay. Das werde ich tatsächlich löschen. Ich kann die Startseite nicht verlassen und lass uns eine neue Homepage erstellen. Und wieder, fange sogar mit dem Layout an. Fangen wir damit an. Das wird Startseite als Startseite sein. Du, dieses Zahnradsymbol als Startseite eingestellt. Okay, dann brauche ich die Seite einer Klasse. Und Sie möchten sicherstellen, dass all dies nicht gleich sein muss. Der Seitentitel gibt an, wie die Seite hier im Navigationstitel angezeigt wird, so wie sie im Navigationsmenü angezeigt wird . Und die Kugel würden Sie eingeben. Und dann brauche ich meine About-Seite. Ich rufe die Fakultät an. Hier kann es hilfreich sein, wenn Sie Ihren Kaffee bereits so planen, dass Sie genau wissen, was Sie brauchen. Dienstleistungen. Ich lasse das Privatunterricht sein. Und wenn Sie diese bearbeiten, werden Sie feststellen, dass die kleinen Demo-Anzeigen , die neben jeder Seite erscheinen, verschwinden. Sie haben einen Namen mit zwei Wörtern. Es ist am besten, sie zu trennen. Ich werde einfach weitermachen und all das Verhalten hier oben löschen . Und ich mache das einfach. Das bleibt zusammen. Demo da raus. Ich brauche eine weitere Seite, der ich erwähnt habe, dass sie noch nicht funktionieren wird. Also für mich, wenn ich diese Dinge in denselben Ordner hinzufügen muss . Entschuldigung, das war nicht der Ordnerordner hier unten. Jetzt befinden sich diese Dinge, die Sie sehen werden, in einem Dropdown. Das ist mein Kontakt ist nicht verlinkt, weil Kontexte die Schaltfläche Ich werde dir zeigen, wie man das im Header-Teil buchstabiert. Aber im Wesentlichen hören, um zu kreieren. Als Nächstes brauche ich einen Veranstaltungskalender. Das wird also eine Kalenderseite. Ereignisse , die ein bisschen anders sein werden. Ich will es nicht. Okay, das ist die Reihenfolge, die ich will. Okay, wir haben unsere Seiten hier. Wir werden sie einzeln durchgehen und anpassen , beginnend mit dem nächsten Video. 4. Stil aktualisieren (Schriftarten, Farben): Bevor wir also die einzelnen Seiten bearbeiten, gibt es einige Stellen, an denen Sie Textänderungen, Farbänderungen und all das hinzufügen Textänderungen, Farbänderungen und all das Ihrer Squarespace-Website Textänderungen, Farbänderungen und all das hinzufügen können. Also nehme ich dich mit in den Style-Editor und zeige dir das. Denn in unserem Squarespace kommen wir zum Design der Seite. Auch das sind nur die Registerkarte „Design“ und die Stile für Einblicke. Und hier können Sie Ihre Schriftart- und Farbauswahl treffen. Ich schnappe mir meine Farbpalette. Wenn wir also zwei Farben haben, sehen Sie diese Palette hier. Sie können nach Bedarf Ihre eigenen Farben hinzufügen. In Ordnung? Also wenn auf die Palette bei den Farben. Also warte, du wirst wahrscheinlich bleiben wollen , damit wir hier Weiß haben. Ray, ich möchte das etwas grauer machen. Mach das, also ist es ein bisschen, okay. Und dann hole ich mir einen Farbcode von einem Typen, der nicht auf meinem Bildschirm ist. Also, wenn ich diesen auswähle, willst du den Code ändern? Du hast nur einen. Ja. Dann möchten Sie wahrscheinlich eine Ihrer Farben als Schwarz belassen , auch Schwarz oder Marine oder Dunkelgrau. Etwas für siehe F7 für FDI. Klar, warum sich das nicht so ändert, dass es die Farbe ist, die ich haben möchte. O aus diesem Grund. Wenn also etwas nicht richtig funktioniert, stellen Sie sicher, dass Sie es aufgeschrieben haben. Jetzt sind das die Farben, die ich will. Wenn wir dann zu Fonts gehen, mache ich eine Minute Pause, während ich mir meine Schriften ansehe. Ordnung, wenn wir also im Schriftbereich sind, können Sie sehen, dass wir Optionen haben, um die Überschriften und Absätze und dann Verschiedenes zu ändern . Also wähle ich Überschriften Familie aus und durchsuche dann alle Schriftarten. Sie können auch eine Schriftart eingeben wenn Sie wissen, wonach Sie suchen. Pro kann getanzt werden. In Ordnung, und Sie können die Größe verschiedener Schriftarten und Überschriften ändern . Machen Sie sich keine Sorgen, wenn Sie Ihre Schrift nicht sehen. Hier kannst du vorwärts springen. Es gibt eine CSS-Code-Anleitung zum Hinzufügen von benutzerdefinierten Schriftarten zu Ihrer Website. Aber im Moment werden wir damit fortfahren. Wenn Sie also Ihre Schriftarten hier finden , können Sie damit fortfahren. Wenn nicht, kannst du vorwärts springen. Also Absätze, das Gleiche. Und Buttons haben auch ihre eigene Schrift. Sag „Standard“ dafür. Und stellen Sie sicher, dass es bei allen Schaltflächentypen, die Sie durchlaufen und auswählen, gleich sein soll . Dann Verschiedenes. Ich werde auch einen Myriad Pro machen. In Ordnung, jetzt haben wir alle unsere Schriftarten und Farben angepasst . Auch hier können Sie , wenn Sie eine benutzerdefinierte Schriftart hinzufügen müssen, dies tun. Und du wirst zwei sehen, wenn du hier im Editor bist. Wenn Sie auswählen, haben Sie auch die Möglichkeit, eine andere Farbe auszuwählen oder eine benutzerdefinierte Farbe hinzuzufügen. Sie haben also mehr Optionen als diese Farben. Aber eigentlich geht es um Geschwindigkeit und Effizienz. Sie sollten sicherstellen, dass Sie ein weißes und ein schwarzes Dunkelgrau haben . Weiß für Hintergründe, Schwarz Dunkelgrau für Schriften. Und ich tendiere dazu, eine hellere Farbe zu haben. Ich bin so grau oder braun. Auf diese Weise haben Sie andere Optionen als Hintergrundfarben. Okay, das ist also nur dein Stileditor-Bereich. Bevor wir auf jede Seite einzeln gehen, werden wir als Nächstes unsere Kopf - und Fußzeilen erstellen. Bleiben Sie also dran und fahren Sie der nächsten Lektion unter fort, wie Sie diese anpassen können. 5. Header bearbeiten: Okay, jetzt, wo wir unsere Farben und Schriftarten hinzugefügt haben, der nächste Schritt darin, die Kopfzeile zu stylen. Ich werde dich jetzt dazu bringen, das zu sehen. In Ordnung, also kommen wir hier rüber, um den Header zu stylen. Sie schienen auf jede Seite zu gehen , auf der sich die Überschrift befindet, die zu diesem Zeitpunkt alle sein sollten. Also gehst du einfach weiter und klickst auf Bearbeiten, Seite bearbeiten Header. Und dann hier, Seitentitel und Logo. Hier können Sie Ihr Logo hinzufügen. Und hier kannst du die Höhe verstellen. Und dann haben wir hier einige Optionen was Sie anzeigen möchten. Warum willst du den Button nicht hier haben oder nicht? Wenn du also nicht willst, dass der Button das sagt, dann ist der Stil da. Hier haben Sie ein paar verschiedene Optionen. Und ich habe ein Video, das viel detaillierter darauf eingeht . Dies ist jedoch solide In diesem Fall wählen Sie einfach den Hintergrund und die Navigationsfarbe. Dies ist nützlich, wenn Sie etwas verwenden möchten, das von Ihrer Farbpalette unterscheidet. Andernfalls ist das Thema in Ihrer Farbpalette enthalten. Sie sehen also, dass ich alles auswählen kann , was Teil meiner Farbpalette ist. Wenn sich Ihr Logo nicht auf einem transparenten Hintergrund befindet, Sie sicherstellen, dass es weiß ist. Andernfalls behebt ein transparentes Hintergrundlogo dieses Problem ziemlich schnell. Das sind also deine Optionen dort. Also das ist lass mich das machen. Das ist also, wo es nicht einfach ist. Lass uns jetzt sehen hier. Wie feste Position. Also jetzt lass uns Mädchen, ich will nicht mit mir ins Rollen kommen. Eine Sekunde hier. In Ordnung, diese Option ist also, dass sie einfach nicht angezeigt wird, wenn Sie sich im Bearbeitungsmodus befinden, sondern für den einfachen festen Header. Eine feste Position bedeutet also, dass die Kopfzeile beim Scrollen angezeigt wird. Feste Position ist aktiviert, wenn wir et cetera, Sale Basic, treffen , das sieht so aus. Wo es an Ort und Stelle bleibt. Oder wenn wir den Site-Header bearbeiten und ihn zurückscrollen lassen. Das erzeugt nur einen kleinen Effekt, bei dem wir den Header eigentlich nicht so oft sehen. Wenn ich scrolle, sehe ich, dass es irgendwie verschwindet. In Ordnung? Wenn Sie also Ihr Logo haben und alle mit all dem zufrieden sind, sollten Sie als Nächstes diese Schaltfläche besonders groß erscheinen, was sie auch tut. Also klickst du darauf, es wird. Das ist also die Breite, die Höhe, um die ich mir Sorgen mache . Schon wieder da. Dies ist für primäre Tasten, sekundäre Tasten, die Sie möglicherweise erstellen müssen. Das ist also eine sekundäre Taste spielen. Das ist eigentlich ein sehr tertiärer Knopf. Mal sehen. Das ist nicht nur deine Buttons-Seite. Das wird nicht bearbeitet. Okay, aber das macht unsere Knöpfe hier oben kleiner. Und genau das möchte ich tun. Jemand hat Speichern gedrückt. Wenn Sie möchten, dass die Schaltfläche eine andere Farbe hat. kannst du auch haben, tut mir leid. Hier haben wir diese Option für soziale Links. Option, um in die Sprache wechseln zu können. Sie können dies aktivieren, wenn Sie eine Geschichte haben, die den Warenkorb anzeigen möchte . Hier. Ich werde diesen Stil tatsächlich in solide ändern. Und dass es mir die Möglichkeit gibt, den Button zu ändern. Das gibt mir keine Option. Dann kommst du zum Thema. Fehler mit dem letzten, aber ich komme her und drücke dafür auf Speichern. Site-Stile, Farben, neueste , wählen Sie die neueste aus. Hier gibt mir den Knopf. Hier. Wenn ich die Tastenfarbe ändern möchte, kann ich eine benutzerdefinierte Farbe erstellen oder aus meiner Palette auswählen. Mal sehen, was mir besser gefällt. Das gefällt mir besser. Palette nochmal. In Ordnung, so würden Sie also Farbe Ihrer Schaltflächen ändern. Der Header sieht also ziemlich gut aus. Wenn Sie sich den Leitfaden für benutzerdefinierten CSS-Code ansehen, werden Sie Optionen sehen. Ich persönlich möchte, dass Sie die Unterstreichung von diesen entfernen , also werden wir das gegen Ende tun. Aber wenn Sie das jetzt tun möchten, können Sie den CSS-Leitfaden dafür suchen und zu diesem Abschnitt springen. Andernfalls werden wir uns im nächsten Video mit der Fußzeile der Website befassen, die sich hier unten befindet. 6. Styling Footer Layout: Als Nächstes werden wir uns mit der Fußzeile Ihrer Website befassen. Und der Grund, warum wir zuerst die Kopf- und Fußzeile erstellen, ist dass sie sich auf jeder Seite Ihrer Website befinden. Auf diese Weise können Sie beim Gestalten Ihrer Website, dem eigentlichen Hauptteil der Seite, sehen, dass alles mit der Kopf- und Fußzeile übereinstimmt. Also lass uns das machen. Also wählerische Tür im Hintergrund. In Ordnung, also hier ist das Flattern, je nachdem, welche Art von Demo-Vorlage Sie ausgewählt haben. Das sieht vielleicht ganz anders aus, ist aber nicht zu besorgt. Du kannst also reingehen und alles ändern. Also wieder, du gehst einfach zu jeder Seite, auf der die Unschärfe drauf ist, und klickst auf Bearbeiten, Fußzeile. Und hier haben wir die gleichen Optionen wie jedem der Seitenbereiche. Die Kopfzeile ist auf dem Foto auf diese Weise etwas anders, aber dieser ähnelt allen anderen Seitenabschnitten. Sie müssen also nur den Abschnitt bearbeiten. Wenn Sie die Hintergrundfarbe ändern möchten. Hier. Ich bevorzuge es, wenn es so ist. Ich schaffe das. Ich denke das tue ich. Das kann ziemlich cool sein. Ich möchte das aber ausprobieren. Dann liegt dieser Inhalt bei Ihnen, was Sie zeigen möchten. Also füge ich hier den Firmennamen hinzu. Weltall. Sie haben also auch ihre Adresse und die Fußzeile. hätten sie gern. Hier unten. Wenn Sie Social-Media-Symbole wünschen, können Sie diese überall platzieren. Das würde durch das Hinzufügen eines Blocks geschehen, soziale Links. Und du klickst und ziehst. Dies ist eine sehr neue Funktion. Also werde ich selbst funky damit aussehen. Aber im Grunde sind sie die Art von Grid-Option. Du bist irgendwie cool. dieser blauen Box wird es enden. Squarespace hat das gerade veröffentlicht und ich bin wirklich kein großer Fan, aber keine zwei hier. Perfekt. In Ordnung, da hast du's. Dann, wenn das Layout, das Design, will, dass sie richtig sind. Ich sollte sie hier unterstellen. In Ordnung? Damit du sehen kannst, wann du etwas ziehen kannst, erscheinen diese Quadrate und das ermöglicht es dir, Dinge ein bisschen eleganter zu bewegen , als es früher im alten Squarespace-Editor möglich war. Hier wollen wir Quick Links. Hier. Eigentlich werde ich hier weitermachen. Und hier wird das sein, du wirst sehen, ob ich das getan habe. Ich hatte so viel Platz. Also drücken Sie Enter. Wenn du Shift Enter machst oder ich glaube Command Enter auf einem Mac, bekommst du weniger Speicherplatz. Also Aufführungen. Was will ich sonst noch? Lass uns Liederabende machen, besondere Ereignisse. Und wenn ich das kleiner machen muss, will ich das in einer frischen Box sein. In Ordnung. Das ist also gut für mich. Sie können auch ein Bild hinzufügen, wenn Sie sagen möchten, dass Sie Ihrer Website eine Logo-Version hinzufügen. Also nochmal, Sie würden einfach klicken und das an die gewünschte Stelle ziehen. dieser blauen Box wird es enden. Sehen Sie hier, dass ich das dort zwar nicht brauche, aber wenn Sie weitermachen und das behalten möchten, können Sie diesen Block entfernen. Andernfalls sage ich, dass dieser Abschnitt fertig ist. Um das zu tun, Done Save. Okay, jetzt ist unsere Fußzeile fertig. 7. Fluidmotor (Builder) Grundlagen: Okay, jetzt, da wir unsere Kopf- und Fußzeile gelöst haben , werden wir uns mit einigen Squarespace-Grundlagen befassen, wie man Seitenänderungen erstellt und Änderungen vornimmt. In Squarespace Seven 0.1 gibt es einen neuen Builder namens Fluid Engine. Dinge sehen also möglicherweise anders aus als beim letzten Mal, als du eine Squarespace-Website erstellt oder das Squarespace-Tutorial angeschaut hast. Ich werde es dir zeigen, dich über meine Schulter ziehen und dir zeigen, wovon ich rede. Um also eine Seite zu bearbeiten, werden sie hierher kommen und auf Bearbeiten klicken. Sie können die Desktop- oder Mobile-Ansicht bearbeiten. Und der neue Builder hat einige Änderungen vorgenommen, sodass Sie die Dinge wirklich separat bearbeiten können , sodass die Dinge schneller reagieren können , wenn Sie mit der Bearbeitung fortfahren. Hier haben wir also, wie im Fußzeilenbereich, jeden Abschnitt bearbeitet oder Blöcke hinzugefügt. Also wenn ich einen Block hinzufüge, was ich mehr Text hinzufügen möchte, kannst du die Hintergrundbilder sehen. Es ist etwas schwieriger, aber wo ich mich bewege , wird es in diesem blauen Rechteck hingehen . Jetzt ist der Text da. So würden Sie also jedes Element hinzufügen. Und Sie können sehen, dass es eine ganze Reihe verschiedener Dinge gibt. Bild, Schaltfläche, Video, Text, bearbeiten Sie den Hintergrund eines Abschnitts, der sich in den Abschnittseinstellungen befindet. Wenn Sie also kein Foto möchten, sondern nur einen Hintergrund, sei es ein weißer Hintergrund oder ein anderer Farbhintergrund, würden Sie das Bild löschen. Und ich möchte diese Farbkombination ändern, die Sie aus Ihrer Palette auswählen können. So wie das. Diese farbigen Hintergründe haben auch einen anderen Overlay-Effekt auf die Bilder. Das wird also wahrscheinlich einen anderen Effekt auf ein Bild haben, als ein anderes. Also habe ich ein Bild hinzugefügt, das du von deinem Computer hochladen kannst. Wenn Sie Stock-Fotografie verwenden müssen, können Sie Stock-Bilder aus Ihren Bibliotheken durchsuchen. Wenn Sie ein Bild haben , das Sie an mehreren Stellen auf Ihrer Website verwenden möchten , können Sie es aus der Bibliothek auswählen. Nein voraus und stöbern Sie in Stockbildern. Ich habe Fotos für die Website, aber weil ihre Kinder und Zuschüsse Klassen und während sie veröffentlicht haben , um auf der Website zu sein , die ich mir im Kurs veröffentlicht habe. Ich werde Stockfotografie verwenden, den Kurs machen. Wie Sie hier sehen können, bestimmt dieser Kreis den Fokus des Bildes. Wenn ich es also nach oben bewege, wird es etwas besser sein, mehr, damit ihr Gesicht nicht abgeschnitten wird. Also wenn du rausklickst , macht das das. Beachten Sie außerdem, dass Sie auch einen Einschub verwenden können, der mehr Leerraum um die Bilder herum erzeugt . Also das gefällt mir. Lass es voll bluten. Das ist ein bisschen schwer zu lesen. Ich mache weiter und werde das los. Befreien Sie sich von der Schaltfläche und löschen Sie alles, was gerade klickt, und löschen Sie sie. Und ich werde auf weitere Grundlagen des Homepage-Designs eingehen. Die Ausrichtung, die Höhe ist, das wird groß bleiben. Das ist nur eine Menge Inhalt oben, in der Mitte. Della will es in der Mitte haben. Aber da es immer noch nicht zentriert ist, muss ich nur klicken und ziehen. Also jetzt klicken, halten, ziehen. Jetzt ist es viel zentrierter. Die Farben sind ein bisschen hart, also werde ich sehen, ob ich das ändern kann. Das ist immer noch schwer. Aber Sie können sehen, dass ich das Hintergrundbild nicht ändere, aber wenn ich mich nur ändere, ändert sich das. Das ist also ein bisschen einfacher. In Ordnung, das sind also deine Hintergründe. Auch wenn dies der Kopfbereich ist , gilt derselbe Prozess für alle anderen Abschnitte. Texte, die man meistens einfach auf einer Seite bearbeiten kann. Also wenn ich etwas davon löschen und meine Kopie kopieren und einfügen möchte, kann ich das tun. Ich kann mich auch leicht ändern. Also möchte ich, dass das kleiner wird. Das soll größer sein. Wenn ich das auswähle, gibt mir das Bild die Möglichkeit, es zu ersetzen. Schreiben Sie der Schaltfläche eine SMS Wenn ich das auswähle , habe ich die Möglichkeit , die Links zu erstellen. Wenn ich auf dieses Zahnradsymbol klicke, kann ich es sofort mit einer anderen Seite auf der Website verbinden. Dies ist nur ein wirklich schneller Überblick darüber, worauf Sie bei diesem neuen Builder achten möchten . Wir haben eine Menge davon. Lass mich da rüber gehen. Ja. So kann ich Text über ein Bild legen. Aber ich habe mit dem neuen Baumeister viel mehr Agilität in Bezug auf das Platzieren von Gegenständen. Wenn ich das also machen will, kann ich auch sicherstellen, dass es nicht über dieses Bild geht. Stellen Sie sicher, dass dies näher dran ist. Also klicke und ziehe macht die Dinge viel flexibler. Auch hier gilt: Wenn das zu viel ist, haben Sie mit dem neuen Builder viel mehr Flexibilität. Aber denken Sie an das Klicken und Ziehen. Sie platzieren ein Bild als Hintergrund. sind wirklich die hohen Töne dieser Abschnitte. einem späteren Video des Kurses werde ich auf einige der spezifischeren Dinge wie Newsletter-Anmeldungen und Kontaktformulare Newsletter-Anmeldungen und Kontaktformulare eingehen. Aber im Moment ist das eine Art schneller Überblick über die Verwendung des Neuen. Da es Fluid Engine heißt, der neue Squarespace Builder. Also hier ist es. Ja, Flüssigmotor. In Ordnung, beim nächsten gehe ich einige grundlegende Layouts auf der Homepage und fange an, diese Seite aufzubauen . Ich mache dasselbe für eine About-Seite und eine Services-Seite. Nur damit Sie verschiedene Praktiken und Best Practices zum Erstellen dieser wichtigen Seiten auf Ihrer Website sehen können Best Practices zum Erstellen . 8. Über das Seitenlayout Grundlagen: In Ordnung, jetzt kommen wir schnell zu Ihrer About-Seite und ich zeige Ihnen einige Layout-Tipps dafür. Wenn ich auf der Squarespace-Website bin, die diese ist, ist die About-Seite die Fakultätsseite. Also habe ich es umbenannt. Aber wenn Sie es sich ansehen, ist dies eine dieser Vorlagen. Es ist irgendwie, ich weiß nicht, wer das für ein gutes Design gehalten hat. Dieses Bild ist ganz unten in der Mitte von Nirgendwo. Es gibt eine Menge ungenutzter Immobilien, was manchmal nett ist, weil es die IRS gibt, aber manchmal einfach nicht hilfreich ist. Wenn wir das also benutzen würden, eine Sache, die Sie meiner Meinung nach tun könnten wenn Sie kein solches Layout hätten. Sie können dieses Bild also hier nach oben verschieben. Weil so, damit ich das erreichen kann. Ich möchte diesen Text voranbringen. Also das ist das. Jetzt ist es also auf dem Bild. Zieh das wieder ein bisschen raus. Aber das werde ich kleiner machen. Zu klein, denn jetzt hast du es. Also, wenn Sie ein Unternehmen sind , das nur ein einfaches braucht, nur wer wir sind ein bisschen von Ihrem Leitbild. Dies ist ein Layout, das für Sie funktionieren könnte. Sie würden natürlich einen Teil dieses zusätzlichen Leerraums unten töten wollen . Für die Bauchseite. Für den Bauch, sagen wir, wir werden tatsächlich ein paar verschiedene Leute haben. Das wäre also wie ein Ausbilder. Wenn wir mehr davon benötigen, könnten wir uns den Abschnitt ansehen, in dem dieser Abschnitt eine andere Hintergrundfarbe alternative Analyseleiter. Um diesen Abschnitt zu bekommen. Ausbilder. Drei. Es wird eine gute Möglichkeit sein , all die verschiedenen Strukturen zu planen. Wenn Sie eher eine Coaching-Praxis haben, kann ich Ihnen meine About-Seite auf Skillshare nicht zeigen, aber dies ist ein Texter bei einem Freund von mir. Was sie also macht, ist wieder vorzustellen, wer sie ist und sie möchte sehr sympathisch sein. Sie hat also diese Art von Verbindungspunkten. Und dann legt sie den Texter aus. Und dann hat sie im Grunde genommen ihre About-Seite verwendet, um mitzuteilen, warum ihre Dienste unterschiedlich sind. Und sie hat eine Geschichte darüber wie man jemandem eine Menge Geld für das Kopieren bezahlen könnte , oder wenn man ein neues Unternehmen ist, wird sich das ändern, die Dinge werden sich ändern. Sie hat also eine andere Philosophie hinter ihrer Kopie. Sie spricht also über die Philosophie. Ihre About-Seite arbeitet also wirklich daran zu sagen, warum sie anders ist. Eine Sache, die sie hier hat. Er oder sie muss meine Dienste in Anspruch nehmen. Der springende Punkt auf der About-Seite besteht wirklich darin, das Vertrauen in Sie aufzubauen , um dann Ihr Produkt oder Ihre Dienstleistung zu kaufen. Also gibt sie hier die Option. Und dies ist eine Squarespace-Website, auf der sie auch Verbindungsstellen hat, die sie als Verbindungspunkte bezeichnet. Und sie hat das eingefügt, als sie diese Grafik gemacht hat , in der sie verwendet. Aber Sie könnten auf Canva etwas Ähnliches tun, um eine Grafik zu erstellen , und diese dort einfügen, um Verbindungspunkte herzustellen. Das ist ein Workaround. Aber dann hat sie diese längere Geschichte. Du willst also eine so lange About-Seite haben. Ist das eine Idee, wie Sie Ihre About-Seite wirklich nutzen können , um Ihre Dienste zu unterstützen. Andernfalls würde ich vorschlagen, es kurz und einfach zu halten. Erklären, was dich anders macht? Was macht Ihr Produkt anders? Was unterscheidet Ihr Unternehmen? Und dann bringen Sie sie vorbei und fügen Sie Ihrer Serviceseite eine Schaltfläche hinzu. Also um diese Schaltfläche zum Blockieren von Anzeigen zu machen. Wir hätten also für jeden von ihnen eine Schaltfläche, die wie „Kurse anzeigen “ aussieht, weil wir hoffen, dass sie jetzt genug über diese Person als Kursleiter gelernt haben . Sie wollten zu den Klassen, die sie unterrichten. Die About-Seite ist also wirklich dazu gedacht, die Leute auf die Services-Seite zu bringen . In Ordnung, und darüber werden wir als Nächstes sprechen. 9. Squarespace 8: Okay, jetzt sind wir im Homepage-Bereich. Hier werden wir einige dieser Abschnitte durchgehen , die Ihre Homepage vielleicht haben möchte. Dies basiert auf gerade durchgeführten Konvertierungsprinzipien und Benutzererfahrung. Also nehme ich dich über die Schulter und mache ein paar Dinge. Wir sind also wieder auf unserer Demo-Homepage. Eine übliche Layoutoption ist dieses Helden- oder Bannerbild oben auf der Homepage. Das nennt man das oberste Drittel. Es soll die Aufmerksamkeit Ihrer Zuschauer auf sich ziehen. Für diesen Zweck dieser Seite ist es eine Tanzkompanie und sie bieten Ballettunterricht an. Also wollen wir den Leuten im Grunde sagen, dass es um Ballett geht. Wir haben hier also ein Bild , das dazu spricht. Wenn Sie kein Unternehmen haben, das so stark sein muss , oder wenn es nicht etwas hat, das visuell sehr repräsentativ für das Unternehmen ist , das Hero-Image möglicherweise nicht das beste was Sie in das obere Drittel setzen möchten, können Sie stattdessen einige Leittexte darüber platzieren. Und Sie sehen, dass Sie darüber ganz einfach einen Abschnitt hinzufügen können. Sie können einen leeren Abschnitt erstellen oder so etwas ist eine gute Option. Der Text hier wird auffallen, insbesondere wer dieses Bild etwas kürzer gemacht hat, was ich mit dem neuen Builder so machen kann. Wenn wir also so etwas hätten, hilft uns dieser kleine blaue Pfeil Speichern in diesem Abschnitt. Ich frage mich, ob ich die Höhe bekommen muss, die diesen Leerraum hat. Wir müssen nur klicken und alles und die Drogen näher heranziehen . Um diese Sache zu verkürzen, ist dies nicht gerade der Aufrufstil einer Website, die dies hier oben statt dessen hat. Aber wenn Sie keine sehr gute visuelle Darstellung haben, haben Sie die Möglichkeit, hier immer noch ein Bild zu haben. Aber Sie wissen, es umfasst nicht wirklich was Ihr Unternehmen tut. Dies könnte ein besserer Weg sein, da dieser Text immer mehr hervorstechen möchte als dieser Text. Und wir können das sogar verkleinern. Auf diese Weise kommen wir schnell zum nächsten Abschnitt. Das ist also etwas, wozu ich die Leute ermutige. Man muss nicht immer das tun, was stilvoll ist. Ich werde darüber nachdenken, was für die Vermittlung Ihrer Botschaft am effektivsten ist , insbesondere wenn es sich um Immobilien im oberen Bereich Ihrer Website handelt . Ich werde diesen Abschnitt tatsächlich nach unten verschieben. Da funktioniert das. Ich werde das Logo hier anstelle dieses Textes platzieren. Hier möchte ich ein Bild machen. Das ist eine nette Sache und macht es wirklich einfach, ein Bild über ein Bild zu legen . In Ordnung? Je nachdem, was Sie tun möchten, um dies nicht zu tun, versuchen Sie, zu tun, versuchen Sie eine Option wie diese oder eine Option wie diese oben auf Ihrer Website zu tun. Das nächste, was Sie tun möchten, ist den Leuten eine kurze Beschreibung dessen zu geben , was Sie tun. Also hier habe ich und nochmal, kopiere das sogar aus deinem Dokument und füge es ein. Du hast ein paar Paare. Ich frage mich das so sehr. Das ist die Kapitalisierung hier. Hier oben und einfügen. Das heißt, es sagt uns genau, was das Geschäft ist. Der Textabschnitt sieht ziemlich groß aus. Ich mache es klein. Und gib ihm auch tatsächlich eine Farbe. Richtig? Das ist bekannt so klein wie ich es möchte. Wenn Sie also diese Höhe erreichen, können Sie tatsächlich Leerzeichen erstellen. Entferne diesen Abschnitt. Eigentlich werde ich den Hintergrundabschnitt dieses hier bearbeiten. Also hier habe ich vielleicht eine Beschreibung und lade diesmal eine Datei von meinem Computer hoch. Hier sehen wir, dass dieser Text jetzt schwer zu lesen ist, also mache ich einfach weiter und mache das. Hier. Wir werden etwas gegen den Button unternehmen. Mal sehen, ob ich diese richtige Ausrichtung machen will. Es ist irgendwie cool. Ich kann das hier ändern. Ich habe tatsächlich ein Angebot auf ihren Websites. Ich werde diesen Bereich benutzen. Dies ist ein gutes Beispiel dafür , wie Sie wiederverwenden können. Das ist also ein Hintergrund , der eingebettet ist. Also werde ich es in der Bibliothek ersetzen. Ich werde es von meinem Computer aus ersetzen. Sie können auch mehr Überlagerungen erstellen , um den Text zum Platzen zu bringen. Ich schätze, das werden wir machen. In Ordnung. Und so ist unser Zitat Josephine Baker Zitat. Ordnung, auch hier auf Ihrer Homepage, dieser Text ist für jedes prägnante Beispiel gedacht das ich gerne im Abschnitt Über mich habe. Also das ist wirklich so, okay, wer sind wir auf den Punkt gebracht, das direkt unter dem Helden oder dem oberen dritten Abschnitt, dann können wir mehr über uns haben. Das ist also unsere Mission. Darin gehen wir tiefer. Ich werde diesen Text bereinigen. Aber um Ihnen nur ein Tutorial für die Layouts zu zeigen, werde ich nicht zu sehr ins Unkraut gehen und das anpassen. Aber als nächstes einen Abschnitt „Über“ haben. Und hier ist das. Ein bisschen Persönlichkeit ist völlig optional. Das nächste, was Sie normalerweise auf einer Homepage haben möchten , ist ein Servicebereich. Das nennen wir einen Wegweiser. Es gibt den Leuten nur Möglichkeit, einfach zu verschiedenen Teilen Ihrer Website zu gelangen. Ich suche, ich werde wählen. Dieser. Kann Abschnitt bearbeiten schaut sich die verschiedenen Apps an, verschiedene Farben. Entscheide, was ich hier machen möchte. Das werde ich nicht tun. Vielleicht möchte ich, dass das weiß ist. Also hier den Inhalt bearbeiten, du kannst sagen, dass ich diesen Titel nicht bearbeiten kann, weil er hier drin ist. Der Titel. Dann brauchen wir für jeden von ihnen etwas. Also der Titel dieser kleinen Sektion, Sommercamps und intensiv. Und dann haben wir die Möglichkeit eines Buttons. Sie würden den eigentlichen Link hier platzieren , wenn Sie bereit sind, ihn irgendwo zu platzieren. Entschuldigung. Und dann, um das Bild zu bearbeiten, würdest du das tun. Also werde ich das für diese Abschnitte ersetzen , es wird tatsächlich wichtig sein, dass alle Bilder die gleiche Größe haben. Sie sollten also sicherstellen, dass Sie sie auf die gleiche Größe oder das gleiche Seitenverhältnis zuschneiden , bevor Sie sie einsetzen. In Ordnung, dann ist Epsilon Max zu früh raus. Also gehen wir zum nächsten. Und ich mache nicht gerne zu viel während es geladen wird, weil es passiert ist, wo es so ist, als würde man diesen Gedankengang verlieren , wenn man ihm zu viel zu tun gibt und das Bild dann nicht geladen wird. Dann würdest du dort einen Link setzen. Oder Sie können den Titel des Button-Textes ändern. Und dann unsere dritte Option, nur weil sie dieselbe Größe hat. Und wieder verwende ich nur Archivfotos , um das zum Laufen zu bringen. Aber so würden wir die Liste machen und ich empfehle, dass dies eine nette Funktion ist, alles schön aufgereiht hält und alles gut auf dem Handy stapelt. Daher schlage ich vor, die Listenfunktion zu verwenden , um diese Art von Wegweiserabschnitten auf Ihrer Website zu erstellen . War mein Titelplatz, nicht fair. Jetzt haben wir unseren Abschnitt für Wegweiser. Das ist also ein insgesamt gutes, sehr sauberes, zugängliches Layout, das für die Leute einfach zu navigieren und dorthin zu gelangen, wo sie hin müssen. Auch diese Schaltfläche würde normalerweise zu einer größeren About-Seite wechseln. Dann werden diese Schaltflächen die Leute zu den verschiedenen Angeboten führen. Da hast du das Homepage-Layout. 10. Dienstleistungen Seitenlayout Grundlagen: In Ordnung, jetzt werden wir über die Serviceseite sprechen und hier werden die Leute entweder alle Ihre Dienstleistungen ansehen oder dies wird die eigentliche Verkaufsseite sein , auf der sie alle kaufen. Kehren wir also zurück zu unserer Squarespace-Website. Wäre eher die Seite einer Klasse. Hier möchten Sie präsentieren. Auf diese Weise ist es irgendwie cool. Es ist fast wie ein Portfolio. Hier möchten Sie vielleicht Ihre verschiedenen Klassenoptionen vorstellen . Also hier könnten wir unsere Klassen ändern. Und dann eine Zusammenfassung. Schreiben Sie aus irgendeinem Grund eine Zeile. Ordnung, also das wäre vielleicht der, also ist das wieder ein Abschnitt ist nur der Einsatz. Um dieses Foto zu bearbeiten, komme ich also nicht in den Hintergrund. Warten wir, bis es geladen ist. Dann würden Sie hier den ersten Klassentyp beschreiben. Und es sollte sein, für wen ist der Service gedacht? Und dann wäre das mehr erfahren. Es ist also der Edit-Bereich. Ich möchte den Button bearbeiten. Und dort würden sie mehr über diesen Service erfahren . Die nächste Seite wäre also eine längere Verkaufsseite. Das ist also eine nette Art, eine Reihe verschiedener Klassen zu gestalten. Sie können auch zurückgehen und den Listentyp-Abschnitt verwenden , den wir zuvor verwendet hatten. Und wenn Ihre Dienste die gleichen sind, können Sie eigentlich keine Angst haben. Möglicherweise haben Sie einen weiteren Hinweis, der Ihre allgemeinen Dienstleistungen oder Ihren Stil oder Ansatz beschreibt . Aber Sie könnten tatsächlich genau dieselben Dienste nutzen und diese erneut auf die längerformatige Verkaufsseite übertragen, eine Verkaufsseite mit längerem Format. Ich werde erneut auf die Website meines Freundes Lauren verweisen , Dienstleistungen. Das ist es also, was sie tut. So ist sie im Grunde so dieser Service so ist. Wenn dies verwendet wird, müssen Sie auschecken. Dieser Service ist verfügbar, wenn Sie ihn auschecken. Gehen Sie also zu den Details. Das ist also eine Verkaufsseite mit längerem Format. Auch hier haben wir Testimonials veröffentlicht und dann gibt es eine Menge Kopien, aber sie verwendet diese breiten Abschnitte. Genauso wie ich vorgeschlagen habe, dass Sie abwechselnde Abschnitte auf der About-Seite verwenden . Du machst genau das Gleiche hier. Aber hier werden Sie all diese Details einbeziehen. Was jemand bekommt, was der Prozess ist, wen es ist und für wen nicht. Wenn Sie mehr als einen Dienst haben, ist Ihre eigentliche Serviceseite eher dieser Wegweiserbereich, wie wir ihn auf der Homepage hatten. Das ist also nur ein sehr kurzer Überblick darüber, wie diese Seiten alle zusammenarbeiten. Aber ich wollte das nicht teilen , damit Sie eine Vorstellung davon haben , wie Sie Ihre verschiedenen Kurstypen präsentieren können. 11. Squarespace Blog gestalten: Jetzt haben wir einige grundlegende Layouts für Ihre Kernseiten durchgesehen. Und du kannst die Squarespace Eins-zu-Eins-Builder-Taktik anwenden und auch das, was du von mir gesehen hast, das Homepage Sie können das verwenden, um im Grunde alle Ihre zukünftigen Seiten zu erstellen. Aber ich wollte ein wenig über die Squarespace-Blogseite mit dieser Seite teilen , die anders ist. Also werde ich auf meine Demo-Seite gehen, und diese Seite hat keinen Blog, aber ich werde hier einen hinzufügen. Zum Zwecke der Demonstration. Um eine Blogseite hinzuzufügen, fahren Sie fort und Sie können das Blog hier sammeln, sammeln und auswählen. Dann erhalten Sie verschiedene Layouts. Das ist also wirklich ein nettes Feature. Sie können genau das auswählen , was Sie möchten. Ich wähle aus, ich empfehle etwas wie dieses oder jenes, das mehr Blogs anzeigt und sie dann überbrückt. Also nennen wir das, diesen Blog. Wir ziehen es in die gewünschte Reihenfolge in unserem Hauptmenü. Und dann haben Sie hier vielleicht nicht so viel zu tun, wenn Sie das Datum verbergen möchten. So gut in dem, was ich gerade gemacht habe, war, dass ich die Blog-Seite bearbeiten gedrückt habe und mir eine Sekunde Zeit nahm um sie zu laden. In Ordnung. Wenn du also auf Bearbeiten klickst, verwalte Posts. Entschuldigung, das war falsch. Sektion. Hier können Sie auswählen, was Sie anzeigen möchten. Wenn Sie also nicht möchten, dass das Datum angezeigt , machen Einheiten neun. Das Gleiche gilt für einen einzelnen Blogbeitrag wenn Sie nicht möchten, dass das Datum angezeigt wird. gleiche Weise können Sie auch Farben erstellen. Also, wenn Sie einen Hintergrund ziemlich Bein machen wollen und dies in das Format setzen wird, erlauben Sie, etwas davon zu minimieren. Also vertikale Abstände, eine Menge. Abschnitt erneut, vergrößern Sie den Abstand zwischen den Pfosten. Sie können mit diesen Zahlen und auch mit der Einfügeoption herumspielen auch mit der Einfügeoption , um die Dinge ein bisschen näher an Ihre Wünsche heranzuführen. Warum ist das so? Sie können das auch nebeneinander ändern, was mir besser gefällt, da dieses andere Layout etwas steifer war. Das ist also wieder eine Option, die Daten wurden erneut angezeigt. Also kann ich wieder hier runter gehen. Keine. Oh, los geht's. Meta-Abstand. Aber hier sind plötzlich Dinge. Ich werde nicht zu viel Zeit damit verbringen da es ein persönlicher Geschmack sein wird. Aber im Grunde würdest du einfach hier durchkommen. Macht keinen großen Unterschied. vertikale Muster wird so sein. Du könntest dich auch ändern. So zu sein. Sie haben hier alle Ihre Möglichkeiten. Und wieder, wenn Sie zum anderen Blogstil zurückkehren möchten , können Sie das grundlegende Grid-Blog erstellen. Und du kannst mit dem Abstand spielen, bis du etwas bekommst, das dir gefällt. Mehr. Da haben wir's. Das war besser. Abstand zwischen Titeln. Sorry, ich spiele nur damit. Warum ist es vielleicht nicht das nützlichste, zumal das Laden eine Weile dauert. Aber ja, irgendwo hier drin werden wir Abstand haben , um diesen unteren Teil zu straffen. Spielen wir also weiter mit diesen Einstellungen. Normalerweise hast du etwas , das dir gefällt Das sieht schon besser aus. Und wenn du fertig bist, spare. Und dann wieder jeder Blogbeitrag Abstand. Sie können mit einigen mehr spielen, aber mit jedem Blogbeitrag, während Sie ihn bearbeiten , können Sie alle diese löschen. Oder du kannst reingehen und sie einfach durch deine Inhalte ersetzen. Auch hier, wenn Sie nicht möchten, dass der Autor den Bearbeitungsabschnitt anzeigt, und Sie können auswählen oder abwählen, was Sie möchten. In einem Blogbeitrag. Sie können ganz einfach Bilder in verschiedenen Bereichen hinzufügen , indem Sie solche Dinge tun. In Ordnung, das ist also eine sehr schnelle Blog-Übersicht. diese Weise richten Sie Ihr Blog auf Ihrer Nachrichtenseite ein. 12. Bearbeiten der Kontaktseite: Die andere Seite, die wir stylen werden, die sich ein wenig von einer typischen Homepage unterscheidet , oder wie Sie den Text einer der Seiten bearbeiten würden Text einer der Seiten bearbeiten , ist die Kontaktseite , auf der man den Kontakt hat bilden. Also zeige ich dir eine Kontaktseite. Wir haben also ein Setup hier drin. Diese wirklich Thetas müssen einfach sein und den Menschen die Informationen geben. Also wollte ich, ehrlich gesagt so viel an diesem ändern. Du könntest wie einen Heldenbereich hinzufügen, wenn du das erst kürzlich möchtest. Und entferne den Knopf. Und lass das einfach sagen Kontakt und wieder mit diesem Baumeister wird das tun. Wollten Sie schon einmal einen Abschnitt auf einer Ihrer Seiten betiteln? Du kannst so etwas machen. Man könnte sich diesen Stil ansehen, er zeigt sich besser und hat ihn. Ansonsten ist das ein nettes, einfaches Layout. Die Sache, auf die Sie achten möchten, ist dieses Kontaktformular. Sie können weitermachen und die Formularfelder hier lassen. Wenn Sie einige dieser Dinge wie die Telefonnummer nicht benötigen , können Sie möglicherweise eines dieser Elemente ändern, die Sie benötigen. Und wenn Sie in jeden einzelnen klicken, können Sie sogar eine Beschreibung hinzufügen, wenn Sie den Platzhaltertext bearbeiten müssen . Das wäre also Joe, Joe, joe.com. Sie können bei Bedarf Platzhaltertext hinzufügen, aber so würden Sie jedes dieser Felder bearbeiten. Derjenige, für den Sie sicherstellen möchten, dass Sie diese Seite live schalten können, ist mit dem Speicher verbunden. Sie können also eine Verbindung herstellen, wenn Sie möchten, dass dies einen dieser Orte geht, Mailchimp, Google Drive, Zapier, wir verbinden es mit anderer Software. Wenn die Software, mit der Sie sie verbinden müssen. Die einfachste Sache mit einem Kontaktformular ist jedoch, dass wir dies tun und hier eine E-Mail hinzufügen. Dies wäre die E-Mail, die Sie möchten. Einreichungen des Kontaktformulars, um benachrichtigt zu werden. Wem gefällt das nicht. Und auf diese Weise wird dies an der richtigen Stelle sein. Das ist also nur Ihre Kontaktseite und stellen Sie sicher , dass das Formular betriebsbereit ist. Wenn Sie den Stil des Formats bearbeiten müssen, können Sie nur ein bisschen davon aus den Farben machen. Die Farbe der Schaltfläche kann sich also je nach ändern. Aber wenn es dir keine andere Option gibt, dann werden wir dasselbe tun, was wir für die Schaltfläche im Menü getan haben. Es geht um das Design, Site-Stile, Farben, neueste. Und dann klicke auf das Element, das du ändern möchtest. Das ist also der Knopf, und dann möchte ich den Text haben. Auf diese Weise würden Sie die Farbe der Schaltfläche ändern. In Ordnung, und das möchte ich, dass Sie über die Kontaktseite wissen. 13. BONUS Hinzufügen von benutzerdefinierten Schriftarten mit CSS-Code: Also bin ich auf einer Demo-Website und werde dir zeigen, wie man benutzerdefinierte Schriftarten installiert und Squarespace Seven 0.1 macht. Dies wird uns die Tatsache umgehen, dass wir wirklich nur eine Absatzschriftoption und eine Überschriftenschriftoption haben . Um dies zu tun, wird ein Design benutzerdefiniertes CSS. Ich bin nichts auf dieser Seite. Das erste, was wir tun, ist eine Schriftart hinzuzufügen. Sie müssen also eine Schriftart identifizieren, die Ihnen gefällt. Und du brauchst entweder eine T-, T-, F- oder eine OTF-Datei. Und so musst du vielleicht eine Schriftart kaufen , wenn es keine Open-Source-Schrift ist, aber lass mich sehen, ob ich sie finden kann. Also schau es im Grunde nach. Das ist also die Schrift, von der ich spreche. Und es ist zu prüfen, ob Sie eine Download-Version dafür finden können . Die Schrift Frida io ist eigentlich ziemlich gut. Oft haben sie sie. Also los geht's. Sie haben das OTF und das CTF und Sie können auf Herunterladen klicken und Sie erhalten die Dateien. also sicher, dass Sie die Dateien sind, bevor Sie reingehen und etwas davon tun. Aber sobald du sie hast, kommen wir her. Und wir verwalten benutzerdefinierte Dateien, fügen Bilder oder Schriften hinzu. Und hier gehe ich hin, ich habe einen kleinen Schriftordner. Los geht's. Ähm, also wirst du es öffnen, wenn es FDF gibt, um sie zuerst zu entpacken. Also hier mache ich das jetzt einfach. Sobald es hochgeladen ist, musst du darauf klicken. Und dort bekommst du die URL hier. In Ordnung, also klick raus. Als nächstes müssen wir den Namen hinzufügen, diesen Code. Und so können Sie dies aus Ihrem Handbuch kopieren und einfügen, dem Schriftart-Gesichtscode hinzufügen. Das ist also eine Frage nach DRL. Nimm diese URL und du wirst sie abschneiden. Sie werden es zwischen diese beiden Apostrophen setzen, aber das sind Semikolons dazwischen , zwischen Apostroph, Semikolon. Ich bin da drin. Sie können jetzt sehen , dass das hier hinzugefügt wurde. Und dann willst du diese Schrift einfach benennen. Also werde ich diese Datei benennen. Dieser nennt sich Bodoni Bold Owning. Es wäre nur in Ordnung, also jetzt, wo wir die Schriftart da drin haben und jetzt müssen wir sie zuweisen. Als Nächstes werden wir also herkommen und den Auftrag holen. Ein Schriftcode. Werde hier sehen, das ist für H1. Wenn Sie möchten, dass es für Ihr H2 ist, fügen Sie einfach H2, H3, H3, H4, H4 hinzu. Sie können auch greifen. Dies ist ein bisschen weniger intuitiv, aber dieser Punkt SQS RTE Bindestrich vergrößern, Das ist für Ihren Absatz eine Schriftart. Sie können das sogar anpassen, wenn Sie möchten. Sie müssen lediglich sicherstellen, dass dies widerspiegelt, was Sie zuweisen möchten. Und dann tippst du das einfach ein. Sie sehen, das hat das gerade geändert. Das ist jetzt die Bodoni-Schrift. Sie können das also für so viele Schriftarten tun, wie Sie möchten. Ich empfehle Ihnen, diesbezüglich etwas vorsichtig zu sein. Zu viel CSS-Code verlangsamt Ihre Website ein wenig. Sie sich also wirklich Sehen Sie sich also wirklich an, welche Squarespace-Schriftarten Ihnen gefallen, und wählen Sie dann eine oder zwei Überschriftenschriften aus. Vielleicht ist diese Absatzschrift, ich würde sagen, drei max ich würde sagen, drei max, wirklich das, was Sie dort einfügen möchten. Ich würde nicht mehr als das einbauen, weil ich höchstwahrscheinlich auch einige andere CSS-Anpassungen vornehmen möchte . Das ist also eine Möglichkeit, ein bisschen zu sparen, aber Sie können diese benutzerdefinierten Schriftarten bekommen und da, in Ordnung. 14. BONUS geht tiefer auf Header in 7.1: Dieses Video-Tutorial ist für den Header und diese transparente Option, das heißt, wenn Sie eine Website ernennen, sie früher da und jetzt ist es nicht über meine Schulter. Und zeige dir die verschiedenen Header-Optionen in den neuen Quadraten, ich 7.1. Also das ist mein Demo-Sake hier. Wenn wir hierher kommen, haben wir anstelle der transparenten Registerkarte, an die Sie vielleicht gewöhnt waren, den Stil und dieser ist hier. So dynamisch ist eine Behandlung. Das ist das, das ist eigentlich das Gleiche wie das, was wir früher hatten. So dynamisch, machen Sie es unabhängig der Farbeinstellungsleiste hier, Thema. Wir machen das auf diese Weise. Wir können es ändern, damit wir es auf jede unserer Farbseiten setzen können . So würdest du ihm also seine eigene Farbe geben. Und die anderen sind eine Art Behandlung. Also Gradient, so etwas. Dieser Farbverlauf. Und wir haben auch solide und das können Sie zu einer individuellen Sache machen. Sie können auch eine Unschärfe machen. Siehst du, damit kann ich rumspielen. Es tut mir leid, das ist die Unschärfe. Wenn Sie also die Deckkraft verringern, haben Sie diesen Effekt hier. Das gibt Ihnen also nur viele verschiedene Optionen. So einfach, dynamisch ist transparentes Thema. Sie können Ihre Farbthemen einfarbig verwenden. Sie können benutzerdefinierte Farben oder diesen Unschärfeeffekt erstellen, oder wir haben einen Farbverlauf als Optionen. Das sind also deine neuen Header-Einstellungen. Ich hoffe das hilft. 15. BONUS Mobile Page: Okay, eine der netten Funktionen der Fluid Engine, der neuesten Version von Squarespace Builder, ist, dass sie es wirklich einfach machen , die mobilen Versionen Ihrer Seiten zu bearbeiten. Ich denke über die Schulter nach und zeige dir, wie das geht. Also, wenn wir einsteigen, um das wegzubekommen, wenn wir auf diese Website springen. Das ist also eine Website, die auf der neuesten Version basiert. Wenn wir eine der Seiten bearbeiten, können wir sehen, dass diese eine Menge ordentlicher Bildschichten enthält. Das ist also ein Bild, das ist ein Bild, das ist ein Bild. Als das zum ersten Mal hinzugefügt wurde und die Desktop-Version wirklich gut aussieht. Die mobile Version sah nicht ganz so gut aus. Um die mobile Version zu bearbeiten, möchten Sie also in der Bearbeitung sein. Also habe ich auf die Seite geklickt, die Seite bearbeitet und die mobile Version bearbeitet. Ich werde hier auf alles umschalten , was ich bewege. Wenn ich das zum Beispiel hierher verschiebe , kehre ich zur Desktop-Ansicht zurück. Das hat sich überhaupt nicht bewegt. Das ist also genau der Punkt, an dem Sie wissen müssen, um zu dieser mobilen Umgebung zu gelangen. Und hier können Sie jede dieser Optionen ziemlich einfach verschieben dieser Optionen ziemlich einfach und sicherstellen, dass sie so positioniert sind, wie Sie sie auf Mobilgeräten und Desktops positionieren müssen . Das ist also nur ein kurzes kleines Bonus-Video , das dir diese Einstellung zeigt. Es macht die Dinge viel einfacher. Überprüfen Sie also unbedingt Ihre mobilen Versionen Ihrer Seiten. 16. Wir kommen zum Ende.: In Ordnung, also da hast du es. Mit diesen Videos hast du alles, was du brauchst, um eine komplett benutzerdefinierte Squarespace-Website zu erstellen. Nehmen Sie sich also Zeit, gehen Sie den gesamten Inhalt durch und bearbeiten Sie ihn. Stellt sicher, dass Ihre Menüs angeordnet sind. Starte deine Seite. Und dann kannst du einen Screenshot machen und ihn als dein Klassenprojekt teilen. In Ordnung, vielen Dank.