Squarespace 7. 1 Grundlagen – Anleitung für Anfänger zum Erstellen von professionellen Websites

1. Einführung: Es gibt also noch andere Squarespace-Tutorials. Aber ich wollte eine erstellen, die mit den neuesten Änderungen, die Squarespace eingeführt hat, auf dem neuesten Stand ist. Und eine, die dir bei der ersten Entscheidung hilft , ob Squarespace die richtige Plattform für dich ist. Wir werden uns also einige der Vor- und Nachteile der Verwendung ansehen. Und dann können Sie schnell mit dem Bauen beginnen und viele der unnötigen erweiterten Optionen umgehen. Wir werden nicht jedes Menü im Detail durchgehen, aber ich werde Ihnen zeigen, wie Sie am schnellsten mit der Gestaltung von etwas beginnen können , das ausgefeilt und professionell aussieht. Squarespace ist eine fantastische Option für alle, die in professionelles Webdesign eintauchen möchten. Abzüglich der langen Lernphase von Optionen wie WordPress, die ich übrigens auch verwendet habe, wenn du gut darin bist, zu entwerfen und zu erstellen, dir aber die Idee des Codierens oder Entwickelns nicht gefällt, dann ist das eine großartige Option. können Sie wirklich Mit minimalem Zeitaufwand können Sie wirklich sehr beeindruckende Ergebnisse erzielen . Hallo, ich bin Jason Miller, ein Grafik- und Webdesigner mit Sitz in London. Ich habe über zehn Jahre Erfahrung und habe über sieben Jahre sowohl mit Squarespace als auch mit WordPress als Plattformen gearbeitet . Diese Klasse ist also in drei Teile unterteilt. Zunächst gebe ich einen umfassenden Überblick und beantworte einige häufig gestellte Fragen, denen ich sicher bin, dass Sie zwei haben. Was ist Squarespace? Was sind die Vor- und Nachteile der Verwendung? Wie lange wird es dauern, bis Sie vertraut genug sind, um Websites zu erstellen? Und wie viel Kontrolle oder Freiheit bietet dir Squarespace über dein Design? Nach dem ersten Abschnitt sollten wir in der Lage sein, zu entscheiden, ob dies für Sie ist oder nicht. Im zweiten Abschnitt gebe ich dir ein verfeinertes Streamline-Tutorial zum Entwerfen mit Squarespace. Dieser Abschnitt soll Ihnen wirklich Orientierung geben und Sie dazu bringen mit der Plattform zu entwerfen und zu erstellen so schnell wie möglich mit der Plattform zu entwerfen und zu erstellen, um optimale Ergebnisse zu erzielen. Ich würde empfehlen, dem zu folgen und tatsächlich Ihre eigenen zu erstellen Beispiel-Website. Während ich dich durch das Ganze führe, werde ich meine eigene Beispiel-Website für Evoke Brewery erstellen, fiktive Marke, die ich in meinem letzten Skillshare-Kurs kreiert habe. Schließlich haben wir ein Verständnis dafür , wie Squarespace funktioniert, und haben jetzt Ihre eigene Beispiel-Website erstellt. Ich teile Ihnen einige Tipps, Tricks und bewährte Verfahren mit. Aber ich habe während meiner Zeit damit begonnen, Websites mit Squarespace zu erstellen. Und das war's. Das Unterrichtsprojekt besteht darin, mit einem kostenlosen Squarespace-Testkonto deine eigene Beispiel-Website zu erstellen deine eigene Beispiel-Website . Also bin ich bereit dafür. Wenn du bereit bist, lass uns anfangen. 2. Ist Squarespace für mich? FAQs: Also häufig gestellte Fragen, ein guter Anfang ist, nun, was ist Squarespace? Squarespace ist eine Plattform, genau wie Social-Media-Apps wie Facebook oder Instagram. Sie ermöglichen es Ihnen, Inhalte zu präsentieren und zu teilen. Squarespace ist eine Webplattform, auf der Sie erstellen, organisieren, gestalten und dann mit der Öffentlichkeit teilen können . den Inhalten einer Website einer Webplattform gehören WordPress, das vielleicht am häufigsten verwendete, Wix, Webflow und andere. Kein Webdesign an sich ist also nicht zu fortgeschritten. Vielleicht müssen Sie zunächst Kenntnisse über Serverhosting und Codierung haben . Es gab also eine ziemlich steile Lernkurve. Aber heutzutage werden viele der Artikel, wir für den digitalen Gebrauch entworfen haben, auf einer Website angezeigt. Wie auch immer, der Unterschied zwischen Webdesign und Design, sagen wir statischen Seiten in einer App, liegt oft in der Software, der Oberfläche, die Sie verwenden. SquareSpace verhält sich also in jeder Hinsicht wie ein AP, eine Schnittstelle. Eine Plattform ist ein Fachbegriff, bei dem Sie sich anmelden und den Sie dann verwenden, um Ihre Layouts zu entwerfen und zu erstellen. Es kann so einfach sein, aber es bietet die Möglichkeit, viel tiefer zu gehen und einige erweiterte Funktionen anzubieten falls Sie sie nutzen müssen. Ich würde sagen, wenn Sie heutzutage Grafikdesigner sind, lohnt es sich, sich mit Webdesign zu beschäftigen. Und Squarespace ist ein großartiger Ausgangspunkt, weil es nicht zu fortgeschritten ist. Sie können die Prinzipien verwenden, die Sie für statisches Design verwenden würden , und sie sofort in die Erstellung ansprechender Websites umsetzen . Die meisten, wenn nicht alle Ihrer Kunden werden irgendwann eine Website benötigen und sie werden sie als ihren bevorzugten Designer lieben . Sie können sich auch darum kümmern. Es dauert also überhaupt nicht lange. Ich würde sagen, um sich mit allen Optionen vertraut zu machen, all die erweiterten Funktionen die wochenlange Nutzung in Anspruch nehmen können. Aber um etwas zu schaffen, das professionell und zweckmäßig ist, könnten Sie durchaus anstreben, dies innerhalb eines Tages, wenn nicht sogar innerhalb weniger Tage, zu tun . Squarespace vermarktet seine Plattform tatsächlich als ein Tool, das so einfach ist , dass einzelne Geschäftsinhaber es verwenden und etwas Professionelles erstellen können . Nun, das könnte zutreffen, wenn jemand einfach Inhalte austauscht und keine weiteren Änderungen vornimmt. Aber ich denke, um es wirklich in den Griff zu bekommen und bewährte Verfahren zu verstehen, erfordert es etwas mehr Zeitaufwand. Alles in allem ist es mein Ziel, dass Sie, wenn Sie diesen kurzen Kurs abgeschlossen haben, in der Lage sein werden , etwas Professionelles zu schaffen. Sie werden die Grundlagen verstehen, die Sie benötigen, um im Namen des Kunden zu erstellen , und Sie werden sich mit Squarespace insgesamt sehr vertraut fühlen . Die Ergebnisse können also in der Tat sehr professionell aussehen. Wenn Sie sich mein Portfolio ansehen würden, würden Sie meiner Meinung nach Schwierigkeiten feststellen , welche Websites auf welcher Plattform erstellt wurden. Ich denke nicht, dass es offensichtlich wäre, welche Websites mit WordPress erstellt wurden und welche Websites mit Squarespace. Das heißt, wir sind großartig. Erweiterte Funktionen einer Plattform wie die WordPress-Angebote von Squarespace sind nicht wirklich darauf ausgelegt, darauf einzugehen. Wenn Sie beispielsweise einen Kunden hatten, der ein Immobilienmakler war , und Sie im Wesentlichen eine Datenbank erstellen müssten , die verschiedene Immobilien auflistet und Ergebnisse liefert, beantworten Sie Suchanfragen dann wäre WordPress deine Plattform. Für die große Mehrheit der Unternehmen, die auf einer Website ihre Marken wirklich präsentieren und Informationen bereitstellen möchten, ist Squarespace jedoch Unternehmen, die auf einer Website ihre Marken wirklich präsentieren und Informationen bereitstellen möchten , eine hervorragende Option. Es gibt also ein paar Einschränkungen und einige davon werden wir in der nächsten Lektion mit den Vor- und Nachteilen besprechen. Einer der Hauptunterschiede besteht jedoch darin, dass sich bei WordPress um Open-Source-Software handelt, es sich bei WordPress um Open-Source-Software handelt, sodass Beiträge einer größeren Community willkommen sind. Und viele Leute haben verschiedene Plugins erstellt , die Sie in Wordpress integrieren und mit denen Sie bestimmte Probleme auf maßgeschneiderte Weise lösen können. Mit maßgeschneiderte Weise lösen Squarespace können Sie einige Drittel hinzufügen Party-Modifikationen, aber es gibt bei weitem nicht so viele, wie WordPress zu bieten hat , wenn Sie sich die Beispielvorlagen ansehen , aber Squarespace bietet, können Sie im Allgemeinen ziemlich schnell feststellen, ob mehr Funktionen, nach denen Sie suchen, oder wenn es etwas Maßgeschneidertes gibt, aber nicht abgedeckt werden kann. Squarespace ermöglicht zwar ein sehr breites Spektrum an Anpassungen, aber es ermöglicht Ihnen nicht, Anpassungen vorzunehmen , die über die Funktionen für das Preset hinausgehen. Obwohl WordPress komplett maßgeschneidert ist, würdest du in Photoshop buchstäblich etwas nachbauen und dann weggehen, es erstellen und erstellen. Squarespace verfügt über vordefinierte Parameter und Optionen, die ausgiebig getestet wurden und sehr gut funktionieren ist eine großartige Nachricht für kleinere Unternehmen, die kein Budget für vollständig maßgeschneidertes Design haben. Alles in allem würde ich Squarespace damit vergleichen, einen Anzug von der Stange zu kaufen, ihn dann aber maßgeschneidert und an Ihre Bedürfnisse anpassen zu lassen ihn dann aber maßgeschneidert und . Wo WordPress, nun ja, es ist dasselbe, als die einzelnen Stoffe und Materialien auswählen, sich einen Stil von Grund auf ausdenken und einen komplett maßgeschneiderten Anzug haben. So oft ist das Endergebnis sehr ähnlich, aber der Prozess besteht aus Schweißnähten. Hoffentlich beantwortet das einige Ihrer Fragen. In der nächsten Lektion werden wir uns einige spezifische Vor- und Nachteile ansehen , um Ihnen bei der Entscheidung zu helfen, ob dies für Sie ist. 3. Vor- und Nachteile von Squarespace: In dieser Lektion werden wir einen kurzen Überblick über einige der Vor- und Nachteile der Verwendung von Squarespace im Vergleich zu anderen Plattformen wie vielleicht Wix, WordPress geben. Nun, für den ersten ist Pro für Squarespace einfach, ich meine ernsthaft einfach zu bedienen. Jetzt hat Squarespace es tatsächlich als Tool vermarktet , mit dem Einzelpersonen ihre eigene Website ohne vorherige Erfahrung selbst erstellen konnten dem Einzelpersonen ihre eigene Website ohne vorherige Erfahrung selbst erstellen . Aufgrund des Feedbacks, das ich von verschiedenen Kunden erhalten habe, ist es für die Leute etwas zu schwierig, sich für einen durchschnittlichen Geschäftsinhaber zu entscheiden und sich selbst für ihn zu nutzen, es sei denn, sie haben ziemlich viel Zeit zum Lernen wie man es mit Software benutzt. Aber für kreative Profis ist es wirklich einfach zu bedienen und es lohnt sich, zunächst Zeit zu investieren, um zu lernen, wie man es benutzt wie man es richtig macht. Für Next Pro ist es schnell. So schnell geht tendenziell mit einfach einher. Aber in Squarespace gibt es wirklich viele Tools, Vorlagen und Abkürzungen, die alle darauf ausgelegt sind , dir dabei zu helfen, etwas zusammenzustellen , das professionell aussieht, aber so schnell wie möglich. Jetzt haben wir wieder einige Anstrengungen unternommen. Ich habe gesehen, wie sie auf YouTube aufgetaucht sind. Ich behaupte, jemand könnte in 1 Stunde eine Website erstellen . Vielleicht, wenn das möglich ist. Ich glaube nicht, dass Sie so schnell eine sehr professionelle und sehr umfassende Website erstellen könnten eine sehr professionelle und sehr . Aber sicherlich an einem Tag. Das ist möglich, hängt wohl davon ab, wie hoch du die Messlatte legst, aber es ist schnell, sehr schnell. Nun, das ist für die meisten Menschen ein großes Problem. Es müssen keine Server verwaltet werden. Nun, das hat auch einige Nachteile, die wir später eingehen werden. Das bedeutet jedoch, dass Squarespace dir nicht wirklich Zugriff auf die Kernwebsite gewährt. Alles liegt in ihren Händen, um sie zu verwalten, zu sichern und Fehler zu beheben. Sie müssen also keine Kenntnisse in der Verwaltung von Servern haben . Sie müssen keine unserer Infrastrukturen einrichten. Sie können einfach ein Squarespace-Konto erstellen und mit der Erstellung von Websites beginnen und diese dann an Kunden weitergeben , wenn Sie fertig sind. Dies erspart möglicherweise massive Kopfschmerzen. Und Vorlagen, Squarespace hat einige fantastische Vorlagen. Meiner Meinung nach sind sie viel besser als die Vorlagen, die Sie von einer Plattform wie Wix erhalten. Einige der besten Vorlagen für die ich je gefunden habe. Nun, obwohl ich sie optimiere und personalisiere, sind sie gut genug, um die Grundlagen von Air zu erfüllen, aber es bietet dir wirklich einen guten Ausgangspunkt, wenn du eine neue Website erstellst. Also die Vorlagen, besonders wenn Sie gerade erst anfangen, sind eine großartige Möglichkeit, durch Reverse Engineering zu lernen und sich mit dem vertraut zu machen, was funktioniert und was nicht. Einige der fantastischen Starts, die wir Ihnen geben. Jetzt kommen wir zu den Nachteilen und es gibt einige Designbeschränkungen für Squarespace, z. B. bei den Headern für Navigation für eine Vielzahl von Optionen. Wenn Sie jedoch über die Ihnen zur Verfügung stehenden Optionen hinausgehen möchten , ist es sehr schwierig und potenziell gefährlich, dies anzupassen. Wenn Sie über die festgelegten Einschränkungen hinaus personalisieren, hat Ihnen Squarespace die Möglichkeit gegeben. Nun, das heißt, wenn zukünftige Updates eingeführt werden, könnte möglicherweise etwas auf Ihrer Website kaputt gehen. Wenn Sie also mit der Option, die Squarespace Ihnen bietet, zufrieden sind der Option, die Squarespace Ihnen bietet, ist sie fantastisch und es gibt immer mehr Optionen. Aber wenn Sie etwas wirklich Maßgeschneidertes tun möchten oder wenn Sie für Kunden arbeiten. Aber du kennst eine ganz besondere und akribische und akzeptierst hier oder vielleicht 20 oder 30 Optionen nicht, aber darüber hinaus kann ich nicht gehen. Wird dann ja, Sie können auf einige Probleme stoßen. Ich würde sagen, für die überwiegende Mehrheit der Kunden sind die Optionen, die Sie erhalten, allesamt bewährte Verfahren. Was funktioniert? Gut genug, dass für jeden immer etwas dabei ist. Nun, das ist der Nachteil, dass Sie die Website nicht auf Ihrem eigenen Server hosten können. Für einige von uns müssen Sie also, wenn Sie eine Reihe von WordPress-Websites haben , Hilfe und Unterstützung anbieten, obwohl Sie große Kopfschmerzen haben. Sie müssen sich um Backups usw. kümmern. Sie stellen Ihren Kunden diesen Service in Rechnung. Es kann Teil Ihres Resteinkommens sein. Wenn du Squarespace nutzt, kannst du es in ihrem Namen hosten und ein Modell erstellen. Ich würde nicht vorschlagen, das zu tun, da jeder googeln könnte was es kostet, einen Plan bei Squarespace zu haben. Und sie sind vielleicht nicht glücklich, wenn Sie versuchen, zusätzlich zu laden. Im Allgemeinen übergibst du dem Kunden am Ende also eine Website und gibst ihm direkt den gibst ihm direkt Link zum Squarespace-Konto zu seiner Website. Das bedeutet, dass Squarespace und mit ihrem jährlichen Hosting-Plan Geld verdienen . Aber du bist es nicht. Das ist also ein weiterer Nachteil, ein Mangel an Einnahmen aus Änderungen. Was mich betrifft, möchte ich nicht wirklich einen großen Teil meines Einkommens mit kleinen Änderungen und Optimierungen erzielen, aber nicht kreativer Natur. Es ist einfach so, dass es auf einer Website wie WordPress, Plattformen wie WordPress oder Client nicht angenehm ist, bestimmte Änderungen selbst vorzunehmen oder Änderungen zu aktualisieren oder zu implementieren, die von neuen Plug-ins stammen . Nichts davon muss auf Squarespace passieren. Sobald Sie dies einem Kunden übergeben haben, ist es für ihn so einfach, sich selbst zu ändern und zu aktualisieren. Aber bei den meisten Dingen werden sie wahrscheinlich nicht zu Ihnen zurückkommen , um dies zu optimieren oder zu beheben. Sie werden es schaffen. Das ist möglicherweise ein Vorteil für Ihren Kunden, aber es könnte ein Nachteil sein, wenn Sie darauf angewiesen sind Einnahmen aus speziellen Änderungen zu erzielen. Squarespace ist eine Plattform, auf der Ihre Kunden die meisten dieser Änderungen wirklich selbst vornehmen können. Trotzdem hasse ich es, wenn ich E-Mails erhalte, in denen ich gebeten technische Änderungen oder Aktualisierungen an einer Website vorzunehmen , die ich erstellen möchte. Damit verdiene ich wirklich gerne mein Geld. Für mich sind das gute Nachrichten, aber ich weiß, dass dies für einige von Ihnen ein Betrug und unser letzter Betrug sein könnte, und das ist keineswegs ein Deal Breaker. Aber obwohl die Suchmaschinenoptimierung auf Squarespace gut ist, würde ich sagen, sie ist gut. Es ist nicht so gut wie Wordpress. Wenn Sie also auf wirklich wettbewerbsfähige Suchbegriffe bei Google drängen , würden Sie feststellen, dass eine WordPress-Website einen Vorteil hat. Sie werden diesen Unterschied oder diesen Vorteil nicht bemerken , es sei denn, Sie optimieren wirklich und verwenden extrem wettbewerbsfähige Keywords. Trotzdem ist es ein zu berücksichtigender Faktor, der berücksichtigt werden muss, ob SEO in Ordnung, aber nicht herausragend ist. Hoffentlich hilft Ihnen dieser ehrliche Überblick über einige der Vor- und Nachteile, eine Entscheidung darüber zu treffen , ob Sie diese Plattform nutzen möchten oder nicht. Ich verwende sowohl Squarespace als auch Wordpress. Ich habe es kurz mit ein paar Websites auf Wix versucht und Squarespace ist eine meiner Lieblingsplattformen. Ich verwende WordPress für maßgeschneidertere oder manchmal anspruchsvollere Jobs. Und aber Squarespace war für viele meiner Kunden absolut fantastisch. Wenn du überzeugt bist, schließ dich mir in der nächsten Lektion und wir beginnen tatsächlich mit der Erstellung mit Squarespace. 4. Legt es zu erstellen – einen Startpunkt auswählen: Um loszulegen, müssen wir zunächst squarespace.com besuchen. Jetzt habe ich das gemacht, ohne angemeldet zu sein. Und das ist der Bildschirm, den Sie sehen werden. Du suchst nach v gets started by them. Stecken Sie den oberen Teil hier rechts fest. Ich werde dich durch das Ganze führen, als hätte ich keine anderen Squarespace-Konten erstellt. Ich habe tatsächlich einen anderen Bildschirm. Ich würde das besuchen, weil ich, wie Sie sehen, schon einmal eine ganze Reihe von Squarespace-Websites erstellt habe. Tatsächlich passen sie nicht alle auf diese Seite. Es gibt 32 von ihnen. Also werde ich das mit dir durchgehen. Ich werde zu meinem Konto springen. Sie werden jedoch eine Seite wie diese sehen und auf Los geht's klicken. Es gibt einen, ich schätze, du hast es früher einen Zauberer genannt , der dich durch die Schritte führt. Wenn Sie möchten, können Sie diesen Assistenten überspringen , der nur dazu dient, Ihnen Vorlagen und Ideen zu zeigen , die für Sie relevant sind. Also werde ich tatsächlich auf Skip, Skip, Skip klicken. Und das ist die Seite, zu der ich hier gelangen möchte, wo ich einfach nachschauen und auswählen , welche Vorlagen für mich von Interesse sind. Also werde ich das schließen. Und für meine Zwecke werde ich es erstellen. Das ist also mit meinem Konto verknüpft. Während ich diesen Kurs unterrichte, kann ich mich wieder anmelden und Sie durch die Etappen führen. Also hier sind wir auf diesem Bildschirm. Denke daran, dass du noch kein Squarespace-Konto hast, also musst du eines erstellen , sobald du deine Vorlage ausgewählt hast. Nun zu den Vorlagen und dies ist eine der besten Funktionen von Squarespace. Sie können etwas finden , das dem, was Sie erstellen möchten, so nahe wie möglich kommt . Und anstatt dann zu versuchen alles von Grund auf neu zu entwerfen und zu erstellen, können Sie damit beginnen, Ihre Inhalte zu optimieren und anzupassen und auszutauschen. Als professioneller Designer möchten Sie wahrscheinlich noch viel mehr von einem neuen Blatt wechseln. Du wirst auch mit dem Layout spielen. ist unwahrscheinlich, dass du eine Vorlage genau so akzeptierst , wie sie von Squarespace stammt. Und wenn Sie das professionell machen, werden andere Sie dafür einstellen, um wirklich Ihre eigene kreative Sichtweise darauf zu legen. Aber das ist ein guter Anfang und Sie können sehen, dass eine große Auswahl an Vorlagen verfügbar ist . Also, wenn Sie möchten, können Sie die verschiedenen Kategorien erkunden. Ich erstelle offensichtlich meine Beispiel-Website für die fiktive Evoke-Brauerei. Also könnte ich mir die Lebensmittel ansehen und sehen, welche Vorlagen die Leute unter dieser Kategorie markiert haben . Ich könnte mir vielleicht auch die Restaurants ansehen. Vielleicht für ein Aussehen und ein Gefühl, das ich mir wünsche. Aber du hast die Idee. Es stehen viele, viele Vorlagen zur Auswahl. Und wenn Sie sich wirklich sicher sind , welche Vorlage Sie verwenden möchten, klicken Sie auf Start mit. Ich würde jedoch empfehlen, zuerst auf die Vorschau zu klicken , anstatt sie anhand des Miniaturbilds zu beurteilen. Und klicken Sie auf die Vorschau und schauen Sie sich um, scrollen Sie durch und sehen Sie, was Sie von einer Vorlage halten. Wenn Sie möchten, könnten Sie jetzt klicken, ohne Vorlage loslegen und einfach von vorne anfangen und eine Website aus leeren Seiten erstellen. Das ist eine Option. Aber ich denke, dass Reverse Engineering einiger dieser Vorlagen Ihnen zunächst wirklich helfen wird zu verstehen, was getan werden kann. Und es ist viel einfacher zu optimieren, als von Grund auf neu zu erstellen, wenn Sie mit Squarespace noch nicht vertraut sind. Also vielleicht pausiere das Video hier. Wenn Sie Ihr eigenes Projekt verfolgen, schauen Sie sich die Vorlagen genau an und wählen Sie eine aus, die Ihrer Meinung nach für Sie relevant ist. Ähm, du musst natürlich nicht dieselbe Vorlage wählen wie ich. Nun, es ist erwähnenswert, dass dies nicht wie bei Plattformen wie WordPress ist, bei denen die Vorlage, die Sie auswählen, bedeutet, dass Sie bestimmte Einschränkungen haben. In Squarespace. Die Vorlage ist nur ein Ausgangspunkt. Ich könnte also, wenn ich die Stileinstellungen durchgehen und Änderungen vornehmen würde, diese Vorlage in der Mitte hier in diese Vorlage verwandeln hier in diese Vorlage hier könnte ich sie genau gleich aussehen lassen. Ich werde auf nichts stoßen , was ich aufgrund einer Vorlage nicht tun könnte. Also. Sie haben immer noch vollen Zugriff, passen Sie alle Einstellungen an. Also, wonach suchst du in den Startvorlagen? Nun, es müssen nicht unbedingt Schriften sein. Diese sind sehr einfach zu ändern. Die Farben lassen sich leicht ändern. Manchmal suche ich nur nach dem allgemeinen Layout, dem Aussehen und dem Gefühl, das sie verwendet haben, welche Vorlage mir weniger Arbeit gibt , und welche Vorlage , wenn ich durchscrolle, sehe ich Layouts, aber ich denke, das würde gut für meine Marke funktionieren. Dieser sah gut aus, aber wenn ich nach unten scrolle, bin ich mir nicht sicher, ob diese Art von Offsetüberschriften, die Bilder von diesen Denver links sind. Da bin ich mir nicht sicher. Das passt wirklich zu mir. Okay. Hier ist einer. Ich bin mir nicht sicher, wie Sie das aussprechen. Kolyma vielleicht. Aber ich werde auf jeden Fall ein ziemlich dunkles Thema haben. Ich denke ein mattschwarzer Hintergrund. Mir gefällt der große Text sehr gut. Wie einige der Layoutideen, viele Full-bleed-Bilder. Also ja, für mich denke ich, das wäre ein guter Ausgangspunkt. Sie können also hier klicken, um eine vollständige Demo-Website anzuzeigen , wenn Sie möchten, würden sie jedoch in einem neuen Tab öffnen, wenn Sie einige Seiten nebeneinander vergleichen möchten . Aber ich bin glücklich. Also klicke ich auf Mit diesem Design beginnen. Machen Sie dasselbe mit Ihrer bevorzugten Vorlage und begleiten Sie mich dann beim nächsten Schritt. Also wird Squarespace das jetzt für mich zu meinem Konto hinzufügen . Und ich komme sofort auf eine Seite, auf der ich spezifische Informationen für diese Website eingeben kann . Für dich selbst müsstest du lediglich ein Squarespace-Konto erstellen. Also die üblichen Dinge, die Sie erwarten würden, geben Sie eine E-Mail-Adresse ein, wählen Sie ein Passwort, solche Dinge. Sobald Sie auf dieser Seite angekommen sind, werde ich die Seite evoke Brewery nennen. Machen Sie dasselbe, geben Sie v und zitieren Sie den Titel, der für Ihre Marke relevant ist. Und auf diesen Seiten erfahren wir nur , was wir jetzt mit einem neuen und verbesserten Squarespace tun können und wo wir sind. Lassen Sie uns Sie anhand dessen orientieren , was wir hier vor uns haben. Die Seitenleiste auf der linken Seite. Dies ist im Wesentlichen deine Art, im Backend von Squarespace zu navigieren . Das Frontend, was der Besucher sieht, sobald unsere Website online geht, ist also sieht, sobald unsere Website online geht alles rechts von der Seitenleiste, die ich öffnen kann, um im Vollbildmodus zu erscheinen, indem ich auf die Schaltfläche oben rechts klicke. Das ist also das Frontend, das Ihre Besucher sehen würden. Diese Seitenleiste hilft uns bei der Navigation im V-Backend. Bei squarespace hast du eine gewisse Zeit, die sich im Laufe der Jahre verändert hat. Normalerweise sind es ungefähr zwei Monate , weil ich ein Pro-Konto habe, ein Circle-Konto, ich habe etwas länger, also habe ich tatsächlich 182 Tage Zeit, was ziemlich großzügig ist. Sie können sich jederzeit an sie wenden, wenn Sie im Auftrag eines Kunden arbeiten und etwas länger benötigen, aber so viel Zeit können Sie eine Website erstellen, ohne dass Sie einen kostenpflichtigen Plan benötigen. Wo gibt es diese Website? Vorerst? Du kannst zwar einen Domainnamen angeben, Domainnamen, den du entweder bei Squarespace oder anderswo gekauft hast . Sie können das ganz einfach platzieren. Vorerst weist Squarespace jedoch einen temporären Domain-Hauptnamen zu . Es lohnt sich also, diese Seite mit einem Lesezeichen zu versehen. Dies ist, was Sie erneut aufrufen werden um mit dem Backend darauf zuzugreifen. Und das kann angepasst werden. Es hat mir hier eine zufällige Wortfolge gegeben , Alligator Cat Seven. Wenn ich also zu Einstellungen und Domains gehe, können Sie das sehen und die Option haben , zu kaufen oder eine Verbindung herzustellen. eine richtige Domain Squarespace ist eine richtige Domain und stellt uns kostenlos Subdomains zur Verfügung. Das heißt, während wir das entwickeln, wenn ich hier auf diesen zufällig zugewiesenen Domainnamen klicke, könnte ich tatsächlich einen auswählen, der für die Marke relevanter ist , was meiner Meinung nach eine nette professionelle Note ist. Also verwende ich, sofern es kostenlos ist, evoke brewery und klicke auf Umbenennen. Und einfach so, du wirst sehen, dass sich das geändert hat. Und das ist jetzt über ein Kleid, das ich besuche, um auf das Backend einer Website zuzugreifen. Wir werden darüber sprechen, obwohl wir darauf zurückkommen werden, wenn wir uns ansehen, was Sie tun, um wenn wir uns ansehen, was die Website zu starten, wir werden uns die Sichtbarkeit und die Berechtigungen der Website ansehen , die Squarespace standardmäßig einrichtet. Wenn Sie also zu Einstellungen, Verfügbarkeit der Website gehen , können Sie sehen, dass dies standardmäßig auf privat eingestellt ist. Also nur Sie selbst oder jemand, dem Sie diesen speziellen Link zur Verfügung stellen. Und du brauchst v nicht, die Teile am Ende hier, es ist nur fess bis to.com. Wenn du jemandem diesen Link zur Verfügung stellst und er nicht angemeldet ist, wird er nichts sehen. Also könntest du das ändern. Sie könnten eine passwortgeschützte Option und ein Passwort wählen. Auf diese Weise, wenn Sie Ihren potenziellen Kunden oder jemandem, den Sie sich ansehen wollten, eine Website schicken Ihren potenziellen Kunden oder . Wenn Sie sie hier oben per URL senden, zusammen mit einem von Ihnen ausgewählten Passwort, kann Bell jetzt tatsächlich eine Website speichern. Alle Änderungen, die Sie vornehmen, werden in Echtzeit wiedergegeben. Das ist also eine nette Geste, wenn es darum geht, mit Kunden zu arbeiten und sie zu schicken. Vielleicht schickst du ihnen Updates über deinen Fortschritt oder du schickst die Etappen der Website, um Feedback von ihnen zu erhalten. Ziemlich nett, das tun zu können und eine gut professionell aussehende URL zu haben . Das ist also eines der Dinge ich an Squarespace sagen muss. Wenn du mit WordPress oder anderen Plattformen arbeitest, kann es ziemlich viel Admin-Arbeit geben, einen Domainnamen einzurichten, etwas auf dem Server einzurichten, einfach loszulegen gestalten. Mit Squarespace. Sie können es buchstäblich mit nur wenigen Klicks tun. Also hier sind wir. Wir haben unsere Vorlage ausgewählt. Wir haben eine temporäre Domain eingerichtet und sind bereit, mit der Anpassung und Gestaltung zu beginnen. Also werden wir das in der nächsten Lektion zusammen machen. 5. Legt es an – die Vorlage anpassen: In einer früheren Lektion haben wir unseren Ausgangspunkt vorbereitet und jetzt haben wir ihn eingerichtet. Dies ist die von uns gewählte Vorlage, einige Beispielinhalte, und wir sind bereit, mit der Anpassung zu beginnen. Was ich also noch einmal vorschlagen würde, dieser Kurs ist nicht, Ihnen zu zeigen, was jedes einzelne Menü und jede einzelne Schaltfläche einer Option tut, Sie durch einen optimierten Prozess zu führen, um einfach mit dem Erstellen und Lernen zu beginnen das Wesentliche, um so schnell wie möglich etwas zu kreieren, das professionell aussieht. Ich empfehle also, von der Homepage aus zu beginnen. Und wenn du in der V Squarespace-Seitenleiste überprüfen möchtest, welche Seite du gerade betrachtest. Wenn du auf Seiten klickst, siehst du neben jedem unserer Abschnitte eine ausgegraute Schrift in Großbuchstaben. Es hat das Wort Demo. Das soll Sie wissen lassen, dass es sich nur um Demo-Inhalte handelt , die Sie verwenden. Wir schauen uns gerade die Startseite an , die hervorgehoben ist. Und wenn es um das Styling geht, denke ich, dass dies eine ziemlich gute Seite sein kann da sie eine Mischung aus Inhalten enthält. All das wird also ein bisschen mehr Sinn machen , wenn wir eintauchen. Persönlich fange ich mit dem Header an. Sie wechseln also in den Bearbeitungsmodus. Zuallererst. Und du hast oben links einen kleinen Knopf. Butt bringt dich in den Bearbeitungsmodus oder du kannst beliebige Stelle auf der Seite doppelklicken. Also klicke ich auf die Schaltfläche, um in den Bearbeitungsmodus zu gelangen. Und du siehst, dass jetzt die Seite ohne unsere Squarespace-Seitenleiste geladen wird. Und wenn du den Mauszeiger über verschiedene Elemente bewegst, siehst du die Blöcke, aus denen diese Elemente bestehen , auf Squarespace. Sie sind auch in Abschnitte unterteilt. Und Sie haben ein wenig Kontrolle über die Einstellungen für jeden Abschnitt, für jeden Block und für jede gesamte Seite. Wir werden also etwas detaillierter darauf eingehen, sobald wir mit der Anpassung des Inhalts beginnen. Aber lassen Sie uns zunächst nur den Stil betrachten und diesen Demo-Inhalt vorerst beibehalten. Also der Header, wenn ich den Mauszeiger nach oben in Richtung Seitenkopf bewege und solange ich mich im Bearbeitungsmodus befinde, wird diese Option „ Seiten-Header bearbeiten“ angezeigt. Also werde ich darauf klicken. Und wie gesagt, wir wählen ein Template, das Sie wählen. Optionen werden nicht gesperrt. Es gibt Ihnen nur bestimmte Einstellungen, um mit unsicheren Demo-Inhalten zu beginnen. Ich könnte also jede Art von Header erreichen, die ich mag, indem ich einfach die Einstellungen ändere, die wir hier haben. Also zum Titel und Logo der Website haben wir die Wahl, unser eigenes benutzerdefiniertes Logo hinzuzufügen, was ich auf jeden Fall tun werde. Aber zuerst gehe ich einfach zurück. Und ich werde mit diesem Tab hier in der Desktop-Ansicht nachschauen . Ich möchte ein Layout auswählen, mit dem ich zufrieden bin, den Header. Also klicke ich auf Header-Layout. Und ich würde gerne sehen, wie die Dinge aussehen. Ich denke, wir haben unser Logo in der Mitte. Diese kleine Box steht für Ihre sozialen Links. Und dann wäre die Navigation auf der linken Seite. könnte ich ändern. Es ist ziemlich einfach, das in Zukunft rückgängig zu machen. Ich klicke vorerst darauf und gehe zurück. Etwas anderes würde ich gerne tun. Ich möchte nicht, dass das transparent ist. Ich würde gerne eine Volltonfarbe hinter dem Header sehen können. Dafür kehre ich zu diesen global angewendeten Einstellungen zurück , das ist dieser kleine Globus-Tab oben hier. Und wenn ich auf Stil klicke, kannst du sehen, ob ein Moment , usw. dynamisch. Ich möchte das Thema auswählen, während wir es stylen. Und dann kann ich eine der Farben wählen, aber sie ist in meinem Thema vorhanden. Die andere Option, einfarbig , mit der Sie hier eine beliebige Farbe auswählen können. Aber das würde ich gerne mit meinen Themenfarben verbinden . Also werde ich die V-Dark-Option wählen V-Dark-Option eigentlich ziemlich nahe an dem liegt, wonach ich suche, für meine Marke. Aber ich werde die Anpassung dieser Farben mit Ihnen durchgehen . Als Nächstes. Wenn ich jetzt zu Seitentitel und Logo zurückkehre, bin ich bereit, mein Logo auszutauschen. Also werde ich dorthin navigieren. Oder Sie können es einfach per Drag & Drop ziehen. Und ich habe eine Datei vorbereitet, aber sie ist genau richtig. Sie möchten also keinen negativen Leerraum um das Logo herum haben. Du willst, dass es schön eng geschnitten ist. Und für meine Zwecke benötige ich eine Light-Version meines Logos. Ich werde es nicht für das vollständige Logo verwenden, was ich Ihnen zeigen kann, wenn ich es einfach hier platziere Dies wäre mein vollständiges Logo. Ich werde stattdessen das verwenden, was nur für den Logotyp ist. Also ziehe ich das in den Bereich Tierarzt-Logo. Und das war's. Es hat es an Ort und Stelle gebracht. Das ist also etwas kleiner als ich es gerne hätte. Und Sie können sehen, dass Sie hier einige Optionen haben , um die Größe anzupassen. Es gibt Ihnen nur die Möglichkeit, die Höhe anzupassen, aber für WIP für dann folgen Sie entsprechend. Also lasst uns die Höhe um 80 Pixel erhöhen , das sieht gut aus. Und dann eine mobile Höhe. Ich verschiebe diesen Schieberegler so, dass er irgendwie zusammenpasst. Sie können übrigens mit den beiden Schaltflächen oben hier zwischen der Desktop - und der mobilen Ansicht wechseln zwischen der Desktop - und der mobilen Ansicht , was sehr hilfreich ist. Also wenn ich das mache, sieht es in der mobilen Ansicht so aus. Ich bin also ziemlich zufrieden mit diesen Einstellungen. Erwähnenswert ist, dass alle Änderungen, die du an V-Inhalten vornimmst, auch nicht den Stil, den du zum Speichern benötigst, nicht automatisch live gehen. Oben links drüben , wo Fertig steht. Wenn Sie den Mauszeiger darüber bewegen, haben Sie zwei Möglichkeiten, Ihre Änderungen zu speichern oder zu verwerfen. Also klicke ich auf Speichern. Und das ist jetzt im V-Stil für diesen neuen Header gespeichert. Aber ich habe jetzt eingerichtet, dass alle anderen Stiländerungen tatsächlich vorgenommen werden, nicht live auf der Seite, sondern dann in einem speziellen Abschnitt. Wenn wir also zurück zum Startbereich unserer Squarespace-Seitenleiste navigieren , siehst du, dass es eine Design-Überschrift gibt. Und hier werden die restlichen Stiländerungen stattfinden. Wenn Sie auf die erste Option, Website-Stile, klicken, können Sie sehen, dass Sie hier eine Reihe von Kategorien haben, Schriftarten, Farben, Animationen. Das ist eine neue Funktion, mit der ich sehr zufrieden bin. Squarespace hat Abstände hinzugefügt, globale Abstände. Sie können auch Schaltflächen und Bildblöcke anpassen. Ich würde also empfehlen , diese Überschriften leise, intuitiv und selbsterklärend durchzugehen diese Überschriften leise, intuitiv , aber sie einfach anzupassen und zu ändern , um sie an Ihre Bedürfnisse und an Ihre Marke anzupassen. Also fange ich mit den Schriften an und habe einen Moment Zeit. Die Schrift spiegelt nicht ganz wider, was ich mir für die Brauerei vorgestellt hatte. Dies ist eine ziemlich generische, fett gedruckte Schrift. Es ist gut lesbar, es ist leicht zu lesen, aber ich möchte etwas verwenden, das vielleicht etwas leichter, ein bisschen schlanker ist. Und für meine Hauptüberschriften könnte ich versuchen, etwas zu wählen , das dem Wortlaut von evoke etwas näher kommt. Eine Serifenschrift. Squarespace gibt dir einige Ansatzpunkte. Es versucht immer, Ihnen fast eine einfachere Option zu bieten, und dann können Sie tiefer eintauchen, wenn Sie möchten. Wenn Ihnen also die Schriften gefallen haben , die bereits von der Vorlage vorgeschlagen wurden, können Sie diese beibehalten. Sie haben einige Optionen, z. B. die Anpassung der Basisgröße, die Sie in Echtzeit sehen können. Es zeigt Ihnen eine globale Vorschau. Aber noch einmal, bis Sie oben links zu Speichern gehen, ist nichts, nichts in Stein gemeißelt. Sie könnten sich also durch diese Überschriften und Absätze klicken und hier aus einer Reihe von Optionen wählen. Wenn du die gleiche Schrift behalten möchtest oder wenn du auf Schriftfamilie klickst, könntest du ihm eine andere Schrift austauschen. Wenn ich auf Zurück klicke. Bevor Sie dazu kommen, wenn Sie zu Schriftarten wechseln möchten, wenn Sie hier auf diesen Abschnitt klicken, haben wir einen Moment Zeit. Es heißt Acumen Pro. Sie werden sehen, dass dort Schriftpaket steht und es gibt die Option, zu wechseln. Wenn wir also klicken, um das Schriftpaket zu wechseln, erhalten Sie tatsächlich eine Kombination aus Pairing vorkonfigurierter Schriften. Ich würde also empfehlen, ein paar davon auszuprobieren. Du sparst nichts. Es ist also ganz einfach, sie einfach anzuklicken und einen Blick darauf zu werfen und zu versuchen , etwas zu finden, das in eine allgemeine Richtung Sie suchen, bevor geht , nach der Sie suchen, bevor Sie dann eine Feinabstimmung vornehmen und mache sie noch mehr winzige Änderungen. Das ist also eine sehr nützliche Funktion. Scharfsinn Pro. Ich denke, das ist das Schriftpaket, das mit dieser Vorlage vorinstalliert war. Zukunft. Das benutze ich oft und so weiter. Da gibt es viele Möglichkeiten. Es unterteilt sie auch in Sans-Serifen. Serif, eine gemischte serifenlose Version, ohne die kleinen Serifen an den Rändern der Zeichen. Serif beinhaltet diese Kanten, sodass es ein traditionelleres, klassischeres Aussehen hat. Und wenn ich auf einige dieser Optionen klicke, wirst du sehen, dass das einen großen Unterschied im Gesamtstil macht . Nun, für das Lesen auf dem Bildschirm ist I'm Sans Serif definitiv besser für Ihren kleineren Text, Ihre Körpertexte, es ist weniger wahrscheinlich, dass sie zerbrechen. Und wenn jemand nicht den neuesten Retina-Bildschirm hat. Da gibt es also eine gemischte Option, die ziemlich gut ist und nicht immer, aber im Allgemeinen können diese gemischten Optionen eine Serifenschrift für Ihre Überschriften für den größeren Text mit einer serifenlosen Schrift für v kombinieren eine Serifenschrift für Ihre Überschriften für den größeren Text mit einer serifenlosen Schrift , kleiner Text. Es ist in der Vorschau gemacht, hat es mit diesem Text hier nicht wirklich gemacht. Ich frage mich, ob vielleicht, okay, also das als Fließtext klassifiziert. Ich nehme an, das ist immer noch eine kleine Überschrift. Also nochmal, Sie können rausgekommen sein oder über die Font Pack-Optionen. Aber auch hier können Sie sich durchklicken und sich einige der Optionen hier ansehen. Wählen Sie etwas aus, von dem Sie denken, dass es für Ihre Marke geeignet ist. Jetzt weiß ich für diese Marke, wonach ich suche. Also werde ich es durchgehen und etwas Speziferes auswählen. Also für meine Absätze möchte ich Arielle definitiv nicht verwenden. Wenn du auf Alle Schriften durchsuchen gehst, wirst du sehen, dass es eine umfangreiche Bibliothek gibt. Und ich glaube, im Moment Schriften von Google-Schriften, von Adobe Typekit und auch von einigen anderen Foundry abgerufen. Es gibt also eine riesige Auswahl und es würde ziemlich lange dauern, bis Sie alle Optionen durchblättern würden. Es gibt also diese praktische Suchfunktion. Wenn Sie an einer Marke arbeiten, für die Sie bereits Schriften und Farben ausgewählt haben . Oder Sie könnten einfach den Namen einer Schriftart, nach der Sie suchen, direkt dort eingeben . Ich werde Lato verwenden, was meine bevorzugte Schriftart für den Haupttext ist. Und wir haben uns als Option entschieden. Ich könnte dann ein anpassbares Gewicht wählen , was ich tun werde. Ich werde das nur ein bisschen leichter machen. Buchstabenabstand. Ich bin zufrieden mit. Sie sehen Visa, ganz selbsterklärende Möglichkeiten zur Feinabstimmung. Squarespace verwaltet Schriften, indem ihnen einen von verschiedenen Stiltypen zuweist. Es gibt also verschiedene Arten von Überschriften und es gibt drei verschiedene Arten von Absätzen. Also, wenn ich meine Änderungen vorerst speichere und die Geschwindigkeit dabei ziemlich gut ist, aber manchmal wählst du eine Funktion aus. Das Laden und Aktualisieren dauert einige Sekunden . Wenn ich doppelklicke, um in den Bearbeitungsmodus zu wechseln, konzentrieren wir uns hier nur auf diesen Teil des Textes. Sie können sehen, wenn ich diesen Text eines Augenblicks hervorhebe, ihm wird eine Überschrift für Gebete zugewiesen, auch Überschrift 32.11 ist die größte, weil sie die kleinste ist. Und dann haben Sie Ihre Absätze, 1 ist wiederum der größte, freie der kleinste. Jetzt wissen wir also, was sich darauf auswirkt. Es werden diese Teile von Texten sein, aber Sie können eine dieser Voreinstellungen angeben. Wenn wir zum Speichern zurückkehren würden, hätten wir diesen Text nicht klein geschrieben. Aber nur zur Veranschaulichung, wir werden zurück zum Stil, zu Schriften, zu Absätzen gehen. Wenn Sie nun unten nachschauen, wo wir diesen Schieberegler haben, können Sie die Größe für jeden dieser Absatztypen auswählen. Weil ich diesem Textteil einen freien Absatz zugewiesen habe . ich den Schieberegler bewege, kannst du sehen, dass er sich darauf auswirkt. Es ist also ganz nett, diese Sowjets zu stapeln. Sie haben einige Optionen, wenn es darum geht größere Absätze zu entwerfen, aber dann vielleicht auch etwas kleineren Text. Nun zu meinen Überschriftstexten und denken Sie daran, während ich Sie durch mein Beispiel führe. Bitte arbeiten Sie das selbst durch. Sie müssen nicht jede der von mir ausgewählten Optionen verwenden. Das ist genau das, was meiner Meinung nach am besten für die Marke wäre , mit der ich zusammenarbeite. In meinem Fall, für meine Überschriften, glaube ich nicht, dass ich in der Lage sein werde, eine Schriftart zu finden, die genau genug zu dieser benutzerdefinierten Schriftart für evoke passt . Wenn ich es nicht genau zuordnen kann, verwende ich lieber etwas , das es ergänzt. Die Schrift, die ich hier für Brewery verwendet habe, der Slogan ist Futura. Also klicke ich in die Überschriften, wähle Familie aus, durchsuche alles. Suchen Sie nach Futura PT, das ist perfekt. Das wird jetzt als Schriftart für Überschriften ausgetauscht. Nun, das ist ziemlich weit von dem entfernt was ich mir für die Überschriften erhofft habe. Zum einen möchte ich, dass das Schriftgewicht viel geringer ist. Also werde ich das Gewicht ändern und es auf 300 reduzieren. About sieht nett und leicht und elegant aus. Ich möchte auch, dass es nur in Großbuchstaben erscheint. Und das ist ein kleiner Tipp, funktioniert aber manchmal ganz gut. Nur Überschriften in Großbuchstaben. Also machen wir das in diesem Abschnitt hier. Text transformiert in Großbuchstaben. Und jetzt wird das nur in Großbuchstaben angezeigt. Und dann werde ich es zwar nicht ganz so dramatisch platzieren, wie ich es im Logo für die Brauerei getan habe. Ich werde auf jeden Fall V erhöhen, weniger Abstand. Also lass es uns versuchen. Das ist vielleicht ein bisschen zu viel. Lass es uns versuchen. Nichts 0,15 EM. Das sieht ziemlich gut aus. Aber ich kann mir vorstellen, dass ich auf ein paar Probleme stoßen werde , wenn ich es so weit auseinander habe, wir können dieses kleine bisschen Text sehen. Es nimmt drei Zeilen ein. Ich denke, das ist die größte Überschriftengröße. Also werde ich das etwas reduzieren. Ich benutze Free als V, größte Größe skaliere das ein bisschen zurück. Wenn ich Beispiele für Texte mit diesen bestimmten Größen finden möchte , können Sie sie durchschauen. Aber generell die Templates auf der Homepage, du solltest in der Lage sein, für alles ein Beispiel zu finden. Da ist also meine zweite Überschrift, ich bin mir nicht sicher, ob ich eine freie Überschrift haben werde, aber wir könnten ja, da bewegen sich einige Texte. Sie sind auf freiem Weg. Wird etwas kleiner werden. Schon wieder. Ohne Überschrift, wirklich würde ich für eine beträchtliche Menge an Texten verwenden , vielleicht einen Absatz, aber etwas, das ich hervorheben möchte. Ich finde, das sieht dort ganz nett aus. Und dann zu persönlich, ich verwende Fett für Texte, aber vielleicht führe ich einfach einen Absatz ein. Ich hätte also die gleiche Größe wie der Absatztext. Ich würde das nur auf 1.1 setzen. Es hat also fast die gleiche Größe. Es hat einfach einen anderen Stil. Das ist es also. Sobald ich auf Zurück und dann auf Speichern klicke. Das hat das Aussehen und die Haptik massiv verändert. Eine Vorlage, die diese Schriftänderungen bereits vornimmt. Und das war's. Wir können die Feinabstimmung vornehmen, während Sie mit dem Entwerfen beginnen. Aber als Ausgangspunkt, das war's, meine Schriften sind vorhanden. Jetzt. Sie können auch Schriftarten für Ihre Schaltflächen anpassen, was ich noch nicht getan habe. Möglicherweise führe ich Sie nicht Schritt für Schritt durch jede dieser Einstellungen , da derselbe Vorgang wiederholt wird. Du wählst deine Schriften. Und dann gehst du einfach und optimierst jeden dieser Schieberegler , um ihn anzupassen. Das ist also ziemlich selbsterklärend. Ich werde Sie nicht durch jedes davon führen, aber ich werde es außerhalb der Kamera durchgehen und einfach den Stil für die Tasten anpassen den Stil für die Tasten und wo wir sind, falls Sie interessiert sind, das sind die Einstellungen, die ich erhalten habe Auch das mag ich sehr, ich mag Großbuchstaben für die Buttons. Ein paar nette, großzügige Abstände. Also für mich sieht das aus, sieht wirklich gut aus. Ein nettes Feature, das ich erwähnen werde , als ich auf den Tab mit der sekundären Schaltfläche geklickt habe . Wir haben jetzt eine kleine Warnung , um Ihnen mitzuteilen, dass diese Seite kein Damals hat, was auch immer das Element ist. Das ist also sehr nützlich beim Stylen. Wenn Sie zu einem Element kommen , das auf der Seite nicht vorhanden ist, ist das eine nette Geste. Da ist eine kleine Warnung für dich. Also nochmal, Sie haben drei verschiedene Arten von Tasten. Sie konfigurieren das Preset und sind dann bereit, es zu verwenden, aber in der gesamten Vorlage. Die nächste große Anpassung ist also Farbe. Ich werde die Farbe nicht so stark ändern , weil wir in meiner Marke tatsächlich Graustufenfarben verwenden, die dem, was wir in der Vorlage haben, sehr nahe kommen. Aber ich werde dich trotzdem durch diesen Prozess führen. Also nochmal, wir befinden uns unter Site Styles. Und dieses Mal wollen wir statt auf Schriften auf Farben klicken. Und Sie können sehen, dass dies die aktuelle Farbpalette ist. Sie haben also ein paar Möglichkeiten. Ich erkläre zuerst, wie diese angewendet werden. Jede der Farben in der Palette Ihres Themes wird also auf ein Preset angewendet, und es gibt Ihnen zunächst helle Voreinstellungen , helle Voreinstellungen, dunkle Voreinstellungen und dann die dunkelsten. Ich verwende tatsächlich einen Cocktail aus den Farben, die du ihm gegeben hast. Nun, das bringt Sie zu einem wirklich schnellen Ausgangspunkt. Aber auch hier gilt: Wenn Sie Anpassungen und Feinabstimmungen vornehmen müssen, können Sie viele Anpassungen vornehmen. Wenn Sie für eine dieser voreingestellten Optionen auf das kleine Bearbeitungssymbol klicken würden . Sie werden sehen, dass Sie zu jedem einzelnen Element Ihrer Website gelangen . Und Sie können die verwendete Farbe vollständig anpassen. Wenn ich also z.B. diesen hier für kleine Absätze angeklickt habe diesen hier für kleine Absätze , wollte ich, dass sie eine andere Farbe haben. Ich könnte jede Farbe wählen, die ich mag. Oder wenn ich auf den Paletten-Tab klicke, könnte ich auf eine der Farben klicken, die ich in die Farbpalette programmiert habe. Also viele Anpassungen, aber Sie müssen nicht alle Optionen durchgehen. Du benutzt das nur, um zu finden, tunen und zu optimieren, was ich liebe. Und Sie können tatsächlich oben rechts auf jedem Seitenabschnitt sehen , welche Farbkombination aus Ihrer Palette angewendet wurde. Sie können diesen Abschnitt also sehen. Darauf ist eine dunkle Farbe aufgetragen, die zu diesem hier passt. Und dieser Abschnitt ist auch hell, das passt hier oben. Also, bevor wir die Farben tatsächlich optimieren, sollten dir aber eine Vorstellung davon geben, wie Squarespace sie verwendet und anwendet und wie viel Kontrolle du hast. Ich werde meine Änderungen also nicht speichern, aber ich werde hier einige ziemlich drastische Änderungen vornehmen, nur damit du das sehen kannst. Wird benutzt. Sie haben also Voreinstellungen, aus denen Sie wählen können. Ich verwende gerade eines der Presets. Wenn ich ein solches Preset auswähle, indem ich einfach auf diese eine Schaltfläche klicke, jede Farbe auf deiner gesamten Website ändert sich jede Farbe auf deiner gesamten Website einfach so. Es ist also eine ziemlich leistungsstarke Methode, um verschiedene Farbkombinationen in der Vorschau anzuzeigen ohne zerstörerische Änderungen vorzunehmen. Nun, wenn Sie wie ich sind, besonders wenn Sie für eine Marke arbeiten, wenn Sie diese Phase erreicht haben, haben Sie bereits ein Logo erstellt. Sie haben wahrscheinlich die Farbpalette festgelegt, wenn nicht sogar vollständig, wahrscheinlich zumindest die Kernfarben, die Sie verwenden möchten. Also eine Option, und ich verwende sie nicht, weil ich nicht sicher bin, ob es Korea zu 100 Prozent sind, ist, dass Sie einen Tab aus dem Bild haben und Sie tatsächlich ein Bild hineinziehen können , und Squarespace identifiziert die Farben, die in diesem Bild erscheinen. Das könnte also nützlich sein, wenn Sie nach Ideen suchen oder wenn Sie nach oben schauen, Sie können die Voreinstellungen ignorieren und tatsächlich jede dieser Farben selbst auswählen. Squarespace implementiert dies vom hellsten zum dunkelsten. Und ich schätze, du hast deine, deine satten Farben schienen am besten zu funktionieren, wenn du sie in die Mitte eines Gaumens legst. Wenn wir also zur Palette bearbeiten gehen, wenn Sie versuchen, ihr mindestens eine helle und eine dunkle Farbe zuzuweisen. Und kostenlos in der Mitte kannst du etwas freier einstellen und damit spielen. Dadurch wird in der Regel sichergestellt, dass diese Farben, wenn sie in die Vorlage geworfen werden, wie vorgesehen funktionieren. Also könnte ich z. B. eine staubige Version eines Türkis wählen. Ich könnte dann eine starke Version eines Türkis wählen. Könnte hier so etwas für diese vierte Option wählen. Es bewegt sich also in Richtung einer wirklich dunklen Farbe, aber es besteht immer noch die Möglichkeit, dass es eine gewisse, gewisse Sättigung aufweist, die immer noch gut funktioniert. Und dann möchtest du für deine dunkle Farbe sogar, dass sie schwarz oder vielleicht ein cremefarbenes Grau ist. Wenn ich jetzt durchscrolle, können Sie sehen, dass diese Kombination, so wie sie in die Vorlage eingefügt wird, wie vorgesehen funktioniert. Es gibt einen guten Kontrast und wir erzielen die Ergebnisse, die wir erwarten würden. Ich werde das tatsächlich wegwerfen , weil ich mit der Palette, die ich erhalten habe, zunächst zufrieden war . Sogar ganz wie dieser staubige Braunton, den wir hier haben. Ich freue mich sehr, diese Farbpalette gerade erst verwenden zu können. Und das passiert manchmal in Squarespace. Das ist einer der Vorteile. Manchmal sind Sie angenehm überrascht und eine Vorlage bringt Sie nah genug an das, was Sie suchen, sodass Sie nicht durch Seiten mit Optionen blättern müssen. Und Sie müssen keine Feinabstimmung vornehmen, wenn Sie mit dem, was Ihnen präsentiert wird, zunächst zufrieden sind . Deshalb haben wir jetzt einige der Kernfacetten eines Marken-Looks eingegeben , die Schriften, die Farben, und wir können sehen, dass diese in unseren Demo-Inhalten zum Tragen kommen . Aber ich bin mir sicher, dass Sie sehr daran interessiert sind Ihre eigenen Inhalte zu erstellen. Es gibt jedoch noch einen weiteren Schritt bevor wir mit dem Austausch von Inhalten beginnen Schauen Sie sich nur unsere Seiten und die Navigation an. Und jetzt, da wir eine gute Vorstellung von unserem weiblichen Stil haben, werden wir anfangen zu entscheiden, welche Seiten wir behalten. Und wir werden ein wenig Zeit damit verbringen , die Navigation zu erklären. Also werden wir das in der nächsten Lektion zusammen machen. 6. Erstelle – Page und Navigation: In dieser Lektion werden wir uns ansehen, wie unsere Seiten Seitentypen sind und die V. V-Navigation in Squarespace funktioniert. Nun, die Seitentypen könnten möglicherweise etwas verwirrend sein. Ich denke, das liegt daran, dass Squarespace nach nach Updates übereinander eingeführt hat. Es ist also nicht der intuitivste Teil von Squarespace, aber ich verspreche dir, dass es Sinn macht. Fangen wir also mit der Navigation an. Jetzt. Wenn du dir die Seitenleiste ansiehst, habe ich den Bereich v Pages besucht. Und das ist in zwei Teile gegliedert . Im ersten Teil haben wir eine Hauptnavigation mit einer Überschrift, und Sie werden alle Inhalte bemerken , die wir hier platzieren. Es erscheint auch in unserer Navigation in der Kopfzeile einer Website. Es gibt einen weiteren Abschnitt namens Not Linked. Und unsere Homepage ist im Moment eine dieser Seiten. Und alles in diesem Abschnitt hier, obwohl es eine Seite ist, besucht werden kann, mit der man verlinkt werden kann, es wird nicht in der Navigation oben angezeigt. Um zu demonstrieren, dass das für Wave funktioniert, wenn ich unseren Home-Bereich nach oben in unserer Hauptnavigation ziehe , siehst du, dass er jetzt in der Navigation in unserer Kopfzeile erscheint. Es wurde unterstrichen, um hervorzuheben , dass dies die Seite ist, die wir gerade betrachten, und dass sie sich nicht mehr im Abschnitt „Nicht verlinkt“ befindet. Jetzt musste ich nicht auf Speichern klicken, um das zu erreichen. Das passiert also tatsächlich in Echtzeit, wenn Sie Seiten in der Navigation herumziehen. Das ist also ein bisschen beängstigend. Gleichzeitig ist es sehr einfach, es rückgängig zu machen und einfach zurückzuziehen. Wenn ich mit dem, was ich getan habe, nicht zufrieden wäre. Ich glaube, ich werde die Startseite zu Beginn unserer Navigation platzieren . Standardmäßig fungiert das V-Logo als Home-Taste. Ich denke, viele Besucher kennen das jetzt, aber einige möchten immer noch gerne ihre Heimat in der Navigation sehen. Also werde ich es dort belassen um sie glücklich zu machen. Also einige dieser Demo-Inhalte werden Sie behalten wollen, einige davon werden Sie nicht benötigen. Also würde ich vorschlagen, sich durchzuklicken. Ich werde auf Über klicken und schauen, ob mir dieser Demo-Inhalt gefällt. Wenn ich lieber etwas von Grund auf neu erstellen möchte. Also v Über die Seite. Ja, vielleicht gibt es etwas, mit dem ich arbeiten könnte. Es könnte das Thema von etwas Helles zu etwas Dunklerem ändern . Aber ich kann es behalten, wenn ich auf Instruktoren klicke. Und Sie werden feststellen, dass das kleine Demo-Symbol verschwindet, sobald ich auf eine Seite geklickt habe . Das liegt daran, wenn Sie auf eine Seite klicken und sich entscheiden, nicht auf diesen kleinen Mülleimer links zu klicken, um sie zu löschen. Ich denke, Squarespace geht davon aus dass du diesen Inhalt behalten möchtest, also wird diese kleine Demo-Erinnerung entfernt. Unsere Instruktoren, das gefällt mir nicht. Ich denke, wir könnten es besser machen. Ich klicke auf den Mülleimer links und lösche. Sobald Sie auf Bestätigen geklickt haben, ist das alles. Die Seite ist weg. Aber du wirst beim Löschen meiner ersten Seite feststellen, dieser kleine Abschnitt hier erscheint, gelöschte Seiten. Und wenn Sie darauf klicken, haben Sie tatsächlich 30 Tage Zeit bis diese dauerhaft gelöscht werden. Also ein kleines Sicherheitsnetz für alle gelöschten Inhalte. Als nächstes klicke ich auf Klassen. Es ist ein ziemlich einfaches Layout. Ich glaube nicht, dass ich diesen Standort behalten muss . Ich könnte so etwas für den Standort behalten, aber lösche es vorerst. Es gibt einige andere gute Optionen für Kontakte und Standortseiten. Und dann ein Blog. Der Blog enthält normalerweise die ersten Beiträge als Demo-Inhalt. Und der Blog ist der erste unserer Seitentypen für verschiedene. Wenn ich für einen Moment zurückgehe, die Startseite und die About-Seite, haben sie dasselbe Symbol. Und das sind normale Seitentypen. Das heißt, wenn ich auf Bearbeitungsmodi klicke, verursacht Squarespace unregelmäßige Seiten. Sie sind in Abschnitte unterteilt. jedem Abschnitt können Blöcke schweben. Jedem Abschnitt kann ein eigenes Farbthema zugewiesen werden. Das ist es also, was es als reguläre Seite definiert. Wenn ich auf den Blog gehe, wirst du sehen, dass dieser eine eigene, einzigartige Seitenleiste hat. Es funktioniert nicht. Wenn ich abschnittsweise in den Bearbeitungsmodus gehe. Es ist ein einziger Abschnitt und bietet Ihnen Optionen zur Verwaltung Ihrer Blogbeiträge. Ich werde also nicht näher auf V eingehen, die Blog-Funktion von Squarespace, die ich für sehr intuitiv halte. Sie können sich wahrscheinlich durchspielen. Das konfigurieren. Und wie gesagt, es gibt dir zunächst ein paar Beiträge, sodass du dir ansehen kannst, wie diese eingerichtet wurden. Aber der Blog spiegelt alle Änderungen im Stil der Website wider, die Sie am Rest der Website vorgenommen haben. Und wenn Sie es anpassen , werden Sie feststellen, dass Sie einige Optionen auswählen können , die entweder für mehr als Blogbeiträge oder für jeweils zwei einzelne Beiträge gelten entweder für mehr als Blogbeiträge , wie zum Beispiel Farben, die Schriften, die für verschiedene Abschnitte verwendet werden. Aber probiere es aus. Du brauchst meinen Beitrag nicht, um dir beim Einrichten der Blogseiten zu helfen. Wir werden uns also auf Dinge konzentrieren, die etwas designorientierter sind . Also wenn ich eine neue Seite hinzufügen wollte, Seitentyp, jetzt haben wir gelöscht, wir haben nur für Zuhause via Bout. Und ich werde tatsächlich für den Blog löschen. Meine Brauerei wird keinen Blog-Feed haben. Wenn du auf den Plus-Button klickst, sogar die nächsten beiden Hauptnavigation hinzufügen , sodass es hier beginnt oder nicht verlinkt ist. Sie werden sehen, dass es eine ziemlich große Anzahl von Optionen gibt. Also unter Seiten habe ich das erwähnt. Squarespace verursacht einen unregelmäßigen Seitentyp. Aber dann haben Sie diese verschiedenen Seitentypen , die es als Sammlungen kategorisiert. Sie haben auch Ordner und Links. Wir beginnen also mit den Optionen für die Kollektionen und den Shop. Auch hier denke ich, dass dies den Rahmen dieses Tutorials etwas sprengen würde, aber Sie können ganz einfach Ihren eigenen E-Commerce-Shop erstellen und anpassen. Super intuitiv, einfach zu bedienen. Das ist also keine normale Seite, das ist ein besonderer Seitentyp. Und das dient dazu, diesen Shop einzurichten, zu kategorisieren Produkte und viele andere Funktionen zu kategorisieren. Es hat ein Portfolio, das einen speziellen Seitentyp hat und aus Portfolioelementen besteht. Wenn das also etwas ist , das für Fotografen wirklich nützlich ist, schätze ich, auch für Designer. Und Sie wählen aus einigen Vorlagen. Und das dient fast als Indexseite für Salze. So sehr ähnlich wie die Blog-Funktionalität in Squarespace jedes deiner Projekte, aber es ist hier verschachtelt, quasi eine eigene Seite, die du komplett anpassen kannst. Wenn Sie jedoch zu dieser Portfolio-Seite zurückkehren, sehen Sie eine Miniaturansicht und eine Überschrift, die für jeden von ihnen stehen. Sie können die Reihenfolge per Drag & Drop ändern. Sie können sich also für Fotografen oder Designer vorstellen, wenn Sie Ihre verschiedenen Projekte präsentieren möchten. Dies ist eine wirklich nette Funktion, anstatt manuell zu versuchen, für jede von ihnen verschiedene Seiten zu erstellen und zu verlinken. Also, eine Brauerei braucht bestimmt kein Portfolio. Also werde ich diesen Seitentyp löschen. Ich klicke erneut auf Plus. Ereignisse. Auch das würde den Rahmen dieser Klasse etwas sprengen, aber das ist eine sehr nützliche Funktion. Sie haben dort also einige Optionen für die Planung von Veranstaltungen. Wenn du eine Website für eine Band erstellst, z.B. Tourdaten angeben möchtest. Es gibt leise, nette Funktionen, mit denen Sie das und Videos tun können. Dies ist eine neue, mit der Sie tatsächlich On-Demand-Inhalte verkaufen können . Also wenn du einige Tutorial-Videos verstecken möchtest, z.B. hinter einer Paywall. können Sie hier tun. Aber zwei spezielle Seitentypen für die ich häufiger verwendet habe, RV-Ordner und die Link-Option. Wenn ich also zunächst einen Ordner hinzufüge, das buchstäblich nur hilft dir das buchstäblich nur dabei, deine Seitennavigation zu organisieren. Im Moment ist es ärgerlich, dass Sie in Squarespace keine Seite in eine andere verschachteln können , ohne einen Ordner zu verwenden. Also was ich damit meine, wenn ich dem einen Titel gebe, eine Galerie, kann ich die About-Seite ziehen. Es steht also unter der Galerie. Und wenn ich die Navigation oben verwende, siehst du, wenn ich den Mauszeiger über die Galerie bewege, dass jetzt eine Seite angezeigt wird, die sich darin befindet. Ich könnte mir auch diese kleine Demo-Seite hier schnappen und hineinlegen. Jetzt haben wir in unserer Galerie-Sektion zwei Seiten. Aber ich könnte nicht platzieren, wenn ich die Booker-Klasse entferne. Ich konnte die Booker-Klasse nicht als Seite platzieren , die unter etwa liegt, das ist ziemlich irritierend. Ich hoffe, dass wir es in Zukunft aktualisieren. Sobald Sie Seiten verschachteln möchten, müssen Sie diese Ordnerfunktion verwenden. Das ist es, was die gefaltete Funktion hat: Sie können Ihre Seiten so organisieren, Sie können Ihre Seiten so organisieren dass sie innerhalb eines Abschnitts angeordnet sind. Und schließlich haben Sie eine Link-Option. Dies ist also nützlich für etwas, auf das wir gegen Ende des Unterrichts als fortgeschritteneres Feature kommen auf das wir gegen Ende des Unterrichts als fortgeschritteneres Feature werden. Ankerlinks. Der Link, auf den Sie klicken würden, und er würde Ihnen eine bestimmte Stelle auf der Seite wünschen . Dafür ist es sehr nützlich. Oder du könntest einen Link zu etwas außerhalb deiner Squarespace-Website erstellen . Es könnte also auf eine externe verweisen. Ich bin eine Kalender-App, die du benutzt. Es könnte ein Link zu, ich weiß nicht, warum Sie sie in Ihrer Hauptnavigation platzieren würden Ihrer Hauptnavigation ein Link zu einem Ihrer Social-Media-Kanäle sein. Obwohl ich denke, dass es einen besseren Weg gibt, das zu tun. Das ist also für die Link-Option. Und sobald Sie auf den Link klicken, geben Sie ihm buchstäblich einen Titel, der in der Navigation angezeigt wird. Und wenn Sie den Standort dieses Links eingeben. Jetzt können Sie dies verwenden , um intern zu verlinken. Wenn Sie dazu einfach mit einem Schrägstrich beginnen und unter den Seiten, aus denen Ihre Websites bisher bestehen, werden sie in der Liste angezeigt. Es ist also ganz einfach, eine davon auszuwählen , wenn Sie möchten, oder Sie können eine vollständige externe URL eingeben. Bevor wir diese Lektion beenden und über URLs sprechen, wie ermitteln Sie die URL für Ihre Seiten? Auch das ist nicht das intuitivste. Sie könnten denken, dass es einfach den Seitennamen verwendet. Das tut es nicht. Dafür gibt es eine separate Einstellung. Wenn Sie also auf das kleine Zahnradsymbol für eine Ihrer Seiten klicken , werden die Seiteneinstellungen angezeigt. Und einige der ersten Optionen sind ein Seitentitel. Und das wird oben im Browserfenster erscheinen . Titel der Navigation. Das wird in der V-Site-Navigation erscheinen. Und schließlich die URL. Dort können Sie das anpassen. Du könntest das also z.B. auf Über uns ändern, wird per URL aktualisiert. Wenn ich also „Über uns“ einfüge und die Eingabetaste drücke, wirst du sehen, dass wir auf diese spezielle Seite weitergeleitet würden. Das ist also ziemlich nützlich. Sehr oft möchten Sie eine bestimmte URL eingeben, vielleicht für Marketingzwecke oder aufgrund von Kundenanfragen, wenn Sie externe Links zu bestimmten Seiten erstellen möchten . Das deckt also Seiten, die Seitentypen und die Navigation ab. Als Nächstes werden wir uns wirklich mit der Anpassung des Inhalts befassen . Aber wir haben es auf der Website. Wir sind also ziemlich zufrieden mit dem Stil. Es gibt noch einige Verbesserungen und Änderungen wir später daran vornehmen könnten. Aber in der nächsten Lektion beginnen wir mit der Anpassung dieser Inhalte. 7. Lets create – Bausteine: In dieser Lektion kommen wir zur Arbeit mit Blöcken, die Squarespace verwendet, um all unsere Inhalte zu erstellen. Und im Wesentlichen beginnen wir jetzt mit der Anpassung unserer Inhalte. Meine Brauerei hat also viele Bilder von einem Yogastudio. Sobald wir sie ausgetauscht haben, wird es wirklich Gestalt annehmen. Mit Blöcken arbeiten. Wenn wir in den Bearbeitungsmodus wechseln, arbeite ich zunächst von der Homepage aus. Und wenn du den Mauszeiger bewegst und scrollst, siehst du einen kleinen blauen Umriss um verschiedene Teile deines Inhalts. Und Vs werden als Blöcke bezeichnet. Sie haben also die volle Kontrolle , um diese zu verschieben oder zu bearbeiten. Um den Inhalt selbst zu bearbeiten. In einem Textblock klickst du einfach, doppelklickst und tippst, was hier steht. Das könnte also heißen: Willkommen bei Fluorine. Und das ist nur eine Demonstration. Ich werde also nicht über Inhalte austauschen, sondern nur um dir eine allgemeine Vorstellung davon zu geben , wie ich mich so fühlen würde, habe ich das zusammengestellt, wenn es eine Website für den Climb sein würde . Nun, die Größe und die Positionierung, die Sie im Moment sehen können, ich habe diesen Text in meiner Überschrift, eine Größe und all diese Art von Desktop-Ansicht, in der es von der Größe einer Person abhängen wird Bildschirm. Ich denke, ich würde gerne ein bisschen weiter rübergehen können . Hier kommt also diese Grid-Funktion ins Spiel , die Squarespace jetzt implementiert hat. Es gab eine Zeit, in der das viel komplizierter war. Wenn ich also den Mauszeiger bewege und einfach auf den Rand dieses Blocks ziehe, wirst du sehen, dass Squarespace diesen an einem Raster ausrichtet , das unsichtbar ist. Sobald du loslässt, klickst du auf diesen Artikel. Es gibt also ein kleines unsichtbares Raster bei der Arbeit und beim Ziehen, um die Größe ändern oder etwas zu greifen und tatsächlich seine physische Position zu verschieben. Sie können sehen, dass dort eine kleine gelbe Richtlinie erscheint, die mir sagt , dass das zentriert wäre. Tatsächlich denke ich, dass ich diesen Text schicken werde. Also gehe ich zu Control a, um den gesamten Inhalt auszuwählen und dieses Tool zur Absatzausrichtung zu verwenden. Das ist ziemlich intuitiv. Ich bin mir sicher, dass Sie hier mit den Symbolen und Funktionen vertraut sind. Klasse. werde ich nicht brauchen, aber ich werde mich einfach weiterhin in unserer Brauerei willkommen heißen. Also, als ich dort einen Teil des Inhalts gelöscht habe, wodurch ein Block der Größe, die wir hatten, nicht mehr benötigt wird. Sie sehen, dass es automatisch geschlossen wird. Wenn ich wollte, könnte ich es ziehen ich könnte es vergrößern, indem ich es nach unten ziehe. Und auf dieser Seite wird das Tierarztnetz tatsächlich nach unten ausgerichtet. Bevor wir also weitere Änderungen vornehmen, lassen Sie uns einfach über Wave sprechen. Das Tool funktioniert und die Optionen, die Sie haben, um mit einem Raster zu spielen. Während ich mit der Maus über diesen Abschnitt fahre. Wenn ich oben rechts auf Abschnitt bearbeiten klicke , wird das Raster angezeigt. Und Sie können sehen, dass es eine Zeilenanzahl für das Raster eines Moments gibt. Es hat vier Zellen, was für den Inhalt, den wir gerade haben, ausreichend ist. Ich kann das manuell erhöhen oder verringern. Sie können das Minimum nicht unterschreiten, das Sie benötigen , um den Inhalt, den Sie derzeit haben, anzupassen. Und wenn ich auf Alignment herunterschaue, kannst du es für einen Moment sehen. Dieses Raster wird ganz nach unten ausgerichtet. Ich könnte es zentriert auf diesem Abschnitt ausrichten, oder ich könnte es nach oben ausrichten. So wirklich intuitiv, einfach zu bedienen. Lass es uns wieder nach unten verschieben. Und dann hast du auch hier Optionen für Höhen. Dies ist die Höhe des Abschnitts. hat nichts mit einem Netz zu tun. Also in diesem Abschnitt, wenn ich die Höhe auf klein ändere, haben wir nur den kleinsten kleinen Splitter. Um unser Bild im Hintergrund zu zeigen, ist ausreichend Platz für den Inhalt vorhanden. Aber wenn ich mich für eine große Option entscheide, zielt das auf Vollbild ab, sodass oben eine kleine Navbar-Header möglich ist. Wenn Sie eine bestimmte Höhe eingeben möchten, wenn Sie auf die drei Punkte klicken, können Sie dann einen Wert eingeben. Es wird immer Platz für Ihr Netz bieten. Aber ein Wert, der, ich denke, das ist ein Prozentsatz. Also 100 Prozent viel Platz, wie Sie mit dem Header unterbringen können . Und dann 15%, 1%. Alles, was es tut, ist Platz für unser Raster und die kleine Polsterung zu lassen , die Sie unter diesen Abstandseinstellungen ändern können , die wir uns zuvor in den Seitenstilen angesehen haben. Also werde ich das einfach wieder in die große Regel aufnehmen. Was ich an ganzseitigen Impact mag , wenn jemand darauf landet. Aber es gibt Ihnen eine kleine Vorstellung von den Optionen, die Sie haben, um mit diesem Raster zu arbeiten, was für die Gestaltung Ihrer Inhalte sehr nützlich ist. Jetzt können Sie auch den V-Abstand ändern , der zwischen den Zellen im Gitter vorhanden ist. Sie können also auf die erste Option klicken , wenn Sie überhaupt keine Lücke haben möchten. Und das könnte nützlich sein, wenn Sie versuchen, Bilder im Raster zu kacheln. Aber ich gehe zurück zur Standardeinstellung. Wenn ich nun auf Hintergrund klicke, denke daran, dass dies der Hintergrund für nur diesen Abschnitt hier ist. Hier können wir unser Hintergrundbild konfigurieren. Und darauf befindet sich auch ein Overlay, das den Text etwas lesbarer macht. Wenn also ein Boden hier die Opazität überlagert, wenn ich diesen Schieberegler nach oben bewege , hast du eine bessere Vorstellung davon, was das macht. Es ist also so, als würde es einen einfarbigen Film über das Bild legen . Und dann steuert die Opazität die Kapazität des Brunnens Wie viel ist durchsichtig? Das ist also eine ziemlich nützliche Einstellung. Die Farbe, die es verwendet, hängt mit den Rasterfarben auf der Registerkarte Farbe zusammen. Bevor wir also unser Hintergrundbild ändern, klicken wir einfach auf den Tab Farbe. Und du kannst es im Moment sehen. Es verwendet diese dunkelste Option aus unserer Farbpalette. Wenn ich nun eine der helleren Optionen wählen würde, die wir Overlay verwenden würden, würde ich Weiß verwenden. In diesem Fall. Wenn ich eine der Mitteloptionen wählen würde, wenn du etwas Lebendiges in deinem Theme hättest, wie ein leuchtendes Orange, nun, es würde dieses leuchtende Orange überlagern und so weiter. Hoffentlich hast du die Idee. Also werde ich das wieder verwenden, lass uns die dunkelste, dunkelste, dunkelste verwenden. Du kannst hier den Unterschied zwischen Darkest, 1.2 sehen. Es macht die Überschriften zu dieser Akzentfarbe. Wenn ich Option zwei verwende. Und wenn es sich auch über einem Bild befindet, ist es nicht ganz, nicht ganz klar genug, nicht ganz lesbar. Also werde ich Dark is One verwenden. Und stellen Sie einfach sicher , dass der Text in dieser Situation schön und klar ist . Lassen Sie uns also den Hintergrund ändern. Ich habe meinen Text bearbeitet, aber lass uns auf den Tab Hintergrund klicken. Sie können auf Ersetzen klicken oder auf den Mülleimer und dann ein Bild per Drag & Drop an die gewünschte Stelle ziehen. Also habe ich etwas im Sinn. Ich habe es von einer lizenzfreien Aktien-Website ausgewählt. Selbst wenn du lizenzfreie Aktien verwendest, möchten sie manchmal, dass du ihm eine gewisse Zuordnung gibst. Es lohnt sich also immer zu überprüfen ob Sie für Kunden arbeiten. Stellen Sie einfach sicher , dass Sie Aktien verwenden , die Sie nicht hinzufügen müssen, vielleicht eine kleine Gutschrift oder eine Notiz irgendwo auf der Seite. Squarespace hat tatsächlich eine eigene Stock-Bibliothek, die du nicht auf der Seite angeben musst. Und du greifst darauf zu. Wenn ich zum Hintergrund des Abschnitts „Bearbeiten“ zurückkehre und ihn nur vorübergehend lösche. Klicken Sie, fügen Sie ein Bild hinzu. Und anstatt Drag & Drop zu ziehen, wenn Sie auf diese Plus-Schaltfläche klicken, um ein Bild hinzuzufügen, haben Sie einige Optionen. Sie können eine Datei lokal hochladen. Sie können aus Ihrer Bibliothek wählen. Das sind also alle Bilder, die du bereits auf dieser Squarespace-Website verwendet hast . Da würdest du das also finden. Und schließlich, Stöbern Sie in Stockbildern. Und unter dem kostenlosen Bild-Tab, von Unsplash betrieben wird, finden Sie eine ziemlich große Auswahl an Bildern, die Sie frei verwenden können. Nun, diese werden nicht die einzigartigsten sein. Lass es uns mit Brewery versuchen. Dies werden nicht die einzigartigsten Optionen sein. Klettere, aber es wird sie retten, wenn sie kein Budget für Fotografie oder Bilder haben . Also ein paar anständige Optionen hier. Einige ihrer Fotografien haben einen ziemlich hohen Standard. Wirklich nette Geste dafür ist jetzt in Squarespace integriert. Sie können die Ergebnisse also dort sehen. Das wäre vielleicht ein guter Ansatz, wenn ich möchte, dass seine Marke als moderne Großbrauerei rüberkommt. Ich denke, ich entscheide mich für einen immer klassischeren Ansatz. Ein bisschen mehr. Was ist das Wort Boutique? Boutique-Brauerei? Wenn ich also erneut auf das Plus klicke und dieses Mal aus der Bibliothek auswähle, sollten wir das SVG-Bild sehen, das ich zuvor hochgeladen hatte, und ich tausche es wieder ein. Beim Platzieren von Bildern haben Sie einige Positionierungsoptionen. Obendrein ein Spaß. Jetzt gibt es einen kleinen Brennpunktkreis. Und du kannst klicken und ziehen. Und das wird sich für Focus Point ändern. Nun, weil dieses Bild den Bildschirm für einen Moment gut füllt . Aber es scheint nichts zu tun. Aber wenn ich meine Änderungen speichere und wenn ich klicke und einfach ziehe, um die Größe des Bildschirms zu ändern, wirst du sehen, dass der Zuschnitt auf dem Teil zentriert wird. Ähm, aber ich habe die Verwendung dieses Tools hervorgehoben. Also ziemlich nützlich. Und es lohnt sich, den Schwerpunkt zu überprüfen, falls Ihr Hintergrund abgeschnitten werden sollte. Das sieht also schon viel mehr zum Thema aus. Während ich durchscrolle, suche ich nur nach anderen Abschnitten. Manchmal suche ich bei meinem ersten Durchlauf einfach nach ein paar einfachen Gewinnen , um meine Inhalte zu veröffentlichen und Dinge zu gestalten. Entwerfen auf Squarespace unterscheidet sich also stark dem Prozess, den du auf einer Plattform wie WordPress verwenden würdest, bei dem du eigentlich alles theoretisch zuerst simulieren würdest, du kannst das für Squarespace tun, dann aus einem Modell neu erstellen. Aber ich denke, die meisten von uns werden einfach frei gestalten, weil es so einfach ist, Elemente, die Sie live entwerfen, von unterwegs aus ins Spiel zu bringen . Also suche ich nach einem Abschnitt, den ich benutzen kann. Ich habe meine Homepage. Das ist die Art von Landeplatz. Ein Besucher könnte sich ihre Navigation ansehen, aber sie könnten nach unten scrollen. Und wenn ich der Meinung bin, dass der nächste Abschnitt, den ich hinzufügen möchte , nur etwas über die Brauerei sein würde . Wenn wir also eine eigenständige About-Seite haben , was ich im Moment vielleicht nur ein kurzer Auszug über Februar war nur ein kurzer Auszug über und dann eine Schaltfläche, auf die jemand klicken kann, um mehr zu erfahren. Ich muss einen Abschnitt hinzufügen. Ich möchte diese nicht mit dieser Vorlage für kommende Klassen verwenden . Also gehe ich in den Bearbeitungsmodus. Und Sie können sehen, wenn ich mit der Maus zwischen den beiden Abschnitten gehe, dass es hier eine Schaltfläche für den Anzeigenbereich gibt. Wenn ich darauf klicke, gibt es eine ganze Reihe von Optionen, die wir verwenden können. Und dies sind wiederum Ausgangspunkte, die uns helfen sollen, unsere Inhalte einzubringen. Wenn ich also auf die Überschrift Über uns klicke, um einige Optionen zu sehen , die Squarespace-Designer für einen About-Bereich für angemessen halten. Und Sie können auf Personen, Produkte, Dienstleistungen und viele verschiedene Optionen klicken . Sie müssen keine About-Vorlage für den Abschnitt Über uns verwenden . Möglicherweise finden Sie in den Beispielzitaten etwas , das Ihrer Meinung nach in diesem Abschnitt besser funktioniert , sodass Sie sie mischen und anpassen können. Aber im Allgemeinen ist es ziemlich gut. Einige der Vorschläge funktionieren wirklich gut. Für unseren Abschnitt über die Brauerei. Du kannst sehen, dass du am Ende dieser About-Kategorie einige häufig gestellte Fragen findest. Ich denke etwas, das ein bisschen Text mit etwas mehr Bildern kombiniert. Das sieht also interessant aus. Und dann könnte ich meinen Inhalt eintauschen. Also werde ich Ihnen eine zusätzliche Option zeigen. Ich klicke auf Abschnitt hinzufügen und füge stattdessen einen leeren Abschnitt hinzu. Sie können Blöcke hinzufügen und von Grund auf neu erstellen. Wenn du dich dafür entscheidest, wenn du auf die Schaltfläche Block hinzufügen klickst , erstelle eine Liste all der verschiedenen Blockelemente in Squarespace gibt. Am häufigsten werden Sie Texte und Schaltflächen in Bildern verwenden . Ich bin mir sicher, es ist kein Zufall, Vose, oder direkt nach oben. Es gibt noch andere kleine Elemente wie Linien, die Sie verwenden könnten , um das Layout zu unterteilen. Sie können Galerien hinzufügen, und es gab einige ziemlich erweiterte Galerie-Steuerelemente. Unter Galerien können Sie auch eine Diashow erstellen. So viele Optionen zum Spielen. Lass uns Text wählen. Sobald Sie mit dem Ziehen beginnen, wird erneut ein Raster angezeigt. Weil ich mit einem leeren Abschnitt angefangen habe. Dies beinhaltet Standardeinstellungen. Wenn ich auf Hinzufügen, Abschnitt bearbeiten klicke, ändere die Farben in eines der dunklen Designs. Ich könnte ein Hintergrundbild verwenden, wenn ich möchte. Ich könnte die Anzahl der Zeilen bearbeiten, ich denke, das ist nicht nötig, bis Sie Ihren Inhalt positioniert haben. Also könnte ich eine About-Überschrift erstellen. Mach Fett groß. Ich könnte den Text vielleicht zusammen mit Fett erstellen, aber es gibt viele verschiedene Dinge, die ich tun könnte, aber das würde ich verwenden, wenn du besser darin bist, von Grund auf neu zu denken, wenn du lieber mit eine leere Seite. Ich persönlich habe bei Squarespace festgestellt, dass es von Vorteil ist , von einem Ausgangspunkt aus zu arbeiten und es dann von dort aus zu optimieren. Ich werde das vorerst entfernen. Ich ändere das Farbschema auf dieses, das mir sehr gut gefällt. Doppelklicken Sie, um unsere Überschrift in „Über“ zu ändern. Beachten Sie, dass ich das getan habe, weil ich den gesamten Text entfernt Ich kann einfach auf Rückgängig klicken. Da ich alle Texte vor dem Tippen ausgewählt habe, ändere dies tatsächlich von H1 auf Absatz zwei. Das ist also eine nervige Kleinigkeit, die passieren kann. Sie könnten entweder einfach nach dem ersten Buchstaben mit der Eingabe beginnen. Ich werde den ersten Buchstaben entfernen. Oder du könntest es manuell ändern, aber am Ende, wenn du damit fertig bist. Und dann hier auf der rechten Seite. Und dieses Mal ist dies kein Hintergrundbild für diesen Abschnitt. Das heißt, wir können klicken und ziehen. Sie sehen, dass dieses Bild tatsächlich im Netz lebt. Und ebenso verwendet unser Text, der nicht unbedingt die H1-Größe hat, tatsächlich eine Funktion, die sicherstellt, dass dieser Text dieses Feld ausfüllt. Es wird so groß werden, wie es braucht, um die Box zu füllen. Und diese Option, wenn ich einen Teil des Textes auswähle, findest du hier in der Werkzeugleiste Skalentext. Wenn ich also Skalentext deaktiviere , wird dieser jetzt wieder auf die H1-Größe zurückgesetzt und es wird nicht darüber hinausgegangen. Das wird tatsächlich meine bevorzugte Option sein. Ich denke, es wird mir eine konsistentere Größe ermöglichen , wenn jemand durch die Website scrollt. Mir macht diese Trennlinie nichts aus. Vielleicht möchte ich es einfach etwas höher ansprechen. Und dann vergrößere die Größe meines Textes. Absatz eins. Schließen Sie diesen Bereich, damit Sie sehen können, dass es wirklich einfach ist, vor allem, wenn Sie sich damit vertraut machen, Dinge einfach per Drag & Drop zu ziehen und zu optimieren. Und einfach entwerfen. Machen Sie sich keine Sorgen um das Programmieren, sich keine Gedanken über irgendetwas, das mit Webentwicklung zu tun hat. Ich genieße es einfach, die Plattform zum Entwerfen zu nutzen, weshalb viele von uns sie lieben. Also wähle ich aus den hier verfügbaren Stockbildern aus. Schauen wir uns die Brauerei an. Schon wieder. Es gibt einen ziemlich netten. Mit diesen Fässern. Sobald das an Ort und Stelle ist. Und Squarespace skaliert automatisch die Größe erstellt Kopien, die je nach Gerät, das jemand verwendet, bereitgestellt werden . All das passiert also im Hintergrund, Sie können sich einfach auf das Frontend konzentrieren. Obwohl es standardmäßig den Feld-Tab verwendete, füllte er sich nicht wirklich. Es wurde so eingestellt, dass es passt, also klickt es zwischen ihnen, macht es manchmal rückgängig. Und das füllt jetzt unseren Raum. Ich freue mich sehr, dass Focal Point im Mittelpunkt steht. Ich klicke auf Speichern, um meine Arbeit zu speichern, während ich fortfahre. Und das sieht wirklich gut aus. Vielleicht verwenden wir Fässer ein bisschen zu viel. Aber das ist die Art von Look and Feel, die ich zunächst vermitteln möchte . Nun, ein Feature, von dem ich gesagt habe, dass ich es hinzufügen würde, habe ich noch nicht getan. Ich werde den Bearbeitungsmodus wieder öffnen, war eine Schaltfläche, um mehr über das Unternehmen zu erfahren. Das wäre also nur ein kurzer Auszug aus Fetten. Lassen Sie uns ein bisschen davon entfernen. Ich verwende das vorerst nur als Platzhaltertext. Und ich klicke, um einen Block hinzuzufügen. Wir verwenden den V-Tastenblock. Ziehen Sie das nach unten, so wie es positioniert werden soll. Und hier können wir zwischen unserem primären, sekundären oder tertiären Tastentyp wählen . Also tertiär, im Allgemeinen kleiner, sekundär etwas größer. Und primär ist in der Regel noch größer. Dies hängt jedoch von den Einstellungen ab, die Sie in den Seitenstilen verwendet haben , die wir zuvor durchgesehen haben. Trotz dieser unterschiedlichen Einstellungen können Sie die Schaltfläche immer noch per Drag & Drop ziehen, sodass sie in der Rastergröße vorhanden ist, mit der Sie zufrieden sind. Sie könnten also einen riesigen Knopf haben , der sich über die gesamte Breite erstreckt. Oder du kannst es etwas kleiner anordnen. liegt es ganz bei Ihnen Moment liegt es ganz bei Ihnen, was die Farben angeht, und ich scrolle einfach nach oben. Sie haben also einen klaren Überblick darüber. Entschuldigung, ich vergesse manchmal, dass mein Bild, mein Vorschaubild ist für einen Moment auf dem Bildschirm, auf einer Farbe zeichnet, die wir für diesen Abschnitt verwendet haben. Wenn ich auf Abschnitt bearbeiten und dann auf Farben klicke, wirst du sehen, dass sich die Farbe unserer Schaltfläche tatsächlich ändert, wenn ich zwischen diesen hin- und herschalten würde. Also möchte ich den Rest dieses Abschnitts so lassen, wie er war, was diese dunkle Option war. Aber ich möchte eigentlich, dass der Button anders wäre. Hier können wir also die Feinabstimmungen vornehmen, die ich erwähnt habe. Und bei Dunkelheit auch, wenn ich auf die Schaltfläche Bearbeiten klicke, dann geht es weiter. Ich bin der Stil der Seite in der Seitenleiste. Und es versucht, uns verschiedene Farben zu geben , die derzeit auf dieser Seite vorhanden sind . Um uns etwas Zeit beim Scrollen durch all diese Optionen zu sparen , wenn ich den Mauszeiger bewege und auswähle, wird eine kleine blaue Auswahl um diese herum angezeigt, oder sie kann um verschiedene Blöcke auf der Seite herum erscheinen. Wenn ich auf die Schaltfläche klicke, die ihn auswählt, wir automatisch zu den irrelevanten Optionen in unserer Seitenleiste weitergeleitet. Wir haben hier also eine Option für den schwarzen Hintergrund der primären Schaltfläche. Wenn wir das Dunkle zur Palette verwenden. Ich weiß es zu schätzen, dass dies zunächst wahrscheinlich ein bisschen zu verstehen ist und sich vielleicht unnötig fummelig anfühlt. Aber damit können Sie diese Seite wirklich verfeinern und anpassen. Sie werden nicht immer die vorhandenen Standardeinstellungen verwenden wollen . Es ist also wirklich nützlich, hier etwas tiefer graben und einige benutzerdefinierte Farben auswählen zu können . Ich möchte den Hintergrund ändern. Eine der Farben in unserer Palette, aber ich möchte einen weißen Hintergrund verwenden. Es ist also wirklich prominent. Und dann für den Text, weil der jetzt unsichtbar ist, verwende ich wieder eine Farbe aus der Palette und ich verwende diese Farbe in Off-Schwarz. Speichern Sie meine Änderungen. Was mir jetzt aufgefallen ist , das entweder rückgängig gemacht wurde oder vielleicht nicht gespeichert habe , ist das Styling für die Schaltfläche. Ich wollte, dass das alles in Großbuchstaben ist. Und hier wird es in Kleinbuchstaben angezeigt. Um das schnell und einfach zu ändern, wenn ich zu Design Site Styles, Buttons gehe, wollte ich, dass dies die Zukunft ist. Ich wollte, dass es in Großbuchstaben geschrieben wird. Ich habe ihm ziemlich viel Buchstabenabstand gegeben. Ich denke, das Gewicht muss nur ein bisschen höher sein, damit es lesbar ist , wenn es von weißem Licht umgekehrt und anstatt in primäres, sekundäres und tertiäres Licht überzugehen , wenn ich das auf alle anwenden möchte Diese Schaltflächentypen, ich kann hier auf die Schaltfläche klicken, gelten für alle Schaltflächentypen. Und das wird zum Stil aller passen. Jetzt werde ich sicherstellen, dass ich für Änderungen speichere und die Seite aktualisiert wird. Und das ist erledigt, das ist jetzt an Ort und Stelle. Arbeiten Sie sich also durch die Website und werfen Sie Abschnitte weg, wenn Sie sie nicht benötigen. Hier ist ein Abschnitt. Ich denke, ich werde tatsächlich bevorstehende Kurse löschen , um einen Abschnitt zu löschen. Wenn Sie einfach auf das Mülleimersymbol oben rechts klicken , um es zu entfernen. Und nur ein paar Tipps, einige Abschnittstypen, die ich sehr effektiv finde. Weg. Sie haben ein Bild im Hintergrund mit etwas Text darüber. Dies ist eigentlich ein Newsletter-Anmeldeformular, aber wenn ich das entferne und einen Block platziere, und das ist eine ziemlich effektive Methode das Tempo einer Website zu ändern , wenn jemand durch sie scrollt, Anstatt dass es viele Texte oder viele harte, vollfarbige Bilder sind, kann es ganz nett sein , Abschnitte zu unterteilen, indem Sie vielleicht einen Slogan in das Bild einfügen, der so leise im Hintergrund ist. Für unsere Brauerei könnte ich sagen, glaubwürdiger, erfrischender Geschmack. Das wird keine Preise gewinnen, aber nur um zu demonstrieren, dass Verzichtserklärungen funktionieren könnten. Wenn ich wollte, könnte ich diese Skalierungsoption verwenden , um diesen Text zu erstellen. Füllen Sie immer das Feld auf der Seite aus. Aber damit bin ich ziemlich zufrieden. Wenn ich dann auf Abschnittsfarben bearbeiten klicke, verwende ich gerne die dunkelste Farbe, aber auf der Registerkarte Hintergrund werde ich die Deckkraft der Überlagerung erhöhen. Etwas weniger vom Bild ist durchsichtig. Und es macht Texte ein bisschen einfacher auszusprechen. Natürlich werde ich das Bild von diesem Yogastudio ändern . Suche nach Bibliothek, Stockbibliothek für Bier. Und etwas, das erfrischend aussieht. Csv, dunkle, launische Ästhetik. Vielleicht der kleine Hopfen auf dem Tisch. Ganz so. Es hat eine ziemlich erfrischende Atmosphäre. Mal sehen, wie das aussieht. Das sieht wirklich gut aus. Und dann gehen wir zum Format über. Und ich denke nicht, dass dieser Abschnitt so hoch sein muss. Auf der Höhe. Im Moment wird versucht, 80% des verfügbaren Speicherplatzes auf der Seite zu beanspruchen . Also lass uns das haben. Lass es uns geben. Tatsächlich verlieren wir dann zu viel Hopfen. Hier, lassen Sie uns den Unterschied aufteilen. 60 Prozent, das ist ganz nett. Ein Abschnitt wie dieser ist für mich, wie gesagt, wirklich nützlich , um das Tempo irgendwie zu unterbrechen. ich also durch die Seite scrolle und das Gefühl habe, Wenn ich also durch die Seite scrolle und das Gefühl habe, dass von der einen oder anderen Sache zu viel ist, füge ich gerne so etwas dazwischen, nur um die Dinge zu verlangsamen. Um es aufzuteilen und die Reihenfolge der Abschnitte zu bearbeiten , können Sie es nicht ziehen und ablegen. Wenn Sie jedoch den Mauszeiger über einen Abschnitt bewegen, können Sie diesen Abschnitt mit den Pfeilen in der Seitenreihenfolge nach oben oder unten verschieben. Ich klicke, um nach oben zu kommen. Und so einfach das ist, es wird mit dem V-Abschnitt getauscht, war aber darüber. Ich kann es wieder nach oben verschieben, wenn ich will. Eine Website würde so funktionieren, aber ich werde das verwenden. Setz dich in unseren About-Bereich. Und dann könnte ich mir einen Text einfallen lassen, um hier ein paar weitere Informationen zu geben, vielleicht über Kontakte in einer Brauerei überhaupt. Viele Optionen. Also möchte ich dich nicht langweilen. Die Idee war nicht, Sie durch alle möglichen Optionen zu führen, sondern die gängigsten, die Sie verwenden würden, und Ihnen hoffentlich einige der Tools und Prinzipien beizubringen , die Sie verwenden können. Ihnen dann frei, mit dem Erstellen Ihrer eigenen Seiten zu beginnen. Denken Sie also daran, wenn Sie auf Abschnitt hinzufügen klicken, haben Sie Zugriff auf eine große Bibliothek mit vordefinierten Abschnitten, um Ihnen den Einstieg zu erleichtern und sogar Ihre Inhalte in all diesen Abschnitten auszutauschen Sie bestehen aus verschiedene Blöcke. Einige spezielle Abschnitte. Sie haben vorkonfigurierte Inhalte. Und ich zeige dir, was das bedeutet. Auch dies ist etwas, das Squarespace schrittweise erweitert hat. fällt also nicht alles unter einen Schirm. Wenn wir jedoch auf Bilder klicken und einen dieser Bildbereiche auswählen, wird hier nur ein sehr kleines Augensymbol angezeigt. Und der Tooltip sagt V-Abschnitte. Damit können Sie schnell Inhaltselemente hinzufügen und zwischen Layouts wechseln , ohne sie manuell neu anordnen zu müssen . Das ist der Grund für diese Unterscheidung. Und das gilt für ziemlich viele dieser Bildvorlagen. Also zeige ich dir den Unterschied. Zunächst fügen wir einen hinzu, der diesen austauschbaren Inhaltsstil verwendet. ich also mit der Maus auf der Seite bewege, diese Bilder keine Blöcke. Sie werden über diesen Bearbeitungsbutton hier, Galerie bearbeiten, gesteuert . Und dieses Galerie-Konfigurationstool befindet sich hier. Sie können V-Bilder neu anordnen, aber Sie können sie nicht für das Raster bearbeiten. Ein kleiner Vorteil davon ist, wenn ich auf Galerie bearbeiten klicke, aber Abschnitt bearbeiten ist, kannst du zwischen den verfügbaren Galerie-Typen wechseln. Einen Moment haben wir einfach. Ich könnte zu Mauerwerk wechseln. Und dann haben Sie diese Tools, um die Anzahl der Spalten für den Abstand anzupassen. Ich werde Sie nicht langweilen, indem einige verfügbare Optionen durchgehe. Aber ich bin mir sicher, Sie verstehen die allgemeine Vorstellung. Das ist also ein weiteres Beispiel für spezielle Seitentypen, die ich erwähnt habe , und es macht es einfach, ein paar verschiedene Optionen auszuprobieren . Du hast Diashows, echte Bilder, viele Dinge, mit denen du spielen und experimentieren kannst. Aber ich werde diesen Abschnittstyp vorerst löschen. Und ich zeige dir die Alternative. Wir gehen wieder zu Bildern und wählen eines davon aus, haben aber nicht das kleine Ich-Symbol, kleine Information. Also eine dieser regulären Bildseiten. Wenn ich also diese Vorlage ausgewählt habe, können Sie dieses Mal sehen , wenn ich mit der Maus über die Bilder fahre, eine blaue Auswahl um sie herum erscheint. Und ich kann sie per Drag & Drop im Raster ablegen. Aber das bedeutet, dass ich nicht zum Bearbeitungsbereich gehen und die Voreinstellungen nahtlos ändern kann . Dies ist ein 100-prozentiges benutzerdefiniertes Layout. Ich hoffe, das gibt dir einen guten Überblick über die Grundlagen. Sicherlich genug Tools, um mit dem Anpassen und Erstellen einiger Layouts zu beginnen , aber sehen wirklich effektiv aus, wenn Sie Ihre relevanten Inhalte in sie austauschen. Machen Sie also ein Spielexperiment und sehen Sie, welche Optionen es gibt. Es ist ganz einfach, etwas auszuprobieren, es dann aber zu verschrotten oder gegen etwas anderes zu ändern. Verbringen Sie also einige Zeit damit, wenn Sie sich nett und glücklich fühlen und damit vertraut sind. Begleiten Sie mich in der nächsten Lektion, in der wir uns einige zusätzliche Funktionen ansehen , die Squarespace zu bieten hat. 8. Erstelle eine Auswahl – -: In dieser Lektion werden wir einige Funktionen behandeln, die ziemlich wichtig sind und die wir noch nicht auf unserer Website implementiert haben. Und ich scrolle einfach durch, damit Sie ein Gefühl dafür bekommen wie meine Demo-Seite aussieht. Also habe ich verschiedene Abschnitte genommen und einige Inhalte in sie geworfen. Wir haben jetzt unsere Bilder ausgetauscht. Die Fußzeile, auf die wir weiter eingehen werden. Hier ist es. Die Fußzeile Das ist definitiv eine wichtige Funktion, die wir in dieser Lektion anpassen werden. Ich habe hier unten einen kleinen Kontext-Abschnitt hinzugefügt. Wir werden einen Ankerlink erstellen , der uns dazu führt. Die Abstimmung wird also unten auf der Homepage angezeigt, sodass sie in unserem Menü oben angezeigt wird. Also werde ich dir zeigen, wie das geht. Ich habe unsere Schaltfläche geändert, um überhaupt zu buchen, aber wir werden hier oben Links zu sozialen Netzwerken hinzufügen. Und ich habe einige Inhalte hinzugefügt, ich habe nur zwei Unterseiten für diese Beispielseite. So einfach Die About-Seite, aber ziemlich effektiv. Und noch einmal, Visa passt nur die Elemente an , die Squarespace uns in den Vorlagen und einer Seite zum Brauprozess zur Verfügung stellt. Das gibt Ihnen nur eine kleine Vorstellung davon, was getan werden kann. Und es ist sehr schnell, sehr einfach zu erreichen. Es ist wirklich zuerst entworfen, Webdesign. Beginnen wir also damit, vielleicht an der Kopfzeile zu arbeiten und dann gehen wir zur Fußzeile. Deshalb möchten wir unsere Social-Media-Links hinzufügen. Und ich zeige Ihnen, wie ich diesen Button eingefügt habe , der uns zu einer, einem Buch, einer Tourseite führt , die in meiner Navigationsüberschrift nach links nicht verlinkt ist. Lassen Sie uns also mit einem Doppelklick in den Bearbeitungsmodus wechseln. Dann bewege ich den Mauszeiger nach oben und wähle Website-Header-Elemente bearbeiten aus. Sie werden sehen, dass ich eine Schaltfläche aktiviert habe. Wenn ich die Ware-Taste deaktivieren würde, würde sie verschwinden. Und wenn wir zurückgehen, das Layout, das wir für unsere Desktop-Ansicht ausgewählt haben. Das Header-Layout , das vorgibt, wie jedes dieser Elemente positioniert wird. Also könnte ich genauso einfach mit dem Logo auf der linken Seite positionieren, eine Navigation in der Mitte und dann alle Schaltflächen oder sozialen Elemente rechts haben . Aber ich bleibe bei diesem Layout. Und wir werden zu den Elementen zurückkehren. Aktiviere unseren Button, der mich zu meiner Booker-Startseite führt. Auch hier können Sie, um Seiten zu verlinken , entweder die genaue URL eingeben. Wenn Sie mit einem Schrägstrich beginnen , gelangen Sie immer zum ersten Verzeichnis nach Ihrer Website. möchten es wahrscheinlich nicht so betrachten , um es einfacher zu machen. Squarespace ermöglicht es Ihnen, einfach mit einem Schrägstrich zu beginnen. Und Sie sehen unten eine Liste Ihrer Seiten. Und da ist mein Buch, eine Tourseite. Wir haben also auch einen Schalter für soziale Links. Ich werde das einschalten. Und Sie können als Platzhalter sehen, wir haben Instagram, Facebook, Twitter. Wir klicken auf Soziale Links bearbeiten. Wenn du anfängst zu tippen. Squarespace weist dieser sozialen Plattform automatisch das richtige Symbol zu. Wenn ich also anfange, Twitch einzugeben, siehst du, dass das Twitch-Symbol erscheint. Für die Zwecke dieser Demo-Site. Ich lasse diese Links einfach stehen tatsächlich auf Squarespace-Profile in den sozialen Netzwerken dieser Plattformen verweisen . Also das ist in Ordnung. Wir haben unsere sozialen Links da drin. Der Kopf sieht gut aus. Wir verwenden die Navigation, um einen Ankerlink hinzuzufügen , der uns zu unserem Kontaktformular unten auf der Homepage führt. Aber lassen Sie uns zuerst einfach die Fußzeile stylen. Deshalb habe ich beschlossen, diese Website mit einem dunklen Thema zu belassen , und Sie können sich ziemlich effektiv abwechseln. Sie könnten von dunklen Bereichen zu hellen Bereichen wechseln , um das Design aufzubrechen. Aber auf dem Rest der Seite habe ich das dunkle Thema durchgehend beibehalten. Also werde ich es tun, die Ausnahme ist dieser kleine Kontextstreifen, dem ich nichts dagegen habe, aufzufallen. Aber ich werde das für die Fußzeile ändern. Also nochmal, wenn ich auf eine beliebige Stelle auf der Seite doppelklicke , um in den Bearbeitungsmodus zu wechseln, und wenn ich den Mauszeiger über den Fußzeilenbereich bewege, erscheint Bearbeiten. Fußzeile funktioniert ähnlich wie die Kopfzeile, aber dieses Mal funktioniert der Fitter eher wie eine normale Seite mit Blöcken. Also, wenn ein Moment, wir haben dieses Layout hier, das tatsächlich ein Rastersystem verwendet. Und du kannst diese Textblöcke, mit denen sie uns angefangen haben, herumbewegen . Ich werde mich für etwas Einfacheres entscheiden. Also diesen Abschnitt hier, ich nicht einbeziehen werde, können Sie diskret wählen, was ich oft mit Ihrem Namen entworfen und entwickelt habe , wenn Sie eine Website für einen Kunden erstellen. Ich werde das vorerst löschen. Es ist eine Strecke mit Text. Und ich werde versuchen, das zu zentrieren. Da sind wir. Auf der anderen Seite. Zentrieren Sie den Inhalt. Ich setze die Adresse in eine Zeile, eine Kontaktnummer in der anderen Zeile. Nach einer Brauerei benannt werden. Ich freue mich sehr, Ihre sozialen Links zu behalten, aber ich denke, sie sind zentriert positioniert. Wenn ich auf die Schaltfläche Bearbeiten, den Tab Design, klicke, kann ich die Mittelausrichtung wählen. Ich könnte auch die Größe ändern, aber damit bin ich sehr zufrieden. Und dann klicke ich auf Abschnitt Bearbeiten und ändere auch die Farben für die gesamte Fußzeile. Ich denke, ich entscheide mich für ein dunkles Schwarz, um mit einem schönen starken Kontrast abzurunden. Wenn ich möchte, kann eine nette kleine Geste sein, wenn nicht sogar das vollständige Logo unten hinzuzufügen . Ich könnte vielleicht die Untermarken hinzufügen, also denke ich, dass ich das machen werde. Das funktioniert also genauso wie unsere normalen Seiten oder füge einen Block hinzu, ziehe ein Bild. Planen Sie dafür eine ziemlich kleine Fläche ein. Das bedeutet, dass ich einfach den Rest meines Inhalts nach unten ziehen muss. Um das zu tun, beginnen Sie mit den sozialen Links. Und wenn Sie ziehen und unter V, am unteren Rand des Rasters, ziehen , wird das Raster nur für Sie erweitert. Es werden zusätzliche Zeilen erstellt. Im Moment ist das Raster so konfiguriert, dass es eine Linie von oben hat. Deine zusätzlichen Blöcke werden also untergehen. Lassen Sie uns also unseren Bildplatzhalter ziehen. Einfach da. Ich glaube, ich gebe ihm ungefähr so viel Platz. Also ein ziemlich kleiner Platz für unsere Untermarke. Ich verschiebe den Text nach oben. Ich verschiebe die sozialen Links wieder nach oben. Und dann klicke ich auf Inhalt bearbeiten und lade es hoch. Mein Unterzeichen. Sehr sind eine kleine Berührung, aber ich finde, das sieht wirklich klug aus. Und jetzt wirst du ein Gitter bemerken. Es gibt uns immer noch mehr Leitungen, wenn wir sie brauchten. Sie müssen also nicht in den Bereich Bearbeiten gehen. Sie können, während Sie den Mauszeiger bewegen, da ist dieses kleine, es sieht aus wie ein Absatzsymbol, aber das zeigt an, was Sie im Raster nach oben ziehen können. Also klicke und ziehe es, bis wir den nicht benötigten Bereich geschlossen haben . Speichern Sie meine Änderungen. Und eine sehr schöne, einfache, saubere Fußzeile, so behalte ich sie gerne. Lassen Sie uns als Nächstes einen Ankerlink erstellen, der uns jedoch zu unserem Kontakt-Bereich führt. Das ist also nicht so einfach, wie es sein könnte. Ich hoffe, Squarespace könnte sich daran ändern, aber ich zeige dir die Methode zum Färben, um das zu tun. Also zuerst muss ich bearbeiten durch Doppelklicken in den Bearbeitungsmodus wechseln. Und ich muss einen speziellen Blocktyp hinzufügen, und das ist der Codeblock. Im Idealfall möchte ich, dass dieser Block innerhalb des Abschnitts so hoch wie möglich positioniert wird. Um das zu ermöglichen, indem Sie diese vorhandenen Abschnitte etwas nach unten verschieben, können Sie tatsächlich einen Abschnitt über einen anderen überlappen. Und ich werde einfach meinen Code positionieren. Jetzt zeigt der Code nichts an, er wird versteckt. Dieses Hello Word wird nicht angezeigt. Es ist also in Ordnung, wenn es überschneidet, wie ich es dort getan habe, aber ich wollte die Dinge nur nach unten verschieben, damit ich sie leicht anklicken und aufrufen kann. Wenn ich also klicke, bearbeite den Code, den wir verwenden müssen , um das Ziel für unseren Ankerlink zu erstellen. Der Code, den wir verwenden müssen, ist, und natürlich können Sie ihn kopieren. Du musst es nicht auswendig lernen. Und offene und dreieckige Klammer p Space ID entspricht. Dann öffnen wir Anführungszeichen. Und zwischen diese Anführungszeichen setzen wir den Namen des Ankerlinks. Der Name des Ankerlinks, das ist für den Namen, den wir verwenden, wenn wir einen Link dafür erstellen, springt zu ihm und er wird in der URL-Leiste angezeigt. Ganz am Ende. Es wird einen Hashtag geben und dann den Ankertag, den wir wählen. Also werde ich Kontakt verwenden. Schließ die offenen Klammern ab. Und dann müssen wir das mit einer weiteren offenen Klammer schließen, Schrägstrich p vorwärts und mit Klammern schließen. Das ist also so viel Codierung, wie du hoffentlich tun musst, um eine einfache Squarespace-Website zu erstellen. Aber es gibt noch viel mehr Code, den du unbenutzt hinzufügen kannst , um Dinge zu optimieren und für immer anzupassen. Aber das würde den Rahmen dieses Kurses sprengen. Also ohne Code für unser Ziel. Ankertag wurde erstellt. Also erinnere dich an seinen Kontakt. Sie können das sogar kopieren, um sicherzustellen, dass es genau richtig ist. Ich werde auf Aus klicken, diese Seite speichern. Und jetzt müssen wir unserer Navigation einen Link hinzufügen. In der Seitenleiste. Stellt sicher, dass du unter Seiten bist. Sie sehen sich die Hauptnavigation an und klicken auf die Plus-Schaltfläche, um die derzeit letzte Option und den Link hinzuzufügen. Und der Titel, den wir wählen, ist der Linkname, wie er in der Navigation oben in unserer Kopfzeile erscheinen wird , aber es ist nicht das Ankertag, noch nicht. zum Beispiel Das könnte zum Beispiel heißen, kontaktiere uns, aber unser eigentlicher Ankerlink könnte einfach Kontakt verwenden , den wir von früher kopiert hatten. Wenn eine Möglichkeit, diesen Ankerlink zu erstellen , darin besteht, ein Hash-Symbol zu verwenden. Und dann der Linkname , den wir gewählt haben. So einfach ist das. Da dieser Link jedoch möglicherweise von verschiedenen Seiten der Website aus angeklickt wird, müssen wir auch einen Schrägstrich hinzufügen, um anzuzeigen, dass Squarespace zum Home-Verzeichnis zurückkehren soll. Wir geben also an, dass dieser Ankerlink auf dem ersten Schrägstrich platziert ist, das ist das Stammverzeichnis. Wenn das für dich keinen Sinn ergibt , mach dir keine Sorgen. Aber vertrau mir, es funktioniert. Wenn dein Ankerlink oder auf einer anderen Seite ist, z. B. wenn er auf der About-Seite wäre, würdest du den Link so eingeben, wie er dir hier angezeigt wird. Es wäre also Forward Slash über uns. Dann der Hashtag-Van-Kontakt , der uns zu derselben Ankerlinkposition führen würde derselben Ankerlinkposition wenn er auf einer dieser Unterseiten platziert würde. Also haben wir es auf der Homepage platziert. Wir verwenden diesen Schrägstrich-Hashtag. Und dann klickt unser Link auf Speichern. Ich ziehe das, sodass es als letztes Element in unserer Navigation erscheint. Und dann, obwohl wir uns im Backend von Squarespace befinden, wenn ich auf diesen Link klicke, solltest du sehen, dass wir auf die Seite weitergeleitet werden. Und es hat uns direkt zu dem Ziellink geführt , den wir erstellt haben. Das ist also eine sehr langatmige Art, das zu tun was auf einigen anderen Plattformen recht einfach ist. Das ist also eine Funktion, von der ich hoffe, dass Squarespace aktualisiert wird, aber gleichzeitig ist die Implementierung nicht allzu schwierig. Sie könnten also so viele Ankerziele und Ankerlinks hinzufügen , wie Sie möchten. Sie könnten denselben I'm Forward-Schrägstrich und Ihren Zielnamen verwenden , um einen Link aus einer Schaltfläche aus einem hervorgehobenen Textteil zu erstellen . Das wäre der Prozess dafür. Eine letzte wichtige Funktion , die wir berücksichtigen müssen, ist die mobile Ansicht. Wenn Sie nun oben rechts klicken, können Sie zwischen der Desktop- und der mobilen Ansicht wechseln. Und wenn Sie zuerst auf dem Desktop entwerfen, leistet Squarespace in den meisten Fällen einen wirklich guten Job , Fällen einen wirklich guten Job den Inhalt responsiv zu konvertieren. Und alles passt gut. Aber wir werden jetzt darauf klicken. Und ich habe das noch nicht für meine Website überprüft. Und während wir nach unten scrollen, müssen wir einfach nach Bereichen suchen, in denen vielleicht aus Gründen des Abstands der Ausrichtung etwas nicht genau richtig in der mobilen Ansicht angeordnet ist. Und hier habe ich den ersten entdeckt. Mir gefällt nicht, dass dieser Button direkt auf den unteren Abschnitt verweist. Um in den Bearbeitungsmodus zu gelangen, doppelklicken Sie einfach auf eine beliebige Stelle auf der Seite. Und was nett ist, sind alle Anpassungen, die ich an dieser mobilen Ansicht vornehme. Es werden sie nicht in der Desktop-Ansicht wiedergegeben , wenn sich das faire Layout und das Raster ändern. Also ziehe ich, nur um einen extrazellulären Raum unter dieser Schaltfläche zu erstellen. Und ich werde die Änderung speichern. Das behebt das Problem für die mobile Ansicht. Und wenn ich zur Desktop-Ansicht zurückkehre, bleibt unser Layout dasselbe. Es ist so konzipiert, dass Sie, wenn Sie mit Ihrem Desktop-Layout beginnen, durcharbeiten und ohne Zerstörung Feinabstimmungen vornehmen und Anpassungen vornehmen können . Wenn ich den Text bearbeiten und ändern würde würde sich das natürlich auf beide Ansichten auswirken. Das ist also nur für Grids. Alle Änderungen, die Sie an der Feinabstimmung ihrer Positionierung im Mobilfunknetz vornehmen. Squarespace hat eine Möglichkeit , das beizubehalten, es nicht zu ändern und dein Desktop-Layout nicht zu verderben. Der Rest der Seite sieht gut aus, vielleicht ein bisschen zu viel negatives Leerzeichen unten hier. Das wurde durch unseren Code verursacht. Der Ankerlink , der in der mobilen Ansicht interessanterweise unten platziert ist. Also muss ich die Dinge nach unten verschieben und sicherstellen, dass mein Code oben angezeigt wird. Jetzt eine praktische Funktion, die Sie verwenden können. Und ich denke, soweit ich weiß, gilt das nur für die mobile Ansicht, da ist hier dieser kleine Pfeil mit der Aufschrift „Nach oben“. Und Sie können ein Element im Mobilfunknetz nach oben verschieben. Also werde ich ein- , zweimal darauf klicken. Und ganz offen beginnt jetzt mit unserem Code. Wenn ein Besucher etwas vom Frontend aus betrachtet. Denken Sie daran, wir sind im Backend. Dieser Code sollte keinen Raum schaffen , der in Bezug auf ein Layout und diesen Abstand ignoriert werden kann . Also nochmal, ich werde diese Änderung speichern. Auch in der mobilen Ansicht ist aufgefallen, dass die Fußzeile nicht funktioniert. Wie ich es gerne hätte. Ich freue mich, dass ich auf einige dieser kleinen Probleme stoße , um sie zu optimieren da dies Ihnen zeigt, was Sie möglicherweise für Ihre Website tun müssen. Doppelklicken Sie also erneut, um den Bearbeitungsmodus aufzurufen. Klicken Sie auf Fußzeile bearbeiten und bewegen Sie den Mauszeiger darüber. Und ich denke, das Problem hier ist nur, dass versucht wurde, der Seite etwas negativen Raum hinzuzufügen. Also ziehe ich und stelle sicher, dass meine Elemente über die gesamte Bildschirmbreite verteilt sind. Und dann kann es sich mein Bild meiner Meinung nach leisten, etwas kleiner zu sein. Also gebe ich ihm weniger Platz zum Arbeiten innerhalb unserer Position in der Mitte des Rasters. Und dann verwende ich meine praktische Move-Up-Funktion , um es einfach nach oben zu verschieben , so wie wir es möchten. Es dauert also nur ein paar Sekunden , um einige der Falten auszubügeln. Aber es lohnt sich, Ihre Website durchzusehen, wenn Sie fertig sind, und das nur zu überprüfen. Für die mobile Ansicht ist nichts dergleichen passiert. Ich werde also nicht jede Seite durchgehen, aber bitte gehe jede Seite deiner Website durch und nimm nur kleine Änderungen, kleine Anpassungen vor, um sicherzustellen, dass das mobile Layout so aussieht, wie es sollte. Ich bin also ziemlich zufrieden mit meiner Beispiel-Website. Hoffentlich bist du zufrieden mit dem, was du bisher geschaffen hast. In der nächsten Lektion werden wir uns einige Profi-Tipps ansehen, die Ihnen helfen können, Ihrer Website den letzten Schliff zu geben. 9. Profi-Tipps: Obwohl ich diese Lektion als Profi-Tipps bezeichnet habe, achte ich auf diese Dinge. Ich mache das seit über zehn Jahren, zehn Jahre Erfahrung im Webdesign. Diese Tipps sind nicht schwer zu implementieren, sodass sie ein professionelles Umfeld schaffen und Ihre Website fertig stellen, aber sehr einfach zu implementieren sind. Unser erster Tipp ist also ein Browsersymbol. Sie finden es, indem Sie in der Seitenleiste zum Designbereich und dann zum Browsersymbol navigieren der Seitenleiste zum Designbereich . Und das wird technisch gesehen Favicon genannt. Es ist eine winzige kleine Ikone. Sie können also nichts mit einem hohen Detaillierungsgrad hinzufügen. Aber es erscheint, wenn Sie oben links in meinem, meinem Browserfenster nach oben schauen . Es ist ein kleines Symbol. Und auf Mobilgeräten, die zum Bookmarken von Websites verwendet werden, wird es als ein winziges kleines Symbol in der oberen Ecke angezeigt. Ganz nett, wenn es kein Fehler ist, Squarespace-Block. Ich habe also etwas, das perfekt dafür geeignet ist. Ich habe ein sehr einfaches Kronensymbol, das nur für den mittleren Teil eines meiner Logo-Elemente verwendet wird. Also werde ich das als mein Favicon verwenden. Also einfach ziehen und ablegen. Es muss also eine PNG-Datei sein, aber andernfalls passt Squarespace die Größe für dich an. Also werde ich sparen. Es erscheint hier nicht. Wenn ich das kopiere und ein neues Inkognito-Fenster öffne, kannst du sehen, dass es jetzt erscheint, das wirklich intelligent aussieht. Es muss wirklich ein einfaches Symbol sein. An manchen Orten. Es ist ein absolut winziger Raum, aber er hat eine nette professionelle Note. Etwas anderes, während wir auf diesem Tab sind. Das ist also der Design-Tab, der Sperrbildschirm. Sie haben also wahrscheinlich bemerkt, als ich dieses Inkognito-Fenster besucht habe , ob Sie einen potenziellen Kunden geschickt haben, um sich eine Website anzusehen, vielleicht sobald Sie bereit sind, sie zu veröffentlichen. Dies ist die Seite, die sie sehen würden, wenn Sie ein Passwort gesperrt haben und das Passwort eingeben, um Zugriff zu erhalten. Nun, das ist ziemlich generisch. Dies wird keine Designbelohnungen gewinnen. So können wir tatsächlich ohne allzu großen Aufwand etwas Besseres schaffen . Also einfach eine nette professionelle Note. Wenn wir den Sperrbildschirm der Registerkarte Design aufrufen, haben wir einige verschiedene Layouts, aus denen wir wählen können. Also vielleicht dieser. Nur um dir das zu demonstrieren. Ich klicke auf Speichern. Ich gehe zurück. Und wenn Sie sich dann durch diese Überschriften arbeiten, können Sie sie anpassen und gestalten. Also könnte ich auf das Branding und die Texte, wenn wir wollten , mein Logo hinzufügen, was ich tun werde. Also das ist nett. Evoke Brauerei. Sie können eine Überschrift hinzufügen, wenn Sie möchten, oder Texttexte, aber ich denke nicht, dass das für mich erforderlich ist. Ich werde sparen. Gehen Sie zurück zum nächsten Menü, das Medien enthält. Hier können wir wirklich für dieses spezielle Layout ein Hintergrundbild wählen . Also nochmal, du kannst die Stockbilder von Squarespace oder die Bilderbibliothek, die du bisher hochgeladen hast, durchsuchen Stockbilder von Squarespace oder die Bilderbibliothek . Und ich mag diese abstrakte Version sehr. Es zeigt Bier, das in einem Glas herumwirbelt. Ich denke, das erzeugt einen ganz schönen Effekt wenn Fledermäuse hochgeladen und ihr Ding gemacht haben. Für einen viel professionelleren Sperrbildschirm haben wir also nur etwa eine Minute gebraucht, um das zusammenzustellen. Wenn ich jetzt mein Inkognito-Fenster aufrufe und aktualisiere, wird das einen viel besseren ersten Eindruck hinterlassen wenn ein Kunde kommt um sich anzumelden und begeistert seine neue Website besucht. Also noch ein Profi-Tipp und vielleicht Squarespace nicht sehr glücklich sein. Ich sage das, aber der Tipp ist, zu vermeiden, dass bestimmte Designmerkmale zur neuesten Version hinzugefügt wurden. Wenn ich auf Bearbeitungsmodus klicke und einen Abschnitt hinzufügen gehe. Leider scheinen einige der neuesten Optionen mit neuesten Vorlage, die Squarespace hinzufügt, oben auf dieser Seite zu erscheinen . Sie sind besessen von diesem sich langsam bewegenden Text , der meiner Meinung nach aus gestalterischer Sicht schrecklich aussieht. Sie können hier sehen, dass es mehr davon gibt. Was passiert hier? Es ist für mich, es ist wirklich abstoßend. Vielleicht würde es dir gefallen, aber mein Profi-Tipp ist, diese kniffligen Funktionen zu vermeiden. Ich meine, sieh dir das an. Vielleicht, vielleicht gibt es da draußen jemanden das zu schätzen weiß . Aber für mich. Obwohl es technisch klug ist, konnten sie die Kapazität dafür programmieren. Ich würde diese kniffligen Bewegungstexte vermeiden. Behalten Sie den Text, lassen Sie das Layout statisch. Aber wenn Sie ein bisschen Mikroanimation hinzufügen möchten , ist dies ein besserer Weg. Und das ist mein nächster Profi-Tipp. Also, wenn ich das schließe und wir den Bearbeitungsmodus verlassen, solltest du auf jeden Fall Mikroanimation verwenden, aber benutze sie für die richtige Art und Weise. Ich möchte nicht, dass sich Text bewegt, wenn jemand versucht, ihn zu lesen. Wenn wir also zum Home-Bereich unserer Seitenleiste gehen, besuchen Sie die Überschrift v Design, Seitenstile. Und vielleicht haben Sie das schon einmal bemerkt, aber wenn Sie es hier nicht versteckt haben, sind Animationen die dritte Option . Und das gilt meiner Meinung nach recht geschmackvolle Mikroanimationen all Ihre Elemente auf der gesamten Website. Und der Unterschied ist, wenn ich auf die Fade-Option klicke. Sobald die Animation abgespielt wurde, ist Ihr Inhalt statisch. Es kann also rot sein, es kann genossen werden. Es bewegt sich nicht weiter. Und für mich ist das meiner Meinung nach eine ziemlich wichtige Differenzierung. Also werde ich mit Geschwindigkeit zu langsam wechseln. Es verblasst nett und langsam. Und Sie können sehen, wenn ich anfange, auf der Seite nach unten zu scrollen, unser Text eingeblendet. Und das ist einfach perfekt. Nette subtile Animation. Wenn wir wieder nach oben scrollen, wird es nicht wieder eine Schleife geben. Es gibt andere Möglichkeiten , um zu skalieren, ist ziemlich gut. Wenn Sie möchten, dass es etwas mehr Wirkung hat. Einige der Bilder skalieren tatsächlich an ihren Platz, sodass etwas mehr Bewegung entsteht. Ich werde die Folien sichern. Es ist eine weitere geschmackvolle Option. Das sorgt für ein wirklich schönes Premium-Gefühl , wenn Sie auf der Website navigieren. Und Sie können selbst damit experimentieren, aber Clip und Flex sind auch ganz nette Optionen. Was mir daran gefällt, ist, dass all diese Optionen geschmackvoll sind. Sie lenken nicht ab und fügen Ihrer Website nur einen netten Profi hinzu. Mein letzter Profi-Tipp bezieht sich also auf das Balancieren. Und wenn es um Layouts geht ein Besucher durch eine Website scrollt, wenn es viele belebte Bereiche gibt, zu viele Texte, zu wenig negativer Raum dazwischen. Es kann sich sehr eng und klaustrophobisch anfühlen. Versuche also, ein bestimmtes Tempo zu erreichen. Squarespace bietet dir zwar Abschnitte und unterteilt deine Inhalte in Abschnitte, versuche aber, deine Bilder voneinander zu trennen. Versuche, möglichst viel negativen Raum um jeden Textabschnitt herum einzubauen , und versuche, einen netten, sanften Ablauf zu schaffen, sodass an jeder Stelle, an der ein Besucher nach unten scrollt, vielleicht nur ein oder zwei , die ihnen gleichzeitig auffallen. Versuche, nicht zu viele verschiedene Elemente um Aufmerksamkeit konkurrieren zu lassen. Sie können also sehen, ob dies bei dieser Beispielseite der Fall ist. In jedem Abschnitt, durch den wir scrollen, gibt es normalerweise nur eine Hauptüberschrift. Sie werden feststellen, dass ein Element um ihre Aufmerksamkeit kämpft. Auf Seiten, auf denen Sie ein paar weitere Elemente haben , werden möglicherweise zusammen angezeigt, wie auf dieser Prozessseite. Es ist wirklich wichtig, genügend negativen Raum einzubeziehen, aber das fühlt sich nicht überwältigend an. Sie können sich vorstellen, wenn das bis zu den Rändern gedrückt wurde. Würde ein Text mehr Platz wegnehmen, würde er sich sehr, sehr beschäftigt anfühlen. Und wo Sie einen Abschnitt wie diesen haben, einen geschäftigeren Abschnitt, ist es schön, ihm entweder ein paar nette, ruhige, vielleicht bildreiche Abschnitte voranzustellen oder ihm zu folgen . Nur damit du wieder in einem schönen, sanften Tempo kreierst. Und zum Schluss möchte ich Ihnen nur ein Beispiel dafür geben , eine Website, die ich für einen meiner Kunden, einen sehr talentierten Fotografen, erstellt habe . Und weil sie für einige Funktionen, die ich implementiert habe, Fotografin ist , aber wenn es für die Brauerei angemessen ist, aber auf jeden Fall für bestimmte Arten von Kunden, sollten Sie diese einrichten. Sie werden also feststellen, dass es einen schönen effektiven Halbvollbildschirm gibt , da Slideshow für die Kopfzeile berücksichtigt wenn Sie auf der Homepage landen. Das ist also ein wirklich netter Effekt. Und dann, während Sie durch jede Menge negativer Räume scrollen, dieses Tempo, über das wir gesprochen haben, um sicherzustellen, dass Sie von bildreichen zu vielleicht textreichen Bereichen wechseln und die Dinge gut aufteilen. Wir haben auch von dunkel zu hell gewechselt , mit einem Abschnitt , der sehr effektiv ist. Nochmals, ich denke über das Tempo nach. Wenn ein Besucher durch diese Seite scrollt. Testimonials, Squarespace, Es gibt eine ganze Reihe netter Vorlagen und Optionen, um Bewertungen oder Testimonials anzuzeigen. Wenn Ihr Kunde ein Unternehmen hat, bei dem das wichtig sein wird und ein wenig Aufmerksamkeit erhalten wird, füge ich es gerne für Kunden bei Google oder Trust Pilot hinzu. Es wird darin bestehen, einem neuen Fenster eine Schaltfläche hinzuzufügen, auf der weitere Bewertungen zu Einnahmen mit Besuchern dieser Plattform angezeigt werden. Sie können also sehen, dass diese nicht einfach erfunden sind. Dies sind tatsächlich verifizierte Bewertungen , die sie kostenlos für sich selbst durchsuchen können. Wenn Ihr Kunde eine Website hat, er eine Reihe verschiedener Dienste anbietet, das für einen Besucher nicht alle von Interesse. Ich versuche, vielleicht bevor sie das Ende unserer Homepage erreichen, einen Besucher zu einer Entscheidung zu drängen und ihn zu V-Inhalten zu leiten , die für sie relevant sind. Und eine nette Art, das zu tun, es kann ein Raster sein. Wenn Sie nur kostenlose Optionen hätten, würde das auch funktionieren. In diesem Fall gab es sechs verschiedene Optionen. Und dieses Raster, es verleitet einen Besucher einfach zur Auswahl und zeigt ihm, wonach er vielleicht sucht. Ein Klick durch. Es wird zum entsprechenden Abschnitt weitergeleitet. Auf diese Weise ist der Inhalt, auf den sie auf dieser Seite stoßen , für sie völlig irrelevant. Wenn das eine ziemlich unnötige Technik im Webdesign ist, versuche ich, darüber nachzudenken Ihre Besucher die Froogle-Website nutzen könnten , um sicherzustellen, dass sie auf das stoßen, was sie suchen . für so schnell wie möglich. Und wenn Sie verstehen, dass nicht jeder sofort auf die Navigationsleiste schauen wird. Wenn sie auf einer Website landen. Manche Leute beginnen ganz natürlich, nach unten zu scrollen, wenn er eine Website zum ersten Mal besucht , ist für beide Arten von Besuchern geeignet und stellen nur sicher, dass Sie etwas haben, das Sie ihnen senden können, um ihnen zu zeigen. was sie suchen. 10. Die Einführung deiner Website: Also ein letzter wichtiger Schritt. Wenn Sie eine Website, der Sie gefolgt und erstellt haben , tatsächlich starten möchten. Oder wenn Sie wissen möchten, wie das in Zukunft tun können, werden wir uns das in dieser Lektion ansehen und gemeinsam daran arbeiten. Im Moment habe ich also eine attraktiv aussehende Website, jedoch diese Squarespace-Subdomain verwendet. Und es ist auch für die Öffentlichkeit gesperrt. Wenn ich also keinen Zugriff bereitstelle, kann dies niemand sonst sehen. Die erste Phase, bevor du deine Website live machst, besteht also darin, einen Tarif bei Squarespace auszuwählen. Du kannst das tun, indem du die Einstellungen in der Seitenleiste aufrufst und dann fakturierst. Wie Sie hier sehen können, heißt es derzeit, dass es keinen aktiven Abonnement-Link zu diesem Konto gibt. Und im Moment verwende ich ein Testabonnement, Squarespace, das dir nur Zeit gibt , eine Website zu erstellen und zu gestalten. Um einen Plan zu erstellen, muss ich hier auf diesen Link klicken. Und dann klicken Sie auf die Schaltfläche Upgrade. Und es sagt mir hier, wie viele Tage ich noch in den kostenlosen Testversionen habe. Also klicke ich auf Upgrade. Und dann geht es einfach darum, einen Plan auszuwählen. Und wenn es darum geht, zu entscheiden , welcher Plan für Sie am besten geeignet ist. Mein Rat wäre, die Liste der Funktionen und Funktionen, die nicht typisiert sind , herunterzuschauen . Überprüfen Sie, ob bei einer dieser Optionen, die Sie benötigen, ein Fehler aufgetreten ist. Und stellen Sie natürlich sicher, dass der von Ihnen gewählte Plan diese Funktionen enthält. Sie werden also feststellen, dass viele dieser Funktionen unter diese E-Commerce-Überschrift fallen. Wenn Sie also eine E-Commerce-Website erstellen diese Funktionen verwenden, Sie sich auf jeden Fall zumindest für einen Geschäftsplan entscheiden . Und dann vielleicht sogar einer der Handelspläne. Sowjetisch, Sie profitieren von Dingen wie keinen Transaktionsgebühren und anderen Funktionen. Es gibt ein paar Marketingfunktionen, aber im Allgemeinen habe ich festgestellt, dass der persönliche Tarif für eine durchschnittliche Website, die nur eine Webpräsenz möchte, ihren Besuchern Informationen bieten möchte. Dieser Plan ist mehr als genug. Wenn Sie Ihre Auswahl getroffen haben, klicken Sie einfach im entsprechenden Tarif auf Auswählen. Und dann haben Sie die Möglichkeit , Ihre Rechnungsinformationen einzugeben, was ich im Moment nicht mit Ihnen tun werde. Also werde ich das schließen. Wir gehen jedoch davon aus, dass Sie jetzt einen Squarespace-Tarif haben einen Squarespace-Tarif wenn Sie bereit sind für den nächsten Schritt, nämlich die Auswahl eines Domainnamens. Wenn du möchtest, kannst du jetzt die Subdomain verwenden , die Squarespace dir anbietet die in deinem Tarif enthalten ist. Aber die Tatsache, dass es Punkt squarespace.com ist, ist für mich ein bisschen unnötig, ein bisschen kostenlose Werbung für Squarespace of Air. Für eine professionelle Website. Ich denke nicht, dass du die Tatsache, dass du Squarespace verwendet hast, um es zu veröffentlichen, weitergeben musst . Halte es kurz und bündig. Also besuchen wir die Einstellungen erneut von unserer Seitenleiste aus. Und dieses Mal schauen wir uns die Domain-Überschrift an. Wenn Sie auf Domains klicken, haben Sie zwei verschiedene Optionen. Eine ist, eine Domain zu bekommen. Und wenn Sie auf diese Option klicken, fungiert Squarespace tatsächlich als Ihr Domain-Registrar. Sie können also eine Suche durchführen. Es wird bereits empfohlen, basierend auf der Subdomain, die ich eingerichtet habe. Und Sie können von hier aus jede der üblichen Domains erhalten , so.com, Ihre lokalen Domainnamen wie.co.uk, die wir hier verwenden, und sogar einige V-Nischen-Domains. Also Dark Beer Dot Pub, hier bekommst du das komplette Sortiment. Aber das bedeutet, dass dein Domainname an Squarespace gebunden ist. Wenn du also vorausschauend denkst, wenn du möchtest, dass es sich von Squarespace entfernt und in Zukunft, wenn deine Marke wächst, wäre es etwas schwieriger, die Domain von Squarespace zu übertragen , aber nicht unmöglich. Das ist also bei weitem die einfachste Option. Wenn du deine Domain hier kaufst, kümmert sich Squarespace darum für dich. Ich gehe zurück und wir schauen uns die anderen Optionen an. Also benutze eine Domain, die ich besitze. Das bedeutet im Grunde, dass Sie die Domain über eine andere Website gekauft haben . Also vielleicht ein unabhängiger Domain-Registrar. Also GoDaddy, eins-zwei-drei, rot. Das sind beliebte. Ich werde keinen bestimmten empfehlen . Aber jeder Domain-Registrar, den Sie verwenden möchten, sobald Sie etwas mit ihm eingerichtet haben und Sie Ihren bevorzugten Domainnamen haben, würden Sie ihn hier eingeben. Und nur als Beispiel gebe ich die Webadresse von mir ein. Eigene Website. Ich drücke die Eingabetaste. Und Squarespace wird tatsächlich die aktuellen Details für diese Website nachschlagen. Sobald es diese Informationen gefunden hat, hast du die Möglichkeit , sie erneut an Squarespace is control zu übertragen . Ich denke, das vereitelt den Zweck dieser Methode. Wahrscheinlich werden Sie die Connect-Domain verwenden. Wenn ich diese Option auswähle , werden Sie nur zur Benutzerfreundlichkeit gefragt, ob Sie den Anbieter identifizieren können. Manchmal bedeutet das, dass Sie, während Sie bei beiden Diensten angemeldet sind, einfach auf eine Schaltfläche klicken können und die Übertragung wird für Sie durchgeführt. Ich weiß, dass das der Fall ist. Wir würden gehen, Papa. Ich belasse es als andere Connect-Domain. Das sind also die DNS-Einstellungen. Aber Squarespace benötigt meinen Domainnamen um die Kontrolle zu erlangen und diesen Domainnamen nutzen zu können. Für einen Moment können Sie die aktuellen Aufzeichnungen, die ich habe, rot sehen . Einige von ihnen sind privilegiert, also wird das hier nicht erscheinen. Aber das ist die IP-Adresse, die ich z. B. verwende sodass ich den Prozess zum Ändern dieser DNS-Daten nicht bei jedem Registrar durchführe . Im Allgemeinen wird es jedoch eine Seite geben, auf Sie aufgefordert werden, Ihre DNS-Einstellungen zu verwalten. Alles was Sie tun müssen, ist die Werte aus diesen Spalten zu kopieren und einzufügen. Also der Host-Wert in diese Host-Spalte mit Ihrem Registrar. Stellen Sie sicher, dass der Typ dort normalerweise ein Drop-down-Menü und einige Optionen enthält. also sicher, ob es sich um einen CNAME-Eintrag handelt und der Typ C-Name ist. Und bei erforderlichen Daten werden diese manchmal auf der Website Ihres Registrars als Ziel oder Ziel bezeichnet . Dort würden Sie diese Informationen also eingeben. Also, sobald Sie diese Datensätze durchlaufen und aktualisieren, falls ein Datensatz nicht existiert. Also gibt es zum Beispiel eine ganze Reihe von Datensätzen, die hier hinzugefügt werden können. Möglicherweise müssen Sie einen neuen Datensatz hinzufügen. Dann gib einfach diese Daten ein. Wenn Sie also alle diese Datensätze auf der Website Ihres Registrars eingegeben haben , klicken Sie auf dieser Seite auf Aktualisieren. Und wenn Sie das richtig gemacht haben, müssen Sie einige Minuten einplanen , bis sich das verbreitet und aktualisiert hat. Sie werden jedoch beginnen, die passenden Werte im aktuellen Datenfeld zu sehen , und sie werden grün, wenn das korrekt ist. Sobald Sie also all diese Datensätze grün angezeigt haben, ist das alles. Ihre Domain wird eingerichtet und diese Phase ist abgeschlossen. Das ist also ein bisschen technisch. Du kannst sehen, warum Squarespace die Option hinzugefügt hat , damit sie dies in deinem Namen verwalten können. Wenn sich das also ein bisschen besser anfühlt als du dich wohl fühlst, kannst du es einfach mit Squarespace erledigen . Der letzte Schritt, und das verspreche ich, ist viel, viel einfacher als die Arbeit mit DNS-Einstellungen, besteht darin, Ihre Website für die Öffentlichkeit sichtbar zu machen. Sobald Sie also einen Plan eingerichtet haben, können Sie, sobald Ihr Domainname eingerichtet ist, sobald Ihr Domainname eingerichtet ist, unter Einstellungen zur Verfügbarkeit der Website wechseln. Und sofern Sie einen Plan haben, wird diese Option, öffentlich, nicht ausgegraut. Sie klicken einfach auf das Kontrollkästchen für öffentlich und dann auf Veröffentlichen. Und das war's. Ihre Website wird offiziell live sein. Der Link, zu dem Sie Leute schicken , wird der Domainname sein , den Sie eingerichtet haben. Und das würden Sie in die URL-Leiste eingeben. Das würden Sie den Leuten schicken um Ihre neue Website zu besuchen. Um jedoch das Backend aufzurufen und Zugriff auf die Seitenleiste und die Bearbeitungstools von v Squarespace zu erhalten. Du müsstest trotzdem diese Squarespace-Subdomain besuchen. Es lohnt sich also, die beiden aufzuzeichnen. 11. Schlussbemerkung: Gut gemacht. Wenn du dir das ansiehst, bedeutet das wahrscheinlich, dass dir gefallen hat, was du gesehen hast , und dass du dich entschieden hast, Squarespace zu geben und es auszuprobieren. Und hoffentlich hast du mitgemacht. Du hast eine gute Vorstellung davon, was Squarespace dir ermöglicht, zu erstellen. Und hoffentlich konnten Sie unterwegs Ihre eigene Beispiel-Website erstellen . Ich hoffe, dass Sie durch die Verfolgung meines Prozesses zur Erstellung der Brauerei-Website auch einen praktikablen Workflow erhalten haben, mit dem Sie Websites für zukünftige Kunden erstellen können. Wir haben uns wirklich auf einen Überblick und das Wesentliche konzentriert , das Sie benötigen, aber es ist möglich, viel tiefer einzutauchen. Es gibt viele Ressourcen da draußen. Wenn du dein Wissen mit Squarespace erweitern möchtest. Wenn du dem Klassenprojekt gefolgt bist, stelle bitte sicher, dass du einen Link zu deiner Kreation im Bereich V-Klasse-Projekte teilst . Ich würde gerne sehen, was Sie zusammenstellen konnten. Hinterlassen Sie gerne eine Bewertung, wenn Ihnen der Kurs gefallen hat und vergessen Sie nicht , meinem Profil zu folgen, damit ich Sie hoffentlich im nächsten Kurs sehen kann.