Eigen Gutenberg-blok of Elementor-widget laten maken
Laatst bijgewerkt:
Je team wil zelf pagina’s maken, maar elke keer ziet een prijstabel, teamoverzicht of vacature er net anders uit. Met een eigen blok voor de WordPress-blokeditor (Gutenberg) of een eigen widget voor Elementor leg je de vorm één keer vast. Je team vult alleen de inhoud in; de opmaak blijft altijd in je huisstijl. Vertel in een paar stappen wat je wilt.
Blok, widget of bestaande bouwstenen?
Kijk eerst wat je bouwer al biedt. Met patronen in de blokeditor, blokkenpakketten zoals Kadence Blocks of de widgets van Elementor kom je vaak al ver. Een herbruikbaar patroon of een opgeslagen sjabloon is gratis en snel.
Een eigen blok of widget is zinvol als:
- de opmaak vast moet liggen en je team die niet per ongeluk mag veranderen;
- het blok gegevens moet ophalen, bijvoorbeeld vacatures, vestigingen of producten;
- je iets nodig hebt wat geen bestaand blok kan, zoals een vergelijker of rekenhulp;
- je losse blokkenpakketten wilt vervangen door één licht blok dat je site sneller houdt.
Voorbeelden
- Prijstabel met vaste opmaak, waarin je alleen pakketnamen, prijzen en kenmerken invult.
- Teamoverzicht dat medewerkers uit een eigen inhoudstype toont, met foto, functie en contactknop.
- Vacatureblok dat automatisch de openstaande vacatures laat zien en ze verbergt zodra de sluitingsdatum voorbij is.
- Vestigingenkaart of -lijst met openingstijden uit één centrale plek.
- Rekenhulp of vergelijker: de bezoeker vult iets in en ziet direct een uitkomst.
- Call-to-action-blok met vaste huisstijl, waarin je team alleen tekst en link kiest.
- Reviews of logo’s uit een eigen lijst, zodat je ze op één plek bijhoudt en overal hetzelfde toont.
Gutenberg-blok: hoe we het bouwen
- Volgens de manier die WordPress aanraadt: een
block.jsonmet de eigenschappen van het blok, en JavaScript (React) voor de bewerkweergave. - Statisch of dynamisch: een statisch blok slaat de HTML op in de pagina; een dynamisch blok maakt de HTML met PHP bij elke weergave, handig voor gegevens die veranderen.
- Instellingen in de zijbalk van de editor, met de kleuren en lettertypen uit je thema waar dat kan.
- Alleen de CSS en scripts van het blok laden op pagina’s waar het blok staat.
- Toegankelijk: koppen, labels, toetsenbordbediening en voldoende contrast.
Elementor-widget: hoe we het bouwen
- Een eigen widget in een aparte plugin, die netjes in het Elementor-paneel verschijnt met eigen besturingselementen.
- Stijlinstellingen die aansluiten op de globale kleuren en lettertypen van je site.
- Werkt met en zonder Elementor Pro, tenzij de widget bewust functies van Pro gebruikt.
- Getest met de huidige Elementor-versie; na grote updates van Elementor controleren we de widget als dat is afgesproken.
Twijfel je tussen de blokeditor en Elementor? Dat hangt af van hoe je site nu gebouwd is. We adviseren je daarover bij de intake.
Werkwijze
- Intake: welk blok, welke inhoud, wie vult het in en op welke pagina’s komt het?
- Ontwerp: we gebruiken je bestaande huisstijl of een schets van jou.
- Voorstel met wat het blok wel en niet kan, prijs, planning en afspraken over onderhoud en eigendom van de code.
- Bouwen en testen op een testomgeving, op desktop en mobiel.
- Live zetten en je team laten zien hoe het werkt.
- Onderhoud: WordPress en Elementor veranderen hun editor regelmatig; we spreken af hoe het blok bijgewerkt blijft.
Wat we van je nodig hebben
- Een voorbeeld of schets van het blok, en welke velden je team moet kunnen invullen.
- Of je site met de blokeditor of met Elementor is gebouwd (weet je het niet, dan zoeken we het uit).
- De domeinnaam van je site en, als je die weet, de WordPress- en PHP-versie.
- Later: toegang tot een testomgeving. Wachtwoorden spreken we veilig af, nooit via een formulier.
Onderhoud en updates
De blokeditor van WordPress en de editor van Elementor krijgen geregeld nieuwe versies. Meestal blijft een goed gebouwd blok gewoon werken, maar soms verandert er iets aan hoe blokken worden opgeslagen of hoe besturingselementen werken. Een blok dat niet meer klopt, zie je in de editor als een melding dat het blok onverwachte inhoud bevat.
Daarom spreken we in het voorstel af wie het blok na grote updates controleert. Dat kan los, of samen met WordPress onderhoud. Wil je later een extra veld of een tweede variant van het blok, dan bouwen we dat bij zonder de bestaande pagina’s te breken. Zie ook plugin aanpassen of uitbreiden.
Veelgestelde vragen
Wat is het verschil tussen een Gutenberg-blok en een Elementor-widget?
Een Gutenberg-blok werkt in de standaard blokeditor van WordPress; een Elementor-widget alleen in Elementor. Welke je nodig hebt, hangt af van hoe je site is gebouwd.
Kan mijn team het blok zelf vullen?
Ja, dat is juist het doel. Je team vult de velden in; de opmaak ligt vast.
Maakt een eigen blok mijn site trager?
Niet als het goed is gebouwd: we laden de bestanden alleen op pagina’s waar het blok staat. Vaak is het lichter dan een groot blokkenpakket.
Wat kost een eigen blok?
Dat hangt af van de complexiteit. Na de intake krijg je een voorstel met een prijs.
Van wie is de code?
Dat leggen we vast in het voorstel.
Eigen blok laten maken
Kies wat voor blok je zoekt, klik voorbeelden aan en vul je domeinnaam in.
Plugin op maat aanvragen Bestaande plugins bekijkenLees ook: WordPress plugin laten maken · plugin aanpassen · Elementor · Kadence Blocks · ACF · WordPress onderhoud