Du kannst in 30 Minuten eine schöne Portfolio-Website auf Squarespace erstellen (GRATIS Foto-Paket enthalten) | AJ Burt | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Du kannst in 30 Minuten eine schöne Portfolio-Website auf Squarespace erstellen (GRATIS Foto-Paket enthalten)

teacher avatar AJ Burt, Learning is Living Better

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

8 Einheiten (45 Min.)
    • 1. Einführung und Projekt

      1:05
    • 2. Kostenloses Foto Pack vom Tod zum Stockfoto

      0:46
    • 3. Erste Schritte: Forschung und Vorlagen

      4:33
    • 4. Inhalte hinzufügen: Einrichtung deiner Benutzeroberfläche, Hochladen deiner Arbeit

      11:01
    • 5. Inhalte hinzufügen: Verkaufen von Produkten, Erstellen von Blog-Beiträgen und mehr!

      7:36
    • 6. Squarespace Design Essentials

      12:17
    • 7. Deep in Design: Pushing an den Vorlagen

      7:40
    • 8. Herzlichen Glückwunsch und vielen Dank!

      0:19
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

2.404

Teilnehmer:innen

1

Projekt

Über diesen Kurs

„Ich benutze Squareaspace seit ein paar Jahren, aber das ist ein toller Kurs und gab mir einen Einblick in die Frage, die ich mir nicht bewusst war. Danke!" – Michelle R

Eine der häufigsten Fragen, die ich von Menschen bekomme ist, wie sie in das Webdesign einsteigen können. Entgegen der populären Meinung ist die Entwicklung von coding nicht mehr notwendig um dies zu tun (nicht zu versuchen, die Bedeutung der Codierung zu diskreditieren, aber für viele Menschen ist es nicht erforderlich, ihre Ziele im Webdesign zu erreichen). Squarspace ist eine meiner bevorzugten Plattformen, um Menschen in das Webdesign zu bringen, weil es einfach zu bedienen und professionelle, gut gestaltete Vorlagen gibt.

Ziel dieses Kurses ist es, dich in kürzester Zeit in Squarespace zu bringen und dich in die Gestaltung zu starten. Wir werden nicht viel Detail machen – das Ziel ist es, dir zu zeigen, wie einfach es ist, zu beginnen, nicht mit Informationen zu verkraften. Allerdings wirst du in einige sehr grundlegende UX/UI Best Practices eingeführt und sogar eingeführt, wie du CSS verwenden kannst, um dein Design zu beziffern (es ist wieder kein eigentliches Schreiben von Code erforderlich).

Triff deine:n Kursleiter:in

Teacher Profile Image

AJ Burt

Learning is Living Better

Kursleiter:in

