Erstellen Sie vertikale Linien-Designs in Squarespace

Table of Contents:

1. Einführung
2. Erstellen von horizontalen Linien
3. Erstellen von vertikalen Linien
4. Optimierung der Linien
5. Anpassen der Linienfarbe
6. Einbinden von Codeblöcken
7. Mobile Ansicht anpassen
8. Weitere Anpassungsmöglichkeiten
9. Beispiele und Inspiration
10. Zusammenfassung

Einführung

In diesem Tutorial werde ich Ihnen zeigen, wie Sie auf Squarespace sehr einfache und moderne Website-Layouts mit Linien erstellen können. Es wurde kürzlich ein Mock-up in einer Squarespace-Gruppe gepostet, in der ich Mitglied bin, und es wurde gefragt, wie man dieses Layout mit Linien realisieren kann. Zuerst dachte ich, dass Squarespace dafür nicht gut geeignet ist, da es schwierig ist, Rasterlayouts wie dieses umzusetzen. Aber dann habe ich darüber nachgedacht, wie man es dennoch auf Squarespace umsetzen könnte. In diesem Tutorial werde ich Ihnen Schritt für Schritt zeigen, wie Sie sowohl horizontale als auch vertikale Linien hinzufügen können, um ein minimalstisches Design zu erstellen.

Erstellen von horizontalen Linien

Der erste Schritt besteht darin, horizontale Linien hinzuzufügen. Squarespace bietet eine brandneue Funktion für Abschnitte, mit der Sie am unteren Rand eines Abschnitts einen Trennstrich hinzufügen können. Klicken Sie einfach auf "Bearbeiten" auf der Seite und dann auf den Abschnitt, den Sie bearbeiten möchten. Klicken Sie auf "Trenner aktivieren" und wählen Sie die gewünschte Option aus. Um eine vollständige horizontale Linie hinzuzufügen, ziehen Sie den Schieberegler für die Dicke auf "1". Somit haben Sie eine dunkle Trennlinie mit einer Pixelstärke von 1. Sie können die Farbe nach Belieben ändern. Wiederholen Sie diesen Schritt für jeden Abschnitt, in dem Sie eine horizontale Linie hinzufügen möchten.

Erstellen von vertikalen Linien

Um vertikale Linien zu erstellen, verwenden wir einen Code-Block. Fügen Sie einen Code-Block zur Seite hinzu und geben Sie den gewünschten Inhalt ein. Um die volle Höhe des Blocks zu verwenden, setzen Sie einfach die Höhe auf "100%". Um eine schwarze Linie in der Mitte des Blocks zu erstellen, können Sie den folgenden CSS-Code verwenden:

.code-block::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  background-color: black;
  left: 50%;
  transform: translateX(-50%);
}

Dieser Code fügt ein Pseudo-Element vor dem Code-Block hinzu, das als vertikale Linie fungiert. Die Linie hat eine Breite von 1 Pixel und ist in der Mitte des Blocks zentriert. Sie können die Breite und Farbe nach Belieben anpassen. Wiederholen Sie diesen Schritt für jeden Code-Block, dem Sie eine vertikale Linie hinzufügen möchten.

Optimierung der Linien

Um die Verwendung und Anpassung der Linien zu optimieren, können wir Variablen verwenden, um die wiederkehrenden Werte zu speichern. Dadurch wird es einfacher, die Werte in der Zukunft zu ändern. Zum Beispiel können Sie eine Variable für die Linienstärke verwenden:

:root {
  --line-thickness: 1px;
}

Dann können Sie diese Variable im CSS-Code verwenden:

.code-block::before {
  width: var(--line-thickness);
}

Auf diese Weise können Sie die Stärke der Linie an einer Stelle ändern und es wird sich auf alle Linien auswirken.

Anpassen der Linienfarbe

Die Linienfarbe kann entweder festgelegt oder von der Farbe des Abschnitts übernommen werden. Squarespace hat benutzerdefinierte Eigenschaften für die Farben der Trennlinien. Sie können diese Eigenschaften verwenden, um die Linienfarbe anzupassen. Um die Farbe des Abschnitts zu übernehmen, verwenden Sie die folgende CSS-Anweisung:

.code-block::before {
  background-color: var(--section-divider-stroke-color);
}

