Wat deze pagina doet

De Style Manager kunt u het uiterlijk en gevoel van uw website aanpassen zonder het schrijven van een code. Klik op een element dat u ziet op uw site en verander de kleuren, lettertypen, afstand, schaduwen, en nog veel meer. U kunt verschillende stijlen creëren voor lichtmodus en donkere modus, testen hoe dingen eruit zien op mobiele apparaten, en wijzigingen aanbrengen op specifieke pagina's of uw hele site.

Denk aan het als een visuele editor die bovenop uw site zit, laat u wijzen en klik om ontwerp wijzigingen direct te maken.

[Screenshot: pagina-overzicht]

Hoe hier te komen

Navigeren naar Beheerpaneel > Sjablonen > Stijlbeheer

Begrijpen van de pagina

Wanneer u de Style Manager voor het eerst opent, ziet u twee hoofdgebieden naast elkaar:

Linkerpaneel: Style Editor

Dit is uw bedieningspaneel met zeven tabbladen voor verschillende styling opties:

• Kleuren - Tekstkleuren en achtergronden (inclusief kleurverloop)
• Typografie - Lettertypen, maten en tekstopmaak
• Spatiëring - Opvulling en marges
• Randen - Randstijlen, breedtes, kleuren en schaduwen
• Indeling - Weergave instellingen, positionering en flexbox
• Effecten - Doorzichtigheid, transformaties en filters
• Grootte - Breedte, hoogte en aspectverhoudingen

Wanneer u een element op uw site selecteert, toont dit paneel de huidige stijlen en kunt u ze wijzigen.

Rechterpaneel: live voorbeeld

Dit toont uw werkelijke website in een voorbeeldvenster. U kunt:

• Navigeren naar verschillende pagina's
• Klik op elementen om ze te selecteren en stijlen
• Schakelen tussen desktop, tablet en mobiele weergaven
• Schakelen tussen licht en donkere modi
• Zie direct uw wijzigingen als u ze maakt

Bovenste besturingen

De kopbalk bevat:

• Lichtmodus / donkere modus knoppen - Kies welke modus u bewerkt
• Alles opslaan - Sla al uw stijlwijzigingen op
• Alles resetten - Verwijder alle aangepaste stijlen en begin opnieuw

Gemeenschappelijke taken

Hoe stijl een element

Dit is de basisworkflow die je gebruikt voor alle stylingtaken.

1. Klik op de Bewerken-modus knop (cursorpictogram) in de voorbeeldwerkbalk.
2. Een groene "Bewerken modus Active" indicator verschijnt aan de bovenkant van uw scherm.
3. Verplaats uw muis over elementen in het voorbeeld - ze zullen markeren met een blauwe omtrek.
4. Klik op een element om het te selecteren.
5. U ziet informatie over het geselecteerde element bovenaan het linkerpaneel.
6. Gebruik de tabbladen (kleuren, Typografie, enz.) om te veranderen hoe het eruit ziet.
7. Bekijk uw wijzigingen direct verschijnen in het voorbeeld.
8. Als je tevreden bent met de veranderingen, klik Wijzigingen opslaan onderaan het linkerpaneel.

[Screenshot: selecteren-en-bewerken-element]

Kleuren wijzigen

Na het selecteren van een element:

1. Klik op de Kleuren tabblad in het linkerpaneel.
2. Uitbreiden Tekstkleur sectie om tekstkleur te veranderen.
3. Klik op de kleur swatch (gekleurd vierkant) om een kleur picker te openen.
4. Kies een kleur of type een hex-code in het tekstveld.
5. Het element wordt onmiddellijk bijgewerkt in het voorbeeld.

De achtergrond wijzigen:

1. In de Kleuren tab, uitbreid de Achtergrond Section.
2. Kies Vast voor één enkele kleur of Kleurverloop voor een kleurmengsel.
3. Voor solide achtergronden, klik op de kleur swatch en kies uw kleur.
4. Controleren Transparant Als je helemaal geen achtergrond wilt.

[Screenshot: color-picker-interface]

Hoe een kleurverloopachtergrond aanmaken

Verlopen mengen meerdere kleuren soepel samen.

