Werken met de Style Editor in YOOtheme Pro

Met de Style Editor van YOOtheme Pro bepaal je de uitstraling van je hele website. Je past kleuren, lettertypes, afstanden, knoppen en nog veel meer aan, zonder dat je CSS hoeft te schrijven. Alle wijzigingen worden automatisch toegepast op de hele website, waardoor je altijd een consistente huisstijl behoudt.

Wat is de Style Editor?

De Style Editor is de centrale plek waar je de vormgeving van je website beheert. In plaats van iedere pagina afzonderlijk aan te passen, wijzig je hier de algemene stijl. Denk bijvoorbeeld aan:

De kleuren van je website
Lettertypes en tekstgroottes
Ruimte tussen onderdelen (witruimte)
Knoppen en formulieren
Koppen en paragrafen
Achtergronden en schaduwen

Hierdoor ziet iedere pagina er automatisch netjes en consistent uit.

De Style Editor openen

Log in op Joomla.
Open YOOtheme Pro.
Klik links op Style.

Je ziet nu links alle instellingen en rechts een live voorbeeld van je website. Elke wijziging wordt direct zichtbaar in de preview.

Begin altijd met een bestaande stijl

YOOtheme wordt geleverd met verschillende professionele stijlen. Kies daarom altijd eerst een stijl die het beste bij jouw vereniging of organisatie past. Pas daarna de kleuren, lettertypes en overige instellingen aan.

Zo hoef je niet helemaal vanaf nul te beginnen.

De belangrijkste onderdelen

Global

Hier stel je de basis van je website in. Dit is meestal de eerste plek waar je begint.

Hoofdkleuren
Lettertypes
Afstanden
Randen
Schaduwen

Verander je hier iets, dan zie je dit vaak op meerdere plaatsen terug.

Theme

Hier pas je onderdelen aan die specifiek zijn voor YOOtheme, zoals:

Header
Footer
Toolbar
Pagina-container

Componenten

Onder Components vind je alle losse onderdelen van de website. Bijvoorbeeld:

Buttons
Cards
Forms
Navigation
Headings
Tabs
Accordion

Wil je alleen de knoppen aanpassen? Dan doe je dat bij Button. Wil je alleen de formulieren wijzigen? Dan gebruik je Form.

Gebruik de live preview

Tijdens het aanpassen zie je rechts direct het resultaat. Zo kun je eenvoudig beoordelen of een wijziging goed past bij de uitstraling van je website.

Je kunt ook kiezen voor Preview All UI Components. Hiermee toont YOOtheme alle standaard onderdelen op één pagina. Dat is ideaal om snel te controleren of alles mooi op elkaar aansluit.

Een wijziging ongedaan maken

Heb je een instelling aangepast en ben je niet tevreden? Dan kun je deze eenvoudig terugzetten.

Per instelling terugzetten naar de standaardwaarde.
Een compleet onderdeel (Component) resetten.
De volledige Style Editor terugzetten naar de oorspronkelijke stijl.

Experimenteer dus gerust; je kunt altijd terug naar de vorige instellingen.

Onze tips

✔ Kies eerst een bestaande stijl.
✔ Pas daarna de kleuren aan.
✔ Kies maximaal twee verschillende lettertypes.
✔ Gebruik de kleuren van je vereniging of organisatie.
✔ Bekijk na iedere wijziging de live preview.
✔ Houd de vormgeving rustig en overzichtelijk.

Samenvatting

De Style Editor bepaalt de uitstraling van je complete website. Door eerst de algemene instellingen aan te passen en daarna pas de losse onderdelen, bouw je snel een professionele en consistente website zonder programmeerkennis.

Meer informatie

Wil je alle mogelijkheden van de Style Editor bekijken? Bekijk dan de officiële documentatie van YOOtheme:

https://yootheme.com/docs/joomla/style-editor

Bron: Officiële YOOtheme Pro-documentatie.