Otter Blocks – Gutenberg Blocks, Page Builder for Gutenberg Editor & FSE

Beschrijving

Otter is een Gutenberg Blocks paginabouwer plugin die extra functionaliteit toevoegt aan de WordPress Block Editor (ook bekend als Gutenberg) voor een betere pagina-bouwervaring zonder dat je traditionele paginabouwers zoals Elementor en Divi nodig hebt.

Snelle links 🔗

• Wil je OTTER blokken in actie zien voordat je installeert? BEKIJK DE OTTER BLOCKS DEMO
• Nieuw in het Gutenberg Blocks ecosysteem? Bekijk ons artikel over Gutenberg UITGELEGD
• Hulp nodig bij de setup? Bekijk onze DOCUMENTATIE
• Geïnteresseerd in Otter PRO? Hier zijn meer details over OTTER PRO

Met Otter Blocks krijg je toegang tot

• 20+ extra blokken voor Gutenberg
• Verzameling van patronen
• Volledige-pagina templates
• Zichtbaarheidsvoorwaarden
• Aangepaste CSS
• Animaties
• Dynamische content en meer

Voor alle blokken inclusief blokken van derden die op je site aanwezig zijn.

Met de functie aangepaste CSS blok kun je de CSS eigenschappen van elk Gutenberg blok op de pagina direct aanpassen, terwijl de Animation functie het snel en makkelijk maakt om animaties aan elk blok toe te voegen om de aantrekkingskracht van je verschillende pagina blokken en secties te verbeteren.

Met de functie Zichtbaarheidsvoorwaarden van Otter kun je instellen aan welke voorwaarden moet worden voldaan om je gekozen blokken op de pagina weer te geven.

De patronenbibliotheek bevat een bereik aan verschillende elementen in allerlei stijlen om je te helpen geweldige pagina’s te bouwen. Alle belangrijkste gebieden van je site worden gedekt: headers, aanbevelingen, prijstabellen, secties en meer.

Bekijk een snel overzicht van Otter Blocks

Hoe kunnen Otter’s Gutenberg blokken je helpen? 🤔

Een WordPress Gutenberg blokken plugin

Otter voegt 26+ geweldige en handige blokken toe om pagina’s bouwen in Gutenberg een fluitje van een cent te maken!

Meer dan alleen blokken, je hebt geavanceerde aanpassingsopties nodig om je controle te geven over stijl en weergave. Met Otter heb je dat allemaal.

Elk blok heeft aanpassingsondersteuning om je te helpen je site vorm te geven volgens je visie:

• Kleurbesturingselementen voor primair, accenten en achtergronden.
• Animatie ondersteunen, stuiteren, vervagen, spiegelen, roteren, schuiven, rollen, lichtsnelheid en meer met één klik op een knop.
• Typografie besturingselementen van spatiëring tot lettertypekeuze.

Je AI-assistent voor de blok-editor

Otter brengt AI rechtstreeks in de blok-editor om je te helpen bouwen, niet alleen bewerken. Beschrijf wat je wilt, en Otter maakt het als echte, bewerkbare blokken.

• AI content generator: Genereer een volledige sectie of een hele pagina vanuit een simpele prompt met het AI-blok. Kies een type zoals hero, features, prijzen, aanbevelingen of Call To Action, of beschrijf je eigen. Otter stemt af op de kleuren van je thema en de huidige paginastijl, zodat het resultaat on-brand aankomt.

• AI toolbar: Selecteer een willekeurige tekst om te herschrijven, samen te vatten, uit te breiden, in te korten, te vertalen, de toon te wijzigen, grammatica op te lossen of te vereenvoudigen, allemaal zonder de pagina te verlaten. Je kunt ook je eigen aangepaste acties maken met je eigen prompts en de toolbar herschikken zodat het bij je werkwijze past.

• AI formulier autoresponder [PRO]: Reageer op elke formulierinzending met een gepersonaliseerd, door AI geschreven bericht. Schrijf een prompt met je formuliervelden, stel een terugvalbericht in en laat AI de rest maken.

• Native WordPress AI-connectors: De AI van Otter werkt met de native AI-adapters in WordPress 7.0, zodat je je gewenste AI-provider één keer verbindt en elke AI-functie van Otter deze gebruikt.

Mobiele responsiviteit van Otter Blocks

Maak mobielvriendelijke ontwerpen met de ingebouwde responsive instellingen van Otter. Elk blok kan aangepast worden om een consistente ervaring te bieden voor mobiel, tablet en desktop.

Een WordPress Gutenberg blokvoorwaarden plugin

