Superstyle Squarespace Websites mit 6 einfachen CSS-Schnappschüssen

1. Einführung: Hi, ich bin Kyle. Ich habe versucht, so viel Zeit wie möglich mit meiner Frau und meinen Hunden durch das Land zu stolpern . Alles, was es zu sehen gibt, vegane Donuts zu essen und viel guten Kaffee zu trinken. Aber wenn ich das nicht mache, verbringe ich meine Zeit damit, Websites für kleine Unternehmen auf Squarespace zu erstellen. In der Tat habe ich in den letzten drei Jahren mehr als 100 Squarespace-Websites für Kunden in einer Vielzahl von Branchen aufgebaut , angefangen von Bau- über kommerzielle Möbel bis hin zu Bäckereien und sogar Tierrettungsorganisationen. Im Laufe des Aufbaus dieser vielen Squarespace-Websites habe ich eine Reihe von CSS-Code-Snippets entwickelt, die ich von Anfang an auf allen meinen Websites installiere , um sicherzustellen, dass alles so aussieht, wie ich es mag. Ich bin kein Entwickler, aber ich habe einige kleinere CSS herausgefunden, um einige der Elemente in Squarespace zu bereinigen , die meiner Meinung nach besser sein könnten, und ich werde Ihnen zeigen, wie man das auch macht. Diese Klasse ist für jeden geeignet, der Squarespace-Websites entwirft oder verwaltet und möchte, dass sie erstklassig aussehen. Sie müssen nicht wissen, wie man kodiert, Sie müssen nicht einmal wissen, was CSS ist. Ich gebe Ihnen den Code, den Sie in einem herunterladbaren PDF-Dokument benötigen. Alles, was Sie tun müssen, ist, folgen Sie den Anweisungen, um den Look zu bekommen, den Sie wollen. Für Ihr Klassenprojekt ermutige ich Sie, mindestens drei dieser Snippets zu einer Squarespace-Website hinzuzufügen , die Sie erstellen oder die Sie verwalten und einen Link zur Website auf der Klassenseite teilen , damit wir alle Ihre Arbeit sehen können. Diese CSS-Snippets funktionieren auf allen Squarespace-Plänen. Nach bestem Wissen, alle Squarespace-Vorlagen. Alles, was Sie brauchen, um loszulegen, ist eine Squarespace-Website, einschließlich einer kostenlosen Testversion wäre in Ordnung und der PDF-Download, den ich bereitgestellt habe, enthält die Codeausschnitte, die Sie installieren werden. Sobald du diese Gegenstände bereit hast, lass uns loslegen. 2. Horizontales Rule: Das erste CSS Snippet, das wir einfügen werden, ist für das horizontale Regelstyling oder wie Squarespace es gerne nennt, ein Zeilenblock. Zeilenblöcke oder horizontale Regeln werden häufig verwendet, um Text oder Abschnitte von Überschriften zu trennen oder einfach Platz auf einer Website zu schaffen. Sie können voran gehen und zu jeder Seite auf Ihrer Website gehen, fügen Sie einen Block ein. Es wird der Zeilenblock sein. Ich werde zwei von ihnen hierher stellen, damit du es sehen kannst. Nun, Squarespace-Zeilenblöcke erlauben Ihnen nur eine vollständig horizontale Füllung zu haben , und sie sind normalerweise ziemlich dünn, etwa ein oder zwei Pixel, und so werden wir ein kleines Code-Snippet einfügen, in dem Sie die Farbe ändern können, die Dicke und die Breite. In vielen der Vorlagen auf Squarespace können Sie die Farbe bereits ändern, aber einige von ihnen können Sie das nicht einmal tun. Sobald Sie diese Zeilenblöcke in Ihrer Seite haben, gehen Sie zu dem CSS-Download, den ich bereitgestellt habe, horizontale Regel-Styling. Markieren Sie diesen Code, kopieren Sie ihn, gehen Sie zurück zu Squarespace, Sie möchten zur Registerkarte Design gehen, gehen Sie zu Custom CSS und fügen Sie ihn dann einfach ein. Dort siehst du, was passiert ist, als wir das CSS dort eingefügt haben. Nun können Sie die Dicke ändern, indem Sie die Höhe der ersten Linie ändern. Wenn Sie wirklich dick machen wollen, können Sie es bis zu, sagen, 15 setzen. Oder wie ich schon sagte, du könntest zu einem Standard drei oder so gehen. Die Breite kann hier in Prozent oder Pixel erfolgen. Du könntest gehen und es bei so etwas wie 200px setzen. Nun ist es wichtig zu beachten, dass einige der Vorlagen, wenn Sie dies tun , automatisch zu rechtfertigen, so dass Sie diesen letzten Margin-Befehl basierend darauf ändern können. Du kannst das komplett rausnehmen. Sehen Sie, ich arbeite mit einer Vorlage, die es nicht gerechtfertigt hat, also wenn Sie es in einen Margin-Befehl einfügen, rechtfertigt es es es tatsächlich weiter nach links. Aber wenn Sie eine Vorlage haben, mit der Sie arbeiten, die es links rechtfertigt, wenn Sie die Breite kleiner machen, müssen Sie den letzten Rand eins dort behalten und dann margin-left 25 Prozent machen es so zentriert. Aber für meins werde ich das draußen halten. Diese Hintergrundfarbe ist, wo Sie eine Hex-Farbe wählen können oder Sie können einfach eine Standardfarbe eingeben , wenn Sie möchten, wie Rot. Da gehst du hin. Sie können dies bei verwenden, na ja, jederzeit, wenn Sie dies auf Ihrer Website jetzt setzen, können Sie gehen und eine weitere hinzufügen. Es wird genau das Gleiche sein. Wir werden hier oben einen aufstellen, darüber, und da gehst du. So werden Sie Ihre horizontalen Regelzeilenblöcke in Squarespace mit diesem benutzerdefinierten einfachen CSS-Snippet formatieren. 3. Wrap Grid Titel: Das zweite CSS-Snippet, das wir der Website hinzufügen werden, um eine generische Squarespace-Website super zu stylen , ist Befehl, um die Gitter-Titel zu wickeln. Wenn Sie nun Gittergalerien zu einer Squarespace-Website hinzugefügt haben und Sie Titel hatten , die länger sind als die Breite des Fotos selbst, werden Sie feststellen, dass Sie diese Ellipsen schnell hier bekommen und es wird abgeschnitten. Was wir tun werden, ist, dass wir ein kleines CSS-Snippet eingeben, das diese umhüllt und wie jeder alte Titel in voller Länge zeigt. Sie gehen auf die Registerkarte Design in Squarespace, gehen Sie zu Custom CSS. Gehen Sie zum CSS Download. Ich habe vorgesehen, rasten Titel umbrechen. Gehen Sie voran und markieren Sie diesen Code. Gehen Sie zurück zu Squarespace und fügen Sie es einfach ein. Du wirst sehen, was das tut. Dann fügt es den Befehl hinzu, der mit dem Leerzeichen normal zu umbrechen erlaubt und Sie erhalten dort die vollständige Beschriftung zu sehen. Vollständiger Titel. Sie können hier die Zeilenhöhe ändern , wenn Sie diese Linien etwas enger machen möchten, vielleicht 1.2 oder bis zu 1,8 gehen, wenn Sie denken, dass es sauberer aussieht. Aber so oder so, Sie haben jetzt alle Ihre Untertitel angezeigt. Dies geschieht unabhängig von der Bildschirmgröße, die Sie wählen. Wenn Sie zu einem mobilen Check gehen, werden Sie ihn immer noch sehen. Es funktioniert wirklich gut.Es sollte beachtet werden, dass, wenn Sie es auf Handy hier betrachten, können Sie einige Probleme haben, wenn Sie diese Zeilen haben, wo es zwei Bilder online gibt und eine geht auf zwei Zeilen und die andere nicht. Es wird den Abstand hier abwerfen, um das auf eine andere Zeile zu stoßen. Ich habe tatsächlich ein anderes CSS-Snippet, das später auftaucht, das sich darum kümmert und die Dinge auf Mobilgeräten wirklich sauber aussehen lässt. Im Moment werden wir es wieder auf den Desktop stellen. Sie können sehen, dass Sie jetzt in der Lage sind, alle Ihre Titel zu sehen. Stellen Sie sicher, dass Sie es speichern. 4. Konsistente Button: Unser drittes CSS-Snippet, das wir hinzufügen werden, wird eine schnelle Codezeile sein, um die Tastenbreiten zu standardisieren. Wenn Sie Schaltflächen auf Ihrer Website verwenden, unabhängig davon, welche Größe sie haben, werden Sie feststellen, dass quadratische Leerzeichen automatische Einstellung für die Schaltflächen ist dass sie standardmäßig auf eine Breite von gleich welcher Textlänge, die Sie in sie einfügen, Anders als wenn Sie Abstandshalter haben oder wenn es wirklich lang ist und bis zu einer zweiten Zeile hinuntergeht, wird es die Breite des Textes sein, der darin ist, und Sie können das hier sehen. Wenn Sie zwei in der gleichen Zeile oder sogar auf der gleichen Seite haben, die in der Länge variieren, kann es ein wenig schlampig aussehen, wie wir es hier haben. Alles, was wir tun werden, ist eine schnelle Codezeile hinzuzufügen, die das standardisiert. Wie üblich werden wir hier in den Custom CSS Begriff gehen. Wir gehen zu dem Dokument, das ich zur Verfügung gestellt habe. Wir gehen zu „Schaltflächenbreite“ hier, kopieren und fügen Sie diesen Code ein. Gehe zurück zu „Squarespace“ und gib ihn dort ein und du wirst sehen, dass sie jetzt standardisiert sind. Sie können diesen Code basierend auf einer Breite von Prozent tun, wie wir hier haben, 80, oder Sie könnten ihn in eine Pixelmenge wie 400 sagen. Jetzt werden Sie sehen, dass, wenn Sie die Pixelmenge ändern, es statisch sein wird. So können Sie hier einige Überlappungen haben, abhängig von Ihrer Bildschirmgröße, die nicht ideal ist. Also würde ich empfehlen, einen Prozentsatz zu verwenden und ich würde auch empfehlen, ihn näher an oder mindestens unter 90 Prozent zu halten . Andernfalls werden Sie einige Abstandsprobleme haben, wenn Sie auf Mobilgeräte und so weiter kommen. Sie können dies auf jedem der Blöcke verwenden, jede der Tastengrößen, aber wenn Sie es nur für eine Größe machen möchten, können Sie einen doppelten Strich nach dem Element und dann die Größe des Blocks hinzufügen, so klein und Sie werden feststellen, dass ich mit mittleren Blöcken hier, so dass Sie bemerken, wenn ich das kleine in, es ändert sie tatsächlich wieder normal, weil wir nur auf das kleine anwenden, aber wenn ich Medium hier eintrete, werden Sie sehen, es geht zurück dorthin. Dies ist also eine gute Möglichkeit, alle Ihre Tastenblöcke auf Ihrer Website zu standardisieren und alles schön und sauber aussehen zu lassen. 5. Hyphenation entfernen: Für unser viertes CSS-Snippet geben wir ein wenig Code ein, der diese lästigen Silbentrennungen beseitigt , die Squarespace auf kleineren Bildschirmen macht. Dies wird oft angezeigt, wenn Sie eine große Schriftart verwenden, eine H1 oder H2, die Sie oft auf der Zielseite oder Überschrift formatiert haben. Wenn Sie wirklich versuchen, einen Einfluss auf den Leser mit einigen großen Schrift und kurzen einfachen Sätzen zu machen , was heutzutage super üblich ist, und sieht in der Regel ziemlich gut aus. Das Problem mit Squarespace ist, wenn Sie große Texte wie diese mit der Ausführung Ihrer architektonischen Vision haben , was ich auf der Website eines Kunden verwendet habe. Sie gehen in die mobile Ansicht, Sie werden sehen, dass es Wörter auf natürliche Weise trennt und Sie nicht wirklich bekommen, um zu wählen, wo das passiert offensichtlich. Es ist etwas, was Squarespace tut. Aber ich habe hier einen einfachen Code. Wir gehen nur zu Design wie gewohnt, Custom CSS Abschnitt. Wir gehen zum Download, den ich bereitgestellt habe, gehen Sie zu Silbentrennung entfernen, kopieren Sie diesen Code, kommen Sie zurück, fügen Sie das CSS ein und schauen Sie sich das an. Da geht Ihre Silbentrennung. Es ist verschwunden. Du kannst das tun. Sie werden sehen, dies ist für normale Schriftart, die H1, die H2, die H3s. Wenn Sie aus irgendeinem Grund wollten, dass sie in einigen Schriftartentypen und nicht in anderen, können Sie einige davon entfernen, aber im Moment haben Sie alles gelöscht, sodass Sie diese aber im Moment haben Sie alles gelöscht, so Silbentrennung nicht mehr in kleineren Bildschirmen sehen. 6. Single auf mobilen Rows erstellen: Das fünfte CSS Snippet, das ich bereitgestellt habe und dass, wo wir unsere Squarespace-Websites stylen, wird ein Snippet sein, von dem ich denke, dass es ein Feature ist, das in heutigen Welt, wo wir so an Scrollen gewöhnt vertikal auf unseren Telefonen, um Produkte und Bilder anzuzeigen, und das ist ein Befehl, um alle Gittergalerien auf Mobilgeräten in einzelne Bildzeilen zu erzwingen. Wenn Sie bereits in Squarespace gearbeitet haben, wissen Sie, dass Sie, wenn Sie hier eine Rastergalerie haben, wenn Sie zur mobilen Ansicht gehen , automatisch zwei Bilder pro Zeile haben müssen, und wenn Sie die Code-Snippet, das ich in weniger als zwei bereitgestellt habe, um Ihre Titel in die zweite Zeile oder dritte Zeile einzuschließen, die hier auf Mobilgeräten einige Abstände abwerfen kann. Aber wir haben eine Lösung für beides, und das ist, ein Bild pro Zeile zu erzwingen, so dass jedes Bild viel Platz wie möglich erhält und Ihren Zuschauern ein schönes klares Bild bietet. Wir haben das, wir gehen zurück zur Desktop-Ansicht, weil Squarespace es nicht mag, wenn ich den Code in der mobilen Ansicht hinzufüge. Aber wir gehen einfach zu dem Dokument, das ich zur Verfügung gestellt habe. Für einzelne Bildzeilen auf mobilen Rastergalerien. Gehen Sie weiter und kopieren Sie das und fügen Sie es ein. Ich hatte bereits eine Kopie und so werde ich hier reingehen und es einfügen. Sie werden hier nichts sehen, wenn Sie sich in der Desktop-Ansicht befinden, da ich diese Medienabfrage auf 640 Pixel eingestellt habe , damit sie funktioniert, wenn Sie unter 640 Pixel sind. Sie können das ändern, wie Sie es für richtig halten. Aber ich würde wahrscheinlich empfehlen, dass Sie bei etwa 640 bleiben. Wenn Sie auf wirklich kleine Bildschirme gehen wollten, könnten Sie so etwas wie 320 tun. Wenn Sie gehen wollten, um noch kleinere Tabletten zu umfassen, können Sie zu etwas wie 960 gehen. Aber ich mag es bei 640, ich denke, das ist ein guter Bruchpunkt. Jetzt, da Sie das da drin haben, wenn Sie einfach die mobile Ansicht betrachten, werden Sie sehen, dass dies jetzt alle einzelne Bildzeilen sind und Sie haben viel sauberere, größere Fotos, Ihre Untertitel sehen besser aus, und Sie haben Ich habe diese alles eingestellt. Dies ist wirklich großartig für alle Produktaufnahmen, sowie nur Fotos, die Sie haben. 7. Bildunterschriften: Das sechste und letzte Snippet von CSS, das wir in unsere Squarespace-Website einfügen werden ist eine sehr einfache Codezeile, die nur zum Zentrieren von Bildunterschriften entworfen wurde Squarespace ist standardmäßig links ausgerichtet Bildunterschriften. Wie Sie hier sehen werden, habe ich zwei Bilder auf der Seite. Sie können sehen, dass die kleinen Bildunterschriften hier links ausgerichtet sind und das sieht nur ein wenig funky aus, besonders wenn Sie Bilder mit weißem Hintergrund haben und Sie nicht sagen können, wie breit sie gehen. Wie in diesem Fall hier, sieht es ziemlich weit weg von wo es sein sollte. Also werde ich wieder auf die Registerkarte Design gehen, benutzerdefinierte CSS, den gleichen Ort, an dem wir alle gemacht haben. Wechseln Sie zu dem herunterladbaren Dokument, das ich bereitgestellt habe. Bildbeschriftung zentrieren, das ist die letzte. Geh weiter und kopiere das. Fügen Sie es direkt in CSS ein und Sie werden sehen, dass sie dort in die Mitte verschoben wurden. Das ist alles, was Sie tun müssen, um es zentriert zu halten. Wenn Sie es richtig für einen Stil Touch ausrichten wollten, könnten Sie einfach dieses Zentrum hier mit rechts ersetzen, und da gehst du. Aber ich empfehle nur, dass, wenn Sie es aus einem bestimmten Grund tun, das besser funktioniert, wenn Sie keine weißen Hintergründe haben. Wie Sie sehen können, wirft dies es ziemlich viel ab, wenn Sie nach links oder rechts ausgerichtet sind. Also, wie ich schon sagte, geh einfach mit der Mitte. Es ist eine großartige Möglichkeit, alles in all Ihren Bildern konsistent aussehen zu lassen und da haben Sie es. Das ist alles, was wir darüber in unseren sechs CSS-Snippets für Squarespace-Websites gesprochen haben unseren sechs CSS-Snippets für , die Ihnen helfen, super Stil oder anderweitig generische Website. Wenn Sie das genossen haben, etwas gelernt haben, klicken Sie bitte auf den Folgen-Button aus meinem Profil, da ich weitere Squarespace-Klassen unterrichten werde . Danke fürs Zuschauen.