Till mallformgivare

Om din mall har en fantastisk redigeringsupplevelse på slidde.co, kommer kunder att kontakta dig när de vill ändra designen eller utöka designen till flera sidor.

En användare utan kodnings- eller designkunskaper kan använda den rika textredigeraren och ändra bilder på egen hand. Men ibland kan en vacker mall vara för komplex för att enkelt anpassas till deras behov.

Här är några tips.

Skriva handledningar

Använd Dold i Bildspel för att skriva en handledning om hur man använder dina mallar. Här är ett exempel

Redigera animerade dolda element

Om du har animationer som döljer viss text/bilder, såsom opacity: 0 eller display: none, kan du sväva över CSS-stilnamnet och klicka på redigeringsikonen. Välj sedan alternativet "dold i canvas" för att endast tillämpa det när du exporterar en riktig webbplats. Så kan din användare enkelt redigera elementen i redigeraren.

Använda variabler

Du kan ställa in CSS-variabler för att låta dina kunder enkelt ändra färgsättning eller andra attribut i dina mallar.

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

Och du kan tillämpa det på alla elementets efterföljare, inklusive sig själv

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

Här är officiella dokumentationen för en mer djupgående guide.

Styling av listor med element

När du stylar listor med element kan avancerade selektorer användas för att förbättra användarupplevelsen.

Om du stylar en knapp-lista med color:red, color:blue, color:green, när användaren har ett antal knappar annat än 3, eller om de av misstag tar bort någon knapp, måste de styla knapparna själva igen.

Men om du gör följande till en Knapplista,

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

Oavsett hur många knappar användaren har, kommer de alltid att få en knappsekvens med alternerande färger.

Samma princip kan tillämpas på en lista med bilder.

Och du kan läsa mer om nth-child och nth-of-type för att lära dig om deras specifika grammatik.