1. Selecteer uw element en ga naar de Kleuren tab.
2. Uitvouwen Achtergrond en klik op de Kleurverloop Button.
3. Kies een richting door te klikken op een van de 8 richtingknoppen (of voer een aangepaste hoek).
4. Je ziet minstens 2 kleurstops. Klik op elke kleur swatch om kleuren te kiezen.
5. Pas de positie schuifregelaars (0-100%) aan om te bepalen waar elke kleur verschijnt.
6. Klik + Stop toevoegen om meer kleuren toe te voegen aan uw kleurverloop.
7. Klik op de X-knop naast een kleurstop om het te verwijderen (u moet minstens 2) houden.
8. Bekijk de verloopvoorbeeldbalk als u wijzigingen aanbrengt.

[Screenshot: kleurverloop-bouwer]

Lettertypen en tekst wijzigen

Na het selecteren van tekst of een element met tekst:

1. Klik op de Typografie tab.
2. Uitvouwen Lettertypefamiliegrootte.
3. Kies een lettertype uit de Lettertypefamilie dropdown (Roboto, Inter, Montserrat, enz.).
4. Stel de Lettergrootte gebruik makend van het nummer invoer en kies de eenheid (px, rem, em, of %).
5. Selecteer een Lettertypegewicht om tekst dunner of vetter te maken (400 is normaal, 700 is vet).

Voor tekstopmaak:

1. Uitbreiden Tekstopmaak Section.
2. Klik op uitlijnknoppen om links, midden, rechts of te rechtvaardigen.
3. Kies Tekst omzetten om tekst UPERCASE, kleine letters of gekapitaliseerd te maken.
4. Kies Tekstdecoratie om te benadrukken, doorstrepen, of overlijnen toe te voegen.

[Screenshot: typografie-opties]

Hoe Spacing toe te voegen

Spatiëring regelt de lege ruimte rond en binnen elementen.

1. Selecteer uw element en klik op de Spatiëring tab.
2. Uitvouwen Opvulling en voer een getal in om ruimte toe te voegen in het element.
3. Uitvouwen Marge en voer een getal in om ruimte buiten het element toe te voegen.

Hoe Randen en Schaduwen toevoegen

Na het selecteren van een element:

1. Klik op de Randen tab.
2. Uitvouwen Rand de grens aanpassen.
3. Kies een Randstijl (Solid, Dashed, Dotted, enz.).
4. Stel de Randbreedte in beeldpunten.
5. Klik op de Randkleur swatch om een kleur te kiezen.
6. Instellen Straal rand Om de hoek.

Een schaduw toevoegen:

1. Uitbreiden Box Shadow Section.
2. Klik op een schaduwvoorinstellingsknop (Geen, SM, MD, LG, XL) voor gewone schaduwstijlen.
3. Of typ een aangepaste schaduwwaarde in de Aangepaste schaduw veld.

[Screenshot: grens-en-schaduw-controles]

Hoe Hover effecten te stijlen

Hover effecten trigger wanneer iemand zijn muis beweegt over een element (zoals knoppen).

1. Selecteer het element waaraan u zweefeffecten wilt toevoegen.
2. Zoek naar de Statusselectie balk onder de elementinformatie.
3. Klik op de :hover Button.
4. De selector display updates om te laten zien dat je hover stijlen bewerkt.
5. Maak uw wijzigingen - probeer de achtergrondkleur te veranderen of een transformatie toe te voegen.
6. Beweeg je muis over het element in het voorbeeld om het zweefeffect te zien.
7. Klik Wijzigingen opslaan Wanneer klaar.

[Screenshot: state-sector-hover]

Hoe stijl voor licht en donker modus apart

Uw site kan er anders uitzien in lichtmodus versus donkere modus.

1. Klik Lichtmodus in de header om lichtmodusstijlen te bewerken.
2. Selecteer elementen en pas ze aan zoals gewenst.
3. Klik Wijzigingen opslaan voor elk element.
4. Klik Donkere modus in de header om over te schakelen naar het bewerken van de donkere modus.
5. Het voorbeeld schakelt automatisch over naar de donkere modus zodat je kunt zien wat je bewerkt.
6. Selecteer dezelfde elementen en pas ze aan voor de donkere modus.
7. Sla uw donkere moduswijzigingen op.