Wil je bepaalde blokken alleen weergeven wanneer een gebruiker is ingelogd of uitgelogd? Of wanneer ze een klant van je winkel zijn versus een redacteur voor je blog of een andere gebruikersrol? Met de functie Gutenberg blokvoorwaarden die beschikbaar is in Otter, is dat mogelijk. Upgraden naar de PRO versie van Otter om de kracht van meer blokvoorwaarden te ontketenen, zoals:

• URL query string
• Datumbereik
• Dag van de week
• Tijd van de dag
• WooCommerce producten in winkelwagen
• WooCommerce totaal uitgegeven
• WooCommerce winkelwagentotaal
• WooCommerce categorieën
• WooCommerce tags
• WooCommerce attributen
• Cookie-gebaseerd
• En meer

Een WordPress Gutenberg blokken animatie plugin

Je sitebezoekers met geweldige animaties die aan elk blok op de pagina toegevoegd kunnen worden. Met meer dan 50+ beschikbare animaties om uit te kiezen; Otter maakt het mogelijk om wat extra flair toe te voegen aan elk bericht of elke pagina op je site

Een WordPress Gutenberg pop-up plugin

Pop-ups zijn een van de oudste technieken op het web om leads opgelost te leggen en meldingen over te brengen. Met het Gutenberg pop-up blok dat beschikbaar is in Otter kun je pop-ups maken van elk ander blok dat beschikbaar is in Gutenberg!

Verfijn je pop-ups door in te stellen wanneer ze moeten verschijnen en hoe ze gesloten kunnen worden. Met ons pop-up blok krijg je toegang tot meerdere triggers zoals bij het laden, bij het verlaten, bij het klikken op een anker en bij het scrollen.

Daarnaast kun je je pop-up ontwerpen met aangepaste overlays die passen bij je merkidentiteit en meer aandacht trekken. Bekijk de live demo

Globale standaardwaarden voor Otter’s blokken

Ben je het beu om elke keer dezelfde opties in te stellen als je een blok aan de pagina toevoegt? Met Otter kun je de standaardconfiguratie instellen voor sommige van de meest gebruikte blokken zoals het Section Block, Icon Block, Advanced koptekst, en meer.

Blokken beschikbaar in Otter:

Accordeon Gutenberg blok [GRATIS]

Gebruik dit blok om verticaal gestapelde lijsten met content te maken die met een klik op de knop getoond of verborgen kunnen worden; beter bekend als Accordions. Bekijk de live demo

Geavanceerde koptekst Gutenberg blok [GRATIS]

Het koptekst blok waarvan je niet wist dat je het nodig had. Dit Otter blok heeft alle functionaliteit van het standaard koptekst blok met een paar andere rechten zoals de ability om het lettertype te wijzigen, delen van de tekst te markeren, en meer. Bekijk de live demo

AI blok [GRATIS]

Bouw met AI, direct in de editor. Beschrijf de sectie of pagina die je wilt, en het AI blok genereert het als echte, bewerkbare Gutenberg blokken, afgestemd op de kleuren van je thema en de stijl van je pagina. Pas achteraf alles handmatig aan, net als bij blokken die je zelf hebt gebouwd.

Knopgroep Gutenberg blok [GRATIS]

Maak snel en eenvoudig meerdere knoppen en toon ze verticaal of horizontaal, afhankelijk van het apparaat waarop de pagina bekeken wordt. Bekijk de live demo

Countdown Gutenberg blok [GRATIS]

Aan het aftellen naar een groot evenement? Laat het zien door deze Gutenberg blokken te gebruiken. Tel af vanaf dagen, uren, minuten of seconden. Bekijk de live demo

Contactformulier Gutenberg blok [GRATIS]

Voeg snel en gemakkelijk een contactformulier toe waar je maar wil op de pagina. Maak van het formulier optioneel een lead-genererende machine door het te integreren met Brevo(Sendinblue) of Mailchimp. Bovendien stroomlijn je databeheer met webhook-integratie en zorg je voor extra beveiliging met hCaptcha-integratie. Bekijk de live demo

Content Timeline blok [GRATIS]

Toon evenementen op een elegante manier in een chronologische tijdlijn. Ideaal om historische gebeurtenissen, processtappen of belangrijke mijlpalen te benadrukken.

Content slider blok [GRATIS]

Een slider waarbij elke slide willekeurige Gutenberg blokken kan bevatten, niet alleen afbeeldingen. Voeg kopteksten, tekst, knoppen, afbeeldingen of volledige lay-outs toe zoals aanbevelings-, prijs- of functiekaarten binnen elke slide, en laat bezoekers er dan doorheen bewegen met pijlen of stippen. Anders dan een standaard afbeeldingsslider verandert de Content Slider alles wat je in Gutenberg bouwt in een veegbare carrousel, zonder dat er een extra plugin nodig is.

