Layout-Grundlagen

Struktur einer slidde-Webseite

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

• userCompName.Page (Globale Stile)
• userCompName.Slide (Inhaltssegmentierung)
• userCompName.Container (Responsive Breite, Mehrere Spalten)
• Inline-Elemente (Spezifischer Inhalt)

userCompName.Page

Die userCompName.Page-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 userCompName.Page-Element nicht direkt auswählen können, verwenden Sie die userCompOption.Select page-Option in der Symbolleiste.

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

userCompName.Slide

Ein userCompName.Slide ist das erste Element unter einer userCompName.Page 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 userCompOption.htmlId ist im Wesentlichen eine HTML-ID. Benennen Sie sie basierend auf dem Inhalt innerhalb des userCompName.Slide, um eine einfache Navigation mit Links wie „#ID“ zu ermöglichen. Erfahren Sie mehr über Skip-Links.

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

Der userCompOption.sticky-Feature ist für schwebende Navigationsleisten oder andere Elemente gedacht. Siehe ein Beispiel hier: Sticky Demo

userCompName.Container

Ein userCompName.Container verwaltet responsive Breiten und mehrspaltige Anzeigen.

• Mobile und Desktop-Breiten unterscheiden sich normalerweise. Verwenden Sie das userCompOption.width-Attribut in einem userCompName.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 Leichtigkeit optisch ansprechende, responsive Webseiten mit Slidde.co erstellen.