Learning is my passion. I've always pursued learning outside of traditional academic settings. I've taught myself programming, graphic design, marketing, business planning, investing, cooking, ballroom dancing, yoga, animation, and so much more without a professional teacher and by paying next to nothing. I've used this to turn my degree in anthropology to a career in business and marketing, and it's been so rewarding yet easy to do that I realized I simply had to share it with others. That's why I signed up to teach on Skillshare.

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung und Projekt: Hi. Mein Name ist tiefer und ich bin so aufgeregt, das endlich zu teilen. Eine der häufigsten Fragen, die ich von Leuten bekomme, ist, wie ich in ein Design komme oder ich brauche diese bestimmte Website. Kannst du es für mich entwerfen? Und ich sage ihnen normalerweise Nein, nicht, weil ich ihnen nicht helfen will. Denn Webdesign ist eigentlich zugänglicher denn je für die durchschnittliche Person. Und ich fühle mich, als wären die Werkzeuge da draußen. Du solltest wirklich nicht für etwas bezahlen. Du kannst dich einfach selbst in dieser Klasse machen. Ich werde Ihnen sehr schnell vorstellen, wie Sie squarespace verwenden können. Bauen Sie ein Portfolio für sich selbst. Sie können es tatsächlich tun und lieben von 30 Minuten. Es ist nicht so schwer, und er braucht keine Codierung. Das Klassenprojekt wird alles sein, was Sie haben, um es zusammen mit dem Video zu tun. Sie können die gleiche Zeit verwenden, aber ich tue oder Sie finden eine Ihrer eigenen. Und wenn Sie etwas anderes als ein Portfolio erstellen möchten, ist das völlig in Ordnung. Ich dachte nur, dass es schön wäre, für Ihre Benutzer, insbesondere, haben einen Platz, um ihre Arbeit zu präsentieren, vor allem im Web. Also, das ist richtig. Wenn ich das getan hätte 2. Kostenloses Foto Pack vom Tod zum Stockfoto: Alle Fotos auf dieser Website sind also vom Tod bis zum Foto. Ich bin hier tatsächlich auf sie gestoßen, in einem Projekt, das ihre Schöpfer in eine der Klassen hochgeladen hatten, die ich nahm. Ich habe ihre kostenlose Version für eine wirklich lange Zeit verwendet. Die monatlichen Fotopackungen verschicken sie. Und ich mochte es so sehr, dass ich am Ende tatsächlich nur upgraden und bekommen ihre Abonnement-Service. Sie waren eigentlich sehr gnädig und haben ein kostenloses Fotopaket für euch gespendet. Sie können dem Link hier folgen, um darauf zu gelangen. Das Passwort ist nur skaliert. Teilen Sie alle Kleinbuchstaben, keine Leerzeichen. Und wenn Sie das Fotopaket mögen, wenn Sie die Fotos mögen, die Sie auf der Website sehen, sollten Sie sich zu ihrer monatlichen E-Mail anmelden, die kostenlos ist. Und wenn Sie es wirklich mögen, gehen Sie weiter und versuchen Sie ihre Abonnement-Plan. 3. Erste Schritte: Forschung und Vorlagen: Eines der wichtigsten Dinge, die Sie tun können, beginnend und entwerfen einer Website ist Forschung. Und wissen Sie, oft kann dies als der am wenigsten UNP-Teil des Webdesigns angesehen werden. Aber es ist wirklich wichtig, und Sie werden sich später bedanken, denn wenn Sie dies nicht tun, werden Sie zu all dieser Arbeit der Gestaltung Ihrer Website gehen. Und wenn es fertig ist, werden Sie anfangen, sich Ihre Konkurrenz anzusehen und all diese Dinge zu erkennen, die Sie anders hätten tun können. Und dann gehst du es am Ende zurück und schaffst mehr Arbeit für dich selbst. Also gleich von der Fledermaus, ähm, finde heraus, welche Art von Kategorie-Websites in? Also für dieses Projekt machen wir ein Fotoportfolio und schauen uns einfach um, was andere Leute mit ähnlichen Websites tun. Es ist völlig in Ordnung. - Teoh. Nimm die Ideen anderer Leute und repliziere sie. Wenn du damit anfängst, wirst du feststellen, dass viele Leute dasselbe tun, und das ist OK. Normalerweise, wenn Menschen auf dem gleichen Gebiet, sie tun dasselbe, ist es, weil etwas daran funktioniert und kopiert, das ist keine schlechte Sache. Äh, Sie können völlig Ihre eigene Nacht auf jeder Website bekommen, indem Sie andere Dinge optimieren. Ich denke, Dinge, die dich wirklich auf wichtige Weise unterscheiden. Also habe ich bereits durchgemacht und auf Google gesucht nur für Top-Fotografie Blog Top-Fashion Lauds und schauen sich um, eines der Dinge, die ich wirklich bemerkte, ist, dass viele dieser Protokolle sind mit Grids. Ähm, was ich denke, es ist irgendwie ein wirklich schöner Blick. Also werden wir jetzt zu Squarespace gehen, und wir werden schauen und sehen, welche Vorlagen sagen, die in dieses allgemeine Layout passen könnten . Also werden wir hier anfangen und Sie werden sofort sehen, dass sie diese kleinen Kategorien sind und tatsächlich eine Kategorie für Portfolio haben. Also lasst uns einfach darauf klicken und rechts von der Fledermaus sehen, dass sie 123 Fuß über Diebe haben , äh, irgendwie wie das Aussehen dieses hier. Wie habe ich eine Grenze um die Fotos, wie einige dieser anderen machen? Ich mag die Tatsache, dass erstreckt sich auf den gesamten Bildschirm, und es ist die am meisten verwendet, um diese Aussage. Um, gehen wir weiter und klicken Sie auf das im Punktebereich. Sie können tatsächlich rechts auf dem Computerbildschirm klicken und sie werden Sie zu einer Lebensvorschau der Website führen. Also sehen wir, dass hier eine Art von netten Hover-Effekten ist. Wenn Sie ein Bild ausgeschlagen haben einige dieser anderen Strände, es hat einige ziemlich Standard normale Seiten, die bereit ist. könnten wir total arbeiten. Also ja, ich denke, das wird ein großartiges Wesen für dieses Projekt sein. Also lasst uns einfach schlagen. Beginnen Sie mit diesem Design und squarespace wird Sie bitten, Ihre persönlichen Informationen einzugeben um Ihre Camp-Community so schnell zu bekommen. Und da gehen wir während der gleichen suchen, die ich Ihren Zweck getroffen habe oder einfach nur etwas Persönliches zu tun. Aber wir wollen auch einige unserer Drucke auf dieser Seite verkaufen. Wir werden Autos dafür für den gleichen Titel schlagen. Steck einfach rein, was du willst. Sie können Ihren Namen setzen, wenn Sie dort eine kreative Idee haben. Wir werden nichts in die Geschäftsinformationen für Männer setzen, aber wenn Sie das tun, haben Sie ein Studio oder einen Arbeitsplatz oder etwas,das Sie auf Ihrer Website aufgeführt haben wollen. Wir werden nichts in die Geschäftsinformationen für Männer setzen, aber wenn Sie das tun, haben Sie , Gehen Sie voran und tun Sie das, wenn Sie eine P o Box haben. Ähm, das war ziemlich einfach. Also, jetzt haben wir diese Vorlage alle eingerichtet. Uh, und wir könnten sterben, wenn direkt in irgendetwas. 4. Inhalte hinzufügen: Einrichtung deiner Benutzeroberfläche, Hochladen deiner Arbeit: tatsächlich bei der Hochzeitsansicht, was bedeutet, dass wir auf die Dinge klicken und sie ändern können. Sie können zwischen dem alles, was Sie und die Lebensvorschau Ihrer Website umschalten, nur die Flucht zu bekämpfen. Aber lasst uns das machen. Sie sehen, es bewegt sich nach oben, und jetzt ist alles anklickbar, genau wie normalerweise auf Ihrer Website zu entkommen, um zurück zu gehen. Und Sie können auch tatsächlich darauf klicken. Sie sind oben links. Schalten Sie auch die Ansichten ein. Ähm, so ziemlich die einzigen zwei Abschnitte, die wir für diesen Kurs verwenden müssen, sind die Seiten im Wissenschaftsbereich. Der Seitenbereich ist alle Seiten auf Ihrer Website. Dieser erste Hauptnavigationsbereich ist, was hier in dieser oberen Leiste angezeigt wird und der nicht verknüpfte Abschnitt sind Käfige, mit denen Sie nicht in Ihrer oberen Leiste verlinkt werden möchten. Lassen Sie uns einfach direkt in den Designbereich springen und beginnen, einige Dinge zu ändern. Was ersetzt diesen Text hier durch unser Logo und mein Auto? Uh, es ist wahrscheinlich eine gute Idee, wenn Sie ein quadratisches Symbol dafür bekommen können, und es gibt eine Menge von Websites, die immer noch für Sie generieren. Sie können einfach Google nach einem von Clinton Generator suchen. Also, da wir dio Ich werde nicht einen Slogan in, aber wenn Sie tun möchten, würde das direkt unter diesem auf dieser Vorlage zeigen. Also denke ich, dass wir dort gut sind. Gehen wir zurück. Also eine andere Sache, die ich vom Bett abschreiben wollte, ist entfernt. Diese Macht durch Squarespace Abschnitt. Lass uns weitermachen und das ausziehen. Mal sehen. Und so werden Sie feststellen, ist, dass ich sie über verschiedene Abschnitte sieht es an. Aber diese Papa und so ziemlich alles, was Sie klicken können, können Sie einfach hinzufügen. Es bedeutete wirklich, Sie sehen, wenn wir auf die Schaltfläche bearbeiten Materie Logo klicken, es bringt uns direkt zurück zu dieser Seite, wo wir das Logo in erster Linie hochgeladen. Es gibt also viele Möglichkeiten, an den gleichen Ort im Squarespace zu gelangen, was wirklich hilfreich ist. Eine andere Sache, die ich direkt aus der Fledermaus machen möchte, ist mit all diesen Vorlagen. Squarespace hat viele von ihnen kommen mit vorinstallierten Arten von Demo-Seiten, und wir brauchen keine von denen wirklich. Manchmal ist es hilfreich, die gelesene Seite zu behalten. Nur ein Sie gehen über die Dinge auf der Website zu ändern, können Sie feststellen, dass Sie Referenzen zurückkommen möchten. Lassen Sie uns das einfach in den Abschnitt „Nicht führen“ fallen, der fertig ist. Lasst uns alle anderen durch diese Führung gehen. Und so jetzt alles, was wir mit dieser Haupt-Homepage und Squarespace übrig haben, würde uns tatsächlich diese Homepage löschen lassen, bis Sie eine neue erstellen. Also lasst uns das einfach schnell machen. Ähm, wenn Sie diesen Plusknopf drücken, bringt es Sie zu einer Klampe neue Seitensymbolleiste, und Sie haben eine Menge Optionen hier. Die Einzigen würden wirklich in diesem Tutorial unsere Seite, Blawg-Galerie und Index verwenden . Aber fühlen Sie sich frei, diese anderen zu erkunden. Also für die Homepage, können Sie hier sehen, dass Sie fühlte Homepage dafür einfach macht es Index. Also lasst uns das einfach benutzen, Yeah, lasst uns einfach diese Funktion aufrufen, wenn ihr sie darüber im Panel habt. Hier werden Sie dieses Zahnradsymbol sehen, und wenn Sie darauf klicken, wird es dieses andere Menü herausbringen, das wir setzen, es ist die Homepage bestätigen, und dann ziemlich jedes Mal, wenn Sie etwas in Squarespace ändern, Sie müssen sich daran erinnern, speichern zu drücken, aber das Ende. Lass uns das machen. Und jetzt haben wir diesen Funktionsindex und Sie sehen, dass der Experte dieses kleine Home-Icon ist , was bedeutet, dass , es eine Homepage ist, wann immer er reinkommen und den alten Impeach löschen kann. Es gibt also noch ein paar andere Seiten, mit denen wir in dieser Klasse arbeiten möchten. Schlitze auf einer neuen Seite aufgerufen. Und es hat tatsächlich das im Index geschaffen, den er durch die kleine L-Formlinie dort zugegeben hat. Also werden wir es einfach außerhalb davon schieben, weil wir es nicht in der Home-Abteilung wollen. Lassen Sie uns eine neue Seite erstellen. Es wird ein Block. Wir werden Nachrichten liefern. Bewegen Sie das auch raus. Okay, schließlich werden wir eine Produktseite hinzufügen, um unseren Prinzen zu verkaufen. Lassen Sie uns einfach diesen Prinzen nennen, und es ist auch wirklich einfach, die Reihenfolge dieser auf unserer Website zu ändern. Also ich denke, es macht ihm wahrscheinlich ein Gefühl, dass wir haben, dass wir Ihnen zuerst eine Sekunde geben und dann Last drucken. Also eine andere Sache, die wirklich gut ist, in Ihrer Navigation zu haben, eine Art von Kontaktieren Sie mich Link. Uh, ich wollte eigentlich für diese spezielle Website etwas anderes machen. Ich möchte eine Schaltfläche auf der Seite auf jeder Seite haben, auf die Sie klicken können, damit Sie einen Termin mit diesem Fotografen buchen können. Ähm, also lasst uns das hier in den Monteur setzen. , Jedes Mal,wenn du eine Seite auf Squarespace bearbeitest, wirst du diese kleine schwebende Art von Blase sehen. Und wenn Sie darauf klicken, können Sie Inhalte einfügen. Blöcke und Inhaltsblöcke sind eine Art der Bausteine wirklich einer Squarespace-Website und Sie können sehen, dass es hier nur eine Tonne von Optionen gibt und vielleicht jemand in der Zukunft werde ich eine Klasse machen, die über jede einzelne von ihnen zum Zweck der diese Klasse. Und wirklich, für die Zwecke dieser Websites, werden Sie nur drei oder vier Andi für diese spezifische verwenden. Squarespace hat tatsächlich in Form in Funktion integriert. Also lasst uns das einfach machen und diese kleine Werkzeugspitze erscheint. Wir werden das nennen, auf der Suche nach diesen Feldern waren. Die Formen werden passieren. Sie können sie hier sehen, um E-Mail, Adresse, Betreff-Nachricht zu nennen Adresse, . Ich denke, es gibt eine Rolle ziemlich angemessen für diese Lets out Salah Anzeige, ein Auswahlfeld, das sie die Zeit Links wählen können. Ich habe gerade angerufen und wir können ein paar Optionen setzen. Es gibt eine 15 Minuten, $50 30 $100 200 und alles in Ordnung lassen Sie uns dies zu einem Pflichtfeld machen. So dann erscheinen gibt es auch eine Speicher-Registerkarte. Sie können sehen, dass es automatisch sentiments Einsendungen dieser Formulare an jede E-Mail, die Sie für seine Rezepte mit registriert. Es ist wirklich einfach, das zu ändern, wenn Sie wollen, drücken Sie einfach die X-Taste, aber wir werden es einfach so lassen, wie es ist. Sie können auch zu Google Docks gehen, was eigentlich wirklich nützlich oft mal ist, wenn ich mehrere Leute, die eine Website verwalten auf haben wir diese tegra Formulare. Ich werde nur ein Formular erstellen, mit dem wir alle Einsendungen protokollieren können, die wir erhalten, was wirklich hilfreich sein könnte. Du könntest auch eine Verbindung mit Chimp herstellen. Wenn Sie eine Option Zehe automatisch wollen, fügen Sie Leute in Ihre Mailinglisten, aber wir werden das nicht wirklich tun. Es ist irgendwie jenseits des Umfangs dieser Klasse, also gehen wir hinüber, um voranzukommen. Äh, die meisten dieser Schwäche. Verlassen Sie das gleiche Zentrum. Du kannst es sehen. Bewegen Sie sich automatisch dorthin, äh, hat eine Nachricht gepostet. Lassen Sie uns ändern, um Sie zu denken. Und schließlich können Sie im Moment sehen, dass das Formular tatsächlich in den Monteur eingefügt wird, was wir nicht wirklich wollen, weil das unsere gesamte Seite aufnehmen wird und niemanden den den eigentlichen Inhalt sehen lässt . Da es also in unserem Monteur sitzt, werden wir tatsächlich einen bösen White-Box-Modus treffen. Aber Sie können sehen, nimmt eine ganze Farm und schläft dort drin. Und die Leute sagten nur Plan okay. Und dann für den allerletzten Teil davon, können Sie sehen, dass es immer noch diesen kleinen Textblock hier unten gibt, von wo der harte Squarespace-Text war, als wir das erste Mal erstellt haben. Also lassen Sie uns einfach voran und klicken und halten Sie auf, dass und Sie werden sehen, dieses Papierkorb-Symbol erscheint am unteren Rand. Wenn wir einfach dazu geschleppt und loslassen, ist es weg. Lass uns sparen und da gehen wir. Also, jetzt, da wir diese Art von nackten Knochen Benutzeroberfläche eingerichtet haben, lassen Sie uns hineingehen und anfangen, einige tatsächliche Inhalte zu haben. Ich finde immer, dass es einfacher ist, tatsächlich in der Climb haltbare Website hinzuzufügen, bevor Sie beginnen, durchzugehen und das Design zu optimieren. Denn wenn Sie das nicht tun, werden Sie normalerweise dieses Design in und aus dem Inhalt gehen und feststellen, dass Sie wieder hineingehen müssen . Tweak erwartet das Design später, und wir wollen wirklich eine Minute, meine Seite so viel wie möglich. Wir wollen uns nicht wiederholen und die gleichen Dinge immer wieder tun, denn das ist nur Zeit verschwenden. Also lassen Sie uns zuerst beginnen, indem Sie Sohn Bilder Toe sind Arbeitsabschnitt gekennzeichnet. Wir werden das tun, indem wir in Galerien erstellen, und das ist eigentlich ein bisschen langwieriger Prozess, all diese Bilder hochzuladen, weil alle Bilder die ich habe, tatsächlich ziemlich hoch rez sind, also können sie eine Weile dauern, bis sie hochgeladen werden. Also werde ich eigentlich nur diesen Abschnitt schnell vorwärts, also ist es nicht für dich unten mit dem 5. Inhalte hinzufügen: Verkaufen von Produkten, Erstellen von Blog-Beiträgen und mehr!: Okay, jetzt, da wir diese erste Runde von Bildern hochgeladen haben, können wir irgendwie sehen, wie diese können wir irgendwie sehen, wie diese Endprodukte auf der Homepage aussehen werden. Also lasst uns die Flucht treffen. Ich bin wieder in alles Abschnitt und lass uns zu unserer über Seite gehen. Also bekomme ich nur einen Platzhaltertext hier einfügen. Obwohl ich für Ihre eigentliche Website empfehle, geben Sie ein, was Sie eigentlich auf Ihrer Info-Seite wollen, denn das wird es einfacher machen, in vier Minuten zu entwerfen. Uh, es gibt zwei Möglichkeiten, in Text auf Squarespace zu basieren, ohne die Formatierung des ursprünglichen Textes zu übernehmen . Sie können entweder drücken Sie diese Schaltfläche Tempo Anzeige Text, oder Sie können einfach drücken Steuerverschiebung Mittlerer Osten es in es. Lassen Sie uns diese Absätze trennen. Lassen Sie uns diesen ersten Satz in ein Zitat verwandeln, und wir können das tun, indem wir diese kleine Blase wieder hier bekommen, um eine neue Blocksuche nach dem Zitatblock zu machen . Halten Sie es in, es angewendet, und das ist ein wenig Ebenen suchen. Lassen Sie uns voran und fügen Sie dort ein Bild auf zwei Arten hinzu. Übrigens, um Bilder in Squarespace hochzuladen, können Sie normalerweise entweder auf ein Bild klicken oder Sie können in den Ordner auf Ihrem Computer gehen und einfach dort regulieren, was manchmal nützlich ist. Okay, lassen Sie uns dort anwenden und es wird es oben auf dem ganzen Text eingefügt. Und ich glaube nicht wirklich, dass wir dieses riesige Bild gerade da sitzen wollen. Ziehen wir es tatsächlich zur Seite. Und in Squarespace, können Sie klicken und halten Sie auf Blöcke, um sie zu ziehen, und diese Linien werden angezeigt, so dass Sie irgendwie sehen können, wo sie gehen werden. Das stimmt also mit Seite Sophie zusammen. Sonst tut mir wirklich leid. Dann wird es dort hineinlegen. Lass uns dem Text etwas mehr Atemraum geben, damit du hier in die Mitte klickst, gedrückt halten kannst. Lass uns dem Text etwas mehr Atemraum geben, damit du hier in die Mitte klickst, gedrückt halten kannst Großartig. Und schließlich fügen wir hier einen weiteren Block hinzu. Suchen Sie nach dem nur eine Art Spaß wenig Viele Kontaktseiten haben dies. Im Moment lassen wir die Etiketten gelten. Stehen Sie ein wenig, gleich genial. Und da ist unsere über Seite. Lass uns zu Nachrichten gehen, jetzt wirst du dich erinnern. Das ist unsere gebloggte, und ich werde Ihnen nur zeigen, wie einfach es ist, einen schwarzen Beitrag zu haben, so dass es eigentlich zwei Möglichkeiten gibt, es zu tun. Sie können hier auf die Seite auf dem Panel gehen und diesen Ort schlagen schlagen. Oder Sie könnten einfach auf die Seite in der Navigation Ihrer Website und Hadad Post klicken. Also lasst uns das machen. Saß in unserem Titel. Etwas mehr Platzhaltertext. wir uns daran, diesen einfachen Text zu platzieren, so dass wir verlieren, bevor wir und ich sagte in einem anderen Bild, Bild, es ist immer eine gute Idee , übrigens, Art Bild mit Ihren Blockbeiträgen aufzunehmen, so dass, wenn Sie es teilen oder was andere Leute hoffentlich teilen es in sozialen Medien, es begleitet diese Links das Meer, wie auf Facebook und Twitter und Orte wie diese. Also wir für diese hochzuladen, und diese Art von ist dies. Ich weiß es. Wenn Sie aus irgendeinem Grund kein Bild in den Hauptkörper Ihres Blutes aufnehmen möchten, können Sie auch über Ihre Optionen gehen und es als Männchen hochladen. Auf diese Weise wird es nicht im eigentlichen Körper auftauchen. Wenn du schwarz blau bist und er kahl Tweedle immer noch zeigt, dass du bemerken wirst, dass es hier einige andere Optionen gibt , und wir werden uns nicht wirklich um diese Gruppe dieses Kurses kümmern, aber es gibt ein paar coole Sachen hier. Sie können auch sehen, dass das CEP Social Accounts toe automatisch zerreißt. Ähm, posten Sie dies, wenn es live auf Ihrer Website ist, damit Sie es auf Facebook oder Twitter veröffentlichen können oder was auch immer Sie verwenden. Aber wieder, das ist irgendwie jenseits dieses Guten mit diesem Pferd. A Lassen Sie uns speichern veröffentlicht, um es sofort live zu machen, und Sie können das gleiche tun, wie Sie mit den Galerien tun können. Sie können es geplant festlegen, oder Sie können es als Entwurf speichern. Richtig? Also, jetzt haben wir das für den letzten Abschnitt des Inhalts. Gehen wir rüber zu Prince. Wir werden hier tatsächlich ein Geschäft einrichten, also lasst uns in und bei unserem ersten Produktbild gehen. Dies, sagte aber bei einer Presse, sagte es Zu sichtbar. Wie Sie hier sehen können, gibt es viele zusätzliche Informationen, die Sie wie Versandrichtlinien einschließen können. Sie könnten ein Formular erstellen, das zum Beispiel in Ihren Mail-Schimpanse einspeisen würde , wenn Sie möchten. Ich sagte, ein paar andere Optionen. Er war ein Brauch bei, aber wieder Etikett. Sie können automatisch auf Ihre sozialen Konten posten, aber für Now, ich denke, das wird für uns funktionieren. Lasst uns einfach retten. Und übrigens, wenn Sie auf das Plus-Button klicken, werden Sie feststellen, dass es tatsächlich ein paar verschiedene Optionen. Wenn Sie physisch versenden wollen, geht etwas physisch, offensichtlich digital sendet der Frässpitze eine Datei. Und Service ist eine Art generische Kategorie für alles andere, wo nichts ausgeliefert wird und das Ding digital übertragen wird. Also, ja, ja, wir haben unseren ersten Druckauftrag eingerichtet. Ich werde gehen und jetzt und einfach ein paar weitere und Passwort-Video hochladen. Okay, jetzt, wie Sie sehen, haben wir unsere gesamten Inhalte endlich eingerichtet. Also gehen wir zum nächsten Abschnitt, und wir werden tatsächlich anfangen, etwas Design zu machen. 6. Squarespace Design Essentials: Okay, jetzt, da wir durchgemacht haben und den Inhalt auf unserer Website hinzugefügt haben, springen Sie in das Design-Panel hier. Ein Argument. Beginnen Sie, das Aussehen unserer Website zu ändern. Also wirst du dich erinnern. Wir haben unsere lokalen drei hochgeladen. Dieser Abschnitt. Wir überspringen diesen Template-Abschnitt. Alles, was es ist ein Ort, an dem Sie Ihre Gesamtvorlage ändern können, wenn Sie das tun möchten. Aber das müssen wir nicht tun. Es ist also der Stil-Editor eingeschränkt. Hey, und du siehst gleich von der Fledermaus, dass es eine Menge Dinge gibt, mit denen du dich anlegen kannst. Und fangen wir einfach von oben an. Diese erste Option ist also Hintergrundfarbe. Uh, lasst uns einfach anfangen, damit zu spielen und sehen, welche Änderungen es aussieht, als würde es die Hintergrundfarbe des eigentlichen, äh, Hauptinhalts auf der Seite ändern, und die Standardwerte von Weiß wollen tatsächlich es nur ein bisschen runter. Holen Sie sich einen schönen, gritty Header in der Fußzeile. Sie können sehen, dass das ändert die obere Leiste dort, und die untere Leiste auf Es ist nur wenig mehr Laghi. Ich möchte das weiß halten, aber nicht perfekt. Also nehmen wir es einfach nur das, was gut aussieht. Border Teller sieht nicht so aus, als würde das wirklich etwas ändern. Pik. Lass es uns vorerst überspringen. Lassen Sie es auf schwarzem Logo Bildhöhe. Offensichtlich ändert es den Kopf unseres Logos nur ein wenig nach unten. Ja, Titeltelefon Untertitel Farm. Das wäre hier, wenn wir keine Logos benutzen würden. Lass uns die einfach überspringen. Es gibt Ihnen die Möglichkeit, dass. Das Logo links oder rechts. Denkst du, es ist eine gute Idee? Abhängig von der linken Seite, weil das ist, was die meisten Websites verwenden. Und nur aus einer Benutzererfahrung, einer von Ihnen. Es ist sicherlich gut, mit dem zu gehen, was die Benutzer, die mit dem vertraut sind, auf der linken Seite gesetzt, Headerposition fixiert. Mal sehen, was das tut. So sieht es so aus, als ob das den oberen Teil hier ganz oben hält oder uns mit dem Rest der Seite wachsen lässt . Lassen Sie uns es also an seiner Standardeinstellung halten, die behoben wurde. Ich meine da, wenn Sie darüber schweben. Hier sehen Sie, dass blaue Kästchen tatsächlich braun erscheinen mit der sinnvollen Wirkung. Also lasst uns zuerst, ich wollte die Schriftart ändern. Zu unterscheiden war ein wenig vom Körpertext. Also, wenn Sie Quadrat Räume Frontplatte, Sie werden sehen, dass es eine Menge Geld hier. Sie sind tatsächlich mit Adobe Typ Huhn Partner, so dass Sie Zugriff auf eine Menge wirklich coole Mittel haben. Ich möchte mit etwas Ähnlichem hier gehen. Versuchen wir es mit Afra. Ja, das ist ziemlich nett. Also Bemühungen werden unsere zweite Reform für diese Seite sein, lasst uns nach vorne stoßen. Sagen ist nur ein wenig 15 Zeilenhöhe, äh, also steuert normalerweise nur den Abstand zwischen den Zeilen. Aber da hier nur eine liegt, wie Sie sehen können, ist es irgendwie in einer Kreisverkehrswoche. Und wenn Controlling, wie weit unten die Navigation? Texas. Also lassen Sie es uns bewegen. Also ist es irgendwie mit der Mitte dieses Logos aufgereiht, um Text zu , um transformieren. Lassen Sie uns das in Großbuchstaben behalten und lassen Sie uns mit dem Buchstabenabstand nur ein wenig stoßen. Okay, der Hauptinhalt des nächsten Abschnitts , den wir eigentlich nicht wirklich viel Text auf dieser Sound-Seite haben. Lassen Sie uns voran und speichern Sie unser Design, geben Sie es zurück in den Hauptbereich, und jetzt können wir tatsächlich auf eine andere Seite klicken in der Lage sein, zu sehen, welche Änderungen an den Körper ehemaligen machen, wie wir dies tun. Gehen wir zurück in den Stil-Editor. Scrollen Sie zurück zum Hauptinhalt. Lass uns den Text behalten. Es sieht sogar vorbei. Vielleicht stoßen Sie die Größe nur ein wenig an. Sie wissen, im Allgemeinen möchten Sie nur sicherstellen, dass Sie es wirklich einfach für Benutzer machen, Text auf ihrer Website zu lesen . Denn das ist eines der einfachsten Dinge, die hier überzeugt haben, Menschen davon entfernt. Äh, das ist ein bisschen zu erhöhen. Ja, das sieht besser aus. Okay, äh, für Textfarbe kann den Anfang sehen. Ändern Sie es dort. Kann ich es einfach so ähnlich geben? gleiche klar damit, Übrigens, ich werde nicht wirklich in Farbtheorie und Website-Stylesheets und all das gehen. Es gibt schon viele tolle Klassen über Skulpturen für diese Art von Sache, und es wird im Rahmen dieser Klasse sein. Ich will mich nicht darum kümmern, aber ich gebe Ihnen ein paar nette Links. In der Ressource befindet sich ein Abschnitt dieser Klasse, der Sie zu einigen Websites verlinkt, um das Farbschema für Ihre Website zu erstellen. Kommen Sie mit einem Website-Styleguide? Ja, und so was. Also, für den Zweck dieser Klasse, werde ich nur die Seite behalten, Fähigkeiten schaffen, weil ich viel mehr daran interessiert bin, Ihnen nur zu zeigen, wie Zehe Dinge auf Squarespace und tatsächlich Tauchen in Designtheorie und so so. Okay, also übernimmst du diese Farbe, weißt du was? Wir haben eigentlich keine Kopfschmerzen auf dieser Seite. Das ist tatsächlich so schnell retten. hast du verpasst. So dass es Es ist nur irgendwie dieser helle Tag zurück in den Style-Editor. Wir können tatsächlich direkt dort auf diesen Text klicken. Ich. Sehen? Es bringt uns dorthin, wo wir aufgehört haben. Lass uns das dünn über Spaß halten. Größe ein wenig, Übrigens, es ist immer eine gute Idee, Ihre Linie hoch mindestens über 1,38 p. M. Nur für die Lesbarkeit zu halten M. . Es geht um die Buchstaben, die hier ein wenig für die Links stehen. Lasst uns sie wirklich dunkel halten. Teoh Kontrast zu der Art von grauen Körpertext und für die Hebert-Farbe ist es nur ein bisschen wie Gericht. Das ist, was Hit zeigen alle, um zurückzugehen, um alles davon zu denken. Dieser Abschnitt ist Auto-Monteur. Ich glaube nicht, dass wir das wirklich tun wollen, weil unser Aufruf zum Handeln in unseren Monteure liegt . Lasst es uns einfach da lassen. Nächster Abschnitt ist eigentlich Schaltflächen. Lasst uns reingehen und es, dass wir es als Umriss behalten. Aber wie Sie sehen können, gibt es definitiv einige andere Stile Hier haben wir drei Optionen für den Erwerb abgestanden, abgerundet und Phil. Gehen wir einfach, bis ich das sehen kann . Es hat die Grenze ein wenig gefärbt. Gib ihm einfach mehr Kontrast. Okay? Ich denke, die Mittel sind gut, danke. Lass es uns einfach so behalten. Okay, also rettet es das. Also, jetzt haben wir so ziemlich das gesamte Körpertext-Design bearbeitet. Kommen wir zurück auf die Hauptseite und sehen, ob wir etwas mit diesem Foto hier ändern wollen . So springen Sie zurück in einem Stil-Editor, Sie können tatsächlich auf dieses Raster klicken, und es wird Ihnen die relevanten Stile zeigen. Also für die Überschriften, denke ich, das ist es, was auf dem Pop-up auftaucht. Also lassen Sie uns einfach, dass ich will, ich denke, es wird cooler aussehen, wenn wir die Hintergrundfarbe , Zehenweiß und unseren Text Leute übrig haben. Lass uns das machen. Lassen Sie uns das gleiche mit sich selbst tun Fitting Farben, so dass Sie tatsächlich kopieren und Frieden diese Hex-Zahl in es und das wird sicherstellen, dass Sie die gleiche klare auf Ihrer Website sind. Ich denke, dass das Projekt mit sehen kann, das ist eine Art der Kontrolle des Raums von Quadraten. Willst du das ein bisschen denken, aber nicht zu viel? Ich denke, das ist so viel, wie wir auch ändern wollen . Das ist, speichern wir es und gehen raus, nur damit wir den neuen Helfer-Look sehen können, Ja, ich finde es ziemlich cool. Lass es uns so lassen. Und jetzt, da wir irgendwie ein Grunddesign festgelegt haben, ist das nur Vollbild dieses und sehen, was wir sonst noch ändern möchten. Also zuerst, es ist irgendwie seltsam, dass diese Knöpfe hier in der Mitte schweben. Mal sehen, was wir dagegen tun können. Nun, da sich unsere Frontgröße geändert hat, ändern sich die Abschnitte ein wenig, also möchten Sie vielleicht die Karte erweitern, um diese Symmetrie zu behalten ändern sich die Abschnitte ein wenig, also möchten Sie vielleicht die Karte erweitern, um diese Symmetrie zu behalten. Das sieht ziemlich gut aus. Ja, wir haben immer noch unsere Druckabteilung. Ich werde ein wenig später hineingehen, wie man etwas feineres Tuning macht. Es geht darum. Aber im Moment, denke ich, lassen Sie uns einfach darauf konzentrieren, das zu machen. Aber bessere Position. Lass uns hineingehen und sehen, welche Optionen uns geben. Also, aber das Limit, es ist nur Sinn, zu retten. Und da gehen wir. Das sieht viel besser aus. Großartig. Jetzt haben Sie gesehen, wie einfach es ist. Optimieren Sie einfach kleine Dinge über Ihr Website-Design. Im nächsten Videowerden wir uns etwas tiefer damit beschäftigen und ein bisschen CSS vermissen. Im nächsten Video Keine Sorge. Du musst nicht in irgendeinen Cody oder so etwas springen. Ich werde dir alle Hilfe geben, die du brauchst. Der Punkt dieses nächsten Videos wird nur sein, Ihnen zu zeigen, wie CSS wirklich Ihr Spiel noch mehr mit dem besagten Schritt machen kann , lasst uns gehen, um das jetzt zu tun 7. Deep in Design: Pushing an den Vorlagen: Okay, Also das Ziel für diese Lektion ist es, Sie nur eingeführt, um SSO Score Space zu sehen und Ihnen zu zeigen , wie mächtig es ist und Ihre Vorlage anpassen und eine individuellere machen. Also, jetzt, wo wir unseren Stil für die ganze Seite eingerichtet haben, lassen Sie uns eingeben und beginnen, einige CSS hinzuzufügen, gibt es zwei ist, in CSS auf Squarespace hinzuzufügen. Sie können dies global tun, was bedeutet, dass alle Änderungen, die Sie vornehmen, auf der gesamten Website angewendet werden oder Sie können es auf einer einzigen Seite tun, was bedeutet, dass die CS, die nur ein Spiel auf dieser Seite ist. Äh, das erste, was ich tun möchte, ist eigentlich eine globale Sache. Ich möchte das Logo etwas verblasster machen und ihm einen coolen Helfereffekt geben. Um CSS global funktionsfähig hinzuzufügen, springen Sie in diese zum Design-Panel. Wir sind gut, zu dieser Zollausnahme zu gehen und hier ist momentan nichts drin. Also werde ich das CSS öffnen, das ich bereits in Klammern geschrieben habe. Ich fühle mich wieder ein wenig los. Sie müssen CSS nicht kennen. Ich werde Sie mit einer großartigen Website verknüpfen, die CSS in der Klasse aufteilt. Ressource ist. Aber wenn es etwas ist, das du ein bisschen mehr Training magst. Aber ich denke, nur Notizen wissen nur in der Klassenüberprüfung oder im Diskussionsabschnitt , und ich werde definitiv überlegen, einen CSS-Kurs zu machen, wenn es viel Interesse daran gibt. Also gingen wir rein und Redakteure, ja, das ist da. Speichern wir es, öffnen Sie es und Sie können sofort sehen, dass das Logo nicht verblasst wird. Und wenn du einen Rover hast,wird er jetzt größer und kann er undurchsichtig werden? Und wenn du einen Rover hast, Das sieht dort besser aus, äh, äh, der Erzengel, den ich mache. Ich möchte auch diese Bilder hier eine schöne glückliche Wirkung direkt aus der Fledermaus geben. Aber ich möchte nur, dass es hier auf dieser Hauptseite steht. Ich möchte, dass Sie auf das Bild klicken und es tatsächlich in voller Farbe sehen können. Also, um das zu tun gehen wir tatsächlich auf Seiten, nicht Design, und wir gehen auf diese Seite. Wir wollen das CSS spielen, um auf das Zahnradsymbol hier klicken. Holen wir uns Tickets für die Einstellungen. Ähm, nur eine schnelle Seite. Jetzt dieser Beschreibungsabschnitt hier. Es ist wirklich hilfreich, das für alle Ihre Seiten auszufüllen, weil viele Suchmaschinen auf diese Beschreibung suchen. Und mit einer wirklich schönen, robusten Beschreibung wird Ihre Seite helfen, bessere Google-Suchen zu erhalten. Okay, auf dem Set von Afghanistan sehen wir, dass es einen Abschnitt namens Page Header Code Injection gibt, und so werden wir unser CSS hinzufügen. Also lassen Sie uns zurück in die Klammern springen oder, wissen Sie, wenn Sie keine Klammern haben, wird jeder, den Sie Texteditor tun. Also kommt kein Pad auf den meisten Computern, so dass Sie das völlig nutzen können. Oder Sie können einfach mit Ihrem CSS direkt in, äh, Squarespace zu Also kommen äh, , damit die Galerie das packt und wir können es tatsächlich richtig zusammenstellen, um es zu hören. Wenn wir das tun, wird nichts passieren. Wir müssen es in CSS-HTML-Tags setzen, die nur gestylt ist, und Sie können sehen, dass der Squarespace automatisch das schließende Tag hinzufügt. Glücklich dort. Okay, lassen Sie einfach Frieden in unserem Code. Speichern Sie es. Lassen Sie uns den Vollbildmodus. Okay, frisch die Seite und Sie können sehen, dass der ganze Fuß ist nur diesen schönen, sehr subtilen, sehr subtilen, verblassten Effekt Okay, Also das letzte, was ich dio will, ist in dieser Prinz-Seite. Ich möchte all diesen einen schönen kleinen Grenzraum geben und einen Schatten, um sie irgendwie zu unterscheiden. Ähm, also werde ich dir zeigen, wie ich das CSS bekommen habe. Ich bekomme Brände für die letzten zwei Bits Code. Eigentlich ist es wirklich einfach. Wenn dir das über den Kopf geht, mach dir keine Sorgen. Sie können weiterhin in CSS hinzufügen. Ähm, aber das ist wirklich hilfreich für Leute, die vielleicht ein bisschen mehr darüber wissen. Wir werden also darauf klicken, was wir hinzufügen wollen Ja, dieser Student, dieser Fall, dieser Fall, es ist das Bild. Es inspiziert Element. Und das wird den Entwickler eröffnen, Consul. Ähm, die meisten anderen Brüder haben eine Version davon, aber weißt du, ich benutze Chrome. Uh, und wie Sie über die Dinge haben, wird es zeigen, welchen Teil der Seite die Regel in diesem Fall beeinflusst, wir wollten tatsächlich dieses Produktbild hinzufügen. Und wenn Sie tatsächlich mit CSS spielen wollen und das, können Sie tatsächlich hier rüber gehen. im rechten Bereich und beginnen Sie mit Dingen zu verwirren, so dass dies tatsächlich alle Änderungen an Ihrer Website dauerhaft vornehmen würde. Aber es ist ein wirklich guter Weg, um zu sehen, was sich ändert. Sie könnten es wie das Ende aussehen lassen, ohne Dinge zu speichern und die Einstellungen zu öffnen und solche Sachen zu öffnen. Ich bin zum Beispiel so, zum Beispiel so, wenn wir die Kapazität davon ändern wollten, machen wir weiter. Es ist wie Punkt zu, und wir sehen sofort, dass es verändert das Leben auf der Seite. Aber das ist eigentlich nicht wichtig für uns. Was würdest du tun wollen? Fügen Sie diese Grenze und Schatten hinzu? Mal sehen, wie es dein erstes ist. Stellen Sie sicher, dass wir keine Änderungen daran vornehmen möchten. Ja, ich denke, das ist gut. Sieht insgesamt schön aus. Lassen Sie uns einfach schließen aus diesem Respekt. Dann gehen Sie in die Seiten, denn wieder, wir spielen dies nur lokal auf der Seite, nicht global auf der gesamten Website. Geh zurück ins Fortgeschrittene. Es ist ein weinen letzter, wenn man in die Entwicklerkonsole geht. Wir wissen tatsächlich, dass diese Elemente als CSS Frieden bezeichnet werden. Hat es das gesehen? Und da gehen wir. Lassen Sie uns das noch einmal öffnen und schauen Sie sich unsere Änderungen an. Ich finde, das sieht ziemlich schön aus. Das waren also nur einige schnelle Möglichkeiten, um es zu zeigen. Sie hoffen wirklich, dass leistungsstarkes CSS darin besteht, Ihre Website ein wenig deutlicher aussehen zu lassen. Feind. Wenn Sie versuchen, diese CSS-Schnipsel auf anderen Websites zu verwenden und sie aus irgendeinem Grund nicht funktionieren, liegt dies wahrscheinlich daran, dass die Vorlage einige andere hat. Identifizieren Sie IRS für die Elemente. Wenn Sie auf dieses Problem stoßen, fühlen Sie sich einfach frei, Ihr Projekt hochzuladen und mich mit ihm zu verknüpfen. Und ich würde mich freuen, bei dieser CSS Zehenarbeit zu reformieren. Drei Jahre Excite und ich werde alle den gesamten Code für das CSS in der Klassenbeschreibung bereitstellen , so dass Sie es verwenden können, wenn Sie möchten, und fühlen Sie sich frei, es zu optimieren, wenn Sie möchten. 8. Herzlichen Glückwunsch und vielen Dank!: und du bist fertig. Herzlichen Glückwunsch. Sie haben gerade Ihre erste Website erstellt. Ich bin so aufgeregt zu sehen, was ihr euch ausgedacht habt, also bitte mach Hochgeladen zum Projekt. Calorie, ich gebe Ihnen einige Tipps, wie Sie es verfeinern und vielleicht sogar einige zusätzliche CSS-Snippets tat in Ihre eigene Website. Vielen Dank und achten Sie darauf, meine anderen Klassen zu überprüfen, um einen großartigen zu haben.