Erstellen Sie eine Squarespace-Website von Grund auf neu: Keine Vorlage, kein Code, keine Angst

1. Einführung: Hallo Mein Name ist Isbel und ich betreibe mein kleines Kreativunternehmen jetzt seit weit über 15 Jahren und ich liebe es absolut, Squarespace-Websites zu erstellen In diesem Kurs werde ich dich Schritt für Schritt durch den Prozess der Erstellung einer Website auf Squarespace 7.1 mit dem Dragon Drop Fluid Engine-Editor führen Dies ist ihre neueste Version, und wir werden sie komplett von Grund auf Das heißt, keine Vorlagen, keine Codierung. Wir werden die Angst vor einer leeren Seite überwinden. Dieser Kurs ist perfekt für Alleinunternehmer, Kreative, Freelancer, Nebenbucher und DI-Draht, die von der Auswahl der Vorlage überwältigt sind Es ist auch eine wirklich großartige Option für Sie, wenn Sie bereits eine Squarespace 7.1-Website haben und dieser einige zusätzliche Seiten hinzufügen möchten, sich aber einfach nicht sicher sind, wie Sie das tun sollen, ohne eine Vorlage zu verwenden zu Das wird perfekt für dich sein. Klassenprojekt, wir werden eine einseitige Website erstellen. Sie können diese dann entweder als eigenständige Website verwenden , um Ihr Unternehmen zu starten und schnell online zu gehen, oder sie kann als Homepage für eine mehrseitige Website verwendet werden . Mein Beispiel für eine Website bezieht sich auf einen kreativen virtuellen Assistenten Alle Ressourcen, das Branding, die Farben, die Schriftarten und der Text werden in den Kursressourcen verfügbar sein, und der Text werden in den Kursressourcen verfügbar sein wenn Sie sie herunterladen und dann weiterverfolgen möchten . Alternativ können Sie Ihre eigene erstellen oder, wenn Sie bereit sind, Gründung Ihres Unternehmens beginnen. Es hängt nur von Ihren Zielen für die Teilnahme an diesem Kurs ab. Ich werde dir alles ohne Unsinn erklären , direkt auf den Punkt gebracht. Am Ende des Kurses wirst du eine wunderschöne Website haben, die bereit ist , der Welt vorgestellt zu Außerdem wirst du ein hervorragendes Verständnis dafür haben, wie der Fluidendron von SquareSpace Seven Point One funktioniert, sodass du in Zukunft mehr Websites und mehr Seiten erstellen kannst mehr Websites und mehr Seiten erstellen 2. Leere im Vergleich zu Squarespace-Vorlage: Bevor wir mit dem Aufbau unserer Website beginnen, möchte ich kurz darüber sprechen, warum ich lieber eine leere Vorlage als eine der Vorlagen von Squarespace verwende als eine der Vorlagen von Squarespace Denn wenn Sie sich die Square Space-Vorlagen ansehen, sind sie in vielerlei Hinsicht wunderschön Warum sollten Sie keine verwenden? Aber hier ist die Sache. Eines der Dinge , die meiner Meinung nach die Square Space-Vorlage so unglaublich schön machen die Square Space-Vorlage so , ist die Fotografie, und wenn Sie sie gegen Ihre eigenen Fotos austauschen, können Sie feststellen, dass Ihre Website einfach ein bisschen flach und wenig überwältigend aussieht und nicht ganz die gleiche visuelle Wirkung hat, von der Sie dachten, dass sie hätte, als Sie sich zum ersten Mal für die Vorlage entschieden haben dachten, dass sie hätte, als Sie sich zum ersten Mal für die Vorlage entschieden Das führt mich zur Strategie. Wenn Sie versuchen, Ihre Informationen in die Strategie und Vorlage eines anderen zu packen, denken Sie nicht wirklich darüber nach, was Sie eigentlich sagen möchten und was Sie von Ihrer Website erwarten Schließlich gibt es noch die Angst , eine Vorlage kaputt zu machen. Oft findest du bei Vorlagen die Abschnitte , die für dich nicht wirklich relevant sind, und dann fragst du dich, kann ich sie löschen? Wenn ich es lösche, werde ich es kaputt machen, da da da da da. Es führt nur in diese überwältigende Spirale der Unentschlossenheit und bringt Sie dazu, sich selbst zu hinterfragen Sie werden Ihre Vorlage nicht beschädigen, wenn Sie Dinge löschen. So sind sie entworfen. Ich verstehe es aber. Leere Seiten können wirklich entmutigend sein. Aber ich hoffe, dass Sie am Ende dieses Kurses sehen werden, dass es nicht so gruselig ist, Ihre Rose von Grund auf neu zu bauen nicht so gruselig ist, Ihre Rose von Grund auf neu , sondern dass es wirklich machbar ist Eigentlich ist es einfacher, als sich selbst in eine der quadratischen Raumvorlagen zu stecken 3. Erstellen einer leeren Vorlage: In diesem Video führe ich dich durch die Erstellung einer leeren Vorlage und die Einrichtung eines Squarespace-Kontos Wenn Sie bereits wissen, wie das geht, können Sie mit dem nächsten Video fortfahren Wenn nicht, bleib hier. Ich werde Sie Schritt für Schritt durch das Ganze führen. Okay. Ich möchte, dass du zu squarespace.com gehst und dann hier auf GetStarted klickst . Es wird versuchen, dir ein paar Fragen zu stellen . Das liegt daran, dass es Ihnen eine Vorlage einrichten möchte, aber wir verwenden keine. Klicken Sie einfach hier auf Ich suche gerade. Es gibt jedoch keine Möglichkeit, eine leere Vorlage auszuwählen. Sie müssen lediglich eine dieser Vorlagen auswählen und dann die Seiten löschen. Wenn wir hier auf eine Seite klicken, wähle ich diese hier aus und beginne mit diesem Design. Wenn Sie ein Konto haben, können Sie sich hier oben rechts anmelden . Wenn nicht, fahren Sie mit E-Mail fort. Ich werde meine Daten hier eingeben und Sie können weitermachen und dasselbe tun. Wenn das geladen ist, hast du eine Seite, die ungefähr so aussieht. Sie können unten hier sehen, dass Sie eine 14-tägige kostenlose Testversion mit Squarespace haben eine 14-tägige kostenlose Testversion mit Squarespace Es gibt eine Möglichkeit, dies zu verlängern, und ich werde dir später im Kurs zeigen, wie das geht, aber sei dir zunächst bewusst, dass du dein Squarespace-Konto nicht bezahlen musst , bis du bereit bist zu starten und es der ganzen Welt zugänglich zu machen. Klicken wir nun auf Website und dann auf Seiten. Als erstes möchten wir die Homepage löschen. Wenn Sie jedoch versuchen, sie zu löschen, werden Sie feststellen, dass Sie dies nicht können , und das liegt daran, dass Sie mindestens eine aktive Seite auf Ihrer Website haben müssen . Lass uns weitermachen und eine leere Seite hinzufügen. Klicken Sie auf das Plus, fügen Sie ein Leerzeichen hinzu und wir nennen es Startseite zwei. Als Nächstes müssen wir dies nur als Haupt-Homepage zuweisen . Klicken Sie hier auf das COG Scrollen Sie hier nach unten, Setters-Homepage, bestätigen und schließen Sie, und jetzt können Sie weitermachen und die ursprüngliche Homepage löschen Als letztes möchte ich, dass wir hier einfach auf das COG klicken und wir werden es einfach im Seitentitel, im Navigationstitel und auch im URL-Slog wieder in Home umbenennen im Navigationstitel und auch im URL-Slog wieder in Home Navigationstitel und auch im URL-Slog wieder in Klicken Sie hier auf Speichern. Und los geht's. Das sind Sie mit einer völlig leeren Vorlage, die bereit ist, loszulegen. Im nächsten Video zeige ich Ihnen, wie Sie Ihre Kopf - und Fußzeile einrichten Okay, wir sehen uns dort. 4. Einrichten der Kopf- und Fußzeile: In diesem Video werden wir die Kopf- und Fußzeile unserer Website einrichten die Kopf- und Fußzeile unserer Website Ich gebe dir nur ziemlich früh eine wirklich schöne Struktur für die Seite Es ist ein bisschen wie bei einem Puzzle und du fängst immer zuerst mit dem äußeren Rahmen an Es sei denn, du bist eine verrückte Person , die mitten in einem Puzzle anfängt, kein Urteil, aber wow. Okay, lass uns reinspringen Als Erstes möchte ich, dass du hier auf Bearbeiten klickst, und jetzt bist du offiziell im Bearbeitungsmodus auf deiner Website. Bewegen Sie den Mauszeiger über den oberen Bereich , um die Kopfzeile der Website zu bearbeiten. Das erste, was wir tun werden, ist einfach unser Logo einzufügen Wenn wir also hier klicken, möchten Sie das Stiftsymbol klicken und Ihren Seitentitel eingeben, der der Name Ihres Unternehmens sein wird. Unsere ist also die kreative VA. Dann fügen wir unser Logo hinzu. Laden Sie die Datei hoch und wählen Sie Ihr Logo aus. Da hast du's. So einfach ist das. Es ist ein bisschen klein, wir können die Größe des Logos hier mit der Schiebeleiste anpassen , oder wenn Sie genau wissen, wie groß es sein soll, können Sie es stattdessen hier einfügen. Grundsätzlich möchten Sie, dass Ihr Logo so klein wie möglich ist, aber nicht so klein, dass es nicht lesbar ist Als Nächstes möchte ich dieses Login löschen. Wenn Sie darauf klicken und auf Löschen klicken, ist das nur für den Fall, dass Sie eine Website haben möchten , auf der sich Kunden anmelden können, was wir nicht tun. Ich möchte jedoch unsere Social-Media-Symbole behalten Lassen Sie uns darauf klicken und wir werden ein paar weitere Links hinzufügen . Klicken Sie hier auf den Stift. Sie können weitermachen und einfach Ihren Link hier hinzufügen, Link hinzufügen. Da hast du's. Sie können sehen, dass die Icons automatisch für uns erstellt wurden. Sie können diese im Design so anpassen, dass Sie sie mit einem Kreis oder einem Quadrat, entweder umrandet oder einfarbig, haben entweder umrandet oder einfarbig Ich möchte meine einfach so halten, und Sie können die Größe auch hier vergrößern Okay, klicken Sie da raus. Als Nächstes möchte ich eine Schaltfläche hinzufügen. Wir springen hier rüber, um Elemente hinzuzufügen, und schalten diese Option hier einfach für eine Schaltfläche um Und los geht's, lassen Sie uns einfach den Text ändern, darauf klicken, auf das Stiftsymbol klicken und ich möchte sagen, kontaktieren Sie mich Wir werden einen Link dazu anhängen. Im Moment gibt es keinen Ort, an den man es verlinken könnte. Wir werden auf dieser einseitigen Website einen Kontext-Bereich erstellen . Später werde ich Ihnen zeigen, wie Sie den Link einfügen, der zu diesem Abschnitt führt. Als Letztes möchte ich dir nur diesen blauen Pfeil hier zeigen. Hier können Sie die Höhe Ihres Headers skalieren. Das ist das kleinste, was es sein kann. Das ist direkt am oberen und unteren Rand des Abschnitts angeschlagen oberen und unteren Rand des Abschnitts Wenn Sie allem etwas Luft zum Atmen geben möchten , ziehen Sie es nach unten, damit es ein bisschen Platz hat Da hast du's. Sieht gut aus. Lassen Sie uns als Nächstes zur Fußzeile springen und auf Abschnitt hinzufügen klicken. Du hast hier viele integrierte Fußzeilen , die dir Squarespace zur Verfügung stellt, also kannst du gerne eine davon verwenden Aber in dieser Lektion werde ich dir zeigen, wie du das von einem leeren Abschnitt aus machst. Klicke hier, und wenn du den Mauszeiger nach oben bewegst, siehst du diese Option Klicken Sie darauf. Dies sind alle Blöcke, die Sie zu jedem Abschnitt Ihrer Website hinzufügen können . Als erstes fügen wir ein Newsletter-Anmeldeformular Dies ist das Standard-Anmeldeformular , das uns Squarespace Wir können es hier anpassen, wenn du auf das Stiftsymbol klickst. Sie können den Text so ändern, dass wir den Text hätten ändern können, zum Beispiel anmelden. Ich werde auch hier und da den Text ändern. Wir können auch die Ausrichtung des Newsletters ändern. Im Moment reiht es sich in der Mitte auf. Ich werde es auf der linken Seite haben, was dort gut in der Fußzeile sitzt Wenn Sie einen Hintergrund oder einen Strich darauf auffüllen möchten, können Sie das einfach hier tun Ich werde jedoch weitermachen und es einfach so lassen, wie es ist. Da haben wir's. Und Sie können die Größe nur ein bisschen skalieren , sodass sie nur ein bisschen kürzer ist. Jetzt möchte ich nur kurz über E-Mail-Marketing sprechen, denn selbst wenn Sie gerade am Anfang Ihrer Geschäftsreise stehen und nicht bereit sind, regelmäßig E-Mails zu versenden, ist es dennoch eine gute Idee, ein E-Mail-Anmeldeformular auf Ihrer Website zu E-Mail-Anmeldeformular auf Ihrer Website und diese E-Mail-Adressen zu sammeln. Es ist nie zu früh und es ist eine wirklich gute Möglichkeit, mit dem Aufbau Ihres Publikums zu beginnen. Wenn Sie Ihrer Website eines der E-Mail-Anmeldeformulare von Squares hinzufügen , werden standardmäßig alle Abonnenten in Ihren Squarespace-Kontakten gespeichert und Sie können ihnen dann über die von Squarespace integrierte E-Mail-Marketing-Plattform E-Mails Die Alternative besteht darin , stattdessen eine Drittanbieterplattform zu verbinden. Wie Sie eine E-Mail-Marketing-Plattform eines Drittanbieters , hängt davon ab , welche Sie Es ist mir nicht wirklich möglich, das in diesem Kurs zu behandeln. Wenn Sie jedoch Ratschläge dazu benötigen, wenden Sie sich bitte in den Kommentaren an mich Ich helfe Ihnen gerne weiter. Lassen Sie uns wieder mit dem Aufbau unserer Fußzeile beginnen. Als Nächstes möchten wir einen Bildblock hinzufügen. Fügen Sie erneut einen Block hinzu. Es ist Zeit, das Bild auszuwählen, und wir werden unser Logo wieder einfügen. Wenn Sie auf das Plus-Symbol klicken, können Sie jetzt aus der Bibliothek auswählen , da wir es bereits hochgeladen haben. Klicken Sie auf Ihr Logo und fügen Sie es hinzu. Lassen Sie uns einfach weitermachen und es auf die andere Seite des Bildschirms ziehen. Ich werde es einfach verkleinern weil es ein bisschen groß ist, ziehe diese Ankerpunkte und verkleinere es. Als Nächstes möchte ich einen Textblock darunter haben. Block hinzufügen. Es ist an der Zeit, Text auszuwählen und ihn einfach so zu ziehen, dass er unter Ihrem Logo platziert wird. Ich werde einfach weitermachen und unseren Slogan kopieren und hier einfügen. Jetzt werde ich auch eine E-Mail in die Fußzeile einfügen. Ich weiß nicht, wie es dir geht, aber ich finde es wirklich frustrierend, wenn ich auf einer Website keine E-Mail-Adresse finde und einfach mit ihnen in Kontakt treten möchte Ich denke, dass eine Fußzeile ein großartiger Ort ist, um Ihre Kontaktdaten anzugeben. Da haben wir's. Ich möchte das nur zentral ausrichten, den Text markieren und hier klicken , um es zentral auszurichten. Und da haben wir's. Ziehen wir dieses Logo einfach ein wenig rüber, sodass es direkt in der Mitte des Textes sitzt . letzte Sache, die ich mit meiner Fußzeile machen möchte ist, einfach einige soziale Links hinzuzufügen erneut auf Block hinzufügen zu klicken Anstatt durchzuscrollen, können Sie einfach Dinge eingeben Da haben wir's, soziale Links. Sie können sehen, dass es bereits gespeichert ist, also es wurden dieselben Links gespeichert, die wir in den Kopf gesetzt haben . Ziehen wir es einfach nach unten, damit es nicht zu nah am Text ist. Okay, es sieht gut aus. Wir können uns da einfach rausklicken. Ich werde das Fenster schließen. Es bittet uns, unsere mobile Ansicht zu überprüfen. Das machen wir später im Unterricht. Vergiss auch nicht zu speichern. Und ja, sieht gut aus. Wir haben jetzt eine leere Website mit einer schönen Kopf - und einer schönen Fußzeile, sodass nur die Mitte ausgefüllt werden muss Aber bevor wir das tun, werden wir das Styling für unsere Website einrichten das Styling für unsere Website einrichten Das sind unsere Schriftarten und unsere Farben und unsere Schaltflächen, und genau das werden wir im nächsten Video tun. Wir sehen uns dort. 5. Styling: In diesem Video werden wir das Design für unsere Website einrichten , das aus unseren Farben, unseren Schriftarten und unseren Schaltflächen besteht . Schauen wir uns an, wie das geht. Wenn ich am Styling arbeite, habe ich gerne meinen Styleguide geöffnet, mein Branding-Dokument. Sie können dasselbe tun, wenn Sie mitmachen möchten , oder Sie können natürlich auch Ihr eigenes erstellen, wenn Sie es vorziehen. Um auf das Styling zuzugreifen, klicken Sie entweder hier links auf Styles. Alternativ können Sie auf dieses kleine Pinselsymbol in der rechten Ecke klicken dieses kleine Pinselsymbol in der rechten Beide führen Sie zum selben Ort, nämlich zu diesem Abschnitt hier rechts auf dem Bildschirm Schauen wir uns zuerst unsere Schriften an. Ich werde zuerst meine Schriftart für Überschriften einrichten. Klicken Sie auf Überschriften und Sie können in diesem Drop-down-Menü die Schriftart auswählen, die Sie verwenden möchten Sie können durch alle Schriftoptionen blättern. Squarespace bietet buchstäblich Hunderte und Hunderte von Schriftarten, die Sie verwenden können Sie beziehen viele davon aus Google Fonts und Adobe Fonts werden die meisten Schriftarten sein, die Sie dort erkennen, und Sie sollten in dort erkennen, und Sie sollten Lage sein, etwas zu finden, das Ihnen gefällt. Ich weiß, dass ich das für meine Überschriften verwenden möchte, also werde ich einfach weitermachen und danach suchen Und wähle es aus. Da hast du's. Da hat sich die Schrift schon in meiner E-Mail-Anmeldung hier geändert . Es gibt noch ein paar andere Einstellungen , die Sie ebenfalls anpassen können. Sie können die Schriftstärke ändern. Wenn Sie es wirklich schwer oder wirklich leicht haben wollten, könnten Sie es tun. Ich werde mich für ein Gewicht von 400 im Mittelweg entscheiden. Sie könnten auch mit der Linienhöhe herumspielen also wie weit die einzelnen Linien voneinander entfernt sind. Ich setze das auf 1,4 und deinen Buchstabenabstand , also darauf, wie weit deine Buchstaben voneinander entfernt sind. Sei vorsichtig mit diesem, du willst nichts Verrücktes machen, hast massive Lücken zwischen deinen Buchstaben. Dadurch werden Texte einfach ziemlich unlesbar. Ich werde diesen Wert auf Null halten und den Text hier transformieren. Wenn Sie ein Spiel damit haben, dann, wenn Sie alle Ihre Überschriften in Groß- oder Kleinbuchstaben haben Ihre Überschriften in Groß- oder Kleinbuchstaben Ich werde es einfach bei „Keine“ belassen, was bedeutet, dass ich bei der Eingabe meiner Schriften entscheiden kann Die letzte Sache sind Ihre Schriftgrößen. Wir haben vier verschiedene Überschriftengrößen, angefangen damit, dass Überschrift eins immer die größte ist , bis hin zu Überschrift vier, die am kleinsten sein wird Sie können die Größe der Überschriften hier mithilfe dieser Schiebereiste anpassen oder Sie können die Größen eingeben wenn Sie genau wissen sie aussehen sollen, was ich tun werde Das sieht gut aus für unsere Überschriften. Lassen Sie uns zu unseren Absätzen übergehen und dasselbe tun. Ich werde für meine Schriftart auswählen. Ich möchte, dass es noch ein paar Einstellungen gibt, die Sie in Ihrem Absatz ändern können Auch hier könntest du die Schriftstärke ändern, ich werde sie auf 400 setzen und du könntest auch die Zeilenhöhe im Buchstabenabstand anpassen Ich werde das bei 1,6 belassen. Sie möchten nicht zu viel Abstand zwischen Ihren Zeilen haben, aber Sie möchten auch nicht, dass sie alle zusammen Sie möchten nur sicherstellen, dass Ihr Text schön und lesbar ist Auch hier gilt: Seien Sie vorsichtig mit Ihrem Buchstabenabstand, denn wenn Sie ihn herausziehen , geben Sie ihm zu viel Platz Dadurch wird der Text wirklich unlesbar, und viele Leute werden damit zu kämpfen haben negativ auf die Benutzerfreundlichkeit Ihrer Website auswirken Ich werde diesen Wert einfach auf Null reduzieren und Sie können die Größe Ihrer Schriften hier ändern Ich bin eigentlich sehr zufrieden mit den Größen, dass wir die Standardgrößen haben . Sie funktionieren für mich. Lassen Sie uns jetzt einfach einen Rückzieher machen und uns unsere Schriftarten auf unseren Buttons ansehen. Sie haben hier also drei Button-Optionen und können die Schriftdetails für jede einzeln ändern. Ich würde empfehlen, Ihre Schriftarten für alle Ihre Schaltflächen gleich zu lassen, nur Konsistenz auf der gesamten Website zu gewährleisten. Ich werde das auch auf die Absatzschrift umstellen . Da haben wir's. Ich behalte diese Einstellungen gerne bei. Die Gewichte sind etwas schwerer als unsere Absatzschrift mit 500, aber das ist okay. Es wirkt sich etwas stärker auf die Schaltfläche aus. Also klicken Sie einfach hier raus. Die letzte Sache, die Sie für Ihre Schriften einrichten möchten , ist diese Schriftart für Verschiedenes . Ich werde sie so auswählen , wie in unserem Absatz. Ihr Verschiedenes deckt einfach alles ab , was in Ihrer Überschrift und Ihren Absatzschriften fehlt. Ich werde Dinge wie deine Blog-Kategorie, Titel, ich denke, verschiedene sein. Wir verwenden in diesem Website-Beispiel heute keine, aber es ist nur eine gute Praxis, sicherzustellen , dass sie so geändert werden, dass sie Ihren Absätzen entsprechen. Das Letzte, was ich in diesem Abschnitt tun möchte ist hier in den zugewiesenen Stilen. Was mich besonders interessiert , ist dieser Header-Button. Lass uns weitermachen und auf den klicken , der sich auf diesen Button hier bezieht, den wir haben. Sie haben vielleicht bemerkt, dass sich die Schriftart auf dieser Schaltfläche nicht geändert hat, als wir die anderen aktualisiert haben, und das liegt daran, dass sie ihr eigenes Design hat. Im Moment ist sie auf Benutzerdefiniert eingestellt. Ich werde auf dieses Drop-down-Menü klicken. Ich möchte, dass meine Schaltflächen dieselbe Schriftart haben wie all meine anderen Schaltflächen. Ich werde es einfach in einen Absatz ändern. Da haben Sie es, Sie können sehen, dass sofort das gleiche Styling-Setup wie bei unseren Absätzen verwendet wurde Ich möchte es allerdings ein bisschen größer machen. Nehmen wir 1.1, nur damit es im Kopf etwas mehr Wirkung hat . Sie können sich aus den Schriften zurückziehen und wir werden uns jetzt unsere Farben ansehen. Klicken Sie hier auf Farben. Palette bearbeiten. Sie können sehen, dass Sie fünf Farboptionen haben. Squarespace stellt sie immer von heller bis dunkler Farbe ein Das ist eine wirklich gute Methode, die man befolgen sollte. Es bedeutet nur, dass Sie eine gute Auswahl an verschiedenen Farboptionen haben . Ändere die Farben, du könntest Freestylen. Du könntest einfach diesen kleinen Farbwähler überall hin ziehen und so deine Farbe finden Ich weiß jedoch genau, welche Farben diese Website haben soll Ich werde sie mit den Hex-Codes kopieren und einfügen . Ändern Sie einfach dieses Drop-down-Menü auf Hex, falls es das nicht schon ist, und gehen Sie dann zu Ihrem Branding-Leitfaden und ich werde alle Codes hier kopieren und einfügen. Lass uns das einbauen. Sie können sehen, dass sich das jetzt diese blassrosa pfirsichfarbene Farbe geändert hat, die Ich werde den Rest dieser Farben ändern und du kannst dasselbe mit deinen machen Los geht's, wir haben jetzt all unsere Farben drin, also können wir hier raus springen. Das Letzte, was wir uns ansehen werden, ist unser Button-Setup. Lass uns einfach hier drüben und in die Button-Packs klicken. Jetzt können Sie sehen, wenn Sie mit der Maus über alle Optionen fahren, dass Sie drei verschiedene Schaltflächen erhalten Es ist eine nette Idee, eine solide Gliederung zu haben. Wenn du einige dieser anderen nach unten scrollst, sind sie zumindest alle umrissen. Ich denke, Sie möchten es verwechseln, aber Sie möchten die Form beibehalten, alle Ihre Schaltflächen auf Ihrer gesamten Website in derselben Form haben . Es sorgt einfach für ein angenehmes, einheitliches Gefühl auf Ihrer Website. Ich werde weitermachen und diesen hier auswählen . Sie können sehen , dass meine Schaltfläche jetzt in Echtzeit geändert wurde. Wenn Sie eine der Einstellungen für die einzelnen Tasten ändern möchten , können Sie dies hier tun. Unsere Schriften sind bereits eingerichtet. Das haben wir im Schriftbereich gemacht. Sie können sie auch hier anpassen, aber ich möchte sie unverändert lassen Wie gesagt, ich möchte, dass die Schaltflächen einheitlich aussehen. Ich möchte die Schriften nicht anfassen. Ich möchte die Form nicht anfassen, weil ich mich freue, wenn sie alle dieselbe Form haben. Das Einzige, was Sie sich ansehen könnten, ist die Polsterung. Wenn Sie auf Ihre Polsterung klicken, können Sie sehen, dass jetzt mehr Platz um die Wörter herum geschaffen wurde mehr Platz um die Wörter herum Ich mag es, meine Knöpfe ziemlich eng zu halten und nicht zu viel Polsterung zu haben Ich werde weitermachen und bei klein bleiben. Da haben wir's. Wir können diesen Abschnitt verlassen. Schließen Sie unsere Seitenstile und als letztes klicken Sie einfach hier auf Speichern. Dadurch werden alle Ihre Änderungen gespeichert Während der Erstellung Ihrer Website können Sie jederzeit zum Styling zurückkehren Wenn sich etwas nicht richtig anfühlt, ist eine Ihrer Schriftarten vielleicht etwas größer oder kleiner, als Sie es sich vorgestellt haben So kannst du immer rüber gehen und die Dinge ändern, während du gehst. Aber im Moment sehen unsere Websites großartig aus. Wir haben unseren Header, wir haben unsere Fußzeile, wir haben unser gesamtes Branding eingerichtet Jetzt müssen wir nur noch die Mitte der Website ausbauen, womit wir im nächsten Video beginnen werden . Wir sehen uns dort. 6. Heldenabschnitt: In diesem Video werden wir mit dem Aufbau des Hauptteils unserer Website beginnen, beginnend mit dem Heldenbereich. Dies ist der erste Abschnitt, jemand sehen wird, wenn er auf Ihrer Website landet, also ist er wirklich wichtig. Es soll wirklich klar zum Ausdruck bringen, wer Sie sind und was Ihr Unternehmen macht und wie Sie jemandem helfen können. Wenn wir uns also unser Beispiel ansehen, haben wir links ein großes Foto, ein Halbbildfoto. Dann haben wir ein bisschen Text, großes bisschen Text, einen Textkörper und dann eine Schaltfläche. Schauen wir uns an, wie das geht. Sie möchten zu Seiten navigieren und dann bearbeiten und wir sind wieder im Bearbeitungsmodus auf unserer Website. Klicken Sie hier auf AdSection und wir werden einen leeren Abschnitt hinzufügen Sie erhalten hier viele vorgefertigte quadratische Bereiche. Wenn Sie sich jemals für einen entscheiden möchten, ist das absolut eine großartige Option. Aber für diesen Kurs werden wir es von einem leeren Abschnitt aus machen. Als erstes möchte ich das Bild hinzufügen. Also mach weiter und klicke auf Ad Block. Bild und dann das Plus-Symbol laden Sie die Datei hoch und wählen Sie Ihr Foto aus. Dann gehen wir. Wenn Sie nun versuchen, es mit diesen blauen Ankerpunkten zu skalieren, können Sie sehen, dass es größer wird, aber es bleibt im gleichen Seitenverhältnis wie das Original. Wir wollen dieses Bild dieses blaue Textfeld tatsächlich ausfüllt Wenn Sie weitermachen und auf das Stiftsymbol klicken und das Design aufrufen, momentan so eingestellt, dass es passt, was bedeutet, dass es immer die Form behält, in der es ist Wenn du hier auf Ausfüllen klickst, kannst du sehen, dass wir jetzt das blaue Feld ausfüllen. Lassen Sie uns die Ankerpunkte direkt an den Rand ziehen und ich werde sie auch nach unten ziehen. Wenn Sie jedoch sehen, wie Sie es nach unten ziehen , befindet sich dort der dunklere Bereich. Das ist das Ende unseres Abschnitts. Aber wir haben diese große Lücke darunter. Wenn Sie sehen, dass das Raster beim Herunterziehen immer größer wird, aber dieser leere Abschnitt bleibt gleich, und das liegt daran , dass beim Hinzufügen in einem neuen Abschnitt automatisch eine Polsterung festgelegt wird wollen wir einfach loswerden. Ich gebe dir automatisch diesen Platz oben und unten. Das meine ich mit Polsterung. Lassen Sie uns das loswerden Klicken Sie hier, Abschnitt bearbeiten, wo es heißt, Vollbild, schalten Sie das einfach aus und jetzt liegt unser Bild direkt am oberen und unteren Rand des Abschnitts, was wir wollen Eine kleine Sache, es sitzt nicht ganz direkt in der Mitte Diese blau gepunktete Linie ist der Mittelpunkt Ihrer Website Ich möchte, dass dieses Bild genau in der Mitte sitzt. Im Moment ist dies jedoch nicht der Fall, da Squarespace mit einem Rastersystem arbeitet und jedes Element in das Raster integriert wird Du kannst sehen, wenn ich das ziehe, dass es automatisch einrastet Selbst wenn ich es in der Mitte eines Rasters loslasse, rastet es immer am Rand des nächstgelegenen ein und nicht direkt in der Drücken Sie den Buchstaben G auf Ihrer Tastatur, um das Raster zu öffnen, sodass Sie es immer sehen können. Was wir tun müssen, ist diese Lücke zwischen diesen kleinen Blöcken zu entfernen . Wenn Sie zurück auf den Abschnitt Bearbeiten klicken und zu Gap gehen, können Sie dann die Breite und Höhe dieser Lücke nach oben und unten skalieren . Wenn Sie es von rechts auf Null setzen, können Sie jetzt sehen, dass sich das Bild direkt in der Mitte befindet, was wir wollen. Okay. Als Nächstes möchte ich einen Textblock hinzufügen, Blocktext hinzufügen. Ich werde das einfach dorthin ziehen, wo ich es haben möchte. Ich möchte, dass es hier steht, sodass etwa zwei dieser Raster Platz vom Bild und vom oberen Rand der Kopfzeile Jetzt kann ich einfach weitermachen und meinen Text eingeben. Wenn Sie nun Text kopieren, einfügen oder eingeben, wird automatisch die Größe von Absatz 2 vorgegeben, aber ich möchte, dass dieser Teil eine Überschrift ist, also wird es ein größerer Text sein Wenn Sie den Cursor genau am Anfang dieses Satzes platzieren , klicken Sie auf das Drop-down-Menü und wählen wir Überschrift eins Das hat das jetzt schön groß gemacht und diesen Text klein gehalten. Ich werde ihn einfach ein wenig herausziehen , sodass er sich dort über die drei Zeilen verteilt. Ich werde das Textfeld klein wie möglich vergrößern, sodass es direkt neben dem Text hier steht Jetzt müssen wir nur noch ein Textfeld hinzufügen damit wir diese kleine Unterüberschrift hinzufügen können Ich werde weitermachen und Blocktext hinzufügen. Ziehen Sie diesen so rüber, dass er oben liegt , und kopieren Sie einfach meinen kleinen Slogan hinein. Ich werde das alles einfach nach unten ziehen, nur damit der Platz oben bleibt, die beiden Raster, die Platz oben wert sind, das sieht gut Das nächste, was ich hinzufügen möchte. Das Letzte ist eine Schaltfläche Klicken Sie hier auf Block hinzufügen, wählen Sie Ihre Schaltfläche aus und ziehen wir so, dass sie unter unserem Text liegt. Ich werde nur den Text ändern und sagen, lass uns chatten. Wir werden den Link später anhängen. Dies wird zu unserem Kontaktbereich verlinken, aber wir können ihn erst verlinken, wenn wir ihn erstellt haben. Sie werden auf dem Bildschirm feststellen, dass das Feld jetzt ein wenig geschrumpft ist, als ich den Text eingegeben habe , und das liegt daran, dass auch hier eine Füllung eingestellt ist Ich sage zum Beispiel, wenn Sie die Schaltfläche nach unten ziehen, können Sie sehen, dass die Schaltfläche dieses blaue Feld vollständig ausfüllt und der Text immer in der Mitte bleibt Ich bevorzuge es, meine Knöpfe so einzustellen, dass sie passen. Ich zeige dir, wie das aussieht, nur um sie auf der gesamten Website einheitlich zu halten. Klicken Sie auf Design und passen Sie es dann an. Da haben Sie es, Sie können sehen, dass die Schaltfläche jetzt so eingerichtet ist , dass sie die Polsterung hat, die wir bei der Einrichtung unseres Stils ausgewählt haben wir bei der Einrichtung unseres Stils ausgewählt , anstatt das blaue Feld auszufüllen Das ist meine Präferenz für Schaltflächen Ich sorge nur dafür, dass sie auf Ihrer Website alle schön und konsistent bleiben Ihrer Website alle schön und konsistent Jetzt möchte ich, dass es so angeordnet ist, dass es mit diesem Text auf der linken Seite übereinstimmt, sodass Sie einfach hier nach der Zeile klicken können. Da haben wir's. Das sieht gut aus. Ich drücke noch einmal G auf meiner Tastatur, um das Raster loszuwerden. Das Raster ist wirklich gut, um Ihnen zu helfen, die Dinge in Ordnung zu bringen. Manchmal kann es jedoch etwas ablenkend sein , wenn Sie sehen möchten , wie die Websites aussehen Ich wechsle ziemlich oft zwischen G-Raster an und G-Grid aus, nur um zu sehen, wie die Dinge sitzen , und um zu überprüfen, ob ich mit dem Abstand zufrieden bin Ich kann sehen, dass dieses Bild ein wenig heruntergezogen werden muss. Es ist ganz unten. Vielleicht gibt es eine große Lücke zwischen diesem Textteil und diesem Textteil. Ich kann das jedoch nicht weiter nach unten ziehen, da es im Raster einrastet Stattdessen kann ich sehen, ob du auf das Textfeld klickst und es ist dieses kleine Feld hier , das den Text entweder am oberen, mittleren oder unteren Rand des Textblocks Wenn wir es einfach in die Mitte oder nach unten bringen, denke ich, dass die Mitte wahrscheinlich am besten aussieht. Das ist nur eine weitere Möglichkeit, wie Sie Ihren Text anordnen können. Das sieht für mich gut aus. Lass uns weitermachen und auf Speichern klicken. Das nächste, was ich tun möchte, bevor wir mit diesem Video fertig sind, ist einfach zu sehen, wie es jetzt auf dem Handy aussieht. Derzeit befinden wir uns in der Desktop-Ansicht. Wenn Sie den Mauszeiger hier auf der rechten Seite des Bildschirms bewegen, können Sie sehen, dass wir uns in der Desktop-Ansicht Aber schauen wir uns an, wie wir in der mobilen Ansicht aussehen . Klicken Sie auf diese Option. Da haben wir's. Sie können sehen, es sieht insgesamt nicht schlecht aus, aber es gibt ein paar Abstandsprobleme bei diesem Text und am unteren Rand, und auch bei unserem Bild, haben wir eine kleine Lücke an der Seite. Um das zu beheben, kannst du einfach an den Griffen des Bilds ziehen . Eigentlich möchte ich, dass das Bild auch in der Höhe etwas größer ist, ziehe es einfach nach unten. Ich werde meinen gesamten Text und meine Schaltfläche zusammen auswählen und einfach alles nach unten ziehen. O. Richten wir das am unteren Rand des Textblocks aus. Ich ziehe es ein wenig nach oben, sodass es dort steht. Lassen Sie uns diesen Text so aufrufen. I-Knopf. Lassen Sie uns einfach die Größe des Textblocks dort reduzieren. Der Button blockiert und öffnet ihn. Im Allgemeinen mag ich es, wenn zwischen meinem Text und meiner Schaltfläche Platz im Wert von etwa einem Raster besteht Lass es uns einfach da platzieren. Das sieht gut aus. Ich werde einfach ein weiteres Gitter mit Platz darunter ziehen Platz darunter Ja, ich bin zufrieden damit, wie das aussieht. Wir könnten auch einfach einen kurzen Blick auf die Fußzeile werfen, während wir hier sind , und sehen, wie sich das in der mobilen Ansicht ausgewirkt Ich möchte, dass das Logo und der Text über dem E-Mail-Anmeldeformular stehen Ich wähle hier einfach mein Anmeldeformular mit diesen Pfeilen aus. Du kannst einfach darauf klicken, um es nach unten zu bewegen Es wird jedes der Elemente nach unten bewegen jedes der Elemente bis es ganz unten Und dieses Logo fühlt sich ein bisschen zu groß an. Ich werde es einfach mit den Pfeilen dort verkleinern. Verschiebe diesen Text ein wenig nach oben , damit alles gut sitzt Fahren wir fort und ziehen das nach Jetzt, wir können auch dort einfach die Höhe der Fußzeile kürzen Das sieht vorerst gut aus. Hier ist noch viel Platz, aber das wird sich ändern, wenn wir der Seite mehr Inhalt hinzufügen. Im Moment denke ich, dass das Handy gut aussieht. Wir werden im Laufe der Lektion des Kurses zwischen unserer Desktop-Ansicht und unserer mobilen Ansicht wechseln unserer Desktop-Ansicht und unserer mobilen Ansicht . Es ist eine gute Idee, beim Aufbau Ihrer Website immer wieder auf Ihr Handy zu schauen beim Aufbau Ihrer Website immer wieder auf Ihr anstatt es bis zum Ende zu belassen. Es ist eine etwas effizientere Art, Dinge zu erledigen. Aber lassen Sie uns vorerst weitermachen und hier auf Speichern klicken. Wir kehren zur Desktop-Ansicht zurück. Dort werde ich Sie im nächsten Video treffen, in dem wir uns mit dem Aufbau des nächsten Abschnitts unserer Website befassen werden Aufbau des nächsten Abschnitts . Okay, wir sehen uns dort 7. Über uns + Services: In diesem Video werden wir weitermachen und die nächsten beiden Abschnitte unserer Website erstellen . Das sind unser Abschnitt Über uns und der Bereich Dienste. Wenn wir uns das Modell hier ansehen, können Sie sehen, dass wir einen Textkörper haben, zwei Bilder in dieser lustigen Bogenform, und dann haben wir unten eine wellenförmige Linie unserem nächsten Abschnitt haben wir ein bisschen Text und wir haben diesen Drop-down-Bereich für unsere Dienste und wieder eine wellenförmige Linie am unteren Rand Sie haben zurück in den Bearbeitungsmodus geklickt und unter diesem Abschnitt hier auf Abschnitt hinzufügen geklickt Sie möchten fortfahren und einen leeren Abschnitt auswählen. Das erste, was ich tun möchte, ist tatsächlich die Farbe zu ändern. Klicken Sie hier auf den Abschnitt Bearbeiten, Farben, und Sie haben all diese verschiedenen Optionen. Squarespace erstellt verschiedene Farbpaletten die auf den fünf Farben basieren , die Sie ausgewählt haben, was eine wirklich nette Funktion ist Sie können sehen, dass Sie es mit dem grauen Hintergrund und dem dunklen Hintergrund haben könnten grauen Hintergrund und dem dunklen Hintergrund Wir wollen hier mit diesem hier weitermachen , der eine leuchtend pfirsichfarbene Dann möchte ich meinen Text hinzufügen. Klicken Sie hier auf Ad Block-Text und dann geben wir unseren Text sodass Sie ihn wie in jedem anderen Texteditor eingeben können. Du? Und es geht automatisch zu diesem zweiten Absatz. Ich möchte diesen einen Absatz, tut mir leid, zu einer zweiten Überschrift machen , oder vielleicht versuchen wir es sogar mit Überschrift drei. Ich möchte keine weitere Überschrift eins machen , weil ich hier oben bereits eine Überschrift habe. Ich werde diesen Text etwas kleiner machen. Jetzt kopiere ich meinen Absatztext und füge ihn ein. Sie können sehen, dass er bei der Eingabe automatisch von Überschrift drei zu Absatz zwei übergegangen meinen Absatztext und füge ihn ein. Sie können sehen, dass er bei der Eingabe automatisch von Überschrift drei zu Absatz zwei übergegangen Überschrift drei zu Absatz zwei Dann können Sie weitermachen und Ihren Text für das F kopieren. Dann gehen wir Ich werde es leicht nach vorne ziehen. Ich behalte diesen Abstand zwischen zwei Gittern bei, zwei Raster sind gleich und Sie können sehen, wie Sie klicken und ziehen, Ihr Raster wird eingeblendet und wenn ich es loslasse, verschwindet es Nochmals, wenn Sie das Raster dauerhaft sehen möchten, drücken Sie einfach G auf der Tastatur und das hält alles aufrecht, egal was Sie tun, und wieder G, schalten Sie es aus Lass uns weitermachen und unsere Bilder hinzufügen. Blockbild hinzufügen. Ich ziehe das auf die andere Seite des Bildschirms. Klicken Sie auf mein Plus-Symbol Datei hochladen. Und es sieht aus wie dieser hier über einen. Um dann unser zweites Bild hinzuzufügen, könntest du dasselbe tun. Fügen Sie einen Block hinzu oder kopieren Sie einfach ein vorhandenes Bild und fügen Sie es ein. Wenn Sie Befehl C und dann Befehl V ausführen, wird ein Duplikat des Blocks erstellt, den Sie gerade erstellt haben. Lass uns weitermachen und das Bild in diesem Bild ändern. Klicken Sie auf das Bleistiftsymbol und ersetzen Sie dieses Mal und laden Sie die Datei hoch, damit wir unser Bild auswählen können . Oh. Nach wie vor haben die Bilder standardmäßig immer eine Passform und nicht eine Füllung. Es nimmt das Seitenverhältnis an, in dem es hochgeladen wurde. Aber dieses Bild hier, ich möchte eigentlich, dass es diese schöne Bogenform hat. Ich werde auf das Stiftsymbol klicken und zum Design übergehen. Anstatt auf Füllen klicken wir auf Form. Das Bild wird jetzt in einen Kreis gelegt. Ich möchte diese Form hier in diese Bogenform ändern, aber Sie haben viele Formoptionen, mit denen Sie spielen können. Da haben wir's, das sind wir jetzt in einem Bogen. Ich möchte es auf diese Seite des Bildschirms ziehen. Und lass es uns auch ein bisschen größer machen. Da haben wir's. Dieses andere Bild, Sie können sehen, dass wir ein kleines Problem haben weil es hinter diesem Bild steht, aber wir wollen, dass es oben ist. Wenn du auf das Bild klickst und Mauszeiger hier drüber bewegst, kannst du das Bild nach vorne bringen und ich möchte auch, dass es sich bei diesem Bild um eine Füllung handelt und nicht um eine Passform, ein Design, eine Füllung und damit ist das Textfeld für uns bewegst, kannst du das Bild nach vorne bringen und ich möchte auch, dass es sich bei diesem Bild um eine Füllung handelt und nicht um eine Passform, gefüllt Ich werde die beiden Bilder einfach leicht nach links bewegen Bilder einfach leicht nach links Lassen Sie uns diesen Abstand zwischen den beiden Gittern beibehalten und ich möchte diesen blauen Griff einfach so nach oben ziehen. Wir haben eine schöne Menge Polsterung darunter. Das Letzte, was Sie in diesem Abschnitt tun müssen, ist, einfach die Wellenlinie zu erstellen , die wir im Modell hatten, und dazu klicken Sie hier auf den Abschnitt Bearbeiten und möchten einen Teiler hinzufügen. Schalten Sie das ein. Dies ist der Standardteiler , der immer angezeigt wird. Es ist eine Kurve mit einem Strich drauf. Sie könnten den Strich behalten, wenn Sie ihn wollten, oder ihn einfach dort abnehmen. Wenn du dann in die Form klickst, kannst du die Form deiner Trennlinie ändern Sie könnten einen eckigeren Stil wählen. Ich werde diese sanfte Welle beibehalten und Sie können die Höhe und Breite der Welle variieren Je nachdem, welche Einstellungen Sie wählen, werde ich mich für eine schöne, sanfte Welle entscheiden. Okay, klicken Sie da raus. Lass uns weitermachen und unseren nächsten Abschnitt hinzufügen. Abschnitt hinzufügen, leeren Abschnitt hinzufügen. Ich werde es in dieser Farbe belassen und möchte zuerst unser Lehrbuch hinzufügen Ich werde den Textblock wieder herausziehen, er befindet sich an derselben Position wie in diesem Abschnitt, also setzen sie sich ordentlich zusammen und kopieren dann meinen Text und fügen ihn Auch hier möchte ich auf diese Weise eine dritte Überschrift erstellen , sodass sie mit dem obigen Abschnitt übereinstimmt Jetzt möchte ich diesen Dropdown-Block hinzufügen. Füge Block hinzu und schon ist es dieser hier, Akkordeon. Und da haben wir's. Wir ziehen das einfach auf die andere Seite des Bildschirms und wir können anfangen , unsere Daten einzugeben. Die Art und Weise, wie wir den Text für einen Akkordeonblock hinzufügen , ist etwas anders Ich möchte hier auf Bearbeiten klicken und du kannst alle deine Artikel hier sehen Sie können weitere hinzufügen, wenn Sie mehr haben und hinzufügen möchten. Ich mache einfach die drei für dieses Beispiel, klicke darauf und dann gibst du hier deinen Titel ein, nämlich Posteingang und Admin. Dann möchtest du deine Beschreibung hier eingeben. Da hast du's. Sie können sehen, dass das jetzt in der Drop-down-Liste eingetragen Ich mache einfach weiter und fülle das für die nächsten beiden aus und du kannst dasselbe tun Sobald du all deine Inhalte im Akkordeon hast, möchte ich einfach rüberspringen und dir zeigen, wie das in der Live-Vorschau der Website aussieht Fahren Sie fort und klicken Sie auf Speichern. Sie möchten die Seite verlassen und diesen Pfeil in der oberen Ecke sehen Wenn Sie darauf klicken, erhalten Sie eine Vorschau Ihrer Website und zeigen Ihnen, wie sie aussieht. Scrollen wir also nach unten zum Akkordeon-Block und Sie können sehen, wie er in Aktion funktioniert Wenn Sie auf das Plussymbol klicken, erhalten Sie dieses Drop-down-Menü mit dem Text Wenn Sie dann auf das nächste klicken, geschlossen und dieses geöffnet, und so weiter Ein paar Dinge, auf die ich nur hinweisen sollte, sind die Länge und die Breite des Textes. Für mich ist das ein bisschen kurz. Mir wäre es lieber, wenn der Text hier rauskäme und das können wir tun. Schauen wir uns einfach an, wie wir das machen. Klicken Sie erneut auf den Pfeil und gehen Sie zurück zu Bearbeiten. Klicken Sie auf Ihren Akkordeonblock und es ist das Stiftsymbol. Diesmal möchten Sie hier auf Design klicken Hier können Sie viele Änderungen vornehmen. Sie könnten die Größe des Titels und der Beschreibung ändern des Titels und der Beschreibung Im Moment ist es auf eine Überschrift vier in einem zweiten Absatz eingestellt , was für mich hervorragend funktioniert. Wenn Sie hier in den Textabsatz klicken, können Sie hier die Breite sehen, im Moment ist es eine mittlere Breite. Lass uns weitermachen und das auf lang ändern. Wenn du hier rausspringst, hast du noch ein paar andere Optionen, die du hier anpassen kannst. Sie könnten es so einrichten, dass es das erste Element erweitert. Das würde bedeuten, dass dieser immer geöffnet ist , wenn jemand zu ihm runterscrollt Sie könnten es auch so ändern, dass alle diese Optionen gleichzeitig geöffnet werden können dass alle diese Optionen gleichzeitig geöffnet Ich mache weiter und lasse das ausgeschaltet, und Sie könnten Ihr Symbol so ändern, dass ausgeschaltet, und Sie könnten Ihr Symbol so ändern es ein Pfeil und nicht mehr das Pluszeichen Ändern Sie auch die Größe und Dicke des Symbols, wenn Sie möchten, sowie die Platzierung, sodass Sie es am Anfang der Zeile und nicht am Ende haben können am Anfang der Zeile und nicht am Ende Wenn du etwas weiter nach unten scrollst, könntest du auch einen Hintergrund und einen Strich auf deinem Block haben , wenn du das möchtest. Ich mache weiter und lasse es einfach leer. Okay, das sieht gut aus. Zwischen unserem Text und unserem Akkordeonblock ist ziemlich viel Platz Ich ziehe das einfach ein wenig entlang, sodass es mehr vom Bildschirm einnimmt und ich möchte die Höhe verringern, klicke auf meine blauen Pfeile und lass uns das einfach nach oben scrollen Als letztes müssen wir nur noch unseren Teiler hinzufügen. Wir haben die Wellenlinie, die sich in diesem Abschnitt hier befindet Ich möchte hier eine Wellenlinie in diesen Abschnitt einfügen, klicken Sie auf Abschnitt bearbeiten und dann auf Teiler umschalten Du kannst ihn momentan nicht sehen, weil dieser Abschnitt dieselbe Farbe wie die Fußzeile hat, aber du wirst ihn im nächsten Abschnitt sehen, den wir hinzufügen, was wir im nächsten Video tun werden Klicke hier auf Speichern und wir sehen uns im nächsten Video 8. Erfahrungsberichte: In diesem Video werden wir uns ansehen, wie Sie diese nette Funktion zum Verschieben von Testimonials hinzufügen diese nette Funktion zum Verschieben von Testimonials Wir werden es mit diesem etwas anders machen und einen der eingebauten quadratischen Raumabschnitte verwenden Ich weiß, ich weiß. Ich sagte, wir machen alles aus dem Nichts und das tun wir auch so ziemlich, aber das ist einfach die effizienteste Art, diese Schiebefunktion hinzuzufügen . Schauen wir uns an, wie das geht. Sie möchten zurück in den Bearbeitungsmodus klicken und dann zum unteren Bildschirmrand scrollen und einen neuen Abschnitt hinzufügen. Dieses Mal wählen wir einen der integrierten Abschnitte Wenn Sie hier auf Testimonials klicken , suchen Sie nach solchen die dieses kleine Auge, diese kleine Informationsoption haben diese kleine Alle mit dem I können Sie auf die gleiche Weise bearbeiten Sie können jedes dieser Layouts aus jedem der Layouts mit dem I erstellen aus jedem der Layouts mit dem I . Ich werde fortfahren und dieses auswählen. Es sieht ganz anders aus als das, was wir wollen, aber ich möchte dir zeigen, wie du sie bearbeiten kannst , denn sie sind wirklich nützlich für viele verschiedene Dinge auf Websites, diese Blöcke. Diese Blöcke funktionieren etwas anders. Wenn Sie mit der Maus darüber fahren, werden Sie feststellen , dass Sie nicht die Möglichkeit haben verschiedene Blöcke hinzuzufügen Stattdessen möchtest du hier auf Inhalt bearbeiten klicken . Ich werde einfach all diese Optionen einschalten , damit Sie sehen können, was sie bewirken Du hast deinen Titel, der hier am Anfang ist Wir haben auch eine Abschnittsschaltfläche, und das ist diese hier. Dann hat jeder einzelne Block hier ein Bild, einen Titel, einen Hauptteil und eine Schaltfläche. Aber du kannst wählen, ob du alles, was du willst, ein- und ausschalten möchtest. Wir brauchen keine Knöpfe. Wir wollen unseren Titel behalten, aber wir wollen das Bild nicht. Dann wollen wir den Titel und den Text für die Blöcke. Als Nächstes möchten Sie nur zum Inhalt springen. Lassen Sie uns zunächst unseren Titel ändern. Dieser soll ein Wort sagen. Jetzt können Sie einfach die einzelnen Inhaltsblöcke bearbeiten . Sie möchten nur Ihr Testimonial kopieren und hier in den Titel einfügen, und dann können Sie den Namen der Person hier eingeben. Da hast du's. Sie können sehen, dass das jetzt in diesem Teil enthalten ist. Also werde ich jetzt einfach weitermachen und die anderen beiden ausfüllen und Sie können dasselbe tun. Sie können einfach weitermachen und alles löschen, was Sie nicht benötigen. Wenn Sie weitere hinzufügen möchten, können Sie diese ebenfalls dort hinzufügen. Schauen wir uns jetzt einfach das Design und das Layout an. Klicken Sie hier auf die Unterseite des Designs. Das Erste ist, dass wir jeweils nur ein Testimonial auf einer Seite haben möchten . Scrollen wir das einfach nach unten zu einem. Ich werde Infinite Scroll weitermachen. Das bedeutet nur, dass die Leute weiter und weiter scrollen können , sodass es keinen Endpunkt gibt und die Testimonials einfach rotieren Klicken Sie jetzt hier auf Stil Als Erstes möchte ich die Karte loswerden, das Kartenfeld ausschalten und Sie können hier auch die ausschalten und Sie können hier auch Lass es uns ein bisschen kleiner machen oder du könntest es hier manuell ändern Ich werde die gleiche Größe beibehalten. Dann könnten Sie hier noch ein paar andere Einstellungen anpassen. Sie könnten die Position der Pfeile so ändern , dass Sie sie an den Seiten oder unten haben könnten den Seiten oder unten Sie können hier auch den Bereich über der Navigation ändern. Schau dir an, wie sich diese Knöpfe bewegen. Das ist der Raum zwischen der Navigation und dem Inhalt. Wenn Sie einfach einen Rückzieher machen, werden wir uns als Nächstes diese Option für Größe und Speicherplatz ansehen. Das erste, was ich tun möchte, ist die Breite zu ändern, das ist die Breite dieses Textes. Im Moment ist es ziemlich lang und ich möchte diesen Text ein wenig einbringen. Du kannst ihn klein oder mittel machen, oder auch hier kannst du die Breite frei gestalten, kannst du die Breite frei wenn du irgendwo dazwischen hin willst Ein paar andere Einstellungen, nur um sie dir hier anzusehen, wir könnten uns den Abstand zwischen den Elementen ansehen Wenn Sie das ändern, können Sie sehen dass das die Lücke zwischen den einzelnen Elementen ist. Ich werde das klein halten. Du kannst dir auch deine Polsterung ansehen. Das ist die Polsterung des Abschnitts, die Höhe von oben und unten des gesamten Abschnitts Auch hier können Sie es neu gestalten, wenn Sie es oben und unten anders Aber ich werde weitermachen und das auch so klein halten. Das sieht gut aus. Sie können einfach weitermachen und sich hier rausklicken. Als Nächstes möchte ich einfach die Farbe dieses Abschnitts ändern. Klicken Sie hier auf Abschnitt bearbeiten, Farben, und dann werde ich wieder diese helle pfirsichfarbene Farbe daraus machen . Da hast du's Du kannst jetzt die schöne Welle sehen , die wir im letzten Video aufgenommen haben und die jetzt da oben auftaucht. Okay, also ich möchte nur meine Änderungen speichern und dann lass uns einfach zur mobilen Ansicht wechseln und sehen, wie alles dort aussieht. Nun, der Bereich mit den Testimonials sieht gut aus. Sie können sehen, wie es dort durchwischt. Schauen wir uns die anderen Abschnitte an, da wir im letzten Video nicht gemacht haben Das sieht also alles gut aus mit dem Text. Das einzige Problem mit den Bildern ist, dass sie jetzt übereinander liegen und sich nicht überlappen Wir können da einfach ein paar Änderungen vornehmen. Lassen Sie uns das zuerst herunterziehen , es ein bisschen größer machen Es sieht gut aus und wir wollen, dass es hinter dem anderen Bild steht. Also klicken Sie einfach hier auf Rückwärts bewegen und vielleicht ziehe ich das Bild ein bisschen runter, um ein bisschen mehr von dem Foto zu zeigen Und dieser Abschnitt hier sieht okay aus. Vielleicht wollen wir etwas mehr Platz zwischen diesem Textblock und diesem Akkordeonblock, also ziehe ich den Akkordeonblock einfach nach Da haben wir's. Das sieht gut aus. Okay, ich werde diese Änderungen speichern. Im nächsten Video werden wir den Kontaktbereich zu unserer Website hinzufügen den Kontaktbereich zu unserer Website und wir werden auch die Links für die Schaltflächen erstellen , die wir zuvor erstellt haben. Wir sehen uns dort. 9. Kontakt: In diesem Video werden wir den letzten Bereich unserer Website erstellen , den Kontaktbereich. Anschließend werden wir die Schaltflächen so einrichten, dass sie auf den Kontaktbereich verweisen. Wir werden nur ein paar letzte Kontrollen durchführen. Prüfen Sie, ob wir mit dem Aussehen der Website auf dem Desktop, auch auf dem Handy, zufrieden sind Aussehen der Website auf dem Desktop, , und schauen Sie einfach, ob wir noch letzte Änderungen vornehmen möchten, bevor wir mit der Website fertig Okay, lass es uns machen. Also springe zurück in den Bearbeitungsmodus. Scrollen Sie ganz nach unten und Sie möchten einen Abschnitt unter Ihrem Testimonial-Block hinzufügen, fügen Sie einen leeren Abschnitt hinzu, und wir werden die Farbe dieses Blocks ändern er zum dunklen Hintergrund Klicke auf Farben und lass uns hier zu diesem Thema gehen. Als Nächstes möchten Sie unseren Textblock hinzufügen, Text hinzufügen und dann einfach Ihre Kontaktinformationen kopieren und einfügen . Da haben wir es. Auch hier wollen wir das „Kontaktieren Sie mich“ ein bisschen in eine Überschrift drei ändern . Ich ziehe das einfach noch einmal rüber , sodass es mit dem Rest der Website übereinstimmt, sodass wir an der Seite Platz haben, der den beiden Rastern entspricht Wir sind dabei, ein Kontaktformular hinzuzufügen, aber ich werde auch eine E-Mail-Adresse hinzufügen Ich gebe immer sowohl das Kontaktformular eine E-Mail-Adresse an, weil die Leute Präferenzen haben. Manche Leute werden es einfacher finden , das Formular einfach auszufüllen. Daher ziehen es die Leute vor, Ihnen direkt eine E-Mail zu senden. Letztlich möchten Sie den Leuten die beste Gelegenheit bieten, Ihnen eine E-Mail zu senden. Sie möchten nicht, dass etwas sie abschreckt. Ich verwende immer E-Mail und Kontaktformular, aber das ist eine ganz persönliche Präferenz. Um unser Kontaktformular hinzuzufügen, klicken wir hier auf Block hinzufügen und diesmal möchten Sie das Formular auswählen. Da haben wir's. Wenn Sie das rüber werfen, können Sie sehen, dass dies das Standardformular ist , das es uns mit diesen Abschnitten gegeben hat Du kannst es größer machen, wenn du willst. Lassen Sie uns das einfach nach unten ziehen, sodass es mit dem Formular übereinstimmt. Ziehen wir sie tatsächlich beide nach oben und dann haben wir oben die richtige Menge an Polsterung Ich werde den unteren Rand des Formulars vergrößern, damit es schön und kurz Das sind wir. Wenn Sie dem Formular weitere Felder hinzufügen möchten, können Sie das tun. Sie klicken hier auf das Stiftsymbol. Und Sie können im Moment sehen, dass wir hier Formularfelder bearbeiten können. Sie haben Name, E-Mail, Betreff der Nachricht. Das ist nett und einfach. würde ich die meisten meiner Kontaktformulare so behalten Um ehrlich zu sein, würde ich die meisten meiner Kontaktformulare so behalten. Sie können jedoch zusätzliche Felder hinzufügen , wenn Sie Dinge möchten. Wenn du möchtest, dass sie dir einen Link schicken, zum Beispiel eine Datei, könntest du sie bitten, eine Datei hochzuladen, und ja, es hängt einfach davon ab, was du von Leuten erwartest zum Beispiel eine Datei, könntest du sie bitten, eine Datei hochzuladen, und ja, es hängt einfach davon ab, was du , wenn sie Kontakt aufnehmen. Für mich halte ich es gerne einfach, denn auch hier möchte ich den Leuten keine Gründe geben, mich nicht zu kontaktieren. Ich denke, je einfacher das Formular, desto weniger, wenn sie viele Fragen beantworten müssen, könnte es einige Leute davon abhalten, Kontakt aufzunehmen. Sie können die Art und Weise ändern, was auf Ihrer Schaltfläche steht Wenn Sie das ändern möchten, um mir beispielsweise eine Nachricht zu senden , können Sie auch ändern, was in der Nachricht steht, sobald sie sich angemeldet haben. Im Moment ist die Standardeinstellung immer „Danke“, aber du könntest das auch in etwas anderes ändern oder was auch immer du sagen möchtest. Das haben wir mit unserem Kontaktformular erledigt. Ich werde diese Pfeile einfach nach oben ziehen , damit wir ein gutes Stück der richtigen Polsterung haben Und als Nächstes möchte ich auf dieses Kontaktformular verlinken Die Schaltflächen, die wir in unserer Kopfzeile und im Heldenbereich eingerichtet haben, sind der Ort, auf den sie verlinken sollen. Und was wir tun müssen, ist einen sogenannten Ankerpunkt hinzuzufügen . Klicken Sie hier auf den Abschnitt Bearbeiten. Wenn Sie nach unten scrollen , sehen Sie hier den Ankerlink Lassen Sie uns diesen Kontakt einfach anrufen. Wenn wir nun zu unseren Buttons springen , machen wir das zuerst. Klicken Sie auf Ihr Button - und Stiftsymbol, und hier können Sie den Link anhängen. Was Sie eingeben möchten, ist Hashtag-Kontakt Okay. Und das ist der Link , den wir gerade erstellt haben. Wenn nun jemand auf diese Schaltfläche klickt, springt er zum Kontaktbereich, und wir möchten das Gleiche in der Kopfzeile tun . Bearbeiten Sie die Kopfzeile der Website. Klicken Sie auf Ihre Schaltfläche, um sie zu bearbeiten und dann den Link anzuhängen . Es ist dasselbe, was der Hashtag-Kontakt ist. Lass uns einfach weitermachen und überprüfen, ob das funktioniert. Klicken Sie hier auf Speichern beenden und klicken Sie auf den Pfeil hier, um einen Vorschaumodus Ihrer Website zu erhalten. Lassen Sie uns sehen, was passiert, wenn wir auf die Schaltfläche klicken. Da hast du's. Das führt zu unserem Kontaktbereich, was wir wollen Während wir uns im Vorschaumodus befinden, schauen wir einfach auf unserer Website , ob wir etwas optimieren möchten Überprüfe einfach, ob der Abstand stimmt. Wenn etwas fehl am Platz ist , ist es an der Zeit, es auf der Straße zu testen und einfach zu überprüfen , ob alles funktioniert. Ich finde, alles sieht gut aus. Das einzige, was ich vielleicht anpassen möchte, ist, dass wir ziemlich viel Polsterung in unserer Fußzeile haben Lass uns einfach weitermachen und in den Bearbeitungsmodus zurückkehren und Also werde ich die Fußzeile der Seite bearbeiten, den Abschnitt bearbeiten, und dann könntest du entweder den Abstand komplett entfernen und ihn manuell hinzufügen oder du könntest einfach die Höhe dieses Abschnitts von mittel auf klein ändern dieses Abschnitts von mittel Das sieht gut aus. Das allerletzte, was ich in meiner Fußzeile tun möchte , ist, einen kleinen Copyright-Bereich hinzuzufügen Du könntest das einfach in der Hauptfußzeile hinzufügen und hier unten einen kleinen Textblock Ich werde es in einem anderen Abschnitt machen weil ich möchte, dass es in einer anderen Farbe Klicken Sie hier, fügen Sie einen Abschnitt hinzu, fügen Sie einen leeren Abschnitt hinzu, ich werde die Farbe dieses Abschnitts in einen dunklen, diesen hellen Bereich ändern . Lass es uns so klein wie möglich machen. Ich werde tatsächlich die Polsterung loswerden, den Bildschirm füllen, sodass es jetzt nur noch ein Gitter ist, das viel wert Dann lass uns weitermachen und hier auf Block hinzufügen klicken und Textblock hinzufügen. Dann kannst du weitermachen und unser Copyright hier eingeben. Dann heißt es Alt g, wenn du auf einem Mac bist, für dein Copyright-Symbol. 2025 die kreative VA. Ich möchte diesen Text mittig ausrichten und ziehe diesen Textblock so, dass er genau in der Mitte meiner Fußzeile liegt genau in der Mitte meiner Fußzeile Ich möchte, dass er am unteren Rand dieses Textblocks ausgerichtet wird, sodass er etwas Abstand zum kleinen Textblock oben hat . Da haben wir's. Lassen Sie uns abschließend überprüfen, wie wir auf Mobilgeräten aussehen, angefangen mit der Fußzeile. Wir haben gerade das Copywriting hinzugefügt Lassen Sie uns diesen Text zentral ausrichten. Der Rest des Fotos sieht gut aus. Kontaktseite, lassen Sie uns einfach ein wenig Abstand zwischen dem Text und dem Block hinzufügen ein wenig . Und alles andere haben wir meiner Meinung nach schon überprüft. Das einzige, was ich hier vielleicht anpassen würde , ist, dass dieses Logo ein bisschen klein ist Klicken Sie hier auf Seitenüberschrift bearbeiten. Klicken Sie auf Ihr Website-Logo und das Stiftsymbol und Sie können jetzt die Höhe Ihres mobilen Logos ändern Dies hat keinen Einfluss auf die Desktop-Ansicht. Das ist nur für dein Handy. Also mach weiter und mach das 60. Da haben wir's. Sieht gut aus. Gehen Sie, klicken Sie hier auf Speichern, um Ihre Änderungen zu speichern, kehren Sie zur Desktop-Ansicht zurück und kehren Sie in den Vorschaumodus zurück Nur damit wir noch ein letztes Mal unsere Website und ihr Aussehen überprüfen können. Gut gemacht. Sie haben gerade eine Website aus einer leeren Vorlage erstellt. Wie fühlt sich das an? Fühlt es sich gut an? Ich hoffe es. Ich werde dir noch ein paar Dinge zeigen. Im nächsten Video werde ich dir zeigen, wie du ein Favicon hinzufügst Das ist das kleine Symbol in der Browserleiste, und dann sind wir bereit, unsere Website der Welt zugänglich zu machen unsere Website der Welt Okay. Ich sehe dich im nächsten Video. 10. Fügen wir ein Favicon hinzu (ein Favi - was?!!): Bevor wir mit unserer Website fertig sind und sie der Welt zugänglich machen, werden wir zunächst ein Favicon hinzufügen Nun, was zur Hölle ist ein Favicon und warum ist es so wichtig? Lass es mich dir zeigen Favicon ist im Grunde nur dieses kleine Symbol hier, das Sie in den Tabs Ihrer Website sehen Es befindet sich im Webbrowser und neben Ihrer Website, wenn es in den Suchergebnissen angezeigt wird Es ist eine kleine Sache, aber es macht einen großen Unterschied darin, wie die Leute Ihr Unternehmen wahrnehmen werden. Es trägt zur Markenbekanntheit bei und zeigt den Nutzern Ihrer Website, dass Sie ein vertrauenswürdiges, legitimes Unternehmen sind ein vertrauenswürdiges, legitimes Unternehmen Und wenn Sie wie ich sind und in Ihrem Browser 1 Million Tabs gleichzeitig geöffnet haben , hilft es Ihnen, eine Website auch in überfüllten Browsern wiederzufinden überfüllten Browsern wiederzufinden Wenn das Favicon winzig klein ist, Einfachheit Es will in einem wirklich kleinen Maßstab erkennbar sein, also denke ich an die Kamera von Instagram, Nike Swsh oder Apples Apple Wenn Sie jedoch kein Logo haben, machen Sie sich keine Sorgen. Schauen Sie sich einfach Ihre Marke an, sehen Sie, ob es wiederkehrende Symbole oder signifikante Formen gibt , und ziehen Sie einfach davon ab, um zu versuchen , etwas zu entwerfen. Eine gute ausfallsichere Option besteht jedoch darin, einfach eine Initiale zu verwenden, die erste Initiale Ihres Firmennamens zu nehmen und sie auf einem farbigen Hintergrund zu platzieren. Das ist eine wirklich großartige Option für ein Favicon. Wenn Sie sich das anhören und absolut keine Ahnung haben , wie man ein Favicon erstellt, machen Sie sich keine Sorgen Ich werde dir gerade einen supereinfachen Weg zeigen , wie du das machen Wir werden eine kostenlose Software namens Canva verwenden Lassen Sie uns einfach dazu übergehen Du möchtest zu canva.com weitermachen. Wenn Sie ein Konto haben, können Sie sich anmelden. Wenn nicht, können Sie auf diese Anmeldeschaltfläche in der oberen rechten Ecke klicken . Sie werden dann durch den Vorgang der Kontoerstellung geführt. Jetzt gibt es eine kostenlose Version von Canva. Sie ist kostenlos Es wird immer kostenlos sein. Es gibt dort keine Fänge Es gibt nur bestimmte Funktionen, die du nicht nutzen kannst, aber du kannst auf jeden Fall die kostenlose Version verwenden , um dein Favagon zu erstellen Ich werde in diesem Tutorial in der Pro-Version arbeiten, bei der es sich um diesem Tutorial in der Pro-Version arbeiten, bei die kostenpflichtige Version handelt Ich denke, es sind ungefähr zehn oder 12 Dollar pro Monat. die Möglichkeit Wenn Sie Ihr Konto erstellen, erhalten Sie eine kostenlose 30-Tage-Testversion von P zu erhalten. Wenn Sie das also tun möchten, es, kündigen Sie es sofort und nach Ablauf der 30 Tage wird Ihnen nichts mehr berechnet Ich werde dir im Laufe dieses Tutorials die Unterschiede zwischen Pro und Gratisversion erläutern. Okay, sobald Sie sich angemeldet haben, haben Sie einen Bildschirm, der ungefähr so aussieht. Sie möchten hier auf das Plussymbol erstellen klicken, und wir möchten eine benutzerdefinierte Größe von 100 mal 100 Pixeln erstellen. Das ist ziemlich klein, aber unser Favicon ist absolut winzig, sodass es nicht größer sein muss Das hier ist unsere Zeichenfläche und wir können weitermachen und ihr einige Elemente hinzufügen Ich möchte hier links auf Element klicken. Und der Stoff, den ich kreieren möchte, ist diese Blumenform. Ich werde einfach nach dem suchen, was ich will, nämlich nach einer Blume der 60er Jahre. Du hast all diese verschiedenen Elemente hier. Wenn du unter C auf Alle für Grafiken klickst, jetzt alle mit diesem Kronensymbol, das sind Pro-Elemente, du kannst sie also nur verwenden, wenn du die kostenpflichtige Version von Canva hast die kostenpflichtige Version von Canva hast Aber du wirst sehen, dass es hier viele gibt, die du für die kostenlose Version verwenden könntest Es gibt also immer noch viel, was du mit der kostenlosen Version von Canva machen kannst , wenn du dich nicht für die kostenpflichtige Version entscheiden möchtest Jetzt werde ich diese hier auswählen. Das erste, was ich tun möchte, ist es einfach mit diesen Ankerpunkten an den Ecken zu skalieren und es in der Mitte zu platzieren. Jetzt können Sie sehen, wie beim Ziehen diese Hilfslinien auftauchen, die Hilfslinien in der Mitte. Das zeigt mir die Mitte der Seite , wo ich sie platzieren möchte. Ich möchte nur die Farbe ändern. Ich werde dieses Orange behalten, da es zur Blume im Creative VA-Logo passt . Aber lassen Sie uns diese Mittelfarbe einfach in dieses helle Limettengrün ändern . Bitteschön, einfach so. Ganz einfach. Das ist das Fabricon, das ich für unsere Website verwenden werde Aber ich möchte Ihnen nur eine andere Option zeigen, nämlich die erste Initiale Ihres Firmennamens zu verwenden Klicken Sie hier auf die Anzeigenseite, dann möchte ich als Erstes diese Hintergrundfarbe ändern. Wenn Sie hier oben in der Farbe klicken und dann nach dem Hex-Code suchen, werde ich die pfirsichfarbene Farbe verwenden , die wir für unsere Website verwendet haben, Build, das jetzt diese Hintergrundfarbe geändert hat Als Nächstes möchte ich einfach auf einen Textblock klicken. Klicken Sie auf Text, fügen Sie einen Textblock hinzu und ich werde ein V für virtuellen Assistenten haben. Mach weiter und mach das größer. Machen wir 42 draus, vielleicht größer , vielleicht 72. Da haben wir's. Ich ziehe es einfach in die Mitte der Seite. Ich werde es so ändern , dass es dieselbe Schriftart wie unsere Überschriftenschrift für unsere Website hat. Da hast du's. Sie haben jetzt zwei Favicon-Optionen, die Sie verwenden können. Dies ist nur eine sehr kurze Demo, wie du Fabacons in Canva erstellen kannst Aber ja, mach weiter, probiere ein bisschen herum und finde heraus, was für deine Website am besten funktioniert Jetzt wollen wir sie herunterladen. Wir werden hier auf Teilen und herunterladen klicken. Ich möchte sie als PNG herunterladen und dann einen transparenten Hintergrund auswählen. Aus diesem Grund würde ich vorschlagen, ein Pro-Konto zu erwerben , da Sie dies nur mit der kostenpflichtigen Version tun können. Nun zu unserem Mehl, das bedeutet, dass es herausgeschnitten wird. Diese Form wird ausgeschnitten und es wird keinen weißen Hintergrund geben. Wenn Sie sich jedoch für die kostenlose Version entscheiden möchten, funktioniert diese hier als Option dafür sehr gut, da es keinen Hintergrund gibt , der ausgeschnitten werden kann, sodass es sich nur um eine quadratische Form und nicht eine ausgeschnittene Form handelt. Aber hier zum Herunterladen. Da hast du's. So einfach ist das. Jetzt, wo wir unsere Favicons heruntergeladen haben, springen wir zu Square Space, und ich werde dir zeigen, wie man das Favicon hochlädt Klicken Sie also auf Squarespace und Sie möchten dieses Mal nach unten zu den Einstellungen scrollen, zu diesem Los geht's. Hier ist diese Option, Favicon Fügen Sie eine FabaconUpload-Datei hinzu. Wählen Sie das PNG aus, das wir gerade erstellt haben, oder Sie können das PNG aus den Kursdownloads verwenden So einfach geht's, klicken Sie auf Speichern, schließen das Ganze und lassen Sie uns einfach überprüfen, ob es funktioniert. Wir werden uns den Vorschaumodus ansehen. Im Moment wird dort immer noch die quadratische Blackbox angezeigt . Lass uns einfach die Seite aktualisieren. Und da hast du es. Wie einfach war das? Wir haben unsere Website fertig gestellt. Wir haben unser Favicon eingerichtet. Und im nächsten Video werden wir unsere Website der Welt vorstellen Okay. Wir sehen uns dort. 11. Gehen Sie Live!!!: Okay, wir sind fast da. Unsere Website sieht toll aus. Wir sind bereit, es mit der Welt zu teilen. In diesem Video werden wir uns ansehen, wie Sie ein Abonnement auf Squares-Basis hinzufügen und unsere Domain verbinden können. Jetzt können Sie Ihre Domain erst verbinden, wenn Sie das Abonnement abgeschlossen haben Sie müssen dies also zuerst tun. Ich würde dies jedoch erst tun, wenn Sie zu 100% bereit sind, Ihre Website zu starten. Es macht keinen Sinn, das Abonnement zu bezahlen , wenn Sie nicht bereit sind , eine Verbindung zur Domain herzustellen. Sie erhalten standardmäßig eine 14-tägige kostenlose Testversion mit Square Space. Sobald das vorbei ist, erhalten Sie eine E-Mail mit der Frage, ob Sie die Testversion verlängern möchten Klicken Sie einfach darauf und verlängern Sie die Testversion um weitere sieben Tage. Wenn das immer noch nicht lang genug ist, gibt es eine Möglichkeit, wie Sie Ihre Testversion auf unbestimmte Zeit verlängern können Ihre Testversion auf unbestimmte Zeit verlängern Ich werde das als kleines Bonus-Video nach diesem Video Schauen wir zunächst die Abonnement - und Domainoptionen an. Okay, du willst also zuerst hier unten auf das COG in die Einstellungen klicken hier unten auf das COG in die Einstellungen Und dann möchten Sie zur Verfügbarkeit der Website springen , wo Sie sehen können, dass Ihre Website derzeit privat ist und Sie ein Upgrade auf Veröffentlichung durchführen müssen , bevor Sie eine Verbindung zur Domain herstellen können Sie können hier die verschiedenen Pläne sehen. Jetzt ändern sich die Preise immer mit der Fläche. Das ist seit August 2025 aktuell , als ich das drehe. Ihre Preise hängen von dem Land ab, in dem Sie sich befinden, sodass Sie sie hier in den verschiedenen Währungen sehen können sodass Sie sie hier in den verschiedenen Währungen sehen können. Für diese Demo bleibe ich bei Pfund. Und welches Abonnement Sie möchten hängt stark davon ab, welche Funktionen Sie möchten. Wenn Sie gerade erst anfangen, werden Sie sich wahrscheinlich diese beiden Pläne ansehen, den Basic- und den Core-Plan. Wenn Sie jedoch mehr Funktionen benötigen, müssen Sie möglicherweise anfangen, sich die Plus- und die Advanced-Funktionen anzusehen die Plus- und die Advanced-Funktionen , wenn Sie sich insbesondere mit E-Commerce befassen möchten. Scrollen Sie nach unten, um einen Blick darauf zu werfen, was den verschiedenen Plänen enthalten ist und was nicht. Der Unterschied zwischen diesen beiden besteht darin, Sie Ihre Ankündigungsleiste nicht erhalten würden und dass Sie im Basisplan überhaupt keinen Code verwenden können. Ich denke, es gibt auch einen kleinen Unterschied zwischen der E-Mail-Integration weiter unten, es gibt einen Unterschied zwischen einigen der E-Mail-Setups, die Sie vornehmen können Schauen Sie sich das an und wählen Sie eine aus. Es hängt davon ab, ob Sie eine fortgeschrittenere oder eine einfachere Website wünschen. Denken Sie auch daran, dass Sie in Zukunft jederzeit ein Upgrade durchführen können. Wenn Sie sich also nicht sicher sind, wählen Sie einfach den Basisplan Wenn Sie dann etwas nicht tun können , das Sie später tun möchten, können Sie einfach auf einen der teureren Pläne upgraden. Der Preis ändert sich je nachdem, ob Sie monatlich oder jährlich zahlen möchten. Es ist immer günstiger, jährlich zu zahlen Klicken Sie auf den gewünschten Tarif. Und wähle deine Optionen. Sie könnten 24 Pfund pro Monat verdienen, aber es würde 17 Pfund pro Monat ausmachen, wenn Sie eine einmalige Gebühr zahlen würden. Bestätigen Sie Ihre Auswahl und Sie können den Preis sowie das V, das Sie zahlen möchten , sehen den Preis sowie das V, das Sie zahlen möchten , . Sie werden aufgefordert, alle Ihre Daten einzugeben. Ich werde einfach weitermachen und diesem Zeitpunkt schließen. Ich habe bereits ein Squarespace-Konto mit einem Abonnement. Das ist nur ein Demo-Konto , in dem ich dir das zeige. Sie würden einfach weitermachen, alle Ihre Daten eingeben und dann haben Sie ein Square Space-Abonnement. Ich werde das schließen. Daraufhin wird angezeigt, dass Sie ein Abonnement haben und hier zu Domains und E-Mail wechseln möchten Domains und E-Mail Hier richten Sie Ihre Domain ein. Klicken Sie hier auf Domains. Sie können sehen, dass Sie diese Domain haben. Jede Squarespace-Website erhält eine andere erfundene Domain, aber wir möchten eine professionellere Domain haben Sie können hier wählen, ob Sie eine Domain erhalten möchten. Und Sie können Ihre Domain tatsächlich über Squarespace kaufen , wenn Sie möchten Es bietet Ihnen automatisch viele Optionen, die auf Ihrem Firmennamen und Ihrem Seitentitel basieren , und ich zeige Ihnen, welche verfügbar sind und welche nicht. Aber wenn Sie genau wissen, was Sie wollen, können Sie in dieser Leiste hier danach suchen. Schauen wir uns die kreative VA Glasgow an, vielleicht wird sie verfügbar sein. Da haben wir's. Wir könnten weitermachen und den Punktcode bei Großbritannien oder der.com abrufen den Punktcode bei Großbritannien oder der.com Du kannst das hier runterholen und es zeigt dir, wie viel es ist Suchen Sie Ihre Domain, legen Sie sie in den Warenkorb und klicken Sie dann auf Checkout. Sie erhalten Ihr erstes Jahr kostenlos wenn Sie Ihre Domain bei Squarespace erwerben Das ist der Preis hier, das ist der Gesamtpreis für drei Jahre. Das kannst du hier ändern. Du könntest es zehn Jahre lang haben, ein Jahr, je nachdem, was du willst. Aber ja, ganz einfach, wenn du die Domain über Squarespace buchst Sobald du auf Speichern, fortfahren und bezahlen klickst , wird sie automatisch verbunden Sie müssen nichts weiter tun, es ist eine wirklich einfache Option Auch hier werde ich weitermachen und das schließen, weil ich keine Domain verbinden möchte. Die andere Option ist nun , dass Sie möglicherweise bereits eine Domain haben. Vielleicht haben Sie Ihre Domain bei jemand anderem gekauft. In diesem Fall würden Sie, anstatt auf diese Domain zu klicken, auf Eigene Domain verwenden klicken, Ihre Domain dort eintragen und auf den Pfeil klicken, und dann würden Sie einfach durch den Prozess der Verbindung mit dieser Domain geführt . Für welche Option Sie sich entscheiden, hängt stark davon ab , wo Sie sich mit der Domain befinden, ob Sie bereits eine besitzen oder ob Sie eine kaufen müssen. Wenn Sie Probleme damit haben, Ihre Domain zu verbinden, weil es manchmal etwas schwierig sein kann , oder wenn Sie nicht sehr technikaffin sind, kann es sich ein bisschen überwältigend anfühlen. Sie einfach Kontakt mit mir auf, schreiben Sie mir eine Nachricht in den Kommentaren und ich helfe Ihnen gerne weiter. Wenn Sie bereit für den Start sind und das alles funktioniert, wird Ihre Website jetzt in der Welt lebendig sein. Wenn Sie jedoch noch nicht bereit sind, Ihre Website zu starten, sie aber trotzdem mit Freunden teilen möchten oder vielleicht gerade dabei sind, sie zu Freunden teilen möchten oder vielleicht gerade dabei sind erstellen und ein bisschen Feedback von einem Ihrer Freunde wünschen , gibt es eine Möglichkeit , diese von Ihnen erstellte Website zu teilen , ohne eine Domain zu verbinden und auch ohne ein Abonnement zu verbinden Ich werde dir gerade zeigen, wie das geht. Sie möchten zur Website und zur Verfügbarkeit der Website zurückkehren. Es ist derzeit auf privat eingestellt. Und wenn Sie hier auf Password Protected klicken, können Sie ein Passwort eingeben und dann auf Speichern klicken. Schließ das. Ich möchte mein Passwort in Google nicht aktualisieren da es für mein Kontopasswort gilt, das sich vom Webseiten-Passwort unterscheidet. Sobald Sie das getan haben, können Sie diese Domain unter dieser URL kopieren , tut mir leid. Markieren Sie es und dann Befehl C oder Strg C. Ich werde es in einem anderen Tab öffnen , weil ich nur überprüfen möchte, ob es funktioniert. Klicken Sie auf einen Inkognito-Tab. Fügen Sie die Domain ein und Sie werden sehen, dass sie nach einem Passwort fragt Geben Sie das Passwort ein , das Sie gerade erstellt haben. Auch hier nicht Ihr Kontopasswort. Dies ist das Passwort, das Sie gerade für die Website erstellt haben, und los geht's. Das ist jetzt eine Live-Vorschau Ihrer Website und Sie können diese mit Freunden teilen , wenn Sie deren Feedback erhalten möchten, oder vielleicht haben Sie diesen Kurs nur zum Spaß gemacht und wollten einfach sehen, wie der Prozess abläuft. In jedem Fall ist dies eine großartige Möglichkeit, Ihre Website zu teilen , und Sie können sie auch überprüfen. Wenn Sie die Website auf einem Mobiltelefon, einem iPad oder anderen Geräten überprüfen möchten , ist dies eine hervorragende Möglichkeit, dies zu tun. Wer? Sie haben gerade eine Website gestartet. Wie cool ist das? Ich kann es kaum erwarten zu sehen , was du getan hast. Bitte teilen Sie mir Ihre Klassenprojekte mit und haben Sie Fragen? Nehmen Sie einfach Kontakt auf. Ja, freue mich darauf zu sehen, was du geschaffen hast. Okay. Tschüss. 12. Noch Eine Sache ...: Gut gemacht. Sie haben gerade eine Squarespace-Website von Grund auf neu erstellt eine Squarespace-Website von Wie cool ist das? Wir haben in diesem Kurs eine Menge abgedeckt. Sie haben gelernt, wie Sie eine leere Vorlage erstellen, Ihr Logo und ein Favicon hinzufügen und Ihre Headroom-Fußzeile einrichten Du hast gelernt, wie du das Styling für deine Website einrichtest und auch, wie du jeden einzelnen Abschnitt der Seite mithilfe des Fluid Engine-Editors von Squarespace ausarbeitest jeden einzelnen Abschnitt der Seite mithilfe des Fluid Engine-Editors von Squarespace Schließlich haben Sie gelernt, wie Ihre Website mit anderen teilen, eine Domain verbinden und sie der Welt zugänglich machen Es gibt eine Menge, über die wir gesprochen haben, und ich hoffe wirklich , dass es Spaß gemacht hat Bitte teilen Sie mir Ihre Projekte im Upload-Bit für das Klassenprojekt mit . Ich kann es kaum erwarten zu sehen , was du getan hast. Und wenn du kannst, würde ich mich freuen, wenn du mir eine Bewertung hinterlassen würdest. Es bedeutet so viel und es ist auch sehr hilfreich für andere Leute, zu sehen, ob dieser Kurs das Richtige für sie ist. Nun, es gab nur so viel, was ich dir in diesem einstündigen Kurs zeigen konnte , und ich habe bereits Pläne, mehr Kurse zu veranstalten und dir mehr Dinge auf der Website beizubringen. Wenn es etwas Spezielles gibt, das du gerne lernen würdest oder mit etwas, womit du zu kämpfen hast , schreib mir einen Kommentar in den Kommentaren, oder du kannst mir auch eine E-Mail schreiben. Aber jetzt denke ich, dass du feiern gehen solltest. Du hast gerade etwas Unglaubliches getan, und ich bin mir ziemlich sicher, dass du etwas Kuchen verdient hast. Okay, wir sehen uns bald. 13. Bonus: Verlängern Sie Ihre Squarespace-Testversion auf unbestimmte Zeit: Hallo, wie versprochen, ein kleines Bonus-Video, dir zeigt, wie du deine Squarespace-Testversion auf unbestimmte Zeit verlängern Nur um es noch einmal zu betonen: Zahlen Sie nicht für Squarespace, Zahlen Sie nicht für Squarespace bis Sie bereit sind Sobald Sie bereit sind, zu starten, müssen Sie nicht bezahlen. Standardmäßig erhältst du eine zweiwöchige Testversion, wenn du dich bei Squarespace anmeldest Nach Ablauf dieser zwei Wochen werden Sie von Squarespace per E-Mail gefragt, ob Sie mehr werden Sie von Squarespace per E-Mail gefragt, ob Sie Klicken Sie einfach auf die Schaltfläche und schon haben Sie automatisch eine weitere Wenn Sie danach noch mehr Zeit benötigen, haben Sie mehrere Möglichkeiten. Option eins ist einfach eine E-Mail an Squarespace zu senden. Ich habe es früher so gemacht. Jedes Mal, wenn sie immer Ja gesagt haben, verlängern sie die Testphase für dich. Letztlich möchten sie, dass Sie Ihre Website fertigstellen , damit Sie dann anfangen, für ein Abonnement zu bezahlen. Option eins: Schreiben Sie ihnen eine E-Mail. Aber so wie ich es jetzt mache und wie ich es empfehlen würde ist dieser kleine URL-Trick , den ich Ihnen gleich zeigen werde. Es ist super einfach und dauert ungefähr eine Minute. Lass uns das machen. Hier sind wir auf unserer Website. Sie können hier unten sehen, dass die Testversion abgelaufen ist. Sie werden aufgefordert, ein Abonnement abzuschließen. Was wir noch nicht tun wollen. Sie werden hier auch dieses Vorhängeschloss bemerken, sodass Sie die Website nicht mehr bearbeiten können, da die Testversion verlängert wurde. Sie möchten zur Adressleiste gehen. Es spielt keine Rolle , auf welcher Seite Sie sich befinden, also auf jeder Seite. Du willst nur sehen, dass du deine Domain hier hast, und dann heißt es config, lösche alles danach, sodass du nur den Schrägstrich der Konfiguration hast und dann einfach Extend Trial eingeben willst Klicken Sie auf Enter. Und da hast du es. Ihre Testversion wurde erfolgreich verlängert. Da hast du's. So einfach ist das buchstäblich. Sie können diesen Vorgang so oft durchführen, wie Sie möchten. Wenn Sie weitere vier oder fünf Wochen benötigen, müssen Sie dies nur vier- oder fünfmal tun. Jedes Mal, wenn Sie auf „Testversion verlängern“ klicken , erhalten Sie eine zusätzliche Woche. Wenn Sie mehr Zeit benötigen, tun Sie es einfach immer wieder, bis Sie bereit sind, Ihre Website zu starten und das Abonnement zu bezahlen. Also, ja, das war's diesmal wirklich für mich. Wenn Sie das nützlich fanden, folgen Sie mir bitte hier auf Skillshare Und du kannst dich auch in meine E-Mail-Liste eintragen, wenn du möchtest. Ich teile ähnliche nützliche, umsetzbare Tipps zum Betrieb einer Squarespace-Website und auch zu den Realitäten, die die Führung eines kleinen Aber vorerst vielen Dank. Ich werde sehen, wie du raten