An Vorlagen-Designer

Last updated on 11/1/2024@mrbirddev

Wenn Ihre Vorlage ein wunderbares Bearbeitungserlebnis auf slidde.co bietet, werden Kunden Sie kontaktieren, wenn sie das Design ändern oder auf mehrere Seiten erweitern möchten.

Ein Benutzer ohne Programmier- oder Designerfahrung kann den Rich-Text-Editor verwenden und Bilder selbst ändern. Aber manchmal ist eine schöne Vorlage vielleicht zu komplex, um leicht an ihre Bedürfnisse angepasst zu werden.

Hier sind einige Tipps.

Tutorials schreiben

Verwenden Sie Versteckt in Folie, um ein Tutorial darüber zu schreiben, wie man Ihre Vorlagen verwendet. Hier ist ein Beispiel.

Bearbeiten von animierten versteckten Elementen

Wenn Sie Animationen haben, die bestimmten Text/Bilder verbergen, wie z.B. opacity: 0 oder display: none, können Sie über den CSS-Stilnamen fahren und das Bearbeitungssymbol anklicken. Wählen Sie dann die Option "im Canvas versteckt", um dies nur beim Exportieren einer echten Website anzuwenden. So kann Ihr Benutzer die Elemente im Editor leicht bearbeiten.

Verwendung von Variablen

Sie können CSS-Variablen festlegen, damit Ihre Kunden die Farbgebung oder andere Attribute Ihrer Vorlagen leicht ändern können.

--primary-fg: #000
--primary-bg: #fff

Und Sie können es auf alle Nachkommen des Elements anwenden, einschließlich des Elements selbst

color: var(--primary-fg)
background-color: var(--primary-bg)

Hier sind die offiziellen Dokumente für eine ausführlichere Anleitung.

Styling von Elementlisten

Wenn Sie Elementlisten stylen, können erweiterte Selektoren angewendet werden, um das Benutzererlebnis zu verbessern.

Wenn Sie eine Button-Liste mit color:red, color:blue, color:green stylen und der Benutzer eine andere Anzahl von Buttons hat oder versehentlich einen Button löscht, muss er die Buttons erneut selbst stylen.

Wenn Sie jedoch das Folgende auf eine Schaltflächenliste anwenden,

&>*:nth-child(3n+1).color: red
&>*:nth-child(3n+2).color: green
&>*:nth-child(3n+3).color: blue

Egal wie viele Buttons der Benutzer hat, sie enden immer mit einer Button-Sequenz in wechselnden Farben.

Dasselbe Prinzip kann auf eine Liste von Bildern angewendet werden.

Und Sie können mehr über nth-child und nth-of-type lesen, um mehr über ihre spezifischen Grammatiken zu erfahren.