Hoe maak je inhoudsvensters in WordPress

Een inhoudsvak is een visueel onderscheidende container waarmee je specifieke inhoud kunt omkaderen zodat deze zich onderscheidt van de rest. Het helpt je om belangrijke informatie of speciale aankondigingen te benadrukken, zodat de aandacht van gebruikers op belangrijke details wordt gevestigd.

Inhoudsvakken zijn geschikt om oproep-tot-actie secties, getuigenissen, beoordelingen en belangrijke kenmerken van producten of diensten te laten zien. Er zijn verschillende manieren om inhoudsvakken te maken in WordPress websites.

In het volgende artikel laten we je drie handige methodes zien om inhoudsvakken te maken in WordPress. Blijf bij ons tot het einde.

Eerste methode: het blok Kolommen gebruiken

Je kunt een inhoudsvak op basisniveau maken en ontwerpen met behulp van het standaard WordPress Kolommenblok. Volg de onderstaande stappen.

Stap 01: Kolommenblok toevoegen aan de editor

Zoek de Kolom blok uit de Gutenberg blokbibliotheek door op de knop plus (+) knop en voeg het toe aan je editor.

Voeg het blok Kolommen toe aan je editor

Selecteer de kolom met één cel uit de beschikbare opties.

Selecteer de indeling van de kolom met één cel

Stap 02: Inhoudsblokken toevoegen aan de kolom

Met het blok Kolommen kun je ook andere blokken toevoegen. Je kunt elk blok toevoegen dat je wilt om je inhoud te cureren.

Inhoudsblokken toevoegen aan de kolom

Klik op de plus (+) pictogram op het kolomblok. Het zal de Gutenberg blokbibliotheek openen, waaruit u het volgende kunt kiezen en toevoegen paragraaf blok.

Voeg het Paragraph-blok toe aan het kolommenblok

We zien dat we al tekst hebben toegevoegd aan het kolomblok. Daarna kun je naar wens meer blokken aan de kolommen toevoegen. Stel dat we het blok Afbeelding toevoegen.

Klik op de Kolom pictogram op de werkbalk. Druk op de plus (+) pictogram. Zoek en selecteer de Beeldblok uit de bibliotheek.

Voeg het afbeeldingsblok toe aan het kolommenblok

Je kunt zien dat we een afbeelding hebben toegevoegd aan het kolommenblok.

Afbeelding toegevoegd aan kolommenblok

Stap 03: Het hele kolommenblok aanpassen

Selecteer de hele kolomsectie door op het kolompictogram op de werkbalk te klikken. Ga naar de Tabblad Instellingen. U kunt de Breedte van de kolom van de respectieve optie.

Het hele kolommenblok aanpassen

Ga vervolgens naar de Tabblad Stijlen. Je krijgt opties om de tekstkleur, achtergrondkleur, typografie en afmetingen van het blok aan te passen.

Het kolomblok stylen

Als je naar beneden scrolt, krijg je meer opties om het volgende toe te voegen blokafstand en grens naar het kolommenblok.

Voeg blokafstand en rand toe aan het kolommenblok

Methode Twee: De Ultimate Blocks Plugin gebruiken

Ultimate Blocks is een veelbelovende plugin voor contentmarketing met 25+ aangepaste blokken om je Gutenberg-editor krachtiger te maken. Het heeft verschillende verbluffende blokken waarmee je nog meer goed uitziende inhoudsvakken op je site kunt maken.

Stap 01: Installeer en activeer de Ultimate Blocks Plugin

Ga naar Plugins > Nieuwe plug-in toevoegen. Zoek de Ultimate Blocks plugin door de naam in het zoekvak te typen. Installeer en activeren zodra de plugin hieronder verschijnt.

Installeer en activeer de Ultimate Blocks plugin

Stap 02: Het gestileerde boxblok van de plugin toevoegen aan uw Gutenberg-editor

De Ultimate Blocks plugin bevat een speciaal blok met de naam Gestileerde doos om inhoudsvakken te maken. Zoek het en voeg het toe aan de editor.

Het gestileerde blok van de plugin toevoegen aan je Gutenberg-editor

Het blok biedt vier soorten vakken. Kies degene die je wilt om je bericht weer te geven. Elke box heeft een unieke set functies.

Voor de tutorial selecteren we de Feature Box.

Gestileerde dozen

In de feature box kun je een afbeelding, een titel en een beschrijving toevoegen. Hopelijk kun je ze zelf maken.

Dingen die je aan de functiebox kunt toevoegen

Stap 03: Inhoud toevoegen aan het blok

Standaard kun je met het blok één product weergeven en de kenmerken ervan beschrijven. Maar je kunt meerdere producten toevoegen en weergeven met het blok. Selecteer het kolomtype je wilt definiëren hoeveel producten je wilt weergeven.

