Layout-Grundlagen

Struktur einer slidde-Webseite

Slidde.co verwendet eine einfache Vier-Schichten-Struktur:

Seite

Die Seite-Schicht befindet sich ganz oben und wird verwendet, um globale Stile wie Schriftarten, Farben und Linkstile festzulegen, da CSS-Eigenschaften vererbbar sind.

Optional können Sie CSS-Variablen verwenden, um Ihre Vorlage benutzerfreundlicher zu gestalten.

Wenn Sie das Seite-Element nicht direkt auswählen können, verwenden Sie die Option Seite auswählen in der Symbolleiste.

Die Funktion Hash-Abschnitt kann eine mehrseitige Website simulieren. Schauen Sie sich diese Demo an: Demo Link

Folie

Ein Folie ist das erste Element unter einem Seite und wird zur Segmentierung von Inhalten verwendet.

• Einfache Seiten, wie "Link in Bio"-Seiten, können nur einen Slide haben.
• Komplexe Landingpages könnten mehrere Abschnitte wie #header, #hero, #works, #contact, #footer enthalten.

Ein Anker-ID (HTML-ID) ist im Wesentlichen eine HTML-ID. Benennen Sie sie basierend auf dem Inhalt innerhalb des Folie für eine einfache Navigation mit Links wie „#ID“. Erfahren Sie mehr über Skip-Links.

Um einen Folie von der endgültigen Website auszublenden, ihn aber gespeichert zu halten, aktivieren Sie das Attribut Versteckt. Dies ist ähnlich wie bei PowerPoint's versteckten Folien und kann auch für Tutorials verwendet werden.

Die Funktion Haftend ist für schwebende Navigationsleisten oder andere Elemente gedacht. Sehen Sie sich hier ein Beispiel an: Sticky Demo

Container

Ein Container verwaltet responsive Breiten und mehrspaltige Anzeigen.

• Mobile und Desktop-Breiten unterscheiden sich normalerweise. Verwenden Sie das Attribut Breite in einem Container für adaptive Breiten auf verschiedenen Geräten.
• Spalten definieren, wie viele Spalten sich in einem Container befinden. Sie können Breiten wie x/12 festlegen (z. B. zwei 6/12-Spalten für jeweils 50% Breite).

Jede Spalte kann auch horizontale und vertikale Ausrichtungseinstellungen haben.

Andere

Andere Elemente sind Inline-Elemente, die innerhalb des Containers positioniert werden können.

Indem Sie diesem strukturierten Ansatz folgen, können Sie mit Slidde.co mühelos optisch ansprechende, responsive Webseiten erstellen.