Circular Progress blok [GRATIS]

Laat je voortgang zien met een prachtig Circle Counter blok. Bekijk de live demo

Spiegelvakblok [GRATIS]

Maakt een kaart met een spiegeleffect, waar je alle content of blokken kunt invoegen die beschikbaar zijn in Gutenberg. Bekijk de live demo

Icoon lijst Gutenberg blok [GRATIS]

Geef saaie opsommingslijsten een boost door aangepaste iconen als opsommingstekens te gebruiken. Bekijk de live demo

Icoon Gutenberg blok [GRATIS]

Toon elk icoon uit Font Awesome of onze eigen lijst met aangepaste iconen overal op de pagina. Wijzig kleuren, voeg randen toe en combineer met andere blokken om het uiterlijk van je pagina te verbeteren. Bekijk de live demo

Lottie animatie Gutenberg blok [GRATIS]

Heb je al gehoord over Lottie? Geweldig! Met Otter’s Lottie Animation Gutenberg blok kun je Lottie animaties overal in Gutenberg tonen. Bekijk de live demo

Maps Gutenberg blok [GRATIS]

Kies tussen een Open Street Map of Google Maps blok en maak markers voor je points of interest voor de bezoekers van je site. Ons Maps blok helpt je de kaartervaring aan te passen tot in de kleur en beschrijving van de markers, plaatsen te zoeken op naam of coördinaten, kaartbesturingselementen toe te voegen en te verwijderen, of de grootte en stijl van de kaarten met een paar klikken te wijzigen. Bekijk de live demo

Voortgangsbalk blok [GRATIS]

Laat je voortgang zien met een prachtig Progress Bar blok. Bekijk de live demo

Berichten Gutenberg blok [GRATIS]

Gebruik dit blok om items uit berichten, pagina’s en extra berichttypen in de huidige pagina die bewerkt wordt in te voegen. Met het berichten blok kun je een bepaald aantal berichten op verschillende pagina’s tonen. De aanpassingen die voor dit blok beschikbaar zijn dekken gebieden zoals stijlen, berichttypen, instellingen, ontwerpen en lay-out.

Productbeoordeling Gutenberg blok [GRATIS]

Blog je over een product waar je van houdt? Of draai je misschien een beoordelingssite? Gebruik dit blok om een beoordelingstabel voor het item te maken en de functies, voors en tegens en optionele koop-links op te sommen. Bekijk de live demo

Pop-up Gutenberg blok [GRATIS]

Maak verbluffende pop-ups en verfijn wanneer ze moeten verschijnen en hoe ze gesloten kunnen worden. Bekijk de live demo

Slider Gutenberg blok [FREE]

Gebruik dit Gutenberg blok om afbeelding sliders te maken op elke Gutenberg pagina. Instellingen omvatten de hoogte van de slider, vertraging, slides per pagina, autoplay en meer. Bekijk de live demo

Section Gutenberg blok [FREE]

Een kolomblok op steroïden! Met dit blok kun je een sectie maken met tot 6 kolommen die elk een aangepaste achtergrondkleur, afbeelding of gradiënt kunnen hebben. Gebruik de responsive functies van dit blok om de padding en marge in te stellen voor desktop-, tablet- en mobiele weergaven. Bekijk de live demo

Stripe afrekenen [FREE]

Dit blok is erg handig als je een paar producten wil verkopen zonder een hele winkel op te zetten, zoals ebooks, sommige licenties, enz.

Sharing iconen blok [FREE]

Deelknoppen waarmee je sitebezoekers content kunnen delen via elke sociale deeldienst. Bekijk de live demo

Tabs Gutenberg blok [FREE]

Gebruik dit blok om horizontaal gestapelde lijsten met content te maken die met een klik op de knop getoond of verborgen kunnen worden; beter bekend als Tabs. Bekijk de live demo

Toevoegen aan winkelwagen Gutenberg blok [PRO]

Plaats een Toevoegen aan winkelwagen knopblok voor elk WooCommerce product overal op het bericht of de pagina die je aan het bewerken bent.

Kantooruren Gutenberg blok [PRO]

Maak een prachtig vormgegeven tabel met openingstijden en verfijn de instellingen tot alles perfect is.

Live zoekopdracht [PRO]

De Live Search functie verbetert het core blok Search door twee extra attributen toe te voegen ( isLive en postTypes ) die in de inspector onder het Live Search paneel ingesteld kunnen worden.

Modal [PRO]

Modal dialoogvensters implementeren voor een interactieve ervaring, waarbij formulieren, content of aankondigingen direct binnen de pagina lay-out worden weergegeven.