Auf diese Weise wird die Linienfarbe automatisch von der Farbe des Abschnitts übernommen. Wenn Sie die Farbe der Linie manuell festlegen möchten, können Sie den gewünschten Farbwert verwenden. Wiederholen Sie diesen Schritt für jeden Abschnitt, dem Sie eine individuelle Linienfarbe geben möchten.

Einbinden von Codeblöcken

Um die Linien einfacher einzufügen, können Sie einen speziellen CSS-Codeblock verwenden. Legen Sie die Klasse "vertical-line" auf den Codeblock fest und fügen Sie anschließend den Codeblock in den gewünschten Abschnitt ein. Dadurch wird automatisch eine vertikale Linie erstellt. Sie können den Codeblock kopieren und an andere Stellen ziehen, um weitere Linien hinzuzufügen. Passen Sie die Position der Linie an, um sie an die gewünschten Stellen anzupassen.

Mobile Ansicht anpassen

In der mobilen Ansicht sollten die vertikalen Linien horizontal erscheinen. Um dies zu erreichen, können wir Media Queries verwenden, um den CSS-Code für verschiedene Bildschirmgrößen anzupassen. Für eine maximale Bildschirmbreite von 767 Pixeln können Sie den folgenden Code verwenden:

@media screen and (max-width: 767px) {
  .code-block::before {
    height: 1px;
    width: 100%;
  }
}

Dieser Code bewirkt, dass die vertikale Linie in der mobilen Ansicht horizontal erscheint.

Weitere Anpassungsmöglichkeiten

Es gibt noch viele weitere Anpassungsmöglichkeiten für die Linien, wie z.B. die Positionierung, Breite und Aussehen. Sie können den CSS-Code entsprechend Ihren individuellen Anforderungen anpassen.

Beispiele und Inspiration

Hier sind einige Beispiele für verschiedene Website-Layouts, die mit horizontalen und vertikalen Linien erstellt wurden. Lassen Sie Ihrer Kreativität freien Lauf und experimentieren Sie mit verschiedenen Möglichkeiten, um ein einzigartiges Design zu erstellen.

Zusammenfassung

In diesem Tutorial haben Sie gelernt, wie Sie mit Squarespace horizontale und vertikale Linien zu Ihren Website-Layouts hinzufügen können. Sie haben gesehen, wie Sie horizontale Linien mit der neuen Abschnitts-Trennlinienfunktion von Squarespace erstellen können. Für vertikale Linien haben wir Code-Blöcke und CSS verwendet, um sie einzufügen und anzupassen. Sie haben gelernt, wie Sie die Linienfarbe anpassen und den Code optimieren können. Zusätzlich haben Sie gesehen, wie Sie die mobilen Ansichten anpassen und weitere Anpassungen vornehmen können, um das gewünschte Design zu erreichen. Experimentieren Sie mit verschiedenen Layouts und lassen Sie Ihrer Kreativität freien Lauf!

Highlights:

• Anleitung zur Erstellung von horizontalen und vertikalen Linien in Squarespace
• Verwendung der neuen Abschnitts-Trennlinienfunktion
• Anpassen der Linienstärke und -farbe
• Verwendung von Code-Blöcken und CSS zur Einfügung von Linien
• Anpassung der mobilen Ansicht und weitere Anpassungsmöglichkeiten
• Beispiele und Inspiration für Website-Layouts mit Linien

FAQ:

Q: Kann ich die Linien in verschiedenen Farben anzeigen lassen? A: Ja, Sie können die Linienfarbe entweder manuell festlegen oder von der Farbe des Abschnitts übernehmen.

Q: Kann ich die Linien in der mobilen Ansicht ändern? A: Ja, Sie können die vertikalen Linien in der mobilen Ansicht horizontal anzeigen lassen, indem Sie Media Queries verwenden.

Q: Kann ich die Linien auf bestimmte Abschnitte beschränken? A: Ja, Sie können die Linien nur auf Code-Blöcke anwenden, die eine spezielle Klasse enthalten.

Q: Kann ich die Linien anpassen, indem ich den CSS-Code ändere? A: Ja, Sie können den CSS-Code anpassen, um die Positionierung, Breite und weitere Eigenschaften der Linien zu ändern.

Q: Kann ich die Linien in verschiedenen Website-Layouts verwenden? A: Ja, die Linien können in verschiedenen Website-Layouts verwendet werden, um ein minimalistisches und modernes Design zu erzielen.

Ressourcen:

• Squarespace