Hoe stijlen toe te passen op specifieke pagina's

Standaard gelden stijlen voor uw hele site. Maar je kunt stijlen maken die alleen op bepaalde pagina's verschijnen.

De Style Manager detecteert automatisch welke pagina u bekijkt:

Paginaspecifieke stijlen toepassen:

1. Gebruik de voorbeeldnavigatie om naar de pagina te gaan die u wilt aanpassen.
2. Klik Bewerken-modus en selecteer elementen op die pagina.
3. Laat je stijl veranderen.
4. Klik Wijzigingen opslaan.
5. Deze stijlen zijn alleen van toepassing op die specifieke pagina.

Hoe Styles resetten

Een enkel element resetten:

1. Selecteer het element dat u wilt resetten.
2. Klik Element resetten onderaan het linkerpaneel.
3. Bevestigen door te klikken OK in de popup.
4. Alle aangepaste stijlen voor dat element worden verwijderd.
5. Het element keert terug naar zijn oorspronkelijke verschijning.

Alles resetten:

1. Klik Alles resetten In de kop.
2. Lees de waarschuwing zorgvuldig - dit verwijdert al uw aangepaste stijlen.
3. Klik OK Om te bevestigen.
4. Alle aangepaste stijlen op uw hele site worden verwijderd.
5. Uw site keert terug naar de standaard verschijning.

Voorbeeldbediening

Navigatiewerkbalk

Met de werkbalk bovenaan kunt u navigeren en het voorbeeld besturen:

Apparaatvoorbeeld

Test hoe uw stijlen eruit zien op verschillende schermgroottes door op deze knoppen te klikken in de preview header:

Het voorbeeld krimpt naar de geselecteerde grootte met een schaduwrand zodat u precies kunt zien hoe mobiele gebruikers uw site zullen zien.

[Screenshot: responsive-preview-modi]

Donkere modus schakelen

Het maanpictogram in de voorbeeldkop schakelt het voorbeeld tussen licht en donker. Dit is gescheiden van de modusknoppen in de hoofdkop:

• Header-modusknoppen - Controleer welke stijlen je SAVER (licht of donker)
• Voorbeeldmaanknop - Controleer welke modus u VIEWING

De stijltabbladen begrijpen

Elk tabblad in het linkerpaneel richt zich op verschillende visuele eigenschappen.

Kleurentabblad

• Tekstkleur - De kleur van tekst in het element
• Achtergrond - Vaste kleur, kleurverloop of transparante achtergrond
• Kleurverloopbouwer - Maak gladde kleurmengsels aan met meerdere kleurstops

Typografietabblad

• Lettertypefamilie - Kies uit professionele weblettertypen
• Lettergrootte - Tekstgrootte met flexibele eenheden (px, rem, em, %)
• Lettertypegewicht - Hoe dun of vet de tekst verschijnt
• Lijnhoogte - Spatie tussen tekstregels
• Briefafstand - Ruimte tussen afzonderlijke letters
• Tekstopmaak - Uitlijning, kapitalisatie, onderstrepingen, enz.

Spatiëringstabblad

• Opvulling - Ruimte binnen het element (tussen inhoud en rand)
• Marge - Ruimte buiten het element (tussen element en buren)

Randentabblad

• Randstijl - Vaste, gestreepte, stippelde of decoratieve lijnen
• Randbreedte - Hoe dik de grens is
• Randkleur - Kleur van de grenslijn
• Straal rand - Hoe afgerond de hoeken zijn
• Box Shadow - Slagschaduw om diepte te creëren

Opmaaktabblad

• Beeldscherm - Hoe het element zich gedraagt (blok, inline, flex, raster, enz.)
• Positie - Hoe het element wordt gepositioneerd (statisch, relatief, absoluut, enz.)
• Flexbox - Bedieningen voor het regelen van kindelementen in rijen of kolommen

Effectentabblad

