GLW Cheatsheet – Classes + Waar plak ik dit in Elementor
1) Layout
macro-ritme · structuur
Structuur (Elementor plaatsing)
Outer container
Inner container
Column
glw-section
glw-section-sm
glw-section-lg
glw-container
col
Section modifiers (stackable)
Outer container
stackable
glw-section–pt-none
glw-section–pt-sm
glw-section–pt-md
glw-section–pt-lg
glw-section–pb-none
glw-section–pb-sm
glw-section–pb-md
glw-section–pb-lg
2) Components
herbruikbare blokken
Buttons
Widget (Button)
glw-btn-primary
glw-btn-secondary
glw-btn-tertiary
glw-btn-outline
Cards
Container
stackable
glw-card
Reviews / Testimonials
Widget/Section wrapper
stackable
glw-reviews
3) Widgets
Elementor widget skins
Plakken op widget (Advanced → CSS Classes)
Widget
stackable
glw-list-card
glw-faq
glw-divider
glw-iconbox
5) Dark mode
override per sectie/blok
Plaatsing
Outer container
Component
stackable
glw-dark
glw-bg-dark
Tip
Zet glw-dark bij voorkeur op je outer
.glw-section zodat alles eronder automatisch meeloopt.
4) Utilities
toolbox · stackable helpers
Container/Widget
stackable
Padding
Voor spacing in containers/widgets.
glw-p-0
glw-p-2
glw-p-4
glw-p-6
glw-p-8
glw-px-4
glw-px-6
glw-py-4
glw-py-6
glw-py-8
glw-py-12
glw-pt-4
glw-pt-8
glw-pt-12
glw-pb-4
glw-pb-8
glw-pb-12
Margin
Voor afstand tussen blokken.
glw-m-0
glw-mx-auto
glw-my-4
glw-my-6
glw-mt-4
glw-mt-8
glw-mb-4
glw-mb-8
Text
Typografie helpers + align.
glw-text-xs
glw-text-sm
glw-text-base
glw-text-lg
glw-text-xl
glw-text-2xl
glw-text-3xl
glw-text-left
glw-text-center
glw-text-right
glw-text-white
glw-text-primary
glw-text-secondary
glw-text-muted
Background / Border / Shadow / Display
Opmaak helpers voor containers.
glw-bg-white
glw-bg-primary
glw-bg-primary-light
glw-bg-secondary
glw-bg-gray-50
glw-bg-gray-100
glw-bg-gray-900
glw-rounded-md
glw-rounded-lg
glw-rounded-xl
glw-rounded-full
glw-border
glw-shadow-sm
glw-shadow-md
glw-shadow-lg
glw-hidden
glw-block
glw-inline-block
Geen resultaten. Probeer een andere zoekterm (bijv. btn,
section, dark).
Projectinformatie
🧰 Tools (Performance, Design, SEO, Dev)
Handige links voor testen, design, performance, SEO en meer.
| Categorie | Naam | Link | Omschrijving |
|---|---|---|---|
| Testing & Performance | PageSpeed Insights | pagespeed.web.dev | Test je snelheid en Core Web Vitals (Google). |
| GTmetrix | gtmetrix.com | Analyseer laadtijd en performance. | |
| WebPageTest | webpagetest.org | Diepgaande performance-analyse. | |
| Lighthouse | Lighthouse | SEO, performance en accessibility check (Chrome). | |
| Pingdom Tools | pingdom.com | Snelheid en uptime tests. | |
| Dareboost | dareboost.com | Performance + best practices check. | |
| CSS & Design | Clippy | clippy | CSS clip-path generator. |
| Animista | animista.net | Kant-en-klare CSS-animaties. | |
| Keyframes | keyframes.app | Visuele CSS animation builder. | |
| Neumorphism.io | neumorphism.io | Soft UI stijl generator. | |
| Glassmorphism | glassmorphism | Frosted glass effecten. | |
| Shadows Brumm | shadows.brumm.af | Mooie box-shadow generator. | |
| Kleuren & Gradients | Coolors | coolors.co | Kleurpaletten generator. |
| Color Hunt | colorhunt.co | Inspiratie voor kleurpaletten. | |
| UI Gradients | uigradients.com | Mooie gradients verzamelen. | |
| CSS Gradient | cssgradient.io | Online gradient generator. | |
| MyColorSpace | mycolor.space | Automatische palet- en gradientmaker. | |
| Paletton | paletton.com | Kleurentheorie tool en combinaties. | |
| Fonts & Typography | Google Fonts | fonts.google.com | Gratis en populaire webfonts. |
| Fontpair | fontpair.co | Combineer fonts slim. | |
| Type Scale | type-scale.com | Typografie schalen met ritme. | |
| Wordmark.it | wordmark.it | Voorbeeldteksten in je geïnstalleerde fonts. | |
| Accessibility | Wave | wave.webaim.org | Accessibility checker. |
| Axe DevTools | axe devtools | Accessibility testing in browser. | |
| Contrast Checker | contrast-ratio.com | Check kleurcontrast (WCAG). | |
| Coblis | Coblis | Kleurenblindheid simuleren. | |
| Development | Can I Use | caniuse.com | Browserondersteuning van CSS/JS features. |
| Regex101 | regex101.com | Reguliere expressies testen. | |
| JSON Formatter | jsonformatter.org | JSON valideren en mooi tonen. | |
| SVGOMG | svgomg | SVG’s optimaliseren voor web. | |
| Lottie & Animations | LottieFiles | lottiefiles.com | Gratis en premium Lottie-animaties. |
| Lordicon | lordicon.com | Animerende iconen met Lottie. | |
| Haikei | haikei.app | SVG backgrounds en blobs. | |
| UI Components | CSS Buttons | cssbuttons.io | Voorbeeldbuttons met pure CSS. |
| Get Waves | getwaves.io | SVG wave generator. | |
| Heroicons | heroicons.com | Gratis | |
| ElementUIKit ⭐ | elementuikit.com | UI component library speciaal voor Elementor workflows. |