Gör webbplatsen till din, ett tydligt steg i taget.
Redigera innehåll, justera designen och välj funktioner direkt bredvid din webbplats. Redigeraren visar vad du ändrar innan du sparar.
Din webbplats. Dina val. En tydlig väg från första ändring till sparat utkast.
Arbeta där du ser resultatet.
Välj en del nedan för att öppna den riktiga redigeraren på sidan. Illustrationen visar sambandet mellan sidan och dess kontroller.
En plats att börja.
Ditt innehåll visas här medan du arbetar i redigeraren bredvid.
Valt: den här sidanVälj vad du vill arbeta med.
Varje val öppnar den befintliga webbplatsredigeraren.
Din startpunkt och dina val
Se vad startmallen innehåller och hur dina nuvarande val i webbläsaren skiljer sig. Öppna Funktioner eller Design för att fortsätta med samma utkast.
Öppnar dina val i webbläsaren…
Jämförelsen läser bara ditt webbläsarutkast. Den byter inte mall, ersätter inte innehåll och skapar inget köp eller någon nedladdning. Ditt innehåll, din navigation, dina översättningar och andra designinställningar finns kvar i samma utkast.
Se din design i användning
Ändra färger, hörn och avstånd på välbekanta delar av en sida.
Förhandsvisning av design
En design, välbekanta delar.
De här exemplen använder färgerna och designvalen i ditt aktuella webbläsarutkast.
Text, ytor och knappar
Gemensamma färger håller ihop relaterade delar.
ÅtgärdsexempelProjektets delar
- Sidor
- Navigering
- Inställningar
Skrivskyddade exempel. Administrationsexemplet har inget anslutet konto eller några åtgärder.
Aktuella val
- Hörn
- Balanserade
- Avstånd
- Bekvämt
- Kantlinjer
- Tydliga
- Täthet
- Bekvämt
Automatiska och anpassade färger
Varje färg har ett syfte. Automatiska värden följer relaterade färger, medan anpassade värden behåller ditt val. Använd de befintliga färgkontrollerna för att ändra eller återställa ett värde.
Redigerar mörkt utseende
- Bakgrund
#101010Automatisk- Text
#F5F5F5Automatisk- Huvudåtgärd
#EEF067Automatisk- Yta
#181818Automatisk- Text på ytor
#F5F5F5Automatisk- Knapptext
#000000Automatisk- Nedtonad yta
#232323Automatisk- Sekundär text
#ADADADAutomatisk- Kanter
#787878Automatisk- Tangentbordsfokus
#EEF067Automatisk
Design
Din förhandsvisning i webbläsaren
Färger, hörn och avstånd delas i den här webbplatsförhandsvisningen. Täthet och kantbredd ändrar exemplen ovan. Färgändringar gäller det visade utseendet.
Återställ dina val
Öppnar sparade val…
Spara behåller dina val i den här webbläsaren. Återställ en färg för att använda dess automatiska värde. Återställ i redigeraren återför alla osparade ändringar, även innehåll och funktioner, till din senaste sparning.
Spara och återställaDet här ändras tillsammans
Avstånd ändrar utrymmet runt grupper. Täthet ändrar utrymmet inuti exemplen. Hörn och kantlinjer formar kort, fält och åtgärder. Fler designval öppnar de befintliga fälten för täthet och kantlinjer.
Kontrollera resultatet
De här exemplen visar en gemensam designkälla. De verifierar inte varje installerad sida, administrationsvy eller e-postmeddelande. Kontrollera riktiga kontroller och tangentbordsfokus i båda utseendena. Kontraståterkoppling intygar inte tillgänglighet.
Typografi, layout och varumärke
Se textens rytm. Förstå vad den här förhandsvisningen kan ändra.
Laddar förhandsvisning av typsnitt…
Projektidentitet
- Projektets webbplatsnamn
- Field & Fold
- Projektbeskrivning
- Fältanteckningar och stillsamma övningar för uppmärksamhet, reflektion och det som händer när du återvänder till samma plats.
Exempel på webbläsarflik
Field & FoldExemplet visar projektets namn med Kottokos fasta ikon. Ändringar av projektidentitet eller design ersätter inte den här webbplatsens ikon eller ordmärke.
E-postexempel
Se exempel på transaktionsmeddelanden som följer projektets design. Att visa dem ställer inte in någon avsändare och skickar ingen e-post.
Visa e-postexempelFormat som stöds och begränsningar
Exemplen visar ditt utkast i webbläsaren. Det separata lokala varumärkesprovet stöder två fasta SVG-filer och en fil som beskriver deras källa. Nedladdningar är inte tillgängliga i denna offentliga förhandsvisning.
- Lokalt prov för varumärkesblad
brand-sheet.svg· 1600 × 1000- Lokalt prov för socialt inlägg
social-announcement.svg· 1200 × 630- Källinformation
kottoko-brand-assets.manifest.json
Ett lokalt prov använder en verifierad installerad design. Osparade utkaständringar ingår inte. Export blockeras av en design som bara tillämpats på den lokala webbplatsen, en ogiltig post för den eller en installerad design som inte stämmer överens med projektet. Förhandsvisningen verifierar inte exportfiler och ger inte tillstånd att publicera.
SVG-filerna hänvisar till projektets typsnitt; typsnitten ingår inte. Det lokala provet använder ett projektnamn på högst 80 tecken och en beskrivning på högst 240. Fasta layouter kan korta ned längre text.
Export av ikoner, e-post, PNG, PDF och presentationer ingår inte i denna offentliga förhandsvisning. Det finns ingen värdbaserad generator för material här.
Tillgänglighet och responsivitet
Prova med tangentbordet
Läs ett exempel, rätta ett ofullständigt formulär och förhandsvisa på en liten skärm.
Läsexempel
Regn vid färdvägens kant.
En anteckning om avbrott, uppmärksamhet och det som våta ytor gör synligt.
Regn vid färdvägens kant.
Regn förändrar planen. Den raka vägen smalnar, välbekanta märken försvinner och en yta som vanligtvis träder tillbaka börjar svara himlen. Avbrottet är användbart eftersom det ber om ett långsammare tempo innan det ber om en förklaring.
Rätta ett ofullständigt formulär
Lämna ett obligatoriskt fält tomt. Exempelformuläret visar vad som behöver fyllas i och behåller det du har skrivit.
Fortsätt med samma uppgift på en liten skärm
Öppna redigerarens mobilförhandsvisning. Använd sedan webbläsarens zoom för att granska innehållet i större storlek.
Mindre rörelse, samma funktioner
Öppna och stäng den här läsnotisen. Enhetens inställning för minskad rörelse tar bort den korta rörelsen när den öppnas.
Regn vid färdvägens kant.
En anteckning om avbrott, uppmärksamhet och det som våta ytor gör synligt.
Text och bakgrunder följer förhandsvisningens tema. Granska ditt eget innehåll i både ljust och mörkt läge.
Lokala exempel, inte en tillgänglighetsgranskning. Granska ditt eget innehåll och hela användarflöden innan du publicerar.
Webbläsarexempel
Rörelse som hjälper dig följa en förändring
Prova en kort framtoning. Projektets val och enhetens inställning samverkar.
Visa läsanteckning
Regn vid färdvägens kant.
En anteckning om avbrott, uppmärksamhet och det som våta ytor gör synligt.
Samma läsinnehåll är tillgängligt utan rörelse.
Vad förhandsvisningen visar
Anteckningen kan tonas fram kort när den öppnas. Den stängs direkt. Reducerad projektrörelse eller enhetens inställning tar bort rörelsen, med samma innehåll och kontroller.
Detta lokala exempel ändrar inte varje befintlig kontroll och verifierar inte hela rörelsebiblioteket.
- Projektets rörelse
- Lugn
- Återkopplingens varaktighet
- 120ms
- Framtoningens varaktighet
- 240ms
- Tidskurva
- cubic-bezier(0.2, 0, 0, 1)
Se hur långt en ändring sträcker sig.
Redigeraren visar vilket objekt du ändrar. Delad navigering och projektdesign påverkar mer.
Den här sidan
Ändra texten på den valda sidan i det aktuella språket.
Delade delar
Länkar i sidhuvud och sidfot används på hela webbplatsen.
Hela projektet
Designval som färger och typografi följer projektets tema.
Behåll helheten i sikte.
Redigeraren arbetar med aktuellt språk och ditt sparade utkast. Vissa arbetsflöden har egna granskningsverktyg.
Språk
Byt språk i webbplatsens sidhuvud. Innehållsändringar gäller språket du ser; designval gäller hela projektet.
Artikelhistorik
Artiklar har separat redaktionell granskning och versionshistorik. Sidredigeraren använder Spara och Återställ för det aktuella demo-utkastet.
Öppna artikelexempletProjektbeskrivning
En valfri projektbeskrivning planeras för att samla målgrupp, mål och begränsningar. Den kan ännu inte redigeras i denna publika demo.
Granska, spara och återställ.
Förhandsgranska den här sidan i storlekar för dator, surfplatta och telefon. Funktionsexempel som stöder det visar också vanliga tillstånd. Spara demo-utkastet när det ser rätt ut, eller bekräfta Återställ för att gå tillbaka till senaste sparningen.
Bygg en webbplats eller app.Med grundfunktionerna på plats.
Kottoko är ett startprojekt för webbplatser och appar. Det innehåller sidor, användarkonton, formulär och funktioner för en webbutik som du kan anpassa i stället för att bygga från grunden.
Funktionerna du behöver finns redan på plats.
Se ändringarna medan du gör dem.
Redigera innehåll, justera designen och välj funktioner på samma webbplats som besökarna ser.
Gör Kottoko till ditt.
Ändra rubrik och accent i miniatyrsidan. Den använder samma rubrik-, fält- och färgkontroller som webbplatsen.
Gör Kottoko till ditt.
Ändra rubrik och accent i miniatyrsidan. Den använder samma rubrik-, fält- och färgkontroller som webbplatsen.
Det här kan du bygga
Utforska startpunkter för webbplatser, butiker och medlemsupplevelser.
Webbplatser
Publicera dina idéer, arbeten och resurser.
Handel
Sälj produkter, nedladdningar och prenumerationer.
Medlemmar och appar
Skapa utrymmen för medlemmar och kunder.
Tillväxt
Nå din publik och förstå vad som fungerar.
Design
Forma projektets utseende och känsla.
Drift
Håll projektet anslutet och i gång.
Frågor innan du börjar.
Är Kottoko för webbplatser eller appar?
Båda. Börja med publika sidor och använd sedan konton, översikter, formulär, handel och andra inkluderade funktioner efter behov.
Behöver jag skriva kod?
Redigeraren låter dig prova de innehålls-, design- och funktionsval som stöds visuellt. Egen funktionalitet, anslutning av tjänster och driftsättning kan kräva en utvecklare eller kodningsagent.
Är betalningar och e-post klara att använda?
Betalningsintegrationerna stöder för närvarande testläge. De här webbläsarexemplen tar inte betalt och skickar inga transaktionsmejl. Stöd för riktiga betalningar behöver fortfarande implementeras och granskas; e-postleverans behöver en egen tjänstekonfiguration.
Hur fungerar uppdateringar?
Granska hur en ändring påverkar projektet, förbered en säkerhetskopia och kontrollera resultatet före publicering. Din hosting och konfiguration avgör återställningsstegen.
Kan jag ladda ner Kottoko nu?
Publika nedladdningar är inte öppna ännu. Utforska exemplen och dokumentationen eller anmäl dig nedan för nyheter om lanseringen.
Ge ditt nästa projekt ett försprång.
Få lanseringsnyheter, nya exempel och produktuppdateringar.
Bekräfta via e-post. Lämna när du vill. Läs vårt integritetsmeddelande.