Selecteer het kolomtype

Voeg nu inhoud toe aan de opties die u ziet in de Vormgegeven doosblok.

Inhoud toevoegen aan het gestileerde boxblok

Je kunt zien dat we inhoud hebben toegevoegd aan het blok.

Inhoud toegevoegd aan het gestileerde boxblok

Stap 04: Het gestileerde kaderblok aanpassen en stylen

Kom naar de Tabblad Instellingen. Van de Selecteer de optie ModusJe kunt de Feature box veranderen in andere gestileerde boxen zoals hierboven getoond, zoals de notification, bordered en number box.

Daarna, vanaf de Responsieve besturingsoptiekun je de blokkering voor een bepaald apparaattype verbergen.

Het blok Gestileerde box aanpassen

Ga vervolgens naar de Tabblad Stijlen. U kunt de Opvulling en Marge van het blok op dit tabblad.

Het blok Styledoos stylen

Zo kun je een inhoudsvak maken met de Ultimate Blocks plugin.

Derde methode: De TableBerg-plugin gebruiken

TableBerg is een krachtige tabel-bouwer plugin die de standaard tabel-bouw oplossing van WordPress kan versterken. Je kunt met de plugin ook aantrekkelijke inhoudsvensters maken. Laten we eens kijken hoe je dit doet.

Stap 01: Installeer en activeer de TableBerg-plugin

Ga net als de bovenstaande methode naar Plugins > Nieuwe plug-in toevoegen. Zoek de TableBerg plugin door de naam in het zoekvak te typen. Installeer en activeren het.

Installeer en activeer de TableBerg plugin

Stap 02: Voeg het TableBerg-blok toe aan de editor

De plugin wordt geleverd met een blok met de naam TableBerg. Voeg het toe aan de editor.

Zoek en voeg het TableBerg-blok toe aan uw Gutenberg-editor

Als je een tabel wilt maken, kun je hier het aantal rijen en kolommen definiëren, net als bij het standaard tabelblok.

Tabel kolom en rij definiëren

Maar selecteer rij 1 en kolom 0 als we een inhoudsvak maken. Je ziet dat de lay-out meteen is gemaakt.

Inhoud toevoegen aan de TableBerg Box

Stap 03: Inhoud toevoegen aan de TableBerg Box

Met TableBerg kun je verschillende soorten inhoud toevoegen aan de rijen en kolommen door inhoudsblokken toe te voegen.

Zodra je je cursor op het vakje plaatst, zie je rechtsonder de blokoptie verschijnen.

Inhoud toevoegen aan de TableBerg Box

Selecteer één voor één de blokken die je aan de box wilt toevoegen om de gewenste inhoud samen te stellen. Eerst voegen we het afbeeldingsblok toe.

Het afbeeldingsblok toevoegen

Vervolgens kun je zien dat we beschrijvende tekst over het product hebben toegevoegd. We hebben de Paragraaf blok hiervoor.

Paragraaf toevoegen aan het blok

Tot slot hebben we een CTA-knop toegevoegd.

Een CTA-knop toevoegen aan de TableBerg-box

Stap 04: De TableBerg Box aanpassen

Je kunt elk blok dat je hebt toegevoegd aan de TableBerg box afzonderlijk aanpassen. Daarna kun je de hele TableBerg-box aanpassen en stileren.

We laten niet zien hoe je het individuele blok aanpast, omdat de tutorial dan zo lang wordt. Je kunt dit zien op onze documentatiepagina.

Selecteer het hele vak door op het TableBerg-pictogram op de werkbalk te klikken.

Instellingen van de TableBerg Box aanpassen

Op het tabblad Instellingen kun je de gewenste breedte voor het vak instellen.

De breedte van de tabel aanpassen

Van de Tabblad Stijlenkun je de achtergrondkleur, opvulling, marge en ruimte van het vak aanpassen.

Het inhoudsvak aanpassen

Zo kun je een contextbox maken met de TableBerg plugin.

Afwerknotities!

Ultimate Blocks en TableBerg zijn twee multifunctionele plugins die een revolutie teweeg willen brengen in het Gutenberg-systeem, zodat gebruikers eenvoudig geavanceerde inhoud kunnen maken.

TableBerg is nog steeds in ontwikkeling en belooft binnenkort met veel geavanceerde functies te komen. Aan de andere kant is Ultimate Blocks al een populaire plugin die gebruikt wordt door meer dan 60K websites wereldwijd.

Als je vragen hebt over deze producten, stel ze dan gerust via het commentaarvak.



Het Tableberg-team

Early Bird-aanbieding is nu live!
Dit is de standaardtekst voor de meldingsbalk