Begin hier

Styling

Laten we beginnen met de styling van de sjabloon.

Kleuren

Rental X maakt gebruik van Color Swatches, wat betekent dat u eenvoudig een kleurstaal kunt bewerken om deze sitebreed bij te werken.

Om dit te doen, hoef je alleen maar naar het tabblad Stijl in de rechter zijbalk te gaan, scroll dan naar Kleuren in de sectie Typografie en als je op de kleur klikt, krijg je alle kleurstalen te zien en kun je ze bewerken zodat ze in de hele site worden bijgewerkt naar elke gewenste kleur.

Lettertypen

Rental X-sjabloon gebruikt één lettertype voor de hele site, en het is ingesteld in de selector Body (Alle pagina's), dus dit betekent dat je het lettertype op de hele site eenvoudig met één klik kunt bijwerken.

Klik op elke pagina op de oranje selector rechtsboven op het tabblad Stijl en selecteer vervolgens Body (All Pages). Als je dit gedaan hebt, kun je naar het gedeelte Typografie hieronder gaan en het lettertype wijzigen in een lettertype dat past bij jouw bedrijfsmerk.

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

Afbeeldingen en pictogrammen

Sommige pictogrammen of afbeeldingen in de sjabloon zijn normale afbeeldingen/grafieken, dus u zult zien dat wanneer u alle kleuren bijwerkt, 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 hier geen invloed op. Als je deze afbeeldingen opnieuw wilt gebruiken, kun je ze altijd downloaden en bewerken met een ontwerpsoftware (bijv. Photoshop, Illustrator, Sketch, Figma, enz.) of direct je eigen afbeeldingen/afbeeldingen 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 bijvoorbeeld een blogbericht).

Je kunt al deze inhoud gemakkelijk herkennen omdat deze grijs wordt weergegeven in de Navigator van de linkerzijbalk en een blauwe rand toont wanneer je erop klikt of de muisaanwijzer erboven houdt.

Als je dit type inhoud wilt bewerken, kun je erop dubbelklikken en direct typen.

Dynamisch Content Management Systeem (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).

Je kunt dit allemaal gemakkelijk herkennen omdat het paars wordt weergegeven in de Navigator van de linkerzijbalk en het een paarse rand toont als je erop klikt of de muisaanwijzer erboven houdt.

Deze inhoud moet direct worden bijgewerkt in het CMS gedeelte. Dit is bedoeld om het voor jou heel gemakkelijk te maken om het bij te werken, aangezien het zeer waarschijnlijk is dat het constant bijgewerkt moet worden (bijvoorbeeld het toevoegen van een nieuw blogbericht).

Als je een complete automatisch gegenereerde CMS pagina wilt bewerken (bijvoorbeeld een Blog Post), dan kun je deze pagina bewerken onderaan alle pagina's in de sectie Pagina's in de linker zijbalk.

Producten (e-commerce)

Producten of e-commerce content werkt op dezelfde manier als dynamische CMS content, maar dan uitsluitend gericht op e-commerce producten.

Je kunt de e-commerce content op dezelfde manier herkennen als de CMS content, omdat deze ook paars wordt weergegeven in de Navigator van de linker zijbalk en met een paarse rand wanneer je erop klikt of de muisaanwijzer erboven houdt.

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

Als je de automatisch gegenereerde product eCommerce pagina wilt bewerken, dan vind je deze pagina bijna onderaan alle pagina's, net boven de CMS collectie pagina's.

Nuttige opmerkingen

Naast de belangrijkste basisuitleg die we hierboven hebben gedeeld, delen we hier een aantal tips en how-to's die voortkomen uit de meest voorkomende vragen die we ontvangen.

Interacties

Als je een sjablooninteractie wilt bewerken (bijvoorbeeld een verschijningseffect verwijderen), kun je elementen met interacties gemakkelijk herkennen omdat deze een klein interactiepictogram (een klein dondertje) hebben in de Navigator aan de linkerkant.

Als je op dit kleine pictogram Interacties klikt, open je het tabblad Interacties in de rechter zijbalk voor dit element, waar je de interactie kunt bewerken.

Mobiele weergave of tabletweergave

Elke keer dat je een wijziging aanbrengt (bijvoorbeeld een nieuw sectieontwerp), is het een goede gewoonte om naar de bovenste navigatie van je Viewport te gaan en te kijken hoe deze eruitziet op Tablet en Mobiel.

Als u alleen een sjabloonsectie bewerkt met bijgewerkte tekst of afbeeldingen en u wist geen sjabloonklasse, dan 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 ervoor te zorgen dat alles er perfect uitziet.

Meta-titel, beschrijving en uitgelichte afbeelding bewerken

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

Houd er rekening mee dat het belangrijk is om dit op paginabasis te veranderen.

Back-ups

Als er iets fout gaat, bijvoorbeeld als je niet tevreden bent over waar de website naartoe gaat, als je enkele cruciale klassen hebt verwijderd die nodig waren om de Template er mooi uit te laten zien, of als je gewoon naar een vorige versie wilt gaan om wat voor reden dan ook, kun je altijd naar de sectie Back-ups gaan.

Je vindt het in het gedeelte Instellingen in de linker zijbalk, en dan kun je gewoon alle automatische of handmatige back-ups zien. Terugzetten naar de oude back-up is slechts een klik verwijderd.