• Doorzichtigheid - Hoe transparant het element is (0% = onzichtbaar, 100% = vast)
• Transformeren - Schalen, draaien of verplaatsen van het element
• Filters - Vervagen, helderheid, contrast en grijswaarden effecten

Tabblad grootte

• Breedte - Hoe breed het element is
• Hoogte - Hoe groot het element is
• Min/Max breedte & hoogte - Groottebeperkingen
• Object passend - Hoe beelden en video's passen in hun containers
• Verhouding - De verhoudingen handhaven (vierkant, 16:9, enz.)

Tips voor nieuwe gebruikers

Problemen oplossen

Het voorbeeld wordt niet geladen of toont een lege pagina

Wat je ziet: Het rechterpaneel is leeg, wit of toont een fout.

Hoe het te repareren:

1. Klik op de Verversen knop in de voorbeeldwerkbalk.
2. Controleer of uw site werkt door het te openen in een nieuw browsertabblad.
3. Als de site werkt, maar het voorbeeld niet, neem dan contact op met uw sitebeheerder - dit kan een configuratie probleem zijn.

Ik kan geen elementen selecteren als ik erop klik

Wat je ziet: Klik op elementen in de preview doet niets.

Hoe het te repareren:

1. Zorg ervoor dat de Bewerken-modus knop (cursor pictogram) is gemarkeerd in groen.
2. Probeer het voorbeeld te verfrissen met de knop Verversen.
3. Sommige zeer kleine elementen (kleiner dan 5x5 pixels) kunnen niet geselecteerd worden - klik op de nabijgelegen elementen.

Mijn wijzigingen verschijnen niet op de live site

Wat je ziet: Wijzigingen tonen in het voorbeeld, maar niet op de werkelijke site.

Hoe het te repareren:

1. Zorg ervoor dat u hebt geklikt Wijzigingen opslaan onderaan het linkerpaneel (niet alleen alles opslaan).
2. Wis uw browser cache en verfrissen de live site.
3. Als u de site in een andere modus (licht vs donker) bekijkt, schakelt u de modus om te zien of uw wijzigingen daar van toepassing zijn.

Hover effecten werken niet

Wat je ziet: Je stichtte de "hover state," maar er gebeurt niets als je zweeft.

Hoe het te repareren:

1. Zorg ervoor dat u op de :hover knop in de State Selector voor het maken van wijzigingen.
2. Hover effecten werken alleen met een muis - mobiele gebruikers zullen ze niet zien.
3. Controleer of uw originele site stijlen hebben conflicterende zweefeffecten die override van u.

Kleuren zien er verkeerd uit of komen niet overeen met wat ik gekozen heb

Wat je ziet: De kleur picker toont een kleur, maar het element toont een andere.

Hoe het te repareren:

1. Klik nogmaals op het element om het opnieuw te selecteren en de huidige kleurwaarden te vernieuwen.
2. Zorg ervoor dat u de juiste eigenschap bewerkt - Tekstkleur is gescheiden van achtergrond.
3. Bewaar en vernieuw het voorbeeld om het eindresultaat te zien.

Ik kan mijn wijzigingen niet opslaan (de knop Opslaan is grijs)

Wat je ziet: De Alles opslaan en herstellen Alle knoppen zijn uitgeschakeld en grijs.

Hoe het te repareren:
Een oranje banner bovenaan de pagina geeft aan dat demomodus is ingeschakeld. Demomodus voorkomt het opslaan van wijzigingen. Als u wijzigingen wilt opslaan, neem dan contact op met uw sitebeheerder om demomodus uit te schakelen.

Mijn kleurverloop komt niet opdagen

Wat je ziet: Je hebt een kleurverloop gemaakt, maar het element toont nog steeds een effen kleur.

Hoe het te repareren:

1. Zorg ervoor dat u op de Kleurverloop knop (niet Solid) in de achtergrond sectie.
2. Controleer of u minstens 2 kleur stopt met verschillende kleuren.
3. Uw wijzigingen opslaan en het voorbeeld vernieuwen.

Verwante pagina's

Deze gids is voor ComusThumbz site eigenaren en operators. Het richt zich op het gebruik van de Style Manager interface om het uiterlijk van uw site aan te passen zonder codering.