Squarespace: So erstellst du deine eigene kreative Website ohne Code

1. Einführung: Du willst also eine Website erstellen, aber wo fängst du an? Welches Programm wirst du benutzen? Nun, wenn Sie ein Anfänger sind oder sehr erfahren sind und super kreativ sein möchten. Ich zeige dir das beste Programm für all das, und das ist Squarespace. Wenn man sich Squarespace anschaut, fühlt man sich vielleicht, dass es etwas zu vorlagig ist. Nun, ich zeige dir, wie du diese Flugzeug-Vorlage nimmst und sie in diese super coole, aufregende Website verwandelst . Hi, ich bin John Wolfgang Miller. Ich bin jetzt seit 20 Jahren professioneller Designer. Ich habe für einige sehr große Kunden wie Fox TV hier in Australien gearbeitet. In diesem Kurs zeige ich Ihnen zunächst, wie Sie ein bisschen Branchenforschung betreiben können. Und dann werfen wir einen Blick auf alle globalen Elemente. Das sind die Teile , die auf der gesamten Website erscheinen , und diejenigen, mit denen Sie Ihr eigenes persönliches Branding zeigen können. Ich zeige Ihnen, wie Sie eine sehr beeindruckende Homepage erstellen können, auch eine About-Seite, eine Kontaktseite und natürlich die Blogseite. Ich zeige Ihnen auch, wie Sie diese Animation in den Hintergrund bringen können. Dies ist etwas , das Ihre gesamte Website wirklich hervorheben kann . Wenn Sie Ihr Website-Portfolio und Ihre Designerfahrung aufbauen möchten , bin ich hier, um Ihnen dabei zu helfen. Wenn du also bereit bist, lass uns anfangen. 2. Kursprojekt: Ihr Projekt hier ist es, meinen Anweisungen zu folgen und Ihre eigene großartige Website zu erstellen. In den ersten Lektionen erklären wir Ihnen die Einrichtung von Square Space. Dann schauen wir uns die Startseite an und erstellen eine Seite, die zeigt, wer Sie sind. Wir werden uns dann die Hintergrundanimationen ansehen und zeigen, wie Sie Ihrer Website eine zusätzliche kreative Seite verleihen können. Okay. Danach finden Sie Lektionen auf Ihrer Seite, Ihrer Kontaktseite, und dann werden wir uns den Blog-Bereich genauer ansehen. Ich empfehle, sich alle Lektionen anzusehen und sie dann nacheinander noch einmal durchzugehen und nach jeder Lektion genau das zu machen , was ich Ihnen gezeigt habe. Sie können hier entweder alle Ihre eigenen Bilder verwenden oder Sie können genau dieselben Bilder verwenden, die ich verwendet habe. Wenn Sie das tun möchten, werden alle meine Bilder hier im Ressourcenbereich aufbewahrt. In diesem Kurs und allen meinen Kursen werde ich viele verschiedene Dinge behandeln und viele verschiedene Fähigkeiten unter Beweis stellen. Ich empfehle daher, die Videos im Laufe der Zeit abzuspielen und anzuhalten. Und wenn ich etwas wiederholen soll, drücken Sie einfach die 15-Sekunden-Rücklauftaste oft genug, damit Sie sich den ganzen Teil noch einmal ansehen können Wenn Sie Probleme mit der Videoqualität hier in Skillshare haben, kommen Sie einfach hierher und klicken Sie auf dieses Qualitätsstufensymbol Wenn das auf Auto eingestellt ist, nun ja, je nach Ihrer Internetgeschwindigkeit zu Hause, es möglicherweise nicht in der höchstmöglichen Qualität angezeigt Ändern Sie es einfach auf sieben, 20 oder zehn 80 Pixel, und Sie werden sofort eine große Qualitätsänderung feststellen. Am Ende dieses Kurses wirst du eine tolle Website haben. Stellen Sie also sicher, dass Sie es zum Projektbereich hinzufügen, und ich gebe Ihnen mein vollständiges Feedback. 3. Squarespace-Einrichtung: Okay, hier sind wir also bei Square Space auf squarespace.com, und da unten im A-Bereich gibt es einen Link Das Beste an Square Space ist, dass sie dir immer eine kostenlose Testversion der Website anbieten Sie können also mit dem Programm herumspielen und sehen, ob es das ist, was Sie kaufen möchten. Keine Kreditkarte erforderlich. Sie müssen keine Kreditkartendaten eingeben. Wenn Sie sich also umgesehen haben , klicken Sie einfach hier auf Getarted Und das bringt Sie zur Seite mit den Vorlagen. Square Space hat viele verschiedene Vorlagen. Sie können sie sich gerne alle ansehen, wenn Sie möchten. Wählen Sie einfach alle Vorlagen aus und scrollen Sie nach unten. Sie werden alle Vorlagen sehen, die sie haben. Sie haben hier auch eine Vorschau von allem, also klicken Sie auf die Vorschau. Und es zeigt Ihnen, wie die gesamten Websites aussehen, und Sie können sich sogar die Demo-Site ansehen. Jetzt die Website, die ich erstellen werde. Nun, es wird eine Blogseite sein. Es wird eine Blogseite über meine Lieblingssache auf der Welt sein. Und das sind Videospiele. Was ich liebe, sind Retro-Videospiele. Ich liebe all die alten Nintendo- und Sega-Spiele und all die alten Arcade-Automaten aus den 80ern und 90ern Deshalb möchte ich einen Blog haben, der alles darüber und über all diese tollen Spiele spricht Also, ich könnte sie mir jetzt alle ansehen oder hier oben, ich kann wählen, dass das eine Blogseite sein wird. Und das wird die Suchanfragen eingrenzen. Oder es geht um Unterhaltung. Also lass uns sehen, was wir hier haben. Die Optionen, die wir hier ausgewählt haben ergaben nicht viele Vorlagenübereinstimmungen. Also lass uns einfach etwas anderes wählen. Ich werde den Online-Shop wählen. Ich mache keinen Online-Shop, aber du kannst eine beliebige Vorlage daraus nehmen und einfach damit herumspielen, um wirklich alles zu tun, was du willst. Also lass uns einfach sehen, was wir hier noch finden können, schauen, ob es etwas gibt, das mir gefällt. Irgendwie die helleren Farben dort, aber es ist ein bisschen schlicht, das Weiß. Und ich mag diesen hier irgendwie, um ehrlich zu sein. Ich weiß, es ist nicht hell oder so, aber ich mag die Art und Weise, dass wir das große Bild auf der rechten Seite und dann den großen Text auf der linken Seite haben das große Bild auf der rechten Seite . Lassen Sie uns eine Vorschau davon ansehen. Okay. Ja. Ich meine, es ist immer noch ziemlich langweilig, was die Farben angeht. Aber was das Layout angeht, mag ich die Verwendung von großen Schriften und großen Bildern und so. Also ich denke, wir werden damit beginnen und ich denke, wir werden es so entwickeln dass es so aussieht, wie wir es uns wünschen. Also lass uns hier raufgehen, mit diesem Design beginnen. Und jetzt müssen Sie ein Konto erstellen und das können Sie kostenlos tun. Sie müssen keine Kreditkartendaten oder ähnliches eingeben . Also werde ich einfach mit einem meiner Google-Konten weitermachen . Und jetzt, wo ich das eingegeben habe, wie Sie sehen können, geht es darum, die Dinge einzurichten. Okay. Und los geht's. Willkommen auf Ihrer Seite. Dies hat gerade die Site für uns erstellt , wobei alles aus der Vorlage verwendet wurde. Jetzt gehen wir rein und spielen damit herum. Also zuallererst der Titel der Seite. Ich nenne es Game Over. Bearbeiten Sie dann die Seiten. Hier erfahren Sie nur ein bisschen, wie es funktioniert. So erstellen Sie Seiten. Ich werde das alles jetzt durchgehen. Also fang an. Auch hier bekommst du ein paar zusätzliche kleine Hilfestellungen. Schließ das vorerst. Und dann, hier auf der rechten Seite. Das ist im Grunde deine Website. Das ist alles, was bereits für Sie erstellt wurde. Wenn du einfach auf den kleinen Pfeil hier drüben klickst , wird es im Vollbildmodus angezeigt. Und du kannst quasi durchblättern und einfach sehen, wie das Ganze funktioniert. Hier geht es offensichtlich um Seifen, was nichts mit dem zu tun hat, worüber wir sprechen wollen Aber wir werden es ändern, sodass es nur noch um Videospiele geht, und es wird viel heller und viel lauter sein Aber wie Sie sehen können, steht der Name meiner Website dort oben schon der Name meiner Website dort oben Also lass uns diesen schließen. Dann haben Sie hier auf der linken Seite das Menü, und hier können Sie alles auf Ihrer Website verwalten . Ich werde hier jetzt nicht alles für dich durchgehen , weil es hier viel gibt. Ich zeige dir nur schnell hier Seiten. Dies sind alle Seiten, die wir auf unserer Website haben, und dies sind nur Demos, die für uns erstellt wurden Wir haben also eine für das Geschäft, ein Journal über und einen Kontakt. Und dann ist das die Startseite. Und dann haben wir noch ein paar zusätzliche hier unten, Versand und Retouren und Fachhändler Das liegt daran, dass es ein Online-Shop ist, aber wir werden diese Dinge nicht brauchen Also werde ich sie einfach löschen. Und ich brauche keinen Shop, Va, also werde ich das löschen. Wie Sie hier sehen können, ist dies die Hauptnavigation, die sich in der Kopfzeile der Website befindet. Und hier unten sind das diejenigen, die nicht verlinkt sind. Also nicht in der Hauptnavigation. Aber wenn du sie hineinlegen willst, ziehe sie einfach nach oben. Und wie du siehst, ist Home jetzt da drin, aber ich will sowieso nicht , dass das da drin ist, also werde ich das wieder auf verlinkt setzen. Und das ist es eigentlich, was ich von meiner Website erwarte. Ich will ein Tagebuch. Ich möchte eine A-Seite und ich möchte eine Kontaktseite. Aber ich möchte das Wort Journal nicht verwenden, also werde ich das jetzt auf Blog ändern. Also fahre ich mit der Maus hierher und klicke auf das Einstellungssymbol. Ändere den Seitentitel in Blog. Navigationstitel zu Blog. Das wird in der Navigationsleiste angezeigt. Und der URL-Slug zum Bloggen oder so. Und stellen Sie sicher, dass die Seite aktiviert ist. Dieser ist bereits vorhanden, also klicken Sie auf Speichern. Wie Sie sehen können, ist die Demo von dort verschwunden , weil sie jetzt aktiviert ist. Lassen Sie uns einfach die anderen beiden aktivieren. Und wenn ich auf diese Seite komme, ist das automatisch erledigt, also schließe sie einfach und du wirst sehen, dass die Demo verschwunden ist. Das Gleiche hier und dasselbe hier auf der Homepage. Also sind jetzt alle Seiten live und alle heißen so, wie ich möchte, dass sie heißen. Also lass uns zurückgehen. 4. Globale Elemente: Okay. Jetzt fangen wir an, die Website zu bearbeiten, und um das zu tun, kommen wir hier auf die Schaltfläche Bearbeiten. Okay. Das erste, womit ich hier beginnen möchte, ist das Backend der Website. Das wird etwas sein, das an jeder Stelle auftauchen wird. Wir sprechen also über die Farben, die ich verwenden werde , und über die Schriftarten, die ich verwenden werde. Eine Sache, die bei Websites sehr wichtig ist, ist Konsistenz. Sie möchten also weiterhin dieselben Farben und Schriften auf der gesamten Website verwenden . Und quadratischer Raum ist großartig , weil Sie damit all das auf einmal einrichten können. Um Schriftfarben und andere Teile der Website zu bearbeiten, kommen Sie hier zu diesem Symbol für die Seitenstile. Wie Sie hier sehen werden, sind dies alles, was Sie bearbeiten können, Schriftarten, Farben , Animationen, Abstände usw. Fangen wir mit Farben Das ist also die Farbpalette, die dieser Website bereits zugewiesen wurde. Und die hier ausgewählten Farben passen zu dem, was hier verkauft wird , Seifenstücke. Auf dieser Website, die wir erstellen werden, dreht sich jedoch alles um Retro-Videospiele. Wir brauchen eine andere Farbpalette. Wir brauchen etwas , das leuchtende Farben aus den 80ern und 90ern repräsentiert . Also komm her, um die Palette zu bearbeiten. Und Sie werden sehen, dass es bereits viele Voreinstellungen von Square Space Wenn du auf der Website nach unten scrollst, wirst du sehen, wie die verschiedenen Farben reinkommen Wir haben also ein primäres Gelb und dann ein sekundäres Rot. Und weißt du, das sieht eigentlich ziemlich gut aus, aber ich will etwas anderes. Also werde ich reingehen und das bearbeiten. Diese beiden Enden der Palette sind perfekt, ein gerades Weiß und ein gerades Schwarz. Das sind die drei , die ich ändern möchte. Ich möchte gelb sein, aber ich möchte ein helleres Gelb. Also klicke ich auf das Gelbe. Dann kannst du hier mit verschiedenen Farben herumspielen. Wenn ich also ein Grün wählen möchte, verschiebe ich es dorthin. Aber was ich will, ist ein gelbes ich will ein wirklich helles. Also quasi auf halbem Weg zwischen Orange und Grün. Das ist schon ziemlich hell, aber Sie können hier oben mit den Farbstufen herumspielen , also können Sie dunkler oder heller Ich möchte superhell sein, also lass uns einfach in diese Ecke gehen. Da haben wir's. Das am Ende. Das ist perfekt. Ich liebe das Gelb. Das ist nett und hell. Die zweite Farbe, die sie verwenden, ist ein Orangerot, aber ich möchte ein echtes Rosa Ich möchte eine kräftige Magentafarbe. Ziehen wir das hier rüber in einen hellrosa Bereich, ein bisschen heller, glaube ich. Scrollen wir einfach nach unten, um zu sehen, wo das verwendet wird. Ah, da haben wir's. Ich liebe das. Ich liebe die Balance zwischen Gelb und Rosa. Das ist wirklich nett. Wirklich hell. Und dann nur noch eine Farbe , die ich ändern möchte. Das ist irgendwie dunkelrot, irgendwie kastanienbraun. Ich möchte, dass es ein bisschen blau ist, aber ein wirklich leuchtendes Blau Das wird auf der Seite noch nicht verwendet, aber ich finde, das sieht ziemlich hell aus. Vielleicht. Ja, da haben wir's. Ja, es ist sogar ein bisschen heller. Wir werden später sehen, wo das verwendet wird. Wenn wir reinkommen und es ändern wollen, können wir das jederzeit ändern. Das ist das Schöne daran. Jetzt sind wir also mit Farben fertig. Gehen wir wieder rein und schauen uns die Schriften an. Wenn Sie hierher kommen, werden Sie die globalen Textstile sehen . Wie Sie hier sehen können, erscheinen diese auf der gesamten Website. Wenn wir also die Überschriften ändern, wird das jede einzelne Überschrift auf der Website ändern Also diese wirklich großen hier und die etwas kleineren hier. Wenn ich drauf klicke. Sie werden sehen, wie viele verschiedene Optionen Sie hier haben. Sie haben also vier verschiedene Überschriftengrößen. Da diese die größte wäre, wäre das eine Überschrift. Und das wäre eine Überschrift zwei. Und die hier gewählte Schriftart, eine nette Serifenschrift, ist für die Soap-Website geeignet Nun, ich möchte etwas Lauteres, ein bisschen Helleres. Ich bin ein professioneller Grafikdesigner und habe die Idee, Schriften auszuwählen und zu wissen , welche ich verwenden soll. Nun, ich habe in meiner Karriere alle Erfahrungen damit gesammelt. Wenn Ihr Wissen über die Auswahl von Schriftarten nicht so gut ist, dann empfehle ich Ihnen dringend, auf diese Seite zu kommen. Dies ist eine von Google Fonts betriebene Seite, Sie erfahren, wie Sie den Typ am besten auswählen können. Der Link befindet sich unten im Abschnitt A. Scrollen Sie auf dieser Seite nach unten, bis Sie diese sehen, eine Checkliste für die Typauswahl Dies ist eine großartige Website, auf der Sie erfahren, wie Sie am besten verschiedene Schriftarten auswählen können, die auf Ihrem Branding und Ihrem Produkt basieren, für das Sie werben möchten Also komm her und lies alles gut durch. Wenn Sie Fragen zu Typografie und Schriftauswahl haben , mir einfach hier eine Nachricht, und ich werde mich so schnell wie möglich bei Ihnen melden Nun, für dieses Projekt möchte ich nur Sansa-Schriften verwenden, und ich habe zwei Möglichkeiten, die ich auf der gesamten Website verwenden möchte Der erste ist dieser namens Euros Style. Und der zweite ist dieser, der Interface genannt wird. In Square Space kannst du einfach alle Schriften dort durchgehen alle Schriften dort durchgehen und sie alle nacheinander ausprobieren. Finden Sie heraus, was für Sie funktioniert. Was ich Ihnen hier zeigen werde, ist, ob Sie bereits eine Wahl haben. Sie können sehen, ob das im quadratischen Raum verfügbar ist. Und beim ersten wollen wir ändern, wo wir uns bereits im Überschriftenbereich befinden. Lassen Sie uns also die Schriftfamilie ändern, die hier ausgewählt wurde, und ich möchte wirklich Eurostyle. Also werde ich darauf klicken Und es wird mir zeigen, welche Schriften gerade verwendet werden. Aber ich möchte keine von beiden, also werde ich alle Schriftarten durchsuchen. Ich kann nach Schriften suchen. Jetzt können Sie nicht immer alle Schriftarten verwenden. Möglicherweise finden Sie die Website einer anderen Person , die nicht auf Square Space verfügbar ist, und das kann auf lizenzrechtliche Gründe zurückzuführen sein. Wenn Sie jedoch eine andere Schriftart finden, die in einer anderen quadratischen Space-Vorlage verwendet wird , wird sie auf jeden Fall hier sein. Schreiben wir in Euro. Scrollen wir nach unten, wir haben Euro-Stil erweitert. Das ist der, den ich will. Ich kreuze einfach an, dass das schon viel besser ist. Sie können sehen, dass sich hier oben gerade ein paar Dinge geändert haben. Der Name der Website und auch diese riesige Überschrift hier drüben, Seife für alle. Lass uns einfach zurückgehen. Eins noch. Ich möchte, dass es ein bisschen stärker ist als das. Wenn Sie also auf dieses Gewicht klicken, ist das Gewicht natürlich umso größer, je größer die Zahl ist. Ich kann 500 gehen, oder ich kann 900 gehen. 900. Lass uns einen Blick darauf werfen. Das sind ein bisschen zwei, vier. Lass uns 500 gehen. Irgendwo in der Mitte der beiden. Ja, das ist nett. Dann Stil, normal. Das wäre, wenn es verschiedene Optionen gäbe, kursiv oder fett geschrieben, aber wir brauchen nur die normale Und dann kommen wir eine Sekunde darauf zurück, aber der Text Was ich eigentlich möchte, ist, dass sie alle in Großbuchstaben geschrieben sind. Da haben wir's. Das sieht sehr cool aus. Es ist ein bisschen lauter, ein bisschen stabiler . Seife für alle Wie Sie jedoch sehen können, ist die Schrift vielleicht ein bisschen zu groß. Lassen Sie uns einfach die Größe verringern. Das ist Überschrift eins. Das hier wählen wir aus und lassen es ein bisschen fallen. Sagen wir vielleicht 6,5. Ja, ich finde, das sieht gut aus. Dann noch eine Sache. Ich denke, hier ist einfach zu viel Platz zwischen den einzelnen Wörtern. Das ist die Zeilenhöhe. Lass uns einfach damit herumspielen. Dadurch wird die Zeilenhöhe für alle Versionen geändert , nicht nur für Überschrift eins, sondern auch für Überschrift zwei, Überschrift drei, Überschrift vier. Vielleicht runter auf eins oder vielleicht sogar Ja, nicht 0,9. Ich glaube, das gefällt mir. Buchstabenabstand, der eigentlich okay aussieht. Ich bin ziemlich zufrieden damit, du willst irgendwie eine ordentliche Menge Platz darauf haben. Wenn sich die Leute also die Website auf ihrem Desktop, auf dem Tisch oder auf ihrem Handy ansehen, wird sie immer lesbar sein. Aber lass uns einfach damit herumspielen. Okay. Ich belasse es bei 0,04. Und wenn wir das zu irgendeinem Zeitpunkt ändern wollen, wenn wir denken, dass es hier funktioniert, aber an anderer Stelle auf der Website nicht funktioniert, komm einfach zurück und ändere es Und wenn Sie es einmal ändern, wird es auf der gesamten Website geändert. Okay, also lass uns zurückgehen. Nun, was ich bearbeiten möchte, sind die Absätze. Das ist also der Haupttext , den Sie sehen können. Schauen wir uns also an, wo das verwendet wird. Diese Art von Schrift hier drüben. Lass uns auf Absätze klicken. Es ist eigentlich eine ziemlich nette Schrift, wie sie schon sind. Aber hier möchte ich meine andere gewählte Schriftschnittstelle verwenden . Browser-Schriftarten. Und dieses wurde Interface genannt, nicht wahr? Da haben wir's. Also habe ich mich dafür entschieden. Ich mag die San Serra sehr, ich denke , das ist ein bisschen besser für eine Website über Videospiele geeignet. Aber ihr könnt euch dafür aussuchen, was ihr wollt, und ich würde gerne sehen, was ihr auswählt. Also lasst uns einfach einen Schritt zurückgehen. Auch hier haben wir unterschiedliche Größen für Absatzschriften. Absatz eins, zwei und drei. Sie haben alle drei verschiedene Größen, Sie erhalten also die größeren und die kleineren. Ich denke, das ist momentan eine ziemlich gute Balance , was das Gewicht angeht . Ich denke, es ist ein bisschen hell, weil wir es auf einem sehr hellen Hintergrund verwenden. Also lass uns das ein bisschen schwerer machen, vielleicht wieder 400. Ja, das ist viel besser. Ich bin glücklich mit allem, was hier ist. Ich muss es nicht in Großbuchstaben schreiben. Das funktioniert für die Schlagzeilen , aber nicht für den kleineren Text. Lassen wir es also so wie es ist, mit keinem. Lass uns zurückgehen. Dann Knöpfe. Schauen wir uns an, wo wir Knöpfe haben. Hier ist ein Button. Wir haben hier oben einen großen. Gehen wir also zu den Knöpfen über. Und die Familie dafür? Nun, ich denke, es muss wieder Eurostyle geben. Das ist großartig, weil es mir jetzt sagt, welche Schriftarten auf der gesamten Website verwendet werden Also werde ich es wieder finden müssen. Lassen Sie uns das auf Eurostyle Extended ändern. Ja, ich liebe das Das sieht echt cool aus. Lass uns zurückgehen. Wir haben hier drei verschiedene Arten von Knöpfen, und sie haben alle unterschiedliche Größen, wie Sie sehen können. Sie haben alle das gleiche Gewicht, und ich glaube, 500, das ist eigentlich ganz gut für das, was wir hier haben. Aber auch hier können wir wieder reinkommen und das später ändern , wenn du willst. Und stellen Sie einfach sicher, dass Sie alle drei auf dieselbe Schriftart einstellen . Dann ist der letzte Verschiedenes. Dann schauen wir mal, was wir hier haben. Das ist quasi eine zusätzliche Akzentschrift , die nicht auf der gesamten Website verwendet werden würde, , die nicht auf der gesamten Website verwendet werden würde, aber vielleicht möchten Sie sie als hervorgehobenes Element verwenden , um etwas wirklich hervorzuheben und etwas wirklich cool aussehen zu lassen. Hier können Sie also ein bisschen kreativer sein . Also lass uns hierher zur Familie kommen. Und durchstöbere noch einmal alle Schriften. Jetzt möchte ich etwas, das wirklich wie acht Bit aussieht, als käme es aus den 80ern oder so. Wenn wir Arcade-Automaten machen, schauen wir mal, was wir haben, das den Arcade-Regeln entspricht. Die sehen alle echt cool und echt schrullig aus. So wie dieser, wo es halb weiß und halb schwarz Also lass uns einfach den wählen. Nun, das wird noch nirgends benutzt. Aber ich zeige dir in der Kopfzeile hier oben , wie cool das aussehen kann. Also lass uns zurückgehen. Gewicht und Größe sind vorerst absolut okay , zurück zum Sitzen. Animationen. Sie werden hier eine nette Liste von Animationen sehen. Und das ist die Art und Weise , wie verschiedene Teile Ihrer Website geladen werden wenn ein Benutzer die Website zum ersten Mal besucht. Im Moment haben wir es so eingestellt, dass es verblasst. Schauen wir uns an, wie die Skala aussieht. Okay, das ist ziemlich cool. Sie können den Header oben sehen, das Logo dort. Das skaliert irgendwie. Rutsche. Falls es irgendwie herunterfällt, Clip. Das ist cool und flexibel. Aber weißt du, ich glaube, ich mag Clip. Bleiben wir vorerst bei dem und dann schnell. Langsam, mittel, schnell. Ich glaube, ich bleibe bei Slow. Ja, das gefällt mir. Nochmals, spiel einfach mit dem herum, was deiner Meinung nach hier funktioniert. Wenn du den Flex magst, ist es ein bisschen verrückt, aber ja, das ist ziemlich cool. Wähle den Flex. Ich entscheide mich nur für Clip. Dann Abstand. Das hat also mit der gesamten Breite der gesamten Seite zu tun. Und das ist die volle Breite , die eine Website haben kann. Und dann Seitenrand. Das ist die Lücke an der Seite der Website hier. Und im Moment ist es auf zwei, wenn ich es auf Null reduziere, wirst du sehen, dass alles bis zum Rand geht. Und es sieht irgendwie cool aus. Aber kleine Dinge wie diese sind zu nah am Rand. Sie alle brauchen ein bisschen Atempause. Also, weißt du was? Also ich glaube, ich behalte die beiden. Mal sehen, wie die Drei aussieht. In Ordnung, vielleicht drei Ich denke, das gibt hier nur ein bisschen mehr Luft zum Atmen. Und dann Knöpfe. Wir haben uns das schon angesehen. Und wie Sie hier sehen können, ist das nur eine andere Art, durch die drei verschiedenen zu kommen , aber es geht schon darum, unsere Schrift zu wählen, und die Form, die wir wollen, ist Pille. Sie können etwas anderes wählen. Du kannst einen quadratischen haben. Sie werden sehen, dass es sich zu einer quadratischen oder einer sehr runden Variante ändert . Dieser mit den gekrümmten Kanten. Ich mag den P-One irgendwie. Aber spielen Sie hier selbst ein bisschen herum und sehen Sie, was für Sie am besten funktioniert. Gliederung. Nun, das wäre nur eine größere Grenze draußen. Eigentlich ja. Ich finde, es sieht cool aus, das etwas stärker zu haben, vielleicht vier. Okay. Zurück zu den Seitenstilen. Bildblöcke. Schau, darüber musst du dir hier keine Gedanken machen. Sie können gerne damit herumspielen, aber das sind nur verschiedene Möglichkeiten Bilder auf Ihre Website einzufügen. Sie können es als Poster verwenden, so wie Sie Text über einem Bild haben. Aber wir werden uns die jetzt nicht ansehen. können sich aber gerne selbst umschauen. Okay. 5. Deine Website-Kopfzeile: Als Nächstes spiele ich mit diesem Header-Bereich herum. Und das erste, was ich da ändern möchte , ist die Schriftart. Klicken wir also zurück auf die Schriften. Dies ist eine andere Möglichkeit, auf verschiedene Elemente zuzugreifen. Sie müssen hier nicht durch das Menü gehen. Sie klicken auf das Teil, das Sie bearbeiten möchten. Das kannst du bearbeiten. Fangen wir also damit an. Das Logo, der Haupt-Header der Website. Wie Sie hier sehen können, wird das als Site-Titel bezeichnet. Das nimmt die Überschriftenschrift. Wenn Sie hierher kommen, können Sie es in eine benutzerdefinierte Schriftart ändern. Wenn Sie dies ändern, ändert es buchstäblich nur diese hier oben, nicht in die allgemeine Überschriftenschrift. Also lass uns zur Familie gehen. Und weißt du was, hier möchte ich Puffin Arcade benutzen. Mal sehen, wie das aussieht. Oh ja, das liebe ich. Das sieht echt cool aus. Als Logo war ein Haupt-Header für die gesamte Website. Es ist ein bisschen kleiner. Lass uns einfach zurückgehen und lass uns mit der Größe herumspielen. Ich will es ziemlich groß. Dann nur eine Kleinigkeit. Die Buchstaben sind ein bisschen zu nahe beieinander, also ziehen wir das einfach ein wenig heraus. Ja, das sieht gut aus. Okay, das ist echt cool. Das kommt wirklich voran. Jetzt klicken wir hier auf das hier. Das ist unsere Nav-Bar. Wie Sie sehen können, verwendet es tatsächlich immer noch die alte Schriftart , die da drin war. Lass uns hier reingehen und das bearbeiten. Ich denke, der Euro-Stil erweitert wird hier drin cool aussehen. Ja, das sieht echt cool aus. Aber weißt du was, ich will das wirklich mutig. Was war der größte , den wir hier hatten? 900. Ja, das liebe ich. Nett und hell und schreien T. Dann mobile Seitentitel. Denken Sie daran, wenn Sie sehen möchten, wie etwas auf dem Desktop und auf dem Handy aussieht, wird es etwas anders sein weil man porträtiert ist, eines ist Landschaft. Normalerweise bearbeiten Sie Ihre Website in der Desktop-Version. Wenn Sie jedoch jemals sehen möchten, wie es in der mobilen Version ist, klicken Sie auf diese Version und es wird sich dazu ändern. Jetzt können wir sehen, wie alle Farben funktionieren, alle Schriftarten funktionieren, die Schaltflächen und so. Dieser hier oben, während das immer noch in der alten Version ist, oder? Wenn ich also auf diesen Titel der mobilen Website klicke, ist er immer noch als Überschrift. Also lass uns hier rein gehen. Und lass uns wieder Kostüm machen und einfach machen was wir gerade für die Desktop-Version gemacht haben. Lasst uns es also in Puffin-Arcade ändern. Geh zurück. Und was habe ich dann gesagt? Ich habe diesen auf 0 gesetzt, habe ich dort nicht 0 eingegeben? Das ist perfekt. Zeilenhöhe. Nun, sagen wir einfach, weil jetzt übereinander gesessen ist, weil das Handy offensichtlich viel kleiner ist. Lass uns das fit machen. Da sind wir los. Dann die Größe davon. Sagen wir einfach, ich will es ziemlich alt. Vielleicht 3.5. Und das ist großartig. Okay, lass uns zurückgehen. Jetzt , da wir hier drin fertig sind, klicken wir auf Schließen und schauen wir uns dann noch einmal die Kopfzeile an. Also komme ich aus der Mobilversion heraus. Werfen wir einen Blick auf die Desktop-Ansicht. Dann klicken wir auf diesen Abschnitt. Wie Sie hier sehen können, können wir den Site-Header bearbeiten. Ich sehe oben, dass du drei verschiedene Möglichkeiten hast. Der erste ist global, also passiert das auf allen Geräten. Wenn Sie auf diese klicken, wird dies auf der Desktop-Version passieren, und dies wird auf der mobilen Version passieren. Lasst uns mit global fixiert gehen. Also zuerst Site-Titel und Logo. Nun, wir haben bereits ein Logo, das wir selbst mit Schriftarten erstellt haben. Das ist eine sehr einfache Möglichkeit, dies zu tun. Aber wenn Sie bereits Ihr eigenes visuelles Logo haben haben Sie hier drin als Bild erstellt. Elemente. Das ist also alles, was wir hier oben sehen können. Zuallererst, Button, möchte ich einen Button hier drin, weil ich zur Kontaktseite gehen wollte zur Kontaktseite gehen , anstatt zu sagen, dass ich loslegen , anstatt zu sagen, dass ich loslegen möchte. das soll gehen. Nun, das könnte auf jede andere Website gehen, aber ich möchte, dass es auf eine der Seiten auf unserer Website geht . Also klicken wir auf das Zahnrad. Dann können Sie dazu führen, dass es an eine E-Mail-Adresse geht, eine Webadresse zu einer anderen Datei. Wir möchten, dass es auf eine andere Seite unserer Website geht . Klicken Sie also auf Seite. Ich möchte, dass dies zur Kontaktseite geht. Wenn ich buchstäblich auf dieses kleine Dropdown-Menü aller Seiten klicke , die ich zwei habe, wählen wir einfach Kontakt. Ein neues Fenster öffnen. Tun Sie das, wenn es sich um eine andere Website handelt, aber wenn es sich auf Ihrer eigenen Website befindet, lassen Sie diese aus. Klicken Sie auf Speichern. Als nächstes soziale Links. Ja, ich möchte, dass ihre Benutzer auf diese Schaltfläche klicken. Es wird sie zu unserer Instagram-Seite führen. Wenn wir hier reingehen, bearbeite soziale Links. Sie können hier zusätzliche hinzufügen. Du kannst auf Facebook oder Twitter oder was immer du willst hinzufügen. Ich möchte einfach nur Instagram im Moment geht es bis zum Squarespace One. Lass es uns zur GameOver-Seite schicken. Spar dir das auf. Dann lasst uns ein bisschen kleiner Konkurrent, wenn dann sonst sagt, mach das ein bisschen größer, oder? Ja, sie streiten sich. Das sieht gut aus. Sprachwechsel. Mach dir keine Sorgen um diesen einen Teil. Das können Sie hier sehen, und genau das haben Sie, wenn Sie eine Verkaufswebsite haben, aber wir hatten keine davon, also schalten wir diese aus. Da sind wir los. Das sieht perfekt aus. Jetzt. Lass uns zurückgehen. Jetzt Stil, das ist Morgan, viel Spaß. Was wir hier haben, sind verschiedene Stilentscheidungen. Wir haben ein solides Verlaufsthema, dynamisches, solides Farbverlaufsthema, dynamisch. Nun, ich habe all die, sie funktionieren alle. Aber was ich gesehen habe, als ich auf das Thema geklickt habe, war das alles hier. Dies sind alle Farben, die wir bereits für die gesamte Website ausgewählt haben. Ein Spiel mit verschiedenen Levels von ihnen, um diejenige auszuwählen, von der ich denke, dass es cool aussehen wird. Ich hab all das. Nun, ich mochte die Art und Weise, wie wir angefangen im ersten Teil der Helden-Sektion leuchtende Farben bekommen haben. Also will ich eigentlich einen der leichten. Und dieser, es ist schwarz, ist ein bisschen Flugzeug. Also lass uns mit dem rosa gehen. Ja, das gefällt mir sehr. Ich mag es, dass unser Hauptwebsite-Logo in leuchtendem Rosa ist und dann auf den Touch-Button geht. Das ist also echt cool. Also bleibe ich dabei. Dann der nächste hier, feste Position. Das bedeutet nur, dass der Header in einer bestimmten Position bleibt , während die Leute durch Ihre Homepage und andere Seiten der Website scrollen ? Nun, nicht dabei zu bleiben, weil es den Menschen hilft, auf der gesamten Website zu navigieren. Sie haben hier zwei verschiedene Möglichkeiten. Einer ist der Grundlegende, bei dem es ständig dort bleiben wird. Willst du zurück scrollen. Wenn Sie also nach unten scrollen, verschwindet es. Wenn Sie wieder nach oben scrollen, kommt es wieder rein. Es ist Anita, eine coole Art den Benutzern zusätzliche Navigation zu ermöglichen. Also lasst uns wählen, da zurück scrollen, oder? Okay, also das ist alles die globalen Einstellungen eingerichtet. Mal sehen, was wir für das Header-Layout der Desktop-Version bekommen haben . Also habe ich diese Option hier und es wird jedes dieser Elemente bewegen. Du würdest ein wenig damit herumspielen und sehen, welches für dich am besten funktioniert. Fairerweise glaube ich, dass es mir gefallen hat, wie es ursprünglich mit dem Icon hier war , dem Button dort. Und dann sind diese beiden Teile zentralisiert. Ich denke, das ist nur eine gute Balance von allem und hat auf beiden Seiten viel weiße Atempause. Ich bleibe dabei. Dann mach dir keine Sorgen um die Breite. Wir halten das so voll. Vertikale Polsterung Nun, das ist die Menge an Platz, die es oben und unten einnimmt, es ist ein bisschen groß. Machen wir das ein bisschen kleiner. Vielleicht zwei Elemente mit Abstand, naja, das ist irgendwie der Abstand zwischen diesen beiden Dingen hier. Lassen Sie uns das so tief wie möglich fallen. Ja, das ist ziemlich gut. Ich denke, ich brauche einfach ein bisschen mehr Platz an der Spitze. Gehen wir zu 2.2. Verknüpfter Abstand. Nun , das ist der Space dazwischen Blog über Kontakt, alle Teile in unserer Navigationsleiste. O. Bring das auf drei, glaube ich. Ja, das ist cool. Und dann mobile Version. Wie sieht das aus? Wie funktioniert das für dich? Wir haben hier einige verschiedene Möglichkeiten. Zuallererst das Header-Layout. Also können wir wieder ein Logo auf der linken Seite haben, Hamburgermenü auf der rechten Seite oder verschiedene Optionen wählen. Ich mag dieses, weil das Logo zentralisiert ist und dann das Hamburgermenü auf der linken Seite ist. Ich denke jedoch, dass der Text dort nur ein bisschen zu groß ist. Ich wollte auf einer einzigen Zeile genauso laufen wie auf dem Desktop. Also behalte ich es so wie es ist. Und dann gehen wir zurück und bearbeiten die Schriftart erneut. Verschiedene Optionen für Ihr Hamburgermenü. Etwas wie das Plus , um ehrlich zu sein. Ich denke, das repräsentiert Arcade-Maschinen der alten Schule. Wir können die Dicke dieser Linie ändern. Klein, mittel, groß, ich denke riecht gut, nett und subtil. Dann ist die nächste Option hier das Overlay-Menü, und so sieht das aus. Dies ist, wenn jemand auf das Plus klickt, wird dies angezeigt. Wenn ich zurückgehe, bringt es uns zurück zum anderen. Overlay läuft so. Das ist wirklich cool , wie es zum Gelb wechselt , wobei das Schwarz drauf drauf ist. Das gefällt mir. Sie haben hier die Haupt-Navigationsleiste, Instagram-Symbol-Button, aber ich möchte , dass sie zentral ist, um ehrlich zu sein. Ja, da sind wir. Das ist viel ordentlicher. Farben. Spielen Sie wieder mit allem herum, was wir hier haben. Sehen Sie, welches für Sie am besten geeignet ist, wenn Sie möchten, dass das helle Rosa dazu passt . Aber ich mochte das Gelb. Lassen Sie es uns dabei behalten. Jetzt sind wir damit fertig. Klicken wir einfach auf Speichern. Und dann bearbeite noch einmal. Lass es uns wieder auf Handy umstellen. Und klicken Sie dann erneut auf Site-Styles. Es gibt zwei Schriftarten. Klicken Sie auf den Titel der mobilen Website und lassen Sie uns dies etwas verkleinern. Es sitzt also in einer einzigen Zeile. Ich denke 2.5, und das ist nett. Es ist da, es ist hell, aber es ist immer noch klein und subtil. Also das ist alles erledigt. Lasst uns das aufheben. Mal sehen, wie das alles funktioniert. Ja, das liebe ich. Das liebe ich. Ich fahre mit dem Mauszeiger über diesen Knopf und er wird rosa. Und auf dem Desktop. Auch sehr cool. Jetzt können wir mit der Gestaltung der gesamten Homepage fortfahren. 6. Webdesign: Homepage A: Jetzt fangen wir an, alle unsere Seiten zu bearbeiten. Im Seiten-Bereich hier drüben haben wir vier Seiten. Am besten ist die Homepage , die bereits auf der Seite war. Was ich auf dieser Homepage will, ist etwas, das ganz einfach und ganz einfach ist und den Leuten sagt, wer wir sind, worum es uns geht und was wir ihnen anbieten können. Was ich will, ist ein Abschnitt für den Blog, ein Abschnitt für den Abschnitt About für den Kontakt. Vielleicht ein paar kleine zusätzliche Bilder da drin , um zu zeigen, wie cool und skurril sind. Also fangen wir hier mit diesem Abschnitt an. Und das heißt der Held ist immer der erste Teil, den jeder Benutzer sieht, wenn er zum ersten Mal auf Ihre Website kommt, sei es auf dem Desktop oder auf dem Handy. Also lasst uns diese Seite bearbeiten. Und Sie können sehen, welche Elemente bereits von Squarespace hinzugefügt wurden. In der Vorlage haben wir einen ganzen Abschnitt, alles bis zu dieser blauen Linie. Dies ist insgesamt in einem Abschnitt. Das bedeutet, dass wir den Hintergrund dieses Abschnitts ändern können und es wird alles auf die blaue Linie ändern. Fangen wir damit an. Durch den Mauszeiger hierher. Es erlaubt mir, den Abschnitt zu bearbeiten. Wir können hier mit verschiedenen Größen herumspielen, die Schnitthöhe ist minimal, es ist zehn, aber wir können sie größer machen, wenn Sie klein, mittel und groß sind. Das ist der Speicherplatz dazwischen was Sie hier oben sehen können. Das ist der Held. Ich möchte, dass das ziemlich niedrig bleibt. Also eins, lass uns einfach um zehn bleiben. Fakt, wie Sie sehen können, gibt es hier oben einen zusätzlichen kleinen Abstandhalter. Das möchte ich ausschalten. Wenn Sie es also herausnehmen möchten, Mauszeiger über das Bild und Sie sehen, dass das Rot entfernt wurde. Okay, das bevorzuge ich jetzt, jetzt haben wir den gleichen Platz rechts und über dem Bild. Ich denke jedoch, dass ich die Hintergrundfarbe ändern möchte. Also klicken wir hier und gehen in den Hintergrund. Jetzt kannst du hier ein paar verschiedene Dinge machen. Sie können ein Hintergrundbild einfügen, Sie könnten ein Hintergrundvideo oder Hintergrundkunst erstellen. zeig ich dir bald. Aber was wir eigentlich tun wollen, ist es in eine Farbe zu ändern. Also klicken wir auf Farben. Und hier können wir mit den verschiedenen Farben schon in unserer Farbpalette herumspielen . Und weißt du, was ich dafür will? Ich will das hellrosa. Ich denke, das ist eine schöne Balance vom Logo und dem Button in diesen ersten Abschnitt, lass uns mit dem Pink gehen. Wenn du damit fertig bist, klicke einfach irgendwo anders weg von diesem kleinen Fenster. Was ich hier machen möchte, ist diesen kleinen Abschnitt zu ändern oder dies ist ein Bildbereich , in diesen kleinen Abschnitt zu ändern oder dies ist dem bereits Texte auf dem linken Untertitel und der Schaltfläche unten eingerichtet sind. Wenn Sie den Stil ändern möchten. Klicken Sie auf diesen Abschnitt , in dem Bild steht, und klicken Sie auf den Stift. Was Sie hier tun können, ist mit dem Design herumzuspielen. Im Moment haben wir also eine Kartenoption. Sie können Poster gehen, wie gesagt , dann befindet sich der Text oben auf dem Bild. Überlappung. Und eine Kolumne , die etwas chaotisch genannt wird. Dinge wie Stack, wo es oben auf den Texten steht, die etwas zu hoch sind. Mir gefällt irgendwie, was wir vorher hatten , um ehrlich zu sein, welches eine Karte hat. Ich kann herumspielen. Ich könnte das Bild links oder das Bild rechts platzieren. Ich glaube, ich bin wie auf der rechten Seite. Bleiben wir einfach bei dem , was wir da haben. Ich möchte, dass du damit herumspielst und etwas anderes machst als das, was ich hier gemacht habe. Gib ihm bitte deinen eigenen Stil. Also gehen wir zurück zum Inhalt. Was wir hier haben sind die anderen Elemente, die hier erscheinen. Die Hauptsache, die wir haben, ist ein Knopf. Und wir werden sagen, dass dies auf eine andere Seite verlinken wird . Ich möchte, dass es auf die About-Seite geht. Nennen wir es einfach Über uns. Im Moment heißt es , dass das einkaufen wird. Diese Seite existiert nicht mehr. Also klicken wir auf das Zahnrad. Gehen wir erneut zur Seite, löschen diese und wählen dann „Speichern“. Dann der Titel hier oben. Nun, Seife für alle , die für die Soap-Website arbeiten. Also ändere ich das in Retro-Spiele. Und dann ist der Zeitraum, den ich abdeckt, 85 bis 95. Ja, das war großartig. Das funktioniert sehr gut mit dem weißen Text oben auf dem rosa Hintergrund. Das Einzige ist, ich denke, dass es für diesen ein bisschen leicht ist. Machen wir es einfach mutig. Und es wird alle Texte dort hervorheben und den Ball drücken war ja, los. Ja, das war perfekt. Das liebe ich. Untertitel. Nun, ich möchte hier auch etwas sagen , das aus der Überschrift folgt. Ich möchte sagen, was wir auf dieser Website machen. Also wöchentliche Blogs über die besten Videospiele von 1985 bis 1995. Da sind wir los. Dann noch eine Sache, die geändert werden muss, offensichtlich das Bild, weil es um Seife geht. Was im Inhaltsbereich Klicken Sie im Inhaltsbereich auf Ersetzen und wählen Sie Datei hochladen aus. Sie können nach Stockbildern suchen, wenn Sie möchten. Aber ich habe bereits mein Bild für dieses Bild eingerichtet, also klicke ich auf die Datei hochladen. Also hier ist mein ganzes Spiel über Picks. Ich habe diese bereits in Photoshop bearbeitet. Sie möchten ein bisschen mehr über Bearbeiten von Bildern für die Verwendung im Internet erfahren. Oder geh in den Abschnitt „About“. Schau mal nach meinem Gesicht. Klicken Sie darauf. Das wird meine ganze Skillshare-Seite aufrufen. Wenn du nach unten scrollst, siehst du alle anderen Lektionen, die ich dort habe. Und sie haben einen für das Hochladen von Bildern. So optimieren Sie Ihre Fotos, damit Ihre Website schön und schnell läuft. Achten Sie darauf, dass Sie sich das ansehen, um eine bessere Vorstellung davon zu bekommen , wie Bildgrößen im Internet funktionieren müssen. Ich habe die Größe all dies bereits geändert. Ich wähle das aus, Space Invaders bei Retro-Arcade. Und ja, los geht's. Das liebe ich. Wie Sie sehen können, nimmt der Heldenbereich eine ganze Seite ein. So kann der Benutzer auf einmal sehen, wer wir sind, worum es uns geht und er möchte mehr über uns erfahren. Sie klicken auf diesen Button. Sie können sehen, wie das auf dem Handy aussieht. Handys wirklich gut wird mit dem Text unten nach oben verschoben. Wenn Sie sich öffnen und Ihr Mobiltelefon machen würden, ist das eine nette Einführung , wer wir sind und was wir tun. Arbeite an deinem eigenen Heldenbereich und folge entweder genau dem , was ich hier gemacht habe. Wir geben ihm Ihren persönlichen Stil und machen es hier noch klarer. Okay, jetzt möchte ich nach unten scrollen und am nächsten Abschnitt arbeiten. Hier werde ich alle unsere neuesten Blogbeiträge hervorheben . Jetzt ist der Hintergrund hier gelb. Ich glaube, dass es mir gefällt, gelb zu sein. Ich mag es, wie es irgendwie von Weiß oben nach Rosa bis Gelb rollt . Dieser Titel spricht über Lieblingsseifen. Was wir nicht wollen, dass wir über Videospiele sprechen wollen . Also füge ich diesen Header einfach ein. Sie können wählen, ob Sie es links ausgerichtet, zentralisiert, rechts ausgerichtet haben möchten , ich denke hier zentralisiert, weil es auf den neuesten Beiträgen sitzen wird . Denke nicht, dass wir diesen Raum von ihnen brauchen . Das kann ich löschen. Wenn du eigentlich nur mit der Höhe des Abstandhalters herumspielen willst , kannst du hier einfach mit dem herumspielen. Mach es kleiner, mach es größer. Aber ich glaube einfach nicht, dass wir es brauchen. Also lösche das. Ich denke, das sieht in der schwarzen Schrift cool aus. Aber ich werde sehen, ob ich hier einfach mit der Farbe des Ganzen rumspielen kann . Was es im Moment los ist, ist leicht. Ich glaube ich will Licht bis Ja. Wo es mir den rosa Header oben auf dem Gelben geben wird. Ich denke, das sieht echt cool aus. In Bezug auf das Format. Nun, ich denke, wir brauchten hier nur ein bisschen mehr Luft zum Atmen. Ich denke, es geht einfach zu schnell in diese Schlagzeile. Also lasst es uns einfach machen, anpassen und etwas höher machen. Vielleicht sagen wir 40. Ja, und das ist ein bisschen mehr Platz zum Atmen. Nun, was wir hier haben, nun, das sind nur Bilder mit Text. Wir lassen unsere Blogs da rein. Und dann dieser Knopf drauf, um zu allen Blogs durchzukommen. Also lasst uns einfach den Text hier oder Blogs bearbeiten. Dann mach, ich gehe zur Blog-Seite durch. Sparen. Okay, also was wir hier oben haben, möchte ich diese löschen und ich möchte einen ganz neuen Abschnitt hinzufügen. Also lasst uns löschen, löschen. Löschen. Sie können mit jedem sehen, dass es irgendwie in voller Breite geht, was sowieso zu groß sein wird. Aber was ich tun möchte, ist eine Zusammenfassung aller unserer neuesten Blöcke in Squarespace hinzuzufügen , sehr benutzerfreundlich. Wenn Sie etwas Neues hinzufügen möchten, klicken Sie einfach auf das Plus , wo es sein soll. Also können wir etwas unter etwas hinausgehen. Also möchte ich, dass es hier unter dem Titel ist. Also klicke ich auf das Plus. Und diese zeigen Ihnen all die verschiedenen Optionen , die Sie hier einwerfen können . Sie haben dieses sehr coole Scroll-Block-Ding. Sie können einfach Text, Bild, Button, Video einfügen, all dies durchschauen mit ihnen herumspielen. Sehen Sie, was Sie für Ihre eigene Website tun können , die wirklich für Sie funktionieren wird. Aber was ich hier einbringen möchte, ist eine Zusammenfassung, das ist eine Zusammenfassung der neuesten Blogs. Das wird vorbeikommen und das sieht noch nicht cool aus. Aber wenn wir eine Seite auswählen, wähle ich die Blogseite aus. Da sind wir los. Das hat sich nun in die drei Blogs geändert, die bereits von Squarespace eingetragen wurden. Offensichtlich geht es wieder um Seife und DIY-Händedesinfektionsmittel, nicht worüber wir schreiben wollen, aber Sie können hier mit der Anzeige von allem herumspielen . Also lass uns zurückgehen. Jetzt sprechen wir über das Datum der primären Metadaten, die veröffentlicht wurden. Ich möchte nicht, dass das erscheint , dass du das einfach ausschalten kannst , damit du nichts da hast. Nun, du kannst etwas anderes wählen. Ich wähle eine Kategorie, die dir im Moment nichts zeigt, aber ich zeige dir, wie das später funktionieren wird. Sekundäre Metadaten. Nun, man kann sagen, wer der Autor ist, wer den Beitrag geschrieben hat. Wenn Sie feststellen möchten, wie viele Kommentare enthalten sind, was auch immer für Sie relevant ist. Aber ich glaube, ich will nur eins hier drin. Ich will die Kategorie. Spielen Sie selbst damit herum und sehen Sie, was funktioniert. Jetzt entwerfen. Auch hier haben wir ein paar verschiedene Möglichkeiten. Karussell. Das ist irgendwie nett. Liste. Das ist ein bisschen chaotisch. Und Grid. Das ist ziemlich cool. Aber ich glaube, ich mag das Karussell. Ich mag hier die Art und Weise, wie man mehr als drei Gegenstände haben kann und Leute durchblättern können. Lassen Sie uns das einfach in weitere Elemente ändern und Sie können es auf dem Bildschirm sehen. Also lasst es uns zu gut ändern, alle unsere Beiträge. Also ändern wir es auf 30. Wie Sie hier sehen können, haben wir jetzt diesen kleinen Pfeil. Sie können also zwischen dem neuesten, postältesten Seitenverhältnis hin und her gehen . Lass uns ein quadratisches Bild machen. Das sieht cool aus. Man sieht ein bisschen mehr Texte, klein, mittel, groß, vielleicht groß. Dann Ausrichtung. Ich glaube, ich zentralisiere dort gerne. Stört mich ist dieses kleine Ding oben , das vorgestellter Kopfzeilentext steht. Mal sehen, ob ich das lösche. Ja, das ist weg. Das einzige , was da sein muss. Dann werden die Elemente, das werden wir sehen. Also sehen wir einen Titel, ein vorgestelltes Bild, ausüben, mehr lesen Link. Das ist ziemlich cool. Die Leute wissen, dass sie darauf klicken müssen. Es wird bis zur Post führen. Hier haben wir uns für die Kategorie entschieden. kannst du unter dem Inhalt haben. Ich wähle den obigen Titel aus. Was hier passieren wird die verschiedenen Kategorien, die wir für unsere Blogs verwenden. Es werden also Kategorien wie die 1980er, 1990er Jahre sein, vielleicht Nintendo, Sega, Arcade, so etwas. So wissen die Leute auf den ersten Blick genau, was für ein Beitrag das ist, welche Art von Spiel es geht , von welchen Fehlern es geht. Aber wir müssen diese hinzufügen. Also machen wir das etwas später wenn wir an der Blogseite arbeiten. Okay, also sieht das wirklich echt cool aus. Nun, nur was mich wieder stört, dieser kleine Raum hier, ich glaube nicht, dass wir das herausnehmen müssen. Ja, ich denke, ich mag es einfach so, wie es direkt in alle Blogs von unten geht , ich werde in beiden Fällen auch das alles zentralisiert. Das Einzige ist, dass ich nicht alles auf einmal sehen kann. Es ist also ein bisschen zu groß. Ich kann die Bilder hier verkleinern, aber ich denke, ich möchte die Breite der Seite ändern. Gehen wir also noch einmal zum Abschnitt bearbeiten. Also bearbeite ich hier kein einziges Element. Ich bearbeite die ganze Seite. Wenn du das willst, klicke einfach von irgendwelchen Elementen weg. Also dieses leere Feld mit der rechten Maustaste auf diesen Abschnitt klicken. Die Inhaltsbreite ist im Moment groß, also füllt sie die ganze Seite aus. Lasst es uns in Medien umstellen. Ja, das sieht ziemlich cool aus. Das gefällt mir. Ich kann mit Inhaltsausrichtung nach links herumspielen, nach rechts stellen, aber offensichtlich wird zentralisiert viel besser sein. Dann passt fast alles. Ich denke, nur einige der Schriften sind hier ein bisschen zu groß. Also lasst uns noch einmal zum Header gehen. Es geht im Moment darauf, wenn wir das in eine Überschrift drei ändern, ja, das ist viel besser. Es ist jetzt nur ein bisschen subtiler. Dann vielleicht die Schriftgrößen in der Zusammenfassung. Lasst uns das bearbeiten. wählen wir dafür? Vielleicht habe ich mich für zu groß entschieden. Wir hatten große Medien als so. Da sind wir los. Was Sie sehen können, ist die perfekte Anzeige auf einer Website-Seite. Was Sie für jeden Abschnitt möchten, ist, alles auf einmal sehen zu können . So lesen die Leute, worum es geht. Also lass uns den Titel sehen. Sie können die neuesten Beiträge hier sehen. Sie können dies durchblättern und ändern , welche Blogs hier erscheinen. Oder sie können auf diese Schaltfläche klicken und zur gesamten Log-Seite gehen . Vielleicht noch eine Sache. Das ist ein bisschen zu groß im Vergleich zu allem anderen. Was ich jetzt machen möchte, ist auf eine kleinere Größe umzusteigen. Im Moment ist also der primäre. Sehen Sie, welche Sekundärgruppe noch größer ist. Ja, los geht's. Viel subtiler jetzt, ich denke, es funktioniert gut, den Großen hier oben zu haben. Kleinere Überschrift, kleinerer Text hier und dann alle Blogs, lieben es, das ist perfekt. Nun, eine Sache, die immer sicher zu beachten ist hätte dies auch nach dem ersten Abschnitt tun sollen. Klicken Sie immer hier hoch und klicken Sie auf Speichern. bedeutet nur, dass alles, woran wir arbeiten, jetzt gerettet ist. Wenn also unser Computer abstürzt oder so, verlieren wir nicht alles, woran wir gearbeitet haben. Stellen Sie also sicher, dass Sie immer darauf klicken , während Sie durchlaufen. Die andere Option, die Sie hier haben, sagen wir, ich habe hier etwas geschrieben. Die beste Website der Welt. Nun, das will ich nicht sagen. Es war ein bisschen arrogant. Was ich hier tun kann, ist, dass ich rückgängig machen und den Fußdrücken rückgängig machen kann . Es nimmt die Texte heraus, die ich gerade eingelegt habe , und dann ist es weg. Aber wenn ich etwas rausgeholt habe und das vielleicht wieder zurückbringen möchte, drücke dieses einfach ein paar Mal und es wird alles wiederholen, was wir gerade getan haben. Obwohl es wahrscheinlich die beste Website der Welt ist, werde ich sie herausnehmen. Da sind wir los. 7. Webdesign: Homepage B: Jetzt können Sie sich ansehen, was bereits hier ist , und Sie können mit den Sektionen herumspielen , die für Sie eingerichtet wurden. Und du kannst reingehen und alles bearbeiten. Also haben wir hier etwas Text, etwas mehr Text als in diesem, nur ein paar Bilder und es ist alles Raster. Aber wenn es nicht wirklich für Sie funktioniert, dann achten Sie einfach darauf, dass Sie auf den Abschnitt klicken und den gesamten Abschnitt löschen. Das heißt, es wird nicht mehr da sein. Kann einen Fehler machen. Zögern Sie nicht rückgängig zu machen oder zu wiederholen, wenn Sie es nicht möchten. Sie können also mit den voreingestellten Teilen der Vorlage herumspielen den voreingestellten Teilen der Vorlage oder selbst einen weiteren kleinen Abschnitt hinzufügen, und ich zeige Ihnen hier etwas sehr Cooles. Hier schweben wir also zwischen diesem gelben Abschnitt und diesem rosa Abschnitt. Ich klicke auf Abschnitt hinzufügen. Dies zeigt Ihnen alle vorgefertigten Optionen, die Sie in Squarespace haben. Und es gibt ein paar sehr coole Dinge hier drin. Dies zeigt uns Schlagzeilen. So verschiedene Möglichkeiten, ein Bild mit Text darüber zu haben. Dieser mit einem kleinen schwarzen Rand drauf, mit einem weißen Rand. Sie können damit herumspielen und dies sind nur alle unsere voreingestellten Schriftarten, die wir für alle unsere Farben entschieden haben. So kannst du sehen, wie es für dich aussehen würde. Wir haben ein paar andere Dinge hier drin, wie man Listen, Bilder, Zitate usw. erstellt. Das sieht sehr cool aus. Aber ja, spiel einfach selbst ein bisschen damit herum und schau, ob du ein paar zusätzliche Elemente hinzufügen kannst , die ich hier nicht verwende und es super cool aussehen lassen. Was ich hier wirklich hinzufügen möchte, ist ein Überschriftenabschnitt. Ich habe gerade gesehen, dass mir das mit dem schwarzen Rand gefällt. Was ich also möchte, ist ein Hintergrundbild mit etwas coolem Text darüber zu haben ein Hintergrundbild mit . Es muss keinen Aufruf zum Handeln haben. Es braucht keinen Knopf drauf. Nur eine andere Sache , die nur sagt wer wir sind und worum es uns geht. Lassen Sie uns das also einlassen. Und dann gefällt mir, was wir hier haben in Bezug auf die Überschrift und den kleinen Text darunter. Ich will nicht, dass dieser Button da ist. Also wird es das löschen. Ja, das sieht cool aus. Offensichtlich das Bild, das nicht für das geeignet ist, was wir hier machen. Also lasst uns hier rauf gehen und diesen Abschnitt bearbeiten . Wieder Hintergrund. Dies ist aus der Squarespace-Vorlage voreingestellt. Lassen Sie uns das also ersetzen. Lade eine andere Datei hoch. Was ich hier wollte, ist ein Bild, das eine andere Seite von Arcade-Maschinen zeigt eine andere Seite von , Flipper. Also habe ich hier ein wirklich cooles Retro-Flippermaschinen-Bild . Lasst uns das reinbringen. Ja, das sieht gut aus. Ich mag die Art und Weise, wie die Texte darüber liegen. Das Problem dabei ist das Bild, das ich habe. Es hat ziemlich viel hellen und dunklen Kontrast darin. So weißer Text und dann oben drauf funktioniert nicht wirklich. Aber das ist cool, denn wenn wir uns in diesem Hintergrundbereich befinden, können wir eine Overlay-Opazität hinzufügen. Hier sehen Sie also, dass es auf 15% eingestellt ist. Wenn ich damit herumspiele, nimmt es schon das Schwarz, das hier im Hintergrund ist , und es liegt über dem Bild. Was Sie also tun, ist, dass Sie das Bild immer noch sehen, aber Sie können den Text lesen , der sich darüber befindet. Was ich also will, ist etwas irgendwo dazwischen vielleicht 50 Prozent. Das ist ich denke 40. Sie waren 35 Jahre alt. Ja, ich glaube, du kannst 40 gehen. Ich denke, du kannst noch den Text darüber lesen und immer noch sehen , was die Bilder unten sind. Also lasst uns hier raus klicken. Jetzt möchte ich ein paar Texte eingeben, in denen es darum geht, Flipperautomaten zu spielen. Nun, ich habe mir gerade etwas sehr Cooles und Quirky ausgedacht, das aus einem Lied stammt, denke ich von der WHO. Ich zeig dir, was das ist. Ich füge es hier in Überschrift eins ein. Klar. Spielt einen gemeinen Flipper. Das sieht echt cool aus. Es ist jedoch ein bisschen zu groß. Also lasst es uns vielleicht auf Rubrik zwei ändern. Ja, das sieht viel besser aus. Ich schaue mir diesen Text jetzt aber irgendwie an, ich denke, dass der Zeilenabstand etwas zu niedrig ist. Also was ich tun werde, speichere einfach diese Seite. Gehe zurück zu Bearbeiten. Dann gehe ich wieder zu Site-Styles. Schriften, Überschriften. Ich glaube, es ist nur diese Zeilenhöhe. Lasst es uns vielleicht zu einem machen. Ja. Okay. Das ist ein bisschen ordentlicher. Gibt dem Text etwas mehr Platz zum Atmen damit er nicht übereinander sitzt. Okay. Also lass uns zurückgehen. Schließ das. Dann, unter dem Titel hier, legen wir eine weitere Zeile aus diesem Lied ein. Ich habe nichts wie ihn in keiner Belustigung gesehen , der es weniger fett machen wird. Lass uns den Ball rausnehmen. Ja, das liebe ich. Das sieht echt cool aus. Hier haben wir also einen weiteren ganzen Abschnitt, der wirklich einfach und schnell zu erstellen ist , da wir die Vorlage verwenden , in der wir ein Hintergrundbild haben, den schwarzen Rand mit etwas coolem, skurrilem Text oben es Okay, also heb dir das auf. Geh zurück in „Bearbeiten“. Okay, also haben wir den Heldenbereich, der zur Seite Über uns geht. Die besten Spiele. Blogs. Dann gibt es ein cooles, skurriles kleines Bild. Und dann noch einen Abschnitt , den ich unten füllen muss . Ich möchte nur, dass es um die Kontaktseite geht , damit die Leute wissen, dass wir mit ihnen in Kontakt treten möchten . Das hier, sieh mal, es sieht ziemlich cool aus. Dafür könnte es benutzt werden. Aber wieder denke ich, ich füge einen Abschnitt hinzu. Ich glaube, ich habe hier etwas gesehen, von dem ich denke, dass es in Bezug auf die Farben funktioniert, alles, was wir verwenden. Und das ist dieser. So wie wir irgendwie wie ein Bild auf der linken Seite mit einem Textfeld daneben geworden sind. Also bringe ich das hier ab. Okay, das sieht cool aus, aber lasst uns einfach wieder mit den Farben herumspielen. Farben. Das Rosa wieder rein. Oh, das ist großartig. Und das hat auch hier die Farbe des Textes verändert. Ich mag das mit einem weißen Hintergrund mit dem rosa Text darüber . Das ist cool. Okay, und dann Bild. Lasst uns das bearbeiten. Also werde ich das noch einmal durch eines meiner eigenen Bilder ersetzen . Mal sehen, was wir haben. Mario Luigi springt. Ja, das sieht cool aus. Mir gefällt die Art, wie wir jetzt ein größeres Bild haben. Und es ist jetzt mit dem Textfeld auf der rechten Seite zentralisiert. Also lasst uns einfach den Text hier ändern. Dieses Fenster. Anstatt es hervorzuheben. Ich möchte sagen, Mario, Luigi, Überschrift drei, ich denke, es ist eine gute Größe, die uns oben etwas mehr Luft zum Atmen gibt . Dann wird es einige Texte kopieren , die für das, worüber wir hier sprechen, relevanter sind. Wir möchten von Ihnen hören, wir möchten wissen, welche Ihre Lieblings-Arcade-Spiele aus den achtziger und neunziger Jahren sind. Hast du das beste Ergebnis bei Donkey Kong? Mal sehen, ob wir du sein können. Dann dieser Button hier unten. Nehmen Sie wieder Kontakt auf. Und ich möchte, dass das zur Kontaktseite geht. Also hier drüben, nimm Kontakt auf. Es ist vorbei, um Kontakt zu haben. Speichern Sie das Sitz-Setup. Okay. Das ist großartig. Ich liebe diesen Abschnitt. Jetzt. Ich werde diesen Abschnitt unten loswerden. Ich glaube, das brauchen wir. Wo ist dieser Abschnitt unten? Das bringt uns in die Fußzeile und wir werden als nächstes daran arbeiten. Lasst es uns einfach nochmal speichern. Denken Sie, als wäre der Abstand hier ein bisschen abseits. Ich denke, wir haben unten etwas zu viel Platz, links oder rechts nicht genug Platz. Also lasst uns das einfach schnell bearbeiten. Gehen Sie also Abschnitt bearbeiten. Dann muss die Inhaltsbreite irgendwie zu klein sein. Das sind irgendwie zwei Taschen. Lass uns noch einen benutzerdefinierten machen. Irgendwo dazwischen. Mal sehen, vielleicht 90%. Ich denke, das funktioniert, gibt ihm nur ein bisschen mehr Platz zum Atmen. Wenn Sie sich also die ganze Seite ansehen , sehen wir Mario springen und dann sehen wir den gesamten Text auf einmal zusammen. Okay, heb dir das auf. Ein letzter Abschnitt , den Sie sich auf der Homepage ansehen sollten, ist die Fußzeile. Jetzt erscheint offensichtlich die Fußzeile, ähnlich der Kopfzeile, am unteren Rand jeder einzelnen Seite. Lasst uns das bearbeiten. Weißt du was, mir hat das Gelb schon gefallen, das da drin läuft. Aber es gibt nur ein paar Elemente , die ich nicht möchte, ich muss den Newsletter bearbeiten. Wir haben keinen von denen. Werde das los. Dieses Bild ist mehr Seife, werde das los. Dann dieser Text hier drüben, nun, sind Links aufgesprungen. Dies sind Links zu allen Seiten auf der Website. Zunächst einmal, nun, die Positionierung davon stimmt nicht ganz. Sie können hier sehen, dass wir zwei verschiedene Spalten haben. Wir haben eine Spalte auf der linken Seite, einen Abstandshalter und eine Spalte auf der rechten Seite. Was ich tun möchte, ist mit dem Doppelpunkt der Breite herumzuspielen. Und du kannst das überall auf der Seite mit jedem Element machen. Hol buchstäblich einfach deinen kleinen Pfeil da drauf und zieh ihn einfach. Ziehen Sie es nach rechts. Da sind wir los. Das sieht cool aus. Dann wäre ich mit dem Text lieber zentralisiert. Erlaubt mir nicht nur die Möglichkeit, auf dieser Seite einfach etwas anderes zu werfen, sondern auch den Text hier. Nun, das meiste davon ist nicht relevant. Das ist ein paar Ersatzteile-Shop löschen. Nein, danke. Journal gut, ich sollte Blog sagen. Logan, lösche den Rest auf beiden Seiten. Dann sind das einfach alles, das ist nur Text mit Links drin. Deshalb ist es irgendwie hellrosa und hat eine Unterstreichung darunter. Wenn Sie einen Text bearbeiten und Andy eintragen oder einen Link herausnehmen oder ändern möchten , markieren Sie den Text, klicken Sie auf dieses kleine Symbol hier, diesen Link, eins. Das wird dir sagen, welcher Link hier verwendet wird. Du klickst auf dein Zahnrad. Machen Sie wieder, was wir früher gemacht haben. Du kannst gehen. An eine E-Mail-Adresse. Sie können zu einer Webadressdatei oder einer Seite gehen, offensichtlich zu einer Seite ohne Journal-Blog, auf die wir sie wollen. Okay, also blogge über und kontaktiere, genauso wie wir oben in der Navigationsleiste gekommen sind. Nur verschiedene Arten Benutzer durch Ihre Website navigieren. Bewerben wir uns. Und dann noch eine Sache, die ich hier reinbringen möchte. Lass uns einfach etwas Cooles und Skurriles sehen. In diesem kleinen Pop-up. Mir gefiel das Aussehen dieses kleinen Dings früher bei der Einführung des Scrollblocks. Mal sehen, wie das aussieht. Okay, das ist cool. Was wir hier unten gehen würden, ein paar Texte, die von rechts nach links scrollen. Klar. Ich kann die Richtung ändern. Ja, so können wir gehen. Lassen Sie mich die Größe ändern. Ich denke ziemlich große Medien, ziemlich gute Geschwindigkeit. Ja. Ich denke, der langsamste ist besser, damit du es lesen kannst. Aber was wollen wir inhaltlich hier drin? Ich will es nicht träumen und diese kleine wackelige Linie. Lasst uns das also in GameOver ändern . Dann mag ich die squiggly Line, aber ich möchte, dass ein anderes Wort hier drin ist. Was passiert, wenn das Spiel auf einem Arcade-Automaten vorbei ist, müssen Sie eine weitere Münze einlegen. Dann wie diese kleine squiggly Linie. Eigentlich will ich noch einen von denen. Also klicke auf diesen, dupliziere. Dann diese kleinen Punkte auf beiden Seiten, mit denen Sie es nach oben und unten ziehen können. Also los geht's. Jetzt ist das Spiel vorbei. Squiggly Linie, Münze einlegen. Squiggly-Linie ist etwas langsam. Vielleicht sogar das schnelle Telefon. Ja, ich denke, das ist besser. Okay, das sieht also echt cool aus. Das liebe ich. Ich will diesen Abstandhalter und anderen Raum nicht, oder? Ich brauche da, wir gehen. Sieh dir das an. Das ist eine coole Möglichkeit, die Website mit unserer Fußzeile zu beenden. Es heißt GameOver, Münze einlegen. Und dann Teile der Website hier rechts. Das einzige ist, dass ich glaube, dass es in die andere Richtung geht. Ja, Insert Coin Spiel vorbei. Das funktioniert viel besser. Wellenintensität, damit kannst du herumspielen und es etwas wackeliger machen. Den ganzen Weg nach oben . Ein bisschen verrückt. Ich mag es irgendwie direkt um ehrlich zu sein. Staat ohne was auch immer du damit machen willst. Aber so etwas ausgedrückt, Es ist ein cooles kleines Element , das Squarespace ihm gekauft hat. Also spar dir das auf. Jetzt, da dies gespart ist, schauen wir uns unsere gesamte Homepage an. Klicke auf den kleinen Pfeil. Hier haben wir einen sehr coolen kleinen Header-Bereich. Cooles kleines Intro mit Routern. Die besten Spiele, 85 bis 95. Ich mag diese kleine Animation , da dieser Abschnitt auch ins Spiel kommt. Eine weitere coole kleine Animation verblasst ein und nennt es ein Bild mit Text darüber. Darauf. Ja, ich liebe diese kleine Animation auch. Mario, Luigi wird Kontakt aufnehmen. Und dann mache ich am Ende die Fußzeile. Spiel über Münze einlegen. Also los geht's. Die Homepage ist jetzt abgeschlossen. Das sieht großartig aus. Es sieht sehr skurril aus, sehr hell, sehr cool. Und es heißt, was wir über Retro-Spiele von 85 bis 95 sagen wollten . Und das ist alles erledigt. Ich denke jedoch, dass es noch ein paar coole Kleinigkeiten gibt, die wir mit einigen dieser Abschnitte machen können. Sprechen wir also in der nächsten Lektion darüber. 8. Webdesign: Hintergrundanimation: Ich hoffe, Sie fanden den ersten Teil der Homepage weniger als sehr einfach zu folgen und dass Sie selbst bereits eine fantastisch aussehende Homepage haben . Und du hast hier auch deinen eigenen kleinen Stil eingeworfen. Ich bin sehr zufrieden mit dem, was wir bisher auf der Homepage haben , aber ich möchte dir nur noch ein paar coole Kleinigkeiten zeigen , die du tun kannst um jeden Abschnitt so besonders hervorzuheben. Fangen wir also mit der Helden-Sektion an. Also bearbeite den Abschnitt. Was wir uns hier ansehen werden, ist der Hintergrund. Wir haben uns dies kurz angeschaut und gesagt, dass Sie ein Hintergrundbild oder Hintergrundvideo oder dieses Hintergrundvideo hinzufügen können ein Hintergrundbild oder Hintergrundvideo oder , Hintergrundkunst. Jetzt ist das etwas, das mit Squarespace einhergeht. Was Sie haben, sind all diese coolen kleinen animierten Abschnitte , die diesem Hintergrund wirklich einen echten Charakter verleihen. Einige von ihnen sind ein bisschen verrückt und kann schwierig sein, den weißen Text oben zu lesen. Dieser sieht echt cool aus. Nur ein paar kleine weiße Punkte fliegen im Hintergrund herum. Aber derjenige, den ich wirklich mag, das hier unten. Was es tut, ist zu versuchen, ein 3D-Gitter mit verschiedenen Farben zu erstellen , so dass ein- und ausspringt und einen sehr subtilen Animationsstil erhält. Das Schöne an diesem ist, dass Sie normalerweise drei Hauptoptionen haben, aus denen Sie wählen können. Das ist ein großer, kleiner, super kleiner , irgendwie so. Was ich hier machen will, ist die Farben richtig zu machen, das funktioniert nicht wirklich, das Gelb und das Rosa zusammen zu haben , weil ich die Texte oben nicht lesen kann. Fangen wir also mit dem Schwarzen an. Da sind wir los. Dieser erste Stern sieht toll aus. Ich mag die Art , wie du in diesem rosafarbenen Schein herumfliegst. Das ist sehr cool. Aber ich versuche mich für etwas mehr Retro-Videospielstil der acht Bit Achtziger zu entscheiden. Mal sehen, was wir hier haben, Form und Größe. Auf diese Weise können Sie ein wenig damit herumspielen, damit Sie die Größe der Boxen ändern können, die sich dort befinden. Das ist also eine wirklich kleine, winzige 11-fache Größe, zweimal so groß. Das gefällt mir. Diese Art stellt mehr von dieser Art von 8-Bit-Stil dar, bei dem sie nicht zu viele Pixel hatten, mit denen sie herumspielen konnten. Bleiben wir also bei der Röhre. Dann Bewegung, nun, das ist die Geschwindigkeit der Bewegung hier. Habe es schnell oder langsam? Ich denke, es wird verlangsamt, um ehrlich zu sein, weil ich nicht will, dass es subtil ist. Dann ist das ein Spaß. Diese Platzierung ist pixelig oder turbulent. Mal sehen, was sie beide tun. Aber verpixelt. Nun, da sind wir los. Das ist viel mehr AT-Stil. Das erinnert mich an Super Mario vom ursprünglichen Nintendo. Und ja, das hat mir sehr gut gefallen. Ich denke, das sieht echt cool aus und fügt einfach diesen zusätzlichen Charakter hinzu. Das einzige ist, dass ich denke, dass der Kontrast zwischen Rosa und Schwarz nicht ganz stimmt. Also lass uns einfach mit dieser dunklen Farbe gehen. Sie können darauf klicken. Sie können etwas aus Ihrer Palette auswählen. August geht zu benutzerdefiniert. Dann können wir hier wirklich mit der Farbe herumspielen. Was ich also will, ist uns einen dunklen Pool zu sehen , vielleicht mal sehen, was wir hier haben. Ja. Ja, das ist besser. Vielleicht sogar ein bisschen dunkler dort. Weißt du, ein bisschen näher am Rosa, glaube ich. Ja, das funktioniert. Das liebe ich. schließen Sie dieses kleine Fenster , in dem Sie sich das genau ansehen. Ja, das liebe ich. Das hat einen echten Retro-Spiele-Stil. Und das ist ein weiterer kleiner Schritt von diesem schlichten rosa Hintergrund. Das hatten wir. Okay, lasst uns nach unten scrollen. Mir gefällt wirklich , was wir hier haben. Ich mag den schlichten gelben Hintergrund, um ehrlich zu sein. Ich habe jedoch etwas gesehen. Ich will das auch nicht hier reinwerfen. Es war dieser Scrollblock. Wirklich gefällt, was wir in der Fußzeile damit gemacht haben. Und ich will einfach nur das sehr kleine, subtile unterwegs. Es kann einfach unter allen Blogs dort sitzen und es träumen, das funktioniert nicht. Aber ich denke einen coolen kleinen Satz aus einem meiner Lieblingsspiele aus. Mach ihn fertig. Sterblicher Kampf. Wenn du dich daran erinnerst. Ja, da sind wir los. Es passt immer noch alles in die Seite und ich denke, das fügt der Seite nur ein nettes kleines coole subtile Elemente hinzu. Okay, jetzt der nächste Abschnitt, aber das gefällt mir wirklich. Ich möchte nicht wirklich zu viel damit machen, aber ich denke, genau wie eine Art subtile Bewegung auf dem Hintergrundbild wäre eigentlich irgendwie cool. Wenn ich also hier reingehe, um den Abschnitt zu bearbeiten , ist Hintergrund, wie Sie wissen, das Bild bisher. Was wir hier haben, ist Bildeffekt. Dies ist etwas, das das Bild einfach im Hintergrund bewegen kann . Was haben wir also? Wir haben Flüssigkeit. Das gefällt mir. Korn filmen. Das ist irgendwie cool. Das gibt ihm ein bisschen mehr eine Art Stil der Achtzigerjahre. Sieht aus wie ein richtig alter Fernseher aus den Achtzigern. Gebrochene Linien gut , dass es irgendwie ist, es ist irgendwie kaputt, das Bild irgendwie. Diese eine dieser Animationen ändert sich irgendwie. Man bewegt sich durch die Bilder auf und ab. Der erste hat mir sehr gut gefallen, um ehrlich zu sein. Flüssig Ja, das gefällt mir irgendwie, als ich in diesen Abschnitt komme , geht es irgendwie so, anstatt die Bewegung in den Hintergrund zu kommen. Sehr cool. Okay. möchte ich hier etwas anderes machen. Ich denke, der Hintergrund ist zu klar. Fügen wir diesem also ein Bild hinzu. Datei hochladen. Ich habe diesen wirklich coolen Sonnenaufgang aus den Achtzigern. Ja, ich denke, das sieht weiß aus, es sieht super aus 80ern und das sieht echt cool aus, wenn Super Mario herumspringt. Es ist nur ein bisschen zu folgen. Also lasst uns vielleicht noch einmal mit der Deckkraft herumspielen. Es bringt alles in das Rosa, das zuvor da war. Das Bild ist also immer noch da, aber es ist einfach so, als würde man hinter diesem rosa Overlay sitzen . Perfekt. Okay. Und noch eine letzte Sache Lass uns mit der Fußzeile spielen. Ich denke, ich möchte das gleiche animierte Grid-Ding, aber ich möchte es auf eine etwas andere Weise machen. Lasst uns das wählen. Dann wählen wir das kleinere Raster , das mir wirklich gefallen hat. Aber wieder, zu voll und ganz sagt, spiele mit den Farben herum. Fangen wir mit Weiß an. Das ist cool. Aber dann hat mir das Gelb gefallen. Also lass uns einfach zurück zum Gelben gehen. Ja, das ist sehr cool. Ich denke, der schwarze Text passt wirklich gut dazu. Ja, das ist großartig. Dann Form und Größe. Lassen Sie uns einfach die gleiche Größe behalten, wie es die Emotion ist. Nun, ich möchte irgendwie, dass es sich nicht bewegt. Lassen Sie uns die Bewegung also einfach auf 0 fallen. Ja, das funktioniert so. Es ist irgendwie wie immer noch, ich mag das jetzt so, wie es eine Art Animation ist, aber es ist nicht animiert. Es ist einfach richtig cool. Also der Gitterhintergrund, ich denke, da wird das Gelb etwas dunkler machen. Ja, da sind wir los. Das sieht cool aus. Das liebe ich. Okay, also lasst uns das retten. Und dann schauen wir uns die ganze Seite live noch einmal an. Ich liebe diese subtile Animation, eine Art 8-Bit-Stil im Hintergrund dort. Dann sieht dieser immer noch cool aus. Er hat ihn fertig gemacht. Erstaunlich. Lauf einfach unten entlang. Es gibt Liebe das, das ist sehr schrullig. Das sieht viel cooler aus mit Luigi da, gibt ihm nur ein bisschen Charakter im Hintergrund. Das ist die Fußzeile. Also ja, das soll dir nur viele verschiedene Dinge zeigen , die du mit dem Hintergrund deiner Homepage machen kannst . Und sie, jeder Abschnitt steht einfach ein bisschen mehr auf, ein bisschen kühler. Ich hoffe also, du hattest ein gutes Spiel mit dieser Homepage. Wenn man meiner vollen Richtung folgt oder deinen eigenen Stil und deine eigenen Inhalte nimmt und mit diesen Hintergründen herumspielt und sie wirklich hervorstechen lässt. Ich kann es kaum erwarten zu sehen, was du damit gemacht hast. Jetzt haben wir diese Lektion beendet. Gehen wir zu den restlichen Seiten über. 9. Webdesign: Info-Seite: Okay, also ist die Homepage jetzt fertig. Ich hoffe, du folgst dem Schritt für Schritt. Und du hast deine eigene Homepage und du bist sehr zufrieden damit und es sieht echt cool aus. Ich freue mich darauf, all das zu sehen. Jetzt ist die Struktur und das Design der Website alle sortiert. Was wir jetzt tun müssen, ist das auf allen anderen Seiten zu verwenden. Komm her, klicke auf Seiten. Die erste, die wir bearbeiten werden , ist die About-Seite. Offensichtlich ist eine About-Seite die Seite, auf der Sie Benutzern sagen, die die Website gerade erst zum ersten Mal besucht haben , worum es bei Ihnen geht. Wenn Sie in den Editor kommen, können Sie sehen, wie er bereits mit der Vorlage erstellt wurde . Wir haben ein weiteres ganzseitiges Intro mit einigen Intro-Texten und einem cool aussehenden Bild, bei dem unser Blau als Hintergrund verwendet wird. Dann haben wir mehr Text oben auf dem Bild. Dann ein zusätzlicher Abschnitt am Ende, der ein bisschen mehr darüber erklärt, wer wir sind. Das Beste, was Sie sehen werden , wenn Sie auf diese Seite kommen, ist, schauen Sie sich Ihre Fußzeile an. Genau so haben wir vorher und den Header genau so festgelegt , wie wir vorher eingerichtet haben. Sie sind auf jeder einzelnen Seite der Website gleich und konsistent . Wenn wir also zur Bearbeitung hierher kommen, bearbeiten wir diesen Abschnitt, diesen Abschnitt und diesen Abschnitt. Und natürlich können wir einen zusätzlichen Abschnitt hinzufügen , wenn wir ihn brauchen. Aber ich mag wirklich, was wir hier oben haben, also arbeite ich damit. Lassen Sie uns zuerst diesen Text oben ändern. Füge einfach ein, was ich sagen möchte, um die klassische Arcade seit 85 am Leben zu erhalten. Wie Sie hier sehen können, verwendet bereits Überschrift zu Überschrift eins. Das ist viel zu groß. Überschrift drei, kleiner, wahrscheinlich ein bisschen zu klein. Ich denke, dass es wirklich perfekt war, dorthin zu gehen , also bleiben wir dabei. Dann unten hier ein bisschen mehr Einführungstext, der Absatz zwei verwendet. Ich füge sie ein, was ich dort bereits geschrieben habe. Darunter möchte ich einen weiteren Button genauso wie auf der Homepage. Und ich möchte, dass dieser Button Benutzer durch die Blogseite führt. Auch hier ist es nur eine zusätzliche Navigation, dass sie die Navigationsleiste oben oder die Schaltflächen auf Seiten verwenden können , die gewünschten Seiten zu finden. das zu tun, komm hier hoch und klicke auf Bearbeiten. Und dann gehe zum Link hier drüben und geh weiter. Und Sie werden sehen, dass das unten mit den Haupttexten dort erschienen ist. Was möchte ich hier sagen, ist mehr zu lesen und es auf unsere Blogseite zu gelangen. So einfach ist das. Eine weitere Sache, wir ändern müssen, ist das Bild. Dies ist das Bild, das aus der Vorlage stammt. Lassen Sie uns die Upload-Datei ersetzen. Und ich benutze dieses Bild hier, Spielzeitkrise. Ein anderes Bild habe ich im Voraus eingerichtet. Das sieht echt cool aus. Nur ein kleines Problem. Es gibt ein bisschen Platz hier. nehmen wir einfach raus. Da sind wir los. Das war nur ein Leerzeichen im Text. Jetzt stimmt alles besser aus. Gleicher Raum zwischen hier und da. Ja, das sieht gut aus. Das liebe ich. Das Problem ist jedoch, dass es irgendwie in die Seite passt, aber nicht ganz. Wie Sie sehen können, ist die Schaltfläche, die nicht ganz mit dem unteren Teil des Bildes übereinstimmt. Also denke ich, dass dieser Text zu groß ist, also lasst uns ihn in eine Überschrift drei ändern. Da sind wir los. Jetzt ist alles neben dem Bild zentralisiert. Und das gibt ihm nur ein wenig Platz zum Atmen hier und hier. Wenn ein Benutzer die Seite besucht , sieht er alles auf einmal. Und ich liebe diesen blauen Hintergrund, aber wie wir es auf der Homepage gemacht haben, Mal sehen, ob wir einen etwas kühleren Hintergrund schaffen können . Gehen wir also hier rauf und klicken Sie auf Abschnitt Bearbeiten. Lasst uns wieder nach unten gehen. Ich werde noch etwas Kunst im Hintergrund ausprobieren. Wenn Sie diese Seite selbst erstellen, spielen Sie gut mit diesen herum und sehen Sie, ob Sie eine finden, die Ihnen gefällt. Das sieht cool aus. Und ich habe das Gelb und das Rosa geliebt, aber das wird hier nicht funktionieren, weil man die darüber liegenden Texte nicht lesen kann. Gehen wir einfach noch einmal zum Filter. Zunächst einmal, nun, ändern wir eine der Voreinstellungen hier. Sie können ein benutzerdefiniertes Bild auswählen, wenn Sie möchten. Ich liebe diese Icons, die sie da drin haben. Und von allen von ihnen hier, der Star. Nun, das fühlt sich die Art der 1980er Jahre an, am besten geeignet für eine Arcade-Videospiel-Website. Auch hier kann ich die Texte und so nicht wirklich sehen. Also lass uns einfach ein Bild zehn Tia wählen. Nun, machen wir einfach das Weiß und machen dann die Hintergrundfarbe blau. Aber auch hier kann ich den Text über dem weißen Symbol nicht ganz lesen . Nehmen wir ein paar Änderungen an diesem Netzwerk vor. Scrollen wir nach unten. Skalieren Sie zunächst die Anzahl der Bilder, aber es gibt zu viele. Was ich also mache, ist das anzupassen. So klein, mittel, groß oder anpassen. Ich lasse es auf viel kleiner fallen. Sagen wir einfach, ändern wir das einfach in zwei. Und dann die Anzahl der Bilder. Lassen Sie uns das auf viel weniger reduzieren. Sex gelb. Das ist sehr subtil. Man kann irgendwie einen hier oben und einen dahinter schweben sehen , einen dahinter. Aber ich kann den Text darüber hinaus immer noch nicht lesen. Lassen Sie uns also noch eine Bearbeitung vornehmen. Lass uns filtern und damit herumspielen. Und dies gibt Ihnen eine andere Art von Overlay über den Symbolen im Hintergrund. Also spiel mit ihnen herum, kreise Kreuzstich. ist das ziemlich cool. Es sieht ein bisschen mehr Achtzigerwürfel wirklich so aus. Dann ist das hier los. Gradienten-Kreis. Ich weiß nicht wirklich, was das in Bezug auf Design und Display bedeutet . Aber ich habe hier was ich will. So kann ich den kleinen Stern schweben sehen, aber ich kann immer noch den Text darüber lesen. Was ich jetzt habe, ist diese Art von Stil mit einem kleinen Hintergrund gerastert. Das ist also genial. einzige Sache ist, ich glaube nicht, dass es sich bewegt. Wenn ich also die Wellengeschwindigkeit ändere, wird das auf 0 gesetzt. Mal sehen, was passiert. Ja, da sind wir los. Das bewegt sich nicht mehr. Ich liebe es. Da sind wir. Das ist cool. Glück. Es ist ein sehr subtiler Hintergrund, der hier hinzugefügt werden muss, aber er verleiht ihm nur ein bisschen mehr Charakter und repräsentiert, was wir anderswo auf der Website gemacht haben. Okay, das ist also der Abschnitt sortiert. Mal sehen, was wir in den beiden anderen Abschnitten haben. Nun, um ehrlich zu sein, glaube ich nicht, dass ich hier viel mehr Text brauche. Ich denke, ich möchte den Leuten nur kurz erklären, wer wir sind, was wir tun, und dann Leute auf die Blogseite schicken. Was ich also mache, ist diesen Abschnitt zu löschen. Bewegen Sie den Mauszeiger über den Abschnitt. Entfernen. Jetzt haben wir das unten, was sehr cool aussieht und ich mag diesen Stil. Völlig nicht das, was wir hier versuchen. Ich weiß nicht, was das Bild ist, eine Art Salt Lake oder so. Ändern wir also einfach das Bild in eines, das wir zuvor verwendet haben. Wie ein Hintergrund. Ersetzen. Ich werde in denselben Hintergrund kommen , den ich auf der Homepage hinter Super Mario gemacht habe . Ja, das will ich. Also möchte ich einfach nur diese Art von kurzer Einführung haben von kurzer Einführung Leute zum Blog schicken. Und dann einfach ein cooles kleines Abmelden hier. Ich kann den Text dort nicht wirklich lesen. Lassen Sie uns also eine weitere Farbüberlagerung oben auf dem Bild machen. Hintergrund. Overlay Deckkraft. Lassen Sie uns das einfach ankurbeln. Okay, das ist nett und hoch. Ich liebe das, aber ich will irgendwie nicht, dass das Blues ist. Menschen sind irgendwie wie das Blaue hier oben. Und dann will ich ein bisschen Kontrast, vielleicht in Rosa verwandelt. Mal sehen, wo wir das bearbeiten können. Lass uns zu Farben gehen. Weil es hier dunkel ist. Wenn ich mich auch für hell entscheiden würde. Da sind wir los. Jetzt möchte ich von einer hellen Farbe kontrastieren. Wir haben mit den Weißen angefangen, wir gehen ins Blau, ins Rosa und dann ins Gelb des Fotos. Das ist großartig. Jetzt muss ich nur noch den Text bearbeiten. Was ich also tatsächlich mache, ist das Endergebnis zu löschen. Dann haben sie hier ein paar extra kleine Striche eingelegt, ein paar kleine Linien. Die will ich nicht. Und ich möchte, dass es gute Zeiten sagt. Also habe ich IN geschrieben oder zentralisiere das einfach. Sie bringen es zurück zu Absatz zwei. Eigentlich möchte ich hier drin verwenden. Es ist dieselbe Schriftart, die wir hier für das Spiel verwenden. Ich denke, es ist nur ein weiterer skurriler Punkt, an dem wir es fallen lassen können. Lassen Sie uns das hier in den Texten hervorheben. Wähle Monospace. Wie Sie sehen können , hat dies dies in die Schriftart geändert , die wir oben verwenden. Und es heißt: Good Times. Das Problem ist, nun, ich kann das nicht ganz lesen, also müssen wir nur die Größe ändern. Das geschieht in unserer Fonts-Einrichtung hier. Speichern wir zuerst diese Seite. Scrollen Sie nach unten zu dem, was wir uns ansehen. Drücken Sie erneut auf Bearbeiten. Und dann komm her zu Schriften. Ich klicke hier auf das Verschiedenste, das ist puffing arcade, die Schriftart, die wir verwenden. Wir haben uns schon für die Schriftfamilie entschieden und wir haben das Gewicht. Es ist dieser hier, größenbasierte Größe, das ist sehr, sehr klein. Lasst uns das viel größer machen. Sieben. Ich denke, Sieben ist gut dort. Ja, das hat mir sehr gut gefallen. Und jetzt sind wir wieder hier drin. Das sieht also wirklich cool aus, wie wir von diesem kleinen Einführungstext ausgehen . In dieses Hintergrundbild mit guten Zeiten oben hinein, ins Flattern. Du willst allerdings nur noch ein bisschen skurriles Ding. Ich werde ein kleines Bild oder ein kleines Symbol über diesem Text einwerfen . Klicken Sie also auf das Plus und wählen Sie dann Bild aus. Und ein Bild lädt erneut eine Datei hoch. Und hier drin habe ich dieses kleine PNG. Ein PNG-Bild ist eines , das keinen Hintergrund dahinter hat. Und es ist nur eine Ikone eines Space Invaders. Ich möchte das über das Wort fallen lassen. Gute Zeiten. Ja, das liebe ich. Das sieht echt cool aus. Es schwebt irgendwie vor diesem Sonnenbild dort. Und dann steht Good Times unter ihm. Das einzige ist, dass ich denke, dass dieser Abschnitt ein bisschen zu groß wird. Was ich also tun werde, ist einen Abstandhalter auf beiden Seiten dieses Bildes hinzuzufügen . Klicken Sie erneut auf Ihr Plus und wählen Sie Spacer. Und dadurch wird der Abstandhalter automatisch oben auf das Bild fallen. Aber was wir tun wollen, ist einen nach links und einen nach rechts zu legen . Also zuerst duplizieren wir das und dann einen weiteren Abstandhalter. Jetzt haben wir zwei Räume hier. Halten Sie dann die Maus gedrückt und ziehen Sie sie einfach nach links neben dem Bild. Wie Sie hier sehen können, gibt es eine lange blaue Linie die den Raum fallen ließ und neben allem links auf dieser Seite. Aber das wollen wir nicht, wir wollen es nur links neben dem Icon. Bring es also ein bisschen rein bis du die kürzere Linie siehst. Sie können sehen, dass es die gleiche Höhe wie das Space Invader-Bild hat. Also lass es einfach da sein. Da sind wir los. Jetzt sind wir in kleinen Abstandshalter neben dem Icon gefallen. Jetzt mache ich das Gleiche auf der anderen Seite. Kleinere Linie, da ist sie. Da sind wir los. Und das kann ich sogar etwas kleiner machen. Ich denke, ich mochte diese Größe tatsächlich, aber wenn Sie sie hineinziehen möchten, um sie kleiner zu machen, ziehen Sie einfach den Rand der Box dorthin und bringen Sie ihn nach links oder rechts. Eigentlich glaube ich, dass es mir so groß gefällt. Ich meine, das ist ein netter kleiner Raum zwischen guten Zeiten und dem Sohn. Ja. Okay. Wir lassen es in dieser Größe. Jetzt habe ich eine About Page, eine kleine Einführung, die besagt, dass die klassische Arcade seit 85 am Leben erhalten bleibt . Ein paar kurze Texte darüber, wer ich bin, worum es bei mir geht. Eine Schaltfläche, die Benutzer zur Blogseite führt. Und dann nur ein skurriles kleines Abzeichen. Sie sagen, gute Zeiten mit diesem Arcade-Maschinen-Icon aus den Achtzigern. Also bitte folge dem , was ich hier gemacht habe. Nehmen Sie Ihre eigene About-Seite und stellen Sie sie so zusammen , dass es Ihrer Meinung nach am besten für die Website funktioniert , die Sie erstellen. Möglicherweise möchten Sie dort einige zusätzliche Abschnitte hinzufügen , um ein bisschen detaillierter zu gehen. Oder andere Abschnitte, die Benutzer an andere Teile Ihrer Website senden . Aber wenn Sie fertig sind, klicken Sie hier hoch und speichern Sie. Wenn wir wieder hierher kommen, wirst du sehen, wie die Seite auf dem Desktop aussieht. Werfen wir einen kurzen Blick darauf, wie es auf Mobilgeräten aussieht. Auch hier haben wir den gleichen Intro-Header. Das gefällt mir sehr. Dann ist das Layout hier perfekt. Beginnt mit einem Bild geht in die Schlagzeilen, scrollt Leute hinunter zum Read More und schaut euch dann die guten Zeiten an. Das war großartig. 10. Webdesign: Kontaktseite: Die nächste Seite, an der ihr arbeitet , ist die Kontaktseite. Dies ist eine sehr wichtige Seite auf jeder Website, mit der sich Menschen in Verbindung setzen können. Du, sprich mit dir, wirfst zum Beispiel Ideen für deine Blogs aus. Klicken wir also auf Kontakt. Bringen wir es einfach zurück auf den Desktop. Dies ist die Seite, die mit der Vorlage geliefert wird. Ganz einfach. Sprechen Sie mich selten an. Formular für Leute, um mit Ihnen in Kontakt zu treten, ein Bild. Und dann die Fußzeile, sehr geradlinig und einfach und Sie möchten es auf jeden Fall für Ihre Website so belassen. Scrollen wir nach oben und gehen zur Bearbeitung. Mir gefällt, was sie hier haben, aber ich möchte es irgendwie noch mehr vereinfachen. Was ich tun werde, ist hier einen anderen Kontaktbereich zu finden . Mal sehen, was wir haben. Kontakt perfekt. Hier sind ein paar andere sehr einfache Displays für Sie. Sie können es ganz oben auf einem Hintergrundbild haben , wenn Sie diesen Stil mögen, verwenden Sie ihn auf Ihrer Website oder nur einen Text mit einer Kontaktschaltfläche unten, der Personen über die E-Mail-Adresse führt. Aber ich möchte es einfach halten. Ich möchte mich einfach nicht bilden. Ich möchte einfach etwas Einfaches wie eine E-Mail-Adresse und Telefonnummer. Lasst uns das reinbringen. Ja, das gefällt mir nett, einfach kontaktieren Sie uns. E-Mail, Telefon, Kleid und dann einige Links zu sozialen Medien. Also benutze ich diesen Abschnitt. Lassen Sie uns zuerst diesen Abschnitt löschen. Dann. Nun, es sieht gut aus und weiß, aber ich möchte nicht, dass es hier mehr weiße Header in den weißen Abschnitt geht . Also lasst uns den ganzen Abschnitt bearbeiten. Zwei Farben, die wir mit gelben Hintergründen verwendet haben, haben wir rosa Hintergründe, blaue Hintergründe verwendet. Wenn Sie das auf Ihrer Website gerne fortsetzen möchten , tun Sie dasselbe. Kommen Sie jedoch auf, schwarzer Hintergrund. Ich möchte es einfach halten. Jetzt bedeutet, dass ich ein bisschen Abwechslung auf der Website habe und immer noch dieselbe Struktur verwende, eine andere Hintergrundfarben. Das gefällt mir. Lasst uns hier raus klicken. Dann lasst uns dieses Bild ändern. Wir gehen hier rüber und ersetzen die Image-Upload-Datei. Dies ist das Bild, das ich hier verwenden möchte. Das ist cool. Ich liebe das. Ich liebe es, wie sauber und ordentlich es ist. Ich glaube nicht, dass es einen verrückten Hintergrund braucht, weil es eher ein Aufruf zum Handeln ist, um Leute dazu zu bringen, sich mit Ihnen in Verbindung zu setzen. Alles, womit ich mich hier nicht wohl fühle. Selten sehen nur diese geschwungenen Kanten auf dem Bild wirklich cool aus, aber es ist kein Stil, den ich irgendwo anders auf der Website verwendet habe . Sie uns also aus konsequenter Sicht Lassen Sie uns also aus konsequenter Sicht zum Design gehen. Wie Sie sehen können, hat dies einen Eckenradius. Setzen wir es einfach auf 0. Wir gehen dorthin, wir haben das Bild, Kontakt, die E-Mail. Ändere das einfach in das richtige E-Mail-Spiel über meine Telefonnummer, in der ich wohne. Nicht New York, aber das ist vorerst in Ordnung. Und dann hier unten, nun, ich habe keine Twitter-Seite, also lasst uns diese einfach löschen. Und dann geht das an Facebook und Instagram. Und wieder sind dies nur Texte, Links, also bewege den Mauszeiger über den, den du willst, Instagram. Dann kannst du hier reingehen und wir können das in das Spiel über Instagram-Seite ändern . Tun Sie das Gleiche auf Facebook dot com. Die E-Mail-Adresse hebt zunächst das Wort hervor, kommen Sie hier, um zu verlinken. Wie Sie sehen können, sagt es bereits , wie die E-Mail-Adresse lautet, aber wo wird das hin? Klicken Sie hier an. Und wir geben dort Ihre E-Mail-Adresse ein. Dann möchten Sie, dass das Betreff erscheinen soll. Also sagen wir dann einfach Body, CC, BCC, optional, lassen Sie das einfach als optional. Das ist hier nicht wichtig. Spar dir das auf. Bewerben Sie sich Sie sehen, dass dies jetzt unterstrichen ist, da eine anklickbare Live-E-Mail-Adresse handelt, an die sich die Leute wenden können. Okay, das ist also perfekt mit diesem Patienten. Halten Sie es ordentlich und einfach und sauber. Sagen wir das. Ja, das ist einfach. Ich mag diese kleine animierte Mischung auch dort drin. Werfen wir einen kurzen Blick darauf, wie das auf Mobilgeräten aussieht. Perfekt. Ja, ich mag es, dass alles auf einer einzigen Seite erscheint. Nettes Bild, das erklärt, wer wir sind, was wir tun, und kontaktieren Sie uns mit den Details und verschiedenen Möglichkeiten, wie Sie uns kontaktieren können. Okay. Also haben wir jetzt eine Homepage über Seite, eine Kontaktseite. Es gibt nur eine weitere Seite, mit der Sie fertig werden müssen. Jetzt die Blog-Seite. 11. Webdesign: Blogs: Also hier sind wir im Blog-Bereich der Website. Ich habe das bis zum Ende verlassen, da bei der Einrichtung dieser Seiten zwei verschiedene Dinge involviert sind. Zuallererst die gesamte Blogseite und dann jeder einzelne Block. Lassen Sie uns damit beginnen, einen Blick auf die Gesamtseite zu werfen. Wechseln wir zuerst einfach auf den Desktop. Dann sehen Sie den Vollbildmodus an. Dies ist also das Gesamt-Setup , das mit der Vorlage geliefert wurde. Und das hat mir sehr gut gefallen, wo wir links ein Bild haben können, oben eine Meta-Beschreibung , den Titel und dann Einführungstexte dort. Dann das nächste, Bild rechts Texte links , die den Steuersatz verlassen haben. Das Display hat mir gefallen. Wie Sie daraus sehen können, funktionieren die Schriftgrößen hier nicht wirklich. Was wir also tun werden, ist damit zu beginnen all das zu reparieren. Klicken wir hier hoch und bearbeiten dann die Seite. Ich möchte also, dass das viel kleiner ist. Vielleicht auch das kleiner. Ich möchte, dass dieser kleine Platz hier am Rand der berührenden Bilder verschwindet. Wenn wir diesen Text verkleinern, wird das hoffentlich funktionieren. Klicken wir auf Site-Styles. Wir gehen zu Schriftarten. Dann können Sie all dies am besten verwalten , indem Sie auf jeden Teil der Seite einzeln klicken. Im Moment zeigt dies das Datum, an dem der Blog veröffentlicht wurde. Wir werden das in einer Minute ändern, aber lassen Sie uns das einfach viel kleiner machen . Also klicke ich auf diesen. Wie Sie hier sehen können, nehmen die verschiedenen Texte auf, die wir für die About-Seite eingerichtet haben , die dort in dieser Größe großartig war, aber wir möchten nicht, dass dies hier diese Größe hat. Was wir also tun werden, ist darauf zu klicken und es in Kostüm umzuwandeln. Es hat automatisch dieselbe Schriftart, Familie, Gewicht und Stil aufgenommen . Es ist jedoch die Größe dieser Angelegenheit. Das ist derjenige, den wir fallen lassen wollen , um viel kleiner zu sein. Aber wenn wir es hier ändern, wird es es auf der About-Seite nicht ändern. Weil dies nur für dieses Element auf der Blogseite einen benutzerdefinierten Stil verwendet . Lassen Sie es uns also auf ein viel kleineres fallen, vielleicht 1,51,6, vielleicht 1,7. Das gefällt mir. Es ist etwas klein und subtil, aber es ist immer noch in derselben Schrift vorhanden. Also jetzt geht der Titel auf, zu dem geht, ich schätze, was wir auf den anderen Seiten gemacht haben. Wir ändern das in Rubrik drei, nur weil es etwas kleiner war. Da sind wir los. Das ist jetzt viel ordentlicher. Und wie Sie sehen können, berühren sich diese beiden Bilder. Was wir jetzt haben, ist die perfekte Darstellung von Bild, Titel des Blogs und eine kleine Einführung darüber, worum es in Ihrem Blog geht. Aber ich will immer noch eine Sache hier. Ich denke aus Sicht des Benutzers ist es besser, unten eine kleine Schaltfläche „Mehr lesen“ zu haben , damit die Benutzer genau wissen, wo sie klicken müssen, um diesen Blog zu lesen. Also lass uns zurückgehen. Also komme ich hierher und klicke auf Abschnitt bearbeiten. Wenn du hier drin willst, kannst du mit dem anderen Layout herumspielen. Du kannst sie Seite an Seite haben, also sitzen sie nebeneinander. Auch hier wird in den ursprünglichen Schriftgrößen zurückgebracht , die dort waren. Und wähle die gewünschte aus und dann kannst du es bearbeiten. Mauerwerk-Blog. Nun, so haben wir das quadratische Bild oben mit dem Text unten. Das sieht ziemlich cool aus. Aber ich mag es nicht, wie die Dinge darin nicht wirklich übereinstimmen. Ich gehe zurück zu dem, was wir ursprünglich hatten, die abwechselnde Breite nebeneinander, voll, unzufrieden damit. Bilder. Nun, wenn du sie etwas kleiner willst, spiel damit hier herum. Aber um ehrlich zu sein, bin ich mit dem Platz zufrieden. Ich denke, das ist ein schönes Layout, etwas Platz zum Atmen gibt hier oben und unten etwas Platz zum Atmen gibt. Dann spielen Sie hier noch einmal um die Textausrichtung herum, egal ob Sie den Auszug zeigen möchten oder ob Sie es dem Experten nicht zeigen möchten, aber das will ich auf jeden Fall drin. Dann lesen Sie mehr Link. Das ist der, den ich will. Zeig das. Da sind wir los. Das ist, das ist unterstrichen. Benutzer wissen, dass Sie darauf klicken , um sie zum Block zu bringen. Das ist perfekt. Ich bin sehr, sehr zufrieden mit dem Layout dieser Seite. Wie immer können Sie auch hier die Farbe des Hintergrunds ändern und in Farben kommen, wenn Sie es in gelb mit schwarzem Text haben möchten . Das sieht auch cool aus. Was auch immer Sie glauben, funktioniert für Ihre Website basierend auf der Farbpalette , die wir zuvor ausgewählt haben. Aber ich bleibe bei dem leuchtenden Rosa. Dies ist der Hauptteil unserer Website, und dies ist die Hauptfarbe, meine Primärfarbe, die wir dort im Header-Navigationsknopf verwenden. Also bleibe ich dabei. Okay, also hier oben und spare. Was mit der Vorlage geliefert wird, ist für Blogs, die bereits erstellt wurden. Wir wollen diese nicht benutzen. Wir werden sie löschen. Aber zuerst klicken wir einfach auf den ersten und sehen, wie es aussieht. Okay, also nochmal, das nimmt den anfänglichen Stil und ersten Designelemente aus den Vorlagen auf. Ich muss hier ein paar Dinge ändern. Wie Sie sehen können, verwendet es die Originalschrift , die mit der Vorlage geliefert wurde. Kommen wir also herein und bearbeiten. Klicken Sie hier um den Abschnitt zu bearbeiten. Hier sind dieselben Optionen wie immer. Wenn du mit der Breite dieser Seite herumspielen willst, komm hier rein und setze auf „schmal“. Sie können mittel haben, noch breiter, wie es die ganze Seite ausfüllt. Wenn Sie die Textausrichtung wünschen, wenn Sie alles zentralisieren möchten, wählen Sie diese hier aus. Ich mag die Art und Weise, wie wir es eng hatten, und ich mochte es irgendwie, dass der Text ausgerichtet blieb. Ich werde das wieder darauf zurückbringen, wie es war. Ich bin mit allem zufrieden mit der Meta-Beschreibung. Nun, das nochmal, es benutzt das Datum. Aber was ich hier machen möchte ist das Gleiche wie auf der Homepage. Ich möchte, dass es der Katalysator ist. Wenn ich darauf klicke, wird noch nichts angezeigt und ich zeige Ihnen wie und wo und warum. Das solltest du sehr bald ändern. Aber ich möchte das Date herausnehmen. Ich glaube nicht, dass das Datum , an dem dies gestellt wurde für meine Website wichtig ist. Vielleicht ist es für deins. Wählen Sie aus, was Ihrer Meinung nach am besten für Ihre Website funktioniert. Und ich schalte das Datum aus. Im Moment sieht es leer aus. Aber wenn wir Kategorien eintragen, die angezeigt werden, wieder Farben, ändern Sie den Hintergrund hier, wenn Sie auswählen möchten, was für Sie funktioniert, aber ich bleibe einfach bei dem Rosa, das Sie haben wollen auf der Blogseite sollte immer noch so angezeigt werden, wenn Leute zu meinem Blog kommen. Okay, also bin ich mit allem da zufrieden. Aber was ich ändern muss, ist die Schriftart, die hier aufgebraucht wird, die Textschrift. Ich bin sehr zufrieden damit. Das nimmt nur den regulären Absatz auf. Dies verwendet jedoch eine andere Schriftart als die alte Originalvorlage. Ich möchte dieselbe Überschriftenschrift wir anderswo auf der Website verwendet haben. Also klicke ich wieder hier auf Site-Styles, gehe zu Schriftarten, markiere diesen Text und gehe dann nach unten, um Stile zuzuweisen. Wie Sie hier sehen können, haben wir dies früher bearbeitet. Es war der Seitentitel, der Titel der mobilen Website und die Seitennavigation . Diese Elemente können Sie hier oben sehen, was wir jetzt bearbeiten möchten, ist der Blogbeitrag. Lasst uns also in den Titel gehen. Es ist gerade benutzerdefiniert, aber ich möchte, dass es unsere ursprünglichen Überschriften sind. Lassen Sie uns es also wieder auf diese Größe ändern während ich eine der bereits ausgewählten auswählen kann Rubrik drei funktioniert weiterhin für mich. Ich mag die Größe davon, also behalte ich es so wie es ist. Das sieht gut aus. Es verwendet unsere reguläre Headline-Schriftart, reguläre Absatzschrift. Also lass uns zurückgehen. Ein weiterer Teil war jedoch der Metta, der hier oben erschien. Jetzt habe ich das einfach rausgeholt. Nun, lasst uns einfach in die Sache gehen. Und lassen Sie uns die Schriftfamilie erneut in die Puffin Arcade Chrome ändern . Du wirst in einer Minute sehen, wie das aussieht , aber lass uns einfach zurückgehen. Metta-Größe, während wir das auf der Blogseite auf 1.7 setzen, ändern wir das einfach wieder auf 1.7. Ich zeige dir in einer Minute, wie das aussieht sobald wir den ersten Blog eingerichtet haben. Aber du kannst immer wieder hierher kommen und es trotzdem ändern. Also lass uns zurückgehen. Okay, was die Anzeige hier angeht, bin ich damit zufrieden. Was Sie unten sehen, ist die Navigation zum nächsten Blog. Dies wird den Titel zeigen und es wird hin und her gehen. Und das benutzt unsere reguläre Headline-Schriftart. Also behalte ich das so wie es ist. So wie ich diesen eingerichtet habe, erscheint jetzt jeder einzelne Blog. Auf diese Weise. Es wird den gleichen Abstand auf der Seite haben. Es wird dieselben Überschriftenschriften und dieselbe Body Copy haben. Jetzt zeige ich dir, wie du deine eigenen Blogs zu dieser Seite hinzufügst . Zwei verschiedene Möglichkeiten , dies zu tun. Zuallererst können wir einen dieser Blogs nehmen, der bereits da ist und ihn bearbeiten. Oder wenn wir einfach mit unserem eigenen anfangen wollen, klicken Sie einfach hier auf das Plus. Ich zeige Ihnen zunächst, wie Sie eine bereits vorhandene bearbeiten können, nur um Ihnen eine gute Vorstellung davon zu geben, was Setup ist und wie es für Benutzer angezeigt wird , die auf Ihre Website kommen. Nehmen wir einfach das erste hier. So sieht es im Moment aus. Und wenn ich hier auf die Punkte klicke, kann ich die Einstellungen ändern. Hier sind also verschiedene Einstellungen und wir werden sie einfach einzeln durchlaufen damit ich Ihnen zeigen kann, was getan werden muss. Wenn die Blogs des wichtigsten Teils Ihrer Website sind, stellen Sie sicher, dass jedes Element, das Sie hier hinzufügen, korrekt ausgeführt wird. Zuallererst Bild, nun, das ist ein Bild von Seife. Wir möchten, dass ein weiteres Videospiel-Bild hier reingeht. Also entferne das Bild. Ich schreibe zunächst einen Blog über Zeitkrise, das Schieß-Arcade-Spiel, das ich in den 90ern geliebt habe. Also lade ich einfach dieses Bild hoch , das ich von diesem Spiel gespeichert habe. Wir gehen und gehen jetzt aus. Dies ist der Satz , der für jeden in verschiedenen Teilen Ihrer Website erscheint . Von der Homepage bis zur Blog-Seite ist also ein einfacher, gerader Satz, der ganz klar erklärt , worum es im Blog geht. Also habe ich bereits einen Auszug für die Zeitkrise geschrieben. Zeitkrise ist eine erstklassige Spionage-Shooter-Serie von Arcade-Spielen von Nam Co., die 1995 eingeführt wurde. Es erklärt also nur, was das Spiel ist, wenn es herauskam, wer es produziert hat, weiß genau, was sie lesen werden. Als nächstes hier unten ist dies die Post-URL. Dies verwendet wieder den URL-Slug, der zuvor vorhanden war, aber ich möchte nicht, dass es den Soap-Making-Prozess sagt. Ich möchte, dass der Blogbeitrag Zeitkrise sagt. Also kopiere ich das einfach und füge es hier ein. Autor, nun, das bin ich selbst. Wir haben hier nur einen Autor eingerichtet. Sourceurl, mach dir darüber keine Sorgen für diese Art von Dingen. Dann komm in Optionen. Status. Hier können Sie einrichten, ob es sich um einen Entwurf handelt, etwas, das Sie gehen Was ist später los, oder Sie können ein anderes Datum festlegen , an dem der Beitrag erscheinen soll. Ich lasse das einfach wie hier veröffentlicht. muss ich nicht ändern. Jetzt lass uns zurückgehen. Hier können wir Tags und Kategorien hinzufügen. Möglicherweise möchten Sie Ihren Beiträgen Tags hinzufügen. Die Kategorien sind diejenige, die ich mir im Moment ansehe, ich werde nur eine Handvoll Blogbeiträge haben. In einem Jahr. Ich hoffe, Hunderte von ihnen zu haben. Ich möchte Benutzern helfen, auf der Website zu navigieren und verschiedene Blogbeiträge zu lesen , die sich über verschiedene Bereiche und verschiedene Geräte beziehen. Klicken wir also auf Kategorien. Was ich hier schreiben werde, sind 990er Jahre, denn dies ist ein Videospiel aus den 990er Jahren. Und dann schreibe ich Arcade. Dies hilft mir, alle meine Blogbeiträge aufzuteilen. Wenn es aus den Achtzigern stammt oder verwende die Kategorie der 1880er Jahre. Wenn es Arcade, Arcade ist, natürlich wenn es Nintendo oder Sega ist, gehe ich in diese Kategorie ein. Wenn das erledigt ist, klicke zurück und komm dann zu SEL. Auch das bringt ihn nur zu dem , was zuvor da war. Lasst uns also den SEO-Titel in eine Zeitkrise ändern. Dann lege ich die gleichen Auszüge ein, die ich früher in der SEO gemacht habe. Für diejenigen unter Ihnen, die nicht wissen, was SEO ist, ist dies Suchmaschinenoptimierung. Und dies erleichtert es allen Ihren Blogbeiträgen und Ihrer gesamten Website, bei Suchanfragen bei Google zu erscheinen. Dies geschieht, indem der Titel und die Beschreibung in etwas geändert werden, das Wörter enthält, nach denen sie suchen würden. Wenn sie nach einem Beitrag über die Zeitkrise suchen , ist das zweimal hier drin. Es ist also wahrscheinlicher, dass Sie bei Google-Suchen einkaufen. Soziales Image. Dies geschieht, wenn jemand Ihren Blogbeitrag in sozialen Medien teilt . Sie brauchen hier kein Bild, aber Sie erhalten mehr Klicks, wenn die Leute sehen können, dass es auch darum geht. Fügen wir also genau das Bild , das wir gerade benutzt haben, tonne Krise. Los geht's. Sie sich keine Sorgen um Teilen und Standort. Das ist nicht wichtig für das, was wir hier machen. Also lasst uns das retten. Okay, wenn wir also auf diese Seite zurückkehren, werden Sie sehen, dass die Kategorie jetzt über dem Blogtitel angezeigt wird und sie eine sehr skurrile Accent-Schrift verwenden . Also das Backend des Blogbeitrags, das ist alles Setup, das ist alles einsatzbereit. Was wir jetzt tun müssen, ist den gesamten Beitrag zu bearbeiten. Klicken Sie also hier oben auf Bearbeiten. Offensichtlich ist die Hauptsache, die hier nicht stimmt, der Titel des Beitrags. Lasst uns das in eine Zeitkrise umwandeln. Dann haben wir hier ein Video. Ich will irgendwie nicht, dass das Video da ist. Wenn ich will, beginnt mit einem Bild. Bild hochladen. Auch hier verwenden Sie einfach das gleiche Bild, das wir anderswo für die Zeitkrise verwendet haben . Okay, das sieht cool aus. Jetzt haben wir den Beschreibungstitel, das Intro-Bild getroffen , und hier ist der gesamte Text. Das ist wieder etwas mit Seifen. Also werde ich das einfach hervorheben und einfach alle Texte einfügen , die ich für die Zeitkrise geschrieben habe. Es hat hier einige zusätzliche kleine Lücken hinzugefügt. Ich werde diese Lücke einfach löschen. Diese Lücke, halte alles zusammen. Ich möchte ihm nur eine zusätzliche Sache werfen , die ich bei jedem Beitrag machen werde. Ich möchte das in Aktion sehen. Also schmeiße ich ein kleines Video ein. Also ich werde es tun, hier zu klicken. Auf Video. Was Sie hier tun können, ist einfach den Link für ein Video von YouTube zu nehmen ein Video von YouTube und es hier einzufügen, so einfach ist das. Wenn wir also auf YouTube kommen, hier eine Reihe von Zeitkrisenvideos, die auftauchen. Also werde ich mich für dieses entscheiden, was ein langes Spiel des Spiels ist. Das Video beginnt abzuspielen und kommt dann einfach hierher, um den Link zu teilen und zu kopieren , den sie dir hier geben. Und dann geh zurück zu deiner Website und füge sie hier ein. Die Suche nach dem wurde erfolgreich gefunden. Und da sind wir los. So einfach ist das. Wir haben jetzt einen Blogbeitrag, der perfekt eingerichtet ist. Bild, Introtext, Video, Text. Also ist dieser jetzt perfekt eingerichtet, komm hier hoch, um zu sparen. Jetzt haben wir einen, den Sie hier sehen werden, jetzt hat es den richtigen Titel und die richtige Miniaturansicht für die Zeitkrise. Deshalb habe ich dir gezeigt, wie man einen Beitrag bearbeitet, der bereits da war. Jetzt, da wir das bearbeitet haben, möchte ich nicht, dass diese anderen drei hier sind. Also nehme ich diese einfach und lösche dann alle drei. Okay, also haben wir jetzt einen Blogbeitrag und dann haben wir zwei verschiedene Möglichkeiten, einen neuen hinzuzufügen. Klicken Sie also hier auf die Anzeige und folgen Sie den Anweisungen , die ich Ihnen gerade gegeben habe. Lassen Sie uns also das Titelbild, Haupttext, eingeben und dann ein weiteres Video hinzufügen. Okay, jetzt ist mein Street Fighter 21 hier perfekt eingerichtet. Also lasst uns das aufheben. Und es sind immer noch Entwürfe. Also komm hierher zu Einstellungen. Befolgen Sie die gleichen Regeln für diese Teile. Ihr Blog ist bereits perfekt eingerichtet , weil es den Namen des Titels annahm. Optionskategorien, die 1990er Jahre auch. Und wie Sie sehen können, wurde diese Kategorie bereits ausgewählt. Also wähle einfach das aus. Füge keine neue Kategorie hinzu , da sie bereits existiert. Das war bei Nintendo beliebt. Das ist also eine neue Kategorie. Befolgen Sie erneut die gleichen Regeln. Stellen Sie sicher, dass dies gerade veröffentlicht wird. Befolgen Sie die gleichen Regeln für SEO, Social Image usw. und klicken Sie dann auf Speichern. Und jetzt zeigt es hier oben die Meta-Beschreibung an. Das ist also ein weiterer perfekter Beitrag. Das ist also eine Möglichkeit, ein neues hinzuzufügen. Eine andere Möglichkeit ist, dass Sie hier anklicken und duplizieren können. Sie können einen alten Beitrag aufnehmen , der genau auf die gleiche Weise eingerichtet wurde. Aber stellen Sie einfach sicher, dass Sie sich der sozialen Medien bewusst sind, die Exits, das Miniaturbild und alles dergleichen teilen . Und stellen Sie einfach sicher, dass Sie nicht wiederholen was Sie für ein anderes Poster getan haben. Ich denke, dass die Verwendung des Pluszeichens und Hinzufügen eines neuen Beitrags der beste Weg ist. Füge ein paar verschiedene Blogbeiträge hinzu. Sie möchten keine brandneue Website mit nur einem einzigen Beitrag starten . Hab ein paar. Ich füge hier noch zwei hinzu. Und dann gehen wir durch und schauen uns an, wie die Homepage und der Rest der Website aussehen. Jetzt haben wir vier Live-Blogs. 12. Deine Website: Okay, also hier bin ich wieder auf der Blog-Seite, der gesamten Blogseite, und ich kann ein paar Fehler erkennen, die ich für jeden Grafikdesigner Standard gemacht habe . Finde ein Problem, geh rein und repariere es. Also zuerst, wie Sie hier sehen können, wo ich die Kategorie hier ganz oben steht , Nintendo der 1980er Jahre. Es zeigt immer noch das Datum an, an dem ich das nicht haben wollte. Nehmen wir das also. Ich komme hier rein, um die Seite zu bearbeiten, zu bearbeiten und zu sehen, was ich falsch gemacht habe. Hier unten haben wir also Textausrichtung usw. primäre Metallinhalt ist Kategorien, weil ich sekundären Metallgehalt als Datum habe. Also zeigt es mir beiden, was ich will, dass das leer ist. Wenn ich das in „ None“ ändere, gehen wir los. Das Schöne daran ist, wenn ein Benutzer hier kommt, wie Sie sehen können, das tatsächlich ein Linkkanal ist. Wenn also jemand darauf klickt, zu einer anderen Seite, auf der alle Blogs der 1880er Jahre angezeigt werden. Wenn sie hier runterkommen und auf Nintendo klicken, werden ihnen alle Nintendo-Blogs angezeigt. Deshalb ist es wirklich nützlich, dies auf Ihrer Blog-Seite zu haben , die den Menschen hilft, sich selbst zu navigieren. Das ist also eine sehr einfache schnelle Lösung dort. Der nächste. Vielleicht haben Sie das oben in der Navigationsleiste bemerkt, oder jedes Wort ist irgendwie durchgestrichen. Ich will das nicht, denn das deutet fast darauf hin , dass es nicht die Live-Seite ist, als wäre sie nicht fertig oder so. Ich möchte, dass die Leitung einfach darunter sitzt. Also habe ich hier offensichtlich etwas falsch eingerichtet. Gehen wir also hier hoch und ändern die Website-Stile. Etwas stimmt nicht, was ich hier gemacht habe. Also gehe ich zu den Schriftarten und klicke auf diese. Das ist also die Seitennavigation. Also schien alles richtig zu sein Hier kann die richtige Schriftart, das richtige Gewicht, das herunterfallen lassen. Eigentlich glaube ich, dass mir die 500 dort gefällt. Die Designer-Sache. Ändere deine Meinung später. Ich glaube, es ist das hier, Zeilenhöhe. Ich denke, das ist das Problem, weil ich es auf 0 eingestellt habe und es muss sein, ja, das ist es da. Das ist großartig. Was ich will, ist nur die Zeile, die unter dem Wort sitzt. Unter dem Namen der Seite, auf der wir uns befinden, denke ich 1,5 dort. Das ist gut. Jetzt, da ich meine Probleme behoben habe, schaue ich mir die gesamte Website an. Klicken wir also hier auf das Logo und gehen zur Homepage. Dieser Header ist immer noch großartig und perfekt. Dieser Einführungsheld sieht gut aus. Jetzt los geht's. Dies ist, wo sich das geändert hat. Jetzt haben wir unsere eigenen persönlichen Blogs hier drin, und Sie können Ihre eigenen persönlichen Blogs hier haben was es getan hat, ist, dass sie in der Datumsreihenfolge aufgeführt werden, obwohl wir nicht sagen, welche Daten es auftauchen, sie werden in Datumsreihenfolge angezeigt. heißt, wenn jede Woche jemand auf Ihre Website kommt und Sie jede Woche einen neuen Blogbeitrag hinzufügen. Das wird der erste sein, der hier angezeigt wird. In Bezug auf die Verwendung der Navbar hier oben wechselt die zwischen aktuellen und älteren Beiträgen. Und offensichtlich haben wir insgesamt vier. Jetzt. Wir haben Pac-Man, Super Mario, Street Fighter zwei und Zeitkrise, und sie sind in Datumsreihenfolge. Ein weiteres großartiges Navigationstool , das Benutzern bei der Suche hilft. Hier unten, wo wir Links zu diesen einzelnen Blogbeiträgen haben . Sie können auf das Bild klicken und das führt Sie auch durch. Sie können auf die Kategorien klicken, um nur Blogs in dieser Kategorie zu sehen. Also klicken wir auf Nintendo. Das zeigt mir nur die Nintendo-Posts. Ich habe nur zwei davon gemacht, Super Mario drei Street Fighter zwei, das sind die einzigen, die zeigen, ich interessiere mich für die 1980er Jahre. Klicken Sie darauf. Nur die Pac-Man Super Mario-Skala der 1980er Jahre. Also lass uns zurückgehen. Das sieht also absolut toll aus. Ich liebe es in Blogs hier , dass wir ihnen allen auf einmal gezeigt haben. Dann unser Einführungsbild und Links zur Kontaktseite und zu unserer Fußzeile. Perfekt, ich liebe es absolut wie diese Seite jetzt aussieht. Lass uns einfach aufs Handy gehen. Vollbildmodus. Ja, das sieht gut aus. Hier haben wir die Navigation hier, es zeigt zwei Blog-Posts gleichzeitig und ich kann durch ältere zurückblättern, ihn beenden oder Blogs beenden. Spielt sicher einen gemeinen Flipper. Wechseln Sie zu einem einzigen Porträtbild. Perfekt, aber der Typ in der Mitte, Mario, Luigi, er sieht jetzt toll aus. Nehmen Sie Kontakt auf. Dann die Fußzeile. Okay, das sieht genial aus. Werfen wir einen Blick auf die Blog-Seite. Auch perfekt. Diese Zeile sitzt jetzt unter dem Wort Blog. Hier sind alle unsere Blogbeiträge und dieser Text nimmt den perfekten Platz ein. Kategorie, Titel, Ausüben, Lesen Sie mehr und ein quadratisches Bild in ihrer Atempause oben und unten. Das sieht wunderschön aus. Wenn wir auf einen Blog klicken, können Sie auf das Bild klicken, mehr lesen oder den Titel. Das bringt Sie zu diesem Blogbeitrag, der Ihnen den gesamten Inhalt zeigt. Wenn Sie dann durch alte und neue Beiträge zurück und vorwärts scrollen möchten , haben Sie diese Navigation auch am Ende jedes Blogbeitrags. Also sind wir Street Fighter zwei. Sie werden den davor Super Mario drei nach dieser Zeitkrise sehen. Homepage sieht also gut aus. Blogseite sieht gut aus. Sehen wir uns die Seite „Über“ an. Ich liebe diese kleine Animation dort. Ich liebte diesen Hintergrund, sehr subtil, aber ein bisschen mehr Tiefe zu dieser Seite. Lesen Sie mehr Tickets bis zur Blog-Seite. Gute Zeiten. Du hast gerade das kleine Icon gesehen, das gerade in einer coolen kleinen subtilen Animation angezeigt wird. Das sieht gut aus. Also letzte Seite, Kontakt, die wir durch Klicken auf diesen Button oder klicken und uns melden können . Jetzt sind wir eine weitere nette Intro-Animation dort. Keine Kurven mehr auf diesem Bild, aber eine gut aussehende Kontaktseite mit einer Call-to-Action E-Mail-Adresse und führt Menschen zu unseren Social-Media-Seiten. Da sind wir los. Wir haben jetzt eine wunderschön aussehende Website mit einer erstaunlichen, coolen animierten Homepage mit viel Action und vielen aufregenden Elementen, auf die Leute klicken können. Coole aussehende Blogseite Über Seite und Kontaktseite. Ich hoffe also, dass Sie all diese Lektionen sehr genau verfolgt haben. Und das habe ich Schritt für Schritt mit mir durchgemacht. Und Sie haben jetzt Ihre eigene fantastisch aussehende Website , die entweder genau wie diese aussieht oder Ihre eigene brandneue persönliche, erstaunlich aussehende Website. Wenn Sie das haben, posten Sie dies hier im Projektabschnitt. Und ich werde mich so schnell wie möglich mit meinem Feedback zu Ihnen melden. 13. Squarespace Extras: Inzwischen sollten Sie also eine fantastisch aussehende Website haben , Sie wirklich, sehr zufrieden sind. Wir verwenden immer noch nur die Testversion. Also niemand sonst auf der Welt kann diese Website wirklich sehen, nur du. Aber wenn du es für die ganze Welt lebendig machen willst , ist es ganz einfach. Klicken Sie hier unten einfach auf die Schaltfläche Abonnieren und wählen Sie aus, welches Paket für Sie am besten geeignet ist, da es sich nur um eine persönliche, sehr kleine Website handelt, wahrscheinlich diese die pro Monat ist, für Sie funktioniert. Sie werden hier auch sehen, dass es eine kostenlose benutzerdefinierte Domain enthält. Ich zeig dir, was das heißt. Wenn wir also hier reinkommen und zu Einstellungen gehen, klicken Sie auf Domains, die Sie hier sehen, auf denen Cricket-Giraffe, H4, dn usw. steht . Das ist bisher der Domainname unserer Website. Wenn Sie es also mit jemandem teilen möchten, teilen Sie diese URL. Das ist nicht cool und es hat nichts mit dem zu tun, worüber wir hier schreiben. Wenn Sie sich jedoch bei Squarespace anmelden , können Sie Ihr persönliches auswählen, und das ist alles in den Gesamtkulturen enthalten. Wenn ich also hier anklicke, bekomme eine Domain. Es nimmt zuerst den Titel Ihrer Website an und zeigt Ihnen, ob dieser als Domainname verfügbar ist. Leider ist GameOver.com nicht verfügbar. Ich bin nicht die erste Person , die darüber nachdenkt. Davon gibt es verschiedene Variationen. Du könntest Spiel über Video oder sogar GameOver Ninja haben, aber das will ich nicht. Ich möchte am Ende just.com , denn das ist es, was uns gemeinsam ist. Probieren wir einfach etwas anderes aus. Vielleicht Spiel über Log n. Ja, GameOver blog.com das ist verfügbar. Also wähle ich das aus. Wenn Sie also all dieses Setup haben, haben Sie eine Live-Website und sie verwendet einen richtigen Domainnamen. Wenn Sie wieder hierher kommen, können Sie hier mit allem herumspielen, wie ich bereits sagte, schauen Sie sich einfach alles an, sehen Sie sich an, was für Sie funktionieren wird. In Bezug auf Marketing können Sie E-Mail-Kampagnen einrichten. Sie können an SEO, Suchmaschinenoptimierung arbeiten Suchmaschinenoptimierung und dies in Ihren eigenen sozialen Medien bewerben. Komm her und du kannst ein paar Instagram-Geschichten erstellen so weiter. Da gehst du. Sie haben jetzt eine erstaunlich aussehende Website, die Sie selbst mit Ihrem Stil erstellt haben. Es ist live, hat einen Domainnamen. Sie können es bewerben und es aufbauen und einfach immer mehr Follower aufbauen und die beliebteste Website der Welt oder zumindest die beliebteste Website der Welt werden die beliebteste Website der Welt . Es geht um Retro-Spiele von 1985 bis 95. Prost. 14. Vielen Dank: Danke, dass du dir diese ganze Klasse angeschaut hast. Ich hoffe, das hat Ihnen viel über Website-Design beigebracht. Und du hast jetzt eine fantastisch aussehende Website , die du mir zeigen möchtest. Wow, wenn ja, poste es hier im Projektabschnitt, und ich werde mich so schnell wie möglich mit meinem Feedback bei Ihnen melden . Auch wenn Sie Fragen zu irgendetwas haben, das ich in der gesamten Klasse behandelt habe , die hier im Diskussionsbereich veröffentlicht wurde . Und noch einmal werde ich Ihnen so schnell wie möglich antworten . Während du da bist. Stellen Sie sicher, dass Sie auf meinen Namen klicken und mein gesamtes Profil sehen. Hier drin. Sie werden ein paar Klassen zur Verwendung des Elementor-Seitenerstellers mit WordPress finden des Elementor-Seitenerstellers mit , die vielleicht etwas komplex erscheinen, aber ich werde Sie über alles informieren, was Sie wissen müssen wenn Sie sich aufbauen möchten Ihre Webdesign-Fähigkeiten. Sieh dir diese an. Auch. Stell sicher, dass du mir folgst und dann wirst du es herausfinden sobald ich eine brandneue Klasse hochlade. Genial, Habt einen tollen Tag.