titel: WordPress + Avada in 2026 — de complete gids voor de nieuwe haarvisie.nl
datum: 2026-07-19
Hoi Jamal. Je vroeg om uitgebreide, actuele research: hoe bouw je nu het beste een Avada-site, wat kan er allemaal, welke AI-functies bestaan er, en vooral: hoe zorgen we dat foto's NOOIT meer worden bijgesneden. Hieronder alles op een rij, met bronnen. Onzekere punten heb ik eerlijk gelabeld.
De kern: Avada snijdt foto's bij zodra je 'm dwingt in een vast vak. Zo voorkom je dat:
Waar het misgaat (crop-gevaar):
- Een foto als achtergrond op een Container → snijdt ALTIJD bij (vult de hele container). Dit is het grootste gevaar, want dit wordt vaak voor hero-secties gebruikt.
- Image- of Gallery-element met een vaste ratio (1:1, 16:9...) → crop.
- Image Carousel op "fixed" → crop.
- Masonry-galerij met handmatige ratio's → crop.
Zo doe je het goed (hele haar altijd zichtbaar):
- Gebruik voor kapselfoto's het Image-element of Gallery-element, NIET een container-achtergrond.
- Zet de aspect ratio op "Automatic" → toont de natuurlijke verhouding, geen crop.
- Carousel altijd op "auto" picture size, nooit "fixed".
- Moet een foto toch in een strak vak (bijv. hero)? Gebruik dan object-fit: contain (hele foto past erin) met een merkkleur eromheen (crème of brons) i.p.v. cover. Dan oogt de witruimte als een bewuste keuze, niet als een fout.
- Upload foto's op ~2000px lange zijde, liefst allemaal staand (consistente verhouding).
- WordPress zelf: medium/large gebruiken "soft crop" (geen bijsnijden, alleen verkleinen). Alleen de 150x150 thumbnail wordt hard bijgesneden. Let op: Avada voegt eigen formaten toe die WEL hard kunnen croppen — dat moet een keer in de themacode/Simple Image Sizes gecheckt worden.
- Na wijzigingen: Regenerate Thumbnails draaien.
- Test elke pagina op mobiel (375px) EN desktop: is de kruin zichtbaar, zijn de haarpunten zichtbaar?
Let op (onzeker): voor de contain-truc op een container is er geen kant-en-klare Avada-knop; dat is een klein stukje custom CSS dat we 1x moeten testen voordat het live gaat.
Bron: Avada Image Aspect Ratios, Gallery Element, How Background Images Work in Avada, WordPress add_image_size docs.
Welke versie: bouw op Avada Classic 7.15.x (nieuwste 7.15.6, juli 2026). Stabiel en volwassen.
Let op — "Avada One" komt eraan (maar nog niet nu): ThemeFusion bouwt een compleet nieuw platform met AI-tools + betere Global Colors + abonnementsmodel. Gepland "deze zomer" 2026, maar ZONDER harde datum. Voor een productie-site nu = te vroeg. Wel in de gaten houden voor later.
Merk centraal beheren (design tokens):
- Global Colors: 1 keer je merkkleuren instellen (crème, bronze, goud, zwart) → overal gekoppeld. Verander je 'm, verandert alles mee.
- Global Typography Sets: je merkfonts (Josefin Sans + Hanken Grotesk) 1x vastleggen als set → koppelen aan koppen/tekst/knoppen. Nooit meer los per element instellen.
- Eigen fonts uploaden kan (.woff2 etc.).
Custom header/footer (Avada Layouts): headers, footers en content-gebieden als aparte "layout sections" bouwen, globaal of alleen op bepaalde pagina's. Kan dynamische data tonen (blogs, portfolio) realtime uit de database.
Snelheid (cruciaal want 85% mobiel): de Performance Wizard doorlopen. Belangrijkste instellingen: lazy loading via Avada (niet via plugin), grootste hero-foto NIET lazy laden (beter voor laadtijd), Critical CSS aan, video-facades aan, JS-compiler aan, geen slider/parallax boven de vouw op mobiel. Dit raakt direct je Google-scores (Core Web Vitals).
Mobiel-first: Avada heeft aparte breakpoints per element (klein/middel/groot) → je stelt per onderdeel in hoe het zich op telefoon gedraagt.
Bron: Avada Changelog, Global Options, Performance Wizard, Responsive Options, A New Chapter for Avada.
Muted autoplay video-hero (het "gifje" dat jij wil):
- Native Video-element in Avada: MP4 uploaden, Autoplay = Ja, Mute = Ja (verplicht, anders blokkeert de browser), Loop = Ja.
- Valkuil: geef een achtergrond-video op een container GEEN poster-afbeelding → geeft problemen op mobiel.
- Op mobiel kun je 'm eventueel vervangen door een lichte statische versie voor snelheid.
- Advies: een kort (7-15 sec) muted autoplay-mp4 = licht + scherp, oogt als een gif maar veel beter. Totaalimpressie: kapsels + sfeer + team + salons.
Reels-strip (verticale clips zoals Instagram):
- Avada heeft een native Instagram-element, maar het is ONZEKER of dat Reels/video ondersteunt (en het vereist een Business/Creator-account sinds Meta persoonlijke accounts blokkeerde).
- Zeker werkend: Smash Balloon (Pro) of Spotlight — tonen foto's, Reels en video's in een strip/lightbox, auto-update vanuit je Instagram.
- Zo verschijnt elke reel die je post automatisch ook op de site.
Bron: Avada Video Element, Instagram Element changes, Smash Balloon, Spotlight.
Hele-site-bouwers (uit 1 prompt): ZipWP (~60 sec een site), 10Web (10 AI-agents, kan bestaande site klonen+redesignen, Figma→site), Divi Quick Sites. → Voor Haarvisie NIET nodig: je sites bestaan al en zijn merk-specifiek opgebouwd.
AI in de builder: Elementor AI en Divi AI (tekst/beeld/layout op prompt). Avada AI (jouw thema!) komt als aparte add-on: chat met de Avada-docs, tekst genereren/herschrijven, beeld maken. Status onzeker of het nu al live is → checken in je Avada-account. Layouts volledig laten genereren zit pas in een latere versie.
AI-content plugins: AI Engine (chatbot + tekst/beeld, koppelt aan Claude/OpenAI/Gemini), Bertha AI, GetGenie (koppen, captions, alt-teksten in de editor). Handig als SCHRIJFHULP, met jouw brandstem er nog steeds overheen.
Nieuw fundament: WordPress 7.0 heeft nu een ingebouwde "AI Client" — je stelt 1x je AI-provider in en plugins gebruiken die automatisch. Dit gaat de komende tijd steeds meer plugins raken.
AI-SEO: Rank Math Content AI is in 2026 de sterkste (beste gratis niveau, analyseert concurrenten, nieuw: tracking van verkeer via ChatGPT/Gemini/Perplexity). Beter dan Yoast AI.
Beeld: GEEN generieke AI-beeldplugin gebruiken — jouw eigen fal.ai/Gemini-pijplijn is al afgestemd op de Haarvisie-kwaliteitseisen. Die blijven we gebruiken.
Bron: ZipWP, 10Web, Elementor AI, Divi AI, Avada Roadmap, AI Engine, WordPress AI Client, Rank Math.
contain + merkkleur. Zo NOOIT meer bijgesneden haar.Kort: geen nieuwe hele AI-bouwer nodig, wel slim je bestaande Avada moderniseren + de crop-regels hard inbouwen.
Zeg maar waar je verder mee wil.
🎙️ Bespreek met Jarvis