Börja här

Styling

Låt oss börja med att styla mallen.

Färger

Web3 X-mallen är byggd med hjälp av Color Swatches, vilket innebär att du enkelt kan redigera en färg som uppdateras på hela webbplatsen.

För att göra detta behöver du bara gå till fliken Stil i den högra sidofältet och sedan bläddra till Färger i avsnittet Typografi. Om du klickar på färgen kan du se alla färgmallarna och redigera dem så att de uppdateras på hela webbplatsen till vilken färg som helst.

Typsnitt

Web3 X-mallen använder ett enda typsnitt över hela sidan och det är inställt i valfriheten Body (All Pages), vilket innebär att du enkelt kan uppdatera typsnittet på hela webbplatsen med ett enda klick.

På vilken sida som helst klickar du bara på den orangefärgade valmöjligheten längst upp till höger på fliken Stil och väljer sedan Kropp (alla sidor). När du har gjort detta kan du gå till avsnittet Typografi nedan och ändra typsnittet till ett typsnitt som passar ditt företags varumärke.

Om du behöver ett anpassat typsnitt eller ett premiumtypsnitt som inte finns i Webflow kan du alltid gå till Projektinställningar > Typsnitt och ladda upp anpassade typsnitt eller ansluta ditt Adobe Fonts-konto.

Grafik och ikoner

Vissa ikoner eller grafik i mallen är vanliga bilder/grafiker, så du kommer att märka att när du uppdaterar alla färger kommer dessa fortfarande att ha mallens färg.

Detta beror på att dessa bilder är bilder (PNG, JPG, SVG osv.), så en uppdatering av Webflow CSS (styling) påverkar inte dem. Om du vill återanvända den här grafiken kan du alltid ladda ner den och redigera den med hjälp av ett designprogram (t.ex. Photoshop, Illustrator, Sketch, Figma osv.) eller ladda upp dina egna bilder/grafiker som matchar ditt varumärke direkt.

Statiska sidor

Statiskt innehåll är allt innehåll som inte är CMS-baserat, vilket innebär att det inte är dynamiskt (som till exempel ett blogginlägg).

Du kan enkelt identifiera allt detta innehåll eftersom det visas grått i navigatorn i vänster sidofält och har en blå kant när du klickar på det eller håller muspekaren över det.

Om du vill redigera den här typen av innehåll kan du bara dubbelklicka på det, så kan du skriva direkt där.

Dynamiskt innehåll (CMS)

Dynamiskt innehåll är allt innehåll som är dynamiskt och som genereras automatiskt baserat på det innehåll som läggs till i CMS-avsnittet i vänster sidofält (strax under ikonen Sidor).

Du kan enkelt identifiera allt detta eftersom det visas som lila i navigatorn på vänster sida och har en lila kant när du klickar på det.

Detta innehåll ska uppdateras direkt i CMS-avsnittet. Detta är avsett att göra det mycket enkelt för dig att uppdatera det, eftersom det är mycket troligt att det kommer att behöva uppdateras kontinuerligt (till exempel genom att lägga till ett nytt blogginlägg).

Om du vill redigera en komplett automatisk genererad CMS-sida (t.ex. ett blogginlägg) finns den sidan tillgänglig för redigering längst ner på alla sidor i avsnittet Sidor i den vänstra sidofältet.

Produkter (e-handel)

Produkter eller e-handelsinnehåll fungerar på samma sätt som dynamiskt innehåll i CMS, men är enbart inriktat på e-handelsprodukter.

Du kan identifiera e-handelsinnehåll på samma sätt som CMS-innehållet, eftersom det också visas lila i navigatorn i vänster sidofält och har en lila kant när du klickar på det.

Detta innehåll ska uppdateras direkt i fliken e-handel i den vänstra sidofältet. Detta är tänkt att göra det mycket enkelt för dig att uppdatera det, eftersom det är mycket troligt att det kommer att behöva uppdateras kontinuerligt (t.ex. ändra ett produktpris eller lägga till mer lager).

Om du vill redigera den automatiskt genererade e-handelssidan för produkter finns den här sidan tillgänglig för redigering nästan längst ner på alla sidor, precis ovanför CMS-samlingssidorna.

Användbara anteckningar

Förutom den grundläggande förklaringen som vi delade med oss av ovan, delar vi här med oss av några tips och hur man gör, som kommer från de vanligaste frågorna som vi får.

Interaktioner

Om du vill redigera en mallinteraktion (t.ex. ta bort en effekt) kan du enkelt identifiera element som har interaktioner eftersom de har en liten interaktionsikon (en liten åska) i navigatorn på vänster sida.

Om du klickar på den lilla interaktionsikonen öppnas fliken Interaktioner i den högra sidofältet för det här elementet, där du kan redigera interaktionen.

Vy för mobil eller surfplatta

Varje gång du gör en ändring (t.ex. skapar en ny sektionsdesign) är det bra att gå till Viewport-toppnavigationen och se hur det ser ut på surfplatta och mobil.

Om du bara redigerar ett avsnitt i mallen med uppdaterad text eller bilder och inte raderar någon klass i mallen, bör detta inte behövas.Om du däremot anpassar mallen mer ingående, redigerar klasser eller skapar nya avsnitt är det alltid bra att ständigt redigera din mobil och surfplatta för att se till att allt ser perfekt ut.

Redigera Meta Title, Desc och Featured Image

Om du vill anpassa titeln, beskrivningen och bilden som visas när du delar din webbplats på något ställe (t.ex. Facebook, Twitter osv.) kan du enkelt gå till avsnittet Sidor i den vänstra sidofältet, klicka på den lilla ikonen Inställningar för den sida du vill anpassa och alla dessa inställningar kommer att visas.

Observera att det är viktigt att ändra detta på sidnivå.

Säkerhetskopior

Om något går fel, t.ex. om du inte gillar vart webbplatsen är på väg, om du har tagit bort några viktiga klasser som krävdes för att få mallen att se bra ut eller om du bara vill gå tillbaka till en tidigare version av någon anledning, kan du alltid gå till avsnittet Säkerhetskopior.

Du hittar den i avsnittet Inställningar i den vänstra sidofältet, och då kan du se alla automatiska eller manuella säkerhetskopior. Att återställa till den gamla säkerhetskopian är bara ett klick bort.