Begin hier

Styling

Laten we beginnen met de styling van het sjabloon.

Kleuren

Web3 X template is gebouwd met behulp van Color Swatches, wat betekent dat u gemakkelijk een kleurstaal kunt bewerken die sitebreed wordt bijgewerkt.

Om dit te doen, hoeft u alleen maar naar het tabblad Stijl in de rechterzijbalk te gaan, dan naar Kleuren in de sectie Typografie te scrollen, en als u op de kleur klikt, kunt u alle kleurstalen zien en ze bewerken om ze in de hele site bij te werken naar elke gewenste kleur.

Fonts

Web3 X template gebruikt één enkel lettertype in de breedte, en het is ingesteld in de Body (All Pages) selector, dus dit betekent dat u gemakkelijk met één klik het lettertype op de hele site kunt bijwerken.

Klik op elke pagina op de oranje selector rechtsboven in het tabblad Stijl, en selecteer dan Body (All Pages). Als u dit gedaan hebt, kunt u naar het onderdeel Typografie gaan en het lettertype wijzigen in een lettertype dat past bij uw bedrijfsmerk.

Als u een aangepast of premium lettertype nodig hebt dat niet in Webflow beschikbaar is, kunt u altijd naar Projectinstellingen > Lettertypen gaan en daar kunt u aangepaste lettertypen uploaden of uw Adobe Fonts account koppelen.

Graphics & Pictogrammen

Sommige pictogrammen of afbeeldingen in de sjabloon zijn normale afbeeldingen/grafieken, dus u zult merken dat bij het bijwerken van alle kleuren, deze nog steeds de sjabloonkleur hebben.

Dit gebeurt omdat deze afbeeldingen afbeeldingen zijn (PNG, JPG, SVG, enz.), dus het bijwerken van de Webflow CSS (styling) heeft daar geen invloed op. Als je deze afbeeldingen opnieuw wilt gebruiken, kun je ze altijd downloaden en bewerken met behulp van ontwerpsoftware (bijv. Photoshop, Illustrator, Sketch, Figma, enz.), of direct je eigen afbeeldingen/grafieken uploaden die bij je merk passen.

Statische pagina's

Statische inhoud is alle inhoud die niet CMS-gebaseerd is, wat betekent dat het niet dynamisch is (zoals een Blog Post, bijvoorbeeld).

U kunt al deze inhoud gemakkelijk herkennen omdat deze grijs wordt weergegeven in de Navigator van de linkerzijbalk, en een blauwe rand vertoont wanneer u erop klikt of er met de muis overheen gaat.

Als u dit soort inhoud wilt bewerken, kunt u er gewoon op dubbelklikken, en dan kunt u daar direct typen.

Dynamische inhoud (CMS)

Dynamische inhoud is alle inhoud die dynamisch is en automatisch wordt gegenereerd op basis van de inhoud die is toegevoegd in de CMS-sectie in de linker zijbalk (net onder het pictogram Pagina's).

U kunt dit alles gemakkelijk herkennen omdat het als paars wordt weergegeven in de Navigator van de linkerzijbalk, en het een paarse rand vertoont wanneer u erop klikt of de muisaanwijzer erboven houdt.

Deze inhoud moet rechtstreeks in het CMS gedeelte worden bijgewerkt. Dit is bedoeld om het voor u heel gemakkelijk te maken om het bij te werken, aangezien het zeer waarschijnlijk is dat het voortdurend moet worden bijgewerkt (Bijvoorbeeld het toevoegen van een nieuwe blogpost).

Ook als u een volledige automatisch gegenereerde CMS-pagina wilt bewerken (bijvoorbeeld een Blog Post), vindt u deze pagina beschikbaar voor bewerking onderaan alle pagina's in de sectie Pagina's in de linker zijbalk.

Producten (eCommerce)

Producten of eCommerce content functioneren op een vergelijkbare manier als de CMS dynamische content, maar dan uitsluitend gericht op eCommerce producten.

U kunt de e-commerce inhoud op dezelfde manier herkennen als de CMS inhoud, omdat deze ook paars wordt weergegeven in de Navigator van de linkerzijbalk, en met een paarse rand wanneer u erop klikt of de muisaanwijzer erboven houdt.

Deze inhoud moet direct worden bijgewerkt in het eCommerce tabblad in de linker zijbalk. Dit is bedoeld om het voor u heel gemakkelijk te maken om het bij te werken, aangezien het zeer waarschijnlijk is dat het voortdurend moet worden bijgewerkt (bijvoorbeeld het wijzigen van een productprijs, of het toevoegen van meer voorraad).

Ook als u de automatisch gegenereerde product eCommerce pagina wilt bewerken, vindt u deze pagina beschikbaar voor bewerking bijna onderaan alle pagina's net boven CMS collectie pagina's.

Nuttige opmerkingen

Naast de belangrijkste basisuitleg die we hierboven deelden, delen we hier een paar tips en how-to's die voortkomen uit de meest voorkomende vragen die we krijgen.

Interacties

Als u een sjablooninteractie wilt bewerken (d.w.z. een schijneffect verwijderen), kunt u gemakkelijk elementen identificeren die interacties hebben, aangezien deze een klein Interacties-pictogram (een klein dondertje) hebben in de Navigator van de linkerzijbalk.

Als u op dit kleine pictogram Interacties klikt, opent u het tabblad Interacties in de rechterzijbalk voor dit element, waar u de interactie kunt bewerken.

Mobiele of tabletweergave

Elke keer dat je een verandering aanbrengt (bijvoorbeeld, je maakt een nieuw sectieontwerp), is het een goede gewoonte om naar je Viewport topnavigatie te gaan en te kijken hoe het eruit ziet op Tablet en Mobiel.

Als u alleen een sjabloonsectie bewerkt met bijgewerkte tekst of afbeeldingen en u wist geen sjabloonklasse, zou dit niet nodig moeten zijn, maar als u de sjabloon dieper aanpast, klassen bewerkt of nieuwe secties maakt, is het altijd goed om uw mobiele en tabletweergaven voortdurend te bewerken om er zeker van te zijn dat alles er perfect uitziet.

Meta-titel, beschrijving en aanbevolen afbeelding bewerken

Als u de titel, beschrijving en afbeelding wilt aanpassen die worden getoond wanneer u uw website deelt op een willekeurige plaats (bijv. Facebook, Twitter, enz.), kunt u eenvoudig naar de sectie Pagina's gaan in de linkerzijbalk, op het kleine pictogram Instellingen klikken van de pagina die u wilt aanpassen, en al deze instellingen zullen verschijnen.

Het is belangrijk om dit op pagina basis te veranderen.

Back-ups

Als er iets fout gaat, bijvoorbeeld als het u niet bevalt waar de website naartoe gaat, als u enkele kritieke klassen hebt verwijderd die nodig waren om de Template er mooi uit te laten zien, of als u gewoon naar een vorige versie wilt gaan om welke reden dan ook, kunt u altijd naar de sectie Back-ups gaan.

U kunt het vinden in de sectie Instellingen in de linker Zijbalk, en dan ziet u gewoon alle automatische of handmatige back-ups. Terugzetten naar de oude back-up is slechts een klik verwijderd.