Vergelijkingstabel beoordelen [PRO]

Maak je klaar om je lezers te imponeren met Otter’s “Beoordeling vergelijkingstabel” blok. Maak moeiteloos professioneel ogende productvergelijkingstabellen voor je blog of site.

We voegen voortdurend nieuwe Gutenberg blokken toe aan Otter om je te helpen bij het bouwen van je site pagina’s. Vertel ons gerust wat we missen op ons Support Forum ! Enkele andere blokken zijn:

Kant-en-klare patronen & full-page templates in Otter:

Lanceer je site eenvoudig met onze aanpasbare patronen en WordPress templates voor volledige pagina’s. Importeer kant-en-klare ontwerpen met slechts één klik en ga in een mum van tijd aan de slag.

Ontdek een breed bereik aan Otter patronen en templates voor volledige pagina’s voor diensten, aanbevelingen, prijzen, functies, Call To Action secties en meer. Blader door de beschikbare ontwerpen hier.

Verkrijg meer opties in Otter PRO 🤩

WooCommerce bouwer blokken

Bouw aangepaste enkelvoudige productpagina’s met WooCommerce Builder Blocks by Otter. Alle nieuwe functies zijn ontworpen om je conversieratio te maximaliseren en meer verbeteringen te brengen.

Met Otter PRO krijg je veel meer functies, waaronder:

• Toevoegen aan winkelwagen blok
• Kantoorurenblok
• Modal blok
• Productbeoordeling vergelijkingsblok
• Live zoekopdracht blok
• PRO add-ons voor gratis blokken
• Meer opties voor dynamische content
• Meer opties voor zichtbaarheidsvoorwaarden
• Meer patronen & templates voor volledige pagina’s
• en meer!

Je kunt een live demo van Otter Blocks proberen – geen setup vereist. Klik hier om het uit te proberen.

Voor wie is Otter bedoeld? 👀

• Iedereen die de beste functies van de nieuwe Gutenberg Editor naar boven wil halen met handige en gebruiksvriendelijke Gutenberg blokken.
• Iedereen die overweegt om weg te stappen van traditionele paginabouwers zoals Elementor en Divi bouwer ten gunste van de nieuwe Gutenberg blok-editor.
• Iedereen die snelle Gutenberg pagina’s in recordtijd wil bouwen.
• Iedereen die Gutenberg blokken wil verbergen/tonen op basis van voorwaarden zoals of een gebruiker in- of uitgelogd is.
• Iedereen die animaties aan Gutenberg blokken toe wil toevoegen.

Laten we een paar use cases bekijken 🚀

• Reisbloggers: Verbeter je reisblog met boeiende kaarten met de Maps- en Google Maps-blokken van Otter om je reizen aan de wereld te tonen.

• Non-profitorganisaties: Boei je publiek en promoot je doel met de Circle Counter- en aanbevelingsblokken van Otter om inspirerende succesverhalen te delen.

• Bloggers: Verbeter je blogberichten met deel-iconen, waarmee je lezers makkelijk kunnen delen. Gebruik Slider om afbeeldingsgalerijen te tonen en je publiek te boeien.

• Contentmakers en verkopers van digitale producten: Het Stripe afrekenen Gutenberg blok biedt een handige manier om digitale producten te verkopen, zoals e-books, online cursussen, softwarelicenties of digitale kunst, zonder dat je een volwaardige webshop hoeft op te zetten. Door dit blok te integreren, kun je klanten een gestroomlijnde en veilige afrekenervaring bieden.

• Productbeoordelaars: Maak informatieve en aantrekkelijke vergelijkingen van productbeoordelingen met een beoordeling vergelijkingstabel, waarmee gebruikers weloverwogen beslissingen kunnen nemen.

• Restauranteigenaren: Toon je openingstijden in een stijlvol format met bedrijf Hours-blokken, zodat klanten je makkelijk kunnen vinden.

Word een bijdrager 💁‍♂️

Otter Blocks is een opensource project, en we verwelkomen bijdragers om deel uit te maken van onze levendige community! Help ons de plugin te verbeteren en nog beter te maken – GitHub link

Handige gegevensbronnen 📌

• Lees meer over WordPress op onze blog.
• Geïnteresseerd in onze andere plugins? Neem hier een kijkje.
• Haal het meeste uit Otter Blocks met onze handige YouTube Tutorials Playlist.

De plugin vertrouwt op de dienst achter api.themeisle.com voor toegang tot de patronenlijst, AI prompts en Onboarding. Er is geen account vereist om toegang te krijgen tot de dienst template collectie en het privacybeleid vind je hier.